]> git.cworth.org Git - zombocom-ai/commitdiff
projects / zombocom-ai / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 2cad321)
Add a closing message and make the reboot button functional
authorCarl Worth <cworth@cworth.org>
Thu, 22 Dec 2022 03:39:45 +0000 (19:39 -0800)
committerCarl Worth <cworth@cworth.org>
Thu, 22 Dec 2022 03:54:34 +0000 (19:54 -0800)
Also fix a bunch of state transitions, (joining the game in-progress,
rebooting from anywhere, reloading from anywhere).

With the sloppy DOM-manipulation approach I'm using it's pretty
painful to get all of those right, (could have used React or
something, but that has its own set of problems), so I won't promise
that everything is perfect, but I think it's pretty close.

index.js patch | blob | history
tardis.html patch | blob | history

diff --git a/index.js b/index.js
index 91a74aeea4c23e6413717eaba94d266e562707f5..13ed7f6890a4bbd1a6d0fd5617b26c12aceaf705 100644 (file)
--- a/index.js
+++ b/index.js
@@ -250,6 +250,13 @@ function emit_tardis_timer() {
     }
 }
 
+function start_welcome_timer() {
+    const tardis = state.tardis;
+    tardis.timer = 30;
+    emit_tardis_timer();
+    tardis_interval = setInterval(emit_tardis_timer, 1000);
+}
+
 io_tardis.on("connection", (socket) => {
     if (! socket.request.session.name) {
        console.log("Error: Someone showed up at the Tardis without a name.");
@@ -262,6 +269,11 @@ io_tardis.on("connection", (socket) => {
     // Let the new user know the state of the game
     socket.emit("state", tardis.state);
 
+    // And the level if relevant
+    if (tardis.state === "game") {
+       socket.emit("level", levels[tardis.level].title);
+    }
+
     // Put each of our boys into a different room
     switch (name[0]) {
     case 'C':
@@ -287,9 +299,7 @@ io_tardis.on("connection", (socket) => {
     }
 
     if (tardis.companions.count === 0) {
-       tardis.timer = 30;
-       emit_tardis_timer();
-       tardis_interval = setInterval(emit_tardis_timer, 1000);
+       start_welcome_timer();
     }
 
     if (! tardis.companions.names.includes(name)) {
@@ -313,6 +323,21 @@ io_tardis.on("connection", (socket) => {
        }
     });
 
+    socket.on('reboot', () => {
+       const tardis = state.tardis;
+
+       if (show_word_interval) {
+           clearInterval(show_word_interval);
+           show_word_interval = 0;
+       }
+
+       tardis.state = "welcome";
+       io_tardis.emit("state", tardis.state);
+       io_tardis.emit('companions', tardis.companions.count);
+
+       start_welcome_timer();
+    });
+
     socket.on('disconnect', () => {
        const names = tardis.companions.names;
 
diff --git a/tardis.html b/tardis.html
index 1e9e0575eb2e846e0603254c01495f2c4243d1bf..72a9d7d9e782fabd4b9baef9b7ebd8bdcbd53ea1 100644 (file)
--- a/tardis.html
+++ b/tardis.html
@@ -11,6 +11,10 @@
 
   <style>
     @keyframes zoom {
+       from {
+           opacity: 100%;
+           transform: scale(1);
+       }
         to {
            opacity: 0%;
            transform: scale(30);
@@ -87,7 +91,7 @@
 <body>
   <div id="content">
 
-    <div id="welcome">
+    <div id="welcome" style="visibility: hidden">
       <div id="header" align="center">
        <p>
           <img src="/images/928785925_A_Van_Gogh_painting_of_the_Tardis.png">
@@ -119,11 +123,25 @@
       <div id="result">
       </div>
       
-      <button id="reboot">
-       Reboot Tardis
-      </button>
     </div>
 
+    <div id="over" style="visibility: hidden">
+      <img src="/doctor-profile.png" style="float:left; max-width:150px">
+      <h1>Congratulations</h1>
+
+      <p>
+       You're a right handy lot of companions! You made that look
+       almost as impressive as the time I saved the planet of
+       Kashyyyk from certain destruction with nothing more than a
+       pair of knitting needles.
+      </p>
+
+    </div>
+
+    <button id="reboot">
+      Reboot Tardis
+    </button>
+
   </div>
 
   <script src="/socket.io/socket.io.js"></script>
@@ -142,6 +160,7 @@
     const form = document.getElementById("form");
     const input = document.getElementById("input");
     const result = document.getElementById("result");
+    const reboot = document.getElementById("reboot");
 
     function fade_element(elt) {
        elt.style.opacity = "100%";
@@ -154,6 +173,10 @@
        }, 900);
     }
 
+    reboot.addEventListener('click', event => {
+       socket.emit('reboot');
+    });
+
     form.addEventListener('submit', event => {
        event.preventDefault();
        socket.emit('answer', input.value);
@@ -173,17 +196,36 @@
            welcome_message.style.visibility = "hidden";
            timer_div.style.visibility = "hidden";
            header.className = "zoom-tardis";
+           // Clear that className after the animation is complete
+           setTimeout(() => {
+               header.style.visibility = "hidden"
+               header.className = "";
+           }, 2200);
        }
     });
 
     socket.on('state', (state) => {
+       input.value = "";
        if (state === "game") {
            welcome.style.visibility = "hidden";
            game.style.visibility = "visible";
+       } else if (state === "over") {
+           game.style.visibility = "hidden";
+           over.style.visibility = "visible";
+       } else if (state === "welcome") {
+           welcome.style.visibility = "visible";
+           welcome_message.style.visibility = "visible";
+           header.style.opacity = "100%";
+           header.style.transform = "scale(1)";
+           header.style.visibility = "visible";
+           game.style.visibility = "hidden";
+           level_div.style.visibility = "hidden";
+           over.style.visibility = "hidden";
        }
     });
 
     socket.on('level', (level) => {
+       input.value = "";
        level_div.textContent = level;
        level_div.style.visibility = "visible";
     });
@@ -194,6 +236,7 @@
     });
 
     socket.on('correct', () => {
+       input.value = "";
        level_div.style.visibility = "hidden";
        result.textContent = "Complete!";
        result.style.color = "green";
@@ -201,6 +244,7 @@
     });
 
     socket.on('incorrect', () => {
+       input.value = "";
        result.textContent = "Nope!";
        result.style.color = "red";
        fade_element(result);
Unnamed repository; edit this file 'description' to name the repository.