monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-02-01 11:29:49 +08:00
Code Issues Projects Releases Packages Wiki Activity

impr(test ui): changing tape mode no longer restarts the test (#5565)

Browse source 
move word wrapper class assignent to a function
make sure to update word wrapper classes when changing some settings
This commit is contained in:
Jack 2024-07-05 16:13:09 +02:00 committed by GitHub
parent 3722000d85
commit 6ccdadfe34
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 42 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/ts/test/test-logic.ts
View file

@ -1422,7 +1422,6 @@ ConfigEvent.subscribe((eventKey, eventValue, nosave) => {
}
if (eventKey === "difficulty" && !nosave) restart();
if (eventKey === "showAllLines" && !nosave) restart();
if (eventKey === "tapeMode" && !nosave) restart();
if (
eventKey === "customLayoutFluid" &&
Config.funbox.includes("layoutfluid")

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

@ -156,10 +156,25 @@ ConfigEvent.subscribe((eventKey, eventValue, nosave) => {
if (eventValue === undefined) return;
if (eventKey === "highlightMode") {
highlightMode(eventValue as SharedTypes.Config.HighlightMode);
if (ActivePage.get() === "test") updateActiveElement();
}
if (
["highlightMode", "blindMode", "indicateTypos", "tapeMode"].includes(
eventKey
)
) {
updateWordWrapperClasses();
}
if (eventKey === "tapeMode" && !nosave) {
if (eventValue === "off") {
$("#words").css("margin-left", "unset");
} else {
scrollTape();
}
}
if (typeof eventValue !== "boolean") return;
if (eventKey === "flipTestColors") flipColors(eventValue);
if (eventKey === "colorfulMode") colorful(eventValue);
@ -332,9 +347,7 @@ function getWordHTML(word: string): string {
return retval;
}
export function showWords(): void {
$("#words").empty();
function updateWordWrapperClasses(): void {
if (Config.tapeMode !== "off") {
$("#words").addClass("tape");
$("#wordsWrapper").addClass("tape");
@ -343,6 +356,14 @@ export function showWords(): void {
$("#wordsWrapper").removeClass("tape");
}
if (Config.blindMode) {
$("#words").addClass("blind");
$("#wordsWrapper").addClass("blind");
} else {
$("#words").removeClass("blind");
$("#wordsWrapper").removeClass("blind");
}
if (Config.indicateTypos === "below") {
$("#words").addClass("indicateTyposBelow");
$("#wordsWrapper").addClass("indicateTyposBelow");
@ -351,6 +372,23 @@ export function showWords(): void {
$("#wordsWrapper").removeClass("indicateTyposBelow");
}
const existing =
$("#words")
?.attr("class")
?.split(/\s+/)
?.filter((it) => !it.startsWith("highlight-")) ?? [];
if (Config.highlightMode != null) {
existing.push("highlight-" + Config.highlightMode.replaceAll("_", "-"));
}
$("#words").attr("class", existing.join(" "));
}
export function showWords(): void {
$("#words").empty();
updateWordWrapperClasses();
let wordsHTML = "";
if (Config.mode !== "zen") {
for (let i = 0; i < TestWords.words.length; i++) {
@ -1422,19 +1460,6 @@ export function highlightAllLettersAsCorrect(wordIndex: number): void {
.addClass("correct");
}
export function highlightMode(mode?: SharedTypes.Config.HighlightMode): void {
const existing =
$("#words")
?.attr("class")
?.split(/\s+/)
?.filter((it) => !it.startsWith("highlight-")) ?? [];
if (mode != null) {
existing.push("highlight-" + mode.replaceAll("_", "-"));
}
$("#words").attr("class", existing.join(" "));
}
function updateWordsWidth(): void {
let css: Record<string, string> = {};
if (Config.tapeMode === "off") {