From d2a2fe04b6d429ffde8080386594a467dc7ecb1b Mon Sep 17 00:00:00 2001
From: Rajyavardhan Singh <srajyavardhan12@gmail.com>
Date: Thu, 23 Oct 2025 13:13:24 +0530
Subject: [PATCH] feat: add custom character generator to custom text modal

- Add new "custom generator" button to custom text modal
- Create generator modal with character input and presets
- Support min/max word length and word count configuration
- Include presets for alphas, numbers, symbols, bigrams, trigrams
- Add code-specific patterns for programming practice

Closes #6941

Amp-Thread-ID: https://ampcode.com/threads/T-2ab40b2e-c27d-4959-91ed-6e0fd0964a90
Co-authored-by: Amp <amp@ampcode.com>
---
 frontend/src/html/popups.html              |  77 +++++++
 frontend/src/styles/popups.scss            |  92 +++++++++
 frontend/src/ts/modals/custom-generator.ts | 227 +++++++++++++++++++++
 frontend/src/ts/modals/custom-text.ts      |   8 +
 4 files changed, 404 insertions(+)
 create mode 100644 frontend/src/ts/modals/custom-generator.ts

diff --git a/frontend/src/html/popups.html b/frontend/src/html/popups.html
index d74cd8989..0c1781f5b 100644
--- a/frontend/src/html/popups.html
+++ b/frontend/src/html/popups.html
@@ -495,6 +495,10 @@
         <i class="fas fa-filter"></i>
         words filter
       </div>
+      <div class="button customGenerator">
+        <i class="fas fa-wand-magic-sparkles"></i>
+        custom generator
+      </div>
     </div>
     <div class="savedTexts hidden" style="display: none">
       <div class="title">saved texts</div>
@@ -772,6 +776,79 @@
     </div>
   </div>
 </dialog>
+<dialog id="customGeneratorModal" class="modalWrapper hidden">
+  <div class="modal">
+    <div class="top">
+      <div class="tip">
+        Enter characters or strings separated by spaces. Random combinations
+        will be generated using these inputs.
+      </div>
+    </div>
+    <div class="main">
+      <div class="group">
+        <div class="title">character set</div>
+        <input
+          class="characterInput"
+          id="characterInput"
+          autocomplete="off"
+          placeholder="a b c d 1 2 3 [ ] ;"
+          title="characters"
+        />
+      </div>
+      <div class="group lengthgrid">
+        <div class="title">min length</div>
+        <div class="title">max length</div>
+
+        <input
+          class="wordLength minLengthInput"
+          autocomplete="off"
+          type="number"
+          value="2"
+          min="1"
+          title="min"
+        />
+        <input
+          class="wordLength maxLengthInput"
+          autocomplete="off"
+          type="number"
+          value="5"
+          min="1"
+          title="max"
+        />
+      </div>
+      <div class="group">
+        <div class="title">word count</div>
+        <input
+          class="wordCountInput"
+          autocomplete="off"
+          type="number"
+          value="100"
+          min="1"
+          title="word count"
+        />
+      </div>
+      <div class="group">
+        <div class="title">presets</div>
+        <div class="presetButtons">
+          <button class="presetButton" data-preset="alphas">a-z</button>
+          <button class="presetButton" data-preset="numbers">0-9</button>
+          <button class="presetButton" data-preset="special">symbols</button>
+          <button class="presetButton" data-preset="bigrams">bigrams</button>
+          <button class="presetButton" data-preset="trigrams">trigrams</button>
+        </div>
+      </div>
+    </div>
+
+    <div class="bottom">
+      <div class="tip">
+        "Set" replaces the current custom text with generated words, "Add"
+        appends generated words to the current custom text.
+      </div>
+      <button class="setButton">set</button>
+      <button class="addButton">add</button>
+    </div>
+  </div>
+</dialog>
 <dialog id="googleSignUpModal" class="modalWrapper hidden">
   <form class="modal">
     <div class="title">Account name</div>
diff --git a/frontend/src/styles/popups.scss b/frontend/src/styles/popups.scss
index 0b033ce2d..5febdad5a 100644
--- a/frontend/src/styles/popups.scss
+++ b/frontend/src/styles/popups.scss
@@ -445,6 +445,98 @@ body.darkMode {
   }
 }
 
+#customGeneratorModal {
+  .modal {
+    max-width: 600px;
+
+    .top {
+      display: grid;
+      gap: 1rem;
+    }
+
+    .main {
+      display: grid;
+      gap: 1.5rem;
+    }
+
+    .bottom {
+      display: grid;
+      gap: 1rem;
+      margin-top: 1rem;
+    }
+
+    .group {
+      display: grid;
+      gap: 0.5rem;
+
+      .title {
+        color: var(--sub-color);
+      }
+    }
+
+    .lengthgrid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: auto 1fr;
+      column-gap: 1rem;
+    }
+
+    .presetButtons {
+      display: flex;
+      gap: 0.5rem;
+      flex-wrap: wrap;
+
+      button {
+        padding: 0.5rem 1rem;
+        background: var(--sub-alt-color);
+        color: var(--sub-color);
+        border: none;
+        border-radius: var(--roundness);
+        cursor: pointer;
+        transition: all 0.125s;
+
+        &:hover {
+          background: var(--sub-color);
+          color: var(--bg-color);
+        }
+      }
+    }
+
+    .tip {
+      color: var(--sub-color);
+      font-size: 0.8rem;
+    }
+
+    input {
+      width: 100%;
+      padding: 0.5rem;
+      background: var(--sub-alt-color);
+      color: var(--text-color);
+      border: none;
+      border-radius: var(--roundness);
+
+      &::placeholder {
+        color: var(--sub-color);
+      }
+    }
+
+    button.setButton,
+    button.addButton {
+      padding: 0.5rem 1rem;
+      background: var(--main-color);
+      color: var(--bg-color);
+      border: none;
+      border-radius: var(--roundness);
+      cursor: pointer;
+      transition: all 0.125s;
+
+      &:hover {
+        filter: brightness(1.2);
+      }
+    }
+  }
+}
+
 #quoteRateModal {
   .modal {
     max-width: 800px;
diff --git a/frontend/src/ts/modals/custom-generator.ts b/frontend/src/ts/modals/custom-generator.ts
new file mode 100644
index 000000000..83e593fe6
--- /dev/null
+++ b/frontend/src/ts/modals/custom-generator.ts
@@ -0,0 +1,227 @@
+import * as CustomText from "../test/custom-text";
+import * as Notifications from "../elements/notifications";
+import AnimatedModal, {
+  HideOptions,
+  ShowOptions,
+} from "../utils/animated-modal";
+
+type Preset = {
+  display: string;
+  characters: string[];
+};
+
+const presets: Record<string, Preset> = {
+  alphas: {
+    display: "a-z",
+    characters: "abcdefghijklmnopqrstuvwxyz".split(""),
+  },
+  numbers: {
+    display: "0-9",
+    characters: "0123456789".split(""),
+  },
+  special: {
+    display: "symbols",
+    characters: "!@#$%^&*()_+-=[]{}|;:',.<>?/`~".split(""),
+  },
+  bigrams: {
+    display: "bigrams",
+    characters: [
+      "th",
+      "he",
+      "in",
+      "er",
+      "an",
+      "re",
+      "on",
+      "at",
+      "en",
+      "nd",
+      "ed",
+      "es",
+      "or",
+      "te",
+      "st",
+      "ar",
+      "ou",
+      "it",
+      "al",
+      "as",
+      "=>",
+      "::",
+      "//",
+      "/*",
+      "*/",
+      "{}",
+      "[]",
+      "()",
+      "<>",
+      "!=",
+      "==",
+      ">=",
+      "<=",
+      "&&",
+      "||",
+      "++",
+      "--",
+      "+=",
+      "-=",
+      "*=",
+      "/=",
+      "->",
+      ":=",
+      "??",
+      "?.",
+      "!.",
+      "..",
+      ";;",
+      ",,",
+      "|>",
+    ],
+  },
+  trigrams: {
+    display: "trigrams",
+    characters: [
+      "the",
+      "and",
+      "ing",
+      "ion",
+      "tio",
+      "ent",
+      "ati",
+      "for",
+      "her",
+      "ter",
+      "ate",
+      "ver",
+      "all",
+      "con",
+      "res",
+      "are",
+      "rea",
+      "int",
+      "var",
+      "let",
+      "def",
+      "fun",
+      "str",
+      "obj",
+      "arr",
+      "new",
+      "try",
+      "ret",
+      "if(",
+      "(){",
+      "});",
+      "===",
+      "!==",
+      "...",
+      "/**",
+      "**/",
+      "```",
+      "---",
+    ],
+  },
+};
+
+export async function show(showOptions?: ShowOptions): Promise<void> {
+  void modal.show({
+    ...showOptions,
+  });
+}
+
+function hide(hideOptions?: HideOptions<OutgoingData>): void {
+  void modal.hide({
+    ...hideOptions,
+  });
+}
+
+function generateWords(): string[] {
+  const characterInput = $(
+    "#customGeneratorModal .characterInput"
+  ).val() as string;
+  const minLength =
+    parseInt($("#customGeneratorModal .minLengthInput").val() as string) || 2;
+  const maxLength =
+    parseInt($("#customGeneratorModal .maxLengthInput").val() as string) || 5;
+  const wordCount =
+    parseInt($("#customGeneratorModal .wordCountInput").val() as string) || 100;
+
+  if (!characterInput || characterInput.trim() === "") {
+    Notifications.add("Character set cannot be empty", 0);
+    return [];
+  }
+
+  const characters = characterInput.trim().split(/\s+/);
+  const generatedWords: string[] = [];
+
+  for (let i = 0; i < wordCount; i++) {
+    const wordLength =
+      Math.floor(Math.random() * (maxLength - minLength + 1)) + minLength;
+    let word = "";
+
+    for (let j = 0; j < wordLength; j++) {
+      const randomChar =
+        characters[Math.floor(Math.random() * characters.length)];
+      word += randomChar;
+    }
+
+    generatedWords.push(word);
+  }
+
+  return generatedWords;
+}
+
+async function apply(set: boolean): Promise<void> {
+  const generatedWords = generateWords();
+
+  if (generatedWords.length === 0) {
+    return;
+  }
+
+  const customText = generatedWords.join(
+    CustomText.getPipeDelimiter() ? "|" : " "
+  );
+
+  hide({
+    modalChainData: {
+      text: customText,
+      set,
+    },
+  });
+}
+
+async function setup(modalEl: HTMLElement): Promise<void> {
+  for (const button of modalEl.querySelectorAll(".presetButton")) {
+    button.addEventListener("click", (e) => {
+      const presetName = (e.target as HTMLButtonElement).dataset["preset"];
+      if (
+        presetName !== undefined &&
+        presetName !== "" &&
+        presets[presetName]
+      ) {
+        const preset = presets[presetName];
+        $("#customGeneratorModal .characterInput").val(
+          preset.characters.join(" ")
+        );
+      }
+    });
+  }
+
+  modalEl.querySelector(".setButton")?.addEventListener("click", () => {
+    void apply(true);
+  });
+
+  modalEl.querySelector(".addButton")?.addEventListener("click", () => {
+    void apply(false);
+  });
+}
+
+type OutgoingData = {
+  text: string;
+  set: boolean;
+};
+
+const modal = new AnimatedModal<unknown, OutgoingData>({
+  dialogId: "customGeneratorModal",
+  setup,
+});
diff --git a/frontend/src/ts/modals/custom-text.ts b/frontend/src/ts/modals/custom-text.ts
index def82b89f..e14b3c5f1 100644
--- a/frontend/src/ts/modals/custom-text.ts
+++ b/frontend/src/ts/modals/custom-text.ts
@@ -6,6 +6,7 @@ import * as ChallengeController from "../controllers/challenge-controller";
 import Config, * as UpdateConfig from "../config";
 import * as Strings from "../utils/strings";
 import * as WordFilterPopup from "./word-filter";
+import * as CustomGeneratorPopup from "./custom-generator";
 import * as PractiseWords from "../test/practise-words";
 import * as Notifications from "../elements/notifications";
 import * as SavedTextsPopup from "./saved-texts";
@@ -560,6 +561,13 @@ async function setup(modalEl: HTMLElement): Promise<void> {
       modalChain: modal as AnimatedModal,
     });
   });
+  modalEl
+    .querySelector(".button.customGenerator")
+    ?.addEventListener("click", () => {
+      void CustomGeneratorPopup.show({
+        modalChain: modal as AnimatedModal,
+      });
+    });
   modalEl
     .querySelector(".button.showSavedTexts")
     ?.addEventListener("click", () => {