[feat] Make keyboard visually track used lettersHEADmain

2 files changed, 21 insertions, 3 deletions

diff --git a/public/index.html b/public/index.html
index 0010c06..12bfdd9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -66,9 +66,9 @@
 
     <table id="keyboard">
       <tr>
-        <td data-key="q" colspan=2 class="absent">Q</td>
-        <td data-key="w" colspan=2 class="present">W</td>
-        <td data-key="e" colspan=2 class="found">E</td>
+        <td data-key="q" colspan=2>Q</td>
+        <td data-key="w" colspan=2>W</td>
+        <td data-key="e" colspan=2>E</td>
         <td data-key="r" colspan=2>R</td>
         <td data-key="t" colspan=2>T</td>
         <td data-key="y" colspan=2>Y</td>
diff --git a/public/main.js b/public/main.js
index 13d83e7..01848b3 100644
--- a/public/main.js
+++ b/public/main.js
@@ -31,6 +31,15 @@ function setRowState(r, s) {
   }, r);
 }
 
+function updateKeyboard(keys) {
+  $$("td[data-key]", e => {
+    if (keys.hasOwnProperty(e.dataset.key)) {
+      e.classList.remove("found","present","absent");
+      e.classList.add(["absent","present","found"][keys[e.dataset.key]]);
+    }
+  });
+}
+
 let done = false;
 let currentRow = 0;
 let currentStr = "";
@@ -51,12 +60,21 @@ function processKey(key) {
   setRow(board[currentRow], currentStr);
 }
 
+const guessedLetters = {};
 async function tryWord() {
   if (currentStr.length !== 6) return alert("Guesses must use all six letters!");
 
   const r = await fetch("/guess/"+currentStr).then(r => r.json());
   if (r.result === false) return alert("Not in word list!");
 
+  for (let i=0;i<6;i++) {
+    const j = currentStr.charAt(i);
+    guessedLetters[j] = Math.max(guessedLetters[j]||0,
+      " -=".indexOf(r.result.charAt(i)));
+  }
+
+  updateKeyboard(guessedLetters);
+
   setRowState(board[currentRow], r.result);
   if (r.result === "======") {
     setTimeout(() => alert("Congratulations!"));