From 5db21fdab21e2495f3e1f0950d3c10077b27ea5f Mon Sep 17 00:00:00 2001 From: Noah Date: Sun, 12 Jul 2020 17:51:59 -0700 Subject: [PATCH] added various color themes and timer opacity setting Added Aether, FroYo, Milkshake, Future Funk, and Retrocast color themes. Added a setting to change the opacity of the live WPM text. --- public/index.html | 10 ++++++++ public/js/commandline.js | 43 +++++++++++++++++++++++++++++++++++ public/js/script.js | 8 +++++++ public/js/settings.js | 17 ++++++++++++++ public/js/userconfig.js | 10 ++++++++ public/themes/aether.css | 30 ++++++++++++++++++++++++ public/themes/froyo.css | 30 ++++++++++++++++++++++++ public/themes/future_funk.css | 32 ++++++++++++++++++++++++++ public/themes/list.json | 25 ++++++++++++++++++++ public/themes/milkshake.css | 37 ++++++++++++++++++++++++++++++ public/themes/retrocast.css | 30 ++++++++++++++++++++++++ 11 files changed, 272 insertions(+) create mode 100644 public/themes/aether.css create mode 100644 public/themes/froyo.css create mode 100644 public/themes/future_funk.css create mode 100644 public/themes/milkshake.css create mode 100644 public/themes/retrocast.css diff --git a/public/index.html b/public/index.html index 0d29012e4..b7536cac5 100644 --- a/public/index.html +++ b/public/index.html @@ -885,6 +885,16 @@
main
+
+

timer opacity

+
Change the opacity of the timer number/bar and live wpm number.
+
+
.25
+
.5
+
.75
+
1
+
+

flip test colors

By default, typed text is brighter than the future text. When enabled, the colors will be diff --git a/public/js/commandline.js b/public/js/commandline.js index 59b01e543..64de30af5 100644 --- a/public/js/commandline.js +++ b/public/js/commandline.js @@ -173,6 +173,15 @@ let commands = { showCommandLine(); }, }, + { + id: "changeTimerOpacity", + display: "Change timer opacity...", + subgroup: true, + exec: () => { + currentCommands.push(commandsTimerOpacity); + showCommandLine(); + }, + }, { id: "changeTheme", display: "Change theme...", @@ -334,6 +343,40 @@ let commandsTimerColor = { ], }; +let commandsTimerOpacity = { + title: "Change timer opacity...", + list: [ + { + id: "setTimerOpacity.25", + display: ".25", + exec: () => { + setTimerColor(.25); + }, + }, + { + id: "setTimerOpacity.5", + display: ".5", + exec: () => { + setTimerColor(.5); + }, + }, + { + id: "setTimerOpacity.75", + display: ".75", + exec: () => { + setTimerColor(.75); + }, + }, + { + id: "setTimerOpacity1", + display: "1", + exec: () => { + setTimerColor(1); + }, + }, + ], +}; + let commandsWordCount = { title: "Change word count...", list: [ diff --git a/public/js/script.js b/public/js/script.js index 90bd35e65..005f83a80 100644 --- a/public/js/script.js +++ b/public/js/script.js @@ -561,6 +561,7 @@ function compareInput(wrdIndex, input, showError) { } } } + if (input.length < currentWord.length) { for (let i = input.length; i < currentWord.length; i++) { ret += "" + currentWord[i] + ""; @@ -665,6 +666,13 @@ function changeTimerColor(color) { } } +function changeTimerOpacity(opacity) { + if(opacity){ + $("#timerNumber").css("opacity", opacity); + $("#liveWpm").css("opacity", opacity); + } +} + function restartTimer() { if (config.timerStyle === "bar") { if (config.mode === "time") { diff --git a/public/js/settings.js b/public/js/settings.js index 03b85e245..b29d2cc6c 100644 --- a/public/js/settings.js +++ b/public/js/settings.js @@ -190,6 +190,15 @@ function setActiveTimerColorButton() { ).addClass("active"); } +function setActiveTimerOpacityButton() { + $(`.pageSettings .section.timerOpacity .buttons .button`).removeClass("active"); + $( + `.pageSettings .section.timerOpacity .buttons .button[color=` + + config.timerOpacity + + `]` + ).addClass("active"); +} + function setSettingsButton(buttonSection, tf) { if (tf) { $( @@ -505,6 +514,14 @@ $(document).on("click", ".pageSettings .section.timerColor .button", (e) => { setActiveTimerColorButton(); }); +//timer opacity +$(document).on("click", ".pageSettings .section.timerOpacity .button", (e) => { + let color = $(e.currentTarget).attr("opacity"); + setTimerOpacity(color); + // showNotification('Timer style updated', 1000); + setActiveTimerOpacityButton(); +}); + //blind mode $(".pageSettings .section.blindMode .buttons .button.on").click((e) => { setBlindMode(true); diff --git a/public/js/userconfig.js b/public/js/userconfig.js index c95d30f51..9b473abab 100644 --- a/public/js/userconfig.js +++ b/public/js/userconfig.js @@ -37,6 +37,7 @@ let defaultConfig = { colorfulMode: true, randomTheme: false, timerColor: "black", + timerOpacity: .25, }; let cookieConfig = null; @@ -130,6 +131,7 @@ function applyConfig(configObj) { setMaxConfidence(configObj.maxConfidence, true); setTimerStyle(configObj.timerStyle, true); setTimerColor(configObj.timerColor, true); + setTimerOpacity(configObj.timerOpacity, true); if ( configObj.resultFilters == null || configObj.resultFilters == undefined @@ -314,6 +316,14 @@ function setTimerColor(color, nosave) { changeTimerColor(color); if (!nosave) saveConfigToCookie(); } +function setTimerOpacity(opacity, nosave) { + if (opacity == null || opacity == undefined) { + opacity = .25; + } + config.timerOpacity = opacity; + changeTimerOpacity(opacity); + if (!nosave) saveConfigToCookie(); +} //key tips function setKeyTips(keyTips, nosave) { diff --git a/public/themes/aether.css b/public/themes/aether.css new file mode 100644 index 000000000..4b3fb5dfa --- /dev/null +++ b/public/themes/aether.css @@ -0,0 +1,30 @@ +:root { + --bg-color: #101820; + --main-color: #eedaea; + --caret-color: #eedaea; + --sub-color: #cf6bdd; + --text-color: #eedaea; + --error-color: #ff5253; + --error-extra-color: #e3002b; + --colorful-error-color: #ff5253; + --colorful-error-extra-color: #e3002b; +} + #menu .icon-button:nth-child(1){ + color: #e4002b; + } + + #menu .icon-button:nth-child(2){ + color: #c53562; + } + + #menu .icon-button:nth-child(3){ + color: #95549e; + } + + #menu .icon-button:nth-child(4){ + color: #6744a1; + } + + #menu .icon-button:nth-child(5), #menu .icon-button:nth-child(6){ + color: #393c73; + } \ No newline at end of file diff --git a/public/themes/froyo.css b/public/themes/froyo.css new file mode 100644 index 000000000..0c4edfe95 --- /dev/null +++ b/public/themes/froyo.css @@ -0,0 +1,30 @@ +:root { + --bg-color: #e1dacb; + --main-color: #7b7d7d; + --caret-color: #7b7d7d; + --sub-color: #b29c5e; + --text-color: #7b7d7d; + --error-color: #f28578; + --error-extra-color: #d56558; + --colorful-error-color: #f28578; + --colorful-error-extra-color: #d56558; +} + #menu .icon-button:nth-child(1){ + color: #ff7e73; + } + + #menu .icon-button:nth-child(2){ + color: #f5c370; + } + + #menu .icon-button:nth-child(3){ + color: #08d9a3; + } + + #menu .icon-button:nth-child(4){ + color: #0ca5e2; + } + + #menu .icon-button:nth-child(5), #menu .icon-button:nth-child(6){ + color: #875ac6; + } \ No newline at end of file diff --git a/public/themes/future_funk.css b/public/themes/future_funk.css new file mode 100644 index 000000000..4cf3159c5 --- /dev/null +++ b/public/themes/future_funk.css @@ -0,0 +1,32 @@ +:root { + --bg-color: #2E1A47; + --main-color: #f7f2ea; + --caret-color: #f7f2ea; + --sub-color: #c18fff; + --text-color: #f7f2ea; + --error-color: #F8BED6; + --error-extra-color: #F04E98; + --colorful-error-color: #F8BED6; + --colorful-error-extra-color: #F04E98; + } + + + #menu .icon-button:nth-child(1){ + color: #F04E98; + } + + #menu .icon-button:nth-child(2){ + color: #F8BED6; + } + + #menu .icon-button:nth-child(3){ + color: #F6EB61; + } + + #menu .icon-button:nth-child(4){ + color: #A4DBE8; + } + + #menu .icon-button:nth-child(5), #menu .icon-button:nth-child(6){ + color: #a266ed; + } \ No newline at end of file diff --git a/public/themes/list.json b/public/themes/list.json index 7f8101619..8de9111f8 100644 --- a/public/themes/list.json +++ b/public/themes/list.json @@ -252,5 +252,30 @@ "name": "hammerhead", "bgColor": "#030613", "textColor": "#4fcdb9" + }, + { + "name": "future funk", + "bgColor": "#2E1A47", + "textColor": "f7f2ea" + }, + { + "name": "milkshake", + "bgColor": "#ffffff", + "textColor": "#212b43" + }, + { + "name": "aether", + "bgColor": "#101820", + "textColor": "#cf6bdd" + }, + { + "name": "froyo", + "bgColor": "#e1dacb", + "textColor": "#b29c5e" + }, + { + "name": "retrocast", + "bgColor": "#07737a", + "textColor": "#88dbdf" } ] \ No newline at end of file diff --git a/public/themes/milkshake.css b/public/themes/milkshake.css new file mode 100644 index 000000000..769313168 --- /dev/null +++ b/public/themes/milkshake.css @@ -0,0 +1,37 @@ +:root { + --bg-color: #ffffff; + --main-color: #212b43; + --caret-color: #212b43; + --sub-color: #62cfe6; + --text-color: #212b43; + --error-color: #f19dac; + --error-extra-color: #e58c9d; + --colorful-error-color: #f19dac; + --colorful-error-extra-color: #e58c9d; + } + + + #menu .icon-button:nth-child(1){ + color: #f19dac; + } + + #menu .icon-button:nth-child(2){ + color: #f6f4a0; + } + + #menu .icon-button:nth-child(3){ + color: #73e4d0; + } + + #menu .icon-button:nth-child(4){ + color: #61cfe6; + } + + #menu .icon-button:nth-child(5){ + color: #ba96db; + } + + #menu .icon-button:nth-child(6){ + color: #ba96db; + } + \ No newline at end of file diff --git a/public/themes/retrocast.css b/public/themes/retrocast.css new file mode 100644 index 000000000..eeb0edf9a --- /dev/null +++ b/public/themes/retrocast.css @@ -0,0 +1,30 @@ +:root { + --bg-color: #07737a; + --main-color: #88dbdf; + --caret-color: #88dbdf; + --sub-color: #f3e03b; + --text-color: #ffffff; + --error-color: #ff585d; + --error-extra-color: #c04455; + --colorful-error-color: #ff585d; + --colorful-error-extra-color: #c04455; +} + #menu .icon-button:nth-child(1){ + color: #88dbdf; + } + + #menu .icon-button:nth-child(2){ + color: #88dbdf; + } + + #menu .icon-button:nth-child(3){ + color: #88dbdf; + } + + #menu .icon-button:nth-child(4){ + color: #ff585d; + } + + #menu .icon-button:nth-child(5), #menu .icon-button:nth-child(6){ + color: #f3e03b; + } \ No newline at end of file