From e3fabe57dc81496967fe1c8d73bba6263f1e9024 Mon Sep 17 00:00:00 2001 From: Jack Date: Tue, 4 Aug 2020 00:46:04 +0100 Subject: [PATCH] refactored settings page --- public/css/style.scss | 4 +- public/index.html | 26 +- public/js/commandline.js | 4 +- public/js/script.js | 4 +- public/js/settings.js | 741 ++++++++++----------------------------- public/js/userconfig.js | 66 ++-- 6 files changed, 239 insertions(+), 606 deletions(-) diff --git a/public/css/style.scss b/public/css/style.scss index 4eec6b48c..c610dd3db 100644 --- a/public/css/style.scss +++ b/public/css/style.scss @@ -1844,8 +1844,8 @@ key { } &.themes, - &.languages, - &.layouts, + &.language, + &.layout, &.keymapLayout, &.fontFamily, &.funbox { diff --git a/public/index.html b/public/index.html index 45c3f45d9..9ee5c5c65 100644 --- a/public/index.html +++ b/public/index.html @@ -1123,12 +1123,12 @@ -
+

layout override

-
+

language

@@ -1158,10 +1158,10 @@

caret style

Change the style of the caret during the test.
-
|
-
▮
-
▯
-
_
+
|
+
▮
+
▯
+
_
@@ -1356,7 +1356,7 @@ hide elements
-
+

live wpm

Displays a live WPM speed during the test. Updates once every second.
@@ -1364,7 +1364,7 @@
show
-
+

timer/progress

Displays a live timer for timed tests and progress for words/custom tests.
@@ -1372,7 +1372,7 @@
show
-
+

key tips

Shows the keybind tips at the bottom of the page.
@@ -1380,14 +1380,6 @@
show
-
-

discord dot

-
Shows the notification dot on the Discord icon.
-
-
hide
-
show
-
-
diff --git a/public/js/commandline.js b/public/js/commandline.js index 674a59384..99578ec7a 100644 --- a/public/js/commandline.js +++ b/public/js/commandline.js @@ -78,7 +78,7 @@ let commands = { id: "toggleShowLiveWpm", display: "Toggle live wpm display", exec: () => { - config.showLiveWpm = !config.showLiveWpm; + toggleShowLiveWpm(); saveConfigToCookie(); }, }, @@ -86,7 +86,7 @@ let commands = { id: "toggleTimerBar", display: "Toggle timer display", exec: () => { - config.showTimerBar = !config.showTimerBar; + toggleShowTimerProgress(); saveConfigToCookie(); }, }, diff --git a/public/js/script.js b/public/js/script.js index 56207eeac..2c2ffd2b2 100644 --- a/public/js/script.js +++ b/public/js/script.js @@ -832,7 +832,7 @@ function highlightBadWord(index, showError) { } function showTimer() { - let op = config.showTimerBar ? config.timerOpacity : 0; + let op = config.showTimerProgress ? config.timerOpacity : 0; if (config.timerStyle === "bar") { // let op = 0.25; // if ( @@ -933,7 +933,7 @@ function restartTimer() { } function updateTimer() { - if (!config.showTimerBar) return; + if (!config.showTimerProgress) return; if (config.mode === "time") { if (config.timerStyle === "bar") { let percent = 100 - ((time + 1) / config.time) * 100; diff --git a/public/js/settings.js b/public/js/settings.js index 8c964c7b6..c67c046a0 100644 --- a/public/js/settings.js +++ b/public/js/settings.js @@ -1,3 +1,166 @@ +class SettingsGroup { + constructor( + configName, + toggleFunction, + setCallback = null, + updateCallback = null + ) { + this.configName = configName; + this.configValue = config[configName]; + if (this.configValue === true || this.configValue === false) { + this.onOff = true; + } else { + this.onOff = false; + } + this.toggleFunction = toggleFunction; + this.setCallback = setCallback; + this.updateCallback = updateCallback; + + this.updateButton(); + + $(document).on( + "click", + `.pageSettings .section.${this.configName} .button`, + (e) => { + if (this.onOff) { + if ($(e.currentTarget).hasClass("on")) { + this.toggleFunction(true); + } else { + this.toggleFunction(false); + } + this.updateButton(); + if (this.setCallback !== null) this.setCallback(); + } else { + let value = $(e.currentTarget).attr(configName); + let params = $(e.currentTarget).attr("params"); + if (params === undefined) { + this.toggleFunction(value); + } else { + this.toggleFunction(value, ...params); + } + this.updateButton(); + if (this.setCallback !== null) this.setCallback(); + } + } + ); + } + + updateButton() { + this.configValue = config[this.configName]; + $(`.pageSettings .section.${this.configName} .button`).removeClass( + "active" + ); + if (this.onOff) { + let onoffstring; + if (this.configValue) { + onoffstring = "on"; + } else { + onoffstring = "off"; + } + $( + `.pageSettings .section.${this.configName} .buttons .button.${onoffstring}` + ).addClass("active"); + } else { + $( + `.pageSettings .section.${this.configName} .button[${this.configName}='${this.configValue}']` + ).addClass("active"); + } + if (this.updateCallback !== null) this.updateCallback(); + } +} + +let settingsGroups = {}; + +settingsGroups.smoothCaret = new SettingsGroup("smoothCaret", setSmoothCaret); +settingsGroups.difficulty = new SettingsGroup("difficulty", setDifficulty); +settingsGroups.quickTab = new SettingsGroup("quickTab", setQuickTabMode); +settingsGroups.showLiveWpm = new SettingsGroup( + "showLiveWpm", + setShowLiveWpm, + () => { + settingsGroups.keymapMode.updateButton(); + } +); +settingsGroups.showTimerProgress = new SettingsGroup( + "showTimerProgress", + setShowTimerProgress +); +settingsGroups.keymapMode = new SettingsGroup( + "keymapMode", + changeKeymapMode, + () => { + settingsGroups.showLiveWpm.updateButton(); + }, + () => { + if (config.keymapMode === "off") { + $(".pageSettings .section.keymapLayout").addClass("hidden"); + } else { + $(".pageSettings .section.keymapLayout").removeClass("hidden"); + } + } +); +settingsGroups.keymapLayout = new SettingsGroup( + "keymapLayout", + changeKeymapLayout +); +settingsGroups.quickTab = new SettingsGroup( + "showKeyTips", + setKeyTips, + null, + () => { + if (config.showKeyTips) { + $(".pageSettings .tip").removeClass("hidden"); + } else { + $(".pageSettings .tip").addClass("hidden"); + } + } +); +settingsGroups.freedomMode = new SettingsGroup( + "freedomMode", + setFreedomMode, + () => { + settingsGroups.confidenceMode.updateButton(); + } +); +settingsGroups.confidenceMode = new SettingsGroup( + "confidenceMode", + setConfidenceMode, + () => { + settingsGroups.freedomMode.updateButton(); + } +); +settingsGroups.blindMode = new SettingsGroup("blindMode", setBlindMode); +settingsGroups.quickEnd = new SettingsGroup("quickEnd", setQuickEnd); +settingsGroups.flipTestColors = new SettingsGroup( + "flipTestColors", + setFlipTestColors +); +settingsGroups.colorfulMode = new SettingsGroup( + "colorfulMode", + setColorfulMode +); +settingsGroups.randomTheme = new SettingsGroup("randomTheme", setRandomTheme); +settingsGroups.stopOnError = new SettingsGroup("stopOnError", setStopOnError); +settingsGroups.showAllLines = new SettingsGroup( + "showAllLines", + setShowAllLines +); +settingsGroups.smoothLineScroll = new SettingsGroup( + "smoothLineScroll", + setSmoothLineScroll +); +settingsGroups.layout = new SettingsGroup("layout", changeLayout); +settingsGroups.language = new SettingsGroup("language", changeLanguage); +settingsGroups.fontSize = new SettingsGroup("fontSize", changeFontSize); +settingsGroups.caretStyle = new SettingsGroup("caretStyle", setCaretStyle); +settingsGroups.timerStyle = new SettingsGroup("timerStyle", setTimerStyle); +settingsGroups.timerOpacity = new SettingsGroup( + "timerOpacity", + setTimerOpacity +); +settingsGroups.timerColor = new SettingsGroup("timerColor", setTimerColor); +settingsGroups.fontFamily = new SettingsGroup("fontFamily", setFontFamily); + function updateSettingsPage() { let themesEl = $(".pageSettings .section.themes .buttons").empty(); themesList.forEach((theme) => { @@ -8,7 +171,7 @@ function updateSettingsPage() { ); }); - let langEl = $(".pageSettings .section.languages .buttons").empty(); + let langEl = $(".pageSettings .section.language .buttons").empty(); Object.keys(words).forEach((language) => { if (language === "english_10k") return; langEl.append( @@ -24,7 +187,7 @@ function updateSettingsPage() { } }); - let layoutEl = $(".pageSettings .section.layouts .buttons").empty(); + let layoutEl = $(".pageSettings .section.layout .buttons").empty(); Object.keys(layouts).forEach((layout) => { layoutEl.append( `
${layout.replace( @@ -79,49 +242,16 @@ function updateSettingsPage() { ); }); + Object.keys(settingsGroups).forEach((group) => { + settingsGroups[group].updateButton(); + }); + refreshTagsSettingsSection(); - - setSettingsButton("smoothCaret", config.smoothCaret); - setSettingsButton("quickTab", config.quickTab); - setSettingsButton("liveWpm", config.showLiveWpm); - setSettingsButton("timerBar", config.showTimerBar); - setSettingsButton("keymap-toggle", config.keymap); - setSettingsButton("keyTips", config.showKeyTips); - setSettingsButton("freedomMode", config.freedomMode); - setSettingsButton("blindMode", config.blindMode); - setSettingsButton("quickEnd", config.quickEnd); - setSettingsButton("flipTestColors", config.flipTestColors); - setSettingsButton("discordDot", config.showDiscordDot); - setSettingsButton("colorfulMode", config.colorfulMode); - setSettingsButton("randomTheme", config.randomTheme); - setSettingsButton("stopOnError", config.stopOnError); - setSettingsButton("showAllLines", config.showAllLines); - setSettingsButton("smoothLineScroll", config.smoothLineScroll); - setActiveFunboxButton(); - setActiveLayoutButton(); setActiveThemeButton(); - setActiveLanguageButton(); - setActiveFontSizeButton(); - setActiveDifficultyButton(); - setActiveCaretStyleButton(); - setActiveTimerStyleButton(); - setActiveTimerColorButton(); - setActiveTimerOpacityButton(); setActiveThemeTab(); setCustomThemeInputs(); - setActiveConfidenceModeButton(); - setActiveFontFamilyButton(); - setActiveKeymapModeButton(); - setActiveKeymapLayoutButton(); - updateDiscordSettingsSection(); - - if (config.showKeyTips) { - $(".pageSettings .tip").removeClass("hidden"); - } else { - $(".pageSettings .tip").addClass("hidden"); - } } function showCustomThemeShare() { @@ -197,29 +327,29 @@ function refreshTagsSettingsSection() { dbSnapshot.tags.forEach((tag) => { if (tag.active === true) { tagsEl.append(` - -
-
- -
-
${tag.name}
-
-
-
- + +
+
+ +
+
${tag.name}
+
+
+
+ `); } else { tagsEl.append(` - -
-
- -
-
${tag.name}
-
-
-
- + +
+
+ +
+
${tag.name}
+
+
+
+ `); } }); @@ -259,136 +389,7 @@ 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( - "active" - ); -} - -function setActiveFontSizeButton() { - $(`.pageSettings .section.fontSize .buttons .button`).removeClass("active"); - $( - `.pageSettings .section.fontSize .buttons .button[fontsize=` + - config.fontSize + - `]` - ).addClass("active"); -} - -function setActiveDifficultyButton() { - $(`.pageSettings .section.difficulty .buttons .button`).removeClass("active"); - $( - `.pageSettings .section.difficulty .buttons .button[difficulty=` + - config.difficulty + - `]` - ).addClass("active"); -} - -function setActiveLanguageButton() { - $(`.pageSettings .section.languages .language`).removeClass("active"); - $( - `.pageSettings .section.languages .language[language=${config.language}]` - ).addClass("active"); -} - -function setActiveCaretStyleButton() { - $(`.pageSettings .section.caretStyle .buttons .button`).removeClass("active"); - $( - `.pageSettings .section.caretStyle .buttons .button[caret=` + - config.caretStyle + - `]` - ).addClass("active"); -} - -function setActiveTimerStyleButton() { - $(`.pageSettings .section.timerStyle .buttons .button`).removeClass("active"); - $( - `.pageSettings .section.timerStyle .buttons .button[timer=` + - config.timerStyle + - `]` - ).addClass("active"); -} - -function setActiveTimerColorButton() { - $(`.pageSettings .section.timerColor .buttons .button`).removeClass("active"); - $( - `.pageSettings .section.timerColor .buttons .button[color=` + - config.timerColor + - `]` - ).addClass("active"); -} - -function setActiveTimerOpacityButton() { - $(`.pageSettings .section.timerOpacity .buttons .button`).removeClass( - "active" - ); - $( - `.pageSettings .section.timerOpacity .buttons .button[opacity="` + - config.timerOpacity + - `"]` - ).addClass("active"); -} - -function setSettingsButton(buttonSection, tf) { - if (tf) { - $( - ".pageSettings .section." + buttonSection + " .buttons .button.on" - ).addClass("active"); - $( - ".pageSettings .section." + buttonSection + " .buttons .button.off" - ).removeClass("active"); - } else { - $( - ".pageSettings .section." + buttonSection + " .buttons .button.off" - ).addClass("active"); - $( - ".pageSettings .section." + buttonSection + " .buttons .button.on" - ).removeClass("active"); - } -} - function showActiveTags() { - // activeTags = []; - // tagsString = ""; - // $.each($('.pageSettings .section.tags .tagsList .tag'), (index, tag) => { - // if($(tag).children('.active').attr('active') === 'true'){ - // activeTags.push($(tag).attr('id')); - // tagsString += $(tag).children('.title').text() + ', '; - // } - // }) - // updateTestModesNotice(); - - // if($(target).attr('active') === 'true'){ - // $(target).attr('active','false'); - // $(target).html('') - // }else{ - // $(target).attr('active','true'); - // $(target).html('') - // } - - // $.each($('.pageSettings .section.tags .tagsList .tag'), (index, tag) => { - // let tagid = $(tag).attr('') - // }) - dbSnapshot.tags.forEach((tag) => { if (tag.active === true) { $( @@ -472,348 +473,12 @@ function updateDiscordSettingsSection() { } } -function setActiveConfidenceModeButton() { - let cm = config.confidenceMode; - $(".pageSettings .section.confidenceMode .buttons .button").removeClass( - "active" - ); - $( - `.pageSettings .section.confidenceMode .buttons .button[confidenceMode='${cm}']` - ).addClass("active"); - if (cm !== "off") { - config.freedomMode = false; - setSettingsButton("freedomMode", config.freedomMode); - } -} - -function setActiveFontFamilyButton() { - let font = config.fontFamily; - $(".pageSettings .section.fontFamily .buttons .button").removeClass("active"); - $( - `.pageSettings .section.fontFamily .buttons .button[fontFamily='${font}']` - ).addClass("active"); -} - -//smooth caret -$(".pageSettings .section.smoothCaret .buttons .button.on").click((e) => { - setSmoothCaret(true); - // showNotification('Smooth caret on', 1000); - setSettingsButton("smoothCaret", config.smoothCaret); -}); -$(".pageSettings .section.smoothCaret .buttons .button.off").click((e) => { - setSmoothCaret(false); - // showNotification('Smooth caret off', 1000); - setSettingsButton("smoothCaret", config.smoothCaret); -}); - -//smooth line -$(".pageSettings .section.smoothLineScroll .buttons .button.on").click((e) => { - setSmoothLineScroll(true); - // showNotification('Smooth caret on', 1000); - setSettingsButton("smoothLineScroll", config.smoothLineScroll); -}); -$(".pageSettings .section.smoothLineScroll .buttons .button.off").click((e) => { - setSmoothLineScroll(false); - // showNotification('Smooth caret off', 1000); - setSettingsButton("smoothLineScroll", config.smoothLineScroll); -}); - -//quick tab -$(".pageSettings .section.quickTab .buttons .button.on").click((e) => { - setQuickTabMode(true); - // showNotification('Quick tab on', 1000); - setSettingsButton("quickTab", config.quickTab); -}); -$(".pageSettings .section.quickTab .buttons .button.off").click((e) => { - setQuickTabMode(false); - // showNotification('Quick tab off', 1000); - setSettingsButton("quickTab", config.quickTab); -}); - -//live wpm -$(".pageSettings .section.liveWpm .buttons .button.on").click((e) => { - config.showLiveWpm = true; - saveConfigToCookie(); - // showNotification('Live WPM on', 1000); - setSettingsButton("liveWpm", config.showLiveWpm); -}); -$(".pageSettings .section.liveWpm .buttons .button.off").click((e) => { - config.showLiveWpm = false; - saveConfigToCookie(); - // showNotification('Live WPM off', 1000); - setSettingsButton("liveWpm", config.showLiveWpm); -}); - -//timer bar -$(".pageSettings .section.timerBar .buttons .button.on").click((e) => { - config.showTimerBar = true; - saveConfigToCookie(); - // showNotification('Timer bar on', 1000); - setSettingsButton("timerBar", config.showTimerBar); -}); -$(".pageSettings .section.timerBar .buttons .button.off").click((e) => { - config.showTimerBar = false; - saveConfigToCookie(); - // showNotification('Timer bar off', 1000); - setSettingsButton("timerBar", config.showTimerBar); -}); - -//keymap -$(document).on("click", ".pageSettings .section.keymapMode .button", (e) => { - let mode = $(e.currentTarget).attr("keymapMode"); - changeKeymapMode(mode); - restartTest(); - setActiveKeymapModeButton(); - setSettingsButton("liveWpm", config.showLiveWpm); -}); - -//keymap layouts -$(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) => { - setFreedomMode(true); - saveConfigToCookie(); - // showNotification('Freedom mode on', 1000); - setSettingsButton("freedomMode", config.freedomMode); - config.confidenceMode = "off"; - setActiveConfidenceModeButton(); -}); -$(".pageSettings .section.freedomMode .buttons .button.off").click((e) => { - setFreedomMode(false); - saveConfigToCookie(); - // showNotification('Freedom mode off', 1000); - setSettingsButton("freedomMode", config.freedomMode); -}); - -// //max confidence -// $(".pageSettings .section.maxConfidence .buttons .button.on").click((e) => { -// setMaxConfidence(true); -// saveConfigToCookie(); -// // showNotification('Max confidence on', 1000); -// setSettingsButton("freedomMode", config.freedomMode); -// setSettingsButton("maxConfidence", config.maxConfidence); -// }); -// $(".pageSettings .section.maxConfidence .buttons .button.off").click((e) => { -// setMaxConfidence(false); -// saveConfigToCookie(); -// // showNotification('Max confidence off', 1000); -// setSettingsButton("freedomMode", config.freedomMode); -// setSettingsButton("maxConfidence", config.maxConfidence); -// }); - -//confidence -$(document).on( - "click", - ".pageSettings .section.confidenceMode .button", - (e) => { - let confidence = $(e.currentTarget).attr("confidenceMode"); - setConfidenceMode(confidence); - setActiveConfidenceModeButton(); - } -); - -//keytips -$(".pageSettings .section.keyTips .buttons .button.on").click((e) => { - setKeyTips(true); - // showNotification('Key tips on', 1000); - setSettingsButton("keyTips", config.showKeyTips); - if (config.showKeyTips) { - $(".pageSettings .tip").removeClass("hidden"); - } else { - $(".pageSettings .tip").addClass("hidden"); - } -}); -$(".pageSettings .section.keyTips .buttons .button.off").click((e) => { - setKeyTips(false); - // showNotification('Key tips off', 1000); - setSettingsButton("keyTips", config.showKeyTips); - if (config.showKeyTips) { - $(".pageSettings .tip").removeClass("hidden"); - } else { - $(".pageSettings .tip").addClass("hidden"); - } -}); - -//keytips -$(".pageSettings .section.discordDot .buttons .button.on").click((e) => { - setDiscordDot(true); - setSettingsButton("discordDot", config.showDiscordDot); -}); -$(".pageSettings .section.discordDot .buttons .button.off").click((e) => { - setDiscordDot(false); - setSettingsButton("discordDot", config.showDiscordDot); -}); - -//themes -// $(document).on("mouseover",".pageSettings .section.themes .theme", (e) => { -// let theme = $(e.currentTarget).attr('theme'); -// previewTheme(theme); -// }) - $(document).on("click", ".pageSettings .section.themes .theme", (e) => { let theme = $(e.currentTarget).attr("theme"); setTheme(theme); setActiveThemeButton(); }); -// $(document).on("mouseleave",".pageSettings .section.themes", (e) => { -// setTheme(config.theme); -// }) - -//languages -$(document).on("click", ".pageSettings .section.languages .language", (e) => { - let language = $(e.currentTarget).attr("language"); - changeLanguage(language); - // showNotification('Language changed', 1000); - restartTest(); - setActiveLanguageButton(); -}); - -//layouts -$(document).on("click", ".pageSettings .section.layouts .layout", (e) => { - console.log("clicked"); - let layout = $(e.currentTarget).attr("layout"); - changeLayout(layout); - // showNotification('Layout changed', 1000); - restartTest(); - setActiveLayoutButton(); -}); - -//fontsize -$(document).on("click", ".pageSettings .section.fontSize .button", (e) => { - let fontSize = $(e.currentTarget).attr("fontsize"); - changeFontSize(fontSize); - // showNotification('Font size changed', 1000); - setActiveFontSizeButton(); -}); - -//difficulty -$(document).on("click", ".pageSettings .section.difficulty .button", (e) => { - let difficulty = $(e.currentTarget).attr("difficulty"); - setDifficulty(difficulty); - // showNotification('Difficulty changed', 1000); - setActiveDifficultyButton(); -}); - -//caret style -$(document).on("click", ".pageSettings .section.caretStyle .button", (e) => { - let caretStyle = $(e.currentTarget).attr("caret"); - setCaretStyle(caretStyle); - // showNotification('Caret style updated', 1000); - setActiveCaretStyleButton(); -}); - -//timer style -$(document).on("click", ".pageSettings .section.timerStyle .button", (e) => { - let timerStyle = $(e.currentTarget).attr("timer"); - setTimerStyle(timerStyle); - // showNotification('Timer style updated', 1000); - setActiveTimerStyleButton(); -}); - -//timer color -$(document).on("click", ".pageSettings .section.timerColor .button", (e) => { - let color = $(e.currentTarget).attr("color"); - setTimerColor(color); - // showNotification('Timer style updated', 1000); - setActiveTimerColorButton(); -}); - -//timer opacity -$(document).on("click", ".pageSettings .section.timerOpacity .button", (e) => { - let opacity = $(e.currentTarget).attr("opacity"); - setTimerOpacity(opacity); - // showNotification('Timer style updated', 1000); - setActiveTimerOpacityButton(); -}); - -//blind mode -$(".pageSettings .section.blindMode .buttons .button.on").click((e) => { - setBlindMode(true); - // showNotification('Blind mode on', 1000); - setSettingsButton("blindMode", config.blindMode); -}); -$(".pageSettings .section.blindMode .buttons .button.off").click((e) => { - setBlindMode(false); - // showNotification('Blind mode off', 1000); - setSettingsButton("blindMode", config.blindMode); -}); - -//blind mode -$(".pageSettings .section.quickEnd .buttons .button.on").click((e) => { - setQuickEnd(true); - // showNotification('Quick end on', 1000); - setSettingsButton("quickEnd", config.quickEnd); -}); -$(".pageSettings .section.quickEnd .buttons .button.off").click((e) => { - setQuickEnd(false); - // showNotification('Quick end off', 1000); - setSettingsButton("quickEnd", config.quickEnd); -}); - -//flip test -$(".pageSettings .section.flipTestColors .buttons .button.on").click((e) => { - setFlipTestColors(true); - // showNotification('Flip test colors on', 1000); - setSettingsButton("flipTestColors", config.flipTestColors); -}); -$(".pageSettings .section.flipTestColors .buttons .button.off").click((e) => { - setFlipTestColors(false); - // showNotification('Flip test colors off', 1000); - setSettingsButton("flipTestColors", config.flipTestColors); -}); - -//extra color -$(".pageSettings .section.colorfulMode .buttons .button.on").click((e) => { - setColorfulMode(true); - // showNotification('Colorful mode on', 1000); - setSettingsButton("colorfulMode", config.colorfulMode); -}); -$(".pageSettings .section.colorfulMode .buttons .button.off").click((e) => { - setColorfulMode(false); - // showNotification('Colorful mode off', 1000); - setSettingsButton("colorfulMode", config.colorfulMode); -}); - -//extra color -$(".pageSettings .section.randomTheme .buttons .button.on").click((e) => { - setRandomTheme(true); - // showNotification('Colorful mode on', 1000); - setSettingsButton("randomTheme", config.randomTheme); -}); -$(".pageSettings .section.randomTheme .buttons .button.off").click((e) => { - setRandomTheme(false); - // showNotification('Colorful mode off', 1000); - setSettingsButton("randomTheme", config.randomTheme); -}); - -//stop on error -$(".pageSettings .section.stopOnError .buttons .button.on").click((e) => { - setStopOnError(true); - setSettingsButton("stopOnError", config.stopOnError); -}); -$(".pageSettings .section.stopOnError .buttons .button.off").click((e) => { - setStopOnError(false); - setSettingsButton("stopOnError", config.stopOnError); -}); - -//showAllLines -$(".pageSettings .section.showAllLines .buttons .button.on").click((e) => { - setShowAllLines(true); - setSettingsButton("showAllLines", config.showAllLines); -}); -$(".pageSettings .section.showAllLines .buttons .button.off").click((e) => { - setShowAllLines(false); - setSettingsButton("showAllLines", config.showAllLines); -}); - //discord $( ".pageSettings .section.discordIntegration .buttons .generateCodeButton" @@ -842,13 +507,6 @@ $(document).on("click", ".pageSettings .section.funbox .button", (e) => { setActiveFunboxButton(); }); -//fontfamily -$(document).on("click", ".pageSettings .section.fontFamily .button", (e) => { - let font = $(e.currentTarget).attr("fontFamily"); - setFontFamily(font); - setActiveFontFamilyButton(); -}); - //tags $(document).on( "click", @@ -856,13 +514,6 @@ $(document).on( (e) => { let target = e.currentTarget; let tagid = $(target).parent(".tag").attr("id"); - // if($(target).attr('active') === 'true'){ - // $(target).attr('active','false'); - // $(target).html('') - // }else{ - // $(target).attr('active','true'); - // $(target).html('') - // } toggleTag(tagid); showActiveTags(); } @@ -913,8 +564,6 @@ $(".tab").click((e) => { if ($target.attr("tab") == "preset") { setCustomTheme(false); applyCustomThemeColors(); - // $('[tabContent="custom"]').removeClass("reveal"); - // $('[tabContent="preset"]').addClass("reveal"); swapElements( $('.pageSettings [tabContent="custom"]'), $('.pageSettings [tabContent="preset"]'), @@ -928,9 +577,6 @@ $(".tab").click((e) => { $('.pageSettings [tabContent="custom"]'), 250 ); - - // $('[tabContent="preset"]').removeClass("reveal"); - // $('[tabContent="custom"]').addClass("reveal"); } }); @@ -942,12 +588,6 @@ $("[type='color']").on("input", (e) => { document.documentElement.style.setProperty($colorVar, $pickedColor); $("#" + $colorVar).attr("value", $pickedColor); $("[for=" + $colorVar + "]").text($pickedColor); - - // config.customThemeColors[colorVars.indexOf($colorVar)] = $pickedColor -}); - -$(".colorPicker").on("change", (e) => { - // Save a color once picked }); $(".pageSettings .saveCustomThemeButton").click((e) => { @@ -968,9 +608,6 @@ $(".pageSettings .sectionGroupTitle").click((e) => { .stop(true, true) .slideToggle(250) .toggleClass("slideup"); - // $(`.pageSettings .sectionGroupTitle[group=${group}] .fas`).toggleClass( - // "rotate" - // ); if ($(`.pageSettings .settingsGroup.${group}`).hasClass("slideup")) { $(`.pageSettings .sectionGroupTitle[group=${group}] .fas`) .stop(true, true) diff --git a/public/js/userconfig.js b/public/js/userconfig.js index 4c29960c4..6032e3a54 100644 --- a/public/js/userconfig.js +++ b/public/js/userconfig.js @@ -14,7 +14,7 @@ let defaultConfig = { ], showKeyTips: true, showLiveWpm: false, - showTimerBar: true, + showTimerProgress: true, smoothCaret: true, quickTab: false, punctuation: false, @@ -31,7 +31,6 @@ let defaultConfig = { caretStyle: "default", flipTestColors: false, layout: "default", - showDiscordDot: true, confidenceMode: "off", timerStyle: "bar", colorfulMode: true, @@ -134,7 +133,6 @@ function applyConfig(configObj) { setBlindMode(configObj.blindMode, true); setQuickEnd(configObj.quickEnd, true); setFlipTestColors(configObj.flipTestColors, true); - setDiscordDot(configObj.hideDiscordDot, true); setColorfulMode(configObj.colorfulMode, true); setConfidenceMode(configObj.confidenceMode, true); setTimerStyle(configObj.timerStyle, true); @@ -144,6 +142,8 @@ function applyConfig(configObj) { changeKeymapLayout(configObj.keymapLayout, true); setFontFamily(configObj.fontFamily, true); setSmoothLineScroll(configObj.smoothLineScroll, true); + setShowLiveWpm(configObj.showLiveWpm, true); + setShowTimerProgress(configObj.showTimerProgress, true); if ( configObj.resultFilters == null || configObj.resultFilters == undefined @@ -192,34 +192,6 @@ function setDifficulty(diff, nosave) { if (!nosave) saveConfigToCookie(); } -//blind mode -function toggleDiscordDot() { - dot = !config.showDiscordDot; - if (dot == undefined) { - dot = false; - } - config.showDiscordDot = dot; - if (!dot) { - $("#menu .discord").addClass("dotHidden"); - } else { - $("#menu .discord").removeClass("dotHidden"); - } - saveConfigToCookie(); -} - -function setDiscordDot(dot, nosave) { - if (dot == undefined) { - dot = false; - } - config.showDiscordDot = dot; - if (!dot) { - $("#menu .discord").addClass("dotHidden"); - } else { - $("#menu .discord").removeClass("dotHidden"); - } - if (!nosave) saveConfigToCookie(); -} - //blind mode function toggleBlindMode() { blind = !config.blindMode; @@ -352,6 +324,38 @@ function setCaretStyle(caretStyle, nosave) { if (!nosave) saveConfigToCookie(); } +function setShowTimerProgress(timer, nosave) { + if (timer == null || timer == undefined) { + timer = false; + } + config.showTimerProgress = timer; + if (!nosave) saveConfigToCookie(); +} + +function toggleShowTimerProgress() { + config.showTimerProgress = !config.showTimerProgress; + saveConfigToCookie(); +} + +function setShowLiveWpm(live, nosave) { + if (live == null || live == undefined) { + live = false; + } + config.showLiveWpm = live; + if (config.keymapMode !== "off") { + config.keymapMode = "off"; + } + if (!nosave) saveConfigToCookie(); +} + +function toggleShowLiveWpm() { + config.showLiveWpm = !config.showLiveWpm; + if (config.keymapMode !== "off") { + config.keymapMode = "off"; + } + saveConfigToCookie(); +} + function setTimerStyle(style, nosave) { if (style == null || style == undefined) { style = "bar";