diff --git a/gulpfile.js b/gulpfile.js index 6b12ff219..29e4823c8 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -119,6 +119,7 @@ const refactoredSrc = [ "./src/js/test/test-leaderboards.js", "./src/js/test/timer-progress.js", "./src/js/test/test-logic.js", + "./src/js/test/funbox.js", ]; //legacy files diff --git a/src/js/account.js b/src/js/account.js index f5cf73596..d13bd802a 100644 --- a/src/js/account.js +++ b/src/js/account.js @@ -817,7 +817,7 @@ $(".pageAccount .topFilters .button.currentConfigFilter").click((e) => { } else { ResultFilters.setFilter("language", Config.language, true); } - ResultFilters.setFilter("funbox", activeFunbox, true); + ResultFilters.setFilter("funbox", true); ResultFilters.setFilter("tags", "none", true); DB.getSnapshot().tags.forEach((tag) => { if (tag.active === true) { diff --git a/src/js/commandline.js b/src/js/commandline.js index 05cca5d5d..21879a3fc 100644 --- a/src/js/commandline.js +++ b/src/js/commandline.js @@ -1544,7 +1544,7 @@ function updateCommandsTagsList() { DB.getSnapshot().tags.forEach((tag) => { tag.active = false; }); - TestUI.updateModesNotice(paceCaret, activeFunbox); + TestUI.updateModesNotice(paceCaret); saveActiveTagsToCookie(); }, }); @@ -1564,7 +1564,7 @@ function updateCommandsTagsList() { sticky: true, exec: () => { toggleTag(tag.id); - TestUI.updateModesNotice(paceCaret, activeFunbox); + TestUI.updateModesNotice(paceCaret); let txt = tag.name; if (tag.active === true) { diff --git a/src/js/global-dependencies.js b/src/js/global-dependencies.js index f2b7591b1..ac36843cd 100644 --- a/src/js/global-dependencies.js +++ b/src/js/global-dependencies.js @@ -48,3 +48,4 @@ import * as LiveAcc from "./live-acc"; import * as TestLeaderboards from "./test-leaderboards"; import * as TimerProgress from "./timer-progress"; import * as TestLogic from "./test-logic"; +import * as Funbox from "./funbox"; diff --git a/src/js/script.js b/src/js/script.js index d8fbf229b..e16e83b8a 100644 --- a/src/js/script.js +++ b/src/js/script.js @@ -2,11 +2,6 @@ let time = 0; let timer = null; -//funbox -let activeFunbox = "none"; -let memoryFunboxTimer = null; -let memoryFunboxInterval = null; - //pace caret let paceCaret = null; @@ -44,9 +39,9 @@ async function activateFunbox(funbox, mode) { $("#funBoxTheme").attr("href", ``); $("#words").removeClass("nospace"); // if (funbox === "none") { - activeFunbox = "none"; - memoryFunboxInterval = clearInterval(memoryFunboxInterval); - memoryFunboxTimer = null; + + Funbox.reset(); + $("#wordsWrapper").removeClass("hidden"); // } @@ -59,7 +54,7 @@ async function activateFunbox(funbox, mode) { if (mode === "style") { if (funbox != undefined) { $("#funBoxTheme").attr("href", `funbox/${funbox}.css`); - activeFunbox = funbox; + Funbox.setActive(funbox); } if (funbox === "simon_says") { @@ -104,7 +99,7 @@ async function activateFunbox(funbox, mode) { setHighlightMode("letter", true); restartTest(false, true); } - activeFunbox = funbox; + Funbox.setActive(funbox); } if (funbox !== "layoutfluid" || mode !== "script") { @@ -113,12 +108,12 @@ async function activateFunbox(funbox, mode) { settingsGroups.layout.updateButton(); } } - TestUI.updateModesNotice(paceCaret, activeFunbox); + TestUI.updateModesNotice(paceCaret); return true; } function toggleScriptFunbox(...params) { - if (activeFunbox === "tts") { + if (Funbox.active === "tts") { var msg = new SpeechSynthesisUtterance(); msg.text = params[0]; msg.lang = "en-US"; @@ -214,7 +209,7 @@ async function initWords() { if (Config.mode === "words" && Config.words === 0) { wordsBound = 100; } - if (activeFunbox === "plus_one") { + if (Funbox.active === "plus_one") { wordsBound = 2; } let wordset = language.words; @@ -243,7 +238,7 @@ async function initWords() { } } - if (activeFunbox === "rAnDoMcAsE") { + if (Funbox.active === "rAnDoMcAsE") { let randomcaseword = ""; for (let i = 0; i < randomWord.length; i++) { if (i % 2 != 0) { @@ -253,15 +248,15 @@ async function initWords() { } } randomWord = randomcaseword; - } else if (activeFunbox === "gibberish") { + } else if (Funbox.active === "gibberish") { randomWord = Misc.getGibberish(); - } else if (activeFunbox === "58008") { + } else if (Funbox.active === "58008") { setToggleSettings(false, true); randomWord = Misc.getNumbers(7); - } else if (activeFunbox === "specials") { + } else if (Funbox.active === "specials") { setToggleSettings(false, true); randomWord = Misc.getSpecials(); - } else if (activeFunbox === "ascii") { + } else if (Funbox.active === "ascii") { setToggleSettings(false, true); randomWord = Misc.getASCII(); } @@ -588,7 +583,7 @@ function punctuateWord(previousWord, currentWord, index, maxindex) { function addWord() { let bound = 100; - if (activeFunbox === "plus_one") bound = 1; + if (Funbox.active === "plus_one") bound = 1; if ( TestLogic.words.length - TestLogic.input.history.length > bound || (Config.mode === "words" && @@ -641,7 +636,7 @@ function addWord() { } } - if (activeFunbox === "rAnDoMcAsE") { + if (Funbox.active === "rAnDoMcAsE") { let randomcaseword = ""; for (let i = 0; i < randomWord.length; i++) { if (i % 2 != 0) { @@ -651,13 +646,13 @@ function addWord() { } } randomWord = randomcaseword; - } else if (activeFunbox === "gibberish") { + } else if (Funbox.active === "gibberish") { randomWord = Misc.getGibberish(); - } else if (activeFunbox === "58008") { + } else if (Funbox.active === "58008") { randomWord = Misc.getNumbers(7); - } else if (activeFunbox === "specials") { + } else if (Funbox.active === "specials") { randomWord = Misc.getSpecials(); - } else if (activeFunbox === "ascii") { + } else if (Funbox.active === "ascii") { randomWord = Misc.getASCII(); } @@ -768,9 +763,8 @@ function showWords() { (function (history) { var pushState = history.pushState; history.pushState = function (state) { - if (activeFunbox === "memory" && state !== "/") { - memoryFunboxInterval = clearInterval(memoryFunboxInterval); - memoryFunboxTimer = null; + if (Funbox.active === "memory" && state !== "/") { + Funbox.resetMemoryTimer(); } return pushState.apply(history, arguments); }; @@ -985,7 +979,7 @@ function countChars() { spaces++; } } - if (activeFunbox === "nospace") { + if (Funbox.active === "nospace") { spaces = 0; correctspaces = 0; } @@ -1452,7 +1446,7 @@ function showResult(difficultyFailed = false) { keyDuration: TestStats.keypressTimings.duration.array, consistency: consistency, keyConsistency: keyConsistency, - funbox: activeFunbox, + funbox: Funbox.active, bailedOut: TestLogic.bailout, chartData: chartData, customText: cdata, @@ -1799,8 +1793,8 @@ function showResult(difficultyFailed = false) { } if ( Config.mode != "custom" && - activeFunbox !== "gibberish" && - activeFunbox !== "58008" + Funbox.active !== "gibberish" && + Funbox.active !== "58008" ) { testType += "
" + lang; } @@ -1813,8 +1807,8 @@ function showResult(difficultyFailed = false) { if (Config.blindMode) { testType += "
blind"; } - if (activeFunbox !== "none") { - testType += "
" + activeFunbox.replace(/_/g, " "); + if (Funbox.active !== "none") { + testType += "
" + Funbox.active.replace(/_/g, " "); } if (Config.difficulty == "expert") { testType += "
expert"; @@ -1910,9 +1904,8 @@ function startTest() { TimerProgress.update(time); clearTimeout(timer); - if (activeFunbox === "memory") { - memoryFunboxInterval = clearInterval(memoryFunboxInterval); - memoryFunboxTimer = null; + if (Funbox.active === "memory") { + Funbox.resetMemoryTimer(); $("#wordsWrapper").addClass("hidden"); } @@ -1941,7 +1934,7 @@ function startTest() { let acc = Misc.roundTo2(TestStats.calculateAccuracy()); - if (activeFunbox === "layoutfluid" && Config.mode === "time") { + if (Funbox.active === "layoutfluid" && Config.mode === "time") { const layouts = ["qwerty", "dvorak", "colemak"]; let index = 0; index = Math.floor(time / (Config.time / 3)); @@ -2085,7 +2078,6 @@ function restartTest(withSameWordset = false, nosave = false, event) { // } } } - if (TestLogic.active) { TestStats.pushKeypressesToHistory(); let testSeconds = TestStats.calculateTestSeconds(performance.now()); @@ -2125,6 +2117,7 @@ function restartTest(withSameWordset = false, nosave = false, event) { if (paceCaret !== null) clearTimeout(paceCaret.timeout); $("#showWordHistoryButton").removeClass("loaded"); focusWords(); + Funbox.resetMemoryTimer(); TestUI.reset(); @@ -2184,23 +2177,8 @@ function restartTest(withSameWordset = false, nosave = false, event) { document.querySelector("#liveWpm").innerHTML = "0"; document.querySelector("#liveAcc").innerHTML = "100%"; - if (activeFunbox === "memory") { - memoryFunboxInterval = clearInterval(memoryFunboxInterval); - memoryFunboxTimer = Math.round(Math.pow(TestLogic.words.length, 1.2)); - memoryFunboxInterval = setInterval(() => { - memoryFunboxTimer -= 1; - Notifications.add( - memoryFunboxTimer == 0 ? "Times up" : memoryFunboxTimer, - 0, - 1 - ); - if (memoryFunboxTimer <= 0) { - memoryFunboxInterval = clearInterval(memoryFunboxInterval); - memoryFunboxTimer = null; - $("#wordsWrapper").addClass("hidden"); - } - }, 1000); - + if (Funbox.active === "memory") { + Funbox.startMemoryTimer(); if (Config.keymapMode === "next") { setKeymapMode("react"); } @@ -2217,15 +2195,15 @@ function restartTest(withSameWordset = false, nosave = false, event) { mode2 = TestLogic.randomQuote.id; } let fbtext = ""; - if (activeFunbox !== "none") { - fbtext = " " + activeFunbox; + if (Funbox.active !== "none") { + fbtext = " " + Funbox.active; } $(".pageTest #premidTestMode").text( `${Config.mode} ${mode2} ${Config.language}${fbtext}` ); $(".pageTest #premidSecondsLeft").text(Config.time); - if (activeFunbox === "layoutfluid") { + if (Funbox.active === "layoutfluid") { setLayout("qwerty"); settingsGroups.layout.updateButton(); setKeymapLayout("qwerty"); @@ -2263,7 +2241,7 @@ function restartTest(withSameWordset = false, nosave = false, event) { clearTimeout(timer); if ($("#commandLineWrapper").hasClass("hidden")) focusWords(); ChartController.result.update(); - TestUI.updateModesNotice(paceCaret, activeFunbox); + TestUI.updateModesNotice(paceCaret); pageTransition = false; // console.log(TestStats.incompleteSeconds); // console.log(TestStats.restartCount); @@ -2350,7 +2328,7 @@ function changePage(page) { function setMode(mode, nosave) { if (TestUI.testRestarting) return; - if (mode !== "words" && activeFunbox === "memory") { + if (mode !== "words" && Funbox.active === "memory") { Notifications.add("Memory funbox can only be used with words mode.", 0); return; } @@ -2378,12 +2356,12 @@ function setMode(mode, nosave) { $("#top .config .quoteLength").addClass("hidden"); } else if (Config.mode == "custom") { if ( - activeFunbox === "58008" || - activeFunbox === "gibberish" || - activeFunbox === "ascii" + Funbox.active === "58008" || + Funbox.active === "gibberish" || + Funbox.active === "ascii" ) { - activeFunbox = "none"; - TestUI.updateModesNotice(paceCaret, activeFunbox); + Funbox.setAcitve("none"); + TestUI.updateModesNotice(paceCaret); } $("#top .config .wordCount").addClass("hidden"); $("#top .config .time").addClass("hidden"); @@ -2446,7 +2424,7 @@ function liveWpmAndRaw() { if (TestLogic.words.getCurrent() == TestLogic.input.current) { correctWordChars += TestLogic.input.current.length; } - if (activeFunbox === "nospace") { + if (Funbox.active === "nospace") { spaces = 0; } chars += TestLogic.input.current.length; @@ -2957,7 +2935,7 @@ async function initPaceCaret() { timeout: null, }; - TestUI.updateModesNotice(paceCaret, activeFunbox); + TestUI.updateModesNotice(paceCaret); } function movePaceCaret(expectedStepEnd) { @@ -3589,11 +3567,7 @@ $(document).keydown(function (event) { handleBackspace(event); } - if ( - event.key === "Enter" && - activeFunbox.activeFunbox === "58008" && - wordsFocused - ) { + if (event.key === "Enter" && Funbox.active === "58008" && wordsFocused) { event.key = " "; } @@ -3753,7 +3727,7 @@ function handleBackspace(event) { } else { TestLogic.input.setCurrent(TestLogic.input.popHistory()); TestLogic.corrected.setCurrent(TestLogic.corrected.popHistory()); - if (activeFunbox === "nospace") { + if (Funbox.active === "nospace") { TestLogic.input.setCurrent( TestLogic.input.current.substring( 0, @@ -3823,7 +3797,7 @@ function handleSpace(event, isEnter) { if (!TestLogic.active) return; if (TestLogic.input.current === "") return; // let nextWord = wordsList[TestLogic.words.currentIndex + 1]; - // if ((isEnter && nextWord !== "\n") && (isEnter && activeFunbox !== "58008")) return; + // if ((isEnter && nextWord !== "\n") && (isEnter && Funbox.active !== "58008")) return; // if (!isEnter && nextWord === "\n") return; event.preventDefault(); @@ -3833,7 +3807,7 @@ function handleSpace(event, isEnter) { } let currentWord = TestLogic.words.getCurrent(); - if (activeFunbox === "layoutfluid" && Config.mode !== "time") { + if (Funbox.active === "layoutfluid" && Config.mode !== "time") { const layouts = ["qwerty", "dvorak", "colemak"]; let index = 0; let outof = TestLogic.words.length; @@ -3877,7 +3851,7 @@ function handleSpace(event, isEnter) { TestStats.pushKeypressWord(TestLogic.words.currentIndex); // currentKeypress.count++; // currentKeypress.words.push(TestLogic.words.currentIndex); - if (activeFunbox !== "nospace") { + if (Funbox.active !== "nospace") { Sound.playClick(Config.playSoundOnClick); } } else { @@ -3890,7 +3864,7 @@ function handleSpace(event, isEnter) { paceCaret.wordsStatus[TestLogic.words.currentIndex] = true; paceCaret.correction += currentWord.length + 1; } - if (activeFunbox !== "nospace") { + if (Funbox.active !== "nospace") { if (!Config.playSoundOnError || Config.blindMode) { Sound.playClick(Config.playSoundOnClick); } else { @@ -4325,7 +4299,7 @@ function handleAlpha(event) { //simulate space press in nospace funbox if ( - (activeFunbox === "nospace" && + (Funbox.active === "nospace" && TestLogic.input.current.length === TestLogic.words.getCurrent().length) || (event.key === "\n" && thisCharCorrect) ) { diff --git a/src/js/settings.js b/src/js/settings.js index fe5011380..0e150b676 100644 --- a/src/js/settings.js +++ b/src/js/settings.js @@ -664,9 +664,9 @@ function refreshTagsSettingsSection() { function setActiveFunboxButton() { $(`.pageSettings .section.funbox .button`).removeClass("active"); - $(`.pageSettings .section.funbox .button[funbox='${activeFunbox}']`).addClass( - "active" - ); + $( + `.pageSettings .section.funbox .button[funbox='${Funbox.active}']` + ).addClass("active"); } async function setActiveLanguageGroup(groupName, clicked = false) { @@ -757,7 +757,7 @@ function toggleTag(tagid, nosave = false) { } } }); - TestUI.updateModesNotice(paceCaret, activeFunbox); + TestUI.updateModesNotice(paceCaret); if (!nosave) saveActiveTagsToCookie(); } diff --git a/src/js/test/funbox.js b/src/js/test/funbox.js new file mode 100644 index 000000000..f6e9d6ab8 --- /dev/null +++ b/src/js/test/funbox.js @@ -0,0 +1,60 @@ +import * as TestLogic from "./test-logic"; +import * as Notifications from "./notification-center"; + +export let active = "none"; +let memoryTimer = null; +let memoryInterval = null; + +export function reset() { + active = "none"; + resetMemoryTimer(); +} + +export function startMemoryTimer() { + resetMemoryTimer(); + memoryTimer = Math.round(Math.pow(TestLogic.words.length, 1.2)); + updateMemoryTimer(memoryTimer); + showMemoryTimer(); + memoryInterval = setInterval(() => { + memoryTimer -= 1; + memoryTimer == 0 ? hideMemoryTimer() : updateMemoryTimer(memoryTimer); + if (memoryTimer <= 0) { + resetMemoryTimer(); + $("#wordsWrapper").addClass("hidden"); + } + }, 1000); +} + +export function resetMemoryTimer() { + memoryInterval = clearInterval(memoryInterval); + memoryTimer = null; + hideMemoryTimer(); +} + +export function setActive(val) { + active = val; +} + +function showMemoryTimer() { + $("#typingTest #memoryTimer").stop(true, true).animate( + { + opacity: 1, + }, + 125 + ); +} + +function hideMemoryTimer() { + $("#typingTest #memoryTimer").stop(true, true).animate( + { + opacity: 0, + }, + 125 + ); +} + +function updateMemoryTimer(sec) { + $("#typingTest #memoryTimer").text( + `Timer left to memorise all words: ${sec}s` + ); +} diff --git a/src/js/test/test-ui.js b/src/js/test/test-ui.js index e69ed45ba..37a7aa864 100644 --- a/src/js/test/test-ui.js +++ b/src/js/test/test-ui.js @@ -3,6 +3,7 @@ import * as ThemeColors from "./theme-colors"; import Config from "./config"; import * as DB from "./db"; import * as TestLogic from "./test-logic"; +import * as Funbox from "./funbox"; export let currentWordElementIndex = 0; export let resultVisible = false; @@ -214,7 +215,7 @@ export function lineJump(currentTop) { currentTestLine++; } -export function updateModesNotice(paceCaret, activeFunbox) { +export function updateModesNotice(paceCaret) { let anim = false; if ($(".pageTest #testModesNotice").text() === "") anim = true; @@ -293,9 +294,9 @@ export function updateModesNotice(paceCaret, activeFunbox) { ); } - if (activeFunbox !== "none") { + if (Funbox.active !== "none") { $(".pageTest #testModesNotice").append( - `
${activeFunbox.replace( + `
${Funbox.active.replace( /_/g, " " )}
` diff --git a/src/js/userconfig.js b/src/js/userconfig.js index 102e58c2e..bc745cebc 100644 --- a/src/js/userconfig.js +++ b/src/js/userconfig.js @@ -146,7 +146,7 @@ function setDifficulty(diff, nosave) { } ConfigSet.difficulty(diff); if (!nosave) restartTest(false, nosave); - TestUI.updateModesNotice(paceCaret, activeFunbox); + TestUI.updateModesNotice(paceCaret); if (!nosave) saveConfigToCookie(); } @@ -166,7 +166,7 @@ function toggleBlindMode() { blind = false; } ConfigSet.blindMode(blind); - TestUI.updateModesNotice(paceCaret, activeFunbox); + TestUI.updateModesNotice(paceCaret); saveConfigToCookie(); } @@ -175,7 +175,7 @@ function setBlindMode(blind, nosave) { blind = false; } ConfigSet.blindMode(blind); - TestUI.updateModesNotice(paceCaret, activeFunbox); + TestUI.updateModesNotice(paceCaret); if (!nosave) saveConfigToCookie(); } @@ -243,7 +243,7 @@ function setStopOnError(soe, nosave) { if (Config.stopOnError !== "off") { ConfigSet.confidenceMode("off"); } - TestUI.updateModesNotice(paceCaret, activeFunbox); + TestUI.updateModesNotice(paceCaret); if (!nosave) saveConfigToCookie(); } @@ -320,7 +320,7 @@ function setPaceCaret(val, nosave) { // val = "off"; // } ConfigSet.paceCaret(val); - TestUI.updateModesNotice(paceCaret, activeFunbox); + TestUI.updateModesNotice(paceCaret); initPaceCaret(nosave); if (!nosave) saveConfigToCookie(); } @@ -339,7 +339,7 @@ function setMinWpm(minwpm, nosave) { minwpm = "off"; } ConfigSet.minWpm(minwpm); - TestUI.updateModesNotice(paceCaret, activeFunbox); + TestUI.updateModesNotice(paceCaret); if (!nosave) saveConfigToCookie(); } @@ -357,7 +357,7 @@ function setMinAcc(min, nosave) { min = "off"; } ConfigSet.minAcc(min); - TestUI.updateModesNotice(paceCaret, activeFunbox); + TestUI.updateModesNotice(paceCaret); if (!nosave) saveConfigToCookie(); } @@ -646,10 +646,10 @@ function toggleLiveAcc() { function setHighlightMode(mode, nosave) { if ( mode === "word" && - (activeFunbox === "nospace" || - activeFunbox === "read_ahead" || - activeFunbox === "read_ahead_easy" || - activeFunbox === "read_ahead_hard") + (Funbox.active === "nospace" || + Funbox.active === "read_ahead" || + Funbox.active === "read_ahead_easy" || + Funbox.active === "read_ahead_hard") ) { Notifications.add("Can't use word highlight with this funbox", 0); return; @@ -1014,7 +1014,7 @@ function setConfidenceMode(cm, nosave) { ConfigSet.stopOnError("off"); } - TestUI.updateModesNotice(paceCaret, activeFunbox); + TestUI.updateModesNotice(paceCaret); if (!nosave) saveConfigToCookie(); } @@ -1146,7 +1146,7 @@ function setLayout(layout, nosave) { layout = "qwerty"; } ConfigSet.layout(layout); - TestUI.updateModesNotice(paceCaret, activeFunbox); + TestUI.updateModesNotice(paceCaret); if (Config.keymapLayout === "overrideSync") { Keymap.refreshKeys(Config.keymapLayout, setKeymapLayout); } @@ -1497,5 +1497,5 @@ function applyConfig(configObj) { $("#nitropay_ad_about").remove(); } } - TestUI.updateModesNotice(paceCaret, activeFunbox); + TestUI.updateModesNotice(paceCaret); } diff --git a/src/sass/style.scss b/src/sass/style.scss index 580416603..088e1958e 100644 --- a/src/sass/style.scss +++ b/src/sass/style.scss @@ -2107,6 +2107,23 @@ key { #middle { .pageTest { + #memoryTimer { + background: var(--main-color); + color: var(--bg-color); + padding: 1rem; + border-radius: var(--roundness); + /* width: min-content; */ + text-align: center; + width: max-content; + /* justify-self: center; */ + left: 50%; + position: absolute; + transform: translateX(-50%); + top: -6rem; + user-select: none; + pointer-events: none; + opacity: 0; + } .outOfFocusWarning { text-align: center; height: 0; diff --git a/static/index.html b/static/index.html index 7097d00be..be7da9eb4 100644 --- a/static/index.html +++ b/static/index.html @@ -1004,6 +1004,7 @@ Caps Lock
+
Time left to memorise all words: 0s