5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
7 <link href="/zombo.css" rel="stylesheet" type="text/css">
8 <meta name="viewport" content="width=device-width,initial-scale=1">
9 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
10 <meta name="HandheldFriendly" content="true">
25 animation-duration: 2s;
26 animation-timing-function: ease-in;
27 animation-fill-mode: forwards;
39 animation-duration: 0.8s;
40 animation-timing-function: ease-in;
41 animation-fill-mode: forwards;
48 transform: translate(-50%, -50%);
84 transform: translate(-50%, -50%);
94 <div id="welcome" style="visibility: hidden">
95 <div id="header" align="center">
97 <img src="/images/928785925_A_Van_Gogh_painting_of_the_Tardis.png">
101 <div id="welcome-message">
102 <div id="timer_div" style="visibility: hidden">
103 Entering TARDIS in <span id="timer"></span> seconds.
106 Companions present: <span id="companions">1</span>/4
110 <div id="game" style="visibility: hidden">
128 <div id="over" style="visibility: hidden">
129 <img src="/doctor-profile.png" style="float:left; max-width:150px">
130 <h1>Congratulations</h1>
133 You're a right handy lot of companions! You made that look
134 almost as impressive as the time I saved the planet of
135 Kashyyyk from certain destruction with nothing more than a
136 pair of knitting needles.
147 <script src="/socket.io/socket.io.js"></script>
149 const socket = io("/tardis");
151 const welcome = document.getElementById("welcome");
152 const game = document.getElementById("game");
153 const level_div = document.getElementById("level");
154 const word_div = document.getElementById("word");
155 const header = document.getElementById("header");
156 const companions = document.getElementById("companions");
157 const timer_div = document.getElementById("timer_div");
158 const timer = document.getElementById("timer");
159 const welcome_message = document.getElementById("welcome-message");
160 const form = document.getElementById("form");
161 const input = document.getElementById("input");
162 const result = document.getElementById("result");
163 const reboot = document.getElementById("reboot");
165 function fade_element(elt) {
166 elt.style.opacity = "100%";
167 elt.className = "fade-out";
168 // Arrange to clear the class name when the animation is over
169 // This will allow for it to be restarted on the next word.
171 elt.style.opacity = "0%";
176 reboot.addEventListener('click', event => {
177 socket.emit('reboot');
180 form.addEventListener('submit', event => {
181 event.preventDefault();
182 socket.emit('answer', input.value);
186 socket.on('companions', (count) => {
187 companions.textContent = count.toString();
190 socket.on('timer', (value) => {
191 timer_div.style.visibility = "visible";
192 timer.textContent = value.toString();
195 welcome_message.style.visibility = "hidden";
196 timer_div.style.visibility = "hidden";
197 header.className = "zoom-tardis";
198 // Clear that className after the animation is complete
200 header.style.visibility = "hidden"
201 header.className = "";
206 socket.on('state', (state) => {
208 if (state === "game") {
209 welcome.style.visibility = "hidden";
210 game.style.visibility = "visible";
211 } else if (state === "over") {
212 game.style.visibility = "hidden";
213 over.style.visibility = "visible";
214 } else if (state === "welcome") {
215 welcome.style.visibility = "visible";
216 welcome_message.style.visibility = "visible";
217 header.style.opacity = "100%";
218 header.style.transform = "scale(1)";
219 header.style.visibility = "visible";
220 game.style.visibility = "hidden";
221 level_div.style.visibility = "hidden";
222 over.style.visibility = "hidden";
226 socket.on('level', (level) => {
228 level_div.textContent = level;
229 level_div.style.visibility = "visible";
232 socket.on('show-word', (word) => {
233 word_div.textContent = word;
234 fade_element(word_div);
237 socket.on('correct', () => {
239 level_div.style.visibility = "hidden";
240 result.textContent = "Complete!";
241 result.style.color = "green";
242 fade_element(result);
245 socket.on('incorrect', () => {
247 result.textContent = "Nope!";
248 result.style.color = "red";
249 fade_element(result);