From 86b1a4fa9c9bc103c24cc88d25abcdee16860710 Mon Sep 17 00:00:00 2001 From: Arne Keller Date: Wed, 23 Feb 2022 15:45:14 +0100 Subject: [PATCH] Easy mode: show multiplicity of character --- index.css | 14 ++++++++++++++ index.html | 2 ++ index.js | 36 ++++++++++++++++++++++++++++++++++-- 3 files changed, 50 insertions(+), 2 deletions(-) diff --git a/index.css b/index.css index 150fcc7..3a1a9a8 100644 --- a/index.css +++ b/index.css @@ -51,6 +51,8 @@ body.wide { } .cell { + position: relative; + display: inline-flex; justify-content: center; align-items: center; @@ -68,6 +70,18 @@ body.wide { height: 0.5em; } +.counter { + display: none; +} + +.count .counter { + display: block; + position: absolute; + bottom: 0px; + right: 0px; + font-size: smaller; +} + #keyboard { margin-top: 1em; } diff --git a/index.html b/index.html index ef0ecbb..975c34d 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,8 @@
+
+
diff --git a/index.js b/index.js index bac52dd..12b8fe5 100644 --- a/index.js +++ b/index.js @@ -210,8 +210,24 @@ function processKey(e) { const el = data[pos * MAX_GUESSES + guessed.length][i]; if (hints[i] === "correct") { el.className = "correct cell done"; + // add count for easy mode + const count = word.length - word.replaceAll(input[i], "").length; + if (count > 1) { + const counter = document.createElement("span"); + counter.className = "counter"; + counter.innerText = count; + data[pos * MAX_GUESSES + guessed.length][i].appendChild(counter); + } } else if (hints[i] === "position") { el.className = "wrong-position cell done"; + // add count for easy mode + const count = word.length - word.replaceAll(input[i], "").length; + if (count > 1) { + const counter = document.createElement("span"); + counter.className = "counter"; + counter.innerText = count; + data[pos * MAX_GUESSES + guessed.length][i].appendChild(counter); + } } else { el.className = "cell done"; } @@ -368,15 +384,31 @@ if (saveData["wide"] !== undefined) { function setWideMode() { saveData.wide = wideOpt.checked; if (saveData.wide) { - document.body.className = "wide"; + document.body.classList.add("wide"); } else { - document.body.className = ""; + document.body.classList.remove("wide"); } saveLocalStorage(); } wideOpt.addEventListener("change", setWideMode); setWideMode(); +let countOpt = document.getElementById("count"); +if (saveData["count"] !== undefined) { + countOpt.checked = saveData["count"]; +} +function setCountMode() { + saveData.count = countOpt.checked; + if (saveData.count) { + document.body.classList.add("count"); + } else { + document.body.classList.remove("count"); + } + saveLocalStorage(); +} +countOpt.addEventListener("change", setCountMode); +setCountMode(); + // load previous run if (daysSinceEpoch in saveData) { const guesses = saveData[daysSinceEpoch].guesses.slice();