Misc. improvements, require incorrect repeats

nicolator.js

@@ -137,9 +137,10 @@ addEventListener("keyup", event => {
 });
 const check = () => {
 	if (input.value == word) {
-		clearTimeout(timeout);
+		clearTimeout(incorrectTimeout);
+		clearTimeout(timerTimeout);
 		wordDisplay.style.color = "green";
-		wordDisplay.innerHTML += " ✅";
+		wordDisplay.innerHTML = `${word} ⭕`;
 		setTimeout(() => {
 			wordDisplay.style.color = "";
 			reset();
@@ -172,17 +173,22 @@ typeTimePerKanaInput.addEventListener("change", (e) => {
 	typeTimePerKana = typeTimePerKanaInput.value;
 });
 const timerFPS = 60;
+let incorrectTimeout = null;
 let timerTimeout = null;
-let timeout = null;
 let word = null;
+let wrong = false;
 const reset = () => {
 	input.value = "";
 	hint.innerHTML = "";
 	timer.value = 1;
+	if (!wrong) {
 		word = words[Math.round(Math.random() * words.length)];
-	timeout = wordDisplay.innerHTML = word;
+	}
+	wordDisplay.innerHTML = word;
 	const typeTime = typeTimePerKana * word.length;
-	setTimeout(() => {
+	incorrectTimeout = setTimeout(() => {
+		wrong = true;
+		wordDisplay.innerHTML = `${word} ❌`;
 		for (let i = 0; i < word.length; i++) {
 			const letter = word[i];
 			let key = null;
@@ -195,19 +201,19 @@ const reset = () => {
 					}
 				}
 			}
-			let t = `<h3>${letter.toUpperCase()}：`;
+			let t = `<h3>${letter.toUpperCase()}：<kbd`;
 			if (index > 0) {
-				t += "<kbd>";
+				t += ' style="background: ';
 				if (index == 1) {
-					t += "&larr;";
+					t += "yellow";
 				} else if (index == 2) {
-					t += "&rarr;";
+					t += "cyan";
 				} else if (index == 3) {
-					t += "&uarr;";
+					t += "magenta";
 				}
-				t += "</kbd> + ";
+				t += '"';
 			}
-			t += `<kbd>${key}</kbd></h3>`;
+			t += `>${key}</kbd></h3>`;
 			hint.innerHTML += t;
 		}
 	}, typeTime * 1000);
@@ -215,5 +221,6 @@ const reset = () => {
 	timerTimeout = setInterval(() => {
 		timer.value -= (1 / timerFPS) / typeTime;
 	}, 1000 / timerFPS);
+	wrong = false;
 };
 reset();