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 7f5dd9f116668847b1e9ef23b9dca865ae42c38d..cca4e97f60eaaa2580cbeb7c649f6973910e54e3 100644 (file)
--- a/tardis.html
+++ b/tardis.html
@@ -22,6 +22,20 @@
         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%;
@@ -80,11 +94,11 @@
       </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">
@@ -101,6 +115,10 @@
   <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");
@@ -123,6 +141,29 @@
        }
     });
 
+    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>