From 9eb927b2f42ac4dc4e74f73906c7fc72b07de667 Mon Sep 17 00:00:00 2001 From: Miodec Date: Wed, 28 Aug 2024 11:51:57 +0200 Subject: [PATCH] refactor: rename some functions and variables for easier understanding --- .../src/ts/controllers/input-controller.ts | 36 ++++++++-------- frontend/src/ts/test/pace-caret.ts | 2 +- frontend/src/ts/test/test-logic.ts | 2 +- frontend/src/ts/test/test-ui.ts | 43 ++++++++++--------- frontend/src/ts/ui.ts | 2 +- 5 files changed, 43 insertions(+), 42 deletions(-) diff --git a/frontend/src/ts/controllers/input-controller.ts b/frontend/src/ts/controllers/input-controller.ts index 0a2715ab75bf..b450e58217ed 100644 --- a/frontend/src/ts/controllers/input-controller.ts +++ b/frontend/src/ts/controllers/input-controller.ts @@ -113,7 +113,7 @@ function backspaceToPrevious(): void { if ( TestInput.input.history.length === 0 || - TestUI.currentWordElementIndex === 0 + TestUI.activeWordElementIndex === 0 ) { return; } @@ -137,7 +137,7 @@ function backspaceToPrevious(): void { "incorrect" ); if (Config.stopOnError === "letter" && incorrectLetterBackspaced) { - void TestUI.updateWordElement(); + void TestUI.updateActiveWordLetters(); } TestInput.input.current = TestInput.input.popHistory(); @@ -149,10 +149,10 @@ function backspaceToPrevious(): void { setWordsInput(" " + TestInput.input.current + " "); } TestWords.words.decreaseCurrentIndex(); - TestUI.setCurrentWordElementIndex(TestUI.currentWordElementIndex - 1); + TestUI.setActiveWordElementIndex(TestUI.activeWordElementIndex - 1); TestUI.updateActiveElement(true); Funbox.toggleScript(TestWords.words.getCurrent()); - void TestUI.updateWordElement(); + void TestUI.updateActiveWordLetters(); if (Config.mode === "zen") { TimerProgress.update(); @@ -217,7 +217,7 @@ async function handleSpace(): Promise { TestInput.incrementAccuracy(isWordCorrect); if (isWordCorrect) { if (Config.stopOnError === "letter") { - void TestUI.updateWordElement(); + void TestUI.updateActiveWordLetters(); } PaceCaret.handleSpace(true, currentWord); TestInput.input.pushHistory(); @@ -259,7 +259,7 @@ async function handleSpace(): Promise { if (Config.stopOnError === "word") { dontInsertSpace = false; Replay.addReplayEvent("incorrectLetter", "_"); - void TestUI.updateWordElement(); + void TestUI.updateActiveWordLetters(); void Caret.updatePosition(); } return; @@ -267,10 +267,10 @@ async function handleSpace(): Promise { PaceCaret.handleSpace(false, currentWord); if (Config.blindMode) { if (Config.highlightMode !== "off") { - TestUI.highlightAllLettersAsCorrect(TestUI.currentWordElementIndex); + TestUI.highlightAllLettersAsCorrect(TestUI.activeWordElementIndex); } } else { - TestUI.highlightBadWord(TestUI.currentWordElementIndex); + TestUI.highlightBadWord(TestUI.activeWordElementIndex); } TestInput.input.pushHistory(); TestWords.words.increaseCurrentIndex(); @@ -328,7 +328,7 @@ async function handleSpace(): Promise { ) { await TestLogic.addWord(); } - TestUI.setCurrentWordElementIndex(TestUI.currentWordElementIndex + 1); + TestUI.setActiveWordElementIndex(TestUI.activeWordElementIndex + 1); TestUI.updateActiveElement(); void Caret.updatePosition(); @@ -340,14 +340,14 @@ async function handleSpace(): Promise { ) { const currentTop: number = Math.floor( document.querySelectorAll("#words .word")[ - TestUI.currentWordElementIndex - 1 + TestUI.activeWordElementIndex - 1 ]?.offsetTop ?? 0 ); let nextTop: number; try { nextTop = Math.floor( document.querySelectorAll("#words .word")[ - TestUI.currentWordElementIndex + TestUI.activeWordElementIndex ]?.offsetTop ?? 0 ); } catch (e) { @@ -578,7 +578,7 @@ function handleChar( !Config.language.startsWith("korean") ) { TestInput.input.current = resultingWord; - void TestUI.updateWordElement(); + void TestUI.updateActiveWordLetters(); void Caret.updatePosition(); return; } @@ -659,7 +659,7 @@ function handleChar( !thisCharCorrect ) { if (!Config.blindMode) { - void TestUI.updateWordElement(TestInput.input.current + char); + void TestUI.updateActiveWordLetters(TestInput.input.current + char); } return; } @@ -727,7 +727,7 @@ function handleChar( const activeWordTopBeforeJump = document.querySelector( "#words .word.active" )?.offsetTop as number; - void TestUI.updateWordElement(); + void TestUI.updateActiveWordLetters(); const newActiveTop = document.querySelector( "#words .word.active" @@ -741,13 +741,13 @@ function handleChar( if (Config.mode === "zen") { const currentTop = Math.floor( document.querySelectorAll("#words .word")[ - TestUI.currentWordElementIndex - 1 + TestUI.activeWordElementIndex - 1 ]?.offsetTop ?? 0 ); if (!Config.showAllLines) TestUI.lineJump(currentTop); } else { TestInput.input.current = TestInput.input.current.slice(0, -1); - void TestUI.updateWordElement(); + void TestUI.updateActiveWordLetters(); } } @@ -1343,7 +1343,7 @@ $("#wordsInput").on("input", (event) => { TestInput.input.current = inputValue; } - void TestUI.updateWordElement(); + void TestUI.updateActiveWordLetters(); void Caret.updatePosition(); if (!CompositionState.getComposing()) { const keyStroke = event?.originalEvent as InputEvent; @@ -1381,7 +1381,7 @@ $("#wordsInput").on("input", (event) => { const stateafter = CompositionState.getComposing(); if (statebefore !== stateafter) { - void TestUI.updateWordElement(); + void TestUI.updateActiveWordLetters(); } // force caret at end of input diff --git a/frontend/src/ts/test/pace-caret.ts b/frontend/src/ts/test/pace-caret.ts index 2ff540e87a6a..4f48f47846b9 100644 --- a/frontend/src/ts/test/pace-caret.ts +++ b/frontend/src/ts/test/pace-caret.ts @@ -201,7 +201,7 @@ export async function update(expectedStepEnd: number): Promise { try { const newIndex = settings.currentWordIndex - - (TestWords.words.currentIndex - TestUI.currentWordElementIndex); + (TestWords.words.currentIndex - TestUI.activeWordElementIndex); const word = document.querySelectorAll("#words .word")[ newIndex ] as HTMLElement; diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts index 4d238d9c49cc..8c3562fa362a 100644 --- a/frontend/src/ts/test/test-logic.ts +++ b/frontend/src/ts/test/test-logic.ts @@ -388,7 +388,7 @@ export async function init(): Promise { MonkeyPower.reset(); Replay.stopReplayRecording(); TestWords.words.reset(); - TestUI.setCurrentWordElementIndex(0); + TestUI.setActiveWordElementIndex(0); TestInput.input.resetHistory(); TestInput.input.resetCurrent(); diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts index 5c6312b91ee6..ac83f0fd77a1 100644 --- a/frontend/src/ts/test/test-ui.ts +++ b/frontend/src/ts/test/test-ui.ts @@ -194,7 +194,7 @@ ConfigEvent.subscribe((eventKey, eventValue, nosave) => { if (eventKey === "burstHeatmap") void applyBurstHeatmap(); }); -export let currentWordElementIndex = 0; +export let activeWordElementIndex = 0; export let resultVisible = false; export let activeWordTop = 0; export let testRestarting = false; @@ -207,8 +207,8 @@ export function setResultVisible(val: boolean): void { resultVisible = val; } -export function setCurrentWordElementIndex(val: number): void { - currentWordElementIndex = val; +export function setActiveWordElementIndex(val: number): void { + activeWordElementIndex = val; } export function setActiveWordTop(val: number): void { @@ -234,7 +234,7 @@ export function setResultCalculating(val: boolean): void { export function reset(): void { currentTestLine = 0; - currentWordElementIndex = 0; + activeWordElementIndex = 0; } export function focusWords(): void { @@ -258,19 +258,19 @@ export function updateActiveElement( } else if (active !== null && !initial) { active.classList.remove("active"); } - const activeWord = - document.querySelectorAll("#words .word")[currentWordElementIndex]; + const newActiveWord = document.querySelectorAll("#words .word")[ + activeWordElementIndex + ] as HTMLElement | undefined; - if (activeWord == undefined) { + if (newActiveWord == undefined) { throw new Error("activeWord is undefined - can't update active element"); } - activeWord.classList.add("active"); - activeWord.classList.remove("error"); - activeWord.classList.remove("typed"); + newActiveWord.classList.add("active"); + newActiveWord.classList.remove("error"); + newActiveWord.classList.remove("typed"); - activeWordTop = (document.querySelector("#words .active") as HTMLElement) - .offsetTop; + activeWordTop = newActiveWord.offsetTop; if (!initial && shouldUpdateWordsInputPosition()) { void updateWordsInputPosition(); @@ -775,7 +775,9 @@ export async function screenshot(): Promise { }, 3000); } -export async function updateWordElement(inputOverride?: string): Promise { +export async function updateActiveWordLetters( + inputOverride?: string +): Promise { const input = inputOverride ?? TestInput.input.current; const wordAtIndex = document.querySelector( "#words .word.active" @@ -937,8 +939,8 @@ export function scrollTape(): void { let fullWordsWidth = 0; const toHide: JQuery[] = []; let widthToHide = 0; - if (currentWordElementIndex > 0) { - for (let i = 0; i < currentWordElementIndex; i++) { + if (activeWordElementIndex > 0) { + for (let i = 0; i < activeWordElementIndex; i++) { const word = document.querySelectorAll("#words .word")[i] as HTMLElement; fullWordsWidth += $(word).outerWidth(true) ?? 0; const forWordLeft = Math.floor(word.offsetLeft); @@ -950,7 +952,7 @@ export function scrollTape(): void { } } if (toHide.length > 0) { - currentWordElementIndex -= toHide.length; + activeWordElementIndex -= toHide.length; toHide.forEach((e) => e.remove()); fullWordsWidth -= widthToHide; const currentMargin = parseInt($("#words").css("margin-left"), 10); @@ -961,8 +963,7 @@ export function scrollTape(): void { if (Config.tapeMode === "letter") { if (TestInput.input.current.length > 0) { const words = document.querySelectorAll("#words .word"); - const letters = - words[currentWordElementIndex]?.querySelectorAll("letter"); + const letters = words[activeWordElementIndex]?.querySelectorAll("letter"); if (!letters) return; for (let i = 0; i < TestInput.input.current.length; i++) { const letter = letters[i] as HTMLElement; @@ -1017,7 +1018,7 @@ export function lineJump(currentTop: number): void { const toHide: JQuery[] = []; const wordElements = $("#words .word"); - for (let i = 0; i < currentWordElementIndex; i++) { + for (let i = 0; i < activeWordElementIndex; i++) { const el = $(wordElements[i] as HTMLElement); if (el.hasClass("hidden")) continue; const forWordTop = Math.floor((el[0] as HTMLElement).offsetTop); @@ -1086,14 +1087,14 @@ export function lineJump(currentTop: number): void { document.querySelector("#words .active") as HTMLElement ).offsetTop; - currentWordElementIndex -= toHide.length; + activeWordElementIndex -= toHide.length; lineTransition = false; toHide.forEach((el) => el.remove()); $("#words").css("marginTop", "0"); }); } else { toHide.forEach((el) => el.remove()); - currentWordElementIndex -= toHide.length; + activeWordElementIndex -= toHide.length; $("#paceCaret").css({ top: (document.querySelector("#paceCaret") as HTMLElement).offsetTop - diff --git a/frontend/src/ts/ui.ts b/frontend/src/ts/ui.ts index 575f1066abec..6057945a1a30 100644 --- a/frontend/src/ts/ui.ts +++ b/frontend/src/ts/ui.ts @@ -98,7 +98,7 @@ const debouncedEvent = debounce(250, () => { } else { const word = document.querySelectorAll("#words .word")[ - TestUI.currentWordElementIndex - 1 + TestUI.activeWordElementIndex - 1 ]; if (word) { const currentTop: number = Math.floor(word.offsetTop);