Implement the logic for sending one word at a time to each boy

[zombocom-ai] / tardis.html

diff --git a/tardis.html b/tardis.html
index ae80bc0acc714dec03f75835bd26c04cdb7d1917..cca4e97f60eaaa2580cbeb7c649f6973910e54e3 100644 (file)
--- a/tardis.html
+++ b/tardis.html
@@ -16,12 +16,26 @@
            transform: scale(30);
         }
     }
-    .zoom-now {
+    .zoom-tardis {
         animation-name: zoom;
         animation-duration: 2s;
         animation-timing-function: ease-in;
        animation-fill-mode: forwards;
     }
+    @keyframes fade {
+       from {
+           opacity: 100%;
+       }
+        to {
+           opacity: 0%;
+        }
+    }
+    .fade-out {
+       animation-name: fade;
+       animation-duration: 0.8s;
+       animation-timing-function: ease-in;
+       animation-fill-mode: forwards;
+    }
     #welcome {
        position: fixed;
        width: 100%;
@@ -71,18 +85,20 @@
        </p>
       </div>
 
-      <p id="welcome-message">
-       Waiting to enter Tardis.
+      <div id="welcome-message">
+       <div id="timer_div" style="visibility: hidden">
+         Entering TARDIS in <span id="timer"></span> seconds.
+       </div>
        <br>
        Companions present: <span id="companions">1</span>/4
-      </p>
+      </div>
     </div>
 
-    <div id="game" style="display: none">
-      <h1 id="step">Step 1: Calibrate the Trans-Dimensional Field Accelerator</h1>
+    <div id="game" style="visibility: hidden">
+      <h1 id="level"></h1>
 
       <div id="word">
-       What
+       &nbsp;
       </div>
       <div id="interface">
        <input id="input">
@@ -94,5 +110,60 @@
     </div>
 
   </div>
+
+  <script src="/socket.io/socket.io.js"></script>
+  <script>
+    const socket = io("/tardis");
+
+    const welcome = document.getElementById("welcome");
+    const game = document.getElementById("game");
+    const level_div = document.getElementById("level");
+    const word_div = document.getElementById("word");
+    const header = document.getElementById("header");
+    const companions = document.getElementById("companions");
+    const timer_div = document.getElementById("timer_div");
+    const timer = document.getElementById("timer");
+    const welcome_message = document.getElementById("welcome-message");
+
+    socket.on('companions', (count) => {
+       companions.textContent = count.toString();
+    });
+
+    socket.on('timer', (value) => {
+       console.log("Receiving timer value of " + value);
+       timer_div.style.visibility = "visible";
+       timer.textContent = value.toString();
+
+       if (value === 0) {
+           welcome_message.style.visibility = "hidden";
+           timer_div.style.visibility = "hidden";
+           header.className = "zoom-tardis";
+       }
+    });
+
+    socket.on('state', (state) => {
+       if (state === "game") {
+           welcome.style.visibility = "hidden";
+           game.style.visibility = "visible";
+       }
+    });
+
+    socket.on('level', (level) => {
+       level_div.textContent = level;
+    });
+
+    socket.on('show-word', (word) => {
+       word_div.textContent = word;
+       word_div.style.opacity = "100%";
+       word_div.className = "fade-out";
+       // Arrange to clear the class name when the animation is over
+       // This will allow for it to be restarted on the next word.
+       setTimeout(() => {
+           word_div.style.opacity = "0%";
+           word_div.className = "";
+       }, 900);
+    });
+
+  </script>
 </body>
 </html>