refactor(custom word amount modal): use new modal system

frontend/src/html/popups.html

@@ -588,17 +588,25 @@
     <div class="button disabled">Sign up</div>
   </div>
 </div>
-<div id="customWordAmountPopupWrapper" class="popupWrapper hidden">
-  <div id="customWordAmountPopup">
-    <div class="title">Word amount</div>
+<dialog id="customWordAmountModal" class="modalWrapper hidden">
+  <form class="modal">
+    <div class="title">Custom word amount</div>
     <input type="number" value="1" min="1" max="10000" />
     <div class="tip">
       You can start an infinite test by inputting 0. Then, to stop the test, use
-      the Bail Out feature (esc or ctrl/cmd + shift + p > Bail Out)
+      the Bail Out feature (
+      <key>esc</key>
+      or
+      <key>ctrl/cmd</key>
+      +
+      <key>shift</key>
+      +
+      <key>p</key>
+      > Bail Out)
     </div>
     <button>ok</button>
-  </div>
-</div>
+  </form>
+</dialog>
 <div id="customTestDurationPopupWrapper" class="popupWrapper hidden">
   <div id="customTestDurationPopup">
     <div class="title">Test duration</div>

frontend/src/styles/core.scss

@@ -168,7 +168,7 @@ key {
   background-color: var(--sub-color);
   /* font-weight: bold; */
   padding: 0.1rem 0.3rem;
-  margin: 0rem 0.5rem;
+  margin: 0rem 0rem;
   border-radius: 0.1rem;
   display: inline-block;
   font-size: 0.7rem;

frontend/src/styles/popups.scss

@@ -499,11 +499,23 @@
   }
 }
 
-#customWordAmountPopupWrapper,
+#customWordAmountModal {
+  .modal {
+    max-width: 500px;
+    .title {
+      font-size: 1.5rem;
+      color: var(--sub-color);
+    }
+    .tip {
+      font-size: 0.75rem;
+      color: var(--text-color);
+    }
+  }
+}
+
 #customTestDurationPopupWrapper,
 #practiseWordsPopupWrapper,
 #pbTablesPopupWrapper {
-  #customWordAmountPopup,
   #customTestDurationPopup,
   #practiseWordsPopup,
   #pbTablesPopup {

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

@@ -1,7 +1,15 @@
 import { getCommandline } from "../utils/async-modules";
+import * as CustomWordAmount from "../modals/custom-word-amount";
 
 $(".pageTest").on("click", "#testModesNotice .textButton", async (event) => {
   const attr = $(event.currentTarget).attr("commands");
   if (attr === undefined) return;
   (await getCommandline()).show({ subgroupOverride: attr });
 });
+
+$(".pageTest").on("click", "#testConfig .wordCount .textButton", (e) => {
+  const wrd = $(e.currentTarget).attr("wordCount");
+  if (wrd === "custom") {
+    CustomWordAmount.show();
+  }
+});

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

@@ -0,0 +1,60 @@
+import Config, * as UpdateConfig from "../config";
+import * as ManualRestart from "../test/manual-restart-tracker";
+import * as TestLogic from "../test/test-logic";
+import * as Notifications from "../elements/notifications";
+import AnimatedModal from "../utils/animated-modal";
+
+export function show(): void {
+  void modal.show({
+    beforeAnimation: async (modalEl) => {
+      (
+        modalEl.querySelector("input") as HTMLInputElement
+      ).value = `${Config.words}`;
+    },
+    afterAnimation: async (modalEl) => {
+      modalEl.querySelector("input")?.focus();
+    },
+  });
+}
+
+function hide(): void {
+  void modal.hide();
+}
+
+function apply(): void {
+  const val = parseInt(
+    modal.getModal().querySelector("input")?.value as string,
+    10
+  );
+
+  if (val !== null && !isNaN(val) && val >= 0 && isFinite(val)) {
+    if (UpdateConfig.setWordCount(val)) {
+      ManualRestart.set();
+      TestLogic.restart();
+      if (val > 2000) {
+        Notifications.add("Stay safe and take breaks!", 0);
+      } else if (val === 0) {
+        Notifications.add(
+          "Infinite words! Make sure to use Bail Out from the command line to save your result.",
+          0,
+          {
+            duration: 7,
+          }
+        );
+      }
+    }
+  } else {
+    Notifications.add("Custom word amount must be at least 1", 0);
+  }
+
+  hide();
+}
+
+const modal = new AnimatedModal("customWordAmountModal", "popups", undefined, {
+  setup: (modalEl): void => {
+    modalEl.addEventListener("submit", (e) => {
+      e.preventDefault();
+      apply();
+    });
+  },
+});

frontend/src/ts/popups/custom-word-amount-popup.ts

@@ -1,97 +0,0 @@
-import * as UpdateConfig from "../config";
-import * as ManualRestart from "../test/manual-restart-tracker";
-import * as TestLogic from "../test/test-logic";
-import * as Notifications from "../elements/notifications";
-import * as Skeleton from "../utils/skeleton";
-import { isPopupVisible } from "../utils/misc";
-
-const wrapperId = "customWordAmountPopupWrapper";
-
-export function show(): void {
-  Skeleton.append(wrapperId, "popups");
-  if (!isPopupVisible(wrapperId)) {
-    $("#customWordAmountPopupWrapper")
-      .stop(true, true)
-      .css("opacity", 0)
-      .removeClass("hidden")
-      .animate({ opacity: 1 }, 125, () => {
-        $("#customWordAmountPopup input").trigger("focus").trigger("select");
-      });
-  }
-}
-
-function hide(): void {
-  if (isPopupVisible(wrapperId)) {
-    $("#customWordAmountPopupWrapper")
-      .stop(true, true)
-      .css("opacity", 1)
-      .animate(
-        {
-          opacity: 0,
-        },
-        125,
-        () => {
-          $("#customWordAmountPopupWrapper").addClass("hidden");
-          Skeleton.remove(wrapperId);
-        }
-      );
-  }
-}
-
-function apply(): void {
-  const val = parseInt($("#customWordAmountPopup input").val() as string);
-
-  if (val !== null && !isNaN(val) && val >= 0 && isFinite(val)) {
-    if (UpdateConfig.setWordCount(val)) {
-      ManualRestart.set();
-      TestLogic.restart();
-      if (val > 2000) {
-        Notifications.add("Stay safe and take breaks!", 0);
-      } else if (val === 0) {
-        Notifications.add(
-          "Infinite words! Make sure to use Bail Out from the command line to save your result.",
-          0,
-          {
-            duration: 7,
-          }
-        );
-      }
-    }
-  } else {
-    Notifications.add("Custom word amount must be at least 1", 0);
-  }
-
-  hide();
-}
-
-$("#customWordAmountPopupWrapper").on("click", (e) => {
-  if ($(e.target).attr("id") === "customWordAmountPopupWrapper") {
-    hide();
-  }
-});
-
-$("#customWordAmountPopupWrapper input").on("keypress", (e) => {
-  if (e.key === "Enter") {
-    apply();
-  }
-});
-
-$("#customWordAmountPopupWrapper button").on("click", () => {
-  apply();
-});
-
-$("#testConfig").on("click", ".wordCount .textButton", (e) => {
-  const wrd = $(e.currentTarget).attr("wordCount");
-  if (wrd === "custom") {
-    show();
-  }
-});
-
-$(document).on("keydown", (event) => {
-  if (event.key === "Escape" && isPopupVisible(wrapperId)) {
-    hide();
-    event.preventDefault();
-  }
-});
-
-Skeleton.save(wrapperId);

frontend/src/ts/popups/mobile-test-config-popup.ts

@@ -1,7 +1,7 @@
 import * as TestLogic from "../test/test-logic";
 import Config, * as UpdateConfig from "../config";
 import * as ManualRestart from "../test/manual-restart-tracker";
-import * as CustomWordAmountPopup from "./custom-word-amount-popup";
+import * as CustomWordAmountPopup from "../modals/custom-word-amount";
 import * as CustomTestDurationPopup from "./custom-test-duration-popup";
 import * as QuoteSearchPopup from "./quote-search-popup";
 import * as CustomTextPopup from "./custom-text-popup";