X-Git-Url: https://git.cworth.org/git?a=blobdiff_plain;f=tardis.html;fp=tardis.html;h=1e9e0575eb2e846e0603254c01495f2c4243d1bf;hb=2cad321b858e4fc9f77f4a420dd219713bbb90db;hp=cca4e97f60eaaa2580cbeb7c649f6973910e54e3;hpb=02bec3ec32f0b5af59b7108354f48ed3514eb6b7;p=zombocom-ai

diff --git a/tardis.html b/tardis.html
index cca4e97..1e9e057 100644
--- 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>