impr(words-filter): add 'exact match only' checkbox (@Leonabcd123) (monkeytypegame#7126)

### Description

Added a checkbox in the words filter modal that allows the user to make
all characters not in the include list be excluded.

Implements monkeytypegame#5970

---------

Co-authored-by: Miodec <[email protected]>

Author: Leonabcd123

frontend/src/html/popups.html

@@ -742,6 +742,10 @@
           autocomplete="off"
           title="include"
         />
+        <label class="checkbox">
+          <input id="exactMatchOnly" type="checkbox" />
+          Exact match only
+        </label>
       </div>
       <div class="group">
         <div class="title">exclude</div>

frontend/src/styles/inputs.scss

@@ -102,6 +102,10 @@ label.checkboxWithSub {
   }
 }
 
+#wordFilterModal #exactMatchOnly {
+  width: 1.25em;
+}
+
 input[type="checkbox"] {
   appearance: none;
   height: 1.25em;

frontend/src/ts/modals/word-filter.ts

@@ -16,8 +16,17 @@ import { LayoutObject } from "@monkeytype/schemas/layouts";
 type FilterPreset = {
   display: string;
   getIncludeString: (layout: LayoutObject) => string[][];
-  getExcludeString: (layout: LayoutObject) => string[][];
-};
+} & (
+  | {
+      exactMatch: true;
+    }
+  | {
+      exactMatch?: false;
+      getExcludeString?: (layout: LayoutObject) => string[][];
+    }
+);
+
+const exactMatchCheckbox = $("#wordFilterModal #exactMatchOnly");
 
 const presets: Record<string, FilterPreset> = {
   homeKeys: {
@@ -27,13 +36,7 @@ const presets: Record<string, FilterPreset> = {
       const homeKeysRight = layout.keys.row3.slice(6, 10);
       return [...homeKeysLeft, ...homeKeysRight];
     },
-    getExcludeString: (layout) => {
-      const topRow = layout.keys.row2;
-      const bottomRow = layout.keys.row4;
-      const homeRowRight = layout.keys.row3.slice(10);
-      const homeRowMiddle = layout.keys.row3.slice(4, 6);
-      return [...topRow, ...homeRowMiddle, ...homeRowRight, ...bottomRow];
-    },
+    exactMatch: true,
   },
   leftHand: {
     display: "left hand",
@@ -43,12 +46,7 @@ const presets: Record<string, FilterPreset> = {
       const bottomRowInclude = layout.keys.row4.slice(0, 5);
       return [...topRowInclude, ...homeRowInclude, ...bottomRowInclude];
     },
-    getExcludeString: (layout) => {
-      const topRowExclude = layout.keys.row2.slice(5);
-      const homeRowExclude = layout.keys.row3.slice(5);
-      const bottomRowExclude = layout.keys.row4.slice(5);
-      return [...topRowExclude, ...homeRowExclude, ...bottomRowExclude];
-    },
+    exactMatch: true,
   },
   rightHand: {
     display: "right hand",
@@ -58,45 +56,28 @@ const presets: Record<string, FilterPreset> = {
       const bottomRowInclude = layout.keys.row4.slice(4);
       return [...topRowInclude, ...homeRowInclude, ...bottomRowInclude];
     },
-    getExcludeString: (layout) => {
-      const topRowExclude = layout.keys.row2.slice(0, 5);
-      const homeRowExclude = layout.keys.row3.slice(0, 5);
-      const bottomRowExclude = layout.keys.row4.slice(0, 4);
-      return [...topRowExclude, ...homeRowExclude, ...bottomRowExclude];
-    },
+    exactMatch: true,
   },
   homeRow: {
     display: "home row",
     getIncludeString: (layout) => {
       return layout.keys.row3;
     },
-    getExcludeString: (layout) => {
-      const topRowExclude = layout.keys.row2;
-      const bottomRowExclude = layout.keys.row4;
-      return [...topRowExclude, ...bottomRowExclude];
-    },
+    exactMatch: true,
   },
   topRow: {
     display: "top row",
     getIncludeString: (layout) => {
       return layout.keys.row2;
     },
-    getExcludeString: (layout) => {
-      const homeRowExclude = layout.keys.row3;
-      const bottomRowExclude = layout.keys.row4;
-      return [...homeRowExclude, ...bottomRowExclude];
-    },
+    exactMatch: true,
   },
   bottomRow: {
     display: "bottom row",
     getIncludeString: (layout) => {
       return layout.keys.row4;
     },
-    getExcludeString: (layout) => {
-      const topRowExclude = layout.keys.row2;
-      const homeRowExclude = layout.keys.row3;
-      return [...topRowExclude, ...homeRowExclude];
-    },
+    exactMatch: true,
   },
 };
 
@@ -165,10 +146,18 @@ function hide(hideOptions?: HideOptions<OutgoingData>): void {
 }
 
 async function filter(language: Language): Promise<string[]> {
+  const exactMatchOnly = exactMatchCheckbox.is(":checked");
   let filterin = $("#wordFilterModal .wordIncludeInput").val() as string;
   filterin = Misc.escapeRegExp(filterin?.trim());
   filterin = filterin.replace(/\s+/gi, "|");
-  const regincl = new RegExp(filterin, "i");
+  let regincl;
+
+  if (exactMatchOnly) {
+    regincl = new RegExp("^[" + filterin + "]+$", "i");
+  } else {
+    regincl = new RegExp(filterin, "i");
+  }
+
   let filterout = $("#wordFilterModal .wordExcludeInput").val() as string;
   filterout = Misc.escapeRegExp(filterout.trim());
   filterout = filterout.replace(/\s+/gi, "|");
@@ -202,7 +191,7 @@ async function filter(language: Language): Promise<string[]> {
   }
   for (const word of languageWordList.words) {
     const test1 = regincl.test(word);
-    const test2 = regexcl.test(word);
+    const test2 = exactMatchOnly ? false : regexcl.test(word);
     if (
       ((test1 && !test2) || (test1 && filterout === "")) &&
       word.length <= maxLength &&
@@ -236,6 +225,19 @@ async function apply(set: boolean): Promise<void> {
   });
 }
 
+function setExactMatchInput(disable: boolean): void {
+  const wordExcludeInputEl = $("#wordFilterModal #wordExcludeInput");
+
+  if (disable) {
+    $("#wordFilterModal #wordExcludeInput").val("");
+    wordExcludeInputEl.attr("disabled", "disabled");
+  } else {
+    wordExcludeInputEl.removeAttr("disabled");
+  }
+
+  exactMatchCheckbox.prop("checked", disable);
+}
+
 function disableButtons(): void {
   for (const button of modal.getModal().querySelectorAll("button")) {
     button.setAttribute("disabled", "true");
@@ -270,13 +272,26 @@ async function setup(): Promise<void> {
         .map((x) => x[0])
         .join(" "),
     );
-    $("#wordExcludeInput").val(
-      presetToApply
-        .getExcludeString(layout)
-        .map((x) => x[0])
-        .join(" "),
-    );
+
+    if (presetToApply.exactMatch === true) {
+      setExactMatchInput(true);
+    } else {
+      setExactMatchInput(false);
+      if (presetToApply.getExcludeString !== undefined) {
+        $("#wordExcludeInput").val(
+          presetToApply
+            .getExcludeString(layout)
+            .map((x) => x[0])
+            .join(" "),
+        );
+      }
+    }
   });
+
+  exactMatchCheckbox.on("change", () => {
+    setExactMatchInput(exactMatchCheckbox.is(":checked"));
+  });
+
   $("#wordFilterModal button.addButton").on("click", () => {
     $("#wordFilterModal .loadingIndicator").removeClass("hidden");
     disableButtons();