feat(practice): add option to practice missed biwords (@sanidhyas3s) (#5637)

also converts practice popup to a modal

Author: sanidhyas3s

frontend/src/html/pages/test.html

@@ -153,7 +153,6 @@
       aria-label="Restart Test"
       data-balloon-pos="down"
       class="text"
-      onclick="this.blur();"
     >
       <i class="fas fa-fw fa-redo-alt"></i>
     </button>
@@ -375,11 +374,7 @@
             <div id="replayWords" class="words"></div>
           </div>
         </div>
-        <button
-          id="retrySavingResultButton"
-          class="danger hidden"
-          onclick="this.blur();"
-        >
+        <button id="retrySavingResultButton" class="danger hidden">
           <i class="fas fa-redo"></i>
           Retry saving result
         </button>
@@ -390,7 +385,6 @@
             aria-label="Next test"
             role="button"
             data-balloon-pos="down"
-            onclick="this.blur();"
           >
             <i class="fas fa-fw fa-chevron-right"></i>
           </button>
@@ -400,7 +394,6 @@
             aria-label="Repeat test"
             role="button"
             data-balloon-pos="down"
-            onclick="this.blur();"
           >
             <i class="fas fa-fw fa-sync-alt"></i>
           </button>
@@ -410,7 +403,6 @@
             aria-label="Practice words"
             role="button"
             data-balloon-pos="down"
-            onclick="this.blur();"
           >
             <i class="fas fa-fw fa-exclamation-triangle"></i>
           </button>
@@ -420,7 +412,6 @@
             aria-label="Toggle words history"
             role="button"
             data-balloon-pos="down"
-            onclick="this.blur();"
           >
             <i class="fas fa-fw fa-align-left"></i>
           </button>
@@ -430,7 +421,6 @@
             aria-label="Watch replay"
             role="button"
             data-balloon-pos="down"
-            onclick="this.blur();"
           >
             <i class="fas fa-fw fa-backward"></i>
           </button>
@@ -440,7 +430,6 @@
             aria-label="Copy screenshot to clipboard"
             role="button"
             data-balloon-pos="down"
-            onclick="this.blur();"
           >
             <i class="far fa-fw fa-image"></i>
           </button>
@@ -450,7 +439,6 @@
           aria-label="Watch video ad"
           role="button"
           data-balloon-pos="down"
-          onclick="this.blur();"
         >
           <i class="fas fa-fw fa-ad"></i>
         </button> -->

frontend/src/html/popups.html

@@ -272,19 +272,44 @@
   </div>
 </dialog>
 
-<div id="practiseWordsPopupWrapper" class="popupWrapper hidden" tabindex="-1">
-  <div id="practiseWordsPopup" action="">
+<dialog id="practiseWordsModal" class="modalWrapper hidden">
+  <div class="modal" actions="">
     <div class="title">Practice words</div>
-    <div class="text">
-      This will start a new test in custom mode. Words that you mistyped more
-      often or words that you typed much slower will be weighted higher and
-      appear more often.
+    <!-- <div class="inputs"> -->
+    <div class="group" data-id="missed">
+      <div class="title">
+        <i class="fas fa-times"></i>
+        missed
+      </div>
+      <div class="sub">
+        Include missed words or biwords (which include the previous word).
+      </div>
+      <div class="groupInputs">
+        <div class="buttonGroup">
+          <button class="missedOff" value="off">off</button>
+          <button class="missedWords" value="words">words</button>
+          <button class="missedBiwords" value="biwords">biwords</button>
+        </div>
+      </div>
+    </div>
+    <div class="group" data-id="slow">
+      <div class="title">
+        <i class="fas fa-tachometer-alt"></i>
+        slow
+      </div>
+      <div class="sub">Include words which you typed slower than others.</div>
+      <div class="groupInputs">
+        <div class="buttonGroup">
+          <button class="slowOff" value="false">off</button>
+          <button class="slowOn" value="true">on</button>
+        </div>
+      </div>
     </div>
-    <div class="button missed" tabindex="1">Practice missed</div>
-    <div class="button slow" tabindex="1">Practice slow</div>
-    <div class="button both" tabindex="1">Practice both</div>
+    <div></div>
+    <!-- </div> -->
+    <button class="start">start</button>
   </div>
-</div>
+</dialog>
 
 <dialog id="quoteRateModal" class="modalWrapper hidden">
   <div class="modal">

frontend/src/styles/popups.scss

@@ -270,6 +270,39 @@ body.darkMode {
   }
 }
 
+#practiseWordsModal {
+  .modal {
+    max-width: 400px;
+
+    .group {
+      width: 100%;
+      display: grid;
+      .title {
+        color: var(--sub-color);
+        text-transform: lowercase;
+      }
+      .sub {
+        color: var(--text-color);
+        margin-top: 0.25rem;
+        margin-bottom: 0.5rem;
+      }
+      .buttonGroup {
+        display: flex;
+        gap: 0.5rem;
+        width: 100%;
+        button {
+          flex-grow: 1;
+        }
+      }
+    }
+
+    .text {
+      font-size: 1rem;
+      color: var(--text-color);
+    }
+  }
+}
+
 #savedTextsModal {
   .modal {
     max-width: 500px;
@@ -554,32 +587,6 @@ body.darkMode {
   }
 }
 
-#practiseWordsPopupWrapper {
-  #practiseWordsPopup {
-    background: var(--bg-color);
-    border-radius: var(--roundness);
-    padding: 2rem;
-    display: grid;
-    gap: 1rem;
-    width: 400px;
-
-    .title {
-      font-size: 1.5rem;
-      color: var(--sub-color);
-    }
-
-    .tip {
-      font-size: 0.75rem;
-      color: var(--sub-color);
-    }
-
-    .text {
-      font-size: 1rem;
-      color: var(--text-color);
-    }
-  }
-}
-
 #googleSignUpModal {
   .modal {
     max-width: 425px;

frontend/src/ts/commandline/commandline.ts

@@ -467,6 +467,7 @@ function handleInputSubmit(): void {
     throw new Error("Can't handle input submit - command is null");
   }
   inputModeParams.command.exec?.({
+    commandlineModal: modal,
     input: inputValue,
   });
   void AnalyticsController.log("usedCommandLine", {

frontend/src/ts/commandline/lists/result-screen.ts

@@ -1,47 +1,11 @@
 import * as TestLogic from "../../test/test-logic";
 import * as TestUI from "../../test/test-ui";
-import * as PractiseWords from "../../test/practise-words";
+import * as PractiseWordsModal from "../../modals/practise-words";
 import * as Notifications from "../../elements/notifications";
 import * as TestInput from "../../test/test-input";
 import * as TestWords from "../../test/test-words";
 import Config from "../../config";
 
-const practiceSubgroup: MonkeyTypes.CommandsSubgroup = {
-  title: "Practice words...",
-  list: [
-    {
-      id: "practiseWordsMissed",
-      display: "missed",
-      exec: (): void => {
-        PractiseWords.init(true, false);
-        TestLogic.restart({
-          practiseMissed: true,
-        });
-      },
-    },
-    {
-      id: "practiseWordsSlow",
-      display: "slow",
-      exec: (): void => {
-        PractiseWords.init(false, true);
-        TestLogic.restart({
-          practiseMissed: true,
-        });
-      },
-    },
-    {
-      id: "practiseWordsBoth",
-      display: "both",
-      exec: (): void => {
-        PractiseWords.init(true, true);
-        TestLogic.restart({
-          practiseMissed: true,
-        });
-      },
-    },
-  ],
-};
-
 const commands: MonkeyTypes.Command[] = [
   {
     id: "nextTest",
@@ -70,9 +34,15 @@ const commands: MonkeyTypes.Command[] = [
   },
   {
     id: "practiseWords",
-    display: "Practice words...",
+    display: "Practice words",
     icon: "fa-exclamation-triangle",
-    subgroup: practiceSubgroup,
+    opensModal: true,
+    exec: (options): void => {
+      PractiseWordsModal.show({
+        animationMode: "modalOnly",
+        modalChain: options.commandlineModal,
+      });
+    },
     available: (): boolean => {
       return TestUI.resultVisible;
     },

frontend/src/ts/commandline/lists/tags.ts

@@ -101,12 +101,7 @@ function update(): void {
     shouldFocusTestUI: false,
     opensModal: true,
     exec: ({ commandlineModal }): void => {
-      EditTagsPopup.show(
-        "add",
-        undefined,
-        undefined,
-        commandlineModal as AnimatedModal
-      );
+      EditTagsPopup.show("add", undefined, undefined, commandlineModal);
     },
   });
 }

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

@@ -1,5 +1,6 @@
 import { getCommandline } from "../utils/async-modules";
 import * as CustomWordAmount from "../modals/custom-word-amount";
+import Config from "../config";
 import * as DB from "../db";
 import * as EditResultTagsModal from "../modals/edit-result-tags";
 import * as MobileTestConfigModal from "../modals/mobile-test-config";
@@ -10,6 +11,7 @@ import * as QuoteRateModal from "../modals/quote-rate";
 import * as QuoteReportModal from "../modals/quote-report";
 import * as QuoteSearchModal from "../modals/quote-search";
 import * as CustomTextModal from "../modals/custom-text";
+import * as PractiseWordsModal from "../modals/practise-words";
 
 $(".pageTest").on("click", "#testModesNotice .textButton", async (event) => {
   const attr = $(event.currentTarget).attr("commands");
@@ -74,3 +76,11 @@ $(".pageTest").on("click", "#testConfig .quoteLength .textButton", (e) => {
 $(".pageTest").on("click", "#testConfig .customText .textButton", () => {
   CustomTextModal.show();
 });
+
+$(".pageTest").on("click", "#practiseWordsButton", () => {
+  if (Config.mode === "zen") {
+    Notifications.add("Practice words is unsupported in zen mode", 0);
+    return;
+  }
+  PractiseWordsModal.show();
+});