refactor: move resultVisible state to TestState

frontend/src/ts/commandline/lists/result-screen.ts

@@ -3,6 +3,7 @@ import * as TestUI from "../../test/test-ui";
 import * as PractiseWordsModal from "../../modals/practise-words";
 import * as Notifications from "../../elements/notifications";
 import * as TestInput from "../../test/test-input";
+import * as TestState from "../../test/test-state";
 import * as TestWords from "../../test/test-words";
 import Config from "../../config";
 import * as PractiseWords from "../../test/practise-words";
@@ -53,7 +54,7 @@ const commands: Command[] = [
     alias: "restart start begin type test typing",
     icon: "fa-chevron-right",
     available: (): boolean => {
-      return TestUI.resultVisible;
+      return TestState.resultVisible;
     },
     exec: (): void => {
       TestLogic.restart();
@@ -69,7 +70,7 @@ const commands: Command[] = [
       });
     },
     available: (): boolean => {
-      return TestUI.resultVisible;
+      return TestState.resultVisible;
     },
   },
   {
@@ -78,7 +79,7 @@ const commands: Command[] = [
     icon: "fa-exclamation-triangle",
     subgroup: practiceSubgroup,
     available: (): boolean => {
-      return TestUI.resultVisible;
+      return TestState.resultVisible;
     },
   },
   {
@@ -89,7 +90,7 @@ const commands: Command[] = [
       TestUI.toggleResultWords();
     },
     available: (): boolean => {
-      return TestUI.resultVisible;
+      return TestState.resultVisible;
     },
   },
   {
@@ -103,7 +104,7 @@ const commands: Command[] = [
       }, 500);
     },
     available: (): boolean => {
-      return TestUI.resultVisible;
+      return TestState.resultVisible;
     },
   },
   {
@@ -117,7 +118,7 @@ const commands: Command[] = [
       }, 500);
     },
     available: (): boolean => {
-      return TestUI.resultVisible;
+      return TestState.resultVisible;
     },
   },
   {
@@ -141,7 +142,7 @@ const commands: Command[] = [
       );
     },
     available: (): boolean => {
-      return TestUI.resultVisible;
+      return TestState.resultVisible;
     },
   },
 ];

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

@@ -447,7 +447,7 @@ async function handleChar(
   charIndex: number,
   realInputValue?: string
 ): Promise<void> {
-  if (TestUI.resultCalculating || TestUI.resultVisible) {
+  if (TestUI.resultCalculating || TestState.resultVisible) {
     return;
   }
 
@@ -802,7 +802,7 @@ async function handleTab(
 
     event.preventDefault();
     // insert tab character if needed (only during the test)
-    if (!TestUI.resultVisible && shouldInsertTabCharacter) {
+    if (!TestState.resultVisible && shouldInsertTabCharacter) {
       await handleChar("\t", TestInput.input.current.length);
       setWordsInput(" " + TestInput.input.current);
       return;
@@ -828,7 +828,7 @@ async function handleTab(
     }
 
     // insert tab character if needed (only during the test)
-    if (!TestUI.resultVisible && shouldInsertTabCharacter) {
+    if (!TestState.resultVisible && shouldInsertTabCharacter) {
       event.preventDefault();
       await handleChar("\t", TestInput.input.current.length);
       setWordsInput(" " + TestInput.input.current);
@@ -844,7 +844,7 @@ async function handleTab(
 
     //only special handlig on the test page
     if (ActivePage.get() !== "test") return;
-    if (TestUI.resultVisible) return;
+    if (TestState.resultVisible) return;
 
     // insert tab character if needed
     if (shouldInsertTabCharacter) {
@@ -870,7 +870,7 @@ $("#wordsInput").on("keydown", (event) => {
     pageTestActive &&
     !commandLineVisible &&
     !popupVisible &&
-    !TestUI.resultVisible &&
+    !TestState.resultVisible &&
     event.key !== "Enter" &&
     !awaitingNextWord &&
     TestState.testInitSuccess;
@@ -911,7 +911,7 @@ $(document).on("keydown", async (event) => {
     pageTestActive &&
     !commandLineVisible &&
     !popupVisible &&
-    !TestUI.resultVisible &&
+    !TestState.resultVisible &&
     (wordsFocused || event.key !== "Enter") &&
     !awaitingNextWord;
 
@@ -983,7 +983,7 @@ $(document).on("keydown", async (event) => {
       return;
     }
 
-    if (TestUI.resultVisible) {
+    if (TestState.resultVisible) {
       TestLogic.restart({
         event,
       });
@@ -1258,7 +1258,7 @@ $("#wordsInput").on("keyup", (event) => {
 
   if (IgnoredKeys.includes(event.key)) return;
 
-  if (TestUI.resultVisible) return;
+  if (TestState.resultVisible) return;
 });
 
 $("#wordsInput").on("beforeinput", (event) => {

frontend/src/ts/controllers/pw-ad-controller.ts

@@ -5,7 +5,7 @@
 
 import Config from "../config";
 import * as ActivePage from "../states/active-page";
-import * as TestUI from "../test/test-ui";
+import * as TestState from "../test/test-state";
 
 // Step 1: Create the Ramp Object, NOTE: selector id needed for tagged units only
 const resultUnits = [
@@ -207,7 +207,7 @@ function getUnits(): unknown {
 
 export async function reinstate(): boolean {
   if (!rampReady) return;
-  if (ActivePage.get() === "test" && !TestUI.resultVisible) {
+  if (ActivePage.get() === "test" && !TestState.resultVisible) {
     ramp.destroyUnits("all");
     return;
   }

frontend/src/ts/test/pace-caret.ts

@@ -1,5 +1,4 @@
 import * as TestWords from "./test-words";
-import * as TestUI from "./test-ui";
 import Config from "../config";
 import * as DB from "../db";
 import * as SlowTimer from "../states/slow-timer";
@@ -146,7 +145,7 @@ export async function init(): Promise<void> {
 }
 
 export async function update(expectedStepEnd: number): Promise<void> {
-  if (settings === null || !TestState.isActive || TestUI.resultVisible) {
+  if (settings === null || !TestState.isActive || TestState.resultVisible) {
     return;
   }
   // if ($("#paceCaret").hasClass("hidden")) {

frontend/src/ts/test/result.ts

@@ -44,6 +44,7 @@ import { Language } from "@monkeytype/schemas/languages";
 import { canQuickRestart as canQuickRestartFn } from "../utils/quick-restart";
 import { LocalStorageWithSchema } from "../utils/local-storage-with-schema";
 import { z } from "zod";
+import * as TestState from "./test-state";
 
 let result: CompletedEvent;
 let maxChartVal: number;
@@ -57,7 +58,7 @@ let quoteId = "";
 export function toggleSmoothedBurst(): void {
   useSmoothedBurst = !useSmoothedBurst;
   Notifications.add(useSmoothedBurst ? "on" : "off", 1);
-  if (TestUI.resultVisible) {
+  if (TestState.resultVisible) {
     void updateGraph().then(() => {
       ChartController.result.update("resize");
     });
@@ -67,7 +68,7 @@ export function toggleSmoothedBurst(): void {
 export function toggleUserFakeChartData(): void {
   useFakeChartData = !useFakeChartData;
   Notifications.add(useFakeChartData ? "on" : "off", 1);
-  if (TestUI.resultVisible) {
+  if (TestState.resultVisible) {
     void updateGraph().then(() => {
       ChartController.result.update("resize");
     });
@@ -1314,7 +1315,7 @@ $(".pageTest #favoriteQuoteButton").on("click", async () => {
 ConfigEvent.subscribe(async (eventKey) => {
   if (
     ["typingSpeedUnit", "startGraphsAtZero"].includes(eventKey) &&
-    TestUI.resultVisible
+    TestState.resultVisible
   ) {
     resultAnnotation = [];
 

frontend/src/ts/test/test-logic.ts

@@ -294,7 +294,7 @@ export function restart(options = {} as RestartOptions): void {
   TestUI.reset();
   CompositionState.setComposing(false);
 
-  if (TestUI.resultVisible) {
+  if (TestState.resultVisible) {
     if (Config.randomTheme !== "off") {
       void ThemeController.randomizeTheme();
     }
@@ -306,14 +306,14 @@ export function restart(options = {} as RestartOptions): void {
   }
 
   let el = null;
-  if (TestUI.resultVisible) {
+  if (TestState.resultVisible) {
     //results are being displayed
     el = $("#result");
   } else {
     //words are being displayed
     el = $("#typingTest");
   }
-  TestUI.setResultVisible(false);
+  TestState.setResultVisible(false);
   TestState.setTestRestarting(true);
   el.stop(true, true).animate(
     {
@@ -898,7 +898,7 @@ export async function finish(difficultyFailed = false): Promise<void> {
     TestStats.setEnd(TestInput.keypressTimings.spacing.last);
   }
 
-  TestUI.setResultVisible(true);
+  TestState.setResultVisible(true);
   TestState.setActive(false);
   Replay.stopReplayRecording();
   Caret.hide();
@@ -1304,7 +1304,7 @@ async function saveResult(
     void XPBar.update(
       snapxp,
       data.xp,
-      TestUI.resultVisible ? data.xpBreakdown : undefined
+      TestState.resultVisible ? data.xpBreakdown : undefined
     );
     dataToSave.xp = data.xp;
   }

frontend/src/ts/test/test-screenshot.ts

@@ -6,11 +6,11 @@ import { getActiveFunboxesWithFunction } from "./funbox/list";
 import * as DB from "../db";
 import * as ThemeColors from "../elements/theme-colors";
 import { format } from "date-fns/format";
-import * as TestUI from "./test-ui";
 import * as ActivePage from "../states/active-page";
 import { getHtmlByUserFlags } from "../controllers/user-flag-controller";
 import * as Notifications from "../elements/notifications";
 import { convertRemToPixels } from "../utils/numbers";
+import * as TestState from "./test-state";
 
 let revealReplay = false;
 let revertCookie = false;
@@ -364,7 +364,7 @@ $(".pageTest").on("click", "#saveScreenshotButton", (event) => {
 });
 
 $(document).on("keydown", (event) => {
-  if (!(TestUI.resultVisible && ActivePage.get() === "test")) return;
+  if (!(TestState.resultVisible && ActivePage.get() === "test")) return;
   if (event.key !== "Shift") return;
   $("#result #saveScreenshotButton i")
     .removeClass("far fa-image")
@@ -372,7 +372,7 @@ $(document).on("keydown", (event) => {
 });
 
 $(document).on("keyup", (event) => {
-  if (!(TestUI.resultVisible && ActivePage.get() === "test")) return;
+  if (!(TestState.resultVisible && ActivePage.get() === "test")) return;
   if (event.key !== "Shift") return;
   $("#result #saveScreenshotButton i")
     .removeClass("fas fa-download")

frontend/src/ts/test/test-state.ts

@@ -14,6 +14,7 @@ export let lineScrollDistance = 0;
 export let isLanguageRightToLeft = false;
 export let isDirectionReversed = false;
 export let testRestarting = false;
+export let resultVisible = false;
 
 export function setRepeated(tf: boolean): void {
   isRepeated = tf;
@@ -85,3 +86,7 @@ export function setTestRestarting(val: boolean): void {
     restartingResolve();
   }
 }
+
+export function setResultVisible(val: boolean): void {
+  resultVisible = val;
+}

frontend/src/ts/test/test-ui.ts

@@ -116,16 +116,11 @@ ConfigEvent.subscribe((eventKey, eventValue, nosave) => {
   if (eventKey === "burstHeatmap") void applyBurstHeatmap();
 });
 
-export let resultVisible = false;
 export let activeWordTop = 0;
 export let lineTransition = false;
 export let currentTestLine = 0;
 export let resultCalculating = false;
 
-export function setResultVisible(val: boolean): void {
-  resultVisible = val;
-}
-
 export function setActiveWordTop(val: number): void {
   activeWordTop = val;
 }
@@ -331,7 +326,7 @@ async function joinOverlappingHints(
 async function updateHintsPosition(): Promise<void> {
   if (
     ActivePage.get() !== "test" ||
-    resultVisible ||
+    TestState.resultVisible ||
     Config.indicateTypos !== "below"
   )
     return;
@@ -585,7 +580,7 @@ export async function centerActiveLine(): Promise<void> {
 }
 
 export function updateWordsWrapperHeight(force = false): void {
-  if (ActivePage.get() !== "test" || resultVisible) return;
+  if (ActivePage.get() !== "test" || TestState.resultVisible) return;
   if (!force && Config.mode !== "custom") return;
   const wrapperEl = document.getElementById("wordsWrapper") as HTMLElement;
   const outOfFocusEl = document.querySelector(
@@ -904,7 +899,7 @@ export async function scrollTape(
   noRemove = false,
   afterCompleteFn?: () => void
 ): Promise<void> {
-  if (ActivePage.get() !== "test" || resultVisible) return;
+  if (ActivePage.get() !== "test" || TestState.resultVisible) return;
 
   await centeringActiveLine;
 
@@ -1394,7 +1389,7 @@ async function loadWordsHistory(): Promise<boolean> {
 }
 
 export function toggleResultWords(noAnimation = false): void {
-  if (resultVisible) {
+  if (TestState.resultVisible) {
     ResultWordHighlight.updateToggleWordsHistoryTime();
     if ($("#resultWordsHistory").stop(true, true).hasClass("hidden")) {
       //show
@@ -1699,7 +1694,7 @@ $(".pageTest #result #wpmChart").on("mouseenter", () => {
 });
 
 $(".pageTest #resultWordsHistory").on("mouseenter", ".words .word", (e) => {
-  if (resultVisible) {
+  if (TestState.resultVisible) {
     const input = $(e.currentTarget).attr("input");
     const burst = parseInt($(e.currentTarget).attr("burst") as string);
     if (input !== undefined) {
@@ -1729,14 +1724,14 @@ addEventListener("resize", () => {
 $("#wordsInput").on("focus", (e) => {
   const wordsFocused = e.target === document.activeElement;
   if (!wordsFocused) return;
-  if (!resultVisible && Config.showOutOfFocusWarning) {
+  if (!TestState.resultVisible && Config.showOutOfFocusWarning) {
     OutOfFocus.hide();
   }
   Caret.show(true);
 });
 
 $("#wordsInput").on("focusout", () => {
-  if (!resultVisible && Config.showOutOfFocusWarning) {
+  if (!TestState.resultVisible && Config.showOutOfFocusWarning) {
     OutOfFocus.show();
   }
   Caret.hide();

frontend/src/ts/ui.ts

@@ -98,7 +98,7 @@ window.addEventListener("beforeunload", (event) => {
 });
 
 const debouncedEvent = debounce(250, () => {
-  if (getActivePage() === "test" && !TestUI.resultVisible) {
+  if (getActivePage() === "test" && !TestState.resultVisible) {
     if (Config.tapeMode !== "off") {
       void TestUI.scrollTape();
     } else {