refactor: caret rewrite (@Miodec) (monkeytypegame#6955)

Moves common logic to a new Caret class with single responsibility
principles.

---------

Co-authored-by: Nad Alaba <[email protected]>

Author: Miodec

frontend/__tests__/controllers/preset-controller.spec.ts

@@ -12,6 +12,9 @@ describe("PresetController", () => {
     vi.mock("../../src/ts/test/test-logic", () => ({
       restart: vi.fn(),
     }));
+    vi.mock("../../src/ts/test/pace-caret", () => ({
+      //
+    }));
     const dbGetSnapshotMock = vi.spyOn(DB, "getSnapshot");
     const configApplyMock = vi.spyOn(UpdateConfig, "apply");
     const configSaveFullConfigMock = vi.spyOn(

frontend/src/html/popups.html

@@ -67,6 +67,7 @@
     <button class="showRealWordsInput">show real words input</button>
     <button class="xpBarTest">xp bar test</button>
     <button class="toggleFakeChartData">toggle fake chart data</button>
+    <button class="toggleCaretDebug">toggle caret debug</button>
   </div>
 </dialog>
 

frontend/src/styles/caret.scss

@@ -20,6 +20,14 @@
 
 #caret,
 #paceCaret {
+  &.debug {
+    outline: 1px solid white;
+    &.hidden {
+      opacity: 0.5 !important;
+      display: block !important;
+    }
+  }
+
   &.off {
     width: 0;
   }
@@ -50,15 +58,15 @@
     width: 0.5em;
     border-radius: 0;
     z-index: -1;
-    border-radius: calc(var(--roundness) / 4);
+    border-radius: 0.05em;
   }
 
   &.outline {
     @extend #caret, .block;
     animation-name: none;
     background: transparent;
     border: 0.05em solid var(--caret-color);
-    border-radius: calc(var(--roundness) / 4);
+    border-radius: 0.05em;
   }
 
   &.underline {

frontend/src/styles/test.scss

@@ -246,6 +246,15 @@
         }
       }
 
+      &.debugCaret {
+        outline: 1px solid var(--sub-color);
+      }
+      &.debugCaretTarget {
+        outline: 2px solid red;
+      }
+      &.debugCaretTarget2 {
+        outline: 2px solid yellow;
+      }
       &.correct {
         color: var(--correct-letter-color);
         animation: var(--correct-letter-animation);

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

@@ -178,7 +178,7 @@ function backspaceToPrevious(): void {
     }
   }
 
-  void Caret.updatePosition();
+  Caret.updatePosition();
   Replay.addReplayEvent("backWord");
 }
 
@@ -258,7 +258,7 @@ async function handleSpace(): Promise<void> {
         dontInsertSpace = false;
         Replay.addReplayEvent("incorrectLetter", "_");
         void TestUI.updateActiveWordLetters();
-        void Caret.updatePosition();
+        Caret.updatePosition();
       }
       return;
     }
@@ -346,7 +346,7 @@ async function handleSpace(): Promise<void> {
     }
   } //end of line wrap
 
-  void Caret.updatePosition();
+  Caret.updatePosition();
 
   // enable if i decide that auto tab should also work after a space
   // if (
@@ -565,7 +565,7 @@ async function handleChar(
   ) {
     TestInput.input.current = resultingWord;
     void TestUI.updateActiveWordLetters();
-    void Caret.updatePosition();
+    Caret.updatePosition();
     return;
   }
 
@@ -768,7 +768,7 @@ async function handleChar(
   }, 0);
 
   if (char !== "\n") {
-    void Caret.updatePosition();
+    Caret.updatePosition();
   }
 }
 
@@ -1377,7 +1377,7 @@ $("#wordsInput").on("input", async (event) => {
     }
 
     void TestUI.updateActiveWordLetters();
-    void Caret.updatePosition();
+    Caret.updatePosition();
     if (!CompositionState.getComposing()) {
       const keyStroke = event?.originalEvent as InputEvent;
       if (keyStroke.inputType === "deleteWordBackward") {

frontend/src/ts/modals/dev-options.ts

@@ -7,6 +7,7 @@ import { signIn } from "../auth";
 import * as Loader from "../elements/loader";
 import { update } from "../elements/xp-bar";
 import { toggleUserFakeChartData } from "../test/result";
+import { toggleCaretDebug } from "../utils/caret";
 
 let mediaQueryDebugLevel = 0;
 
@@ -89,6 +90,9 @@ async function setup(modalEl: HTMLElement): Promise<void> {
     ?.addEventListener("click", () => {
       toggleUserFakeChartData();
     });
+  modalEl.querySelector(".toggleCaretDebug")?.addEventListener("click", () => {
+    toggleCaretDebug();
+  });
 }
 
 const modal = new AnimatedModal({