monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-10-19 03:56:17 +08:00
Code Issues Projects Releases Packages Wiki Activity

refactor: change hideExtraLetters from being html based to css based

Browse source 
!nuf
This commit is contained in:
Miodec 2024-08-05 20:13:52 +02:00
parent 41638dd142
commit a558a59a5a
3 changed files with 53 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/styles/test.scss
View file

@ -306,6 +306,14 @@
// }
}
&.hideExtraLetters {
.word {
& letter.extra {
display: none;
}
}
}
&.flipped {
--correct-letter-color: var(--sub-color);
--untyped-letter-color: var(--text-color);

40
frontend/src/ts/controllers/input-controller.ts
View file

@ -731,27 +731,25 @@ function handleChar(
)?.offsetTop as number;
void TestUI.updateWordElement();
if (!Config.hideExtraLetters) {
const newActiveTop = document.querySelector<HTMLElement>(
"#words .word.active"
)?.offsetTop as number;
//stop the word jump by slicing off the last character, update word again
if (
activeWordTopBeforeJump < newActiveTop &&
!TestUI.lineTransition &&
TestInput.input.current.length > 1
) {
if (Config.mode === "zen") {
const currentTop = Math.floor(
document.querySelectorAll<HTMLElement>("#words .word")[
TestUI.currentWordElementIndex - 1
]?.offsetTop ?? 0
);
if (!Config.showAllLines) TestUI.lineJump(currentTop);
} else {
TestInput.input.current = TestInput.input.current.slice(0, -1);
void TestUI.updateWordElement();
}
const newActiveTop = document.querySelector<HTMLElement>(
"#words .word.active"
)?.offsetTop as number;
//stop the word jump by slicing off the last character, update word again
if (
activeWordTopBeforeJump < newActiveTop &&
!TestUI.lineTransition &&
TestInput.input.current.length > 1
) {
if (Config.mode === "zen") {
const currentTop = Math.floor(
document.querySelectorAll<HTMLElement>("#words .word")[
TestUI.currentWordElementIndex - 1
]?.offsetTop ?? 0
);
if (!Config.showAllLines) TestUI.lineJump(currentTop);
} else {
TestInput.input.current = TestInput.input.current.slice(0, -1);
void TestUI.updateWordElement();
}
}

37
frontend/src/ts/test/test-ui.ts
View file

@ -164,9 +164,13 @@ ConfigEvent.subscribe((eventKey, eventValue, nosave) => {
}
if (
["highlightMode", "blindMode", "indicateTypos", "tapeMode"].includes(
eventKey
)
[
"highlightMode",
"blindMode",
"indicateTypos",
"tapeMode",
"hideExtraLetters",
].includes(eventKey)
) {
updateWordWrapperClasses();
}
@ -366,6 +370,14 @@ function updateWordWrapperClasses(): void {
$("#wordsWrapper").removeClass("indicateTyposBelow");
}
if (Config.hideExtraLetters) {
$("#words").addClass("hideExtraLetters");
$("#wordsWrapper").addClass("hideExtraLetters");
} else {
$("#words").removeClass("hideExtraLetters");
$("#wordsWrapper").removeClass("hideExtraLetters");
}
const existing =
$("#words")
?.attr("class")
@ -851,13 +863,11 @@ export async function updateWordElement(inputOverride?: string): Promise<void> {
: currentLetter
}</letter>`;
} else if (currentLetter === undefined) {
if (!Config.hideExtraLetters) {
let letter = input[i];
if (letter === " " || letter === "\t" || letter === "\n") {
letter = "_";
}
ret += `<letter class="incorrect extra ${tabChar}${nlChar}">${letter}</letter>`;
let letter = input[i];
if (letter === " " || letter === "\t" || letter === "\n") {
letter = "_";
}
ret += `<letter class="incorrect extra ${tabChar}${nlChar}">${letter}</letter>`;
} else {
ret +=
`<letter class="incorrect ${tabChar}${nlChar}">` +
@ -890,7 +900,7 @@ export async function updateWordElement(inputOverride?: string): Promise<void> {
}
}
if (Config.highlightMode === "letter" && Config.hideExtraLetters) {
if (Config.highlightMode === "letter") {
if (input.length > currentWord.length && !Config.blindMode) {
wordAtIndex.classList.add("error");
} else if (input.length === currentWord.length) {
@ -951,7 +961,12 @@ export function scrollTape(): void {
if (!letters) return;
for (let i = 0; i < TestInput.input.current.length; i++) {
const letter = letters[i] as HTMLElement;
if (Config.blindMode && letter.classList.contains("extra")) continue;
if (
(Config.blindMode || Config.hideExtraLetters) &&
letter.classList.contains("extra")
) {
continue;
}
currentWordWidth += $(letter).outerWidth(true) ?? 0;
}
}