refactor: convert ui element index to offset

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<void> {
     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> {
       void TestLogic.addWord();
     }
   }
-  TestUI.setActiveWordElementIndex(TestUI.activeWordElementIndex + 1);
   TestUI.updateActiveElement();
   void Caret.updatePosition();
 
@@ -346,14 +348,14 @@ async function handleSpace(): Promise<void> {
   ) {
     const currentTop: number = Math.floor(
       document.querySelectorAll<HTMLElement>("#words .word")[
-        TestUI.activeWordElementIndex - 1
+        TestState.activeWordIndex - TestUI.activeWordElementOffset - 1
       ]?.offsetTop ?? 0
     );
     let nextTop: number;
     try {
       nextTop = Math.floor(
         document.querySelectorAll<HTMLElement>("#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

frontend/src/ts/test/pace-caret.ts

@@ -201,8 +201,7 @@ export async function update(expectedStepEnd: number): Promise<void> {
     let newLeft;
     try {
       const newIndex =
-        settings.currentWordIndex -
-        (TestState.activeWordIndex - TestUI.activeWordElementIndex);
+        settings.currentWordIndex - TestUI.activeWordElementOffset;
       const word = document.querySelectorAll("#words .word")[
         newIndex
       ] as HTMLElement;

frontend/src/ts/test/test-logic.ts

@@ -401,7 +401,7 @@ export async function init(): Promise<void> {
   Replay.stopReplayRecording();
   TestWords.words.reset();
   TestState.setActiveWordIndex(0);
-  TestUI.setActiveWordElementIndex(0);
+  TestUI.setActiveWordElementOffset(0);
   TestInput.input.resetHistory();
   TestInput.input.current = "";
 

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<void> {
   const el = document.querySelector("#wordsInput") as HTMLElement;
   const activeWord =
     document.querySelectorAll<HTMLElement>("#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 -

frontend/src/ts/ui.ts

@@ -106,7 +106,7 @@ const debouncedEvent = debounce(250, () => {
     } else {
       const word =
         document.querySelectorAll<HTMLElement>("#words .word")[
-          TestUI.activeWordElementIndex - 1
+          TestState.activeWordIndex - TestUI.activeWordElementOffset - 1
         ];
       if (word) {
         const currentTop: number = Math.floor(word.offsetTop);