refactor(caret): move active word element offset to test-state and remove .smoothScroller (@nadalaba) (monkeytypegame#6541)

nadalaba · web-flow · commit 33a6bc09e387 · 2025-06-23T14:36:36.000+02:00
diff --git a/frontend/src/ts/controllers/input-controller.ts b/frontend/src/ts/controllers/input-controller.ts
@@ -122,7 +122,7 @@ function backspaceToPrevious(): void {
   if (!TestState.isActive) return;
 
   const wordElementIndex =
-    TestState.activeWordIndex - TestUI.activeWordElementOffset;
+    TestState.activeWordIndex - TestState.removedUIWordCount;
 
   if (TestInput.input.getHistory().length === 0 || wordElementIndex === 0) {
     return;
@@ -269,12 +269,12 @@ async function handleSpace(): Promise<void> {
     if (Config.blindMode) {
       if (Config.highlightMode !== "off") {
         TestUI.highlightAllLettersAsCorrect(
-          TestState.activeWordIndex - TestUI.activeWordElementOffset
+          TestState.activeWordIndex - TestState.removedUIWordCount
         );
       }
     } else {
       TestUI.highlightBadWord(
-        TestState.activeWordIndex - TestUI.activeWordElementOffset
+        TestState.activeWordIndex - TestState.removedUIWordCount
       );
     }
     TestInput.input.pushHistory();
@@ -343,14 +343,14 @@ async function handleSpace(): Promise<void> {
   if (!Config.showAllLines || shouldLimitToThreeLines) {
     const currentTop: number = Math.floor(
       document.querySelectorAll<HTMLElement>("#words .word")[
-        TestState.activeWordIndex - TestUI.activeWordElementOffset - 1
+        TestState.activeWordIndex - TestState.removedUIWordCount - 1
       ]?.offsetTop ?? 0
     );
 
     const { data: nextTop } = tryCatchSync(() =>
       Math.floor(
         document.querySelectorAll<HTMLElement>("#words .word")[
-          TestState.activeWordIndex - TestUI.activeWordElementOffset
+          TestState.activeWordIndex - TestState.removedUIWordCount
         ]?.offsetTop ?? 0
       )
     );
@@ -668,7 +668,7 @@ function handleChar(
   );
 
   const activeWord = document.querySelectorAll("#words .word")?.[
-    TestState.activeWordIndex - TestUI.activeWordElementOffset
+    TestState.activeWordIndex - TestState.removedUIWordCount
   ] as HTMLElement;
 
   const testInputLength: number = !isCharKorean
@@ -1113,7 +1113,7 @@ $(document).on("keydown", async (event) => {
     const activeWord: HTMLElement | null = document.querySelectorAll(
       "#words .word"
     )?.[
-      TestState.activeWordIndex - TestUI.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
 
diff --git a/frontend/src/ts/test/caret.ts b/frontend/src/ts/test/caret.ts
@@ -35,12 +35,15 @@ export function hide(): void {
   caret.classList.add("hidden");
 }
 
-export function getSpaceWidth(wordElement?: HTMLElement): number {
-  if (!wordElement)
-    wordElement = document
-      .getElementById("words")
-      ?.querySelectorAll(".word")?.[0] as HTMLElement | undefined;
-  if (!wordElement) return 0;
+function getSpaceWidth(wordElement?: HTMLElement): number {
+  if (!wordElement) {
+    const el = document.querySelector<HTMLElement>("#words .word");
+    if (el) {
+      wordElement = el;
+    } else {
+      return 0;
+    }
+  }
   const wordComputedStyle = window.getComputedStyle(wordElement);
   return (
     parseInt(wordComputedStyle.marginRight) +
@@ -52,8 +55,7 @@ function getTargetPositionLeft(
   fullWidthCaret: boolean,
   isLanguageRightToLeft: boolean,
   activeWordElement: HTMLElement,
-  activeWordEmpty: boolean,
-  currentWordNodeList: NodeListOf<Element>,
+  currentWordNodeList: NodeListOf<HTMLElement>,
   fullWidthCaretWidth: number,
   wordLen: number,
   inputLen: number
@@ -64,21 +66,15 @@ function getTargetPositionLeft(
   if (Config.tapeMode === "off") {
     let positionOffsetToWord = 0;
 
-    const currentLetter = currentWordNodeList[inputLen] as
-      | HTMLElement
-      | undefined;
-    const lastWordLetter = currentWordNodeList[wordLen - 1] as
-      | HTMLElement
-      | undefined;
-    const lastInputLetter = currentWordNodeList[inputLen - 1] as
-      | HTMLElement
-      | undefined;
+    const currentLetter = currentWordNodeList[inputLen];
+    const lastWordLetter = currentWordNodeList[wordLen - 1];
+    const lastInputLetter = currentWordNodeList[inputLen - 1];
 
     if (isLanguageRightToLeft) {
-      if (inputLen < wordLen && currentLetter) {
+      if (inputLen <= wordLen && currentLetter) {
+        // at word beginning in zen mode both lengths are 0, but currentLetter is defined "_"
         positionOffsetToWord =
-          currentLetter?.offsetLeft +
-          (fullWidthCaret ? 0 : fullWidthCaretWidth);
+          currentLetter.offsetLeft + (fullWidthCaret ? 0 : fullWidthCaretWidth);
       } else if (!invisibleExtraLetters) {
         positionOffsetToWord =
           (lastInputLetter?.offsetLeft ?? 0) -
@@ -90,7 +86,7 @@ function getTargetPositionLeft(
       }
     } else {
       if (inputLen < wordLen && currentLetter) {
-        positionOffsetToWord = currentLetter?.offsetLeft;
+        positionOffsetToWord = currentLetter.offsetLeft;
       } else if (!invisibleExtraLetters) {
         positionOffsetToWord =
           (lastInputLetter?.offsetLeft ?? 0) +
@@ -102,8 +98,6 @@ function getTargetPositionLeft(
       }
     }
     result = activeWordElement.offsetLeft + positionOffsetToWord;
-    if (activeWordEmpty && isLanguageRightToLeft)
-      result += activeWordElement.offsetWidth;
   } else {
     const wordsWrapperWidth =
       $(document.querySelector("#wordsWrapper") as HTMLElement).width() ?? 0;
@@ -150,22 +144,18 @@ export async function updatePosition(noAnim = false): Promise<void> {
   let wordLen = splitIntoCharacters(TestWords.words.getCurrent()).length;
   const inputLen = splitIntoCharacters(TestInput.input.current).length;
   if (Config.mode === "zen") wordLen = inputLen;
-  const activeWordEl = document?.querySelector("#words .active") as HTMLElement;
-  let activeWordEmpty = false;
-  if (Config.mode === "zen") {
-    wordLen = inputLen;
-    if (inputLen === 0) activeWordEmpty = true;
-  }
-
-  const currentWordNodeList = activeWordEl?.querySelectorAll("letter");
+  const activeWordEl =
+    document.querySelectorAll<HTMLElement>("#words .word")[
+      TestState.activeWordIndex - TestState.removedUIWordCount
+    ];
+  if (!activeWordEl) return;
+
+  const currentWordNodeList =
+    activeWordEl.querySelectorAll<HTMLElement>("letter");
   if (!currentWordNodeList?.length) return;
 
-  const currentLetter = currentWordNodeList[inputLen] as
-    | HTMLElement
-    | undefined;
-  const lastWordLetter = currentWordNodeList[wordLen - 1] as
-    | HTMLElement
-    | undefined;
+  const currentLetter = currentWordNodeList[inputLen];
+  const lastWordLetter = currentWordNodeList[wordLen - 1];
 
   const currentLanguage = await JSONData.getCurrentLanguage(Config.language);
   const isLanguageRightToLeft = currentLanguage.rightToLeft;
@@ -187,11 +177,11 @@ export async function updatePosition(noAnim = false): Promise<void> {
   }
 
   let letterWidth = currentLetter?.offsetWidth;
-  if (letterWidth === undefined || activeWordEmpty) {
+  if (letterWidth === undefined || wordLen === 0) {
+    // at word beginning in zen mode current letter is defined "_" but wordLen is 0
     letterWidth = getSpaceWidth(activeWordEl);
   } else if (letterWidth === 0) {
     // current letter is a zero-width character e.g, diacritics)
-    letterWidth = 0;
     for (let i = inputLen; i >= 0; i--) {
       letterWidth = (currentWordNodeList[i] as HTMLElement)?.offsetWidth;
       if (letterWidth) break;
@@ -203,23 +193,19 @@ export async function updatePosition(noAnim = false): Promise<void> {
     fullWidthCaret,
     isLanguageRightToLeft,
     activeWordEl,
-    activeWordEmpty,
     currentWordNodeList,
     letterWidth,
     wordLen,
     inputLen
   );
   const newLeft = letterPosLeft - (fullWidthCaret ? 0 : caretWidth / 2);
 
-  let smoothlinescroll = $("#words .smoothScroller").height();
-  if (smoothlinescroll === undefined) smoothlinescroll = 0;
-
   const jqcaret = $(caret);
 
   jqcaret.css("display", "block"); //for some goddamn reason adding width animation sets the display to none ????????
 
   const animation: { top: number; left: number; width?: string } = {
-    top: newTop - smoothlinescroll,
+    top: newTop - TestState.lineScrollDistance,
     left: newLeft,
   };
 
diff --git a/frontend/src/ts/test/pace-caret.ts b/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 - TestUI.activeWordElementOffset;
+      const newIndex = settings.currentWordIndex - TestState.removedUIWordCount;
       const word = document.querySelectorAll("#words .word")[
         newIndex
       ] as HTMLElement;
@@ -257,11 +256,8 @@ export async function update(expectedStepEnd: number): Promise<void> {
     const duration = expectedStepEnd - performance.now();
 
     if (newTop !== undefined) {
-      let smoothlinescroll = $("#words .smoothScroller").height();
-      if (smoothlinescroll === undefined) smoothlinescroll = 0;
-
       $("#paceCaret").css({
-        top: newTop - smoothlinescroll,
+        top: newTop - TestState.lineScrollDistance,
       });
 
       if (Config.smoothCaret !== "off") {
diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts
@@ -423,7 +423,7 @@ export async function init(): Promise<void | null> {
   Replay.stopReplayRecording();
   TestWords.words.reset();
   TestState.setActiveWordIndex(0);
-  TestUI.setActiveWordElementOffset(0);
+  TestState.setRemovedUIWordCount(0);
   TestInput.input.resetHistory();
   TestInput.input.current = "";
 
diff --git a/frontend/src/ts/test/test-state.ts b/frontend/src/ts/test/test-state.ts
@@ -9,6 +9,8 @@ export let bailedOut = false;
 export let selectedQuoteId = 1;
 export let activeWordIndex = 0;
 export let testInitSuccess = true;
+export let removedUIWordCount = 0;
+export let lineScrollDistance = 0;
 
 export function setRepeated(tf: boolean): void {
   isRepeated = tf;
@@ -53,3 +55,15 @@ export function decreaseActiveWordIndex(): void {
 export function setTestInitSuccess(tf: boolean): void {
   testInitSuccess = tf;
 }
+
+export function setRemovedUIWordCount(val: number): void {
+  removedUIWordCount = val;
+}
+
+export function incrementRemovedUIWordCount(by: number = 1): void {
+  removedUIWordCount += by;
+}
+
+export function setLineScrollDistance(val: number): void {
+  lineScrollDistance = val;
+}
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
