From 55496996de212b52a84105e2082c4dc66d96db90 Mon Sep 17 00:00:00 2001
From: Nad Alaba <37968805+NadAlaba@users.noreply.github.com>
Date: Mon, 2 Sep 2024 12:49:41 +0300
Subject: [PATCH] refactor: determine active word based on logical value, not
 DOM class (@NadAlaba) (#5834)

* refactor: use active word based on logical value, not DOM class

* use existing const instead of querying DOM

activeWord.offsetTop changes when the DOM element gets updated
no need to query the active word again

* better naming

* no need to requery DOM, we have the top of the previous word saved
---
 .../src/ts/controllers/input-controller.ts    | 31 +++++++------------
 frontend/src/ts/test/test-ui.ts               | 11 +++++--
 2 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/frontend/src/ts/controllers/input-controller.ts b/frontend/src/ts/controllers/input-controller.ts
index 3ef5fd603d9c..81fd6fdf9487 100644
--- a/frontend/src/ts/controllers/input-controller.ts
+++ b/frontend/src/ts/controllers/input-controller.ts
@@ -677,14 +677,16 @@ function handleChar(
     char
   );
 
+  const activeWord = document.querySelectorAll("#words .word")?.[
+    TestUI.activeWordElementIndex
+  ] as HTMLElement;
+
   const testInputLength: number = !isCharKorean
     ? TestInput.input.current.length
     : Hangul.disassemble(TestInput.input.current).length;
   //update the active word top, but only once
   if (testInputLength === 1 && TestWords.words.currentIndex === 0) {
-    TestUI.setActiveWordTop(
-      (document.querySelector("#words .active") as HTMLElement)?.offsetTop
-    );
+    TestUI.setActiveWordTop(activeWord?.offsetTop);
   }
 
   //max length of the input is 20 unless in zen mode then its 30
@@ -732,14 +734,10 @@ function handleChar(
     }
   }
 
-  const activeWordTopBeforeJump = document.querySelector<HTMLElement>(
-    "#words .word.active"
-  )?.offsetTop as number;
+  const activeWordTopBeforeJump = activeWord?.offsetTop;
   void TestUI.updateActiveWordLetters();
 
-  const newActiveTop = document.querySelector<HTMLElement>(
-    "#words .word.active"
-  )?.offsetTop as number;
+  const newActiveTop = activeWord?.offsetTop;
   //stop the word jump by slicing off the last character, update word again
   if (
     activeWordTopBeforeJump < newActiveTop &&
@@ -747,12 +745,7 @@ function handleChar(
     TestInput.input.current.length > 1
   ) {
     if (Config.mode === "zen") {
-      const currentTop = Math.floor(
-        document.querySelectorAll<HTMLElement>("#words .word")[
-          TestUI.activeWordElementIndex - 1
-        ]?.offsetTop ?? 0
-      );
-      if (!Config.showAllLines) TestUI.lineJump(currentTop);
+      if (!Config.showAllLines) TestUI.lineJump(activeWordTopBeforeJump);
     } else {
       TestInput.input.current = TestInput.input.current.slice(0, -1);
       void TestUI.updateActiveWordLetters();
@@ -1103,14 +1096,14 @@ $(document).on("keydown", async (event) => {
   //show dead keys
   if (event.key === "Dead" && !CompositionState.getComposing()) {
     void Sound.playClick();
-    const word: HTMLElement | null = document.querySelector<HTMLElement>(
-      "#words .word.active"
-    );
+    const activeWord: HTMLElement | null = document.querySelectorAll(
+      "#words .word"
+    )?.[TestUI.activeWordElementIndex] 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
     const deadLetter: Element | undefined =
-      word?.querySelectorAll("letter")[len];
+      activeWord?.querySelectorAll("letter")[len];
     if (deadLetter) {
       deadLetter.classList.toggle("dead");
     }
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index 4cd58deabb48..b6db482c28bf 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -438,7 +438,10 @@ export async function updateWordsInputPosition(initial = false): Promise<void> {
   const isLanguageRTL = currentLanguage.rightToLeft;
 
   const el = document.querySelector("#wordsInput") as HTMLElement;
-  const activeWord = document.querySelector<HTMLElement>("#words .active");
+  const activeWord =
+    document.querySelectorAll<HTMLElement>("#words .word")[
+      activeWordElementIndex
+    ];
 
   if (!activeWord) {
     el.style.top = "0px";
@@ -1086,8 +1089,10 @@ export function lineJump(currentTop: number): void {
         .animate(newCss, SlowTimer.get() ? 0 : 125, () => {
           currentLinesAnimating = 0;
           activeWordTop = (
-            document.querySelector("#words .active") as HTMLElement
-          ).offsetTop;
+            document.querySelectorAll("#words .word")?.[
+              activeWordElementIndex
+            ] as HTMLElement
+          )?.offsetTop;
 
           activeWordElementIndex -= toHide.length;
           lineTransition = false;