removed swapEscAndTab, replaced quickTab with quickRestart (#3139) devkennyy

* Add leaderboard language selection (#3124) bruception

* Adds leaderboard language selection

* Update mesage

* fixed disabled select2 styling

* changed button positioning

* fixed media queries

* Add languages

Co-authored-by: Miodec <bartnikjack@gmail.com>

* remove references of swapEscToTab

* Custom Filters [FrontEnd] (#3106) nocommentcode

* Add Create and Delete functions for Filter Presets to `Users` ape endpoint
- deleteFilterPreset
- addFilterPreset

* Added name and _id fields to the `ResultFilter` interface in the front end

This matches the `ResultFilter` interface in the backend
Added the new fields for the default filter
Added checks in result-filter.ts to not update the ui based on these fields

* Added new-filter-preset-popup

This popup is displayed when creating a new filter preset
It allows the user to select a name.

* Added Filter Preset Buttons in account page html

- Added the Filter Preset button
- Added the filter preset region
- Added the new and delete buttons

* Added Filter Presets to DB Snapshot

* Implemented Custom Fileter Creation, Selection and Deletion flow

- Users can now create a custom filter based on the current settings
- Users will be prompted to select a name for the filter
- User can click on any custom filter and the current filter will be updated
- User can delete a custom filter while it is selected

* Implemented Filter Preset Creation, Selection and Deletion flow

- Users can now create a filter preset based on the current settings
- Users will be prompted to select a name for the filter
- User can click on any filter preset and the current filter will be updated
- User can delete a filter preset while it is selected

* adjusted styling

* removed margin

* removed icon

* added media query

* popup wording

* automatically replacing _ when displaying and creating preset

* using loader and notifications

* fixed bork

* fixed sometimes not being able to delete preset

* make preset popup look like tags popup

Co-authored-by: Miodec <bartnikjack@gmail.com>

* added pace caret: last closes #3113

* Add rate limits to forgot password (#3129) mehdidev

* Added New Quotes

* Add More Quotes

* Add rate limit to forgot password

* Use Prettier

* Change canCall to let so that lint doesn't flag me for the 69th time

* change forgotPassword() to async & remove console.log's

* If this doesn't fix everything idk what to do

* reduced nesting, using function to create error message

* updated notification

Co-authored-by: Miodec <bartnikjack@gmail.com>

* added: code_opencl language (#3132) codybloemhard

* added: code_opencl language;

* fixed: duplicate word in code_opencl;

* fixed: another duplicate in code_opencl;

* Include language in notification (#3134)

* Add 20 more Indonesian quotes, 151-170 (#3136) R0merol

* Added 20 more quotes (151-170)

* Fixed quote length (id: 155, 157)

* using completed events language instead of current config

* add hedge theme (#3137) devkennyy

* create hedge theme

* update _list.json

* fixed sub alt color issues

* update colors

* updated colors

Co-authored-by: Miodec <bartnikjack@gmail.com>

* replaced quickTab with quickRestart

* updated keytips and statements

* update keytips

* moved keytip update to ui module

* not opening command line if quick restart is esc

* calling update keytips when changing quick restart

* handling restarting with quick restart escape

* updated settings page to reflect new quick restart setting

* swapping legacy values

* removed line which caused circular dependencies

* reordered files to fix event not firing

* handling closing with escape before opening

* not doing anything if a modal is visible

Co-authored-by: Bruce Berrios <58147810+Bruception@users.noreply.github.com>
Co-authored-by: Miodec <bartnikjack@gmail.com>
Co-authored-by: Malo Hamon <hamon.malo@gmail.com>
Co-authored-by: Mehdi Hussain <mehdi@mehdi.us>
Co-authored-by: Cody Bloemhard <cblmhrd@live.nl>
Co-authored-by: R0merol <farisfrontiers@gmail.com>

backend/src/api/schemas/config-schema.ts

@@ -27,7 +27,7 @@ const CONFIG_SCHEMA = joi.object({
   showLiveWpm: joi.boolean(),
   showTimerProgress: joi.boolean(),
   smoothCaret: joi.boolean(),
-  quickTab: joi.boolean(),
+  quickRestart: joi.string().valid("off", "tab", "esc"),
   punctuation: joi.boolean(),
   numbers: joi.boolean(),
   words: joi.number().min(0),
@@ -74,7 +74,6 @@ const CONFIG_SCHEMA = joi.object({
   playSoundOnClick: joi.string().valid("off", ..._.range(1, 8).map(_.toString)),
   soundVolume: joi.string().valid("0.1", "0.5", "1.0"),
   startGraphsAtZero: joi.boolean(),
-  swapEscAndTab: joi.boolean(),
   showOutOfFocusWarning: joi.boolean(),
   paceCaret: joi.string().valid("off", "average", "pb", "last", "custom"),
   paceCaretCustomSpeed: joi.number().min(0),

frontend/src/ts/config.ts

@@ -339,16 +339,6 @@ export function setShowOutOfFocusWarning(
   return true;
 }
 
-export function setSwapEscAndTab(val: boolean, nosave?: boolean): boolean {
-  if (!isConfigValueValid("swap esc and tab", val, ["boolean"])) return false;
-
-  config.swapEscAndTab = val;
-  saveToLocalStorage("swapEscAndTab", nosave);
-  ConfigEvent.dispatch("swapEscAndTab", config.swapEscAndTab);
-
-  return true;
-}
-
 //pace caret
 export function setPaceCaret(
   val: MonkeyTypes.PaceCaret,
@@ -1118,24 +1108,25 @@ export function setSmoothLineScroll(mode: boolean, nosave?: boolean): boolean {
   return true;
 }
 
-//quick tab
-export function setQuickTabMode(mode: boolean, nosave?: boolean): boolean {
-  if (!isConfigValueValid("quick tab mode", mode, ["boolean"])) return false;
-
-  config.quickTab = mode;
-  if (!config.quickTab) {
-    $("#restartTestButton").removeClass("hidden");
-    $("#restartTestButton").css("opacity", 1);
-    $("#bottom .keyTips")
-      .html(`<key>tab</key> and <key>enter</key> / <key>space</key> - restart test<br>
-      <key>ctrl/cmd</key>+<key>shift</key>+<key>p</key> or <key>esc</key> - command line`);
-  } else {
-    $("#restartTestButton").addClass("hidden");
-    $("#bottom .keyTips").html(`<key>tab</key> - restart test<br>
-    <key>ctrl/cmd</key>+<key>shift</key>+<key>p</key> or <key>esc</key> - command line`);
+//quick restart
+export function setQuickRestartMode(
+  mode: "off" | "esc" | "tab",
+  nosave?: boolean
+): boolean {
+  if (
+    !isConfigValueValid("quick restart mode", mode, [["off", "esc", "tab"]])
+  ) {
+    return false;
   }
-  saveToLocalStorage("quickTab", nosave);
-  ConfigEvent.dispatch("quickTab", config.quickTab);
+
+  if (mode === "off") {
+    $(".pageTest #restartTestButton").removeClass("hidden");
+  } else {
+    $(".pageTest #restartTestButton").addClass("hidden");
+  }
+  config.quickRestart = mode;
+  saveToLocalStorage("quickRestart", nosave);
+  ConfigEvent.dispatch("quickRestart", config.quickRestart);
 
   return true;
 }
@@ -1751,7 +1742,7 @@ export function apply(
     setCustomBackground(configObj.customBackground, true);
     setCustomBackgroundSize(configObj.customBackgroundSize, true);
     setCustomBackgroundFilter(configObj.customBackgroundFilter, true);
-    setQuickTabMode(configObj.quickTab, true);
+    setQuickRestartMode(configObj.quickRestart, true);
     setKeyTips(configObj.showKeyTips, true);
     setTimeConfig(configObj.time, true);
     setQuoteLength(configObj.quoteLength, true);
@@ -1795,7 +1786,6 @@ export function apply(
     setFunbox(configObj.funbox, true);
     setRandomTheme(configObj.randomTheme, true);
     setShowAllLines(configObj.showAllLines, true);
-    setSwapEscAndTab(configObj.swapEscAndTab, true);
     setShowOutOfFocusWarning(configObj.showOutOfFocusWarning, true);
     setPaceCaret(configObj.paceCaret, true);
     setPaceCaretCustomSpeed(configObj.paceCaretCustomSpeed, true);

frontend/src/ts/constants/default-config.ts

@@ -21,7 +21,7 @@ export default <MonkeyTypes.Config>{
   showLiveWpm: false,
   showTimerProgress: true,
   smoothCaret: true,
-  quickTab: false,
+  quickRestart: "off",
   punctuation: false,
   numbers: false,
   words: 50,
@@ -63,7 +63,6 @@ export default <MonkeyTypes.Config>{
   playSoundOnClick: "off",
   soundVolume: "0.5",
   startGraphsAtZero: true,
-  swapEscAndTab: false,
   showOutOfFocusWarning: true,
   paceCaret: "off",
   paceCaretCustomSpeed: 100,

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

@@ -611,11 +611,11 @@ function handleTab(event: JQuery.KeyDownEvent, popupVisible: boolean): void {
   const modalVisible =
     !$("#commandLineWrapper").hasClass("hidden") || popupVisible;
 
-  if (Config.quickTab) {
+  if (Config.quickRestart === "tab") {
     // dont do anything special
     if (modalVisible) return;
 
-    // dont do anything on login so we can tab betweeen inputs
+    // dont do anything on login so we can tab/esc betweeen inputs
     if (ActivePage.get() === "login") return;
 
     // change page if not on test page
@@ -689,13 +689,34 @@ $(document).keydown(async (event) => {
   }
 
   //tab
-  if (
-    (event.key == "Tab" && !Config.swapEscAndTab) ||
-    (event.key == "Escape" && Config.swapEscAndTab)
-  ) {
+  if (event.key == "Tab") {
     handleTab(event, popupVisible);
   }
 
+  //esc
+  if (event.key === "Escape" && Config.quickRestart === "esc") {
+    const modalVisible =
+      !$("#commandLineWrapper").hasClass("hidden") || popupVisible;
+
+    if (modalVisible) return;
+
+    // change page if not on test page
+    if (ActivePage.get() !== "test") {
+      PageController.change("test");
+      return;
+    }
+
+    // in case we are in a long test, setting manual restart
+    if (event.shiftKey) {
+      ManualRestart.set();
+    } else {
+      ManualRestart.reset();
+    }
+
+    //otherwise restart
+    TestLogic.restart(false, false, event);
+  }
+
   if (!allowTyping) return;
 
   if (!event.originalEvent?.isTrusted || TestUI.testRestarting) {

frontend/src/ts/db.ts

@@ -107,6 +107,15 @@ export async function initSnapshot(): Promise<
     // }
     // LoadingPage.updateText("Downloading config...");
     if (configData) {
+      //swap legacy values to new ones
+      if (configData.quickTab === true) {
+        configData.quickRestart = "tab";
+      }
+
+      if (configData.swapEscAndTab === true) {
+        configData.quickRestart = "esc";
+      }
+
       const newConfig = {
         ...DefaultConfig,
       };

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

@@ -908,29 +908,6 @@ const commandsLazyMode: MonkeyTypes.CommandsGroup = {
   ],
 };
 
-const commandsSwapEscAndTab: MonkeyTypes.CommandsGroup = {
-  title: "Swap esc and tab...",
-  configKey: "swapEscAndTab",
-  list: [
-    {
-      id: "setSwapEscAndTabOff",
-      display: "off",
-      configValue: false,
-      exec: (): void => {
-        UpdateConfig.setSwapEscAndTab(false);
-      },
-    },
-    {
-      id: "setSwapEscAndTabOn",
-      display: "on",
-      configValue: true,
-      exec: (): void => {
-        UpdateConfig.setSwapEscAndTab(true);
-      },
-    },
-  ],
-};
-
 const commandsShowAllLines: MonkeyTypes.CommandsGroup = {
   title: "Show all lines...",
   configKey: "showAllLines",
@@ -2158,24 +2135,32 @@ const commandsSmoothCaret: MonkeyTypes.CommandsGroup = {
   ],
 };
 
-const commandsQuickTab: MonkeyTypes.CommandsGroup = {
-  title: "Quick tab...",
-  configKey: "quickTab",
+const commandsQuickRestart: MonkeyTypes.CommandsGroup = {
+  title: "Quick restart...",
+  configKey: "quickRestart",
   list: [
     {
-      id: "changeQuickTabOn",
-      display: "on",
-      configValue: true,
+      id: "changeQuickRestartTab",
+      display: "tab",
+      configValue: "tab",
       exec: (): void => {
-        UpdateConfig.setQuickTabMode(true);
+        UpdateConfig.setQuickRestartMode("tab");
       },
     },
     {
-      id: "changeQuickTabOff",
-      display: "off",
-      configValue: false,
+      id: "changeQuickRestartEsc",
+      display: "esc",
+      configValue: "esc",
       exec: (): void => {
-        UpdateConfig.setQuickTabMode(false);
+        UpdateConfig.setQuickRestartMode("esc");
+      },
+    },
+    {
+      id: "changeQuickRestartOff",
+      display: "off",
+      configValue: "off",
+      exec: (): void => {
+        UpdateConfig.setQuickRestartMode("off");
       },
     },
   ],
@@ -2734,10 +2719,10 @@ export const defaultCommands: MonkeyTypes.CommandsGroup = {
       subgroup: commandsSmoothCaret,
     },
     {
-      id: "changeQuickTab",
-      display: "Quick tab...",
+      id: "changeQuickRestart",
+      display: "Quick restart...",
       icon: "fa-redo-alt",
-      subgroup: commandsQuickTab,
+      subgroup: commandsQuickRestart,
     },
     {
       id: "changeRepeatQuotes",
@@ -2903,12 +2888,6 @@ export const defaultCommands: MonkeyTypes.CommandsGroup = {
       icon: "fa-chart-line",
       subgroup: commandsStartGraphsAtZero,
     },
-    {
-      id: "changeSwapEscAndTab",
-      display: "Swap esc and tab...",
-      icon: "fa-exchange-alt",
-      subgroup: commandsSwapEscAndTab,
-    },
     {
       id: "changeLazyMode",
       display: "Lazy mode...",

frontend/src/ts/elements/commandline.ts

@@ -387,14 +387,27 @@ $("#commandLine input").keyup((e) => {
 $(document).ready(() => {
   $(document).on("keydown", (event) => {
     if (PageTransition.get()) return event.preventDefault();
-    // opens command line if escape, ctrl/cmd + shift + p, or tab is pressed if the setting swapEscAndTab is enabled
+    // opens command line if escape or ctrl/cmd + shift + p
     if (
-      event.key === "Escape" ||
+      event.key === "Escape" &&
+      !$("#commandLineWrapper").hasClass("hidden")
+    ) {
+      if (CommandlineLists.current.length > 1) {
+        CommandlineLists.current.pop();
+        $("#commandLine").removeClass("allCommands");
+        show();
+      } else {
+        hide();
+      }
+      UpdateConfig.setFontFamily(Config.fontFamily, true);
+      return;
+    }
+    if (
+      (event.key === "Escape" && Config.quickRestart !== "esc") ||
       (event.key &&
         event.key.toLowerCase() === "p" &&
         (event.metaKey || event.ctrlKey) &&
-        event.shiftKey) ||
-      (event.key === "Tab" && Config.swapEscAndTab)
+        event.shiftKey)
     ) {
       event.preventDefault();
 
@@ -402,23 +415,12 @@ $(document).ready(() => {
 
       if (popupVisible) return;
 
-      if (!$("#commandLineWrapper").hasClass("hidden")) {
-        if (CommandlineLists.current.length > 1) {
-          CommandlineLists.current.pop();
-          $("#commandLine").removeClass("allCommands");
-          show();
-        } else {
-          hide();
-        }
-        UpdateConfig.setFontFamily(Config.fontFamily, true);
-      } else if (event.key === "Tab" || !Config.swapEscAndTab) {
-        if (Config.singleListCommandLine == "on") {
-          useSingleListCommandLine(false);
-        } else {
-          CommandlineLists.setCurrent([CommandlineLists.defaultCommands]);
-        }
-        show();
+      if (Config.singleListCommandLine == "on") {
+        useSingleListCommandLine(false);
+      } else {
+        CommandlineLists.setCurrent([CommandlineLists.defaultCommands]);
       }
+      show();
     }
   });
 });

frontend/src/ts/index.ts

@@ -4,6 +4,7 @@ import "../styles/index.scss";
 import "./firebase";
 
 import * as DB from "./db";
+import "./ui";
 import Config from "./config";
 import * as TestStats from "./test/test-stats";
 import * as Replay from "./test/replay";
@@ -20,7 +21,6 @@ import "./popups/edit-preset-popup";
 import "./popups/simple-popups";
 import "./controllers/input-controller";
 import "./ready";
-import "./ui";
 import "./pages/about";
 import "./popups/pb-tables-popup";
 import "./elements/scroll-to-top";

frontend/src/ts/pages/settings.ts

@@ -34,9 +34,9 @@ async function initGroups(): Promise<void> {
     UpdateConfig.setDifficulty,
     "button"
   );
-  groups["quickTab"] = new SettingsGroup(
-    "quickTab",
-    UpdateConfig.setQuickTabMode,
+  groups["quickRestart"] = new SettingsGroup(
+    "quickRestart",
+    UpdateConfig.setQuickRestartMode,
     "button"
   );
   groups["showLiveWpm"] = new SettingsGroup(
@@ -196,11 +196,6 @@ async function initGroups(): Promise<void> {
     UpdateConfig.setFlipTestColors,
     "button"
   );
-  groups["swapEscAndTab"] = new SettingsGroup(
-    "swapEscAndTab",
-    UpdateConfig.setSwapEscAndTab,
-    "button"
-  );
   groups["showOutOfFocusWarning"] = new SettingsGroup(
     "showOutOfFocusWarning",
     UpdateConfig.setShowOutOfFocusWarning,

frontend/src/ts/ready.ts

@@ -48,7 +48,7 @@ $(document).ready(() => {
   }
   CookiePopup.check();
   $("body").css("transition", "all .25s, transform .05s");
-  if (Config.quickTab) {
+  if (Config.quickRestart === "tab" || Config.quickRestart === "esc") {
     $("#restartTestButton").addClass("hidden");
   }
   if (!window.localStorage.getItem("merchbannerclosed")) {

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

@@ -335,8 +335,10 @@ export function restart(
         )
       ) {
         let message = "Use your mouse to confirm.";
-        if (Config.quickTab) {
+        if (Config.quickRestart === "tab") {
           message = "Press shift + tab or use your mouse to confirm.";
+        } else if (Config.quickRestart === "esc") {
+          message = "Press shift + escape or use your mouse to confirm.";
         }
         Notifications.add("Quick restart disabled. " + message, 0, 3);
         return;

frontend/src/ts/types/types.d.ts

@@ -309,7 +309,7 @@ declare namespace MonkeyTypes {
     showLiveWpm: boolean;
     showTimerProgress: boolean;
     smoothCaret: boolean;
-    quickTab: boolean;
+    quickRestart: "off" | "esc" | "tab";
     punctuation: boolean;
     numbers: boolean;
     words: WordsModes;
@@ -351,7 +351,6 @@ declare namespace MonkeyTypes {
     playSoundOnClick: PlaySoundOnClick;
     soundVolume: SoundVolume;
     startGraphsAtZero: boolean;
-    swapEscAndTab: boolean;
     showOutOfFocusWarning: boolean;
     paceCaret: PaceCaret;
     paceCaretCustomSpeed: number;

frontend/src/ts/ui.ts

@@ -9,24 +9,28 @@ import * as TestUI from "./test/test-ui";
 import { get as getActivePage } from "./states/active-page";
 
 export function updateKeytips(): void {
-  if (Config.swapEscAndTab) {
+  if (Config.quickRestart === "esc") {
     $(".pageSettings .tip").html(`
     tip: You can also change all these settings quickly using the
-    command line (
-    <key>tab</key>
-    )`);
-    $("#bottom .keyTips").html(`
-    <key>esc</key> - restart test<br>
-      <key>tab</key> - command line`);
+    command line (<key>ctrl/cmd</key>+<key>shift</key>+<key>p</key>)`);
   } else {
     $(".pageSettings .tip").html(`
     tip: You can also change all these settings quickly using the
-    command line (
-    <key>esc</key>
-    )`);
+    command line (<key>esc</key> or <key>ctrl/cmd</key>+<key>shift</key>+<key>p</key>)`);
+  }
+
+  if (Config.quickRestart === "esc") {
+    $("#bottom .keyTips").html(`
+    <key>esc</key> - restart test<br>
+    <key>ctrl/cmd</key>+<key>shift</key>+<key>p</key> - command line`);
+  } else if (Config.quickRestart === "tab") {
     $("#bottom .keyTips").html(`
     <key>tab</key> - restart test<br>
       <key>esc</key> or <key>ctrl/cmd</key>+<key>shift</key>+<key>p</key> - command line`);
+  } else {
+    $("#bottom .keyTips").html(`
+    <key>tab</key> + <key>enter</key> - restart test<br>
+    <key>esc</key> or <key>ctrl/cmd</key>+<key>shift</key>+<key>p</key> - command line`);
   }
 }
 
@@ -108,5 +112,5 @@ $(window).on("resize", () => {
 });
 
 ConfigEvent.subscribe((eventKey) => {
-  if (eventKey === "swapEscAndTab") updateKeytips();
+  if (eventKey === "quickRestart") updateKeytips();
 });

frontend/static/html/pages/settings.html

@@ -161,25 +161,43 @@
         </div>
       </div>
     </div>
-    <div class="section quickTab" id="quickTab">
-      <h1>quick tab mode</h1>
+    <div class="section quickRestart" id="quickRestart">
+      <h1>quick restart</h1>
       <div class="text">
         Press
         <key>tab</key>
-        to quickly restart the test, or to quickly jump to the test page. This
-        function disables tab navigation on the website.
+        or
+        <key>esc</key>
+        to quickly restart the test, or to quickly jump to the test page. The
+        "tab" setting disables tab navigation on the website, while the "esc"
+        disables opening the command line with
+        <key>esc</key>
+        .
       </div>
       <div class="buttons">
         <div
           class="button"
-          quickTab="false"
+          quickRestart="off"
           tabindex="0"
           onclick="this.blur();"
         >
           off
         </div>
-        <div class="button" quickTab="true" tabindex="0" onclick="this.blur();">
-          on
+        <div
+          class="button"
+          quickRestart="tab"
+          tabindex="0"
+          onclick="this.blur();"
+        >
+          tab
+        </div>
+        <div
+          class="button"
+          quickRestart="esc"
+          tabindex="0"
+          onclick="this.blur();"
+        >
+          esc
         </div>
       </div>
     </div>
@@ -722,28 +740,6 @@
         </div>
       </div>
     </div>
-    <div class="section swapEscAndTab" section="">
-      <h1>swap esc and tab</h1>
-      <div class="text">Swap the behavior of tab and escape keys.</div>
-      <div class="buttons">
-        <div
-          class="button"
-          swapEscAndTab="false"
-          tabindex="0"
-          onclick="this.blur();"
-        >
-          off
-        </div>
-        <div
-          class="button"
-          swapEscAndTab="true"
-          tabindex="0"
-          onclick="this.blur();"
-        >
-          on
-        </div>
-      </div>
-    </div>
     <div class="section lazyMode">
       <h1>lazy mode</h1>
       <div class="text">