mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2024-09-20 07:16:17 +08:00
refactor: live stats (#5352)
This commit is contained in:
Jack
GitHub
parent
38faa62913
commit
79f77b80eb
|
|
@ -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(),
|
||||
|
|
@ -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()
|
||||
|
|
@ -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"),
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -82,18 +81,17 @@
|
|||
/* background: red; */
|
||||
// transition: 1s linear;
|
||||
z-index: -1;
|
||||
}
|
||||
&.timerMain .bar {
|
||||
background: var(--main-color);
|
||||
}
|
||||
|
||||
&.timerMain {
|
||||
background: var(--main-color);
|
||||
}
|
||||
&.timerSub .bar {
|
||||
background: var(--sub-color);
|
||||
}
|
||||
|
||||
&.timerSub {
|
||||
background: var(--sub-color);
|
||||
}
|
||||
|
||||
&.timerText {
|
||||
background: var(--text-color);
|
||||
}
|
||||
&.timerText .bar {
|
||||
background: var(--text-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -119,7 +117,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
#timerNumber {
|
||||
#liveStatsTextTop {
|
||||
pointer-events: none;
|
||||
transition: 0.25s;
|
||||
height: 0;
|
||||
|
|
@ -143,7 +141,7 @@
|
|||
transition: none;
|
||||
}
|
||||
|
||||
#largeLiveWpmAndAcc {
|
||||
#liveStatsTextBottom {
|
||||
font-size: clamp(1rem, 12vw, 10rem);
|
||||
color: black;
|
||||
width: 100%;
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -1149,7 +1135,7 @@
|
|||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
#miniTimerAndLiveWpm {
|
||||
#liveStatsMini {
|
||||
height: 0;
|
||||
margin-left: 0.25em;
|
||||
display: flex;
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
@ -275,6 +275,10 @@ export const commands: MonkeyTypes.CommandsSubgroup = {
|
|||
|
||||
//appearence
|
||||
...TimerStyleCommands,
|
||||
...LiveSpeedStyleCommands,
|
||||
...LiveAccStyleCommands,
|
||||
...LiveBurstStyleCommands,
|
||||
|
||||
...TimerColorCommands,
|
||||
...TimerOpacityCommands,
|
||||
...HighlightModeCommands,
|
||||
|
|
@ -326,9 +330,6 @@ export const commands: MonkeyTypes.CommandsSubgroup = {
|
|||
},
|
||||
|
||||
//showhide elements
|
||||
...LiveWpmCommands,
|
||||
...LiveAccCommands,
|
||||
...LiveBurstCommands,
|
||||
...KeyTipsCommands,
|
||||
...OutOfFocusWarningCommands,
|
||||
...CapsLockWarningCommands,
|
||||
|
|
|
|||
44
frontend/src/ts/commandline/lists/live-acc-style.ts
Normal file
44
frontend/src/ts/commandline/lists/live-acc-style.ts
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import * as UpdateConfig from "../../config";
|
||||
|
||||
const subgroup: MonkeyTypes.CommandsSubgroup = {
|
||||
title: "Live acc style...",
|
||||
configKey: "liveAccStyle",
|
||||
list: [
|
||||
{
|
||||
id: "setLiveAccStyleOff",
|
||||
display: "off",
|
||||
configValue: "off",
|
||||
exec: (): void => {
|
||||
UpdateConfig.setLiveAccStyle("off");
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "setLiveAccStyleMini",
|
||||
display: "mini",
|
||||
configValue: "mini",
|
||||
exec: (): void => {
|
||||
UpdateConfig.setLiveAccStyle("mini");
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "setLiveAccStyleText",
|
||||
display: "text",
|
||||
configValue: "text",
|
||||
exec: (): void => {
|
||||
UpdateConfig.setLiveAccStyle("text");
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const commands: MonkeyTypes.Command[] = [
|
||||
{
|
||||
id: "changeLiveAccStyle",
|
||||
display: "Live acc style...",
|
||||
icon: "fa-tachometer-alt",
|
||||
alias: "wpm",
|
||||
subgroup,
|
||||
},
|
||||
];
|
||||
|
||||
export default commands;
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
import * as UpdateConfig from "../../config";
|
||||
|
||||
const subgroup: MonkeyTypes.CommandsSubgroup = {
|
||||
title: "Live accuracy...",
|
||||
configKey: "showLiveAcc",
|
||||
list: [
|
||||
{
|
||||
id: "setLiveAccOff",
|
||||
display: "off",
|
||||
configValue: false,
|
||||
exec: (): void => {
|
||||
UpdateConfig.setShowLiveAcc(false);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "setLiveAccOn",
|
||||
display: "on",
|
||||
configValue: true,
|
||||
exec: (): void => {
|
||||
UpdateConfig.setShowLiveAcc(true);
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const commands: MonkeyTypes.Command[] = [
|
||||
{
|
||||
id: "changeLiveAcc",
|
||||
display: "Live accuracy...",
|
||||
icon: "fa-percentage",
|
||||
subgroup,
|
||||
},
|
||||
];
|
||||
|
||||
export default commands;
|
||||
44
frontend/src/ts/commandline/lists/live-burst-style.ts
Normal file
44
frontend/src/ts/commandline/lists/live-burst-style.ts
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import * as UpdateConfig from "../../config";
|
||||
|
||||
const subgroup: MonkeyTypes.CommandsSubgroup = {
|
||||
title: "Live burst style...",
|
||||
configKey: "liveBurstStyle",
|
||||
list: [
|
||||
{
|
||||
id: "setLiveBurstStyleOff",
|
||||
display: "off",
|
||||
configValue: "off",
|
||||
exec: (): void => {
|
||||
UpdateConfig.setLiveBurstStyle("off");
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "setLiveBurstStyleMini",
|
||||
display: "mini",
|
||||
configValue: "mini",
|
||||
exec: (): void => {
|
||||
UpdateConfig.setLiveBurstStyle("mini");
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "setLiveBurstStyleText",
|
||||
display: "text",
|
||||
configValue: "text",
|
||||
exec: (): void => {
|
||||
UpdateConfig.setLiveBurstStyle("text");
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const commands: MonkeyTypes.Command[] = [
|
||||
{
|
||||
id: "changeLiveBurstStyle",
|
||||
display: "Live burst style...",
|
||||
icon: "fa-tachometer-alt",
|
||||
alias: "wpm",
|
||||
subgroup,
|
||||
},
|
||||
];
|
||||
|
||||
export default commands;
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
import * as UpdateConfig from "../../config";
|
||||
|
||||
const subgroup: MonkeyTypes.CommandsSubgroup = {
|
||||
title: "Live burst...",
|
||||
configKey: "showLiveBurst",
|
||||
list: [
|
||||
{
|
||||
id: "setLiveBurstOff",
|
||||
display: "off",
|
||||
configValue: false,
|
||||
exec: (): void => {
|
||||
UpdateConfig.setShowLiveBurst(false);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "setLiveBurstOn",
|
||||
display: "on",
|
||||
configValue: true,
|
||||
exec: (): void => {
|
||||
UpdateConfig.setShowLiveBurst(true);
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const commands: MonkeyTypes.Command[] = [
|
||||
{
|
||||
id: "changeLiveBurst",
|
||||
display: "Live burst...",
|
||||
icon: "fa-fire-alt",
|
||||
subgroup,
|
||||
},
|
||||
];
|
||||
|
||||
export default commands;
|
||||
44
frontend/src/ts/commandline/lists/live-speed-style.ts
Normal file
44
frontend/src/ts/commandline/lists/live-speed-style.ts
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import * as UpdateConfig from "../../config";
|
||||
|
||||
const subgroup: MonkeyTypes.CommandsSubgroup = {
|
||||
title: "Live speed style...",
|
||||
configKey: "liveSpeedStyle",
|
||||
list: [
|
||||
{
|
||||
id: "setLiveSpeedStyleOff",
|
||||
display: "off",
|
||||
configValue: "off",
|
||||
exec: (): void => {
|
||||
UpdateConfig.setLiveSpeedStyle("off");
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "setLiveSpeedStyleMini",
|
||||
display: "mini",
|
||||
configValue: "mini",
|
||||
exec: (): void => {
|
||||
UpdateConfig.setLiveSpeedStyle("mini");
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "setLiveSpeedStyleText",
|
||||
display: "text",
|
||||
configValue: "text",
|
||||
exec: (): void => {
|
||||
UpdateConfig.setLiveSpeedStyle("text");
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const commands: MonkeyTypes.Command[] = [
|
||||
{
|
||||
id: "changeLiveSpeedStyle",
|
||||
display: "Live speed style...",
|
||||
icon: "fa-tachometer-alt",
|
||||
alias: "wpm",
|
||||
subgroup,
|
||||
},
|
||||
];
|
||||
|
||||
export default commands;
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
import * as UpdateConfig from "../../config";
|
||||
|
||||
const subgroup: MonkeyTypes.CommandsSubgroup = {
|
||||
title: "Live speed...",
|
||||
configKey: "showLiveWpm",
|
||||
list: [
|
||||
{
|
||||
id: "setLiveWpmOff",
|
||||
display: "off",
|
||||
configValue: false,
|
||||
alias: "live wpm",
|
||||
exec: (): void => {
|
||||
UpdateConfig.setShowLiveWpm(false);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "setLiveWpmOn",
|
||||
display: "on",
|
||||
configValue: true,
|
||||
alias: "live wpm",
|
||||
exec: (): void => {
|
||||
UpdateConfig.setShowLiveWpm(true);
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const commands: MonkeyTypes.Command[] = [
|
||||
{
|
||||
id: "changeLiveWpm",
|
||||
display: "Live speed...",
|
||||
icon: "fa-tachometer-alt",
|
||||
subgroup,
|
||||
},
|
||||
];
|
||||
|
||||
export default commands;
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import * as UpdateConfig from "../../config";
|
||||
|
||||
const subgroup: MonkeyTypes.CommandsSubgroup = {
|
||||
title: "Live progress color...",
|
||||
title: "Live stats color...",
|
||||
configKey: "timerColor",
|
||||
list: [
|
||||
{
|
||||
|
|
@ -46,8 +46,9 @@ const subgroup: MonkeyTypes.CommandsSubgroup = {
|
|||
const commands: MonkeyTypes.Command[] = [
|
||||
{
|
||||
id: "changeTimerColor",
|
||||
display: "Live progress color...",
|
||||
display: "Live stats color...",
|
||||
icon: "fa-chart-pie",
|
||||
alias: "timer speed wpm burst acc",
|
||||
subgroup,
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import * as UpdateConfig from "../../config";
|
||||
|
||||
const subgroup: MonkeyTypes.CommandsSubgroup = {
|
||||
title: "Live progress opacity...",
|
||||
title: "Live stats opacity...",
|
||||
configKey: "timerOpacity",
|
||||
list: [
|
||||
{
|
||||
|
|
@ -46,8 +46,9 @@ const subgroup: MonkeyTypes.CommandsSubgroup = {
|
|||
const commands: MonkeyTypes.Command[] = [
|
||||
{
|
||||
id: "changeTimerOpacity",
|
||||
display: "Live progress opacity...",
|
||||
display: "Live stats opacity...",
|
||||
icon: "fa-chart-pie",
|
||||
alias: "timer speed wpm burst acc",
|
||||
subgroup,
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -822,36 +822,6 @@ export function setPaceCaretStyle(
|
|||
return true;
|
||||
}
|
||||
|
||||
export function setShowLiveWpm(live: boolean, nosave?: boolean): boolean {
|
||||
if (!isConfigValueValid("show live speed", live, ["boolean"])) return false;
|
||||
|
||||
config.showLiveWpm = live;
|
||||
saveToLocalStorage("showLiveWpm", nosave);
|
||||
ConfigEvent.dispatch("showLiveWpm", config.showLiveWpm);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
export function setShowLiveAcc(live: boolean, nosave?: boolean): boolean {
|
||||
if (!isConfigValueValid("show live acc", live, ["boolean"])) return false;
|
||||
|
||||
config.showLiveAcc = live;
|
||||
saveToLocalStorage("showLiveAcc", nosave);
|
||||
ConfigEvent.dispatch("showLiveAcc", config.showLiveAcc);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
export function setShowLiveBurst(live: boolean, nosave?: boolean): boolean {
|
||||
if (!isConfigValueValid("show live burst", live, ["boolean"])) return false;
|
||||
|
||||
config.showLiveBurst = live;
|
||||
saveToLocalStorage("showLiveBurst", nosave);
|
||||
ConfigEvent.dispatch("showLiveBurst", config.showLiveBurst);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
export function setShowAverage(
|
||||
value: SharedTypes.Config.ShowAverage,
|
||||
nosave?: boolean
|
||||
|
|
@ -947,6 +917,55 @@ export function setTimerStyle(
|
|||
return true;
|
||||
}
|
||||
|
||||
export function setLiveSpeedStyle(
|
||||
style: SharedTypes.Config.LiveSpeedAccBurstStyle,
|
||||
nosave?: boolean
|
||||
): boolean {
|
||||
if (
|
||||
!isConfigValueValid("live speed style", style, [["off", "text", "mini"]])
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
config.liveSpeedStyle = style;
|
||||
saveToLocalStorage("liveSpeedStyle", nosave);
|
||||
ConfigEvent.dispatch("liveSpeedStyle", config.timerStyle);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
export function setLiveAccStyle(
|
||||
style: SharedTypes.Config.LiveSpeedAccBurstStyle,
|
||||
nosave?: boolean
|
||||
): boolean {
|
||||
if (!isConfigValueValid("live acc style", style, [["off", "text", "mini"]])) {
|
||||
return false;
|
||||
}
|
||||
|
||||
config.liveAccStyle = style;
|
||||
saveToLocalStorage("liveAccStyle", nosave);
|
||||
ConfigEvent.dispatch("liveAccStyle", config.timerStyle);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
export function setLiveBurstStyle(
|
||||
style: SharedTypes.Config.LiveSpeedAccBurstStyle,
|
||||
nosave?: boolean
|
||||
): boolean {
|
||||
if (
|
||||
!isConfigValueValid("live burst style", style, [["off", "text", "mini"]])
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
config.liveBurstStyle = style;
|
||||
saveToLocalStorage("liveBurstStyle", nosave);
|
||||
ConfigEvent.dispatch("liveBurstStyle", config.timerStyle);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
export function setTimerColor(
|
||||
color: SharedTypes.Config.TimerColor,
|
||||
nosave?: boolean
|
||||
|
|
@ -961,39 +980,6 @@ export function setTimerColor(
|
|||
|
||||
config.timerColor = color;
|
||||
|
||||
$("#timer").removeClass("timerSub");
|
||||
$("#timer").removeClass("timerText");
|
||||
$("#timer").removeClass("timerMain");
|
||||
|
||||
$("#timerNumber").removeClass("timerSub");
|
||||
$("#timerNumber").removeClass("timerText");
|
||||
$("#timerNumber").removeClass("timerMain");
|
||||
|
||||
$("#largeLiveWpmAndAcc").removeClass("timerSub");
|
||||
$("#largeLiveWpmAndAcc").removeClass("timerText");
|
||||
$("#largeLiveWpmAndAcc").removeClass("timerMain");
|
||||
|
||||
$("#miniTimerAndLiveWpm").removeClass("timerSub");
|
||||
$("#miniTimerAndLiveWpm").removeClass("timerText");
|
||||
$("#miniTimerAndLiveWpm").removeClass("timerMain");
|
||||
|
||||
if (color === "main") {
|
||||
$("#timer").addClass("timerMain");
|
||||
$("#timerNumber").addClass("timerMain");
|
||||
$("#largeLiveWpmAndAcc").addClass("timerMain");
|
||||
$("#miniTimerAndLiveWpm").addClass("timerMain");
|
||||
} else if (color === "sub") {
|
||||
$("#timer").addClass("timerSub");
|
||||
$("#timerNumber").addClass("timerSub");
|
||||
$("#largeLiveWpmAndAcc").addClass("timerSub");
|
||||
$("#miniTimerAndLiveWpm").addClass("timerSub");
|
||||
} else if (color === "text") {
|
||||
$("#timer").addClass("timerText");
|
||||
$("#timerNumber").addClass("timerText");
|
||||
$("#largeLiveWpmAndAcc").addClass("timerText");
|
||||
$("#miniTimerAndLiveWpm").addClass("timerText");
|
||||
}
|
||||
|
||||
saveToLocalStorage("timerColor", nosave);
|
||||
ConfigEvent.dispatch("timerColor", config.timerColor);
|
||||
|
||||
|
|
@ -1647,7 +1633,7 @@ export function setFontSize(fontSize: number, nosave?: boolean): boolean {
|
|||
|
||||
config.fontSize = fontSize;
|
||||
|
||||
$("#caret, #paceCaret, #miniTimerAndLiveWpm, #typingTest").css(
|
||||
$("#caret, #paceCaret, #liveStatsMini, #typingTest").css(
|
||||
"fontSize",
|
||||
fontSize + "rem"
|
||||
);
|
||||
|
|
@ -1852,6 +1838,9 @@ export async function apply(
|
|||
setConfidenceMode(configObj.confidenceMode, true);
|
||||
setIndicateTypos(configObj.indicateTypos, true);
|
||||
setTimerStyle(configObj.timerStyle, true);
|
||||
setLiveSpeedStyle(configObj.liveSpeedStyle, true);
|
||||
setLiveAccStyle(configObj.liveAccStyle, true);
|
||||
setLiveBurstStyle(configObj.liveBurstStyle, true);
|
||||
setTimerColor(configObj.timerColor, true);
|
||||
setTimerOpacity(configObj.timerOpacity, true);
|
||||
setKeymapMode(configObj.keymapMode, true);
|
||||
|
|
@ -1862,9 +1851,6 @@ export async function apply(
|
|||
setFontFamily(configObj.fontFamily, true);
|
||||
setSmoothCaret(configObj.smoothCaret, true);
|
||||
setSmoothLineScroll(configObj.smoothLineScroll, true);
|
||||
setShowLiveWpm(configObj.showLiveWpm, true);
|
||||
setShowLiveAcc(configObj.showLiveAcc, true);
|
||||
setShowLiveBurst(configObj.showLiveBurst, true);
|
||||
setAlwaysShowDecimalPlaces(configObj.alwaysShowDecimalPlaces, true);
|
||||
setAlwaysShowWordsHistory(configObj.alwaysShowWordsHistory, true);
|
||||
setSingleListCommandLine(configObj.singleListCommandLine, true);
|
||||
|
|
@ -1984,6 +1970,33 @@ function replaceLegacyValues(
|
|||
configObj.timerStyle = "off";
|
||||
}
|
||||
|
||||
//@ts-expect-error
|
||||
if (configObj.showLiveWpm === true) {
|
||||
let val: SharedTypes.Config.LiveSpeedAccBurstStyle = "mini";
|
||||
if (configObj.timerStyle !== "bar" && configObj.timerStyle !== "off") {
|
||||
val = configObj.timerStyle;
|
||||
}
|
||||
configObj.liveSpeedStyle = val;
|
||||
}
|
||||
|
||||
//@ts-expect-error
|
||||
if (configObj.showLiveBurst === true) {
|
||||
let val: SharedTypes.Config.LiveSpeedAccBurstStyle = "mini";
|
||||
if (configObj.timerStyle !== "bar" && configObj.timerStyle !== "off") {
|
||||
val = configObj.timerStyle;
|
||||
}
|
||||
configObj.liveBurstStyle = val;
|
||||
}
|
||||
|
||||
//@ts-expect-error
|
||||
if (configObj.showLiveAcc === true) {
|
||||
let val: SharedTypes.Config.LiveSpeedAccBurstStyle = "mini";
|
||||
if (configObj.timerStyle !== "bar" && configObj.timerStyle !== "off") {
|
||||
val = configObj.timerStyle;
|
||||
}
|
||||
configObj.liveAccStyle = val;
|
||||
}
|
||||
|
||||
return configObj;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@ export default {
|
|||
],
|
||||
favThemes: [],
|
||||
showKeyTips: true,
|
||||
showLiveWpm: false,
|
||||
smoothCaret: "medium",
|
||||
quickRestart: "off",
|
||||
punctuation: false,
|
||||
|
|
@ -41,6 +40,9 @@ export default {
|
|||
confidenceMode: "off",
|
||||
indicateTypos: "off",
|
||||
timerStyle: "mini",
|
||||
liveSpeedStyle: "off",
|
||||
liveAccStyle: "off",
|
||||
liveBurstStyle: "off",
|
||||
colorfulMode: false,
|
||||
randomTheme: "off",
|
||||
timerColor: "main",
|
||||
|
|
@ -76,8 +78,6 @@ export default {
|
|||
strictSpace: false,
|
||||
minAcc: "off",
|
||||
minAccCustom: 90,
|
||||
showLiveAcc: false,
|
||||
showLiveBurst: false,
|
||||
monkey: false,
|
||||
repeatQuotes: "off",
|
||||
oppositeShiftMode: "off",
|
||||
|
|
|
|||
|
|
@ -47,24 +47,6 @@ async function initGroups(): Promise<void> {
|
|||
UpdateConfig.setQuickRestartMode,
|
||||
"button"
|
||||
) as SettingsGroup<SharedTypes.ConfigValue>;
|
||||
groups["showLiveWpm"] = new SettingsGroup(
|
||||
"showLiveWpm",
|
||||
UpdateConfig.setShowLiveWpm,
|
||||
"button",
|
||||
() => {
|
||||
groups["keymapMode"]?.updateUI();
|
||||
}
|
||||
) as SettingsGroup<SharedTypes.ConfigValue>;
|
||||
groups["showLiveAcc"] = new SettingsGroup(
|
||||
"showLiveAcc",
|
||||
UpdateConfig.setShowLiveAcc,
|
||||
"button"
|
||||
) as SettingsGroup<SharedTypes.ConfigValue>;
|
||||
groups["showLiveBurst"] = new SettingsGroup(
|
||||
"showLiveBurst",
|
||||
UpdateConfig.setShowLiveBurst,
|
||||
"button"
|
||||
) as SettingsGroup<SharedTypes.ConfigValue>;
|
||||
groups["showAverage"] = new SettingsGroup(
|
||||
"showAverage",
|
||||
UpdateConfig.setShowAverage,
|
||||
|
|
@ -351,6 +333,21 @@ async function initGroups(): Promise<void> {
|
|||
UpdateConfig.setTimerStyle,
|
||||
"button"
|
||||
) as SettingsGroup<SharedTypes.ConfigValue>;
|
||||
groups["liveSpeedStyle"] = new SettingsGroup(
|
||||
"liveSpeedStyle",
|
||||
UpdateConfig.setLiveSpeedStyle,
|
||||
"button"
|
||||
) as SettingsGroup<SharedTypes.ConfigValue>;
|
||||
groups["liveAccStyle"] = new SettingsGroup(
|
||||
"liveAccStyle",
|
||||
UpdateConfig.setLiveAccStyle,
|
||||
"button"
|
||||
) as SettingsGroup<SharedTypes.ConfigValue>;
|
||||
groups["liveBurstStyle"] = new SettingsGroup(
|
||||
"liveBurstStyle",
|
||||
UpdateConfig.setLiveBurstStyle,
|
||||
"button"
|
||||
) as SettingsGroup<SharedTypes.ConfigValue>;
|
||||
groups["highlightMode"] = new SettingsGroup(
|
||||
"highlightMode",
|
||||
UpdateConfig.setHighlightMode,
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import * as Caret from "./caret";
|
||||
import * as ActivePage from "../states/active-page";
|
||||
import * as LiveWpm from "./live-wpm";
|
||||
import * as LiveSpeed from "./live-speed";
|
||||
import * as LiveBurst from "./live-burst";
|
||||
import * as LiveAcc from "./live-acc";
|
||||
import * as TimerProgress from "./timer-progress";
|
||||
|
||||
const unfocusPx = 3;
|
||||
let state = false;
|
||||
|
|
@ -22,9 +23,10 @@ export function set(foc: boolean, withCursor = false): void {
|
|||
$("#ad-vertical-left-wrapper").addClass("focus");
|
||||
$("#ad-footer-wrapper").addClass("focus");
|
||||
$("#ad-footer-small-wrapper").addClass("focus");
|
||||
LiveWpm.show();
|
||||
LiveSpeed.show();
|
||||
LiveBurst.show();
|
||||
LiveAcc.show();
|
||||
TimerProgress.show();
|
||||
} else if (!foc && state) {
|
||||
state = false;
|
||||
Caret.startAnimation();
|
||||
|
|
@ -40,9 +42,10 @@ export function set(foc: boolean, withCursor = false): void {
|
|||
$("#ad-vertical-left-wrapper").removeClass("focus");
|
||||
$("#ad-footer-wrapper").removeClass("focus");
|
||||
$("#ad-footer-small-wrapper").removeClass("focus");
|
||||
LiveWpm.hide();
|
||||
LiveSpeed.hide();
|
||||
LiveBurst.hide();
|
||||
LiveAcc.hide();
|
||||
TimerProgress.hide();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,53 +2,52 @@ import Config from "../config";
|
|||
import * as TestState from "../test/test-state";
|
||||
import * as ConfigEvent from "../observables/config-event";
|
||||
|
||||
const textEl = document.querySelector(
|
||||
"#liveStatsTextBottom .liveAcc"
|
||||
) as Element;
|
||||
const miniEl = document.querySelector("#liveStatsMini .acc") as Element;
|
||||
|
||||
export function update(acc: number): void {
|
||||
let number = Math.floor(acc);
|
||||
if (Config.blindMode) {
|
||||
number = 100;
|
||||
}
|
||||
(document.querySelector("#miniTimerAndLiveWpm .acc") as Element).innerHTML =
|
||||
number + "%";
|
||||
(document.querySelector("#liveAcc") as Element).innerHTML = number + "%";
|
||||
miniEl.innerHTML = number + "%";
|
||||
textEl.innerHTML = number + "%";
|
||||
}
|
||||
|
||||
export function reset(): void {
|
||||
miniEl.innerHTML = "100%";
|
||||
textEl.innerHTML = "100%";
|
||||
}
|
||||
|
||||
let state = false;
|
||||
|
||||
export function show(): void {
|
||||
if (!Config.showLiveAcc) return;
|
||||
if (Config.liveAccStyle === "off") return;
|
||||
if (!TestState.isActive) return;
|
||||
if (state) return;
|
||||
if (Config.timerStyle === "mini" || Config.timerStyle === "bar") {
|
||||
$("#miniTimerAndLiveWpm .acc")
|
||||
.stop(true, false)
|
||||
.removeClass("hidden")
|
||||
.css("opacity", 0)
|
||||
.animate(
|
||||
{
|
||||
opacity: Config.timerOpacity,
|
||||
},
|
||||
125
|
||||
);
|
||||
if (Config.liveAccStyle === "mini") {
|
||||
$(miniEl).stop(true, false).removeClass("hidden").css("opacity", 0).animate(
|
||||
{
|
||||
opacity: 1,
|
||||
},
|
||||
125
|
||||
);
|
||||
} else {
|
||||
$("#liveAcc")
|
||||
.stop(true, false)
|
||||
.removeClass("hidden")
|
||||
.css("opacity", 0)
|
||||
.animate(
|
||||
{
|
||||
opacity: Config.timerOpacity,
|
||||
},
|
||||
125
|
||||
);
|
||||
$(textEl).stop(true, false).removeClass("hidden").css("opacity", 0).animate(
|
||||
{
|
||||
opacity: 1,
|
||||
},
|
||||
125
|
||||
);
|
||||
}
|
||||
state = true;
|
||||
}
|
||||
|
||||
export function hide(): void {
|
||||
// $("#liveWpm").css("opacity", 0);
|
||||
// $("#miniTimerAndLiveWpm .wpm").css("opacity", 0);
|
||||
if (!state) return;
|
||||
$("#liveAcc")
|
||||
$(textEl)
|
||||
.stop(true, false)
|
||||
.animate(
|
||||
{
|
||||
|
|
@ -56,10 +55,10 @@ export function hide(): void {
|
|||
},
|
||||
125,
|
||||
() => {
|
||||
$("#liveAcc").addClass("hidden");
|
||||
$(textEl).addClass("hidden");
|
||||
}
|
||||
);
|
||||
$("#miniTimerAndLiveWpm .acc")
|
||||
$(miniEl)
|
||||
.stop(true, false)
|
||||
.animate(
|
||||
{
|
||||
|
|
@ -67,12 +66,12 @@ export function hide(): void {
|
|||
},
|
||||
125,
|
||||
() => {
|
||||
$("#miniTimerAndLiveWpm .acc").addClass("hidden");
|
||||
$(miniEl).addClass("hidden");
|
||||
}
|
||||
);
|
||||
state = false;
|
||||
}
|
||||
|
||||
ConfigEvent.subscribe((eventKey, eventValue) => {
|
||||
if (eventKey === "showLiveAcc") (eventValue as boolean) ? show() : hide();
|
||||
if (eventKey === "liveAccStyle") eventValue === "off" ? hide() : show();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,49 +3,49 @@ import * as TestState from "../test/test-state";
|
|||
import * as ConfigEvent from "../observables/config-event";
|
||||
import Format from "../utils/format";
|
||||
|
||||
const textEl = document.querySelector(
|
||||
"#liveStatsTextBottom .liveBurst"
|
||||
) as Element;
|
||||
const miniEl = document.querySelector("#liveStatsMini .burst") as Element;
|
||||
|
||||
export function reset(): void {
|
||||
textEl.innerHTML = "0";
|
||||
miniEl.innerHTML = "0";
|
||||
}
|
||||
|
||||
export async function update(burst: number): Promise<void> {
|
||||
if (!Config.showLiveBurst) return;
|
||||
const burstText = Format.typingSpeed(burst, { showDecimalPlaces: false });
|
||||
(document.querySelector("#miniTimerAndLiveWpm .burst") as Element).innerHTML =
|
||||
burstText;
|
||||
(document.querySelector("#liveBurst") as Element).innerHTML = burstText;
|
||||
miniEl.innerHTML = burstText;
|
||||
textEl.innerHTML = burstText;
|
||||
}
|
||||
|
||||
let state = false;
|
||||
|
||||
export function show(): void {
|
||||
if (!Config.showLiveBurst) return;
|
||||
if (Config.liveSpeedStyle === "off") return;
|
||||
if (!TestState.isActive) return;
|
||||
if (state) return;
|
||||
if (Config.timerStyle === "mini" || Config.timerStyle === "bar") {
|
||||
$("#miniTimerAndLiveWpm .burst")
|
||||
.stop(true, false)
|
||||
.removeClass("hidden")
|
||||
.css("opacity", 0)
|
||||
.animate(
|
||||
{
|
||||
opacity: Config.timerOpacity,
|
||||
},
|
||||
125
|
||||
);
|
||||
if (Config.liveBurstStyle === "mini") {
|
||||
$(miniEl).stop(true, false).removeClass("hidden").css("opacity", 0).animate(
|
||||
{
|
||||
opacity: 1,
|
||||
},
|
||||
125
|
||||
);
|
||||
} else {
|
||||
$("#liveBurst")
|
||||
.stop(true, false)
|
||||
.removeClass("hidden")
|
||||
.css("opacity", 0)
|
||||
.animate(
|
||||
{
|
||||
opacity: Config.timerOpacity,
|
||||
},
|
||||
125
|
||||
);
|
||||
$(textEl).stop(true, false).removeClass("hidden").css("opacity", 0).animate(
|
||||
{
|
||||
opacity: 1,
|
||||
},
|
||||
125
|
||||
);
|
||||
}
|
||||
state = true;
|
||||
}
|
||||
|
||||
export function hide(): void {
|
||||
if (!state) return;
|
||||
$("#liveBurst")
|
||||
$(textEl)
|
||||
.stop(true, false)
|
||||
.animate(
|
||||
{
|
||||
|
|
@ -53,10 +53,10 @@ export function hide(): void {
|
|||
},
|
||||
125,
|
||||
() => {
|
||||
$("#liveBurst").addClass("hidden");
|
||||
$(textEl).addClass("hidden");
|
||||
}
|
||||
);
|
||||
$("#miniTimerAndLiveWpm .burst")
|
||||
$(miniEl)
|
||||
.stop(true, false)
|
||||
.animate(
|
||||
{
|
||||
|
|
@ -64,12 +64,12 @@ export function hide(): void {
|
|||
},
|
||||
125,
|
||||
() => {
|
||||
$("#miniTimerAndLiveWpm .burst").addClass("hidden");
|
||||
$(miniEl).addClass("hidden");
|
||||
}
|
||||
);
|
||||
state = false;
|
||||
}
|
||||
|
||||
ConfigEvent.subscribe((eventKey, eventValue) => {
|
||||
if (eventKey === "showLiveBurst") (eventValue as boolean) ? show() : hide();
|
||||
if (eventKey === "liveBurstStyle") eventValue === "off" ? hide() : show();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,12 +1,17 @@
|
|||
import Config from "../config";
|
||||
import * as TestState from "../test/test-state";
|
||||
import * as TestState from "./test-state";
|
||||
import * as ConfigEvent from "../observables/config-event";
|
||||
import Format from "../utils/format";
|
||||
|
||||
const liveWpmElement = document.querySelector("#liveWpm") as Element;
|
||||
const miniLiveWpmElement = document.querySelector(
|
||||
"#miniTimerAndLiveWpm .wpm"
|
||||
const textElement = document.querySelector(
|
||||
"#liveStatsTextBottom .liveSpeed"
|
||||
) as Element;
|
||||
const miniElement = document.querySelector("#liveStatsMini .speed") as Element;
|
||||
|
||||
export function reset(): void {
|
||||
textElement.innerHTML = "0";
|
||||
miniElement.innerHTML = "0";
|
||||
}
|
||||
|
||||
export function update(wpm: number, raw: number): void {
|
||||
let number = wpm;
|
||||
|
|
@ -14,35 +19,35 @@ export function update(wpm: number, raw: number): void {
|
|||
number = raw;
|
||||
}
|
||||
const numberText = Format.typingSpeed(number, { showDecimalPlaces: false });
|
||||
miniLiveWpmElement.innerHTML = numberText;
|
||||
liveWpmElement.innerHTML = numberText;
|
||||
textElement.innerHTML = numberText;
|
||||
miniElement.innerHTML = numberText;
|
||||
}
|
||||
|
||||
let state = false;
|
||||
|
||||
export function show(): void {
|
||||
if (!Config.showLiveWpm) return;
|
||||
if (Config.liveSpeedStyle === "off") return;
|
||||
if (!TestState.isActive) return;
|
||||
if (state) return;
|
||||
if (Config.timerStyle === "mini" || Config.timerStyle === "bar") {
|
||||
$(miniLiveWpmElement)
|
||||
if (Config.liveSpeedStyle === "mini") {
|
||||
$(miniElement)
|
||||
.stop(true, false)
|
||||
.removeClass("hidden")
|
||||
.css("opacity", 0)
|
||||
.animate(
|
||||
{
|
||||
opacity: Config.timerOpacity,
|
||||
opacity: 1,
|
||||
},
|
||||
125
|
||||
);
|
||||
} else {
|
||||
$(liveWpmElement)
|
||||
$(textElement)
|
||||
.stop(true, false)
|
||||
.removeClass("hidden")
|
||||
.css("opacity", 0)
|
||||
.animate(
|
||||
{
|
||||
opacity: Config.timerOpacity,
|
||||
opacity: 1,
|
||||
},
|
||||
125
|
||||
);
|
||||
|
|
@ -52,7 +57,7 @@ export function show(): void {
|
|||
|
||||
export function hide(): void {
|
||||
if (!state) return;
|
||||
$(liveWpmElement)
|
||||
$(textElement)
|
||||
.stop(true, false)
|
||||
.animate(
|
||||
{
|
||||
|
|
@ -60,10 +65,10 @@ export function hide(): void {
|
|||
},
|
||||
125,
|
||||
() => {
|
||||
liveWpmElement.classList.add("hidden");
|
||||
textElement.classList.add("hidden");
|
||||
}
|
||||
);
|
||||
$(miniLiveWpmElement)
|
||||
$(miniElement)
|
||||
.stop(true, false)
|
||||
.animate(
|
||||
{
|
||||
|
|
@ -71,12 +76,12 @@ export function hide(): void {
|
|||
},
|
||||
125,
|
||||
() => {
|
||||
miniLiveWpmElement.classList.add("hidden");
|
||||
miniElement.classList.add("hidden");
|
||||
}
|
||||
);
|
||||
state = false;
|
||||
}
|
||||
|
||||
ConfigEvent.subscribe((eventKey, eventValue) => {
|
||||
if (eventKey === "showLiveWpm") (eventValue as boolean) ? show() : hide();
|
||||
if (eventKey === "liveSpeedStyle") eventValue === "off" ? hide() : show();
|
||||
});
|
||||
|
|
@ -20,7 +20,7 @@ import * as ThemeController from "../controllers/theme-controller";
|
|||
import * as ResultWordHighlight from "../elements/result-word-highlight";
|
||||
import * as PaceCaret from "./pace-caret";
|
||||
import * as Caret from "./caret";
|
||||
import * as LiveWpm from "./live-wpm";
|
||||
import * as LiveSpeed from "./live-speed";
|
||||
import * as LiveAcc from "./live-acc";
|
||||
import * as LiveBurst from "./live-burst";
|
||||
import * as TimerProgress from "./timer-progress";
|
||||
|
|
@ -90,10 +90,8 @@ export function startTest(now: number): boolean {
|
|||
Replay.startReplayRecording();
|
||||
Replay.replayGetWordsList(TestWords.words.list);
|
||||
TestInput.resetKeypressTimings();
|
||||
TimerProgress.restart();
|
||||
TimerProgress.show();
|
||||
$("#liveWpm").text("0");
|
||||
LiveWpm.show();
|
||||
LiveSpeed.show();
|
||||
LiveAcc.show();
|
||||
LiveBurst.show();
|
||||
TimerProgress.update();
|
||||
|
|
@ -244,7 +242,7 @@ export function restart(options = {} as RestartOptions): void {
|
|||
Caret.hide();
|
||||
TestState.setActive(false);
|
||||
Replay.stopReplayRecording();
|
||||
LiveWpm.hide();
|
||||
LiveSpeed.hide();
|
||||
LiveAcc.hide();
|
||||
LiveBurst.hide();
|
||||
TimerProgress.hide();
|
||||
|
|
@ -347,23 +345,10 @@ export function restart(options = {} as RestartOptions): void {
|
|||
},
|
||||
options.noAnim ? 0 : 125,
|
||||
() => {
|
||||
(
|
||||
document.querySelector("#miniTimerAndLiveWpm .wpm") as HTMLElement
|
||||
).innerHTML = "0";
|
||||
(
|
||||
document.querySelector("#miniTimerAndLiveWpm .acc") as HTMLElement
|
||||
).innerHTML = "100%";
|
||||
(
|
||||
document.querySelector(
|
||||
"#miniTimerAndLiveWpm .burst"
|
||||
) as HTMLElement
|
||||
).innerHTML = "0";
|
||||
(document.querySelector("#liveWpm") as HTMLElement).innerHTML = "0";
|
||||
(document.querySelector("#liveAcc") as HTMLElement).innerHTML =
|
||||
"100%";
|
||||
(document.querySelector("#liveBurst") as HTMLElement).innerHTML =
|
||||
"0";
|
||||
|
||||
TimerProgress.reset();
|
||||
LiveSpeed.reset();
|
||||
LiveAcc.reset();
|
||||
LiveBurst.reset();
|
||||
TestUI.setTestRestarting(false);
|
||||
TestUI.updatePremid();
|
||||
ManualRestart.reset();
|
||||
|
|
@ -844,7 +829,7 @@ export async function finish(difficultyFailed = false): Promise<void> {
|
|||
TestState.setActive(false);
|
||||
Replay.stopReplayRecording();
|
||||
Caret.hide();
|
||||
LiveWpm.hide();
|
||||
LiveSpeed.hide();
|
||||
LiveAcc.hide();
|
||||
LiveBurst.hide();
|
||||
TimerProgress.hide();
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
import Config, * as UpdateConfig from "../config";
|
||||
import * as CustomText from "./custom-text";
|
||||
import * as TimerProgress from "./timer-progress";
|
||||
import * as LiveWpm from "./live-wpm";
|
||||
import * as LiveWpm from "./live-speed";
|
||||
import * as TestStats from "./test-stats";
|
||||
import * as TestInput from "./test-input";
|
||||
import * as TestWords from "./test-words";
|
||||
|
|
|
|||
|
|
@ -1440,6 +1440,48 @@ function updateWordsWidth(): void {
|
|||
}
|
||||
}
|
||||
|
||||
function updateLiveStatsOpacity(value: SharedTypes.Config.TimerOpacity): void {
|
||||
$("#barTimerProgress").css("opacity", parseFloat(value as string));
|
||||
$("#liveStatsTextTop").css("opacity", parseFloat(value as string));
|
||||
$("#liveStatsTextBottom").css("opacity", parseFloat(value as string));
|
||||
$("#liveStatsMini").css("opacity", parseFloat(value as string));
|
||||
}
|
||||
|
||||
function updateLiveStatsColor(value: SharedTypes.Config.TimerColor): void {
|
||||
$("#barTimerProgress").removeClass("timerSub");
|
||||
$("#barTimerProgress").removeClass("timerText");
|
||||
$("#barTimerProgress").removeClass("timerMain");
|
||||
|
||||
$("#liveStatsTextTop").removeClass("timerSub");
|
||||
$("#liveStatsTextTop").removeClass("timerText");
|
||||
$("#liveStatsTextTop").removeClass("timerMain");
|
||||
|
||||
$("#liveStatsTextBottom").removeClass("timerSub");
|
||||
$("#liveStatsTextBottom").removeClass("timerText");
|
||||
$("#liveStatsTextBottom").removeClass("timerMain");
|
||||
|
||||
$("#liveStatsMini").removeClass("timerSub");
|
||||
$("#liveStatsMini").removeClass("timerText");
|
||||
$("#liveStatsMini").removeClass("timerMain");
|
||||
|
||||
if (value === "main") {
|
||||
$("#barTimerProgress").addClass("timerMain");
|
||||
$("#liveStatsTextTop").addClass("timerMain");
|
||||
$("#liveStatsTextBottom").addClass("timerMain");
|
||||
$("#liveStatsMini").addClass("timerMain");
|
||||
} else if (value === "sub") {
|
||||
$("#barTimerProgress").addClass("timerSub");
|
||||
$("#liveStatsTextTop").addClass("timerSub");
|
||||
$("#liveStatsTextBottom").addClass("timerSub");
|
||||
$("#liveStatsMini").addClass("timerSub");
|
||||
} else if (value === "text") {
|
||||
$("#barTimerProgress").addClass("timerText");
|
||||
$("#liveStatsTextTop").addClass("timerText");
|
||||
$("#liveStatsTextBottom").addClass("timerText");
|
||||
$("#liveStatsMini").addClass("timerText");
|
||||
}
|
||||
}
|
||||
|
||||
$(".pageTest").on("click", "#saveScreenshotButton", () => {
|
||||
void screenshot();
|
||||
});
|
||||
|
|
@ -1564,4 +1606,10 @@ ConfigEvent.subscribe((key, value) => {
|
|||
if (key === "maxLineWidth") {
|
||||
updateWordsWidth();
|
||||
}
|
||||
if (key === "timerOpacity") {
|
||||
updateLiveStatsOpacity(value as SharedTypes.Config.TimerOpacity);
|
||||
}
|
||||
if (key === "timerColor") {
|
||||
updateLiveStatsColor(value as SharedTypes.Config.TimerColor);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -8,91 +8,79 @@ import * as SlowTimer from "../states/slow-timer";
|
|||
import * as TestState from "./test-state";
|
||||
import * as ConfigEvent from "../observables/config-event";
|
||||
|
||||
const barEl = $("#barTimerProgress .bar");
|
||||
const textEl = $("#liveStatsTextTop .timerProgress");
|
||||
const miniEl = $("#liveStatsMini .time");
|
||||
|
||||
export function show(): void {
|
||||
const op = Config.timerStyle !== "off" ? parseFloat(Config.timerOpacity) : 0;
|
||||
if (Config.mode !== "zen" && Config.timerStyle === "bar") {
|
||||
$("#timerWrapper").stop(true, true).removeClass("hidden").animate(
|
||||
barEl.stop(true, true).removeClass("hidden").animate(
|
||||
{
|
||||
opacity: op,
|
||||
opacity: 1,
|
||||
},
|
||||
125
|
||||
);
|
||||
} else if (Config.timerStyle === "text") {
|
||||
$("#timerNumber")
|
||||
.stop(true, true)
|
||||
.removeClass("hidden")
|
||||
.css("opacity", 0)
|
||||
.animate(
|
||||
{
|
||||
opacity: op,
|
||||
},
|
||||
125
|
||||
);
|
||||
textEl.stop(true, true).removeClass("hidden").css("opacity", 0).animate(
|
||||
{
|
||||
opacity: 1,
|
||||
},
|
||||
125
|
||||
);
|
||||
} else if (Config.mode === "zen" || Config.timerStyle === "mini") {
|
||||
if (op > 0) {
|
||||
$("#miniTimerAndLiveWpm .time")
|
||||
.stop(true, true)
|
||||
.removeClass("hidden")
|
||||
.animate(
|
||||
{
|
||||
opacity: op,
|
||||
},
|
||||
125
|
||||
);
|
||||
}
|
||||
miniEl.stop(true, true).removeClass("hidden").animate(
|
||||
{
|
||||
opacity: 1,
|
||||
},
|
||||
125
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export function reset(): void {
|
||||
let width = "0vw";
|
||||
if (
|
||||
Config.mode === "time" ||
|
||||
(Config.mode === "custom" && CustomText.getLimitMode() === "time")
|
||||
) {
|
||||
width = "100vw";
|
||||
}
|
||||
barEl.stop(true, true).animate(
|
||||
{
|
||||
width,
|
||||
},
|
||||
0
|
||||
);
|
||||
miniEl.text("0");
|
||||
textEl.text("0");
|
||||
}
|
||||
|
||||
export function hide(): void {
|
||||
$("#timerWrapper").stop(true, true).animate(
|
||||
barEl.stop(true, true).animate(
|
||||
{
|
||||
opacity: 0,
|
||||
},
|
||||
125
|
||||
);
|
||||
$("#miniTimerAndLiveWpm .time")
|
||||
.stop(true, true)
|
||||
.animate(
|
||||
{
|
||||
opacity: 0,
|
||||
},
|
||||
125,
|
||||
() => {
|
||||
$("#miniTimerAndLiveWpm .time").addClass("hidden");
|
||||
}
|
||||
);
|
||||
$("#timerNumber").stop(true, true).animate(
|
||||
miniEl.stop(true, true).animate(
|
||||
{
|
||||
opacity: 0,
|
||||
},
|
||||
125
|
||||
);
|
||||
}
|
||||
|
||||
export function restart(): void {
|
||||
if (Config.timerStyle === "bar") {
|
||||
if (Config.mode === "time") {
|
||||
$("#timer").stop(true, true).animate(
|
||||
{
|
||||
width: "100vw",
|
||||
},
|
||||
0
|
||||
);
|
||||
} else if (Config.mode === "words" || Config.mode === "custom") {
|
||||
$("#timer").stop(true, true).animate(
|
||||
{
|
||||
width: "0vw",
|
||||
},
|
||||
0
|
||||
);
|
||||
125,
|
||||
() => {
|
||||
miniEl.addClass("hidden");
|
||||
}
|
||||
}
|
||||
);
|
||||
textEl.stop(true, true).animate(
|
||||
{
|
||||
opacity: 0,
|
||||
},
|
||||
125
|
||||
);
|
||||
}
|
||||
|
||||
const timerNumberElement = document.querySelector("#timerNumber");
|
||||
const miniTimerNumberElement = document.querySelector(
|
||||
"#miniTimerAndLiveWpm .time"
|
||||
);
|
||||
const timerNumberElement = textEl[0] as HTMLElement;
|
||||
const miniTimerNumberElement = miniEl[0] as HTMLElement;
|
||||
|
||||
function getCurrentCount(): number {
|
||||
if (Config.mode === "custom" && CustomText.getLimitMode() === "section") {
|
||||
|
|
@ -118,15 +106,13 @@ export function update(): void {
|
|||
}
|
||||
if (Config.timerStyle === "bar") {
|
||||
const percent = 100 - ((time + 1) / maxtime) * 100;
|
||||
$("#timer")
|
||||
.stop(true, true)
|
||||
.animate(
|
||||
{
|
||||
width: percent + "vw",
|
||||
},
|
||||
SlowTimer.get() ? 0 : 1000,
|
||||
"linear"
|
||||
);
|
||||
barEl.stop(true, true).animate(
|
||||
{
|
||||
width: percent + "vw",
|
||||
},
|
||||
SlowTimer.get() ? 0 : 1000,
|
||||
"linear"
|
||||
);
|
||||
} else if (Config.timerStyle === "text") {
|
||||
let displayTime = DateTime.secondsToString(maxtime - time);
|
||||
if (maxtime === 0) {
|
||||
|
|
@ -155,13 +141,6 @@ export function update(): void {
|
|||
}
|
||||
if (Config.mode === "custom") {
|
||||
outof = CustomText.getLimitValue();
|
||||
// if (CustomText.getLimitMode() === "word") {
|
||||
// outof = CustomText.word;
|
||||
// } else if (CustomText.isSectionRandom) {
|
||||
// outof = CustomText.section;
|
||||
// } else {
|
||||
// outof = CustomText.text.length;
|
||||
// }
|
||||
}
|
||||
if (Config.mode === "quote") {
|
||||
outof = TestWords.randomQuote?.textSplit?.length ?? 1;
|
||||
|
|
@ -170,14 +149,12 @@ export function update(): void {
|
|||
const percent = Math.floor(
|
||||
((TestWords.words.currentIndex + 1) / outof) * 100
|
||||
);
|
||||
$("#timer")
|
||||
.stop(true, true)
|
||||
.animate(
|
||||
{
|
||||
width: percent + "vw",
|
||||
},
|
||||
SlowTimer.get() ? 0 : 250
|
||||
);
|
||||
barEl.stop(true, true).animate(
|
||||
{
|
||||
width: percent + "vw",
|
||||
},
|
||||
SlowTimer.get() ? 0 : 250
|
||||
);
|
||||
} else if (Config.timerStyle === "text") {
|
||||
if (outof === 0) {
|
||||
if (timerNumberElement !== null) {
|
||||
|
|
|
|||
|
|
@ -12,6 +12,6 @@
|
|||
}
|
||||
|
||||
#liveWpm,
|
||||
#timerNumber {
|
||||
#liveStatsTextTop {
|
||||
color: #c58aff;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,6 @@
|
|||
}
|
||||
|
||||
#liveWpm,
|
||||
#timerNumber {
|
||||
#liveStatsTextTop {
|
||||
color: white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -181,9 +181,9 @@ header #logo .top,
|
|||
animation: rainbow 7.5s ease-in-out forwards;
|
||||
}
|
||||
|
||||
#timerNumber.timerMain,
|
||||
#largeLiveWpmAndAcc.timerMain,
|
||||
#miniTimerAndLiveWpm.timerMain {
|
||||
#liveStatsTextTop.timerMain,
|
||||
#liveStatsTextBottom.timerMain,
|
||||
#liveStatsMini.timerMain {
|
||||
animation: rainbow-infinite-loop 30s linear infinite;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ header #logo .text {
|
|||
}
|
||||
|
||||
#liveWpm,
|
||||
#timerNumber {
|
||||
#liveStatsTextTop {
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,6 +13,6 @@
|
|||
nav .textButton:nth-child(4) {
|
||||
color: #e25303;
|
||||
}
|
||||
#timerNumber {
|
||||
#liveStatsTextTop {
|
||||
color: #5e676e;
|
||||
}
|
||||
|
|
|
|||
1
shared-types/config.d.ts
vendored
1
shared-types/config.d.ts
vendored
|
|
@ -19,6 +19,7 @@ declare namespace SharedTypes.Config {
|
|||
type ConfidenceMode = "off" | "on" | "max";
|
||||
type IndicateTypos = "off" | "below" | "replace";
|
||||
type TimerStyle = "off" | "bar" | "text" | "mini";
|
||||
type LiveSpeedAccBurstStyle = "off" | "text" | "mini";
|
||||
type RandomTheme = "off" | "on" | "fav" | "light" | "dark" | "custom";
|
||||
type TimerColor = "black" | "sub" | "text" | "main";
|
||||
type TimerOpacity = "0.25" | "0.5" | "0.75" | "1";
|
||||
|
|
|
|||
6
shared-types/types.d.ts
vendored
6
shared-types/types.d.ts
vendored
|
|
@ -354,7 +354,6 @@ declare namespace SharedTypes {
|
|||
customThemeColors: string[];
|
||||
favThemes: string[];
|
||||
showKeyTips: boolean;
|
||||
showLiveWpm: boolean;
|
||||
smoothCaret: SharedTypes.Config.SmoothCaret;
|
||||
quickRestart: SharedTypes.Config.QuickRestart;
|
||||
punctuation: boolean;
|
||||
|
|
@ -377,6 +376,9 @@ declare namespace SharedTypes {
|
|||
confidenceMode: SharedTypes.Config.ConfidenceMode;
|
||||
indicateTypos: SharedTypes.Config.IndicateTypos;
|
||||
timerStyle: SharedTypes.Config.TimerStyle;
|
||||
liveSpeedStyle: SharedTypes.Config.LiveSpeedAccBurstStyle;
|
||||
liveAccStyle: SharedTypes.Config.LiveSpeedAccBurstStyle;
|
||||
liveBurstStyle: SharedTypes.Config.LiveSpeedAccBurstStyle;
|
||||
colorfulMode: boolean;
|
||||
randomTheme: SharedTypes.Config.RandomTheme;
|
||||
timerColor: SharedTypes.Config.TimerColor;
|
||||
|
|
@ -412,8 +414,6 @@ declare namespace SharedTypes {
|
|||
strictSpace: boolean;
|
||||
minAcc: SharedTypes.Config.MinimumAccuracy;
|
||||
minAccCustom: number;
|
||||
showLiveAcc: boolean;
|
||||
showLiveBurst: boolean;
|
||||
monkey: boolean;
|
||||
repeatQuotes: SharedTypes.Config.RepeatQuotes;
|
||||
oppositeShiftMode: SharedTypes.Config.OppositeShiftMode;
|
||||
|
|
|
|||
Loading…
Reference in a new issue