diff --git a/frontend/src/ts/controllers/input-controller.ts b/frontend/src/ts/controllers/input-controller.ts index e296283ce..52b18d4a2 100644 --- a/frontend/src/ts/controllers/input-controller.ts +++ b/frontend/src/ts/controllers/input-controller.ts @@ -120,7 +120,7 @@ function backspaceToPrevious(): void { if ( TestInput.input.getHistory().length === 0 || - TestUI.activeWordElementIndex === 0 + TestState.activeWordIndex - TestUI.activeWordElementOffset === 0 ) { return; } @@ -154,7 +154,6 @@ function backspaceToPrevious(): void { setWordsInput(" " + TestInput.input.current + " "); } TestState.decreaseActiveWordIndex(); - TestUI.setActiveWordElementIndex(TestUI.activeWordElementIndex - 1); TestUI.updateActiveElement(true); Funbox.toggleScript(TestWords.words.getCurrent()); void TestUI.updateActiveWordLetters(); @@ -267,10 +266,14 @@ async function handleSpace(): Promise { PaceCaret.handleSpace(false, currentWord); if (Config.blindMode) { if (Config.highlightMode !== "off") { - TestUI.highlightAllLettersAsCorrect(TestUI.activeWordElementIndex); + TestUI.highlightAllLettersAsCorrect( + TestState.activeWordIndex - TestUI.activeWordElementOffset + ); } } else { - TestUI.highlightBadWord(TestUI.activeWordElementIndex); + TestUI.highlightBadWord( + TestState.activeWordIndex - TestUI.activeWordElementOffset + ); } TestInput.input.pushHistory(); TestState.increaseActiveWordIndex(); @@ -334,7 +337,6 @@ async function handleSpace(): Promise { void TestLogic.addWord(); } } - TestUI.setActiveWordElementIndex(TestUI.activeWordElementIndex + 1); TestUI.updateActiveElement(); void Caret.updatePosition(); @@ -346,14 +348,14 @@ async function handleSpace(): Promise { ) { const currentTop: number = Math.floor( document.querySelectorAll("#words .word")[ - TestUI.activeWordElementIndex - 1 + TestState.activeWordIndex - TestUI.activeWordElementOffset - 1 ]?.offsetTop ?? 0 ); let nextTop: number; try { nextTop = Math.floor( document.querySelectorAll("#words .word")[ - TestUI.activeWordElementIndex + TestState.activeWordIndex - TestUI.activeWordElementOffset ]?.offsetTop ?? 0 ); } catch (e) { @@ -673,7 +675,7 @@ function handleChar( ); const activeWord = document.querySelectorAll("#words .word")?.[ - TestUI.activeWordElementIndex + TestState.activeWordIndex - TestUI.activeWordElementOffset ] as HTMLElement; const testInputLength: number = !isCharKorean @@ -1116,7 +1118,9 @@ $(document).on("keydown", async (event) => { void Sound.playClick(); const activeWord: HTMLElement | null = document.querySelectorAll( "#words .word" - )?.[TestUI.activeWordElementIndex] as HTMLElement; + )?.[ + TestState.activeWordIndex - TestUI.activeWordElementOffset + ] as HTMLElement; const len: number = TestInput.input.current.length; // have to do this because prettier wraps the line and causes an error // Check to see if the letter actually exists to toggle it as dead diff --git a/frontend/src/ts/test/pace-caret.ts b/frontend/src/ts/test/pace-caret.ts index 4895b97af..929ef1a51 100644 --- a/frontend/src/ts/test/pace-caret.ts +++ b/frontend/src/ts/test/pace-caret.ts @@ -201,8 +201,7 @@ export async function update(expectedStepEnd: number): Promise { let newLeft; try { const newIndex = - settings.currentWordIndex - - (TestState.activeWordIndex - TestUI.activeWordElementIndex); + settings.currentWordIndex - TestUI.activeWordElementOffset; 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 ae24c63cd..44cfd4f67 100644 --- a/frontend/src/ts/test/test-logic.ts +++ b/frontend/src/ts/test/test-logic.ts @@ -401,7 +401,7 @@ export async function init(): Promise { Replay.stopReplayRecording(); TestWords.words.reset(); TestState.setActiveWordIndex(0); - TestUI.setActiveWordElementIndex(0); + TestUI.setActiveWordElementOffset(0); TestInput.input.resetHistory(); TestInput.input.current = ""; diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts index 2df0a6851..e6e8f47ed 100644 --- a/frontend/src/ts/test/test-ui.ts +++ b/frontend/src/ts/test/test-ui.ts @@ -203,7 +203,7 @@ ConfigEvent.subscribe((eventKey, eventValue, nosave) => { if (eventKey === "burstHeatmap") void applyBurstHeatmap(); }); -export let activeWordElementIndex = 0; +export let activeWordElementOffset = 0; export let resultVisible = false; export let activeWordTop = 0; export let testRestarting = false; @@ -216,8 +216,8 @@ export function setResultVisible(val: boolean): void { resultVisible = val; } -export function setActiveWordElementIndex(val: number): void { - activeWordElementIndex = val; +export function setActiveWordElementOffset(val: number): void { + activeWordElementOffset = val; } export function setActiveWordTop(val: number): void { @@ -243,7 +243,7 @@ export function setResultCalculating(val: boolean): void { export function reset(): void { currentTestLine = 0; - activeWordElementIndex = 0; + activeWordElementOffset = 0; } export function focusWords(): void { @@ -268,7 +268,7 @@ export function updateActiveElement( active.classList.remove("active"); } const newActiveWord = document.querySelectorAll("#words .word")[ - activeWordElementIndex + TestState.activeWordIndex - activeWordElementOffset ] as HTMLElement | undefined; if (newActiveWord == undefined) { @@ -453,7 +453,7 @@ export async function updateWordsInputPosition(initial = false): Promise { const el = document.querySelector("#wordsInput") as HTMLElement; const activeWord = document.querySelectorAll("#words .word")[ - activeWordElementIndex + TestState.activeWordIndex - activeWordElementOffset ]; if (!activeWord) { @@ -926,7 +926,7 @@ export async function updateActiveWordLetters( } const activeWord = document.querySelectorAll("#words .word")?.[ - activeWordElementIndex + TestState.activeWordIndex - activeWordElementOffset ] as HTMLElement; activeWord.innerHTML = ret; @@ -960,14 +960,15 @@ export function scrollTape(): void { return; } + const wordIndex = TestState.activeWordIndex - activeWordElementOffset; const wordsWrapperWidth = ( document.querySelector("#wordsWrapper") as HTMLElement ).offsetWidth; let fullWordsWidth = 0; const toHide: JQuery[] = []; let widthToHide = 0; - if (activeWordElementIndex > 0) { - for (let i = 0; i < activeWordElementIndex; i++) { + if (wordIndex > 0) { + for (let i = 0; i < wordIndex; i++) { const word = document.querySelectorAll("#words .word")[i] as HTMLElement; fullWordsWidth += $(word).outerWidth(true) ?? 0; const forWordLeft = Math.floor(word.offsetLeft); @@ -979,7 +980,7 @@ export function scrollTape(): void { } } if (toHide.length > 0) { - activeWordElementIndex -= toHide.length; + activeWordElementOffset += toHide.length; toHide.forEach((e) => e.remove()); fullWordsWidth -= widthToHide; const currentMargin = parseInt($("#words").css("margin-left"), 10); @@ -990,7 +991,7 @@ export function scrollTape(): void { if (Config.tapeMode === "letter") { if (TestInput.input.current.length > 0) { const words = document.querySelectorAll("#words .word"); - const letters = words[activeWordElementIndex]?.querySelectorAll("letter"); + const letters = words[wordIndex]?.querySelectorAll("letter"); if (!letters) return; for (let i = 0; i < TestInput.input.current.length; i++) { const letter = letters[i] as HTMLElement; @@ -1045,9 +1046,10 @@ export function lineJump(currentTop: number): void { ) { const hideBound = currentTop; + const wordIndex = TestState.activeWordIndex - activeWordElementOffset; const toHide: JQuery[] = []; const wordElements = $("#words .word"); - for (let i = 0; i < activeWordElementIndex; i++) { + for (let i = 0; i < wordIndex; i++) { const el = $(wordElements[i] as HTMLElement); if (el.hasClass("hidden")) continue; const forWordTop = Math.floor((el[0] as HTMLElement).offsetTop); @@ -1114,18 +1116,18 @@ export function lineJump(currentTop: number): void { currentLinesAnimating = 0; activeWordTop = ( document.querySelectorAll("#words .word")?.[ - activeWordElementIndex + wordIndex ] as HTMLElement )?.offsetTop; - activeWordElementIndex -= toHide.length; + activeWordElementOffset += toHide.length; lineTransition = false; toHide.forEach((el) => el.remove()); $("#words").css("marginTop", "0"); }); } else { toHide.forEach((el) => el.remove()); - activeWordElementIndex -= toHide.length; + activeWordElementOffset += 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 99db858d2..0e0427ffc 100644 --- a/frontend/src/ts/ui.ts +++ b/frontend/src/ts/ui.ts @@ -106,7 +106,7 @@ const debouncedEvent = debounce(250, () => { } else { const word = document.querySelectorAll("#words .word")[ - TestUI.activeWordElementIndex - 1 + TestState.activeWordIndex - TestUI.activeWordElementOffset - 1 ]; if (word) { const currentTop: number = Math.floor(word.offsetTop);