[feat] First playable

3 files changed, 65 insertions, 10 deletions

diff --git a/app.js b/app.js
index 97e8c9b..7b5f25c 100644
--- a/app.js
+++ b/app.js
@@ -30,7 +30,7 @@ app.get("/guess/(?<word>[a-z]*)", cors((req, res, match) => {
     match.word.split("").map(c => findAll(c, today()))
       .map((c,i,a) => c.length === 0? " " : c.includes(i)? "=" : c)
       .map((c,i,a) => Array.isArray(c)? c.filter(e => a[e] !== "=") : c)
-      .reduce((a,c) => Array.isArray(c)? a+(c.find(e => !a.includes(e))||" ") : a+c, "")
+      .reduce((a,c) => Array.isArray(c)? a+(c.find(e => !a.includes(e))??" ") : a+c, "")
       .replace(/[0-9]/g, "-");
 
   sj(res, {word: match.word, result});
diff --git a/public/main.js b/public/main.js
index 3f7031b..13d83e7 100644
--- a/public/main.js
+++ b/public/main.js
@@ -4,21 +4,73 @@ const $ = (s,c) => (c||document).querySelector(s);
 function $$(x,y,z,a){a=(z||document).querySelectorAll(x);if(typeof y=="function")[].forEach.call(a,y);return a}
 function m(a,b,c){c=document;b=c.createElement(b||"p");b.innerHTML=a.trim();for(a=c.createDocumentFragment();c=b.firstChild;)a.appendChild(c);return a.firstChild}
 
+const board = [];
 const boardEl = document.createElement("table");
 $("#board").appendChild(boardEl);
 
 for (let i=0;i<6;i++) {
   let o = "<tr>";
-  for (let j=0;j<6;j++) {
-    o += `<td>&nbsp;</td>`
-  }
-  o = m(o, "table");
+  for (let j=0;j<6;j++) o += `<td>&nbsp;</td>`;
+  o = m(o, "tbody");
   boardEl.appendChild(o);
+  board.push(o);
+}
+
+function setRow(r, s) {
+  s = s.toUpperCase();
+  $$("td", (e,i) => e.innerHTML = s.charAt(i)||"&nbsp;", r);
+}
+
+function setRowState(r, s) {
+  $$("td", (e,i) => {
+    e.classList.add({
+      "=":"found",
+      "-":"present",
+      " ":"absent"
+    }[s.charAt(i)]);
+  }, r);
 }
 
+let done = false;
+let currentRow = 0;
+let currentStr = "";
 function processKey(key) {
-  if (!/^([a-z]|enter|bspc)$/.test(key)) return;
-  console.log(key);
+  if (done || !/^([a-z]|enter|bspc)$/.test(key)) return;
+
+  if (key === "enter") {
+    return tryWord();
+
+  } else if (key === "bspc") {
+    currentStr = currentStr.slice(0,-1);
+
+  } else {
+    currentStr += key;
+    currentStr = currentStr.slice(0,6);
+  }
+
+  setRow(board[currentRow], currentStr);
+}
+
+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!");
+
+  setRowState(board[currentRow], r.result);
+  if (r.result === "======") {
+    setTimeout(() => alert("Congratulations!"));
+    done = true;
+    return;
+  }
+
+  currentStr = "";
+  currentRow++;
+
+  if (currentRow === 6) {
+    setTimeout(() => alert("Better luck next time!"));
+    done = true;
+  }
 }
 
 document.addEventListener("keydown", e =>
@@ -26,6 +78,9 @@ document.addEventListener("keydown", e =>
     processKey(e.key.toLowerCase()
       .replace("backspace", "bspc")));
 
+$$("td[data-key]", k => k.addEventListener("click",
+  () => processKey(k.dataset.key)));
+
 //if ("serviceWorker" in navigator) {
 //  navigator.serviceWorker.register("sw.js")
 //    .then(() => console.log("Service worker registered"));
diff --git a/public/style.css b/public/style.css
index f2113e0..97aeca9 100644
--- a/public/style.css
+++ b/public/style.css
@@ -79,9 +79,9 @@ td[data-key=bspc]::after {
 }
 
 td[data-key]:hover { box-shadow: 0 0 0 3px #0002; }
-td.absent  { background: #aaa }
-td.present { background: #f9c74f }
-td.found   { background: #90be6d }
+td.absent  { background: #aaa !important }
+td.present { background: #f9c74f !important }
+td.found   { background: #90be6d !important }
 
 footer p {
   padding: 0 0 .6em;