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

And for the boy's devices to fade each word out.

We're cueing off the first letter of each boy's name to ensure they
end up in different rooms. (So if people join the game with a name
whose first letter is other than 'C', 'H', 'A', or 'S' they will be
put into a random room.)

There isn't any answer checking yet, so currently the game will be
stuck in the first level, (even though the content for the other
levels _is_ available in the server).

diff --git a/index.js b/index.js
index 1fa214bdb28ef79e512980de989f12d40f75e94a..cc1bcdab4f9ea8fcd756c9feb6689ac8c47c0237 100644 (file)
--- a/index.js
+++ b/index.js
@@ -102,7 +102,9 @@ fs.readFile(state_file, (err, data) => {
                companions: {
                    names: [],
                    count: 0
-               }
+               },
+               state: "welcome",
+               level: 0
            }
        };
     else
@@ -142,20 +144,78 @@ const io_tardis = io.of("/tardis");
 io_tardis.use(wrap(session_middleware));
 
 var tardis_interval;
+var game_timer;
+
+const levels = [
+    {
+       title: "Calibrate the Trans-Dimensional Field Accelerator",
+       words: [
+           "What", "was", "the", "year", "of", "Coda's", "birth?"
+       ],
+       answer: 2098
+    },
+    {
+       title: "Reverse the Polarity of the Neutrino Flow Coil",
+       words: [
+           "How", "many", "years", "had", "Zombo.com", "been", "running",
+           "when", "Coda", "sent", "the", "message", "you", "first",
+           "received?"
+       ],
+       answer: 123
+    },
+    {
+       title: "Give a good whack to Hydro-chronometric Energy Feedback Retro-stabilizer",
+       words: [
+           "What", "is", "the", "sum", "of", "Cameron's", "age", "plus", "Andrew's", "age", "at", "Christmas", "time", "the", "year", "when", "Hyrum's", "age", "is", "25", "years", "older", "than", "Scott's", "age", "will", "have", "been", "when", "Scott's", "age", "will", "be", "half", "of", "Dad's", "age?"
+       ],
+       answer: 111
+    },
+    {
+       title: "Disable the Fragmentary Spatio-temporal Particle Detector",
+       words: [
+           "What", "is", "the", "product", "of", "the", "last", "three", "numbers?"
+       ],
+       answer: 28643994
+    }
+];
+
+var show_word_interval;
+
+function show_word() {
+    const tardis = state.tardis;
+    const room = "room-" + (tardis.word % 4).toString();
+    const word = levels[tardis.level].words[tardis.word];
+    io_tardis.to(room).emit('show-word', word);
+    tardis.word = tardis.word + 1;
+    if (tardis.word >= levels[tardis.level].words.length)
+       tardis.word = 0;
+}
+
+function start_game() {
+    const tardis = state.tardis;
+
+    tardis.state = "game";
+    tardis.level = 0;
+    tardis.word = 0;
+
+    // Let all companions know the state of the game
+    io_tardis.emit("level", levels[tardis.level].title);
+    io_tardis.emit("state", tardis.state);
+    show_word_interval = setInterval(show_word, 1200);
+}
 
 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;
+       setTimeout(start_game, 3000);
     }
 }
 
 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;
@@ -164,6 +224,33 @@ io_tardis.on("connection", (socket) => {
     const name = socket.request.session.name;
     const tardis = state.tardis;
 
+    // Let the new user know the state of the game
+    socket.emit("state", tardis.state);
+
+    // Put each of our boys into a different room
+    switch (name[0]) {
+    case 'C':
+    case 'c':
+       socket.join("room-0");
+       break;
+    case 'H':
+    case' h':
+       socket.join("room-1");
+       break;
+    case 'A':
+    case 'a':
+       socket.join("room-2");
+       break;
+    case 'S':
+    case 's':
+       socket.join("room-3");
+       break;
+    default:
+       const room = Math.floor(Math.random()*4);
+       socket.join("room-"+room.toString());
+       break;
+    }
+
     if (tardis.companions.count === 0) {
        tardis.timer = 30;
        emit_tardis_timer();
@@ -172,7 +259,6 @@ io_tardis.on("connection", (socket) => {
 
     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);
@@ -182,7 +268,7 @@ io_tardis.on("connection", (socket) => {
 
        names.splice(names.indexOf(name), 1);
 
-       if (! tardis.companions.includes(name)) {
+       if (! names.includes(name)) {
            tardis.companions.count = tardis.companions.count - 1;
            io_tardis.emit('companions', tardis.companions.count);
        }

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>