Add answer checking and level advancement

[zombocom-ai] / tardis.html

diff --git a/tardis.html b/tardis.html
index cca4e97f60eaaa2580cbeb7c649f6973910e54e3..1e9e0575eb2e846e0603254c01495f2c4243d1bf 100644 (file)
--- a/tardis.html
+++ b/tardis.html
@@ -72,6 +72,15 @@
        font-weight: bold;
        text-align: center;
     }
+    #result {
+       position: fixed;
+       width: 100%;
+       top: 50%;
+       left: 50%;
+       transform: translate(-50%, -50%);
+       font-size: 500%;
+       text-align: center;
+    }
   </style>
 </head>
 
@@ -101,9 +110,15 @@
        &nbsp;
       </div>
       <div id="interface">
-       <input id="input">
-        </input>
+       <form id="form">
+         <input id="input">
+          </input>
+       </form>
+      </div>
+
+      <div id="result">
       </div>
+      
       <button id="reboot">
        Reboot Tardis
       </button>
@@ -124,6 +139,26 @@
     const timer_div = document.getElementById("timer_div");
     const timer = document.getElementById("timer");
     const welcome_message = document.getElementById("welcome-message");
+    const form = document.getElementById("form");
+    const input = document.getElementById("input");
+    const result = document.getElementById("result");
+
+    function fade_element(elt) {
+       elt.style.opacity = "100%";
+       elt.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(() => {
+           elt.style.opacity = "0%";
+           elt.className = "";
+       }, 900);
+    }
+
+    form.addEventListener('submit', event => {
+       event.preventDefault();
+       socket.emit('answer', input.value);
+       input.value = "";
+    });
 
     socket.on('companions', (count) => {
        companions.textContent = count.toString();
@@ -150,18 +185,25 @@
 
     socket.on('level', (level) => {
        level_div.textContent = level;
+       level_div.style.visibility = "visible";
     });
 
     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);
+       fade_element(word_div);
+    });
+
+    socket.on('correct', () => {
+       level_div.style.visibility = "hidden";
+       result.textContent = "Complete!";
+       result.style.color = "green";
+       fade_element(result);
+    });
+
+    socket.on('incorrect', () => {
+       result.textContent = "Nope!";
+       result.style.color = "red";
+       fade_element(result);
     });
 
   </script>