From 1479a269272c82f521b1b52981b87b1bf8b0e2b4 Mon Sep 17 00:00:00 2001 From: Miodec Date: Sun, 21 Sep 2025 15:42:26 +0200 Subject: [PATCH] refactor: move resultVisible state to TestState --- .../src/ts/commandline/lists/result-screen.ts | 15 ++++++++------- .../src/ts/controllers/input-controller.ts | 16 ++++++++-------- .../src/ts/controllers/pw-ad-controller.ts | 4 ++-- frontend/src/ts/test/pace-caret.ts | 3 +-- frontend/src/ts/test/result.ts | 7 ++++--- frontend/src/ts/test/test-logic.ts | 10 +++++----- frontend/src/ts/test/test-screenshot.ts | 6 +++--- frontend/src/ts/test/test-state.ts | 5 +++++ frontend/src/ts/test/test-ui.ts | 19 +++++++------------ frontend/src/ts/ui.ts | 2 +- 10 files changed, 44 insertions(+), 43 deletions(-) diff --git a/frontend/src/ts/commandline/lists/result-screen.ts b/frontend/src/ts/commandline/lists/result-screen.ts index a733aeb94..7688b2d0a 100644 --- a/frontend/src/ts/commandline/lists/result-screen.ts +++ b/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; }, }, ]; diff --git a/frontend/src/ts/controllers/input-controller.ts b/frontend/src/ts/controllers/input-controller.ts index 7655f31bc..fb5aed906 100644 --- a/frontend/src/ts/controllers/input-controller.ts +++ b/frontend/src/ts/controllers/input-controller.ts @@ -447,7 +447,7 @@ async function handleChar( charIndex: number, realInputValue?: string ): Promise { - 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) => { diff --git a/frontend/src/ts/controllers/pw-ad-controller.ts b/frontend/src/ts/controllers/pw-ad-controller.ts index e6ab88f63..159112e6a 100644 --- a/frontend/src/ts/controllers/pw-ad-controller.ts +++ b/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; } diff --git a/frontend/src/ts/test/pace-caret.ts b/frontend/src/ts/test/pace-caret.ts index a3f367c66..196d623e2 100644 --- a/frontend/src/ts/test/pace-caret.ts +++ b/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 { } export async function update(expectedStepEnd: number): Promise { - if (settings === null || !TestState.isActive || TestUI.resultVisible) { + if (settings === null || !TestState.isActive || TestState.resultVisible) { return; } // if ($("#paceCaret").hasClass("hidden")) { diff --git a/frontend/src/ts/test/result.ts b/frontend/src/ts/test/result.ts index 75c68380b..52c5a9789 100644 --- a/frontend/src/ts/test/result.ts +++ b/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 = []; diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts index 2e4b59ff3..29e68874c 100644 --- a/frontend/src/ts/test/test-logic.ts +++ b/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 { 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; } diff --git a/frontend/src/ts/test/test-screenshot.ts b/frontend/src/ts/test/test-screenshot.ts index a2376c964..9dbaaa505 100644 --- a/frontend/src/ts/test/test-screenshot.ts +++ b/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") diff --git a/frontend/src/ts/test/test-state.ts b/frontend/src/ts/test/test-state.ts index fff613d18..cc7c35d4f 100644 --- a/frontend/src/ts/test/test-state.ts +++ b/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; +} diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts index bdbafef40..0e3f478b2 100644 --- a/frontend/src/ts/test/test-ui.ts +++ b/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 { if ( ActivePage.get() !== "test" || - resultVisible || + TestState.resultVisible || Config.indicateTypos !== "below" ) return; @@ -585,7 +580,7 @@ export async function centerActiveLine(): Promise { } 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 { - if (ActivePage.get() !== "test" || resultVisible) return; + if (ActivePage.get() !== "test" || TestState.resultVisible) return; await centeringActiveLine; @@ -1394,7 +1389,7 @@ async function loadWordsHistory(): Promise { } 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(); diff --git a/frontend/src/ts/ui.ts b/frontend/src/ts/ui.ts index 362d5e036..0b9c96e3a 100644 --- a/frontend/src/ts/ui.ts +++ b/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 {