fix(indicate typos): letters not displaying correctly in RTL language…

…s or with ligatures when set to below (NadAlaba) (#5113)
monkeytypegame · Mar 25, 2024 · c20964d · c20964d
1 parent b0cf7bc
commit c20964d
Show file tree

Hide file tree

Showing 5 changed files with 202 additions and 35 deletions.
diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss
@@ -347,6 +347,7 @@
 }
 
 .word {
+  position: relative;
   font-size: 1em;
   line-height: 1em;
   margin: 0.25em;
@@ -440,12 +441,11 @@
 
 .word letter.incorrect {
   color: var(--error-color);
-  position: relative;
 }
 
-.word letter.incorrect hint {
+.word .hints hint {
   position: absolute;
-  bottom: -1em;
+  bottom: -1.1em;
   color: var(--text-color);
   line-height: initial;
   font-size: 0.75em;
@@ -454,9 +454,9 @@
   left: 0;
   opacity: 0.5;
   text-align: center;
-  width: 100%;
   display: grid;
   justify-content: center;
+  transform: translate(-50%);
 }
 
 .word letter.incorrect.extra {

diff --git a/frontend/src/ts/controllers/input-controller.ts b/frontend/src/ts/controllers/input-controller.ts
@@ -145,7 +145,7 @@ function backspaceToPrevious(): void {
   TestUI.setCurrentWordElementIndex(TestUI.currentWordElementIndex - 1);
   TestUI.updateActiveElement(true);
   Funbox.toggleScript(TestWords.words.getCurrent());
-  TestUI.updateWordElement();
+  void TestUI.updateWordElement();
 
   if (Config.mode === "zen") {
     TimerProgress.update();
@@ -210,7 +210,7 @@ function handleSpace(): void {
   TestInput.incrementAccuracy(isWordCorrect);
   if (isWordCorrect) {
     if (Config.indicateTypos !== "off" && Config.stopOnError === "letter") {
-      TestUI.updateWordElement();
+      void TestUI.updateWordElement();
     }
     PaceCaret.handleSpace(true, currentWord);
     TestInput.input.pushHistory();
@@ -260,7 +260,7 @@ function handleSpace(): void {
       if (Config.stopOnError === "word") {
         dontInsertSpace = false;
         Replay.addReplayEvent("incorrectLetter", "_");
-        TestUI.updateWordElement(true);
+        void TestUI.updateWordElement(true);
         void Caret.updatePosition();
       }
       return;
@@ -561,7 +561,7 @@ function handleChar(
     !Config.language.startsWith("korean")
   ) {
     TestInput.input.current = resultingWord;
-    TestUI.updateWordElement();
+    void TestUI.updateWordElement();
     void Caret.updatePosition();
     return;
   }
@@ -642,7 +642,7 @@ function handleChar(
     !thisCharCorrect
   ) {
     if (Config.indicateTypos !== "off") {
-      TestUI.updateWordElement(undefined, TestInput.input.current + char);
+      void TestUI.updateWordElement(undefined, TestInput.input.current + char);
     }
     return;
   }
@@ -708,7 +708,7 @@ function handleChar(
   const activeWordTopBeforeJump = document.querySelector<HTMLElement>(
     "#words .word.active"
   )?.offsetTop as number;
-  TestUI.updateWordElement();
+  void TestUI.updateWordElement();
 
   if (!Config.hideExtraLetters) {
     const newActiveTop = document.querySelector<HTMLElement>(
@@ -729,7 +729,7 @@ function handleChar(
         if (!Config.showAllLines) TestUI.lineJump(currentTop);
       } else {
         TestInput.input.current = TestInput.input.current.slice(0, -1);
-        TestUI.updateWordElement();
+        void TestUI.updateWordElement();
       }
     }
   }
@@ -1353,7 +1353,7 @@ $("#wordsInput").on("input", (event) => {
       TestInput.input.current = inputValue;
     }
 
-    TestUI.updateWordElement();
+    void TestUI.updateWordElement();
     void Caret.updatePosition();
     if (!CompositionState.getComposing()) {
       const keyStroke = event?.originalEvent as InputEvent;
@@ -1395,7 +1395,7 @@ $("#wordsInput").on("input", (event) => {
 
     const stateafter = CompositionState.getComposing();
     if (statebefore !== stateafter) {
-      TestUI.updateWordElement();
+      void TestUI.updateWordElement();
     }
 
     // force caret at end of input

diff --git a/frontend/src/ts/test/caret.ts b/frontend/src/ts/test/caret.ts
@@ -72,10 +72,14 @@ export async function updatePosition(noAnim = false): Promise<void> {
 
   const inputLen = TestInput.input.current.length;
   const currentLetterIndex = inputLen;
+  const activeWordEl = document?.querySelector("#words .active") as HTMLElement;
   //insert temporary character so the caret will work in zen mode
-  const activeWordEmpty = $("#words .active").children().length === 0;
+  const activeWordEmpty = activeWordEl?.children.length === 0;
   if (activeWordEmpty) {
-    $("#words .active").append('<letter style="opacity: 0;">_</letter>');
+    activeWordEl.insertAdjacentHTML(
+      "beforeend",
+      '<letter style="opacity: 0;">_</letter>'
+    );
   }
 
   const currentWordNodeList = document
@@ -112,13 +116,16 @@ export async function updatePosition(noAnim = false): Promise<void> {
 
   const diff = letterHeight - caret.offsetHeight;
 
-  let newTop = letterPosTop + diff / 2;
+  let newTop = activeWordEl.offsetTop + letterPosTop + diff / 2;
 
   if (Config.caretStyle === "underline") {
-    newTop = letterPosTop - caret.offsetHeight / 2;
+    newTop = activeWordEl.offsetTop + letterPosTop - caret.offsetHeight / 2;
   }
 
-  let newLeft = letterPosLeft - (fullWidthCaret ? 0 : caretWidth / 2);
+  let newLeft =
+    activeWordEl.offsetLeft +
+    letterPosLeft -
+    (fullWidthCaret ? 0 : caretWidth / 2);
 
   const wordsWrapperWidth =
     $(document.querySelector("#wordsWrapper") as HTMLElement).width() ?? 0;
@@ -199,7 +206,7 @@ export async function updatePosition(noAnim = false): Promise<void> {
     }
   }
   if (activeWordEmpty) {
-    $("#words .active").children().remove();
+    activeWordEl?.replaceChildren();
   }
 }
 

diff --git a/frontend/src/ts/test/pace-caret.ts b/frontend/src/ts/test/pace-caret.ts
@@ -31,7 +31,7 @@ export function setLastTestWpm(wpm: number): void {
   }
 }
 
-function resetCaretPosition(): void {
+async function resetCaretPosition(): Promise<void> {
   if (Config.paceCaret === "off" && !TestState.isPaceRepeat) return;
   if (!$("#paceCaret").hasClass("hidden")) {
     $("#paceCaret").addClass("hidden");
@@ -47,10 +47,15 @@ function resetCaretPosition(): void {
 
   if (firstLetter === undefined || firstLetterHeight === undefined) return;
 
+  const currentLanguage = await Misc.getCurrentLanguage(Config.language);
+  const isLanguageRightToLeft = currentLanguage.rightToLeft;
+
   caret.stop(true, true).animate(
     {
       top: firstLetter.offsetTop - firstLetterHeight / 4,
-      left: firstLetter.offsetLeft,
+      left:
+        firstLetter.offsetLeft +
+        (isLanguageRightToLeft ? firstLetter.offsetWidth : 0),
     },
     0,
     "linear"
@@ -121,10 +126,10 @@ export async function init(): Promise<void> {
     wordsStatus: {},
     timeout: null,
   };
-  resetCaretPosition();
+  await resetCaretPosition();
 }
 
-export function update(expectedStepEnd: number): void {
+export async function update(expectedStepEnd: number): Promise<void> {
   if (settings === null || !TestState.isActive || TestUI.resultVisible) {
     return;
   }
@@ -210,15 +215,26 @@ export function update(expectedStepEnd: number): void {
         );
       }
 
+      const currentLanguage = await Misc.getCurrentLanguage(Config.language);
+      const isLanguageRightToLeft = currentLanguage.rightToLeft;
+
       newTop =
+        word.offsetTop +
         currentLetter.offsetTop -
         Config.fontSize * Misc.convertRemToPixels(1) * 0.1;
       newLeft;
       if (settings.currentLetterIndex === -1) {
-        newLeft = currentLetter.offsetLeft;
+        newLeft =
+          word.offsetLeft +
+          currentLetter.offsetLeft -
+          caretWidth / 2 +
+          (isLanguageRightToLeft ? currentLetterWidth : 0);
       } else {
         newLeft =
-          currentLetter.offsetLeft + currentLetterWidth - caretWidth / 2;
+          word.offsetLeft +
+          currentLetter.offsetLeft -
+          caretWidth / 2 +
+          (isLanguageRightToLeft ? 0 : currentLetterWidth);
       }
       caret.removeClass("hidden");
     } catch (e) {
@@ -254,11 +270,9 @@ export function update(expectedStepEnd: number): void {
       }
     }
     settings.timeout = setTimeout(() => {
-      try {
-        update(expectedStepEnd + (settings?.spc ?? 0) * 1000);
-      } catch (e) {
+      update(expectedStepEnd + (settings?.spc ?? 0) * 1000).catch(() => {
         settings = null;
-      }
+      });
     }, duration);
   } catch (e) {
     console.error(e);
@@ -296,7 +310,7 @@ export function handleSpace(correct: boolean, currentWord: string): void {
 }
 
 export function start(): void {
-  update(performance.now() + (settings?.spc ?? 0) * 1000);
+  void update(performance.now() + (settings?.spc ?? 0) * 1000);
 }
 
 ConfigEvent.subscribe((eventKey) => {