From 6fb0991ecfea98bc243692ef53827f8be3afa09f Mon Sep 17 00:00:00 2001 From: Miodec Date: Thu, 18 Mar 2021 03:23:47 +0000 Subject: [PATCH] moved timer progress into a module #495 --- gulpfile.js | 1 + src/js/global-dependencies.js | 1 + src/js/script.js | 201 ++-------------------------------- src/js/test/timer-progress.js | 190 ++++++++++++++++++++++++++++++++ src/js/userconfig.js | 10 ++ 5 files changed, 209 insertions(+), 194 deletions(-) create mode 100644 src/js/test/timer-progress.js diff --git a/gulpfile.js b/gulpfile.js index 8b881a74d..e09345a07 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -117,6 +117,7 @@ const refactoredSrc = [ "./src/js/test/caps-warning.js", "./src/js/test/live-acc.js", "./src/js/test/test-leaderboards.js", + "./src/js/test/timer-progress.js", ]; //legacy files diff --git a/src/js/global-dependencies.js b/src/js/global-dependencies.js index a0ec1cf7a..4523309fd 100644 --- a/src/js/global-dependencies.js +++ b/src/js/global-dependencies.js @@ -46,3 +46,4 @@ import * as LiveWpm from "./live-wpm"; import * as CapsWarning from "./caps-warning"; import * as LiveAcc from "./live-acc"; import * as TestLeaderboards from "./test-leaderboards"; +import * as TimerProgress from "./timer-progress"; diff --git a/src/js/script.js b/src/js/script.js index b7ab7a5eb..e8b431638 100644 --- a/src/js/script.js +++ b/src/js/script.js @@ -907,193 +907,6 @@ function highlightBadWord(index, showError) { $($("#words .word")[index]).addClass("error"); } -function showTimer() { - let op = Config.showTimerProgress ? Config.timerOpacity : 0; - if (Config.mode != "zen" && Config.timerStyle === "bar") { - $("#timerWrapper").stop(true, true).removeClass("hidden").animate( - { - opacity: op, - }, - 125 - ); - } else if (Config.timerStyle === "text") { - $("#timerNumber") - .stop(true, true) - .removeClass("hidden") - .css("opacity", 0) - .animate( - { - opacity: op, - }, - 125 - ); - } else if (Config.mode == "zen" || Config.timerStyle === "mini") { - if (op > 0) { - $("#miniTimerAndLiveWpm .time") - .stop(true, true) - .removeClass("hidden") - .animate( - { - opacity: op, - }, - 125 - ); - } - } -} - -function hideTimer() { - $("#timerWrapper").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( - { - opacity: 0, - }, - 125 - ); -} - -function restartTimer() { - 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 - ); - } - } -} - -function updateTimer() { - if (!Config.showTimerProgress) return; - if ( - Config.mode === "time" || - (Config.mode === "custom" && CustomText.isTimeRandom) - ) { - let maxtime = Config.time; - if (Config.mode === "custom" && CustomText.isTimeRandom) { - maxtime = CustomText.time; - } - if (Config.timerStyle === "bar") { - let percent = 100 - ((time + 1) / maxtime) * 100; - $("#timer") - .stop(true, true) - .animate( - { - width: percent + "vw", - }, - 1000, - "linear" - ); - } else if (Config.timerStyle === "text") { - let displayTime = Misc.secondsToString(maxtime - time); - if (maxtime === 0) { - displayTime = Misc.secondsToString(time); - } - $("#timerNumber").html("
" + displayTime + "
"); - } else if (Config.timerStyle === "mini") { - let displayTime = Misc.secondsToString(maxtime - time); - if (maxtime === 0) { - displayTime = Misc.secondsToString(time); - } - $("#miniTimerAndLiveWpm .time").html(displayTime); - } - } else if ( - Config.mode === "words" || - Config.mode === "custom" || - Config.mode === "quote" - ) { - if (Config.timerStyle === "bar") { - let outof = wordsList.length; - if (Config.mode === "words") { - outof = Config.words; - } - if (Config.mode === "custom") { - if (CustomText.isWordRandom) { - outof = CustomText.word; - } else { - outof = CustomText.text.length; - } - } - let percent = Math.floor(((currentWordIndex + 1) / outof) * 100); - $("#timer") - .stop(true, true) - .animate( - { - width: percent + "vw", - }, - 250 - ); - } else if (Config.timerStyle === "text") { - let outof = wordsList.length; - if (Config.mode === "words") { - outof = Config.words; - } - if (Config.mode === "custom") { - if (CustomText.isWordRandom) { - outof = CustomText.word; - } else { - outof = CustomText.text.length; - } - } - if (outof === 0) { - $("#timerNumber").html("
" + `${inputHistory.length}` + "
"); - } else { - $("#timerNumber").html( - "
" + `${inputHistory.length}/${outof}` + "
" - ); - } - } else if (Config.timerStyle === "mini") { - let outof = wordsList.length; - if (Config.mode === "words") { - outof = Config.words; - } - if (Config.mode === "custom") { - if (CustomText.isWordRandom) { - outof = CustomText.word; - } else { - outof = CustomText.text.length; - } - } - if (Config.words === 0) { - $("#miniTimerAndLiveWpm .time").html(`${inputHistory.length}`); - } else { - $("#miniTimerAndLiveWpm .time").html(`${inputHistory.length}/${outof}`); - } - } - } else if (Config.mode == "zen") { - if (Config.timerStyle === "text") { - $("#timerNumber").html("
" + `${inputHistory.length}` + "
"); - } else { - $("#miniTimerAndLiveWpm .time").html(`${inputHistory.length}`); - } - } -} - function countChars() { let correctWordChars = 0; let correctChars = 0; @@ -1263,7 +1076,7 @@ function showResult(difficultyFailed = false) { LiveWpm.hide(); hideCrown(); LiveAcc.hide(); - hideTimer(); + TimerProgress.hide(); Keymap.hide(); let stats = calculateStats(); if (stats === undefined) { @@ -2083,12 +1896,12 @@ function startTest() { testActive = true; TestStats.setStart(performance.now()); TestStats.resetKeypressTimings(); - restartTimer(); - showTimer(); + TimerProgress.restart(); + TimerProgress.show(); $("#liveWpm").text("0"); LiveWpm.show(); LiveAcc.show(); - updateTimer(); + TimerProgress.update(time, wordsList, currentWordIndex, inputHistory); clearTimeout(timer); if (activeFunbox === "memory") { @@ -2112,7 +1925,7 @@ function startTest() { Config.mode === "time" || (Config.mode === "custom" && CustomText.isTimeRandom) ) { - updateTimer(); + TimerProgress.update(time, wordsList, currentWordIndex, inputHistory); } let wpmAndRaw = liveWpmAndRaw(); LiveWpm.update(wpmAndRaw.wpm, wpmAndRaw.raw); @@ -2298,7 +2111,7 @@ function restartTest(withSameWordset = false, nosave = false, event) { testActive = false; LiveWpm.hide(); LiveAcc.hide(); - hideTimer(); + TimerProgress.hide(); bailout = false; paceCaret = null; if (paceCaret !== null) clearTimeout(paceCaret.timeout); @@ -4156,7 +3969,7 @@ function handleSpace(event, isEnter) { Config.mode === "quote" || Config.mode === "zen" ) { - updateTimer(); + TimerProgress.update(time, wordsList, currentWordIndex, inputHistory); } if ( Config.mode == "time" || diff --git a/src/js/test/timer-progress.js b/src/js/test/timer-progress.js new file mode 100644 index 000000000..eec385e85 --- /dev/null +++ b/src/js/test/timer-progress.js @@ -0,0 +1,190 @@ +import Config from "./config"; +import * as CustomText from "./custom-text"; +import * as Misc from "./misc"; + +export function show() { + let op = Config.showTimerProgress ? Config.timerOpacity : 0; + if (Config.mode != "zen" && Config.timerStyle === "bar") { + $("#timerWrapper").stop(true, true).removeClass("hidden").animate( + { + opacity: op, + }, + 125 + ); + } else if (Config.timerStyle === "text") { + $("#timerNumber") + .stop(true, true) + .removeClass("hidden") + .css("opacity", 0) + .animate( + { + opacity: op, + }, + 125 + ); + } else if (Config.mode == "zen" || Config.timerStyle === "mini") { + if (op > 0) { + $("#miniTimerAndLiveWpm .time") + .stop(true, true) + .removeClass("hidden") + .animate( + { + opacity: op, + }, + 125 + ); + } + } +} + +export function hide() { + $("#timerWrapper").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( + { + opacity: 0, + }, + 125 + ); +} + +export function restart() { + 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 + ); + } + } +} + +//TODO remove the parameters once they are inside a module +export function update(time, wordsList, currentWordIndex, inputHistory) { + if ( + Config.mode === "time" || + (Config.mode === "custom" && CustomText.isTimeRandom) + ) { + let maxtime = Config.time; + if (Config.mode === "custom" && CustomText.isTimeRandom) { + maxtime = CustomText.time; + } + if (Config.timerStyle === "bar") { + let percent = 100 - ((time + 1) / maxtime) * 100; + $("#timer") + .stop(true, true) + .animate( + { + width: percent + "vw", + }, + 1000, + "linear" + ); + } else if (Config.timerStyle === "text") { + let displayTime = Misc.secondsToString(maxtime - time); + if (maxtime === 0) { + displayTime = Misc.secondsToString(time); + } + $("#timerNumber").html("
" + displayTime + "
"); + } else if (Config.timerStyle === "mini") { + let displayTime = Misc.secondsToString(maxtime - time); + if (maxtime === 0) { + displayTime = Misc.secondsToString(time); + } + $("#miniTimerAndLiveWpm .time").html(displayTime); + } + } else if ( + Config.mode === "words" || + Config.mode === "custom" || + Config.mode === "quote" + ) { + if (Config.timerStyle === "bar") { + let outof = wordsList.length; + if (Config.mode === "words") { + outof = Config.words; + } + if (Config.mode === "custom") { + if (CustomText.isWordRandom) { + outof = CustomText.word; + } else { + outof = CustomText.text.length; + } + } + let percent = Math.floor(((currentWordIndex + 1) / outof) * 100); + $("#timer") + .stop(true, true) + .animate( + { + width: percent + "vw", + }, + 250 + ); + } else if (Config.timerStyle === "text") { + let outof = wordsList.length; + if (Config.mode === "words") { + outof = Config.words; + } + if (Config.mode === "custom") { + if (CustomText.isWordRandom) { + outof = CustomText.word; + } else { + outof = CustomText.text.length; + } + } + if (outof === 0) { + $("#timerNumber").html("
" + `${inputHistory.length}` + "
"); + } else { + $("#timerNumber").html( + "
" + `${inputHistory.length}/${outof}` + "
" + ); + } + } else if (Config.timerStyle === "mini") { + let outof = wordsList.length; + if (Config.mode === "words") { + outof = Config.words; + } + if (Config.mode === "custom") { + if (CustomText.isWordRandom) { + outof = CustomText.word; + } else { + outof = CustomText.text.length; + } + } + if (Config.words === 0) { + $("#miniTimerAndLiveWpm .time").html(`${inputHistory.length}`); + } else { + $("#miniTimerAndLiveWpm .time").html(`${inputHistory.length}/${outof}`); + } + } + } else if (Config.mode == "zen") { + if (Config.timerStyle === "text") { + $("#timerNumber").html("
" + `${inputHistory.length}` + "
"); + } else { + $("#miniTimerAndLiveWpm .time").html(`${inputHistory.length}`); + } + } +} diff --git a/src/js/userconfig.js b/src/js/userconfig.js index 811becc22..995a3ad1d 100644 --- a/src/js/userconfig.js +++ b/src/js/userconfig.js @@ -573,11 +573,21 @@ function setShowTimerProgress(timer, nosave) { timer = false; } ConfigSet.showTimerProgress(timer); + if (Config.showTimerProgress) { + TimerProgress.show(); + } else { + TimerProgress.hide(); + } if (!nosave) saveConfigToCookie(); } function toggleShowTimerProgress() { ConfigSet.showTimerProgress(!Config.showTimerProgress); + if (Config.showTimerProgress) { + TimerProgress.show(); + } else { + TimerProgress.hide(); + } saveConfigToCookie(); }