Skip to content

Commit 9f924f3

Browse files
MiodecMiodec
authored
refactor: rework highlight mode, colorful, flipped and blind to pure css (#5568)
1 parent 087bf55 commit 9f924f3

11 files changed

Lines changed: 360 additions & 302 deletions

File tree

‎frontend/src/styles/test.scss‎

Lines changed: 191 additions & 153 deletions
Large diffs are not rendered by default.

‎frontend/src/ts/controllers/input-controller.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -261,7 +261,7 @@ async function handleSpace(): Promise<void> {
261261
if (Config.stopOnError === "word") {
262262
dontInsertSpace = false;
263263
Replay.addReplayEvent("incorrectLetter", "_");
264-
void TestUI.updateWordElement(true);
264+
void TestUI.updateWordElement();
265265
void Caret.updatePosition();
266266
}
267267
return;
@@ -661,7 +661,7 @@ function handleChar(
661661
!thisCharCorrect
662662
) {
663663
if (!Config.blindMode) {
664-
void TestUI.updateWordElement(undefined, TestInput.input.current + char);
664+
void TestUI.updateWordElement(TestInput.input.current + char);
665665
}
666666
return;
667667
}

‎frontend/src/ts/test/test-ui.ts‎

Lines changed: 12 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,6 @@ ConfigEvent.subscribe((eventKey, eventValue, nosave) => {
178178
if (typeof eventValue !== "boolean") return;
179179
if (eventKey === "flipTestColors") flipColors(eventValue);
180180
if (eventKey === "colorfulMode") colorful(eventValue);
181-
if (eventKey === "highlightMode") void updateWordElement(eventValue);
182181
if (eventKey === "burstHeatmap") void applyBurstHeatmap();
183182
});
184183

@@ -238,19 +237,12 @@ export function updateActiveElement(
238237
initial = false
239238
): void {
240239
const active = document.querySelector("#words .active");
240+
if (!backspace) {
241+
active?.classList.add("typed");
242+
}
241243
if (Config.mode === "zen" && backspace) {
242244
active?.remove();
243245
} else if (active !== null) {
244-
if (
245-
["word", "next_word", "next_two_words", "next_three_words"].includes(
246-
Config.highlightMode
247-
) &&
248-
Config.theme !== "shadow"
249-
) {
250-
active.querySelectorAll("letter").forEach((e) => {
251-
e.classList.remove("correct");
252-
});
253-
}
254246
active.classList.remove("active");
255247
}
256248
const activeWord =
@@ -262,13 +254,11 @@ export function updateActiveElement(
262254

263255
activeWord.classList.add("active");
264256
activeWord.classList.remove("error");
257+
activeWord.classList.remove("typed");
258+
265259
activeWordTop = (document.querySelector("#words .active") as HTMLElement)
266260
.offsetTop;
267-
if (Config.highlightMode === "word") {
268-
activeWord.querySelectorAll("letter").forEach((e) => {
269-
e.classList.add("correct");
270-
});
271-
}
261+
272262
if (!initial && shouldUpdateWordsInputPosition()) {
273263
void updateWordsInputPosition();
274264
}
@@ -757,10 +747,7 @@ export async function screenshot(): Promise<void> {
757747
}, 3000);
758748
}
759749

760-
export async function updateWordElement(
761-
showError = !Config.blindMode,
762-
inputOverride?: string
763-
): Promise<void> {
750+
export async function updateWordElement(inputOverride?: string): Promise<void> {
764751
const input = inputOverride ?? TestInput.input.current;
765752
const wordAtIndex = document.querySelector(
766753
"#words .word.active"
@@ -821,26 +808,13 @@ export async function updateWordElement(
821808
}
822809
}
823810

824-
let wordHighlightClassString = correctSoFar ? "correct" : "incorrect";
825-
826-
if (Config.blindMode) {
827-
wordHighlightClassString = "correct";
828-
}
829-
830811
const funbox = FunboxList.get(Config.funbox).find(
831812
(f) => f.functions?.getWordHtml
832813
);
833-
const isTts = FunboxList.get(Config.funbox).find((it) => it.name === "tts");
834814

835815
for (let i = 0; i < input.length; i++) {
836816
const charCorrect = currentWord[i] === input[i];
837817

838-
let correctClass = "correct";
839-
if (Config.highlightMode === "off") {
840-
correctClass = "";
841-
if (isTts) correctClass = "visible";
842-
}
843-
844818
let currentLetter = currentWord[i] as string;
845819
let tabChar = "";
846820
let nlChar = "";
@@ -858,53 +832,31 @@ export async function updateWordElement(
858832
}
859833

860834
if (charCorrect) {
861-
ret += `<letter class="${
862-
Config.highlightMode === "word"
863-
? wordHighlightClassString
864-
: correctClass
865-
} ${tabChar}${nlChar}">${currentLetter}</letter>`;
835+
ret += `<letter class="correct ${tabChar}${nlChar}">${currentLetter}</letter>`;
866836
} else if (
867837
currentLetter !== undefined &&
868838
CompositionState.getComposing() &&
869839
i >= CompositionState.getStartPos() &&
870840
!(containsKorean && !correctSoFar)
871841
) {
872-
ret += `<letter class="${
873-
Config.highlightMode === "word" ? wordHighlightClassString : ""
874-
} dead">${
842+
ret += `<letter class="dead">${
875843
Config.indicateTypos === "replace"
876844
? input[i] === " "
877845
? "_"
878846
: input[i]
879847
: currentLetter
880848
}</letter>`;
881-
} else if (!showError) {
882-
if (currentLetter !== undefined) {
883-
ret += `<letter class="${
884-
Config.highlightMode === "word"
885-
? wordHighlightClassString
886-
: correctClass
887-
} ${tabChar}${nlChar}">${currentLetter}</letter>`;
888-
}
889849
} else if (currentLetter === undefined) {
890850
if (!Config.hideExtraLetters) {
891851
let letter = input[i];
892852
if (letter === " " || letter === "\t" || letter === "\n") {
893853
letter = "_";
894854
}
895-
ret += `<letter class="${
896-
Config.highlightMode === "word"
897-
? wordHighlightClassString
898-
: "incorrect"
899-
} extra ${tabChar}${nlChar}">${letter}</letter>`;
855+
ret += `<letter class="incorrect extra ${tabChar}${nlChar}">${letter}</letter>`;
900856
}
901857
} else {
902858
ret +=
903-
`<letter class="${
904-
Config.highlightMode === "word"
905-
? wordHighlightClassString
906-
: "incorrect"
907-
} ${tabChar}${nlChar}">` +
859+
`<letter class="incorrect ${tabChar}${nlChar}">` +
908860
(Config.indicateTypos === "replace"
909861
? input[i] === " "
910862
? "_"
@@ -930,12 +882,7 @@ export async function updateWordElement(
930882
} else if (currentWord[i] === "\n") {
931883
ret += `<letter class='nlChar'><i class="fas fa-level-down-alt fa-rotate-90 fa-fw"></i></letter>`;
932884
} else {
933-
ret +=
934-
`<letter class="${
935-
Config.highlightMode === "word" ? wordHighlightClassString : ""
936-
}">` +
937-
currentWord[i] +
938-
"</letter>";
885+
ret += `<letter>` + currentWord[i] + "</letter>";
939886
}
940887
}
941888

‎frontend/static/funbox/tts.css‎

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,3 @@
1-
/* #words {
2-
opacity: 0 !important;
3-
} */
4-
5-
#words .word {
6-
color: transparent !important;
7-
}
8-
9-
#words .word letter.visible {
10-
color: var(--sub-color) !important;
11-
}
12-
13-
#words.flipped .word letter.visible {
14-
color: var(--text-color) !important;
15-
}
16-
17-
#words.flipped.colorfulMode .word letter.visible {
18-
color: var(--main-color) !important;
1+
#words {
2+
--untyped-letter-color: transparent !important;
193
}

‎frontend/static/themes/aurora.css‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -65,15 +65,33 @@ header .config .group .buttons .textButton.active,
6565
#result .stats .group .bottom,
6666
nav .textButton:hover,
6767
header .config .group .buttons .textButton:hover,
68-
a:hover,
69-
#words.flipped .word {
68+
a:hover {
7069
animation: aurora 5s linear infinite;
7170
}
7271

73-
#words.flipped .word letter.correct {
74-
color: var(--sub-color);
72+
#words {
73+
--correct-letter-animation: aurora 5s linear infinite;
7574
}
7675

77-
#words:not(.flipped) .word letter.correct {
76+
#words.flipped {
77+
--untyped-letter-color: var(--sub-color);
78+
--correct-letter-animation: none;
79+
--untyped-letter-animation: aurora 5s linear infinite;
80+
}
81+
82+
#words .word.typed letter.correct,
83+
#words.highlight-word .word.typed letter,
84+
#words.highlight-next-word .word.typed letter,
85+
#words.highlight-next-two-words .word.typed letter,
86+
#words.highlight-next-three-words .word.typed letter {
87+
animation: aurora 5s linear infinite;
88+
}
89+
90+
#words.flipped .word.typed letter {
91+
animation: none;
92+
}
93+
94+
#words.highlight-off .word letter,
95+
#words.highlight-off .word.typed letter {
7896
animation: aurora 5s linear infinite;
7997
}

‎frontend/static/themes/fire.css‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -65,15 +65,33 @@ header .config .group .buttons .textButton.active,
6565
#result .stats .group .bottom,
6666
nav .textButton:hover,
6767
header .config .group .buttons .textButton:hover,
68-
a:hover,
69-
#words.flipped .word {
68+
a:hover {
7069
animation: fire 5s linear infinite;
7170
}
7271

73-
#words.flipped .word letter.correct {
74-
color: var(--sub-color);
72+
#words {
73+
--correct-letter-animation: fire 5s linear infinite;
7574
}
7675

77-
#words:not(.flipped) .word letter.correct {
76+
#words.flipped {
77+
--untyped-letter-color: var(--sub-color);
78+
--correct-letter-animation: none;
79+
--untyped-letter-animation: fire 5s linear infinite;
80+
}
81+
82+
#words .word.typed letter.correct,
83+
#words.highlight-word .word.typed letter,
84+
#words.highlight-next-word .word.typed letter,
85+
#words.highlight-next-two-words .word.typed letter,
86+
#words.highlight-next-three-words .word.typed letter {
87+
animation: fire 5s linear infinite;
88+
}
89+
90+
#words.flipped .word.typed letter {
91+
animation: none;
92+
}
93+
94+
#words.highlight-off .word letter,
95+
#words.highlight-off .word.typed letter {
7896
animation: fire 5s linear infinite;
7997
}

‎frontend/static/themes/grape.css‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -65,15 +65,33 @@ header .config .group .buttons .textButton.active,
6565
#result .stats .group .bottom,
6666
nav .textButton:hover,
6767
header .config .group .buttons .textButton:hover,
68-
a:hover,
69-
#words.flipped .word {
68+
a:hover {
7069
animation: pastel 5s linear infinite;
7170
}
7271

73-
#words.flipped .word letter.correct {
74-
color: var(--sub-color);
72+
#words {
73+
--correct-letter-animation: pastel 5s linear infinite;
7574
}
7675

77-
#words:not(.flipped) .word letter.correct {
76+
#words.flipped {
77+
--untyped-letter-color: var(--sub-color);
78+
--correct-letter-animation: none;
79+
--untyped-letter-animation: pastel 5s linear infinite;
80+
}
81+
82+
#words .word.typed letter.correct,
83+
#words.highlight-word .word.typed letter,
84+
#words.highlight-next-word .word.typed letter,
85+
#words.highlight-next-two-words .word.typed letter,
86+
#words.highlight-next-three-words .word.typed letter {
87+
animation: pastel 5s linear infinite;
88+
}
89+
90+
#words.flipped .word.typed letter {
91+
animation: none;
92+
}
93+
94+
#words.highlight-off .word letter,
95+
#words.highlight-off .word.typed letter {
7896
animation: pastel 5s linear infinite;
7997
}

0 commit comments

Comments
 (0)