Easy mode: show multiplicity of character

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;
 }

index.html

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

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();