Skip to content

Commit

Permalink
refactor: live stats (monkeytypegame#5352)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Miodec
Miodec committed May 8, 2024
1 parent e0dac2f commit 633c308
Show file tree
Hide file tree
Showing 32 changed files with 550 additions and 508 deletions.
6 changes: 3 additions & 3 deletions backend/src/api/schemas/config-schema.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ const CONFIG_SCHEMA = joi.object({
.length(10),
favThemes: joi.array().items(joi.string().max(50).token()),
showKeyTips: joi.boolean(),
showLiveWpm: joi.boolean(),
smoothCaret: joi.string().valid("off", "slow", "medium", "fast"),
quickRestart: joi.string().valid("off", "tab", "esc", "enter"),
punctuation: joi.boolean(),
Expand Down Expand Up @@ -53,6 +52,9 @@ const CONFIG_SCHEMA = joi.object({
confidenceMode: joi.string().valid("off", "on", "max"),
indicateTypos: joi.string().valid("off", "below", "replace"),
timerStyle: joi.string().valid("off", "bar", "text", "mini"),
liveSpeedStyle: joi.string().valid("off", "text", "mini"),
liveAccStyle: joi.string().valid("off", "text", "mini"),
liveBurstStyle: joi.string().valid("off", "text", "mini"),
colorfulMode: joi.boolean(),
randomTheme: joi
.string()
Expand Down Expand Up @@ -130,8 +132,6 @@ const CONFIG_SCHEMA = joi.object({
strictSpace: joi.boolean(),
minAcc: joi.string().valid("off", "custom"),
minAccCustom: joi.number().min(0),
showLiveAcc: joi.boolean(),
showLiveBurst: joi.boolean(),
monkey: joi.boolean(),
repeatQuotes: joi.string().valid("off", "typing"),
oppositeShiftMode: joi.string().valid("off", "on", "keymap"),
Expand Down
91 changes: 47 additions & 44 deletions frontend/src/html/pages/settings.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -750,7 +750,7 @@
<span>live progress style</span>
</div>
<div class="text">
Change the style of the timer/word count during a timed test.
Change the style of the timer/word count during a test.
</div>
<div class="buttons">
<button data-config-value="off">off</button>
Expand All @@ -759,14 +759,55 @@
<button data-config-value="mini">mini</button>
</div>
</div>
<div class="section" data-config-name="liveSpeedStyle">
<div class="groupTitle">
<i class="fas fa-tachometer-alt"></i>
<span>live speed style</span>
</div>
<div class="text">
Change the style of the live speed displayed during the test.
</div>
<div class="buttons">
<button data-config-value="off">off</button>
<button data-config-value="text">text</button>
<button data-config-value="mini">mini</button>
</div>
</div>
<div class="section" data-config-name="liveAccStyle">
<div class="groupTitle">
<i class="fas fa-tachometer-alt"></i>
<span>live accuracy style</span>
</div>
<div class="text">
Change the style of the live accuracy displayed during the test.
</div>
<div class="buttons">
<button data-config-value="off">off</button>
<button data-config-value="text">text</button>
<button data-config-value="mini">mini</button>
</div>
</div>
<div class="section" data-config-name="liveBurstStyle">
<div class="groupTitle">
<i class="fas fa-tachometer-alt"></i>
<span>live burst style</span>
</div>
<div class="text">
Change the style of the live burst speed displayed during the test.
</div>
<div class="buttons">
<button data-config-value="off">off</button>
<button data-config-value="text">text</button>
<button data-config-value="mini">mini</button>
</div>
</div>
<div class="section" data-config-name="timerColor">
<div class="groupTitle">
<i class="fas fa-chart-pie"></i>
<span>live progress color</span>
<span>live stats color</span>
</div>
<div class="text">
Change the color of the timer/word count number/bar and live speed
number.
Change the color of the progress, live speed, accuracy and burst text.
</div>
<div class="buttons">
<button data-config-value="black">black</button>
Expand All @@ -778,11 +819,10 @@
<div class="section" data-config-name="timerOpacity">
<div class="groupTitle">
<i class="fas fa-chart-pie"></i>
<span>live progress opacity</span>
<span>live stats opacity</span>
</div>
<div class="text">
Change the opacity of the timer/word count number/bar and live speed
number.
Change the opacity of the progress, live speed, burst and accuracy text.
</div>
<div class="buttons">
<button data-config-value="0.25">0.25</button>
Expand Down Expand Up @@ -1401,43 +1441,6 @@
hide elements
</button>
<div class="settingsGroup hideElements">
<div class="section" data-config-name="showLiveWpm">
<div class="groupTitle">
<i class="fas fa-tachometer-alt"></i>
<span>live speed</span>
</div>
<div class="text">
Displays a live speed during the test. Updates once every second.
</div>
<div class="buttons">
<button data-config-value="false">hide</button>
<button data-config-value="true">show</button>
</div>
</div>
<div class="section" data-config-name="showLiveAcc">
<div class="groupTitle">
<i class="fas fa-tachometer-alt"></i>
<span>live accuracy</span>
</div>
<div class="text">Displays live accuracy during the test.</div>
<div class="buttons">
<button data-config-value="false">hide</button>
<button data-config-value="true">show</button>
</div>
</div>
<div class="section" data-config-name="showLiveBurst">
<div class="groupTitle">
<i class="fas fa-tachometer-alt"></i>
<span>live burst</span>
</div>
<div class="text">
Displays live burst during the test of the last word you typed.
</div>
<div class="buttons">
<button data-config-value="false">hide</button>
<button data-config-value="true">show</button>
</div>
</div>
<div class="section" data-config-name="showKeyTips">
<div class="groupTitle">
<i class="fas fa-question"></i>
Expand Down
16 changes: 8 additions & 8 deletions frontend/src/html/pages/test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,12 +101,12 @@
<div id="memoryTimer">Time left to memorise all words: 0s</div>
<div id="layoutfluidTimer">Time left to memorise all words: 0s</div>
<div id="testModesNotice"></div>
<div id="timerNumber" class="timerMain">
<div>60</div>
<div id="liveStatsTextTop" class="timerMain">
<div class="timerProgress hidden">1:00</div>
</div>
<div id="miniTimerAndLiveWpm" class="full-width timerMain">
<div id="liveStatsMini" class="full-width timerMain">
<div class="time hidden">1:00</div>
<div class="wpm hidden">60</div>
<div class="speed hidden">60</div>
<div class="acc hidden">100%</div>
<div class="burst hidden">1</div>
</div>
Expand Down Expand Up @@ -149,10 +149,10 @@
>
<i class="fas fa-fw fa-redo-alt"></i>
</button>
<div id="largeLiveWpmAndAcc" class="timerMain">
<div id="liveWpm" class="hidden">123</div>
<div id="liveAcc" class="hidden">100%%</div>
<div id="liveBurst" class="hidden">1</div>
<div id="liveStatsTextBottom" class="timerMain">
<div class="liveSpeed hidden">123</div>
<div class="liveAcc hidden">100%%</div>
<div class="liveBurst hidden">1</div>
</div>
<div id="monkey" class="hidden">
<div class="up"></div>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@
</div>
<div class="history"></div>
</div>
<div id="timerWrapper">
<div id="timer" class="timerMain"></div>
<div id="barTimerProgress" class="timerMain">
<div class="bar" style="opacity: 0"></div>
</div>
<div id="popups">
<load src="html/popups.html" />
Expand Down
71 changes: 27 additions & 44 deletions frontend/src/styles/test.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,13 +65,12 @@
}
}

#timerWrapper {
#barTimerProgress {
opacity: 0;
transition: 0.25s;
z-index: -1;
position: relative;
z-index: 99;
#timer {
.bar {
position: fixed;
top: 0;
left: 0;
Expand All @@ -82,18 +81,17 @@
/* background: red; */
// transition: 1s linear;
z-index: -1;
}
&.timerMain .bar {
background: var(--main-color);
}

&.timerMain {
background: var(--main-color);
}

&.timerSub {
background: var(--sub-color);
}
&.timerSub .bar {
background: var(--sub-color);
}

&.timerText {
background: var(--text-color);
}
&.timerText .bar {
background: var(--text-color);
}
}

Expand All @@ -119,7 +117,7 @@
}
}

#timerNumber {
#liveStatsTextTop {
pointer-events: none;
transition: 0.25s;
height: 0;
Expand All @@ -143,7 +141,7 @@
transition: none;
}

#largeLiveWpmAndAcc {
#liveStatsTextBottom {
font-size: clamp(1rem, 12vw, 10rem);
color: black;
width: 100%;
Expand All @@ -160,44 +158,32 @@
gap: clamp(1rem, 8vw, 5rem);
width: 0;
margin: 0 auto;

#liveWpm {
opacity: 0;
}

#liveAcc {
opacity: 0;
}

#liveBurst {
opacity: 0;
}
}

#largeLiveWpmAndAcc.timerMain,
#timerNumber.timerMain {
#liveStatsTextBottom.timerMain,
#liveStatsTextTop.timerMain {
color: var(--main-color);
}

#timer.timerMain {
#barTimerProgress.timerMain .bar {
background: var(--main-color);
}

#largeLiveWpmAndAcc.timerSub,
#timerNumber.timerSub {
#liveStatsTextBottom.timerSub,
#liveStatsTextTop.timerSub {
color: var(--sub-color);
}

#timer.timerSub {
#barTimerProgress.timerSub .bar {
background: var(--sub-color);
}

#largeLiveWpmAndAcc.timerText,
#timerNumber.timerText {
#liveStatsTextBottom.timerText,
#liveStatsTextTop.timerText {
color: var(--text-color);
}

#timer.timerText {
#barTimerProgress.timerText .bar {
background: var(--text-color);
}
}
Expand Down Expand Up @@ -1149,7 +1135,7 @@
margin-right: 0.5rem;
}
}
#miniTimerAndLiveWpm {
#liveStatsMini {
height: 0;
margin-left: 0.25em;
display: flex;
Expand All @@ -1161,17 +1147,14 @@
line-height: 1em;
}

.time {
margin-right: 2rem;
}

.wpm,
.time,
.speed,
.acc {
margin-right: 2rem;
margin-right: 0.5em;
}

.time,
.wpm,
.speed,
.acc,
.burst {
opacity: 0;
Expand Down
13 changes: 7 additions & 6 deletions frontend/src/ts/commandline/lists.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ import NumbersCommands from "./lists/numbers";
import SmoothCaretCommands from "./lists/smooth-caret";
import QuickRestartCommands from "./lists/quick-restart";
import RepeatQuotesCommands from "./lists/repeat-quotes";
import LiveWpmCommands from "./lists/live-wpm";
import LiveAccCommands from "./lists/live-acc";
import LiveBurstCommands from "./lists/live-burst";
import LiveSpeedStyleCommands from "./lists/live-speed-style";
import LiveAccStyleCommands from "./lists/live-acc-style";
import LiveBurstStyleCommands from "./lists/live-burst-style";
import ShowAverageCommands from "./lists/show-average";
import KeyTipsCommands from "./lists/key-tips";
import FreedomModeCommands from "./lists/freedom-mode";
Expand Down Expand Up @@ -275,6 +275,10 @@ export const commands: MonkeyTypes.CommandsSubgroup = {

//appearence
...TimerStyleCommands,
...LiveSpeedStyleCommands,
...LiveAccStyleCommands,
...LiveBurstStyleCommands,

...TimerColorCommands,
...TimerOpacityCommands,
...HighlightModeCommands,
Expand Down Expand Up @@ -326,9 +330,6 @@ export const commands: MonkeyTypes.CommandsSubgroup = {
},

//showhide elements
...LiveWpmCommands,
...LiveAccCommands,
...LiveBurstCommands,
...KeyTipsCommands,
...OutOfFocusWarningCommands,
...CapsLockWarningCommands,
Expand Down

0 comments on commit 633c308

Please sign in to comment.