diff --git a/src/js/commandline.js b/src/js/commandline.js index 55e03e686..bf8c56310 100644 --- a/src/js/commandline.js +++ b/src/js/commandline.js @@ -188,6 +188,14 @@ let commands = { saveConfigToCookie(); }, }, + { + id: "toggleShowLiveAcc", + display: "Toggle live accuracy display", + exec: () => { + toggleShowLiveAcc(); + saveConfigToCookie(); + }, + }, { id: "toggleTimerBar", display: "Toggle timer display", diff --git a/src/js/script.js b/src/js/script.js index bd14aaf02..d14cf1007 100644 --- a/src/js/script.js +++ b/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( diff --git a/src/js/settings.js b/src/js/settings.js index bfd88b26c..9fbbca29a 100644 --- a/src/js/settings.js +++ b/src/js/settings.js @@ -81,6 +81,7 @@ settingsGroups.showLiveWpm = new SettingsGroup( settingsGroups.keymapMode.updateButton(); } ); +settingsGroups.showLiveAcc = new SettingsGroup("showLiveAcc", setShowLiveAcc); settingsGroups.showTimerProgress = new SettingsGroup( "showTimerProgress", setShowTimerProgress diff --git a/src/js/userconfig.js b/src/js/userconfig.js index 088847313..61804efe4 100644 --- a/src/js/userconfig.js +++ b/src/js/userconfig.js @@ -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"); } diff --git a/src/sass/style.scss b/src/sass/style.scss index 85fe4de1d..9ad81ce55 100644 --- a/src/sass/style.scss +++ b/src/sass/style.scss @@ -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; } diff --git a/static/index.html b/static/index.html index e1715558a..4f93de4fb 100644 --- a/static/index.html +++ b/static/index.html @@ -953,6 +953,7 @@
60
+
100%
+
+
123
+
100%%
+
+
+

live accuracy

+
+ Displays live accuracy during the test. Updates once every + second. +
+
+
+ hide +
+
+ show +
+
+

timer/progress