change var name to removedUIWordCount & add a helper function

Author: NadAlaba

frontend/src/ts/controllers/input-controller.ts

@@ -121,7 +121,7 @@ function backspaceToPrevious(): void {
   if (!TestState.isActive) return;
 
   const wordElementIndex =
-    TestState.activeWordIndex - TestState.activeWordElementOffset;
+    TestState.activeWordIndex - TestState.removedUIWordCount;
 
   if (TestInput.input.getHistory().length === 0 || wordElementIndex === 0) {
     return;
@@ -268,12 +268,12 @@ async function handleSpace(): Promise<void> {
     if (Config.blindMode) {
       if (Config.highlightMode !== "off") {
         TestUI.highlightAllLettersAsCorrect(
-          TestState.activeWordIndex - TestState.activeWordElementOffset
+          TestState.activeWordIndex - TestState.removedUIWordCount
         );
       }
     } else {
       TestUI.highlightBadWord(
-        TestState.activeWordIndex - TestState.activeWordElementOffset
+        TestState.activeWordIndex - TestState.removedUIWordCount
       );
     }
     TestInput.input.pushHistory();
@@ -342,14 +342,14 @@ async function handleSpace(): Promise<void> {
   if (!Config.showAllLines || shouldLimitToThreeLines) {
     const currentTop: number = Math.floor(
       document.querySelectorAll<HTMLElement>("#words .word")[
-        TestState.activeWordIndex - TestState.activeWordElementOffset - 1
+        TestState.activeWordIndex - TestState.removedUIWordCount - 1
       ]?.offsetTop ?? 0
     );
 
     const { data: nextTop } = tryCatchSync(() =>
       Math.floor(
         document.querySelectorAll<HTMLElement>("#words .word")[
-          TestState.activeWordIndex - TestState.activeWordElementOffset
+          TestState.activeWordIndex - TestState.removedUIWordCount
         ]?.offsetTop ?? 0
       )
     );
@@ -667,7 +667,7 @@ function handleChar(
   );
 
   const activeWord = document.querySelectorAll("#words .word")?.[
-    TestState.activeWordIndex - TestState.activeWordElementOffset
+    TestState.activeWordIndex - TestState.removedUIWordCount
   ] as HTMLElement;
 
   const testInputLength: number = !isCharKorean
@@ -1112,7 +1112,7 @@ $(document).on("keydown", async (event) => {
     const activeWord: HTMLElement | null = document.querySelectorAll(
       "#words .word"
     )?.[
-      TestState.activeWordIndex - TestState.activeWordElementOffset
+      TestState.activeWordIndex - TestState.removedUIWordCount
     ] as HTMLElement;
     const len: number = TestInput.input.current.length; // have to do this because prettier wraps the line and causes an error
 

frontend/src/ts/test/caret.ts

@@ -142,7 +142,7 @@ export async function updatePosition(noAnim = false): Promise<void> {
   if (Config.mode === "zen") wordLen = inputLen;
   const activeWordEl =
     document.querySelectorAll<HTMLElement>("#words .word")[
-      TestState.activeWordIndex - TestState.activeWordElementOffset
+      TestState.activeWordIndex - TestState.removedUIWordCount
     ];
   if (!activeWordEl) return;
 

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

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

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

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

frontend/src/ts/test/test-state.ts

@@ -9,7 +9,7 @@ export let bailedOut = false;
 export let selectedQuoteId = 1;
 export let activeWordIndex = 0;
 export let testInitSuccess = true;
-export let activeWordElementOffset = 0;
+export let removedUIWordCount = 0;
 export let lineScrollDistance = 0;
 
 export function setRepeated(tf: boolean): void {
@@ -56,8 +56,12 @@ export function setTestInitSuccess(tf: boolean): void {
   testInitSuccess = tf;
 }
 
-export function setActiveWordElementOffset(val: number): void {
-  activeWordElementOffset = val;
+export function setRemovedUIWordCount(val: number): void {
+  removedUIWordCount = val;
+}
+
+export function incrementRemovedUIWordCount(by: number = 1): void {
+  removedUIWordCount += by;
 }
 
 export function setLineScrollDistance(val: number): void {

frontend/src/ts/test/test-ui.ts

@@ -223,7 +223,7 @@ export function setResultCalculating(val: boolean): void {
 
 export function reset(): void {
   currentTestLine = 0;
-  TestState.setActiveWordElementOffset(0);
+  TestState.setRemovedUIWordCount(0);
 }
 
 export function focusWords(): void {
@@ -248,7 +248,7 @@ export function updateActiveElement(
     active.classList.remove("active");
   }
   const newActiveWord = document.querySelectorAll("#words .word")[
-    TestState.activeWordIndex - TestState.activeWordElementOffset
+    TestState.activeWordIndex - TestState.removedUIWordCount
   ] as HTMLElement | undefined;
 
   if (newActiveWord === undefined) {
@@ -438,7 +438,7 @@ export async function updateWordsInputPosition(initial = false): Promise<void> {
 
   const activeWord =
     document.querySelectorAll<HTMLElement>("#words .word")[
-      TestState.activeWordIndex - TestState.activeWordElementOffset
+      TestState.activeWordIndex - TestState.removedUIWordCount
     ];
 
   if (!activeWord) {
@@ -490,7 +490,7 @@ export async function centerActiveLine(): Promise<void> {
 
   const wordElements = document.querySelectorAll<HTMLElement>("#words .word");
   const activeWordIndex =
-    TestState.activeWordIndex - TestState.activeWordElementOffset;
+    TestState.activeWordIndex - TestState.removedUIWordCount;
   const activeWordEl = wordElements[activeWordIndex];
   if (!activeWordEl) {
     resolve();
@@ -520,7 +520,7 @@ export function updateWordsWrapperHeight(force = false): void {
   ) as HTMLElement;
   const wordElements = wrapperEl.querySelectorAll<HTMLElement>("#words .word");
   const activeWordEl =
-    wordElements[TestState.activeWordIndex - TestState.activeWordElementOffset];
+    wordElements[TestState.activeWordIndex - TestState.removedUIWordCount];
   if (!activeWordEl) return;
 
   wrapperEl.classList.remove("hidden");
@@ -642,7 +642,7 @@ export async function updateActiveWordLetters(
   let ret = "";
   const activeWord =
     document.querySelectorAll<HTMLElement>("#words .word")?.[
-      TestState.activeWordIndex - TestState.activeWordElementOffset
+      TestState.activeWordIndex - TestState.removedUIWordCount
     ];
   if (!activeWord) return;
   const hintIndices: number[][] = [];
@@ -832,7 +832,7 @@ export async function scrollTape(noRemove = false): Promise<void> {
 
   // index of the active word in the collection of .word elements
   const wordElementIndex =
-    TestState.activeWordIndex - TestState.activeWordElementOffset;
+    TestState.activeWordIndex - TestState.removedUIWordCount;
   const wordsWrapperWidth = (
     document.querySelector("#wordsWrapper") as HTMLElement
   ).offsetWidth;
@@ -948,10 +948,8 @@ export async function scrollTape(noRemove = false): Promise<void> {
 
   /* remove overflown elements */
   if (toRemove.length > 0 && !noRemove) {
-    TestState.setActiveWordElementOffset(
-      TestState.activeWordElementOffset + wordsToRemoveCount
-    );
     for (const el of toRemove) el.remove();
+    TestState.incrementRemovedUIWordCount(wordsToRemoveCount);
     for (let i = 0; i < widthRemovedFromLine.length; i++) {
       const afterNewlineEl = afterNewLineEls[i] as HTMLElement;
       const currentLineIndent =
@@ -1071,7 +1069,7 @@ export async function lineJump(
 
     // index of the active word in the collection of .word elements
     const wordElementIndex =
-      TestState.activeWordIndex - TestState.activeWordElementOffset;
+      TestState.activeWordIndex - TestState.removedUIWordCount;
     const wordsEl = document.getElementById("words") as HTMLElement;
     const wordsChildrenArr = [...wordsEl.children];
     const wordElements = wordsEl.querySelectorAll(".word");
@@ -1146,12 +1144,8 @@ export async function lineJump(
             document.querySelectorAll<HTMLElement>("#words .word")?.[
               wordElementIndex
             ]?.offsetTop ?? 0;
-          TestState.setActiveWordElementOffset(
-            TestState.activeWordElementOffset +
-              removeElementsBeforeWord(
-                lastElementToRemoveIndex,
-                wordsChildrenArr
-              )
+          TestState.incrementRemovedUIWordCount(
+            removeElementsBeforeWord(lastElementToRemoveIndex, wordsChildrenArr)
           );
           wordsEl.style.marginTop = "0";
           lineTransition = false;
@@ -1160,9 +1154,8 @@ export async function lineJump(
       });
       jqWords.dequeue("topMargin");
     } else {
-      TestState.setActiveWordElementOffset(
-        TestState.activeWordElementOffset +
-          removeElementsBeforeWord(lastElementToRemoveIndex, wordsChildrenArr)
+      TestState.incrementRemovedUIWordCount(
+        removeElementsBeforeWord(lastElementToRemoveIndex, wordsChildrenArr)
       );
       paceCaretElement.style.top = `${
         paceCaretElement.offsetTop - wordHeight