mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2026-01-11 18:04:27 +08:00
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>
This commit is contained in:
Rajyavardhan Singh
parent
b9c4e4616e
commit
d2a2fe04b6
4 changed files with 404 additions and 0 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
227
frontend/src/ts/modals/custom-generator.ts
Normal file
227
frontend/src/ts/modals/custom-generator.ts
Normal file
|
|
@ -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,
|
||||
});
|
||||
|
|
@ -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", () => {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue