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">
21 animation-duration: 2s;
22 animation-timing-function: ease-in;
23 animation-fill-mode: forwards;
35 animation-duration: 0.8s;
36 animation-timing-function: ease-in;
37 animation-fill-mode: forwards;
44 transform: translate(-50%, -50%);
82 <div id="header" align="center">
84 <img src="/images/928785925_A_Van_Gogh_painting_of_the_Tardis.png">
88 <div id="welcome-message">
89 <div id="timer_div" style="visibility: hidden">
90 Entering TARDIS in <span id="timer"></span> seconds.
93 Companions present: <span id="companions">1</span>/4
97 <div id="game" style="visibility: hidden">
114 <script src="/socket.io/socket.io.js"></script>
116 const socket = io("/tardis");
118 const welcome = document.getElementById("welcome");
119 const game = document.getElementById("game");
120 const level_div = document.getElementById("level");
121 const word_div = document.getElementById("word");
122 const header = document.getElementById("header");
123 const companions = document.getElementById("companions");
124 const timer_div = document.getElementById("timer_div");
125 const timer = document.getElementById("timer");
126 const welcome_message = document.getElementById("welcome-message");
128 socket.on('companions', (count) => {
129 companions.textContent = count.toString();
132 socket.on('timer', (value) => {
133 console.log("Receiving timer value of " + value);
134 timer_div.style.visibility = "visible";
135 timer.textContent = value.toString();
138 welcome_message.style.visibility = "hidden";
139 timer_div.style.visibility = "hidden";
140 header.className = "zoom-tardis";
144 socket.on('state', (state) => {
145 if (state === "game") {
146 welcome.style.visibility = "hidden";
147 game.style.visibility = "visible";
151 socket.on('level', (level) => {
152 level_div.textContent = level;
155 socket.on('show-word', (word) => {
156 word_div.textContent = word;
157 word_div.style.opacity = "100%";
158 word_div.className = "fade-out";
159 // Arrange to clear the class name when the animation is over
160 // This will allow for it to be restarted on the next word.
162 word_div.style.opacity = "0%";
163 word_div.className = "";