From 5127266fce69bd135e6a8269c69e1340aa4e214c Mon Sep 17 00:00:00 2001
From: Arne Keller <arne.keller@posteo.de>
Date: Wed, 23 Feb 2022 15:12:20 +0100
Subject: [PATCH] Display status on keyboard

---
 index.js | 47 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/index.js b/index.js
index 8f6111e..838b53e 100644
--- a/index.js
+++ b/index.js
@@ -123,6 +123,32 @@ function gameOver() {
 	}, 0);
 }
 
+let keys = {};
+let characters = [{}, {}, {}, {}];
+
+function makeGradient(a, b, c, d) {
+	const CORRECT = "rgb(0 204 136)";
+	const POSITION = "rgb(255 204 0)";
+	const OTHER = "rgb(156, 163, 175)";
+	const color = {
+		"correct": CORRECT,
+		"position": POSITION
+	};
+	if (a === "nope" && b === "nope" && c === "nope" && d === "nope") {
+		return "rgb(21 94 117)";
+	}
+	const style = "conic-gradient(" +
+		(color[a] || OTHER) + " 0deg," +
+		(color[a] || OTHER) + " 90deg," +
+		(color[b] || OTHER) + " 90deg," +
+		(color[b] || OTHER) + " 180deg," +
+		(color[c] || OTHER) + " 180deg," +
+		(color[c] || OTHER) + " 270deg," +
+		(color[d] || OTHER) + " 270deg," +
+		(color[d] || OTHER) + " 360deg)";
+	return style;
+}
+
 function processKey(e) {
 	if (e.key === "Enter" && guessed.length < MAX_GUESSES) {
 		if (input.length < 5) {
@@ -145,6 +171,7 @@ function processKey(e) {
 				if (word[i] === input[i]) {
 					hints[i] = "correct";
 					used[i] = true;
+					characters[pos][input[i]] = "correct";
 				}
 			}
 			for (let i = 0; i < WORD_LENGTH; i++) {
@@ -159,10 +186,18 @@ function processKey(e) {
 					if (input[i] === word[j]) {
 						hints[i] = "position";
 						used[j] = true;
+						if (characters[pos][input[i]] !== "correct") {
+							characters[pos][input[i]] = "position";
+						}
 						break;
 					}
 				}
 			}
+			for (let i = 0; i < WORD_LENGTH; i++) {
+				if (!characters[pos][input[i]]) {
+					characters[pos][input[i]] = "nope";
+				}
+			}
 			for (let i = 0; i < WORD_LENGTH; i++) {
 				const el = data[pos * MAX_GUESSES + guessed.length][i];
 				if (hints[i] === "correct") {
@@ -183,6 +218,17 @@ function processKey(e) {
 		}
 		saveLocalStorage();
 		input = "";
+		for (let char in keys) {
+			const c = char.toUpperCase();
+			if (characters[0][c] || characters[1][c] || characters[2][c] || characters[3][c]) {
+				keys[char].style.background = makeGradient(characters[0][c], characters[1][c], characters[2][c], characters[3][c]);
+				if (characters[0][c] === "nope" && characters[1][c] === "nope" && characters[2][c] === "nope" && characters[3][c] === "nope") {
+					keys[char].style.opacity = "0.5";
+				} else {
+					keys[char].style.color = "#000";
+				}
+			}
+		}
 		if (guessed.length == MAX_GUESSES || done.indexOf(false) === -1) {
 			gameOver();
 		}
@@ -250,6 +296,7 @@ for (let i = 0; i < 3; i++) {
 		button.className = "key";
 		button.addEventListener("click", e => processKey({ key: c }));
 		row.appendChild(button);
+		keys[c] = button;
 	}
 }