[pull] master from monkeytypegame:master

frontend/src/styles/popups.scss

@@ -899,19 +899,37 @@ body.darkMode {
       border-collapse: collapse;
       color: var(--text-color);
 
+      tbody {
+        clip-path: inset(0);
+      }
+
       td {
         padding: 0.5rem 0.5rem;
       }
 
+      .modesticky {
+        position: sticky;
+        top: calc(1rem - 2px);
+        z-index: 2;
+      }
+
       thead {
         color: var(--sub-color);
         font-size: 0.75rem;
+        position: sticky;
+        top: -2rem;
+        background-color: var(--bg-color) !important;
+        z-index: 3;
       }
 
-      tbody tr:nth-child(odd) td {
+      tbody tr.odd {
         background: var(--sub-alt-color);
       }
 
+      tbody tr.even {
+        background: var(--bg-color);
+      }
+
       td.infoIcons span {
         margin: 0 0.1rem;
       }

frontend/src/ts/commandline/commandline-metadata.ts

@@ -4,7 +4,6 @@ import * as TestLogic from "../test/test-logic";
 import { getLanguageDisplayString } from "../utils/strings";
 import * as ModesNotice from "../elements/modes-notice";
 import { isAuthenticated } from "../firebase";
-import * as ManualRestart from "../test/manual-restart-tracker";
 import { areUnsortedArraysEqual } from "../utils/arrays";
 import Config from "../config";
 import { get as getTypingSpeedUnit } from "../utils/typing-speed-units";
@@ -112,15 +111,13 @@ export const commandlineConfigMetadata: CommandlineConfigMetadataObject = {
     subgroup: {
       options: [10, 25, 50, 100],
       afterExec: () => {
-        ManualRestart.set();
         TestLogic.restart();
       },
     },
     input: {
       inputValueConvert: Number,
 
       afterExec: () => {
-        ManualRestart.set();
         TestLogic.restart();
       },
     },
@@ -129,14 +126,12 @@ export const commandlineConfigMetadata: CommandlineConfigMetadataObject = {
     subgroup: {
       options: [15, 30, 60, 120],
       afterExec: () => {
-        ManualRestart.set();
         TestLogic.restart();
       },
     },
     input: {
       inputValueConvert: Number,
       afterExec: () => {
-        ManualRestart.set();
         TestLogic.restart();
       },
     },
@@ -145,7 +140,6 @@ export const commandlineConfigMetadata: CommandlineConfigMetadataObject = {
     subgroup: {
       options: "fromSchema",
       afterExec: () => {
-        ManualRestart.set();
         TestLogic.restart();
       },
     },

frontend/src/ts/commandline/lists/funbox.ts

@@ -1,6 +1,5 @@
 import * as Funbox from "../../test/funbox/funbox";
 import * as TestLogic from "../../test/test-logic";
-import * as ManualRestart from "../../test/manual-restart-tracker";
 import { getAllFunboxes, checkCompatibility } from "@monkeytype/funbox";
 import { Command, CommandsSubgroup } from "../types";
 import { getActiveFunboxNames } from "../../test/funbox/list";
@@ -13,7 +12,6 @@ const list: Command[] = [
     alias: "off",
     sticky: true,
     exec: (): void => {
-      ManualRestart.set();
       if (Funbox.setFunbox([])) {
         TestLogic.restart();
       }
@@ -36,7 +34,6 @@ for (const funbox of getAllFunboxes()) {
     configValueMode: "include",
     exec: (): void => {
       Funbox.toggleFunbox(funbox.name);
-      ManualRestart.set();
       TestLogic.restart();
     },
   });

frontend/src/ts/components/pages/profile/UserProfile.tsx

@@ -126,8 +126,14 @@ function PbTable<M extends "time" | "words">(props: {
       <div class="grid grid-cols-2 gap-8 p-4 md:grid-cols-4">
         <For each={bests()}>
           {(item) => (
-            <div class="grid items-center">
-              <div class="col-start-1 row-start-1 text-center">
+            <div class="group grid items-center">
+              <div
+                class={
+                  item.pb !== undefined
+                    ? "col-start-1 row-start-1 text-center transition-opacity group-hover:opacity-0"
+                    : "col-start-1 row-start-1 text-center"
+                }
+              >
                 <div class="text-xs text-sub">
                   {item.mode2} {props.mode === "time" ? "seconds" : "words"}
                 </div>
@@ -142,8 +148,9 @@ function PbTable<M extends "time" | "words">(props: {
                   })}
                 </div>
               </div>
+
               <Show when={item.pb !== undefined}>
-                <div class="col-start-1 row-start-1 grid bg-sub-alt text-center text-xs opacity-0 transition-opacity hover:opacity-100">
+                <div class="col-start-1 row-start-1 grid bg-sub-alt text-center text-xs opacity-0 transition-opacity group-hover:opacity-100">
                   <div class="text-sub">
                     {item.mode2} {props.mode === "time" ? "seconds" : "words"}
                   </div>

frontend/src/ts/constants/fonts.ts

@@ -140,4 +140,10 @@ export const Fonts: Record<KnownFontName, FontConfig> = {
   Adwaita_Mono: {
     fileName: "AdwaitaMono-Regular.woff2",
   },
+  Inter_Tight: {
+    fileName: "InterTight-Regular.woff2",
+  },
+  Space_Grotesk: {
+    fileName: "SpaceGrotesk-Regular.woff2",
+  },
 };

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

@@ -5,7 +5,6 @@ import {
   showErrorNotification,
   showSuccessNotification,
 } from "../stores/notifications";
-import * as ManualRestart from "../test/manual-restart-tracker";
 import * as CustomText from "../test/custom-text";
 import * as Funbox from "../test/funbox/funbox";
 import Config, { setConfig } from "../config";
@@ -215,7 +214,6 @@ export async function setup(challengeName: string): Promise<boolean> {
   const { data: list, error } = await tryCatch(JSONData.getChallengeList());
   if (error) {
     showErrorNotification("Failed to setup challenge", { error });
-    ManualRestart.set();
     setTimeout(() => {
       qs("header .config")?.show();
       qs(".page.pageTest")?.show();
@@ -230,7 +228,6 @@ export async function setup(challengeName: string): Promise<boolean> {
   try {
     if (challenge === undefined) {
       showNoticeNotification("Challenge not found");
-      ManualRestart.set();
       setTimeout(() => {
         qs("header .config")?.show();
         qs(".page.pageTest")?.show();
@@ -372,7 +369,6 @@ export async function setup(challengeName: string): Promise<boolean> {
         });
       }
     }
-    ManualRestart.set();
     notitext = challenge.message;
     qs("header .config")?.show();
     qs(".page.pageTest")?.show();

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

@@ -31,7 +31,6 @@ import {
   showSuccessNotification,
 } from "../stores/notifications";
 import * as CustomText from "../test/custom-text";
-import * as ManualRestart from "../test/manual-restart-tracker";
 import { restart as restartTest } from "../test/test-logic";
 import * as TestState from "../test/test-state";
 import * as Misc from "../utils/misc";
@@ -205,7 +204,6 @@ export function loadTestSettingsFromUrl(getOverride?: string): void {
     } else if (mode === "quote") {
       setConfig("quoteLength", [-2]);
       TestState.setSelectedQuoteId(parseInt(de[1], 10));
-      ManualRestart.set();
     }
     applied["mode2"] = de[1];
   }

frontend/src/ts/event-handlers/global.ts

@@ -10,7 +10,6 @@ import { focusWords } from "../test/test-ui";
 import * as TestLogic from "../test/test-logic";
 import { navigate } from "../controllers/route-controller";
 import { isInputElementFocused } from "../input/input-element";
-import * as ManualRestart from "../test/manual-restart-tracker";
 import * as TestState from "../test/test-state";
 import { isDevEnvironment } from "../utils/env";
 
@@ -76,10 +75,7 @@ document.addEventListener("keydown", (e) => {
     ) {
       e.preventDefault();
       if (getActivePage() === "test") {
-        if (e.shiftKey) {
-          ManualRestart.set();
-        }
-        TestLogic.restart();
+        TestLogic.restart({ isQuickRestart: !e.shiftKey });
       } else {
         void navigate("");
       }

frontend/src/ts/input/handlers/keydown.ts

@@ -13,7 +13,6 @@ import {
 } from "../../stores/notifications";
 import * as KeyConverter from "../../utils/key-converter";
 import * as ShiftTracker from "../../test/shift-tracker";
-import * as ManualRestart from "../../test/manual-restart-tracker";
 import { canQuickRestart } from "../../utils/quick-restart";
 import * as CustomText from "../../test/custom-text";
 import * as CustomTextState from "../../states/custom-text-name";
@@ -32,10 +31,7 @@ export async function handleTab(e: KeyboardEvent, now: number): Promise<void> {
   if (Config.quickRestart === "tab") {
     e.preventDefault();
     if ((TestWords.hasTab && e.shiftKey) || !TestWords.hasTab) {
-      if (e.shiftKey) {
-        ManualRestart.set();
-      }
-      TestLogic.restart();
+      TestLogic.restart({ isQuickRestart: !e.shiftKey });
       return;
     }
   }
@@ -88,10 +84,7 @@ export async function handleEnter(
   if (Config.quickRestart === "enter") {
     e.preventDefault();
     if ((TestWords.hasNewline && e.shiftKey) || !TestWords.hasNewline) {
-      if (e.shiftKey) {
-        ManualRestart.set();
-      }
-      TestLogic.restart();
+      TestLogic.restart({ isQuickRestart: !e.shiftKey });
       return;
     }
   }
@@ -202,12 +195,7 @@ export async function onKeydown(event: KeyboardEvent): Promise<void> {
 
   if (event.key === "Escape" && Config.quickRestart === "esc") {
     event.preventDefault();
-
-    if (event.shiftKey) {
-      ManualRestart.set();
-    }
-
-    TestLogic.restart();
+    TestLogic.restart({ isQuickRestart: !event.shiftKey });
     return;
   }
 }

frontend/src/ts/modals/custom-test-duration.ts

@@ -1,5 +1,4 @@
 import Config, { setConfig } from "../config";
-import * as ManualRestart from "../test/manual-restart-tracker";
 import * as TestLogic from "../test/test-logic";
 import { showNoticeNotification } from "../stores/notifications";
 import AnimatedModal, { ShowOptions } from "../utils/animated-modal";
@@ -94,7 +93,6 @@ function apply(): void {
 
   if (val !== null && !isNaN(val) && val >= 0 && isFinite(val)) {
     setConfig("time", val);
-    ManualRestart.set();
     TestLogic.restart();
     if (val >= 1800) {
       showNoticeNotification("Stay safe and take breaks!");

frontend/src/ts/modals/custom-text.ts

@@ -1,6 +1,5 @@
 import * as CustomText from "../test/custom-text";
 import * as CustomTextState from "../states/custom-text-name";
-import * as ManualRestart from "../test/manual-restart-tracker";
 import * as TestLogic from "../test/test-logic";
 import * as ChallengeController from "../controllers/challenge-controller";
 import Config, { setConfig } from "../config";
@@ -397,7 +396,6 @@ function apply(): void {
   }
 
   ChallengeController.clearActive();
-  ManualRestart.set();
   if (Config.mode !== "custom") {
     setConfig("mode", "custom");
   }

frontend/src/ts/modals/custom-word-amount.ts

@@ -1,5 +1,4 @@
 import Config, { setConfig } from "../config";
-import * as ManualRestart from "../test/manual-restart-tracker";
 import * as TestLogic from "../test/test-logic";
 import { showNoticeNotification } from "../stores/notifications";
 import AnimatedModal, { ShowOptions } from "../utils/animated-modal";
@@ -28,7 +27,6 @@ function apply(): void {
 
   if (val !== null && !isNaN(val) && val >= 0 && isFinite(val)) {
     if (setConfig("words", val)) {
-      ManualRestart.set();
       TestLogic.restart();
       if (val > 2000) {
         showNoticeNotification("Stay safe and take breaks!");

frontend/src/ts/modals/mobile-test-config.ts

@@ -1,6 +1,5 @@
 import * as TestLogic from "../test/test-logic";
 import Config, { setConfig, setQuoteLengthAll } from "../config";
-import * as ManualRestart from "../test/manual-restart-tracker";
 import * as CustomWordAmountPopup from "./custom-word-amount";
 import * as CustomTestDurationPopup from "./custom-test-duration";
 import * as QuoteSearchModal from "./quote-search";
@@ -90,7 +89,6 @@ async function setup(modalEl: ElementWithUtils): Promise<void> {
     } else if (wrd !== undefined) {
       const wrdNum = parseInt(wrd);
       setConfig("words", wrdNum);
-      ManualRestart.set();
       TestLogic.restart();
     }
   });
@@ -100,7 +98,6 @@ async function setup(modalEl: ElementWithUtils): Promise<void> {
     const mode = target.getAttribute("data-mode");
     if (mode === Config.mode) return;
     setConfig("mode", mode as Mode);
-    ManualRestart.set();
     TestLogic.restart();
   });
 
@@ -115,7 +112,6 @@ async function setup(modalEl: ElementWithUtils): Promise<void> {
     } else if (time !== undefined) {
       const timeNum = parseInt(time);
       setConfig("time", timeNum);
-      ManualRestart.set();
       TestLogic.restart();
     }
   });
@@ -126,7 +122,6 @@ async function setup(modalEl: ElementWithUtils): Promise<void> {
 
     if (lenAttr === "all") {
       if (setQuoteLengthAll()) {
-        ManualRestart.set();
         TestLogic.restart();
       }
     } else if (lenAttr === "-2") {
@@ -144,7 +139,6 @@ async function setup(modalEl: ElementWithUtils): Promise<void> {
       }
 
       if (setConfig("quoteLength", arr)) {
-        ManualRestart.set();
         TestLogic.restart();
       }
     }
@@ -158,13 +152,11 @@ async function setup(modalEl: ElementWithUtils): Promise<void> {
 
   modalEl.qs(".punctuation")?.on("click", () => {
     setConfig("punctuation", !Config.punctuation);
-    ManualRestart.set();
     TestLogic.restart();
   });
 
   modalEl.qs(".numbers")?.on("click", () => {
     setConfig("numbers", !Config.numbers);
-    ManualRestart.set();
     TestLogic.restart();
   });