Remove deprecated frontend (#2658)

* Remove deprecated click calls

* Remove deprecated focus calls

* Remove deprecated keypress event

* Remove deprecated keyCode

* Remove .keydown depracated frontend

frontend/src/scripts/account/result-filters.ts

@@ -347,7 +347,7 @@ export function updateTags(): void {
 
 $(
   ".pageAccount .filterButtons .buttonsAndTitle .buttons, .pageAccount .group.topFilters .buttonsAndTitle.testDate .buttons"
-).click(".button", (e) => {
+).on("click", ".button", (e) => {
   const group = $(e.target)
     .parents(".buttons")
     .attr("group") as MonkeyTypes.Group;
@@ -401,7 +401,7 @@ $(
   save();
 });
 
-$(".pageAccount .topFilters .button.allFilters").click(() => {
+$(".pageAccount .topFilters .button.allFilters").on("click", () => {
   (Object.keys(getFilters()) as MonkeyTypes.Group[]).forEach((group) => {
     (
       Object.keys(getGroup(group)) as MonkeyTypes.Filter<typeof group>[]
@@ -422,7 +422,7 @@ $(".pageAccount .topFilters .button.allFilters").click(() => {
   save();
 });
 
-$(".pageAccount .topFilters .button.currentConfigFilter").click(() => {
+$(".pageAccount .topFilters .button.currentConfigFilter").on("click", () => {
   (Object.keys(getFilters()) as MonkeyTypes.Group[]).forEach((group) => {
     (
       Object.keys(getGroup(group)) as MonkeyTypes.Filter<typeof group>[]
@@ -500,7 +500,7 @@ $(".pageAccount .topFilters .button.currentConfigFilter").click(() => {
   save();
 });
 
-$(".pageAccount .topFilters .button.toggleAdvancedFilters").click(() => {
+$(".pageAccount .topFilters .button.toggleAdvancedFilters").on("click", () => {
   $(".pageAccount .filterButtons").slideToggle(250);
   $(".pageAccount .topFilters .button.toggleAdvancedFilters").toggleClass(
     "active"

frontend/src/scripts/controllers/account-controller.js

@@ -685,7 +685,7 @@ async function signUp() {
   }
 }
 
-$(".pageLogin #forgotPasswordButton").click((e) => {
+$(".pageLogin #forgotPasswordButton").on("click", (e) => {
   let email = prompt("Email address");
   if (email) {
     firebase
@@ -703,39 +703,39 @@ $(".pageLogin #forgotPasswordButton").click((e) => {
 });
 
 $(".pageLogin .login input").keyup((e) => {
-  if (e.key == "Enter") {
+  if (e.key === "Enter") {
     UpdateConfig.setChangedBeforeDb(false);
     signIn();
   }
 });
 
-$(".pageLogin .login .button.signIn").click((e) => {
+$(".pageLogin .login .button.signIn").on("click", (e) => {
   UpdateConfig.setChangedBeforeDb(false);
   signIn();
 });
 
-$(".pageLogin .login .button.signInWithGoogle").click((e) => {
+$(".pageLogin .login .button.signInWithGoogle").on("click", (e) => {
   UpdateConfig.setChangedBeforeDb(false);
   signInWithGoogle();
 });
 
-// $(".pageLogin .login .button.signInWithGitHub").click((e) => {
+// $(".pageLogin .login .button.signInWithGitHub").on("click",(e) => {
 // UpdateConfig.setChangedBeforeDb(false);
 // signInWithGitHub();
 // });
 
-$(".signOut").click((e) => {
+$(".signOut").on("click", (e) => {
   signOut();
 });
 
 $(".pageLogin .register input").keyup((e) => {
   if ($(".pageLogin .register .button").hasClass("disabled")) return;
-  if (e.key == "Enter") {
+  if (e.key === "Enter") {
     signUp();
   }
 });
 
-$(".pageLogin .register .button").click((e) => {
+$(".pageLogin .register .button").on("click", (e) => {
   if ($(".pageLogin .register .button").hasClass("disabled")) return;
   signUp();
 });

frontend/src/scripts/controllers/input-controller.ts

@@ -645,7 +645,7 @@ function handleTab(event: JQuery.KeyDownEvent): void {
           (Config.mode === "zen" && event.shiftKey)
         ) {
           event.preventDefault();
-          $("#restartTestButton").focus();
+          $("#restartTestButton").trigger("focus");
         } else {
           event.preventDefault();
           handleChar("\t", TestInput.input.current.length);
@@ -903,7 +903,7 @@ $("#wordsInput").on("input", (event) => {
   }, 0);
 });
 
-$("#wordsInput").focus((event) => {
+$("#wordsInput").on("focus", (event) => {
   (event.target as HTMLInputElement).selectionStart = (
     event.target as HTMLInputElement
   ).selectionEnd = (event.target as HTMLInputElement).value.length;

frontend/src/scripts/controllers/page-controller.ts

@@ -87,6 +87,6 @@ $(document).on("click", "#top #menu .icon-button", (e) => {
   return false;
 });
 
-$(".pageTest .loginTip .link").click(async () => {
+$(".pageTest .loginTip .link").on("click", async () => {
   change("login");
 });

frontend/src/scripts/elements/commandline-lists.ts

@@ -2984,7 +2984,7 @@ export const defaultCommands: MonkeyTypes.CommandsGroup = {
       alias: "start begin type test",
       icon: "fa-keyboard",
       exec: (): void => {
-        $("#top #menu .icon-button.view-start").click();
+        $("#top #menu .icon-button.view-start").trigger("click");
       },
     },
     {
@@ -2992,7 +2992,7 @@ export const defaultCommands: MonkeyTypes.CommandsGroup = {
       display: "View Leaderboards Page",
       icon: "fa-crown",
       exec: (): void => {
-        $("#top #menu .icon-button.view-leaderboards").click();
+        $("#top #menu .icon-button.view-leaderboards").trigger("click");
       },
     },
     {
@@ -3000,7 +3000,7 @@ export const defaultCommands: MonkeyTypes.CommandsGroup = {
       display: "View About Page",
       icon: "fa-info",
       exec: (): void => {
-        $("#top #menu .icon-button.view-about").click();
+        $("#top #menu .icon-button.view-about").trigger("click");
       },
     },
     {
@@ -3008,7 +3008,7 @@ export const defaultCommands: MonkeyTypes.CommandsGroup = {
       display: "View Settings Page",
       icon: "fa-cog",
       exec: (): void => {
-        $("#top #menu .icon-button.view-settings").click();
+        $("#top #menu .icon-button.view-settings").trigger("click");
       },
     },
     {
@@ -3018,8 +3018,8 @@ export const defaultCommands: MonkeyTypes.CommandsGroup = {
       alias: "stats",
       exec: (): void => {
         $("#top #menu .icon-button.view-account").hasClass("hidden")
-          ? $("#top #menu .icon-button.view-login").click()
-          : $("#top #menu .icon-button.view-account").click();
+          ? $("#top #menu .icon-button.view-login").trigger("click")
+          : $("#top #menu .icon-button.view-account").trigger("click");
       },
     },
     {

frontend/src/scripts/elements/commandline.ts

@@ -16,7 +16,7 @@ function showInput(
   $("#commandInput").removeClass("hidden");
   $("#commandInput input").attr("placeholder", placeholder);
   $("#commandInput input").val(defaultValue);
-  $("#commandInput input").focus();
+  $("#commandInput input").trigger("focus");
   $("#commandInput input").attr("command", "");
   $("#commandInput input").attr("command", command);
   if (defaultValue != "") {
@@ -175,7 +175,7 @@ export let show = (): void => {
   $("#commandLine input").val("");
   CommandlineLists.updateThemeCommands();
   updateSuggested();
-  $("#commandLine input").focus();
+  $("#commandLine input").trigger("focus");
 };
 
 function hide(): void {
@@ -368,7 +368,7 @@ $("#commandLine input").keyup((e) => {
 });
 
 $(document).ready(() => {
-  $(document).keydown((event) => {
+  $(document).on("keydown", (event) => {
     // opens command line if escape, ctrl/cmd + shift + p, or tab is pressed if the setting swapEscAndTab is enabled
     if (
       event.key === "Escape" ||
@@ -413,7 +413,7 @@ $(document).ready(() => {
   });
 });
 
-$("#commandInput input").keydown((e) => {
+$("#commandInput input").on("keydown", (e) => {
   if (e.key === "Enter") {
     //enter
     e.preventDefault();
@@ -496,7 +496,7 @@ $(document).on(
   }
 );
 
-$("#commandLineWrapper").click((e) => {
+$("#commandLineWrapper").on("click", (e) => {
   if ($(e.target).attr("id") === "commandLineWrapper") {
     hide();
     UpdateConfig.setFontFamily(Config.fontFamily, true);
@@ -526,7 +526,7 @@ $("#commandLineWrapper").click((e) => {
 // }
 
 // let shiftedCommands = false;
-// $(document).keydown((e) => {
+// $(document).on("keydown", (e) => {
 //   if (e.key === "Shift") {
 //     if(shiftedCommands === false){
 //       shiftedCommands = true;
@@ -542,14 +542,14 @@ $("#commandLineWrapper").click((e) => {
 //   }
 // });
 
-$(document).keydown((e) => {
+$(document).on("keydown", (e) => {
   // if (isPreviewingTheme) {
   // console.log("applying theme");
   // applyCustomThemeColors();
   // previewTheme(Config.theme, false);
   // }
   if (!$("#commandLineWrapper").hasClass("hidden")) {
-    $("#commandLine input").focus();
+    $("#commandLine input").trigger("focus");
     if (e.key == ">" && Config.singleListCommandLine == "manual") {
       if (!isSingleListCommandLineActive()) {
         useSingleListCommandLine(false);
@@ -693,7 +693,7 @@ $(document.body).on("click", ".pageAbout .aboutEnableAds", () => {
   show();
 });
 
-$(".supportButtons .button.ads").click(() => {
+$(".supportButtons .button.ads").on("click", () => {
   CommandlineLists.pushCurrent(CommandlineLists.commandsEnableAds);
   show();
 });

frontend/src/scripts/elements/custom-background-filter.ts

@@ -116,7 +116,7 @@ $(".section.customBackgroundFilter .opacity input").on("input", () => {
   apply();
 });
 
-$(".section.customBackgroundFilter  .save.button").click(() => {
+$(".section.customBackgroundFilter  .save.button").on("click", () => {
   const arr = Object.keys(filters).map(
     (filterKey) => filters[filterKey as keyof typeof filters].value
   ) as MonkeyTypes.CustomBackgroundFilter;

frontend/src/scripts/elements/leaderboards.ts

@@ -422,13 +422,13 @@ export function show(): void {
   }
 }
 
-$("#leaderboardsWrapper").click((e) => {
+$("#leaderboardsWrapper").on("click", (e) => {
   if ($(e.target).attr("id") === "leaderboardsWrapper") {
     hide();
   }
 });
 
-// $("#leaderboardsWrapper .buttons .button").click((e) => {
+// $("#leaderboardsWrapper .buttons .button").on("click",(e) => {
 //   currentLeaderboard = $(e.target).attr("board");
 //   update();
 // });
@@ -474,65 +474,79 @@ $("#leaderboardsWrapper #leaderboards .rightTableWrapper").scroll((e) => {
   }
 });
 
-$("#leaderboardsWrapper #leaderboards .leftTableJumpToTop").click(async () => {
-  leftScrollEnabled = false;
-  $("#leaderboardsWrapper #leaderboards .leftTableWrapper").scrollTop(0);
-  await requestNew(15, 0);
-  leftScrollEnabled = true;
-});
+$("#leaderboardsWrapper #leaderboards .leftTableJumpToTop").on(
+  "click",
+  async () => {
+    leftScrollEnabled = false;
+    $("#leaderboardsWrapper #leaderboards .leftTableWrapper").scrollTop(0);
+    await requestNew(15, 0);
+    leftScrollEnabled = true;
+  }
+);
 
-$("#leaderboardsWrapper #leaderboards .leftTableJumpToMe").click(async () => {
-  if (currentRank[15].rank === undefined) return;
-  leftScrollEnabled = false;
-  await requestNew(15, currentRank[15].rank - leaderboardSingleLimit / 2);
-  const rowHeight = $(
-    "#leaderboardsWrapper #leaderboards .leftTableWrapper table tbody td"
-  ).outerHeight() as number;
-  $("#leaderboardsWrapper #leaderboards .leftTableWrapper").animate(
-    {
-      scrollTop:
-        rowHeight * Math.min(currentRank[15].rank, leaderboardSingleLimit / 2) -
-        ($(
-          "#leaderboardsWrapper #leaderboards .leftTableWrapper"
-        ).outerHeight() as number) /
-          2.25,
-    },
-    0,
-    () => {
-      leftScrollEnabled = true;
-    }
-  );
-});
+$("#leaderboardsWrapper #leaderboards .leftTableJumpToMe").on(
+  "click",
+  async () => {
+    if (currentRank[15].rank === undefined) return;
+    leftScrollEnabled = false;
+    await requestNew(15, currentRank[15].rank - leaderboardSingleLimit / 2);
+    const rowHeight = $(
+      "#leaderboardsWrapper #leaderboards .leftTableWrapper table tbody td"
+    ).outerHeight() as number;
+    $("#leaderboardsWrapper #leaderboards .leftTableWrapper").animate(
+      {
+        scrollTop:
+          rowHeight *
+            Math.min(currentRank[15].rank, leaderboardSingleLimit / 2) -
+          ($(
+            "#leaderboardsWrapper #leaderboards .leftTableWrapper"
+          ).outerHeight() as number) /
+            2.25,
+      },
+      0,
+      () => {
+        leftScrollEnabled = true;
+      }
+    );
+  }
+);
 
-$("#leaderboardsWrapper #leaderboards .rightTableJumpToTop").click(async () => {
-  rightScrollEnabled = false;
-  $("#leaderboardsWrapper #leaderboards .rightTableWrapper").scrollTop(0);
-  await requestNew(60, 0);
-  rightScrollEnabled = true;
-});
+$("#leaderboardsWrapper #leaderboards .rightTableJumpToTop").on(
+  "click",
+  async () => {
+    rightScrollEnabled = false;
+    $("#leaderboardsWrapper #leaderboards .rightTableWrapper").scrollTop(0);
+    await requestNew(60, 0);
+    rightScrollEnabled = true;
+  }
+);
 
-$("#leaderboardsWrapper #leaderboards .rightTableJumpToMe").click(async () => {
-  if (currentRank[60].rank === undefined) return;
-  leftScrollEnabled = false;
-  await requestNew(60, currentRank[60].rank - leaderboardSingleLimit / 2);
-  const rowHeight = $(
-    "#leaderboardsWrapper #leaderboards .rightTableWrapper table tbody td"
-  ).outerHeight() as number;
-  $("#leaderboardsWrapper #leaderboards .rightTableWrapper").animate(
-    {
-      scrollTop:
-        rowHeight * Math.min(currentRank[60].rank, leaderboardSingleLimit / 2) -
-        ($(
-          "#leaderboardsWrapper #leaderboards .rightTableWrapper"
-        ).outerHeight() as number) /
-          2.25,
-    },
-    0,
-    () => {
-      leftScrollEnabled = true;
-    }
-  );
-});
+$("#leaderboardsWrapper #leaderboards .rightTableJumpToMe").on(
+  "click",
+  async () => {
+    if (currentRank[60].rank === undefined) return;
+    leftScrollEnabled = false;
+    await requestNew(60, currentRank[60].rank - leaderboardSingleLimit / 2);
+    const rowHeight = $(
+      "#leaderboardsWrapper #leaderboards .rightTableWrapper table tbody td"
+    ).outerHeight() as number;
+    $("#leaderboardsWrapper #leaderboards .rightTableWrapper").animate(
+      {
+        scrollTop:
+          rowHeight *
+            Math.min(currentRank[60].rank, leaderboardSingleLimit / 2) -
+          ($(
+            "#leaderboardsWrapper #leaderboards .rightTableWrapper"
+          ).outerHeight() as number) /
+            2.25,
+      },
+      0,
+      () => {
+        leftScrollEnabled = true;
+      }
+    );
+  }
+);
 
 $(document).on("click", "#top #menu .icon-button", (e) => {
   if ($(e.currentTarget).hasClass("leaderboards")) {
@@ -541,7 +555,7 @@ $(document).on("click", "#top #menu .icon-button", (e) => {
   return false;
 });
 
-$(document).keydown((event) => {
+$(document).on("keydown", (event) => {
   if (event.key === "Escape" && !$("#leaderboardsWrapper").hasClass("hidden")) {
     hide();
     event.preventDefault();

frontend/src/scripts/elements/notifications.ts

@@ -117,7 +117,7 @@ class Notification {
                   );
                 }
               );
-            $(`#notificationCenter .notif[id='${this.id}']`).click(() => {
+            $(`#notificationCenter .notif[id='${this.id}']`).on("click", () => {
               this.hide();
               this.closeCallback();
             });
@@ -159,10 +159,13 @@ class Notification {
       );
       $("#notificationCenter").css("margin-top", height + "px");
       if (this.duration >= 0) {
-        $(`#bannerCenter .banner[id='${this.id}'] .closeButton`).click(() => {
-          this.hide();
-          this.closeCallback();
-        });
+        $(`#bannerCenter .banner[id='${this.id}'] .closeButton`).on(
+          "click",
+          () => {
+            this.hide();
+            this.closeCallback();
+          }
+        );
       }
     }
     if (this.duration > 0) {

frontend/src/scripts/elements/scroll-to-top.ts

@@ -2,7 +2,7 @@ import * as ActivePage from "../states/active-page";
 
 let visible = false;
 
-$(".scrollToTopButton").click(() => {
+$(".scrollToTopButton").on("click", () => {
   window.scrollTo({ top: 0, behavior: "smooth" });
 });
 

frontend/src/scripts/pages/account.ts

@@ -980,11 +980,11 @@ function sortAndRefreshHistory(
   loadMoreLines();
 }
 
-$(".pageAccount .toggleAccuracyOnChart").click(() => {
+$(".pageAccount .toggleAccuracyOnChart").on("click", () => {
   UpdateConfig.setChartAccuracy(!Config.chartAccuracy);
 });
 
-$(".pageAccount .toggleChartStyle").click(() => {
+$(".pageAccount .toggleChartStyle").on("click", () => {
   if (Config.chartStyle == "line") {
     UpdateConfig.setChartStyle("scatter");
   } else {
@@ -992,11 +992,11 @@ $(".pageAccount .toggleChartStyle").click(() => {
   }
 });
 
-$(".pageAccount .loadMoreButton").click(() => {
+$(".pageAccount .loadMoreButton").on("click", () => {
   loadMoreLines();
 });
 
-$(".pageAccount #accountHistoryChart").click(() => {
+$(".pageAccount #accountHistoryChart").on("click", () => {
   const index: number = ChartController.accountHistoryActiveIndex;
   loadMoreLines(index);
   if (!window) return;
@@ -1073,7 +1073,7 @@ $(".pageAccount .content .below .smoothing input").on("input", () => {
   applyHistorySmoothing();
 });
 
-$(".pageAccount .content .group.aboveHistory .exportCSV").click(() => {
+$(".pageAccount .content .group.aboveHistory .exportCSV").on("click", () => {
   Misc.downloadResultsCSV(filteredResults);
 });
 

frontend/src/scripts/pages/settings.ts

@@ -910,11 +910,11 @@ $(document).on(
   }
 );
 
-$("#importSettingsButton").click(() => {
+$("#importSettingsButton").on("click", () => {
   ImportExportSettingsPopup.show("import");
 });
 
-$("#exportSettingsButton").click(() => {
+$("#exportSettingsButton").on("click", () => {
   const configJSON = JSON.stringify(Config);
   navigator.clipboard.writeText(configJSON).then(
     function () {
@@ -926,7 +926,7 @@ $("#exportSettingsButton").click(() => {
   );
 });
 
-$("#shareCustomThemeButton").click(() => {
+$("#shareCustomThemeButton").on("click", () => {
   const share: string[] = [];
   $.each(
     $(".pageSettings .section.customTheme [type='color']"),
@@ -970,7 +970,7 @@ $(".pageSettings .section.customBackgroundSize .inputAndButton .save").on(
 
 $(".pageSettings .section.customBackgroundSize .inputAndButton input").keypress(
   (e) => {
-    if (e.keyCode == 13) {
+    if (e.key === "Enter") {
       UpdateConfig.setCustomBackground(
         $(
           ".pageSettings .section.customBackgroundSize .inputAndButton input"
@@ -997,7 +997,7 @@ $(".pageSettings .section.customLayoutfluid .inputAndButton .save").on(
 
 $(".pageSettings .section.customLayoutfluid .inputAndButton .input").keypress(
   (e) => {
-    if (e.keyCode == 13) {
+    if (e.key === "Enter") {
       UpdateConfig.setCustomLayoutfluid(
         $(
           ".pageSettings .section.customLayoutfluid .inputAndButton input"

frontend/src/scripts/popups/ape-keys-popup.ts

@@ -97,7 +97,7 @@ export async function show(): Promise<void> {
         },
         100,
         () => {
-          $("#apeKeysPopup textarea").focus().select();
+          $("#apeKeysPopup textarea").trigger("focus").select();
         }
       );
   }

frontend/src/scripts/popups/custom-test-duration-popup.ts

@@ -74,7 +74,7 @@ export function show(): void {
       .css("opacity", 0)
       .removeClass("hidden")
       .animate({ opacity: 1 }, 100, () => {
-        $("#customTestDurationPopup input").focus().select();
+        $("#customTestDurationPopup input").trigger("focus").select();
       });
   }
 
@@ -121,7 +121,7 @@ function apply(): void {
   hide();
 }
 
-$("#customTestDurationPopupWrapper").click((e) => {
+$("#customTestDurationPopupWrapper").on("click", (e) => {
   if ($(e.target).attr("id") === "customTestDurationPopupWrapper") {
     hide();
   }
@@ -130,12 +130,12 @@ $("#customTestDurationPopupWrapper").click((e) => {
 $("#customTestDurationPopup input").keyup((e) => {
   previewDuration();
 
-  if (e.keyCode == 13) {
+  if (e.key === "Enter") {
     apply();
   }
 });
 
-$("#customTestDurationPopup .button").click(() => {
+$("#customTestDurationPopup .button").on("click", () => {
   apply();
 });
 
@@ -146,7 +146,7 @@ $(document).on("click", "#top .config .time .text-button", (e) => {
   }
 });
 
-$(document).keydown((event) => {
+$(document).on("keydown", (event) => {
   if (
     event.key === "Escape" &&
     !$("#customTestDurationPopupWrapper").hasClass("hidden")

frontend/src/scripts/popups/custom-text-popup.ts

@@ -28,11 +28,11 @@ export function show(): void {
         $(`${popup} textarea`).val(newtext);
         $(`${popup} .wordcount input`).val(CustomText.word);
         $(`${popup} .time input`).val(CustomText.time);
-        $(`${popup} textarea`).focus();
+        $(`${popup} textarea`).trigger("focus");
       });
   }
   setTimeout(() => {
-    $(`${popup} textarea`).focus();
+    $(`${popup} textarea`).trigger("focus");
   }, 150);
 }
 
@@ -94,17 +94,17 @@ $(`${popup} .inputs .checkbox input`).change(() => {
   }
 });
 
-$(`${popup} textarea`).keypress((e) => {
+$(`${popup} textarea`).on("keypress", (e) => {
   if (e.code === "Enter" && e.ctrlKey) {
     $(`${popup} .button.apply`).click();
   }
 });
 
-$(`${popup} .randomInputFields .wordcount input`).keypress(() => {
+$(`${popup} .randomInputFields .wordcount input`).on("keypress", () => {
   $(`${popup} .randomInputFields .time input`).val("");
 });
 
-$(`${popup} .randomInputFields .time input`).keypress(() => {
+$(`${popup} .randomInputFields .time input`).on("keypress", () => {
   $(`${popup} .randomInputFields .wordcount input`).val("");
 });
 
@@ -201,7 +201,7 @@ $(document).on("click", "#top .config .customText .text-button", () => {
   show();
 });
 
-$(document).keydown((event) => {
+$(document).on("keydown", (event) => {
   if (
     event.key === "Escape" &&
     !$("#customTextPopupWrapper").hasClass("hidden")

frontend/src/scripts/popups/custom-theme-popup.ts

@@ -18,9 +18,9 @@ export function show(value: string): void {
       .css("opacity", 0)
       .removeClass("hidden")
       .animate({ opacity: 1 }, 100, () => {
-        $("#customThemeShare input").focus();
+        $("#customThemeShare input").trigger("focus");
         $("#customThemeShare input").select();
-        $("#customThemeShare input").focus();
+        $("#customThemeShare input").trigger("focus");
       });
   }
 }
@@ -56,12 +56,12 @@ function hide(): void {
   }
 }
 
-$("#customThemeShareWrapper").click((e) => {
+$("#customThemeShareWrapper").on("click", (e) => {
   if ($(e.target).attr("id") === "customThemeShareWrapper") {
     hide();
   }
 });
 
-$("#customThemeShare .button").click(() => {
+$("#customThemeShare .button").on("click", () => {
   hide();
 });

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

@@ -10,7 +10,7 @@ export function show(): void {
       .css("opacity", 0)
       .removeClass("hidden")
       .animate({ opacity: 1 }, 100, () => {
-        $("#customWordAmountPopup input").focus().select();
+        $("#customWordAmountPopup input").trigger("focus").select();
       });
   }
 }
@@ -55,19 +55,19 @@ function apply(): void {
   hide();
 }
 
-$("#customWordAmountPopupWrapper").click((e) => {
+$("#customWordAmountPopupWrapper").on("click", (e) => {
   if ($(e.target).attr("id") === "customWordAmountPopupWrapper") {
     hide();
   }
 });
 
-$("#customWordAmountPopup input").keypress((e) => {
-  if (e.keyCode == 13) {
+$("#customWordAmountPopup input").on("keypress", (e) => {
+  if (e.key === "Enter") {
     apply();
   }
 });
 
-$("#customWordAmountPopup .button").click(() => {
+$("#customWordAmountPopup .button").on("click", () => {
   apply();
 });
 
@@ -78,7 +78,7 @@ $(document).on("click", "#top .config .wordCount .text-button", (e) => {
   }
 });
 
-$(document).keydown((event) => {
+$(document).on("keydown", (event) => {
   if (
     event.key === "Escape" &&
     !$("#customWordAmountPopupWrapper").hasClass("hidden")

frontend/src/scripts/popups/edit-preset-popup.ts

@@ -39,7 +39,7 @@ export function show(action: string, id?: string, name?: string): void {
       .css("opacity", 0)
       .removeClass("hidden")
       .animate({ opacity: 1 }, 100, () => {
-        $("#presetWrapper #presetEdit input").focus();
+        $("#presetWrapper #presetEdit input").trigger("focus");
       });
   }
 }
@@ -79,7 +79,8 @@ async function apply(): Promise<void> {
 
     const tags = DB.getSnapshot().tags || [];
 
-    const activeTagIds: string[] = tags.filter((tag: MonkeyTypes.Tag) => tag.active)
+    const activeTagIds: string[] = tags
+      .filter((tag: MonkeyTypes.Tag) => tag.active)
       .map((tag: MonkeyTypes.Tag) => tag._id);
     configChanges.tags = activeTagIds;
   }
@@ -129,13 +130,11 @@ async function apply(): Promise<void> {
       Notifications.add("Failed to remove preset: " + response.message, -1);
     } else {
       Notifications.add("Preset removed", 1);
-      snapshotPresets.forEach(
-        (preset: MonkeyTypes.Preset, index: number) => {
-          if (preset._id === presetId) {
-            snapshotPresets.splice(index, 1);
-          }
+      snapshotPresets.forEach((preset: MonkeyTypes.Preset, index: number) => {
+        if (preset._id === presetId) {
+          snapshotPresets.splice(index, 1);
         }
-      );
+      });
     }
   }
 
@@ -143,18 +142,18 @@ async function apply(): Promise<void> {
   Loader.hide();
 }
 
-$("#presetWrapper").click((e) => {
+$("#presetWrapper").on("click", (e) => {
   if ($(e.target).attr("id") === "presetWrapper") {
     hide();
   }
 });
 
-$("#presetWrapper #presetEdit .button").click(() => {
+$("#presetWrapper #presetEdit .button").on("click", () => {
   apply();
 });
 
-$("#presetWrapper #presetEdit input").keypress((e) => {
-  if (e.keyCode === 13) {
+$("#presetWrapper #presetEdit input").on("keypress", (e) => {
+  if (e.key === "Enter") {
     apply();
   }
 });

frontend/src/scripts/popups/edit-tags-popup.ts

@@ -40,7 +40,7 @@ export function show(action: string, id?: string, name?: string): void {
       .css("opacity", 0)
       .removeClass("hidden")
       .animate({ opacity: 1 }, 100, () => {
-        $("#tagsWrapper #tagsEdit input").focus();
+        $("#tagsWrapper #tagsEdit input").trigger("focus");
       });
   }
 }
@@ -145,18 +145,18 @@ async function apply(): Promise<void> {
   Loader.hide();
 }
 
-$("#tagsWrapper").click((e) => {
+$("#tagsWrapper").on("click", (e) => {
   if ($(e.target).attr("id") === "tagsWrapper") {
     hide();
   }
 });
 
-$("#tagsWrapper #tagsEdit .button").click(() => {
+$("#tagsWrapper #tagsEdit .button").on("click", () => {
   apply();
 });
 
-$("#tagsWrapper #tagsEdit input").keypress((e) => {
-  if (e.keyCode == 13) {
+$("#tagsWrapper #tagsEdit input").on("keypress", (e) => {
+  if (e.key === "Enter") {
     apply();
   }
 });

frontend/src/scripts/popups/import-export-settings-popup.ts

@@ -17,9 +17,9 @@ export function show(mode: string, config?: string): void {
       .css("opacity", 0)
       .removeClass("hidden")
       .animate({ opacity: 1 }, 100, () => {
-        $("#settingsImportWrapper input").focus();
+        $("#settingsImportWrapper input").trigger("focus");
         $("#settingsImportWrapper input").select();
-        $("#settingsImportWrapper input").focus();
+        $("#settingsImportWrapper input").trigger("focus");
       });
   }
 }
@@ -48,11 +48,11 @@ function hide(): void {
   }
 }
 
-$("#settingsImport .button").click(() => {
+$("#settingsImport .button").on("click", () => {
   hide();
 });
 
-$("#settingsImportWrapper").click((e) => {
+$("#settingsImportWrapper").on("click", (e) => {
   if ($(e.target).attr("id") === "settingsImportWrapper") {
     hide();
   }

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

@@ -83,13 +83,13 @@ function hidePopup(): void {
   }
 }
 
-$("#mobileTestConfigPopupWrapper").click((e) => {
+$("#mobileTestConfigPopupWrapper").on("click", (e) => {
   if ($(e.target).attr("id") === "mobileTestConfigPopupWrapper") {
     hidePopup();
   }
 });
 
-$("#top .mobileConfig").click(() => {
+$("#top .mobileConfig").on("click", () => {
   showPopup();
 });
 
@@ -167,7 +167,7 @@ el.find(".modeGroup .button").on("click", (e) => {
   TestLogic.restart();
 });
 
-$("#mobileTestConfigPopup .button").click(() => {
+$("#mobileTestConfigPopup .button").on("click", () => {
   // hidePopup();
   update();
 });

frontend/src/scripts/popups/pb-tables-popup.ts

@@ -105,16 +105,16 @@ function hide(): void {
   }
 }
 
-$("#pbTablesPopupWrapper").click((e) => {
+$("#pbTablesPopupWrapper").on("click", (e) => {
   if ($(e.target).attr("id") === "pbTablesPopupWrapper") {
     hide();
   }
 });
 
-$(".pageAccount .button.showAllTimePbs").click(() => {
+$(".pageAccount .button.showAllTimePbs").on("click", () => {
   show("time");
 });
 
-$(".pageAccount .button.showAllWordsPbs").click(() => {
+$(".pageAccount .button.showAllWordsPbs").on("click", () => {
   show("words");
 });

frontend/src/scripts/popups/quote-rate-popup.ts

@@ -210,7 +210,7 @@ async function submit(): Promise<void> {
   $(".pageTest #result #rateQuoteButton .icon").addClass("fas");
 }
 
-$("#quoteRatePopupWrapper").click((e) => {
+$("#quoteRatePopupWrapper").on("click", (e) => {
   if ($(e.target).attr("id") === "quoteRatePopupWrapper") {
     hide();
   }
@@ -221,7 +221,7 @@ $("#quoteRatePopup .stars .star").hover((e) => {
   refreshStars(ratingHover);
 });
 
-$("#quoteRatePopup .stars .star").click((e) => {
+$("#quoteRatePopup .stars .star").on("click", (e) => {
   const ratingHover = parseInt($(e.currentTarget).attr("rating") as string);
   rating = ratingHover;
 });
@@ -231,11 +231,11 @@ $("#quoteRatePopup .stars .star").mouseout(() => {
   refreshStars();
 });
 
-$("#quoteRatePopup .submitButton").click(() => {
+$("#quoteRatePopup .submitButton").on("click", () => {
   submit();
 });
 
-$(".pageTest #rateQuoteButton").click(async () => {
+$(".pageTest #rateQuoteButton").on("click", async () => {
   // TODO remove this when done with TestWords
   show(TestWords.randomQuote as unknown as MonkeyTypes.Quote);
 });

frontend/src/scripts/popups/quote-report-popup.ts

@@ -54,7 +54,7 @@ export async function show(options = defaultOptions): Promise<void> {
       .css("opacity", 0)
       .removeClass("hidden")
       .animate({ opacity: 1 }, noAnim ? 0 : 100, () => {
-        $("#quoteReportPopup textarea").focus().select();
+        $("#quoteReportPopup textarea").trigger("focus").select();
       });
   }
 }
@@ -149,7 +149,7 @@ $("#quoteReportPopup .submit").on("click", async () => {
   await submitReport();
 });
 
-$(".pageTest #reportQuoteButton").click(async () => {
+$(".pageTest #reportQuoteButton").on("click", async () => {
   show({
     quoteId: TestWords.randomQuote?.id,
     noAnim: false,

frontend/src/scripts/popups/quote-search-popup.ts

@@ -148,7 +148,7 @@ export async function show(clearText = true): Promise<void> {
       .removeClass("hidden")
       .animate({ opacity: 1 }, 100, () => {
         if (clearText) {
-          $("#quoteSearchPopup input").focus().select();
+          $("#quoteSearchPopup input").trigger("focus").select();
         }
         updateResults(quoteSearchInputValue);
       });
@@ -205,7 +205,7 @@ $("#quoteSearchPopup .searchBox").on("keyup", (e) => {
   debouncedSearch(searchText);
 });
 
-$("#quoteSearchPopupWrapper").click((e) => {
+$("#quoteSearchPopupWrapper").on("click", (e) => {
   if ($(e.target).attr("id") === "quoteSearchPopupWrapper") {
     hide();
   }
@@ -243,7 +243,7 @@ $(document).on("click", "#top .config .quoteLength .text-button", (e) => {
   }
 });
 
-$(document).keydown((event) => {
+$(document).on("keydown", (event) => {
   if (
     event.key === "Escape" &&
     !$("#quoteSearchPopupWrapper").hasClass("hidden")

frontend/src/scripts/popups/quote-submit-popup.ts

@@ -71,7 +71,7 @@ export async function show(noAnim = false): Promise<void> {
   //     .css("opacity", 0)
   //     .removeClass("hidden")
   //     .animate({ opacity: 1 }, noAnim ? 0 : 100, () => {
-  //       $("#quoteSubmitPopup textarea").focus().select();
+  //       $("#quoteSubmitPopup textarea").trigger("focus").select();
   //     });
   // }
 }
@@ -116,7 +116,7 @@ $("#quoteSubmitPopup textarea").on("input", () => {
 });
 
 $("#quoteSubmitPopup input").on("keydown", (e) => {
-  if (e.keyCode === 13) {
+  if (e.key === "Enter") {
     submitQuote();
   }
 });

frontend/src/scripts/popups/result-tags-popup.ts

@@ -66,13 +66,13 @@ $(document).on("click", "#resultEditTagsPanelWrapper .button.tag", (f) => {
   $(f.target).toggleClass("active");
 });
 
-$("#resultEditTagsPanelWrapper").click((e) => {
+$("#resultEditTagsPanelWrapper").on("click", (e) => {
   if ($(e.target).attr("id") === "resultEditTagsPanelWrapper") {
     hide();
   }
 });
 
-$("#resultEditTagsPanel .confirmButton").click(async () => {
+$("#resultEditTagsPanel .confirmButton").on("click", async () => {
   const resultId = $("#resultEditTagsPanel").attr("resultid") as string;
   // let oldtags = JSON.parse($("#resultEditTagsPanel").attr("tags"));
 

frontend/src/scripts/popups/simple-popups.ts

@@ -184,7 +184,7 @@ class SimplePopup {
       .css("opacity", 0)
       .removeClass("hidden")
       .animate({ opacity: 1 }, 125, () => {
-        $($("#simplePopup").find("input")[0]).focus();
+        $($("#simplePopup").find("input")[0]).trigger("focus");
       });
   }
 
@@ -934,13 +934,14 @@ list["deleteCustomText"] = new SimplePopup(
   }
 );
 
-$(".pageSettings .section.discordIntegration #unlinkDiscordButton").click(
+$(".pageSettings .section.discordIntegration #unlinkDiscordButton").on(
+  "click",
   () => {
     list["unlinkDiscord"].show();
   }
 );
 
-$("#resetSettingsButton").click(() => {
+$("#resetSettingsButton").on("click", () => {
   list["resetSettings"].show();
 });
 
@@ -1003,7 +1004,7 @@ $(document).on(
   }
 );
 
-$(document).keydown((event) => {
+$(document).on("keydown", (event) => {
   if (event.key === "Escape" && !$("#simplePopupWrapper").hasClass("hidden")) {
     hide();
     event.preventDefault();

frontend/src/scripts/test/practise-words.ts

@@ -118,7 +118,7 @@ export function showPopup(focus = false): void {
       .animate({ opacity: 1 }, 100, () => {
         if (focus) {
           console.log("focusing");
-          $("#practiseWordsPopup .missed").focus();
+          $("#practiseWordsPopup .missed").trigger("focus");
         }
       });
   }
@@ -141,24 +141,24 @@ export function hidePopup(): void {
   }
 }
 
-$("#practiseWordsPopupWrapper").click((e) => {
+$("#practiseWordsPopupWrapper").on("click", (e) => {
   if ($(e.target).attr("id") === "practiseWordsPopupWrapper") {
     hidePopup();
   }
 });
 
-$("#practiseWordsPopup .button").keypress((e) => {
-  if (e.key == "Enter") {
+$("#practiseWordsPopup .button").on("keypress", (e) => {
+  if (e.key === "Enter") {
     $(e.currentTarget).click();
   }
 });
 
 $("#practiseWordsPopup .button.both").on("focusout", (e) => {
   e.preventDefault();
-  $("#practiseWordsPopup .missed").focus();
+  $("#practiseWordsPopup .missed").trigger("focus");
 });
 
-$(document).keydown((event) => {
+$(document).on("keydown", (event) => {
   if (
     event.key === "Escape" &&
     !$("#practiseWordsPopupWrapper").hasClass("hidden")
@@ -169,7 +169,7 @@ $(document).keydown((event) => {
 });
 
 $(document).on("keypress", "#practiseWordsButton", (event) => {
-  if (event.keyCode == 13) {
+  if (event.key === "Enter") {
     showPopup(true);
   }
 });

frontend/src/scripts/test/replay.ts

@@ -287,7 +287,7 @@ function getReplayExport(): string {
   });
 }
 
-$(".pageTest #playpauseReplayButton").click(() => {
+$(".pageTest #playpauseReplayButton").on("click", () => {
   if (toggleButton?.className === "fas fa-play") {
     playReplay();
   } else if (toggleButton?.className === "fas fa-pause") {
@@ -310,7 +310,7 @@ $("#replayWords").on("click", "letter", (event) => {
 });
 
 $(document).on("keypress", "#watchReplayButton", (event) => {
-  if (event.keyCode == 13) {
+  if (event.key === "Enter") {
     toggleReplayDisplay();
   }
 });

frontend/src/scripts/test/result.ts

@@ -670,7 +670,7 @@ export function update(
       if (Config.alwaysShowWordsHistory && Config.burstHeatmap) {
         TestUI.applyBurstHeatmap();
       }
-      $("#result").focus();
+      $("#result").trigger("focus");
       window.scrollTo({ top: 0 });
       $("#testModesNotice").addClass("hidden");
     },

frontend/src/scripts/test/shift-tracker.ts

@@ -32,9 +32,9 @@ function dynamicKeymapLegendStyle(uppercase: boolean): void {
   if (layoutKeys.filter((v) => v === undefined).length > 2) return;
 
   if ((uppercase && caseState) || (!uppercase && !caseState)) return;
-  
+
   caseState = uppercase;
-  
+
   const index = caseState ? 1 : 0;
 
   for (let i = 0; i < layoutKeys.length; i++) {
@@ -96,7 +96,7 @@ async function buildKeymapStrings(): Promise<void> {
   }
 }
 
-$(document).keydown((e) => {
+$(document).on("keydown", (e) => {
   if (e.code === "ShiftLeft") {
     leftState = true;
     rightState = false;

frontend/src/scripts/test/test-logic.ts

@@ -1587,7 +1587,7 @@ $(document).on("click", "#testModesNotice .text-button.restart", () => {
 });
 
 $(document).on("keypress", "#restartTestButton", (event) => {
-  if (event.key == "Enter") {
+  if (event.key === "Enter") {
     ManualRestart.reset();
     if (
       TestActive.get() &&
@@ -1618,7 +1618,7 @@ $(document.body).on("click", "#restartTestButton", () => {
 $(document.body).on("click", "#retrySavingResultButton", retrySavingResult);
 
 $(document).on("keypress", "#nextTestButton", (event) => {
-  if (event.keyCode == 13) {
+  if (event.key === "Enter") {
     restart();
   }
 });
@@ -1642,7 +1642,7 @@ $(document).on("keypress", "#restartTestButtonWithSameWordset", (event) => {
     Notifications.add("Repeat test disabled in zen mode");
     return;
   }
-  if (event.keyCode == 13) {
+  if (event.key === "Enter") {
     restart(true);
   }
 });
@@ -1700,19 +1700,19 @@ $(document).on("click", "#top .config .mode .text-button", (e) => {
   restart();
 });
 
-$("#practiseWordsPopup .button.missed").click(() => {
+$("#practiseWordsPopup .button.missed").on("click", () => {
   PractiseWords.hidePopup();
   PractiseWords.init(true, false);
   restart(false, false, undefined, true);
 });
 
-$("#practiseWordsPopup .button.slow").click(() => {
+$("#practiseWordsPopup .button.slow").on("click", () => {
   PractiseWords.hidePopup();
   PractiseWords.init(false, true);
   restart(false, false, undefined, true);
 });
 
-$("#practiseWordsPopup .button.both").click(() => {
+$("#practiseWordsPopup .button.both").on("click", () => {
   PractiseWords.hidePopup();
   PractiseWords.init(true, true);
   restart(false, false, undefined, true);

frontend/src/scripts/test/test-ui.ts

@@ -65,7 +65,7 @@ export function reset(): void {
 
 export function focusWords(): void {
   if (!$("#wordsWrapper").hasClass("hidden")) {
-    $("#wordsInput").focus();
+    $("#wordsInput").trigger("focus");
   }
 }
 
@@ -795,7 +795,7 @@ $(document).on("click", "#testModesNotice .text-button.blind", () => {
   UpdateConfig.setBlindMode(!Config.blindMode);
 });
 
-$(".pageTest #copyWordsListButton").click(async () => {
+$(".pageTest #copyWordsListButton").on("click", async () => {
   try {
     let words;
     if (Config.mode == "zen") {
@@ -812,7 +812,7 @@ $(".pageTest #copyWordsListButton").click(async () => {
   }
 });
 
-$(".pageTest #toggleBurstHeatmap").click(async () => {
+$(".pageTest #toggleBurstHeatmap").on("click", async () => {
   UpdateConfig.setBurstHeatmap(!Config.burstHeatmap);
 });
 
@@ -863,7 +863,7 @@ $("#wordsInput").on("focusout", () => {
 });
 
 $(document).on("keypress", "#showWordHistoryButton", (event) => {
-  if (event.keyCode == 13) {
+  if (event.key === "Enter") {
     toggleResultWords();
   }
 });

frontend/static/email-handler.html

@@ -207,7 +207,7 @@
     function showResetPassword() {
       $("#middle .preloader").addClass("hidden");
       $("#middle .resetPassword").removeClass("hidden");
-      $("#middle .resetPassword input").focus();
+      $("#middle .resetPassword input").trigger("focus");
     }
 
     function hideResetPassword() {
@@ -350,12 +350,12 @@
             // Error: invalid mode.
           }
 
-          $("#middle .resetPassword .button").click(() => {
+          $("#middle .resetPassword .button").on("click", () => {
             handleResetPassword(actionCode, continueUrl);
           });
 
-          $("#middle .resetPassword input").keypress((e) => {
-            if (e.key == "Enter") handleResetPassword(actionCode, continueUrl);
+          $("#middle .resetPassword input").on("keypress", (e) => {
+            if (e.key === "Enter") handleResetPassword(actionCode, continueUrl);
           });
         } catch (e) {
           $("#middle .preloader .icon").html(