X-Git-Url: https://git.cworth.org/git?a=blobdiff_plain;f=tardis.html;fp=tardis.html;h=cca4e97f60eaaa2580cbeb7c649f6973910e54e3;hb=02bec3ec32f0b5af59b7108354f48ed3514eb6b7;hp=7f5dd9f116668847b1e9ef23b9dca865ae42c38d;hpb=964b578d99e662efbab8bcc1db74cfc1bdbf0458;p=zombocom-ai

diff --git a/tardis.html b/tardis.html
index 7f5dd9f..cca4e97 100644
--- 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>