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

diff --git a/tardis.html b/tardis.html
index ae80bc0..7f5dd9f 100644
--- a/tardis.html
+++ b/tardis.html
@@ -16,7 +16,7 @@
 	    transform: scale(30);
         }
     }
-    .zoom-now {
+    .zoom-tardis {
         animation-name: zoom;
         animation-duration: 2s;
         animation-timing-function: ease-in;
@@ -71,11 +71,13 @@
 	</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">
@@ -94,5 +96,33 @@
     </div>
 
   </div>
+
+  <script src="/socket.io/socket.io.js"></script>
+  <script>
+    const socket = io("/tardis");
+
+    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";
+	}
+    });
+
+  </script>
 </body>
 </html>