From 964b578d99e662efbab8bcc1db74cfc1bdbf0458 Mon Sep 17 00:00:00 2001
From: Carl Worth <cworth@cworth.org>
Date: Wed, 21 Dec 2022 17:03:29 -0800
Subject: [PATCH] Add a welcome stage to the TARDIS

This gives a 30 second countdown before entering the TARDIS along with
a display of how many companions are present. Finally, it ends with a
zoom into the TARDIS itself.

Next, we just need the puzzle itself.
---
 index.js    | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
 tardis.html | 38 ++++++++++++++++++++++++++++----
 2 files changed, 96 insertions(+), 5 deletions(-)

diff --git a/index.js b/index.js
index 04fe9bb..1fa214b 100644
--- a/index.js
+++ b/index.js
@@ -95,7 +95,16 @@ io.use(wrap(session_middleware));
 // Load comments at server startup
 fs.readFile(state_file, (err, data) => {
     if (err)
-        state = { images: [], targets: [] };
+        state = {
+	    images: [],
+	    targets: [],
+	    tardis: {
+		companions: {
+		    names: [],
+		    count: 0
+		}
+	    }
+	};
     else
         state = JSON.parse(data);
 });
@@ -128,6 +137,58 @@ function tardis_app(req, res) {
 app.get('/tardis', tardis_app);
 app.get('/tardis/', tardis_app);
 
+const io_tardis = io.of("/tardis");
+
+io_tardis.use(wrap(session_middleware));
+
+var tardis_interval;
+
+function emit_tardis_timer() {
+    const tardis = state.tardis;
+    console.log("Emitting timer at " + tardis.timer);
+    io_tardis.emit('timer', tardis.timer);
+    tardis.timer = tardis.timer - 1;
+    if (tardis.timer < 0) {
+	clearInterval(tardis_interval);
+	tardis.timer = 30;
+    }
+}
+
+io_tardis.on("connection", (socket) => {
+    console.log("In connection handler.");
+    if (! socket.request.session.name) {
+	console.log("Error: Someone showed up at the Tardis without a name.");
+	return;
+    }
+
+    const name = socket.request.session.name;
+    const tardis = state.tardis;
+
+    if (tardis.companions.count === 0) {
+	tardis.timer = 30;
+	emit_tardis_timer();
+	tardis_interval = setInterval(emit_tardis_timer, 1000);
+    }
+
+    if (! tardis.companions.names.includes(name)) {
+	tardis.companions.count = tardis.companions.count + 1;
+	console.log("Adding " + name + " for " + tardis.companions.count + " companions");
+	io_tardis.emit('companions', tardis.companions.count);
+    }
+    tardis.companions.names.push(name);
+
+    socket.on('disconnect', () => {
+	const names = tardis.companions.names;
+
+	names.splice(names.indexOf(name), 1);
+
+	if (! tardis.companions.includes(name)) {
+	    tardis.companions.count = tardis.companions.count - 1;
+	    io_tardis.emit('companions', tardis.companions.count);
+	}
+    });
+});
+
 io.on('connection', (socket) => {
 
     // First things first, tell the client their name (if any)
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>
-- 
2.43.0