From 90e234f77a1985df439c979abbd2264ae70f73ce Mon Sep 17 00:00:00 2001
From: Christian Fehmer <fehmer@users.noreply.github.com>
Date: Sun, 16 Jun 2024 15:37:09 +0200
Subject: [PATCH] fix: typed letters not visible in tts funbox if highlight=off
 (@fehmer) (#5496)

---
 frontend/src/ts/test/test-ui.ts |  3 +++
 frontend/static/funbox/tts.css  | 12 ++++++++++++
 2 files changed, 15 insertions(+)

diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index 94512e7f9..033c7538e 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -790,12 +790,15 @@ export async function updateWordElement(
     const funbox = FunboxList.get(Config.funbox).find(
       (f) => f.functions?.getWordHtml
     );
+    const isTts = FunboxList.get(Config.funbox).find((it) => it.name === "tts");
+
     for (let i = 0; i < input.length; i++) {
       const charCorrect = currentWord[i] === input[i];
 
       let correctClass = "correct";
       if (Config.highlightMode === "off") {
         correctClass = "";
+        if (isTts) correctClass = "visible";
       }
 
       let currentLetter = currentWord[i] as string;
diff --git a/frontend/static/funbox/tts.css b/frontend/static/funbox/tts.css
index 1e6b73267..fbed492cc 100644
--- a/frontend/static/funbox/tts.css
+++ b/frontend/static/funbox/tts.css
@@ -5,3 +5,15 @@
 #words .word {
   color: transparent !important;
 }
+
+#words .word letter.visible {
+  color: var(--sub-color) !important;
+}
+
+#words.flipped .word letter.visible {
+  color: var(--text-color) !important;
+}
+
+#words.flipped.colorfulMode .word letter.visible {
+  color: var(--main-color) !important;
+}