From e5a7c23c05c65bb54a5e3451bb59cda61b924921 Mon Sep 17 00:00:00 2001 From: Jack Date: Tue, 28 Jul 2020 15:57:45 +0100 Subject: [PATCH] added react mode, fixed settings and command line --- public/css/style.scss | 84 +++++++++++++++++++------- public/js/commandline.js | 68 ++++++++++++++-------- public/js/script.js | 123 ++++++++++++++++++++++++++++++++++----- public/js/settings.js | 73 +++++++++++------------ public/js/userconfig.js | 27 ++++++++- 5 files changed, 282 insertions(+), 93 deletions(-) diff --git a/public/css/style.scss b/public/css/style.scss index e7dbe343d..2a62441a7 100644 --- a/public/css/style.scss +++ b/public/css/style.scss @@ -669,7 +669,8 @@ a:hover { } &.outline { - @extend #caret, .block; + @extend #caret, + .block; background: transparent; border: 1px solid var(--caret-color); } @@ -707,6 +708,7 @@ a:hover { } @keyframes caretFlash { + 0%, 100% { opacity: 0; @@ -1325,9 +1327,9 @@ key { border-bottom: 2px solid var(--error-color); text-shadow: 1px 0px 0px var(--bg-color), // 2px 0px 0px var(--bg-color), - -1px 0px 0px var(--bg-color), + -1px 0px 0px var(--bg-color), // -2px 0px 0px var(--bg-color), - 0px 1px 0px var(--bg-color), + 0px 1px 0px var(--bg-color), 1px 1px 0px var(--bg-color), -1px 1px 0px var(--bg-color); } @@ -1417,7 +1419,7 @@ key { height: 0; display: none; - & ~ .customCheckbox { + &~.customCheckbox { width: 12px; height: 12px; background: rgba(0, 0, 0, 0.1); @@ -1428,7 +1430,7 @@ key { transition: 0.25s; } - &:checked ~ .customCheckbox { + &:checked~.customCheckbox { background: var(--main-color); } } @@ -1660,7 +1662,8 @@ key { &.themes, &.languages, - &.layouts { + &.layouts, + &.keymapLayout { grid-template-columns: 1fr; grid-template-areas: "title" @@ -2079,22 +2082,70 @@ key { justify-content: center; white-space: nowrap; height: 140px; + gap: .25rem; } .row { height: 2rem; + gap: .25rem; } .keymap-key { display: flex; background-color: var(--bg-color); color: var(--sub-color); - border-radius: 0.25rem; - border: 0.1rem solid var(--sub-color); + border-radius: var(--roundness); + border: 0.05rem solid; + border-color: var(--sub-color); text-align: center; justify-content: center; align-items: center; - margin: 0.1rem; + width: 2rem; + height: 2rem; + + .bump { + width: .75rem; + height: .05rem; + background: var(--sub-color); + position: absolute; + border-radius: var(--roundness); + margin-top: 1.5rem; + } + + &.active-key { + color: var(--bg-color); + background-color: var(--main-color); + border-color: var(--main-color); + + .bump { + background: var(--bg-color); + } + } + + &#KeySpace { + width: 100%; + } + + &.flash { + animation-name: flashKey; + animation-duration: 1s; + animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); + animation-fill-mode: forwards; + } +} + +@keyframes flashKey { + from { + color: var(--bg-color); + background-color: var(--main-color); + border-color: var(--main-color); + } + + to { + color: var(--sub-color); + background-color: var(--bg-color); + border-color: var(--sub-color); + } } .hidden-key { @@ -2114,22 +2165,15 @@ key { .r3 { display: grid; - grid-template-columns: 1.75fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1.75fr; + grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr; } .r4 { display: grid; - grid-template-columns: 2.25fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2.75fr; + grid-template-columns: 2.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2.5fr; } .r5 { display: grid; - grid-template-columns: 1.25fr 1.25fr 1.25fr 6.25fr 1.25fr 1.25fr 1.25fr 1.25fr; -} - -.active-key { - color: var(--bg-color); - background-color: var(--main-color); - border-radius: 0.25rem; - border: 0.1rem solid var(--main-color); -} + grid-template-columns: 4fr 7.5fr 4fr; +} \ No newline at end of file diff --git a/public/js/commandline.js b/public/js/commandline.js index c8f4a8bc8..e4eaa4361 100644 --- a/public/js/commandline.js +++ b/public/js/commandline.js @@ -73,29 +73,6 @@ let commands = { saveConfigToCookie(); }, }, - { - id: "toggleKeymap", - display: "Toggle keymap display", - exec: () => { - config.keymap = !config.keymap; - console.log(`keymap ${config.keymap}`); - if (config.keymap) { - showKeymap(); - } else { - hideKeymap(); - } - saveConfigToCookie(); - }, - }, - { - id: "changeKeymapLayout", - display: "Change keymap layout...", - subgroup: true, - exec: () => { - currentCommands.push(commandsKeymapLayouts); - showCommandLine(); - }, - }, { id: "toggleTimerBar", display: "Toggle timer display", @@ -246,6 +223,24 @@ let commands = { showCommandLine(); }, }, + { + id: "toggleKeymap", + display: "Change keymap mode...", + subgroup: true, + exec: () => { + currentCommands.push(commandsKeymapMode); + showCommandLine(); + }, + }, + { + id: "changeKeymapLayout", + display: "Change keymap layout...", + subgroup: true, + exec: () => { + currentCommands.push(commandsKeymapLayouts); + showCommandLine(); + }, + }, { id: "changeFontSize", display: "Change font size...", @@ -265,6 +260,33 @@ let commands = { ], }; +let commandsKeymapMode = { + title: "Change keymap mode...", + list: [ + { + id: "setKeymapModeOff", + display: "off", + exec: () => { + changeKeymapMode("off"); + }, + }, + { + id: "setKeymapModeNext", + display: "next", + exec: () => { + changeKeymapMode("next"); + }, + }, + { + id: "setKeymapModeReact", + display: "react", + exec: () => { + changeKeymapMode("react"); + }, + }, + ], +}; + let commandsDifficulty = { title: "Change difficulty...", list: [ diff --git a/public/js/script.js b/public/js/script.js index a37733227..89a29101c 100644 --- a/public/js/script.js +++ b/public/js/script.js @@ -522,22 +522,26 @@ function showWords() { .css("overflow", "hidden"); } - if ($(".active-key") != undefined) { - $(".active-key").removeClass("active-key"); - } + // if ($(".active-key") != undefined) { + // $(".active-key").removeClass("active-key"); + // } var currentKey = wordsList[currentWordIndex] .substring(currentInput.length, currentInput.length + 1) .toString() .toUpperCase(); - var highlightKey = `#Key${currentKey}`; + // var highlightKey = `#Key${currentKey}`; - $(highlightKey).addClass("active-key"); + // $(highlightKey).addClass("active-key"); + + if (config.keymapMode === "next") { + updateHighlightedKeymapKey(); + } updateActiveElement(); updateCaretPosition(); - if (config.keymap) { + if (config.keymap !== "off") { changeKeymapLayout(config.keymapLayout); } } @@ -560,7 +564,7 @@ function updateActiveElement() { // activeWordTop = $("#words .word.active").position().top; activeWordTop = document.querySelector("#words .active").offsetTop; - updateHighlightedKey(); + // updateHighlightedKeymapKey(); } catch (e) {} } @@ -830,7 +834,89 @@ function showKeymap() { $(".keymap").removeClass("hidden"); } -function updateHighlightedKey() { +function flashPressedKeymapKey(key, correct) { + // return; + // $(`#${key}`).css("animation", "none").removeClass("flash").addClass("flash"); + // setTimeout((f) => { + // $(`#${key}`).removeClass("flash"); + // }, 1000); + + // from { + // color: var(--bg-color); + // background-color: var(--main-color); + // border-color: var(--main-color); + // } + + // to { + // color: var(--sub-color); + // background-color: var(--bg-color); + // border-color: var(--sub-color); + // } + + //move this outside!!!!!!!!!!!!!!!!!!!! + let mainColor = getComputedStyle(document.body) + .getPropertyValue("--main-color") + .replace(" ", ""); + let subColor = getComputedStyle(document.body) + .getPropertyValue("--sub-color") + .replace(" ", ""); + let bgColor = getComputedStyle(document.body) + .getPropertyValue("--bg-color") + .replace(" ", ""); + let errorColor; + if (config.colorfulMode) { + errorColor = getComputedStyle(document.body) + .getPropertyValue("--colorful-error-color") + .replace(" ", ""); + } else { + errorColor = getComputedStyle(document.body) + .getPropertyValue("--error-color") + .replace(" ", ""); + } + + if (key === "Space") { + key = "KeySpace"; + } + + if (correct) { + $(`#${key}`) + .stop(true, true) + .css({ + color: bgColor, + backgroundColor: mainColor, + borderColor: mainColor, + }) + .animate( + { + color: subColor, + backgroundColor: bgColor, + borderColor: subColor, + }, + 500, + "easeOutExpo" + ); + } else { + $(`#${key}`) + .stop(true, true) + .css({ + color: bgColor, + backgroundColor: errorColor, + borderColor: errorColor, + }) + .animate( + { + color: subColor, + backgroundColor: bgColor, + borderColor: subColor, + }, + 500, + "easeOutExpo" + ); + } +} + +function updateHighlightedKeymapKey() { + // return; if ($(".active-key") != undefined) { $(".active-key").removeClass("active-key"); } @@ -1599,7 +1685,6 @@ function restartTest(withSameWordset = false) { testActive = false; hideLiveWpm(); hideTimer(); - hideKeymap(); keypressPerSecond = []; currentKeypressCount = 0; errorsPerSecond = []; @@ -1685,7 +1770,7 @@ function restartTest(withSameWordset = false) { currentInput = ""; showWords(); } - if (config.keymap) { + if (config.keymapMode !== "off") { showKeymap(); } $("#result").addClass("hidden"); @@ -2607,7 +2692,11 @@ $(document).keypress(function (event) { } // console.timeEnd("offcheck2"); - updateHighlightedKey(); + if (config.keymapMode === "react") { + flashPressedKeymapKey(event.code, thisCharCorrect); + } else if (config.keymapMode === "next") { + updateHighlightedKeymapKey(); + } updateCaretPosition(); }); @@ -2689,7 +2778,11 @@ $(document).keydown((event) => { compareInput(null, currentInput, !config.blindMode); } // currentKeypressCount++; - updateHighlightedKey(); + if (config.keymapMode === "react") { + flashPressedKeymapKey(event.code, true); + } else if (config.keymapMode === "next") { + updateHighlightedKeymapKey(); + } updateCaretPosition(); } //space @@ -2749,7 +2842,6 @@ $(document).keydown((event) => { inputHistory.push(currentInput); currentInput = ""; currentWordIndex++; - updateHighlightedKey(); updateActiveElement(); updateCaretPosition(); currentKeypressCount++; @@ -2778,6 +2870,11 @@ $(document).keydown((event) => { updateCaretPosition(); currentKeypressCount++; } + if (config.keymapMode === "react") { + flashPressedKeymapKey(event.code, true); + } else if (config.keymapMode === "next") { + updateHighlightedKeymapKey(); + } if ( config.mode === "words" || config.mode === "custom" || diff --git a/public/js/settings.js b/public/js/settings.js index 7002d07fb..6338c83fe 100644 --- a/public/js/settings.js +++ b/public/js/settings.js @@ -34,7 +34,7 @@ function updateSettingsPage() { ); }); - let keymapEl = $(".pageSettings .section.keymap-layouts .buttons").empty(); + let keymapEl = $(".pageSettings .section.keymapLayout .buttons").empty(); Object.keys(layouts).forEach((layout) => { if (layout.toString() != "default") { keymapEl.append( @@ -65,10 +65,9 @@ function updateSettingsPage() { setSettingsButton("stopOnError", config.stopOnError); setSettingsButton("showAllLines", config.showAllLines); + setActiveLayoutButton(); setActiveThemeButton(); setActiveLanguageButton(); - setActiveLayoutButton(); - setActiveKeymapLayoutButton(); setActiveFontSizeButton(); setActiveDifficultyButton(); setActiveCaretStyleButton(); @@ -78,6 +77,9 @@ function updateSettingsPage() { setActiveThemeTab(); setCustomThemeInputs(); + setActiveKeymapModeButton(); + setActiveKeymapLayoutButton(); + updateDiscordSettingsSection(); if (config.showKeyTips) { @@ -215,6 +217,25 @@ function setCustomThemeInputs() { }); } +function setActiveKeymapModeButton() { + $(`.pageSettings .section.keymapMode .button`).removeClass("active"); + $( + `.pageSettings .section.keymapMode .button[keymapMode="${config.keymapMode}"]` + ).addClass("active"); + if (config.keymapMode === "off") { + $(".pageSettings .section.keymapLayout").addClass("hidden"); + } else { + $(".pageSettings .section.keymapLayout").removeClass("hidden"); + } +} + +function setActiveKeymapLayoutButton() { + $(`.pageSettings .section.keymapLayout .layout`).removeClass("active"); + $( + `.pageSettings .section.keymapLayout .layout[layout=${config.keymapLayout}]` + ).addClass("active"); +} + function setActiveLayoutButton() { $(`.pageSettings .section.layouts .layout`).removeClass("active"); $(`.pageSettings .section.layouts .layout[layout=${config.layout}]`).addClass( @@ -222,13 +243,6 @@ function setActiveLayoutButton() { ); } -function setActiveKeymapLayoutButton() { - $(`.pageSettings .section.keymap-layouts .layout`).removeClass("active"); - $( - `.pageSettings .section.keymap-layouts .layout[layout=${config.keymapLayout}]` - ).addClass("active"); -} - function setActiveFontSizeButton() { $(`.pageSettings .section.fontSize .buttons .button`).removeClass("active"); $( @@ -469,35 +483,22 @@ $(".pageSettings .section.timerBar .buttons .button.off").click((e) => { }); //keymap -$(".pageSettings .section.keymap-toggle .buttons .button.on").click((e) => { - config.keymap = true; - saveConfigToCookie(); - // showNotification('Keymap on', 1000); - setSettingsButton("keymap-toggle", config.keymap); - $(".keymap-layouts").removeClass("hidden"); +$(document).on("click", ".pageSettings .section.keymapMode .button", (e) => { + let mode = $(e.currentTarget).attr("keymapMode"); + changeKeymapMode(mode); + restartTest(); + setActiveKeymapModeButton(); + setSettingsButton("liveWpm", config.showLiveWpm); }); -$(".pageSettings .section.keymap-toggle .buttons .button.off").click((e) => { - config.keymap = false; - saveConfigToCookie(); - // showNotification('Keymap off', 1000); - setSettingsButton("keymap-toggle", config.keymap); - $(".keymap-layouts").addClass("hidden"); -}); - -if (config.keymap) $(".keymap-layouts").removeClass("hidden"); //keymap layouts -$(document).on( - "click", - ".pageSettings .section.keymap-layouts .layout", - (e) => { - let layout = $(e.currentTarget).attr("layout"); - changeKeymapLayout(layout); - // showNotification('Keymap Layout changed', 1000); - restartTest(); - setActiveKeymapLayoutButton(); - } -); +$(document).on("click", ".pageSettings .section.keymapLayout .layout", (e) => { + let layout = $(e.currentTarget).attr("layout"); + changeKeymapLayout(layout); + // showNotification('Keymap Layout changed', 1000); + restartTest(); + setActiveKeymapLayoutButton(); +}); //freedom mode $(".pageSettings .section.freedomMode .buttons .button.on").click((e) => { diff --git a/public/js/userconfig.js b/public/js/userconfig.js index 5f0d28e40..8ed932d5f 100644 --- a/public/js/userconfig.js +++ b/public/js/userconfig.js @@ -40,7 +40,7 @@ let defaultConfig = { timerOpacity: "0.25", stopOnError: false, showAllLines: false, - keymap: false, + keymapMode: "off", keymapLayout: "qwerty", }; @@ -138,6 +138,8 @@ function applyConfig(configObj) { setTimerStyle(configObj.timerStyle, true); setTimerColor(configObj.timerColor, true); setTimerOpacity(configObj.timerOpacity, true); + changeKeymapMode(configObj.keymapMode, true); + changeKeymapLayout(configObj.keymapLayout, true); if ( configObj.resultFilters == null || configObj.resultFilters == undefined @@ -539,6 +541,7 @@ function previewTheme(name) { function setTheme(name, nosave) { config.theme = name; + $(".keymap-key").attr("style", ""); $("#currentTheme").attr("href", `themes/${name}.css`); setTimeout(() => { updateFavicon(32, 14); @@ -671,6 +674,28 @@ function changeLayout(layout, nosave) { if (!nosave) saveConfigToCookie(); } +function changeKeymapMode(mode, nosave) { + if (mode == null || mode == undefined) { + mode = "off"; + } + if (mode === "off") { + hideKeymap(); + } else { + showKeymap(); + } + if (mode === "react") { + $(".active-key").removeClass("active-key"); + } + if (mode === "next") { + $(".keymap-key").attr("style", ""); + } + if (config.showLiveWpm) { + config.showLiveWpm = false; + } + config.keymapMode = mode; + if (!nosave) saveConfigToCookie(); +} + function changeKeymapLayout(layout, nosave) { if (layout == null || layout == undefined) { layout = "qwerty";