From 6ccdadfe34d271825e03cfa914add58b78079ea9 Mon Sep 17 00:00:00 2001
From: Jack <jack@monkeytype.com>
Date: Fri, 5 Jul 2024 16:13:09 +0200
Subject: [PATCH] impr(test ui): changing tape mode no longer restarts the test
 (#5565)

move word wrapper class assignent to a function
make sure to update word wrapper classes when changing some settings
---
 frontend/src/ts/test/test-logic.ts |  1 -
 frontend/src/ts/test/test-ui.ts    | 59 +++++++++++++++++++++---------
 2 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts
index 66accd44f..de24ff8e1 100644
--- a/frontend/src/ts/test/test-logic.ts
+++ b/frontend/src/ts/test/test-logic.ts
@@ -1422,7 +1422,6 @@ ConfigEvent.subscribe((eventKey, eventValue, nosave) => {
     }
     if (eventKey === "difficulty" && !nosave) restart();
     if (eventKey === "showAllLines" && !nosave) restart();
-    if (eventKey === "tapeMode" && !nosave) restart();
     if (
       eventKey === "customLayoutFluid" &&
       Config.funbox.includes("layoutfluid")
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index 721e8633a..442f8c265 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -156,10 +156,25 @@ ConfigEvent.subscribe((eventKey, eventValue, nosave) => {
 
   if (eventValue === undefined) return;
   if (eventKey === "highlightMode") {
-    highlightMode(eventValue as SharedTypes.Config.HighlightMode);
     if (ActivePage.get() === "test") updateActiveElement();
   }
 
+  if (
+    ["highlightMode", "blindMode", "indicateTypos", "tapeMode"].includes(
+      eventKey
+    )
+  ) {
+    updateWordWrapperClasses();
+  }
+
+  if (eventKey === "tapeMode" && !nosave) {
+    if (eventValue === "off") {
+      $("#words").css("margin-left", "unset");
+    } else {
+      scrollTape();
+    }
+  }
+
   if (typeof eventValue !== "boolean") return;
   if (eventKey === "flipTestColors") flipColors(eventValue);
   if (eventKey === "colorfulMode") colorful(eventValue);
@@ -332,9 +347,7 @@ function getWordHTML(word: string): string {
   return retval;
 }
 
-export function showWords(): void {
-  $("#words").empty();
-
+function updateWordWrapperClasses(): void {
   if (Config.tapeMode !== "off") {
     $("#words").addClass("tape");
     $("#wordsWrapper").addClass("tape");
@@ -343,6 +356,14 @@ export function showWords(): void {
     $("#wordsWrapper").removeClass("tape");
   }
 
+  if (Config.blindMode) {
+    $("#words").addClass("blind");
+    $("#wordsWrapper").addClass("blind");
+  } else {
+    $("#words").removeClass("blind");
+    $("#wordsWrapper").removeClass("blind");
+  }
+
   if (Config.indicateTypos === "below") {
     $("#words").addClass("indicateTyposBelow");
     $("#wordsWrapper").addClass("indicateTyposBelow");
@@ -351,6 +372,23 @@ export function showWords(): void {
     $("#wordsWrapper").removeClass("indicateTyposBelow");
   }
 
+  const existing =
+    $("#words")
+      ?.attr("class")
+      ?.split(/\s+/)
+      ?.filter((it) => !it.startsWith("highlight-")) ?? [];
+  if (Config.highlightMode != null) {
+    existing.push("highlight-" + Config.highlightMode.replaceAll("_", "-"));
+  }
+
+  $("#words").attr("class", existing.join(" "));
+}
+
+export function showWords(): void {
+  $("#words").empty();
+
+  updateWordWrapperClasses();
+
   let wordsHTML = "";
   if (Config.mode !== "zen") {
     for (let i = 0; i < TestWords.words.length; i++) {
@@ -1422,19 +1460,6 @@ export function highlightAllLettersAsCorrect(wordIndex: number): void {
     .addClass("correct");
 }
 
-export function highlightMode(mode?: SharedTypes.Config.HighlightMode): void {
-  const existing =
-    $("#words")
-      ?.attr("class")
-      ?.split(/\s+/)
-      ?.filter((it) => !it.startsWith("highlight-")) ?? [];
-  if (mode != null) {
-    existing.push("highlight-" + mode.replaceAll("_", "-"));
-  }
-
-  $("#words").attr("class", existing.join(" "));
-}
-
 function updateWordsWidth(): void {
   let css: Record<string, string> = {};
   if (Config.tapeMode === "off") {