Add a closing message and make the reboot button functional

[zombocom-ai] / tardis.html
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);