mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-10-06 13:40:16 +08:00
added live accuracy
This commit is contained in:
Jack
parent
02dba6334a
commit
c3088b48e6
6 changed files with 192 additions and 34 deletions
|
|
@ -188,6 +188,14 @@ let commands = {
|
|||
saveConfigToCookie();
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "toggleShowLiveAcc",
|
||||
display: "Toggle live accuracy display",
|
||||
exec: () => {
|
||||
toggleShowLiveAcc();
|
||||
saveConfigToCookie();
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "toggleTimerBar",
|
||||
display: "Toggle timer display",
|
||||
|
|
|
|||
117
src/js/script.js
117
src/js/script.js
|
|
@ -1326,12 +1326,12 @@ function startCaretAnimation() {
|
|||
|
||||
function hideKeymap() {
|
||||
$(".keymap").addClass("hidden");
|
||||
$("#liveWpm").removeClass("lower");
|
||||
// $("#liveWpm").removeClass("lower");
|
||||
}
|
||||
|
||||
function showKeymap() {
|
||||
$(".keymap").removeClass("hidden");
|
||||
$("#liveWpm").addClass("lower");
|
||||
// $("#liveWpm").addClass("lower");
|
||||
}
|
||||
|
||||
function flashPressedKeymapKey(key, correct) {
|
||||
|
|
@ -1709,6 +1709,7 @@ function showResult(difficultyFailed = false) {
|
|||
setFocus(false);
|
||||
hideCaret();
|
||||
hideLiveWpm();
|
||||
hideLiveAcc();
|
||||
hideTimer();
|
||||
hideKeymap();
|
||||
testInvalid = false;
|
||||
|
|
@ -2563,6 +2564,7 @@ function startTest() {
|
|||
showTimer();
|
||||
$("#liveWpm").text("0");
|
||||
showLiveWpm();
|
||||
showLiveAcc();
|
||||
updateTimer();
|
||||
clearTimeout(timer);
|
||||
keypressStats = {
|
||||
|
|
@ -2600,6 +2602,14 @@ function startTest() {
|
|||
wpmHistory.push(wpmAndRaw.wpm);
|
||||
rawHistory.push(wpmAndRaw.raw);
|
||||
|
||||
let acc = Misc.roundTo2(
|
||||
(accuracyStats.correct /
|
||||
(accuracyStats.correct + accuracyStats.incorrect)) *
|
||||
100
|
||||
);
|
||||
|
||||
updateLiveAcc(acc);
|
||||
|
||||
if (activeFunBox === "layoutfluid" && config.mode === "time") {
|
||||
const layouts = ["qwerty", "dvorak", "colemak"];
|
||||
let index = 0;
|
||||
|
|
@ -2643,11 +2653,6 @@ function startTest() {
|
|||
count: 0,
|
||||
words: [],
|
||||
};
|
||||
let acc = Misc.roundTo2(
|
||||
(accuracyStats.correct /
|
||||
(accuracyStats.correct + accuracyStats.incorrect)) *
|
||||
100
|
||||
);
|
||||
if (
|
||||
(config.minWpm === "custom" &&
|
||||
wpmAndRaw.wpm < parseInt(config.minWpmCustomSpeed) &&
|
||||
|
|
@ -2721,6 +2726,7 @@ function restartTest(withSameWordset = false, nosave = false) {
|
|||
hideCaret();
|
||||
testActive = false;
|
||||
hideLiveWpm();
|
||||
hideLiveAcc();
|
||||
hideTimer();
|
||||
bailout = false;
|
||||
paceCaret = null;
|
||||
|
|
@ -3052,19 +3058,108 @@ function updateLiveWpm(wpm, raw) {
|
|||
document.querySelector("#liveWpm").innerHTML = number;
|
||||
}
|
||||
|
||||
function updateLiveAcc(acc) {
|
||||
if (!testActive || !config.showLiveAcc) {
|
||||
hideLiveAcc();
|
||||
} else {
|
||||
showLiveAcc();
|
||||
}
|
||||
let number = Math.floor(acc);
|
||||
if (config.blindMode) {
|
||||
number = 100;
|
||||
}
|
||||
document.querySelector("#miniTimerAndLiveWpm .acc").innerHTML = number + "%";
|
||||
document.querySelector("#liveAcc").innerHTML = number + "%";
|
||||
}
|
||||
|
||||
function showLiveWpm() {
|
||||
if (!config.showLiveWpm) return;
|
||||
if (!testActive) return;
|
||||
if (config.timerStyle === "mini") {
|
||||
$("#miniTimerAndLiveWpm .wpm").css("opacity", config.timerOpacity);
|
||||
// $("#miniTimerAndLiveWpm .wpm").css("opacity", config.timerOpacity);
|
||||
$("#miniTimerAndLiveWpm .wpm").removeClass("hidden").animate(
|
||||
{
|
||||
opacity: config.timerOpacity,
|
||||
},
|
||||
125
|
||||
);
|
||||
} else {
|
||||
$("#liveWpm").css("opacity", config.timerOpacity);
|
||||
// $("#liveWpm").css("opacity", config.timerOpacity);
|
||||
$("#liveWpm").removeClass("hidden").animate(
|
||||
{
|
||||
opacity: config.timerOpacity,
|
||||
},
|
||||
125
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function hideLiveWpm() {
|
||||
$("#liveWpm").css("opacity", 0);
|
||||
$("#miniTimerAndLiveWpm .wpm").css("opacity", 0);
|
||||
// $("#liveWpm").css("opacity", 0);
|
||||
// $("#miniTimerAndLiveWpm .wpm").css("opacity", 0);
|
||||
$("#liveWpm").animate(
|
||||
{
|
||||
opacity: config.timerOpacity,
|
||||
},
|
||||
125,
|
||||
() => {
|
||||
$("#liveWpm").addClass("hidden");
|
||||
}
|
||||
);
|
||||
$("#miniTimerAndLiveWpm .wpm").animate(
|
||||
{
|
||||
opacity: config.timerOpacity,
|
||||
},
|
||||
125,
|
||||
() => {
|
||||
$("#miniTimerAndLiveWpm .wpm").addClass("hidden");
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function showLiveAcc() {
|
||||
if (!config.showLiveAcc) return;
|
||||
if (!testActive) return;
|
||||
if (config.timerStyle === "mini") {
|
||||
// $("#miniTimerAndLiveWpm .wpm").css("opacity", config.timerOpacity);
|
||||
$("#miniTimerAndLiveWpm .acc").removeClass("hidden").animate(
|
||||
{
|
||||
opacity: config.timerOpacity,
|
||||
},
|
||||
125
|
||||
);
|
||||
} else {
|
||||
// $("#liveWpm").css("opacity", config.timerOpacity);
|
||||
$("#liveAcc").removeClass("hidden").animate(
|
||||
{
|
||||
opacity: config.timerOpacity,
|
||||
},
|
||||
125
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function hideLiveAcc() {
|
||||
// $("#liveWpm").css("opacity", 0);
|
||||
// $("#miniTimerAndLiveWpm .wpm").css("opacity", 0);
|
||||
$("#liveAcc").animate(
|
||||
{
|
||||
opacity: config.timerOpacity,
|
||||
},
|
||||
125,
|
||||
() => {
|
||||
$("#liveAcc").addClass("hidden");
|
||||
}
|
||||
);
|
||||
$("#miniTimerAndLiveWpm .acc").animate(
|
||||
{
|
||||
opacity: config.timerOpacity,
|
||||
},
|
||||
125,
|
||||
() => {
|
||||
$("#miniTimerAndLiveWpm .acc").addClass("hidden");
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function swapElements(
|
||||
|
|
|
|||
|
|
@ -81,6 +81,7 @@ settingsGroups.showLiveWpm = new SettingsGroup(
|
|||
settingsGroups.keymapMode.updateButton();
|
||||
}
|
||||
);
|
||||
settingsGroups.showLiveAcc = new SettingsGroup("showLiveAcc", setShowLiveAcc);
|
||||
settingsGroups.showTimerProgress = new SettingsGroup(
|
||||
"showTimerProgress",
|
||||
setShowTimerProgress
|
||||
|
|
|
|||
|
|
@ -73,6 +73,7 @@ let defaultConfig = {
|
|||
strictSpace: false,
|
||||
minAcc: "off",
|
||||
minAccCustom: 90,
|
||||
showLiveAcc: true,
|
||||
};
|
||||
|
||||
let cookieConfig = null;
|
||||
|
|
@ -206,6 +207,7 @@ function applyConfig(configObj) {
|
|||
setSmoothCaret(configObj.smoothCaret, true);
|
||||
setSmoothLineScroll(configObj.smoothLineScroll, true);
|
||||
setShowLiveWpm(configObj.showLiveWpm, true);
|
||||
setShowLiveAcc(configObj.showLiveAcc, true);
|
||||
setShowTimerProgress(configObj.showTimerProgress, true);
|
||||
setAlwaysShowDecimalPlaces(configObj.alwaysShowDecimalPlaces, true);
|
||||
setAlwaysShowWordsHistory(configObj.alwaysShowWordsHistory, true);
|
||||
|
|
@ -789,6 +791,19 @@ function toggleShowLiveWpm() {
|
|||
saveConfigToCookie();
|
||||
}
|
||||
|
||||
function setShowLiveAcc(live, nosave) {
|
||||
if (live == null || live == undefined) {
|
||||
live = false;
|
||||
}
|
||||
config.showLiveAcc = live;
|
||||
if (!nosave) saveConfigToCookie();
|
||||
}
|
||||
|
||||
function toggleShowLiveAcc() {
|
||||
config.showLiveAcc = !config.showLiveAcc;
|
||||
saveConfigToCookie();
|
||||
}
|
||||
|
||||
function setHighlightMode(mode, nosave) {
|
||||
if (activeFunBox === "nospace" && mode === "word") {
|
||||
Misc.showNotification("Can't use word highlight with nospace funbox", 3000);
|
||||
|
|
@ -836,9 +851,9 @@ function setTimerColor(color, nosave) {
|
|||
$("#timerNumber").removeClass("timerText");
|
||||
$("#timerNumber").removeClass("timerMain");
|
||||
|
||||
$("#liveWpm").removeClass("timerSub");
|
||||
$("#liveWpm").removeClass("timerText");
|
||||
$("#liveWpm").removeClass("timerMain");
|
||||
$("#largeLiveWpmAndAcc").removeClass("timerSub");
|
||||
$("#largeLiveWpmAndAcc").removeClass("timerText");
|
||||
$("#largeLiveWpmAndAcc").removeClass("timerMain");
|
||||
|
||||
$("#miniTimerAndLiveWpm").removeClass("timerSub");
|
||||
$("#miniTimerAndLiveWpm").removeClass("timerText");
|
||||
|
|
@ -847,17 +862,17 @@ function setTimerColor(color, nosave) {
|
|||
if (color === "main") {
|
||||
$("#timer").addClass("timerMain");
|
||||
$("#timerNumber").addClass("timerMain");
|
||||
$("#liveWpm").addClass("timerMain");
|
||||
$("#largeLiveWpmAndAcc").addClass("timerMain");
|
||||
$("#miniTimerAndLiveWpm").addClass("timerMain");
|
||||
} else if (color === "sub") {
|
||||
$("#timer").addClass("timerSub");
|
||||
$("#timerNumber").addClass("timerSub");
|
||||
$("#liveWpm").addClass("timerSub");
|
||||
$("#largeLiveWpmAndAcc").addClass("timerSub");
|
||||
$("#miniTimerAndLiveWpm").addClass("timerSub");
|
||||
} else if (color === "text") {
|
||||
$("#timer").addClass("timerText");
|
||||
$("#timerNumber").addClass("timerText");
|
||||
$("#liveWpm").addClass("timerText");
|
||||
$("#largeLiveWpmAndAcc").addClass("timerText");
|
||||
$("#miniTimerAndLiveWpm").addClass("timerText");
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -802,22 +802,41 @@ a:hover {
|
|||
z-index: -1;
|
||||
}
|
||||
|
||||
#liveWpm,
|
||||
#timerNumber {
|
||||
position: relative;
|
||||
#largeLiveWpmAndAcc {
|
||||
font-size: 10rem;
|
||||
color: black;
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
z-index: -1;
|
||||
height: 0;
|
||||
transition: 0.25s;
|
||||
line-height: 0;
|
||||
top: 5rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 5rem;
|
||||
}
|
||||
|
||||
#liveWpm {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#liveAcc {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#timerNumber {
|
||||
transition: 0.25s;
|
||||
height: 0;
|
||||
line-height: 0;
|
||||
z-index: -1;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
font-size: 10rem;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin: 0 auto;
|
||||
|
|
@ -827,7 +846,7 @@ a:hover {
|
|||
transition: none;
|
||||
}
|
||||
|
||||
#liveWpm.timerMain,
|
||||
#largeLiveWpmAndAcc.timerMain,
|
||||
#timerNumber.timerMain {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
|
@ -836,7 +855,7 @@ a:hover {
|
|||
background: var(--main-color);
|
||||
}
|
||||
|
||||
#liveWpm.timerSub,
|
||||
#largeLiveWpmAndAcc.timerSub,
|
||||
#timerNumber.timerSub {
|
||||
color: var(--sub-color);
|
||||
}
|
||||
|
|
@ -845,7 +864,7 @@ a:hover {
|
|||
background: var(--sub-color);
|
||||
}
|
||||
|
||||
#liveWpm.timerText,
|
||||
#largeLiveWpmAndAcc.timerText,
|
||||
#timerNumber.timerText {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
|
@ -854,13 +873,13 @@ a:hover {
|
|||
background: var(--text-color);
|
||||
}
|
||||
|
||||
#liveWpm {
|
||||
top: 6rem;
|
||||
// #liveWpm {
|
||||
// top: 6rem;
|
||||
|
||||
&.lower {
|
||||
top: 15rem;
|
||||
}
|
||||
}
|
||||
// &.lower {
|
||||
// top: 15rem;
|
||||
// }
|
||||
// }
|
||||
|
||||
#centerContent {
|
||||
max-width: 1000px;
|
||||
|
|
@ -1758,11 +1777,12 @@ key {
|
|||
}
|
||||
|
||||
.wpm {
|
||||
transition: 0.125s;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
.time,
|
||||
.wpm {
|
||||
.wpm,
|
||||
.acc {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -953,6 +953,7 @@
|
|||
<div id="miniTimerAndLiveWpm">
|
||||
<div class="time hidden">1:00</div>
|
||||
<div class="wpm">60</div>
|
||||
<div class="acc">100%</div>
|
||||
</div>
|
||||
<div class="outOfFocusWarning hidden">
|
||||
<i class="fas fa-mouse-pointer"></i>
|
||||
|
|
@ -961,7 +962,6 @@
|
|||
<div id="wordsWrapper">
|
||||
<div id="words" class="size15"></div>
|
||||
</div>
|
||||
<div id="liveWpm">123</div>
|
||||
<div class="keymap hidden">
|
||||
<div class="row r1">
|
||||
<div></div>
|
||||
|
|
@ -1136,6 +1136,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="largeLiveWpmAndAcc">
|
||||
<div id="liveWpm">123</div>
|
||||
<div id="liveAcc">100%%</div>
|
||||
</div>
|
||||
<div
|
||||
id="restartTestButton"
|
||||
aria-label="Restart test"
|
||||
|
|
@ -2835,6 +2839,21 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section showLiveAcc">
|
||||
<h1>live accuracy</h1>
|
||||
<div class="text">
|
||||
Displays live accuracy during the test. Updates once every
|
||||
second.
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="button off" tabindex="0" onclick="this.blur();">
|
||||
hide
|
||||
</div>
|
||||
<div class="button on" tabindex="0" onclick="this.blur();">
|
||||
show
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section showTimerProgress">
|
||||
<h1>timer/progress</h1>
|
||||
<div class="text">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue