[pull] master from monkeytypegame:master

frontend/__tests__/controllers/url-handler.spec.ts

@@ -4,7 +4,7 @@ import { compressToURI } from "lz-ts";
 import * as UpdateConfig from "../../src/ts/config/setters";
 import * as Notifications from "../../src/ts/states/notifications";
 import * as TestLogic from "../../src/ts/test/test-logic";
-import * as TestState from "../../src/ts/test/test-state";
+import * as TestState from "../../src/ts/states/test";
 import * as Misc from "../../src/ts/utils/misc";
 import { FunboxName } from "@monkeytype/schemas/configs";
 import { CustomTextSettings } from "@monkeytype/schemas/results";

frontend/__tests__/test/events/stats.spec.ts

@@ -4,10 +4,6 @@ vi.mock("../../../src/ts/test/test-stats", () => ({
   start: 1000,
 }));
 
-vi.mock("../../../src/ts/test/test-state", () => ({
-  koreanStatus: false,
-}));
-
 const mockState = vi.hoisted(() => ({ activeWordIndex: 0 }));
 
 vi.mock("../../../src/ts/config/store", () => ({
@@ -53,6 +49,7 @@ vi.mock("../../../src/ts/states/test", () => ({
   getActiveWordIndex: () => mockState.activeWordIndex,
   isResultCalculating: () => false,
   getBailedOut: () => false,
+  getKoreanStatus: () => false,
 }));
 
 import {

frontend/src/html/pages/test.html

@@ -21,7 +21,7 @@
     <mount data-component="testmodesnotice"></mount>
 
     <mount data-component="livestatstexttop"></mount>
-    <mount data-component="livestatsmini"></mount>
+    <mount data-component="livestatsmini" class="full-width"></mount>
     <div id="wordsWrapper" class="content-grid full-width" translate="no">
       <textarea
         id="wordsInput"
@@ -59,8 +59,7 @@
       <i class="fas fa-fw fa-redo-alt"></i>
     </button>
     <mount data-component="livestatstextbottom"></mount>
-    <div id="premidTestMode" class="hidden"></div>
-    <div id="premidSecondsLeft" class="hidden"></div>
+    <mount data-component="premid"></mount>
   </div>
   <div class="loading hidden">
     <i class="fas fa-circle-notch fa-spin"></i>

frontend/src/ts/commandline/commandline.ts

@@ -880,6 +880,7 @@ const modal = new AnimatedModal({
     input.on(
       "input",
       debounce(50, async (e) => {
+        if (isAnimating) return;
         inputValue = ((e as InputEvent).target as HTMLInputElement).value;
         if (subgroupOverride === null) {
           if (Config.singleListCommandLine === "on") {
@@ -898,6 +899,11 @@ const modal = new AnimatedModal({
     );
 
     input.on("keydown", async (e) => {
+      //the commandline is on its way out - swallow everything
+      if (isAnimating) {
+        e.preventDefault();
+        return;
+      }
       mouseMode = false;
       if (
         e.key === "ArrowUp" ||

frontend/src/ts/commandline/lists.ts

@@ -35,7 +35,7 @@ import {
   showFpsCounter,
 } from "../components/layout/overlays/FpsCounter";
 import { applyConfigFromJson } from "../config/lifecycle";
-import { lastEventLog } from "../test/test-state";
+import { getLastEventLog } from "../states/test";
 
 const adsCommands = buildCommands("ads");
 
@@ -277,11 +277,11 @@ export const commands: CommandsSubgroup = {
       icon: "fa-cog",
       visible: false,
       available: (): boolean => {
-        return lastEventLog !== null;
+        return getLastEventLog() !== null;
       },
       exec: async (): Promise<void> => {
         navigator.clipboard
-          .writeText(JSON.stringify(lastEventLog))
+          .writeText(JSON.stringify(getLastEventLog()))
           .then(() => {
             showSuccessNotification("Copied to clipboard");
           })

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

@@ -5,14 +5,13 @@ import {
   showErrorNotification,
   showSuccessNotification,
 } from "../../states/notifications";
-import * as TestState from "../../test/test-state";
 import * as TestWords from "../../test/test-words";
 import { Config } from "../../config/store";
 import * as PractiseWords from "../../test/practise-words";
 import { Command, CommandsSubgroup } from "../types";
 import * as TestScreenshot from "../../test/test-screenshot";
 import { getInputHistory } from "../../test/events/stats";
-import { getResultVisible } from "../../states/test";
+import { getLastEventLog, getResultVisible } from "../../states/test";
 
 const practiceSubgroup: CommandsSubgroup = {
   title: "Practice words...",
@@ -140,12 +139,13 @@ const commands: Command[] = [
     display: "Copy words to clipboard",
     icon: "fa-copy",
     exec: (): void => {
-      if (TestState.lastEventLog === null) {
+      const eventLog = getLastEventLog();
+      if (eventLog === null) {
         showErrorNotification("No event log found!");
         return;
       }
 
-      const inputHistory = getInputHistory(TestState.lastEventLog);
+      const inputHistory = getInputHistory(eventLog);
       const words =
         Config.mode === "zen"
           ? inputHistory.join("")

frontend/src/ts/components/modals/QuoteSearchModal.tsx

@@ -28,8 +28,8 @@ import {
 } from "../../states/notifications";
 import { showQuoteReportModal } from "../../states/quote-report";
 import { showSimpleModal } from "../../states/simple-modal";
+import { setSelectedQuoteId } from "../../states/test";
 import * as TestLogic from "../../test/test-logic";
-import * as TestState from "../../test/test-state";
 import { cn } from "../../utils/cn";
 import { getLanguage } from "../../utils/json-data";
 import * as Misc from "../../utils/misc";
@@ -398,7 +398,7 @@ export function QuoteSearchModal(): JSXElement {
       showNoticeNotification("Quote ID must be at least 1");
       return;
     }
-    TestState.setSelectedQuoteId(quoteId);
+    setSelectedQuoteId(quoteId);
     setConfig("quoteLength", [-2]);
     void TestLogic.restart();
     hideModalAndClearChain("QuoteSearch");

frontend/src/ts/components/mount.tsx

@@ -32,6 +32,7 @@ import { LiveStatsTextTop } from "./pages/test/live-stats/LiveStatsTextTop";
 import { TestModesNotice } from "./pages/test/modes-notice/TestModesNotice";
 import { Monkey } from "./pages/test/Monkey";
 import { OutOfFocusWarning } from "./pages/test/OutOfFocusWarning";
+import { Premid } from "./pages/test/Premid";
 import { TestConfig } from "./pages/test/TestConfig";
 import { Popups } from "./popups/Popups";
 
@@ -66,6 +67,7 @@ const components: Record<string, () => JSXElement> = {
   livestatstexttop: () => <LiveStatsTextTop />,
   livestatstextbottom: () => <LiveStatsTextBottom />,
   bartimerprogress: () => <BarTimerProgress />,
+  premid: () => <Premid />,
 };
 
 function mountToMountpoint(name: string, component: () => JSXElement): void {

frontend/src/ts/components/pages/settings/custom-setting/AnimationFpsLimit.tsx

@@ -17,7 +17,7 @@ export function AnimationFpsLimit(): JSXElement {
     },
     onSubmit: ({ value }) => {
       const val = parseFloat(String(value.fpsLimit));
-      if (val === getfpsLimit()) return;
+      if (isNaN(val) || val === getfpsLimit()) return;
       setfpsLimit(val);
       savedIndicator.flash();
     },

frontend/src/ts/components/pages/test/Premid.tsx

@@ -0,0 +1,32 @@
+import { getConfig } from "../../../config/store";
+import { currentLiveStats, getCurrentQuote } from "../../../states/test";
+import { getMode2 } from "../../../utils/misc";
+import { getLanguageDisplayString } from "../../../utils/strings";
+
+/**
+ * Hidden elements read by the PreMiD browser extension to show Discord rich
+ * presence. Not visible to the user.
+ */
+export function Premid() {
+  const testMode = () => {
+    const mode2 = getMode2(getConfig, getCurrentQuote());
+    const funbox =
+      getConfig.funbox.length > 0 ? ` ${getConfig.funbox.join(" ")}` : "";
+    return `${getConfig.mode} ${mode2} ${getLanguageDisplayString(
+      getConfig.language,
+    )}${funbox}`;
+  };
+
+  const secondsLeft = () => getConfig.time - (currentLiveStats.seconds ?? 0);
+
+  return (
+    <>
+      <div id="premidTestMode" class="hidden">
+        {testMode()}
+      </div>
+      <div id="premidSecondsLeft" class="hidden">
+        {secondsLeft()}
+      </div>
+    </>
+  );
+}

frontend/src/ts/components/pages/test/live-stats/LiveStatsMini.tsx

@@ -25,7 +25,7 @@ export function LiveStatsMini() {
         style={{
           "font-size": `${getConfig.fontSize}rem`,
           opacity: getConfig.timerOpacity,
-          "margin-left": isTape() ? `${getConfig.tapeMargin}%` : "-0.25em",
+          "margin-left": isTape() ? `${getConfig.tapeMargin}%` : "0.25em",
         }}
       >
         <AnimeShow

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

@@ -9,14 +9,17 @@ import * as Funbox from "../test/funbox/funbox";
 import { setConfig } from "../config/setters";
 import { Config } from "../config/store";
 import { configEvent } from "../events/config";
-import * as TestState from "../test/test-state";
 
 import { ChallengeSettings, getChallenge } from "@monkeytype/challenges";
 import { ChallengeName } from "@monkeytype/schemas/challenges";
 import { CompletedEvent } from "@monkeytype/schemas/results";
 import { typedKeys } from "@monkeytype/util/objects";
 import { hideLoaderBar, showLoaderBar } from "../states/loader-bar";
-import { getLoadedChallenge, setLoadedChallenge } from "../states/test";
+import {
+  isTestRestarting,
+  getLoadedChallenge,
+  setLoadedChallenge,
+} from "../states/test";
 import { areUnsortedArraysEqual } from "../utils/arrays";
 import { qs } from "../utils/dom";
 
@@ -26,7 +29,7 @@ export function clearActive(): void {
   if (
     getLoadedChallenge() !== null &&
     !challengeLoading &&
-    !TestState.testRestarting
+    !isTestRestarting()
   ) {
     showNoticeNotification("Challenge cleared");
     setLoadedChallenge(null);

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

@@ -65,7 +65,7 @@ import { getTheme } from "../states/theme";
 import { Theme } from "../constants/themes";
 import { createDebouncedEffectOn } from "../hooks/effects";
 import { getWordIndexesForSecond } from "../test/events/stats";
-import { lastEventLog } from "../test/test-state";
+import { getLastEventLog } from "../states/test";
 import { typedKeys } from "@monkeytype/util/objects";
 
 export class ChartWithUpdateColors<
@@ -273,13 +273,14 @@ export const result = new ChartWithUpdateColors<
         callbacks: {
           afterLabel: function (ti): string {
             if (prevTi === ti) return "";
-            if (lastEventLog === null) return "";
+            const eventLog = getLastEventLog();
+            if (eventLog === null) return "";
 
             prevTi = ti;
             try {
               const keypressIndex = Math.round(parseFloat(ti.label)) - 1;
               const wordsToHighlight = getWordIndexesForSecond(
-                lastEventLog,
+                eventLog,
                 keypressIndex,
               );
 

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

@@ -3,11 +3,14 @@ import * as PageTransition from "../legacy-states/page-transition";
 import { isAuthAvailable } from "../firebase";
 import { isAuthenticated } from "../states/core";
 import { isFunboxActive } from "../test/funbox/list";
-import * as TestState from "../test/test-state";
 import { showNoticeNotification } from "../states/notifications";
 import { navigationEvent, type NavigateOptions } from "../events/navigation";
 import { authEvent } from "../events/auth";
-import { isResultCalculating, isTestActive } from "../states/test";
+import {
+  isTestRestarting,
+  isResultCalculating,
+  isTestActive,
+} from "../states/test";
 
 //source: https://www.youtube.com/watch?v=OstALBk-jTc
 // https://www.youtube.com/watch?v=OstALBk-jTc
@@ -162,12 +165,10 @@ export async function navigate(
 ): Promise<void> {
   if (
     !options.force &&
-    (TestState.testRestarting || isResultCalculating() || PageTransition.get())
+    (isTestRestarting() || isResultCalculating() || PageTransition.get())
   ) {
     console.debug(
-      `navigate: ${url} ignored, page is busy (testRestarting: ${
-        TestState.testRestarting
-      }, resultCalculating: ${isResultCalculating()}, pageTransition: ${PageTransition.get()})`,
+      `navigate: ${url} ignored, page is busy (testRestarting: ${isTestRestarting()}, resultCalculating: ${isResultCalculating()}, pageTransition: ${PageTransition.get()})`,
     );
     return;
   }

frontend/src/ts/controllers/url-handler.tsx

@@ -32,9 +32,9 @@ import {
   showNoticeNotification,
   showSuccessNotification,
 } from "../states/notifications";
+import { setSelectedQuoteId } from "../states/test";
 import * as CustomText from "../test/custom-text";
 import { restart as restartTest } from "../test/test-logic";
-import * as TestState from "../test/test-state";
 import * as Misc from "../utils/misc";
 import * as ChallengeController from "./challenge-controller";
 
@@ -205,7 +205,7 @@ export function loadTestSettingsFromUrl(getOverride?: string): void {
       });
     } else if (mode === "quote") {
       setConfig("quoteLength", [-2]);
-      TestState.setSelectedQuoteId(parseInt(de[1], 10));
+      setSelectedQuoteId(parseInt(de[1], 10));
     }
     applied["mode2"] = de[1];
   }

frontend/src/ts/elements/result-word-highlight.ts

@@ -4,7 +4,7 @@
 // Constants for padding around the highlights
 
 import * as Misc from "../utils/misc";
-import * as TestState from "../test/test-state";
+import { isLanguageRightToLeft } from "../states/test";
 import { qsr } from "../utils/dom";
 
 const PADDING_X = 16;
@@ -103,7 +103,7 @@ export async function highlightWordsInRange(
   const newHighlightElementPositions = getHighlightElementPositions(
     firstWordIndex,
     lastWordIndex,
-    TestState.isLanguageRightToLeft,
+    isLanguageRightToLeft(),
   );
 
   // For each line...
@@ -304,7 +304,7 @@ async function init(): Promise<boolean> {
 
       // For RTL languages, account for difference between highlightContainer left and RWH_el left
       let RTL_offset;
-      if (TestState.isLanguageRightToLeft) {
+      if (isLanguageRightToLeft()) {
         RTL_offset = line.rect.left - RWH_rect.left + PADDING_X;
       } else {
         RTL_offset = 0;

frontend/src/ts/index.ts

@@ -39,7 +39,7 @@ import { loadFromLocalStorage } from "./config/lifecycle";
 
 import "./input/hotkeys";
 import { showModal } from "./states/modals";
-import { lastEventLog } from "./test/test-state";
+import { getLastEventLog } from "./states/test";
 import { buildEventLog } from "./test/events/data";
 
 // Lock Math.random
@@ -92,7 +92,7 @@ addToGlobal({
   qs: qs,
   qsa: qsa,
   qsr: qsr,
-  lastEventLog: () => lastEventLog,
+  lastEventLog: () => getLastEventLog(),
   currentEventLog: buildEventLog,
 });
 

frontend/src/ts/input/handlers/before-delete.ts

@@ -1,11 +1,11 @@
 import { Config } from "../../config/store";
-import * as TestState from "../../test/test-state";
 import * as TestWords from "../../test/test-words";
 import { getInputElementValue } from "../input-element";
 import * as TestUI from "../../test/test-ui";
 import { isAwaitingNextWord } from "../state";
 import { getInputForWord } from "../../test/events/data";
 import {
+  isTestRestarting,
   getActiveWordIndex,
   isResultCalculating,
   isTestActive,
@@ -16,7 +16,7 @@ export function onBeforeDelete(event: InputEvent): void {
     event.preventDefault();
     return;
   }
-  if (TestState.testRestarting) {
+  if (isTestRestarting()) {
     event.preventDefault();
     return;
   }