Skip to content

Commit 72c7d50

Browse files
MiodecMiodec
committed
Merge branch 'results'
2 parents d554f39 + d02c2e7 commit 72c7d50

4 files changed

Lines changed: 413 additions & 207 deletions

File tree

‎public/css/style.scss‎

Lines changed: 59 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -960,7 +960,7 @@ key {
960960
}
961961
.triplegroup{
962962
display: grid;
963-
grid-template-columns: 1fr 1fr 2fr;
963+
grid-template-columns: 1fr 1fr 1fr;
964964
gap: 1rem;
965965
}
966966
.group{
@@ -971,6 +971,20 @@ key {
971971
font-size: 3rem;
972972
line-height: 3rem;
973973
}
974+
&.chart{
975+
position: relative;
976+
.chartPreloader{
977+
position: absolute;
978+
width: 100%;
979+
background: rgba(0,0,0,0.5);
980+
height: 100%;
981+
display: grid;
982+
align-items: center;
983+
justify-content: center;
984+
font-size: 5rem;
985+
text-shadow: 0 0 3rem black;
986+
}
987+
}
974988
}
975989
table{
976990
border-spacing:0;
@@ -988,6 +1002,50 @@ key {
9881002
}
9891003
}
9901004

1005+
.pageAccount{
1006+
.group.filterButtons{
1007+
gap: 1rem;
1008+
display: grid;
1009+
grid-template-columns: 1fr 1fr;
1010+
.buttonsAndTitle{
1011+
height: fit-content;
1012+
height: -moz-fit-content;
1013+
display: grid;
1014+
gap: .25rem;
1015+
color: var(--sub-color);
1016+
line-height: 1rem;
1017+
font-size: 1rem;
1018+
}
1019+
.buttons{
1020+
display: grid;
1021+
grid-auto-flow: column;
1022+
gap: 1rem;
1023+
.button{
1024+
background: rgba(0,0,0,.1);
1025+
color: var(--sub-color);
1026+
text-align: center;
1027+
padding: .5rem;
1028+
border-radius: var(--roundness);
1029+
cursor: pointer;
1030+
transition: .25s;
1031+
-webkit-user-select: none;
1032+
&.active{
1033+
background: var(--sub-color);
1034+
color: var(--bg-color);
1035+
}
1036+
&:hover{
1037+
color: var(--sub-color);
1038+
background: var(--main-color);
1039+
}
1040+
}
1041+
&.languages{
1042+
grid-template-columns: repeat(4,1fr);
1043+
grid-auto-flow: unset;
1044+
}
1045+
}
1046+
}
1047+
}
1048+
9911049

9921050

9931051
* {

‎public/index.html‎

Lines changed: 81 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -292,38 +292,99 @@ <h1>theme</h1>
292292
<div class="page pageAccount hidden">
293293
<div class="preloader"><i class="fas fa-fw fa-spin fa-circle-notch"></i></div>
294294
<div class="content hidden">
295-
<div class="group">
295+
<div class="group filterButtons">
296+
<div class="buttonsAndTitle" style="grid-column:1/3;">
297+
<div class="title">filters</div>
298+
<div class="buttons globalFilters">
299+
<div class="button" filter="all">all</div>
300+
<div class="button" filter="none">none</div>
301+
</div>
302+
</div>
303+
<div class="buttonsAndTitle">
304+
<div class="title">mode</div>
305+
<div class="buttons modeFilters">
306+
<div class="button" filter="mode_words">words</div>
307+
<div class="button" filter="mode_time">time</div>
308+
<div class="button" filter="mode_custom">custom</div>
309+
</div>
310+
</div>
311+
<div class="buttonsAndTitle">
312+
<div class="title">punctuation</div>
313+
<div class="buttons punctuationFilter">
314+
<div class="button" filter="punc_on">on</div>
315+
<div class="button" filter="punc_off">off</div>
316+
</div>
317+
</div>
318+
<div class="buttonsAndTitle">
319+
<div class="title">words</div>
320+
<div class="buttons wordsFilter">
321+
<div class="button" filter="words_10">10</div>
322+
<div class="button" filter="words_25">25</div>
323+
<div class="button" filter="words_50">50</div>
324+
<div class="button" filter="words_100">100</div>
325+
<div class="button" filter="words_200">200</div>
326+
<div class="button" filter="words_custom">custom</div>
327+
</div>
328+
</div>
329+
<div class="buttonsAndTitle">
330+
<div class="title">time</div>
331+
<div class="buttons timeFilter">
332+
<div class="button" filter="time_15">15</div>
333+
<div class="button" filter="time_30">30</div>
334+
<div class="button" filter="time_60">60</div>
335+
<div class="button" filter="time_120">120</div>
336+
<div class="button" filter="time_custom">custom</div>
337+
</div>
338+
</div>
339+
<div class="buttonsAndTitle" style="grid-column:1/3;">
340+
<div class="title">language</div>
341+
<div class="buttons languages">
342+
343+
</div>
344+
</div>
345+
</div>
346+
<div class="group chart">
347+
<!-- <div class="chartPreloader">
348+
<i class="fas fa-fw fa-spin fa-circle-notch"></i>
349+
</div> -->
296350
<div class="title"></div>
297351
<div class="chart">
298352
<canvas id="resultHistoryChart"></canvas>
299353
</div>
300354
</div>
301-
<div class="triplegroup">
355+
<div class="triplegroup stats">
302356
<div class="group highestWpm">
303357
<div class="title">highest wpm</div>
304-
<div class="val">1</div>
358+
<div class="val">-</div>
305359
<div class="mode"></div>
306360
</div>
307-
<div class="group testsTaken">
308-
<div class="title">tests taken</div>
309-
<div class="val">1</div>
310-
</div>
311-
<div class="group favouriteTest">
312-
<div class="title">favourite test</div>
313-
<div class="val">words 10</div>
314-
</div>
315361
<div class="group averageWpm">
316362
<div class="title">average wpm</div>
317-
<div class="val">1</div>
363+
<div class="val">-</div>
364+
</div>
365+
<div class="group averageWpm10">
366+
<div class="title">average wpm<br>(last 10 tests)</div>
367+
<div class="val">-</div>
318368
</div>
319-
<div class="group testCompletion">
320-
<div class="title">test completion</div>
369+
<div class="group testsStarted">
370+
<div class="title">tests started</div>
371+
<div class="val">-</div>
372+
</div>
373+
<div class="group testsCompleted">
374+
<div class="title">tests completed</div>
321375
<div class="val">-</div>
322376
</div>
323377
<div class="group avgRestart">
324-
<div class="title">avg restarts per completed test</div>
378+
<div class="title">avg restarts<br>per completed test</div>
325379
<div class="val">-</div>
326380
</div>
381+
<!-- <div class="group favouriteTest">
382+
<div class="title">favourite test</div>
383+
<div class="val">words 10</div>
384+
</div> -->
385+
386+
387+
327388
</div>
328389
<div class="group history">
329390
<!-- <div class="title">result history</div> -->
@@ -335,6 +396,8 @@ <h1>theme</h1>
335396
<td>correct<br>chars</td>
336397
<td>incorrect<br>chars</td>
337398
<td>mode</td>
399+
<td>punctuation</td>
400+
<td>language</td>
338401
<td>date</td>
339402
</tr>
340403
</thead>
@@ -384,10 +447,11 @@ <h1>theme</h1>
384447
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline@0.1.3/src/chartjs-plugin-trendline.min.js"></script>
385448
<script src="js/words.js"></script>
386449
<script src="js/db.js"></script>
450+
<script src="js/userconfig.js"></script>
387451
<script src="js/commandline.js"></script>
388452
<script src="js/settings.js"></script>
389-
<script src="js/userconfig.js"></script>
390-
<script src="js/script.js"></script>
391453
<script src="js/account.js"></script>
454+
<script src="js/script.js"></script>
455+
392456

393457
</html>

0 commit comments

Comments
 (0)