Skip to content

Commit ffd55c5

Browse files
imrajyavardhan12ampcode-comMiodec
authored
feat: add custom character generator to custom text modal (@imrajyavardhan12) (monkeytypegame#7037)
- 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 monkeytypegame#6941 ### Description Adds a custom character generator to the custom text modal, allowing users to generate random "words" from a custom set of characters or strings. Useful for practicing specific character combinations, especially for programmers who want to improve typing speed with symbols and patterns commonly used in code. ### Testing 1. Open custom text modal 2. Click "custom generator" 3. Try presets or enter custom characters 4. Adjust word length and count 5. Click "Set" or "Add" --------- Co-authored-by: Amp <[email protected]> Co-authored-by: Miodec <[email protected]>
1 parent c0191da commit ffd55c5

File tree

7 files changed

+365
-11
lines changed

7 files changed

+365
-11
lines changed

‎frontend/src/html/popups.html‎

Lines changed: 80 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -486,6 +486,8 @@
486486
<i class="fas fa-folder"></i>
487487
saved texts
488488
</div>
489+
</div>
490+
<div class="buttonsTop2">
489491
<input id="fileInput" type="file" class="hidden" accept=".txt" />
490492
<label for="fileInput" class="button importText">
491493
<i class="fas fa-file-import"></i>
@@ -495,6 +497,10 @@
495497
<i class="fas fa-filter"></i>
496498
words filter
497499
</div>
500+
<div class="button customGenerator">
501+
<i class="fas fa-cogs"></i>
502+
custom generator
503+
</div>
498504
</div>
499505
<div class="savedTexts hidden" style="display: none">
500506
<div class="title">saved texts</div>
@@ -759,7 +765,7 @@
759765
<select class="layoutInput"></select>
760766
</div>
761767
<!-- <div class="tip">Use the dropdowns above to generate presets</div> -->
762-
<button class="generateButton">generate</button>
768+
<button class="generateButton">apply</button>
763769
</div>
764770

765771
<div class="bottom">
@@ -772,6 +778,79 @@
772778
</div>
773779
</div>
774780
</dialog>
781+
<dialog id="customGeneratorModal" class="modalWrapper hidden">
782+
<div class="modal">
783+
<div class="main">
784+
<div class="group">
785+
<div class="title">presets</div>
786+
<select class="presetInput">
787+
<option value="alphas">a-z</option>
788+
<option value="numbers">0-9</option>
789+
<option value="special">symbols</option>
790+
<option value="bigrams">bigrams</option>
791+
<option value="trigrams">trigrams</option>
792+
</select>
793+
<button class="generateButton">apply</button>
794+
</div>
795+
<div class="separator"></div>
796+
<div class="tip">
797+
Enter characters or strings separated by spaces. Random combinations
798+
will be generated using these inputs.
799+
</div>
800+
<div class="group">
801+
<div class="title">character set</div>
802+
<textarea
803+
class="characterInput"
804+
id="characterInput"
805+
autocomplete="off"
806+
placeholder=""
807+
title="characters"
808+
></textarea>
809+
</div>
810+
<div class="group lengthgrid">
811+
<div class="title">min length</div>
812+
<div class="title">max length</div>
813+
814+
<input
815+
class="wordLength minLengthInput"
816+
autocomplete="off"
817+
type="number"
818+
value="2"
819+
min="1"
820+
title="min"
821+
/>
822+
<input
823+
class="wordLength maxLengthInput"
824+
autocomplete="off"
825+
type="number"
826+
value="5"
827+
min="1"
828+
title="max"
829+
/>
830+
</div>
831+
<div class="group">
832+
<div class="title">word count</div>
833+
<input
834+
class="wordCountInput"
835+
autocomplete="off"
836+
type="number"
837+
value="100"
838+
min="1"
839+
title="word count"
840+
/>
841+
</div>
842+
</div>
843+
844+
<div class="bottom">
845+
<div class="tip">
846+
"Set" replaces the current custom text with generated words, "Add"
847+
appends generated words to the current custom text.
848+
</div>
849+
<button class="setButton">set</button>
850+
<button class="addButton">add</button>
851+
</div>
852+
</div>
853+
</dialog>
775854
<dialog id="googleSignUpModal" class="modalWrapper hidden">
776855
<form class="modal">
777856
<div class="title">Account name</div>

‎frontend/src/styles/media-queries-blue.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,13 @@
1515
#testModesNotice {
1616
font-size: 0.8rem;
1717
}
18+
#customTextModal {
19+
.modal {
20+
.buttonsTop2 {
21+
grid-template-columns: 1fr;
22+
}
23+
}
24+
}
1825
#bannerCenter {
1926
font-size: 0.85rem;
2027
.banner.withImage {

‎frontend/src/styles/media-queries-green.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -231,6 +231,7 @@
231231
.modal {
232232
grid-template-areas:
233233
"topButtons topButtons"
234+
"topButtons2 topButtons2"
234235
"textArea textArea"
235236
"checkboxes checkboxes"
236237
"ok ok";

‎frontend/src/styles/media-queries-yellow.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,9 @@
4343
.buttonsTop {
4444
grid-template-columns: 1fr 1fr;
4545
}
46-
textarea {
47-
min-height: 426px;
48-
}
46+
// textarea {
47+
// min-height: 426px;
48+
// }
4949
}
5050
}
5151
.testActivity {

‎frontend/src/styles/popups.scss‎

Lines changed: 82 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -105,16 +105,21 @@ body.darkMode {
105105
// "textArea textArea checkboxes"
106106
// "ok ok ok";
107107
grid-template-areas:
108-
"topButtons topButtons checkboxes"
109-
"textArea textArea checkboxes"
110-
"ok ok checkboxes";
111-
grid-template-columns: 1fr 1fr 1fr;
112-
grid-template-rows: min-content 1fr min-content;
108+
"topButtons checkboxes"
109+
"topButtons2 checkboxes"
110+
"textArea checkboxes"
111+
"ok checkboxes";
112+
grid-template-columns: auto 20rem;
113+
grid-template-rows: min-content min-content 1fr min-content;
113114

114115
.buttonsTop {
115116
grid-area: topButtons;
116117
}
117118

119+
.buttonsTop2 {
120+
grid-area: topButtons2;
121+
}
122+
118123
.textAreaWrapper {
119124
grid-area: textArea;
120125
}
@@ -170,7 +175,13 @@ body.darkMode {
170175
.buttonsTop {
171176
display: grid;
172177
// grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
173-
grid-template-columns: 1fr 1fr 1fr 1fr;
178+
grid-template-columns: 1fr 1fr;
179+
gap: 1rem;
180+
}
181+
182+
.buttonsTop2 {
183+
display: grid;
184+
grid-template-columns: 1fr 1fr 1fr;
174185
gap: 1rem;
175186
}
176187

@@ -199,7 +210,7 @@ body.darkMode {
199210
width: 100%;
200211
border-radius: var(--roundness);
201212
resize: vertical;
202-
min-height: 589px;
213+
min-height: 524px;
203214
color: var(--text-color);
204215
overflow-x: hidden;
205216
overflow-y: scroll;
@@ -445,6 +456,70 @@ body.darkMode {
445456
}
446457
}
447458

459+
#customGeneratorModal {
460+
.modal {
461+
max-width: 600px;
462+
463+
.main {
464+
display: grid;
465+
gap: 1.5rem;
466+
}
467+
468+
.bottom {
469+
display: grid;
470+
gap: 1rem;
471+
margin-top: 1rem;
472+
}
473+
474+
.separator {
475+
height: 0.25rem;
476+
width: 100%;
477+
background-color: var(--sub-alt-color);
478+
border-radius: var(--roundness);
479+
}
480+
481+
.group {
482+
display: grid;
483+
gap: 0.5rem;
484+
485+
.title {
486+
color: var(--sub-color);
487+
}
488+
}
489+
490+
.lengthgrid {
491+
display: grid;
492+
grid-template-columns: 1fr 1fr;
493+
grid-template-rows: auto 1fr;
494+
column-gap: 1rem;
495+
}
496+
497+
.tip {
498+
color: var(--sub-color);
499+
font-size: 0.8rem;
500+
}
501+
502+
input,
503+
textarea {
504+
width: 100%;
505+
padding: 0.5rem;
506+
background: var(--sub-alt-color);
507+
color: var(--text-color);
508+
border: none;
509+
border-radius: var(--roundness);
510+
511+
&::placeholder {
512+
color: var(--sub-color);
513+
}
514+
}
515+
516+
textarea {
517+
min-height: 100px;
518+
resize: vertical;
519+
}
520+
}
521+
}
522+
448523
#quoteRateModal {
449524
.modal {
450525
max-width: 800px;

0 commit comments

Comments
 (0)