Skip to content

Commit 4d936d7

Browse files
MiodecMiodec
authored
refactor: solid test config (@Miodec) (monkeytypegame#7701)
1 parent e7cd1a0 commit 4d936d7

36 files changed

+1152
-1406
lines changed

‎frontend/__tests__/components/ui/form/InputField.spec.tsx‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,6 @@ function makeField(name: string, value = "") {
2323
}
2424

2525
describe("InputField", () => {
26-
it("renders input with field name as id", () => {
27-
const field = makeField("email");
28-
render(() => <InputField field={() => field} />);
29-
30-
const input = screen.getByRole("textbox");
31-
expect(input).toHaveAttribute("id", "email");
32-
expect(input).toHaveAttribute("name", "email");
33-
});
34-
3526
it("uses field name as default placeholder", () => {
3627
const field = makeField("username");
3728
render(() => <InputField field={() => field} />);

‎frontend/src/html/pages/test.html‎

Lines changed: 1 addition & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,108 +1,6 @@
11
<div class="page pageTest full-width content-grid hidden" data-nosnippet>
2-
<div id="testConfig" class="full-width">
3-
<div class="row">
4-
<div class="puncAndNum">
5-
<button class="textButton punctuationMode">
6-
<i class="fas fa-fw fa-at"></i>
7-
punctuation
8-
</button>
9-
<button class="textButton numbersMode">
10-
<i class="fas fa-fw fa-hashtag"></i>
11-
numbers
12-
</button>
13-
</div>
14-
15-
<div class="spacer leftSpacer"></div>
16-
17-
<div class="mode">
18-
<button class="textButton" mode="time">
19-
<i class="fas fa-fw fa-clock"></i>
20-
time
21-
</button>
22-
<button class="textButton" mode="words">
23-
<i class="fas fa-fw fa-font"></i>
24-
words
25-
</button>
26-
<button class="textButton" mode="quote">
27-
<i class="fas fa-fw fa-quote-left"></i>
28-
quote
29-
</button>
30-
<button class="textButton" mode="zen">
31-
<i class="fas fa-fw fa-mountain"></i>
32-
zen
33-
</button>
34-
<button class="textButton" mode="custom">
35-
<i class="fas fa-fw fa-wrench"></i>
36-
custom
37-
</button>
38-
</div>
39-
40-
<div class="spacer rightSpacer"></div>
41-
42-
<div class="time">
43-
<button class="textButton" timeConfig="15"><span>15</span></button>
44-
<button class="textButton" timeConfig="30"><span>30</span></button>
45-
<button class="textButton" timeConfig="60"><span>60</span></button>
46-
<button class="textButton" timeConfig="120"><span>120</span></button>
47-
<button class="textButton" timeConfig="custom">
48-
<i class="fas fa-fw fa-tools"></i>
49-
</button>
50-
</div>
51-
52-
<div class="wordCount">
53-
<button class="textButton" wordCount="10"><span>10</span></button>
54-
<button class="textButton" wordCount="25"><span>25</span></button>
55-
<button class="textButton" wordCount="50"><span>50</span></button>
56-
<button class="textButton" wordCount="100"><span>100</span></button>
57-
<button class="textButton" wordCount="custom">
58-
<i class="fas fa-fw fa-tools"></i>
59-
</button>
60-
</div>
61-
62-
<div class="quoteLength">
63-
<button class="textButton" quotelength="all">all</button>
64-
<button class="textButton" quotelength="0">short</button>
65-
<button class="textButton" quotelength="1">medium</button>
66-
<button class="textButton" quotelength="2">long</button>
67-
<button class="textButton" quotelength="3">thicc</button>
68-
<button class="textButton favorite hidden" quotelength="-3">
69-
<i class="fas fa-heart"></i>
70-
</button>
71-
<button class="textButton" quotelength="-2">
72-
<i class="fas fa-search"></i>
73-
</button>
74-
</div>
75-
76-
<div class="zen">
77-
<div
78-
class="textButton"
79-
style="
80-
width: 0;
81-
padding-left: 0;
82-
padding-right: 0;
83-
margin-left: 0;
84-
margin-right: 0;
85-
"
86-
>
87-
 
88-
</div>
89-
</div>
90-
91-
<div class="customText">
92-
<button class="textButton">change</button>
93-
</div>
94-
</div>
95-
<button class="shareButton textButton">
96-
<i class="fas fa-fw fa-share"></i>
97-
</button>
98-
</div>
2+
<mount data-component="testconfig"></mount>
993

100-
<div id="mobileTestConfigButton">
101-
<button>
102-
<i class="fas fa-fw fa-cog"></i>
103-
Test settings
104-
</button>
105-
</div>
1064
<div id="testInitFailed" class="content-grid hidden">
1075
<div class="message">
1086
<div class="text">

‎frontend/src/html/popups.html‎

Lines changed: 0 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -131,108 +131,6 @@
131131
</div>
132132
</dialog>
133133

134-
<dialog id="shareTestSettingsModal" class="modalWrapper hidden">
135-
<!-- <div id="shareTestSettingsPopup"> -->
136-
<div class="modal">
137-
<div class="title">Share test settings</div>
138-
<label class="checkboxWithSub mode">
139-
<input type="checkbox" setting="mode" />
140-
<div>Mode</div>
141-
<div class="sub">Time, Words, Quote, Zen, Custom</div>
142-
</label>
143-
<label class="checkboxWithSub mode2 subgroup hidden">
144-
<input type="checkbox" setting="mode2" />
145-
<div>Mode2</div>
146-
<div class="sub">Test seconds, Test words, Quote Id</div>
147-
</label>
148-
<label class="checkbox customText subgroup hidden">
149-
<input type="checkbox" setting="customText" />
150-
Custom text
151-
<span></span>
152-
</label>
153-
<label class="checkbox punctuation">
154-
<input type="checkbox" setting="punctuation" />
155-
Punctuation
156-
<span></span>
157-
</label>
158-
<label class="checkbox numbers">
159-
<input type="checkbox" setting="numbers" />
160-
Numbers
161-
<span></span>
162-
</label>
163-
<label class="checkbox language">
164-
<input type="checkbox" setting="language" />
165-
Language
166-
<span></span>
167-
</label>
168-
<label class="checkbox difficulty">
169-
<input type="checkbox" setting="difficulty" />
170-
Difficulty
171-
<span></span>
172-
</label>
173-
<label class="checkbox funbox">
174-
<input type="checkbox" setting="funbox" />
175-
Funbox
176-
<span></span>
177-
</label>
178-
<textarea
179-
class="url"
180-
placeholder="url"
181-
value="monkeytype.com"
182-
readonly
183-
></textarea>
184-
<div class="tooLongWarning hidden">
185-
<i class="fas fa-fw fa-exclamation-triangle"></i>
186-
<span>The URL is over 2000 characters long - it might not work</span>
187-
</div>
188-
<!-- </div> -->
189-
</div>
190-
</dialog>
191-
192-
<dialog id="mobileTestConfigModal" class="modalWrapper hidden">
193-
<div class="modal">
194-
<div class="group">
195-
<button class="punctuation">punctuation</button>
196-
<button class="numbers">numbers</button>
197-
</div>
198-
<div class="group modeGroup">
199-
<button data-mode="time">time</button>
200-
<button class="active" data-mode="words">words</button>
201-
<button data-mode="quote">quote</button>
202-
<button data-mode="zen">zen</button>
203-
<button data-mode="custom">custom</button>
204-
</div>
205-
<div class="group timeGroup">
206-
<button data-time="15">15</button>
207-
<button class="button active" data-time="30">30</button>
208-
<button data-time="60">60</button>
209-
<button data-time="120">120</button>
210-
<button data-time="custom">custom</button>
211-
</div>
212-
<div class="group wordsGroup hidden">
213-
<button data-words="10">10</button>
214-
<button data-words="25">25</button>
215-
<button data-words="50">50</button>
216-
<button data-words="100">100</button>
217-
<button data-words="custom">custom</button>
218-
</div>
219-
<div class="group quoteGroup hidden">
220-
<button data-quoteLength="all">all</button>
221-
<button data-quoteLength="0">short</button>
222-
<button data-quoteLength="1">medium</button>
223-
<button data-quoteLength="2">long</button>
224-
<button data-quoteLength="3">thicc</button>
225-
<button id="quote-search-button" data-quoteLength="-2">search</button>
226-
</div>
227-
<div class="group customGroup hidden">
228-
<button class="customChange">change</button>
229-
</div>
230-
<div class="group">
231-
<button class="shareButton">share</button>
232-
</div>
233-
</div>
234-
</dialog>
235-
236134
<div id="videoAdPopupWrapper" class="popupWrapper hidden">
237135
<div id="videoAdPopup">
238136
<div class="preloader">
@@ -332,48 +230,6 @@
332230
<button>continue</button>
333231
</form>
334232
</dialog>
335-
<dialog id="customWordAmountModal" class="modalWrapper hidden">
336-
<form class="modal">
337-
<div class="title">Custom word amount</div>
338-
<input type="number" value="1" min="0" max="10000" />
339-
<div class="tip">
340-
You can start an infinite test by inputting 0. Then, to stop the test, use
341-
the Bail Out feature (
342-
<kbd>esc</kbd>
343-
or
344-
<kbd>ctrl/cmd</kbd>
345-
+
346-
<kbd>shift</kbd>
347-
+
348-
<kbd>p</kbd>
349-
> Bail Out)
350-
</div>
351-
<button>ok</button>
352-
</form>
353-
</dialog>
354-
<dialog id="customTestDurationModal" class="modalWrapper hidden">
355-
<form class="modal">
356-
<div class="title">Test duration</div>
357-
<div class="preview"></div>
358-
<input value="1" title="test duration" min="0" />
359-
<div class="tip">
360-
You can use "h" for hours and "m" for minutes, for example "1h30m".
361-
<br />
362-
<br />
363-
You can start an infinite test by inputting 0. Then, to stop the test, use
364-
the Bail Out feature (
365-
<kbd>esc</kbd>
366-
or
367-
<kbd>ctrl/cmd</kbd>
368-
+
369-
<kbd>shift</kbd>
370-
+
371-
<kbd>p</kbd>
372-
> Bail Out)
373-
</div>
374-
<button>ok</button>
375-
</form>
376-
</dialog>
377233
<dialog id="userReportModal" class="modalWrapper hidden">
378234
<div class="modal">
379235
<div class="title">Report a user</div>

‎frontend/src/styles/loading.scss‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,3 @@
3838
}
3939
}
4040
}
41-
42-
body.loading {
43-
header nav,
44-
footer,
45-
#testConfig {
46-
pointer-events: none;
47-
user-select: none;
48-
}
49-
}

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,6 @@
44
.content-grid {
55
--content-max-width: 640px;
66
}
7-
#testConfig {
8-
font-size: 0.65rem;
9-
--horizontalPadding: 0.55em;
10-
}
117
#testModesNotice {
128
font-size: 0.8rem;
139
}

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,6 @@
44
.content-grid {
55
--content-max-width: 768px;
66
}
7-
#testConfig {
8-
font-size: 0.7rem;
9-
--horizontalPadding: 0.6em;
10-
}
117
.pageAccountSettings .main {
128
gap: 2rem;
139
.right .tab .section {

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

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,6 @@
3030
#liveStatsTextBottom {
3131
font-size: 12vw;
3232
}
33-
#testConfig {
34-
display: none;
35-
}
36-
#mobileTestConfigButton {
37-
display: block;
38-
}
3933
#result .wrapper {
4034
.stats {
4135
grid-template-columns: 1fr;

‎frontend/src/styles/popups.scss‎

Lines changed: 0 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -153,38 +153,6 @@ body.darkMode {
153153
}
154154
}
155155

156-
#mobileTestConfigModal {
157-
.modal {
158-
gap: 2rem;
159-
160-
.group {
161-
display: grid;
162-
gap: 0.5rem;
163-
}
164-
}
165-
}
166-
167-
#customWordAmountModal {
168-
.modal {
169-
max-width: 500px;
170-
.tip {
171-
font-size: 0.75rem;
172-
color: var(--text-color);
173-
}
174-
}
175-
}
176-
177-
#customTestDurationModal {
178-
.modal {
179-
max-width: 500px;
180-
.tip,
181-
.preview {
182-
font-size: 0.75rem;
183-
color: var(--text-color);
184-
}
185-
}
186-
}
187-
188156
#googleSignUpModal {
189157
.modal {
190158
max-width: 425px;
@@ -272,18 +240,6 @@ body.darkMode {
272240
}
273241
}
274242

275-
#shareTestSettingsModal {
276-
.modal {
277-
max-width: 600px;
278-
.subgroup {
279-
padding-left: 2rem;
280-
}
281-
.tooLongWarning {
282-
font-size: 0.75rem;
283-
color: var(--error-color);
284-
}
285-
}
286-
}
287243
#cookiesModal {
288244
align-items: end;
289245
justify-items: end;

0 commit comments

Comments
 (0)