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
monkeytypegame · Sep 2, 2024 · 5549699 · 5549699
1 parent 0249021
commit 5549699
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 22 deletions.
diff --git 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,27 +734,18 @@ 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 &&
     !TestUI.lineTransition &&
     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
@@ -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;