Merge branch 'monkeytypegame:master' into master

Author: LuckySilver0021

.github/pull_request_template.md

@@ -4,8 +4,6 @@
 
 ### Checks
 
-- [ ] Adding/modifying Typescript code?
-  - [ ] I have used `qs`, `qsa` or `qsr` instead of JQuery selectors.
 - [ ] Adding quotes?
   - [ ] Make sure to include translations for the quotes in the description (or another comment) so we can verify their content.
 - [ ] Adding a language?

docs/CONTRIBUTING_ADVANCED.md

@@ -150,8 +150,6 @@ If you are on a UNIX system and you get a spawn error, run npm with `sudo`.
 
 Code formatting is enforced by [Prettier](https://prettier.io/docs/en/install.html), which automatically runs every time you make a commit.
 
-We are currently in the process of converting from JQuery to vanilla JS. When submitting new code, please use the `qs`, `qsa` and `qsr` helper functions. These return a class with a lot of JQuery-like methods. You can read how they work and import them from `frontend/src/ts/utils/dom.ts`.
-
 For guidelines on commit messages, adding themes, languages, or quotes, please refer to [CONTRIBUTING.md](./CONTRIBUTING.md). Following these guidelines will increase the chances of getting your change accepted.
 
 ## Questions

frontend/__tests__/__harness__/setup-jquery.ts

@@ -13,14 +13,11 @@ describe("LayoutEmulator", () => {
       updateAltGrState(event);
     });
 
-    const createEvent = (
-      code: string,
-      type: string,
-    ): JQuery.KeyboardEventBase =>
+    const createEvent = (code: string, type: string): KeyboardEvent =>
       ({
         code,
         type,
-      }) as JQuery.KeyboardEventBase;
+      }) as KeyboardEvent;
 
     it("should set isAltGrPressed to true on AltRight keydown", () => {
       const event = createEvent("AltRight", "keydown");

frontend/__tests__/test/layout-emulator.spec.ts

@@ -26,7 +26,6 @@ describe("dom", () => {
           handler({
             target: e.target,
             childTarget: e.childTarget,
-            //@ts-expect-error will be added later, check TODO on the ChildEvent
             currentTarget: e.currentTarget,
           }),
         );
@@ -130,10 +129,6 @@ describe("dom", () => {
         await userEvent.click(clickTarget);
 
         //THEN
-
-        //This is the same behavior as jQuery `.on` with selector.
-        //The handler will be called two times,
-        //It does NOT call on the <section> or the parent element itself
         expect(handler).toHaveBeenCalledTimes(2);
 
         //First call is for childTarget inner2 (grand child of parent)

frontend/__tests__/utils/dom.jsdom-spec.ts

@@ -47,7 +47,6 @@
     "hangul-js": "0.2.6",
     "howler": "2.2.3",
     "idb": "8.0.3",
-    "jquery": "3.7.1",
     "konami": "1.7.0",
     "lz-ts": "1.1.2",
     "modern-screenshot": "4.6.5",
@@ -73,7 +72,6 @@
     "@types/chartjs-plugin-trendline": "1.0.1",
     "@types/damerau-levenshtein": "1.0.0",
     "@types/howler": "2.2.7",
-    "@types/jquery": "3.5.14",
     "@types/node": "24.9.1",
     "@types/object-hash": "3.0.6",
     "@types/subset-font": "1.4.3",

frontend/package.json

@@ -15,8 +15,11 @@
   }
 }
 
+// the screenshotting library has some issues with css layers
+@import "fonts";
+
 @layer custom-styles {
-  @import "buttons", "fonts", "404", "ads", "account", "animations", "caret",
+  @import "buttons", "404", "ads", "account", "animations", "caret",
     "commandline", "core", "inputs", "keymap", "login", "monkey", "nav",
     "notifications", "popups", "profile", "scroll", "settings",
     "account-settings", "leaderboards", "test", "loading", "friends",

frontend/src/styles/index.scss

@@ -1,7 +1,7 @@
-@import "normalize.css" layer(normalize);
+@import "fontawesome-5"; // the screenshotting library has some issues with css layers
 
+@import "normalize.css" layer(normalize);
 @layer vendor {
-  @import "fontawesome-5";
   @import "slim-select/styles";
   @import "balloon-css/src/balloon";
 }

frontend/src/styles/vendor.scss

@@ -4,23 +4,14 @@ import { getFocus } from "../../../signals/core";
 import { showModal } from "../../../stores/modals";
 import { Button } from "../../common/Button";
 
+import { Keytips } from "./Keytips";
 import { ThemeIndicator } from "./ThemeIndicator";
 import { VersionButton } from "./VersionButton";
 
 export function Footer(): JSXElement {
   return (
     <footer class="text-sub relative text-xs">
-      <div
-        class="mb-8 text-center leading-loose transition-opacity"
-        classList={{
-          "opacity-0": getFocus(),
-        }}
-      >
-        <kbd>tab</kbd> and <kbd>enter</kbd> - restart test
-        <br />
-        <kbd>ctrl/cmd</kbd> + <kbd>shift</kbd> + <kbd>p</kbd> or <kbd>esc</kbd>{" "}
-        - command line
-      </div>
+      <Keytips />
 
       <div
         class="-m-2 flex justify-between gap-8 transition-opacity"

frontend/src/ts/components/layout/footer/Footer.tsx

@@ -0,0 +1,44 @@
+import { JSXElement, Show } from "solid-js";
+
+import { getConfig } from "../../../signals/config";
+import { getFocus } from "../../../signals/core";
+import { Conditional } from "../../common/Conditional";
+
+export function Keytips(): JSXElement {
+  const userAgent = window.navigator.userAgent.toLowerCase();
+  const modifierKey =
+    userAgent.includes("mac") && !userAgent.includes("firefox")
+      ? "cmd"
+      : "ctrl";
+
+  const commandKey = (): string =>
+    getConfig.quickRestart === "esc" ? "tab" : "esc";
+
+  return (
+    <Show when={getConfig.showKeyTips}>
+      <div
+        class="mb-8 text-center leading-loose transition-opacity"
+        classList={{
+          "opacity-0": getFocus(),
+        }}
+      >
+        <Conditional
+          if={getConfig.quickRestart === "off"}
+          then={
+            <>
+              <kbd>tab</kbd> + <kbd>enter</kbd> - restart test
+            </>
+          }
+          else={
+            <>
+              <kbd>{getConfig.quickRestart}</kbd> - restart test
+            </>
+          }
+        />
+        <br />
+        <kbd>{commandKey()}</kbd> or <kbd>{modifierKey}</kbd> + <kbd>shift</kbd>{" "}
+        + <kbd>p</kbd> - command line
+      </div>
+    </Show>
+  );
+}