Easy mode: show multiplicity of character

This commit is contained in:
Arne Keller 2022-02-23 15:45:14 +01:00
parent 432fc38bf5
commit 86b1a4fa9c
3 changed files with 50 additions and 2 deletions

View File

@ -51,6 +51,8 @@ body.wide {
} }
.cell { .cell {
position: relative;
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -68,6 +70,18 @@ body.wide {
height: 0.5em; height: 0.5em;
} }
.counter {
display: none;
}
.count .counter {
display: block;
position: absolute;
bottom: 0px;
right: 0px;
font-size: smaller;
}
#keyboard { #keyboard {
margin-top: 1em; margin-top: 1em;
} }

View File

@ -15,6 +15,8 @@
</div> </div>
<div id="options"> <div id="options">
<label><input type="checkbox" id="wide">Breiter Modus</label> <label><input type="checkbox" id="wide">Breiter Modus</label>
<br>
<label><input type="checkbox" id="count">Anzahl bei richtigen Buchstaben</label>
</div> </div>
<textarea id="copyarea"></textarea> <textarea id="copyarea"></textarea>
</div> </div>

View File

@ -210,8 +210,24 @@ function processKey(e) {
const el = data[pos * MAX_GUESSES + guessed.length][i]; const el = data[pos * MAX_GUESSES + guessed.length][i];
if (hints[i] === "correct") { if (hints[i] === "correct") {
el.className = "correct cell done"; 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") { } else if (hints[i] === "position") {
el.className = "wrong-position cell done"; 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 { } else {
el.className = "cell done"; el.className = "cell done";
} }
@ -368,15 +384,31 @@ if (saveData["wide"] !== undefined) {
function setWideMode() { function setWideMode() {
saveData.wide = wideOpt.checked; saveData.wide = wideOpt.checked;
if (saveData.wide) { if (saveData.wide) {
document.body.className = "wide"; document.body.classList.add("wide");
} else { } else {
document.body.className = ""; document.body.classList.remove("wide");
} }
saveLocalStorage(); saveLocalStorage();
} }
wideOpt.addEventListener("change", setWideMode); wideOpt.addEventListener("change", setWideMode);
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 // load previous run
if (daysSinceEpoch in saveData) { if (daysSinceEpoch in saveData) {
const guesses = saveData[daysSinceEpoch].guesses.slice(); const guesses = saveData[daysSinceEpoch].guesses.slice();