impr(read ahead): show words after correcting typo with backspace (@notTamion) (monkeytypegame#6006)

Author: notTamion

backend/src/constants/funbox-list.ts

@@ -205,7 +205,7 @@ const FunboxList: FunboxMetadata[] = [
     frontendForcedConfig: {
       highlightMode: ["letter", "off"],
     },
-    frontendFunctions: ["applyCSS", "rememberSettings"],
+    frontendFunctions: ["applyCSS", "rememberSettings", "handleKeydown"],
     name: "read_ahead_easy",
   },
   {
@@ -215,7 +215,7 @@ const FunboxList: FunboxMetadata[] = [
     frontendForcedConfig: {
       highlightMode: ["letter", "off"],
     },
-    frontendFunctions: ["applyCSS", "rememberSettings"],
+    frontendFunctions: ["applyCSS", "rememberSettings", "handleKeydown"],
     name: "read_ahead",
   },
   {
@@ -225,7 +225,7 @@ const FunboxList: FunboxMetadata[] = [
     frontendForcedConfig: {
       highlightMode: ["letter", "off"],
     },
-    frontendFunctions: ["applyCSS", "rememberSettings"],
+    frontendFunctions: ["applyCSS", "rememberSettings", "handleKeydown"],
     name: "read_ahead_hard",
   },
   {

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

@@ -907,6 +907,12 @@ $(document).on("keydown", async (event) => {
     return;
   }
 
+  FunboxList.get(Config.funbox).forEach((value) => {
+    if (value.functions?.handleKeydown) {
+      void value.functions?.handleKeydown(event);
+    }
+  });
+
   //autofocus
   const wordsFocused: boolean = $("#wordsInput").is(":focus");
   const pageTestActive: boolean = ActivePage.get() === "test";

frontend/src/ts/test/funbox/funbox.ts

@@ -379,22 +379,54 @@ FunboxList.setFunboxFunctions("specials", {
   },
 });
 
+async function readAheadHandleKeydown(
+  event: JQuery.KeyDownEvent<Document, undefined, Document, Document>
+): Promise<void> {
+  const inputCurrentChar = (TestInput.input.current ?? "").slice(-1);
+  const wordCurrentChar = TestWords.words
+    .getCurrent()
+    .slice(TestInput.input.current.length - 1, TestInput.input.current.length);
+  const isCorrect = inputCurrentChar === wordCurrentChar;
+
+  if (
+    event.key == "Backspace" &&
+    !isCorrect &&
+    (TestInput.input.current != "" ||
+      TestInput.input.history[TestWords.words.currentIndex - 1] !=
+        TestWords.words.get(TestWords.words.currentIndex - 1) ||
+      Config.freedomMode)
+  ) {
+    $("#words").addClass("read_ahead_disabled");
+  } else if (event.key == " ") {
+    $("#words").removeClass("read_ahead_disabled");
+  }
+}
+
 FunboxList.setFunboxFunctions("read_ahead_easy", {
   rememberSettings(): void {
     save("highlightMode", Config.highlightMode, UpdateConfig.setHighlightMode);
   },
+  async handleKeydown(event): Promise<void> {
+    await readAheadHandleKeydown(event);
+  },
 });
 
 FunboxList.setFunboxFunctions("read_ahead", {
   rememberSettings(): void {
     save("highlightMode", Config.highlightMode, UpdateConfig.setHighlightMode);
   },
+  async handleKeydown(event): Promise<void> {
+    await readAheadHandleKeydown(event);
+  },
 });
 
 FunboxList.setFunboxFunctions("read_ahead_hard", {
   rememberSettings(): void {
     save("highlightMode", Config.highlightMode, UpdateConfig.setHighlightMode);
   },
+  async handleKeydown(event): Promise<void> {
+    await readAheadHandleKeydown(event);
+  },
 });
 
 FunboxList.setFunboxFunctions("memory", {

frontend/src/ts/utils/json-data.ts

@@ -362,7 +362,7 @@ export type FunboxFunctions = {
     event: JQuery.KeyDownEvent<Document, null, Document, Document>
   ) => Promise<boolean>;
   handleKeydown?: (
-    event: JQuery.KeyDownEvent<Document, null, Document, Document>
+    event: JQuery.KeyDownEvent<Document, undefined, Document, Document>
   ) => Promise<void>;
   getResultContent?: () => string;
   start?: () => void;

frontend/static/funbox/read_ahead.css

@@ -1,5 +1,5 @@
-#words .word.active:nth-of-type(n + 2),
-#words .word.active:nth-of-type(n + 2) + .word {
+#words:not(.read_ahead_disabled) .word.active:nth-of-type(n + 2),
+#words:not(.read_ahead_disabled) .word.active:nth-of-type(n + 2) + .word {
   --untyped-letter-color: transparent;
   --untyped-letter-animation: none;
 }

frontend/static/funbox/read_ahead_easy.css

@@ -1,4 +1,4 @@
-#words .word.active:nth-of-type(n + 2) {
+#words:not(.read_ahead_disabled) .word.active:nth-of-type(n + 2) {
   --untyped-letter-color: transparent;
   --untyped-letter-animation: none;
 }

frontend/static/funbox/read_ahead_hard.css

@@ -1,6 +1,9 @@
-#words .word.active:nth-of-type(n + 2),
-#words .word.active:nth-of-type(n + 2) + .word,
-#words .word.active:nth-of-type(n + 2) + .word + .word {
+#words:not(.read_ahead_disabled) .word.active:nth-of-type(n + 2),
+#words:not(.read_ahead_disabled) .word.active:nth-of-type(n + 2) + .word,
+#words:not(.read_ahead_disabled)
+  .word.active:nth-of-type(n + 2)
+  + .word
+  + .word {
   --untyped-letter-color: transparent;
   --untyped-letter-animation: none;
 }