From 232aa73061cf18d6e2b4cc9e7fb590aa419563d3 Mon Sep 17 00:00:00 2001 From: Jack Date: Sat, 7 Aug 2021 15:26:44 +0100 Subject: [PATCH 01/14] updated the way theme colors are stored and accessed should completely fix an issue where graphs or keymaps are using the wrong colors --- src/js/chart-controller.js | 58 ++++++++---------- src/js/monkey-power.js | 6 +- src/js/settings/theme-picker.js | 22 ++++--- src/js/test/keymap.js | 24 ++++---- src/js/test/test-logic.js | 18 +++--- src/js/test/test-ui.js | 4 +- src/js/theme-colors.js | 104 ++++++++++++++++++++++++++------ src/js/theme-controller.js | 52 ++++++++-------- 8 files changed, 177 insertions(+), 111 deletions(-) diff --git a/src/js/chart-controller.js b/src/js/chart-controller.js index 81535c0de..517b6e07b 100644 --- a/src/js/chart-controller.js +++ b/src/js/chart-controller.js @@ -162,7 +162,6 @@ export let result = new Chart($("#wpmChart"), { }); export let accountHistory = new Chart($(".pageAccount #accountHistoryChart"), { - animationSteps: 60, type: "line", data: { datasets: [ @@ -254,9 +253,6 @@ export let accountHistory = new Chart($(".pageAccount #accountHistoryChart"), { }, }, }, - animation: { - duration: 250, - }, legend: { display: false, labels: { @@ -322,7 +318,6 @@ export let accountHistory = new Chart($(".pageAccount #accountHistoryChart"), { export let accountActivity = new Chart( $(".pageAccount #accountActivityChart"), { - animationSteps: 60, type: "bar", data: { datasets: [ @@ -376,9 +371,6 @@ export let accountActivity = new Chart( }, }, }, - animation: { - duration: 250, - }, legend: { display: false, labels: { @@ -631,63 +623,63 @@ export let miniResult = new Chart($(".pageAccount #miniResultChart"), { }, }); -export function updateColors(chart) { - if (ThemeColors.main == "") { - ThemeColors.update(); - } - chart.data.datasets[0].borderColor = ThemeColors.main; - chart.data.datasets[1].borderColor = ThemeColors.sub; +export async function updateColors(chart) { + let subcolor = await ThemeColors.get("sub"); + let maincolor = await ThemeColors.get("main"); + + chart.data.datasets[0].borderColor = maincolor; + chart.data.datasets[1].borderColor = subcolor; if (chart.data.datasets[0].type === undefined) { if (chart.config.type === "line") { - chart.data.datasets[0].pointBackgroundColor = ThemeColors.main; + chart.data.datasets[0].pointBackgroundColor = maincolor; } else if (chart.config.type === "bar") { - chart.data.datasets[0].backgroundColor = ThemeColors.main; + chart.data.datasets[0].backgroundColor = maincolor; } } else if (chart.data.datasets[0].type === "bar") { - chart.data.datasets[0].backgroundColor = ThemeColors.main; + chart.data.datasets[0].backgroundColor = maincolor; } else if (chart.data.datasets[0].type === "line") { - chart.data.datasets[0].pointBackgroundColor = ThemeColors.main; + chart.data.datasets[0].pointBackgroundColor = maincolor; } if (chart.data.datasets[1].type === undefined) { if (chart.config.type === "line") { - chart.data.datasets[1].pointBackgroundColor = ThemeColors.sub; + chart.data.datasets[1].pointBackgroundColor = subcolor; } else if (chart.config.type === "bar") { - chart.data.datasets[1].backgroundColor = ThemeColors.sub; + chart.data.datasets[1].backgroundColor = subcolor; } } else if (chart.data.datasets[1].type === "bar") { - chart.data.datasets[1].backgroundColor = ThemeColors.sub; + chart.data.datasets[1].backgroundColor = subcolor; } else if (chart.data.datasets[1].type === "line") { - chart.data.datasets[1].pointBackgroundColor = ThemeColors.sub; + chart.data.datasets[1].pointBackgroundColor = subcolor; } try { - chart.options.scales.xAxes[0].ticks.minor.fontColor = ThemeColors.sub; - chart.options.scales.xAxes[0].scaleLabel.fontColor = ThemeColors.sub; + chart.options.scales.xAxes[0].ticks.minor.fontColor = subcolor; + chart.options.scales.xAxes[0].scaleLabel.fontColor = subcolor; } catch {} try { - chart.options.scales.yAxes[0].ticks.minor.fontColor = ThemeColors.sub; - chart.options.scales.yAxes[0].scaleLabel.fontColor = ThemeColors.sub; + chart.options.scales.yAxes[0].ticks.minor.fontColor = subcolor; + chart.options.scales.yAxes[0].scaleLabel.fontColor = subcolor; } catch {} try { - chart.options.scales.yAxes[1].ticks.minor.fontColor = ThemeColors.sub; - chart.options.scales.yAxes[1].scaleLabel.fontColor = ThemeColors.sub; + chart.options.scales.yAxes[1].ticks.minor.fontColor = subcolor; + chart.options.scales.yAxes[1].scaleLabel.fontColor = subcolor; } catch {} try { - chart.options.scales.yAxes[2].ticks.minor.fontColor = ThemeColors.sub; - chart.options.scales.yAxes[2].scaleLabel.fontColor = ThemeColors.sub; + chart.options.scales.yAxes[2].ticks.minor.fontColor = subcolor; + chart.options.scales.yAxes[2].scaleLabel.fontColor = subcolor; } catch {} try { - chart.data.datasets[0].trendlineLinear.style = ThemeColors.sub; - chart.data.datasets[1].trendlineLinear.style = ThemeColors.sub; + chart.data.datasets[0].trendlineLinear.style = subcolor; + chart.data.datasets[1].trendlineLinear.style = subcolor; } catch {} - chart.update(); + chart.update({ duration: 0 }); } Chart.prototype.updateColors = function () { diff --git a/src/js/monkey-power.js b/src/js/monkey-power.js index 808e2b25f..2b19b70d1 100644 --- a/src/js/monkey-power.js +++ b/src/js/monkey-power.js @@ -175,7 +175,7 @@ function randomColor() { /** * @param {boolean} good Good power or not? */ -export function addPower(good = true, extra = false) { +export async function addPower(good = true, extra = false) { if (!TestLogic.active || Config.monkeyPowerLevel === "off") return; // Shake @@ -208,8 +208,8 @@ export function addPower(good = true, extra = false) { const color = ["2", "4"].includes(Config.monkeyPowerLevel) ? randomColor() : good - ? ThemeColors.caret - : ThemeColors.error; + ? await ThemeColors.get("caret") + : await ThemeColors.get("error"); ctx.particles.push(createParticle(...coords, color)); } diff --git a/src/js/settings/theme-picker.js b/src/js/settings/theme-picker.js index d98aa961c..e3da15ebb 100644 --- a/src/js/settings/theme-picker.js +++ b/src/js/settings/theme-picker.js @@ -228,29 +228,31 @@ $(".pageSettings #loadCustomColorsFromPreset").click((e) => { document.documentElement.style.setProperty(e, ""); }); - setTimeout(() => { + setTimeout(async () => { ChartController.updateAllChartColors(); + let themecolors = await ThemeColors.get(); + ThemeController.colorVars.forEach((colorName) => { let color; if (colorName === "--bg-color") { - color = ThemeColors.bg; + color = themecolors.bg; } else if (colorName === "--main-color") { - color = ThemeColors.main; + color = themecolors.main; } else if (colorName === "--sub-color") { - color = ThemeColors.sub; + color = themecolors.sub; } else if (colorName === "--caret-color") { - color = ThemeColors.caret; + color = themecolors.caret; } else if (colorName === "--text-color") { - color = ThemeColors.text; + color = themecolors.text; } else if (colorName === "--error-color") { - color = ThemeColors.error; + color = themecolors.error; } else if (colorName === "--error-extra-color") { - color = ThemeColors.errorExtra; + color = themecolors.errorExtra; } else if (colorName === "--colorful-error-color") { - color = ThemeColors.colorfulError; + color = themecolors.colorfulError; } else if (colorName === "--colorful-error-extra-color") { - color = ThemeColors.colorfulErrorExtra; + color = themecolors.colorfulErrorExtra; } $(".colorPicker #" + colorName).attr("value", color); $(".colorPicker #" + colorName).val(color); diff --git a/src/js/test/keymap.js b/src/js/test/keymap.js index 1839c727e..ca3ba20a8 100644 --- a/src/js/test/keymap.js +++ b/src/js/test/keymap.js @@ -61,7 +61,7 @@ export function highlightKey(currentKey) { } } -export function flashKey(key, correct) { +export async function flashKey(key, correct) { if (key == undefined) return; switch (key) { case "\\": @@ -107,20 +107,22 @@ export function flashKey(key, correct) { key = ".key-split-space"; } + let themecolors = await ThemeColors.get(); + try { if (correct || Config.blindMode) { $(key) .stop(true, true) .css({ - color: ThemeColors.bg, - backgroundColor: ThemeColors.main, - borderColor: ThemeColors.main, + color: themecolors.bg, + backgroundColor: themecolors.main, + borderColor: themecolors.main, }) .animate( { - color: ThemeColors.sub, + color: themecolors.sub, backgroundColor: "transparent", - borderColor: ThemeColors.sub, + borderColor: themecolors.sub, }, 500, "easeOutExpo" @@ -129,15 +131,15 @@ export function flashKey(key, correct) { $(key) .stop(true, true) .css({ - color: ThemeColors.bg, - backgroundColor: ThemeColors.error, - borderColor: ThemeColors.error, + color: themecolors.bg, + backgroundColor: themecolors.error, + borderColor: themecolors.error, }) .animate( { - color: ThemeColors.sub, + color: themecolors.sub, backgroundColor: "transparent", - borderColor: ThemeColors.sub, + borderColor: themecolors.sub, }, 500, "easeOutExpo" diff --git a/src/js/test/test-logic.js b/src/js/test/test-logic.js index 6603e8e00..d67b98f40 100644 --- a/src/js/test/test-logic.js +++ b/src/js/test/test-logic.js @@ -1091,7 +1091,7 @@ export async function addWord() { TestUI.addWord(randomWord); } -export function finish(difficultyFailed = false) { +export async function finish(difficultyFailed = false) { if (!active) return; if (Config.mode == "zen" && input.current.length != 0) { input.pushHistory(); @@ -1556,7 +1556,7 @@ export function finish(difficultyFailed = false) { Config.punctuation, Config.language, Config.difficulty - ).then((highestwpm) => { + ).then(async (highestwpm) => { PbCrown.hide(); $("#result .stats .wpm .crown").attr("aria-label", ""); if (lpb < stats.wpm && stats.wpm < highestwpm) { @@ -1588,15 +1588,15 @@ export function finish(difficultyFailed = false) { mode: "horizontal", scaleID: "wpm", value: lpb, - borderColor: ThemeColors.sub, + borderColor: await ThemeColors.get("sub"), borderWidth: 1, borderDash: [2, 2], label: { - backgroundColor: ThemeColors.sub, + backgroundColor: await ThemeColors.get("sub"), fontFamily: Config.fontFamily.replace(/_/g, " "), fontSize: 11, fontStyle: "normal", - fontColor: ThemeColors.bg, + fontColor: await ThemeColors.get("bg"), xPadding: 6, yPadding: 6, cornerRadius: 3, @@ -1666,15 +1666,15 @@ export function finish(difficultyFailed = false) { mode: "horizontal", scaleID: "wpm", value: tpb, - borderColor: ThemeColors.sub, + borderColor: await ThemeColors.get("sub"), borderWidth: 1, borderDash: [2, 2], label: { - backgroundColor: ThemeColors.sub, + backgroundColor: await ThemeColors.get("sub"), fontFamily: Config.fontFamily.replace(/_/g, " "), fontSize: 11, fontStyle: "normal", - fontColor: ThemeColors.bg, + fontColor: await ThemeColors.get("bg"), xPadding: 6, yPadding: 6, cornerRadius: 3, @@ -1969,7 +1969,7 @@ export function finish(difficultyFailed = false) { fontFamily: Config.fontFamily.replace(/_/g, " "), fontSize: 11, fontStyle: "normal", - fontColor: ThemeColors.sub, + fontColor: await ThemeColors.get("sub"), xPadding: 6, yPadding: 6, cornerRadius: 3, diff --git a/src/js/test/test-ui.js b/src/js/test/test-ui.js index c14ca1a10..57579a989 100644 --- a/src/js/test/test-ui.js +++ b/src/js/test/test-ui.js @@ -187,7 +187,7 @@ export function colorful(tc) { } } -export function screenshot() { +export async function screenshot() { let revealReplay = false; function revertScreenshot() { $("#notificationCenter").removeClass("hidden"); @@ -222,7 +222,7 @@ export function screenshot() { $(".pageTest .loginTip").addClass("hidden"); try { html2canvas(document.body, { - backgroundColor: ThemeColors.bg, + backgroundColor: await ThemeColors.get("bg"), height: sourceHeight + 50, width: sourceWidth + 50, x: sourceX - 25, diff --git a/src/js/theme-colors.js b/src/js/theme-colors.js index 4b2904989..a09d2483a 100644 --- a/src/js/theme-colors.js +++ b/src/js/theme-colors.js @@ -1,27 +1,93 @@ -export let bg = "#323437"; -export let main = "#e2b714"; -export let caret = "#e2b714"; -export let sub = "#646669"; -export let text = "#d1d0c5"; -export let error = "#ca4754"; -export let errorExtra = "#7e2a33"; -export let colorfulError = "#ca4754"; -export let colorfulErrorExtra = "#7e2a33"; +// export let bg = "#323437"; +// export let main = "#e2b714"; +// export let caret = "#e2b714"; +// export let sub = "#646669"; +// export let text = "#d1d0c5"; +// export let error = "#ca4754"; +// export let errorExtra = "#7e2a33"; +// export let colorfulError = "#ca4754"; +// export let colorfulErrorExtra = "#7e2a33"; + +let colors = { + bg: "#323437", + main: "#e2b714", + caret: "#e2b714", + sub: "#646669", + text: "#d1d0c5", + error: "#ca4754", + errorExtra: "#7e2a33", + colorfulError: "#ca4754", + colorfulErrorExtra: "#7e2a33", +}; + +export async function get(color) { + let ret; + + if (color === undefined) { + ret = colors; + } else { + ret = colors[color]; + } + + return check(); + + function run() { + setTimeout(() => { + update(); + if (color === undefined) { + ret = colors; + } else { + ret = colors[color]; + } + return check(); + }, 500); + } + function check() { + if (color === undefined) { + if (ret.bg === "") { + run(); + } else { + return ret; + } + } else { + if (ret === "") { + run(); + } else { + return ret; + } + } + } +} + +export function reset() { + colors = { + bg: "", + main: "", + caret: "", + sub: "", + text: "", + error: "", + errorExtra: "", + colorfulError: "", + colorfulErrorExtra: "", + }; +} export function update() { let st = getComputedStyle(document.body); - - bg = st.getPropertyValue("--bg-color").replace(" ", ""); - main = st.getPropertyValue("--main-color").replace(" ", ""); - caret = st.getPropertyValue("--caret-color").replace(" ", ""); - sub = st.getPropertyValue("--sub-color").replace(" ", ""); - text = st.getPropertyValue("--text-color").replace(" ", ""); - error = st.getPropertyValue("--error-color").replace(" ", ""); - errorExtra = st.getPropertyValue("--error-extra-color").replace(" ", ""); - colorfulError = st + colors.bg = st.getPropertyValue("--bg-color").replace(" ", ""); + colors.main = st.getPropertyValue("--main-color").replace(" ", ""); + colors.caret = st.getPropertyValue("--caret-color").replace(" ", ""); + colors.sub = st.getPropertyValue("--sub-color").replace(" ", ""); + colors.text = st.getPropertyValue("--text-color").replace(" ", ""); + colors.error = st.getPropertyValue("--error-color").replace(" ", ""); + colors.errorExtra = st + .getPropertyValue("--error-extra-color") + .replace(" ", ""); + colors.colorfulError = st .getPropertyValue("--colorful-error-color") .replace(" ", ""); - colorfulErrorExtra = st + colors.colorfulErrorExtra = st .getPropertyValue("--colorful-error-extra-color") .replace(" ", ""); } diff --git a/src/js/theme-controller.js b/src/js/theme-controller.js index c2a57c0c4..1a9bb092f 100644 --- a/src/js/theme-controller.js +++ b/src/js/theme-controller.js @@ -21,11 +21,11 @@ export const colorVars = [ "--colorful-error-extra-color", ]; -function updateFavicon(size, curveSize) { +async function updateFavicon(size, curveSize) { let maincolor, bgcolor; - bgcolor = ThemeColors.bg; - maincolor = ThemeColors.main; + bgcolor = await ThemeColors.get("bg"); + maincolor = await ThemeColors.get("main"); if (bgcolor == maincolor) { bgcolor = "#111"; @@ -62,7 +62,7 @@ function clearCustomTheme() { }); } -export function apply(themeName) { +export function apply(themeName, preview = false) { clearCustomTheme(); let name = "serika_dark"; @@ -86,33 +86,37 @@ export function apply(themeName) { $("#currentTheme").attr("href", `themes/${name}.css`); $(".current-theme .text").text(themeName.replace("_", " ")); - if (themeName === "custom") { - colorVars.forEach((e, index) => { - document.documentElement.style.setProperty( - e, - Config.customThemeColors[index] - ); - }); - } + if (!preview) { + if (themeName === "custom") { + colorVars.forEach((e, index) => { + document.documentElement.style.setProperty( + e, + Config.customThemeColors[index] + ); + }); + } - try { - firebase.analytics().logEvent("changedTheme", { - theme: themeName, + try { + firebase.analytics().logEvent("changedTheme", { + theme: themeName, + }); + } catch (e) { + console.log("Analytics unavailable"); + } + + ThemeColors.reset(); + ThemeColors.get("bg").then((bgcolor) => { + $(".keymap-key").attr("style", ""); + ChartController.updateAllChartColors(); + updateFavicon(32, 14); + $("#metaThemeColor").attr("content", bgcolor); }); - } catch (e) { - console.log("Analytics unavailable"); } - setTimeout(() => { - $(".keymap-key").attr("style", ""); - ChartController.updateAllChartColors(); - updateFavicon(32, 14); - $("#metaThemeColor").attr("content", ThemeColors.bg); - }, 500); } export function preview(themeName) { isPreviewingTheme = true; - apply(themeName); + apply(themeName, true); } export function set(themeName) { From 3d2baf0d8f406dfc1f81c93518e00e6b70191868 Mon Sep 17 00:00:00 2001 From: Jack Date: Sat, 7 Aug 2021 15:44:20 +0100 Subject: [PATCH 02/14] slight animation for chart color update --- src/js/chart-controller.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/chart-controller.js b/src/js/chart-controller.js index 517b6e07b..7193cb378 100644 --- a/src/js/chart-controller.js +++ b/src/js/chart-controller.js @@ -679,7 +679,7 @@ export async function updateColors(chart) { chart.data.datasets[1].trendlineLinear.style = subcolor; } catch {} - chart.update({ duration: 0 }); + chart.update({ duration: 250 }); } Chart.prototype.updateColors = function () { From 4fd39fa8a450ddf2e111e77125ba9bdb3284a8b9 Mon Sep 17 00:00:00 2001 From: Jack Date: Sat, 7 Aug 2021 15:44:44 +0100 Subject: [PATCH 03/14] fixed color getting not working when updated are needed --- src/js/theme-colors.js | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/src/js/theme-colors.js b/src/js/theme-colors.js index a09d2483a..ecbbfd759 100644 --- a/src/js/theme-colors.js +++ b/src/js/theme-colors.js @@ -31,27 +31,29 @@ export async function get(color) { return check(); - function run() { - setTimeout(() => { - update(); - if (color === undefined) { - ret = colors; - } else { - ret = colors[color]; - } - return check(); - }, 500); + async function run() { + return new Promise(function (resolve, reject) { + window.setTimeout(() => { + update(); + if (color === undefined) { + ret = colors; + } else { + ret = colors[color]; + } + resolve(check()); + }, 500); + }); } - function check() { + async function check() { if (color === undefined) { if (ret.bg === "") { - run(); + return await run(); } else { return ret; } } else { if (ret === "") { - run(); + return await run(); } else { return ret; } From 5a3b3ac5f14f9d5a11956a0747dea242808a3f7d Mon Sep 17 00:00:00 2001 From: Jack Date: Sat, 7 Aug 2021 15:44:56 +0100 Subject: [PATCH 04/14] clearing preview mode --- src/js/theme-controller.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/theme-controller.js b/src/js/theme-controller.js index 1a9bb092f..903cda18b 100644 --- a/src/js/theme-controller.js +++ b/src/js/theme-controller.js @@ -127,9 +127,9 @@ export function clearPreview() { if (isPreviewingTheme) { isPreviewingTheme = false; if (Config.customTheme) { - apply("custom"); + apply("custom", true); } else { - apply(Config.theme); + apply(Config.theme, true); } } } From cc172ebbb29a9af3e9ee890ea1882495d4538b11 Mon Sep 17 00:00:00 2001 From: Jack Date: Sat, 7 Aug 2021 15:45:55 +0100 Subject: [PATCH 05/14] lowered time for repeating the update of theme colors --- src/js/theme-colors.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/theme-colors.js b/src/js/theme-colors.js index ecbbfd759..333716f22 100644 --- a/src/js/theme-colors.js +++ b/src/js/theme-colors.js @@ -41,7 +41,7 @@ export async function get(color) { ret = colors[color]; } resolve(check()); - }, 500); + }, 250); }); } async function check() { From 7007995f119f678fd0476e53d1a64b983718dca3 Mon Sep 17 00:00:00 2001 From: Jack Date: Sat, 7 Aug 2021 15:49:59 +0100 Subject: [PATCH 06/14] sorting themes --- src/js/commandline-lists.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/js/commandline-lists.js b/src/js/commandline-lists.js index 0e1a0418c..57f0b91e7 100644 --- a/src/js/commandline-lists.js +++ b/src/js/commandline-lists.js @@ -2135,6 +2135,10 @@ export let themeCommands = { }; Misc.getThemesList().then((themes) => { + //sort themes by name + themes = themes.sort((a, b) => { + return a.name < b.name; + }); themes.forEach((theme) => { themeCommands.list.push({ id: "changeTheme" + Misc.capitalizeFirstLetter(theme.name), From 82d52115211d6a687f484e9e8fcdda45b9e5b0ea Mon Sep 17 00:00:00 2001 From: Jack Date: Sat, 7 Aug 2021 15:50:25 +0100 Subject: [PATCH 07/14] clicking on the theme button will now show the theme list even if single list mode is enabled --- src/js/ui.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/ui.js b/src/js/ui.js index abada7a37..030c1f63b 100644 --- a/src/js/ui.js +++ b/src/js/ui.js @@ -258,7 +258,7 @@ $(document).on("click", "#bottom .leftright .right .current-theme", (e) => { // if (Config.customTheme) { // toggleCustomTheme(); // } - CommandlineLists.setCurrent([CommandlineLists.themeCommands]); + CommandlineLists.pushCurrent(CommandlineLists.themeCommands); Commandline.show(); } }); From 6d2317b928a6dc334ba519d5f6cc9eb80acbdc9b Mon Sep 17 00:00:00 2001 From: Jack Date: Sat, 7 Aug 2021 15:56:31 +0100 Subject: [PATCH 08/14] fixed clearing preview not applying custom theme --- src/js/theme-controller.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/theme-controller.js b/src/js/theme-controller.js index 903cda18b..1a9bb092f 100644 --- a/src/js/theme-controller.js +++ b/src/js/theme-controller.js @@ -127,9 +127,9 @@ export function clearPreview() { if (isPreviewingTheme) { isPreviewingTheme = false; if (Config.customTheme) { - apply("custom", true); + apply("custom"); } else { - apply(Config.theme, true); + apply(Config.theme); } } } From 6aaeaf4417efdd478f3f102347af37adb493a201 Mon Sep 17 00:00:00 2001 From: Jack Date: Sun, 8 Aug 2021 17:16:19 +0100 Subject: [PATCH 09/14] fixed pb lines not working. closes #1712 --- src/js/chart-controller.js | 33 +++++++++++++++++++++++++++++++++ src/js/test/test-logic.js | 17 +++++++++-------- 2 files changed, 42 insertions(+), 8 deletions(-) diff --git a/src/js/chart-controller.js b/src/js/chart-controller.js index 7193cb378..3e20ff888 100644 --- a/src/js/chart-controller.js +++ b/src/js/chart-controller.js @@ -624,6 +624,7 @@ export let miniResult = new Chart($(".pageAccount #miniResultChart"), { }); export async function updateColors(chart) { + let bgcolor = await ThemeColors.get("bg"); let subcolor = await ThemeColors.get("sub"); let maincolor = await ThemeColors.get("main"); @@ -679,6 +680,38 @@ export async function updateColors(chart) { chart.data.datasets[1].trendlineLinear.style = subcolor; } catch {} + try { + chart.options.annotation.annotations.forEach((annotation) => { + annotation.borderColor = subcolor; + annotation.label.backgroundColor = subcolor; + annotation.label.fontColor = bgcolor; + }); + } catch {} + + // ChartController.result.options.annotation.annotations.push({ + // enabled: false, + // type: "line", + // mode: "horizontal", + // scaleID: "wpm", + // value: lpb, + // borderColor: themecolors['sub'], + // borderWidth: 1, + // borderDash: [2, 2], + // label: { + // backgroundColor: themecolors['sub'], + // fontFamily: Config.fontFamily.replace(/_/g, " "), + // fontSize: 11, + // fontStyle: "normal", + // fontColor: themecolors['bg'], + // xPadding: 6, + // yPadding: 6, + // cornerRadius: 3, + // position: "center", + // enabled: true, + // content: `PB: ${lpb}`, + // }, + // }); + chart.update({ duration: 250 }); } diff --git a/src/js/test/test-logic.js b/src/js/test/test-logic.js index d67b98f40..96b3c0352 100644 --- a/src/js/test/test-logic.js +++ b/src/js/test/test-logic.js @@ -1581,6 +1581,7 @@ export async function finish(difficultyFailed = false) { ); } } + let themecolors = await ThemeColors.get(); if (lpb > 0) { ChartController.result.options.annotation.annotations.push({ enabled: false, @@ -1588,15 +1589,15 @@ export async function finish(difficultyFailed = false) { mode: "horizontal", scaleID: "wpm", value: lpb, - borderColor: await ThemeColors.get("sub"), + borderColor: themecolors["sub"], borderWidth: 1, borderDash: [2, 2], label: { - backgroundColor: await ThemeColors.get("sub"), + backgroundColor: themecolors["sub"], fontFamily: Config.fontFamily.replace(/_/g, " "), fontSize: 11, fontStyle: "normal", - fontColor: await ThemeColors.get("bg"), + fontColor: themecolors["bg"], xPadding: 6, yPadding: 6, cornerRadius: 3, @@ -1666,15 +1667,15 @@ export async function finish(difficultyFailed = false) { mode: "horizontal", scaleID: "wpm", value: tpb, - borderColor: await ThemeColors.get("sub"), + borderColor: themecolors["sub"], borderWidth: 1, borderDash: [2, 2], label: { - backgroundColor: await ThemeColors.get("sub"), + backgroundColor: themecolors["sub"], fontFamily: Config.fontFamily.replace(/_/g, " "), fontSize: 11, fontStyle: "normal", - fontColor: await ThemeColors.get("bg"), + fontColor: themecolors["bg"], xPadding: 6, yPadding: 6, cornerRadius: 3, @@ -1949,7 +1950,7 @@ export async function finish(difficultyFailed = false) { } else { $("#result .stats .source").addClass("hidden"); } - + let fc = await ThemeColors.get("sub"); if (Config.funbox !== "none") { let content = Config.funbox; if (Config.funbox === "layoutfluid") { @@ -1969,7 +1970,7 @@ export async function finish(difficultyFailed = false) { fontFamily: Config.fontFamily.replace(/_/g, " "), fontSize: 11, fontStyle: "normal", - fontColor: await ThemeColors.get("sub"), + fontColor: fc, xPadding: 6, yPadding: 6, cornerRadius: 3, From 763899a7b94ce369673adcfbd2ae357d79d8420d Mon Sep 17 00:00:00 2001 From: Jack Date: Sun, 8 Aug 2021 17:44:02 +0100 Subject: [PATCH 10/14] spacing tag labels away from the edge --- src/js/test/test-logic.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/js/test/test-logic.js b/src/js/test/test-logic.js index 96b3c0352..f25cbb9b2 100644 --- a/src/js/test/test-logic.js +++ b/src/js/test/test-logic.js @@ -1625,6 +1625,7 @@ export async function finish(difficultyFailed = false) { } $("#result .stats .tags .bottom").text(""); let annotationSide = "left"; + let labelAdjust = 15; activeTags.forEach(async (tag) => { let tpb = await DB.getLocalTagPB( tag.id, @@ -1680,14 +1681,17 @@ export async function finish(difficultyFailed = false) { yPadding: 6, cornerRadius: 3, position: annotationSide, + xAdjust: labelAdjust, enabled: true, content: `${tag.name} PB: ${tpb}`, }, }); if (annotationSide === "left") { annotationSide = "right"; + labelAdjust = -15; } else { annotationSide = "left"; + labelAdjust = 15; } } } From a0ec096f8d2040238385148e652190e86be375a6 Mon Sep 17 00:00:00 2001 From: Jack Date: Sun, 8 Aug 2021 18:36:53 +0100 Subject: [PATCH 11/14] no need to update the chart --- src/js/test/test-logic.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/test/test-logic.js b/src/js/test/test-logic.js index f25cbb9b2..9967205da 100644 --- a/src/js/test/test-logic.js +++ b/src/js/test/test-logic.js @@ -948,7 +948,7 @@ export function restart( TestTimer.clear(); if ($("#commandLineWrapper").hasClass("hidden")) TestUI.focusWords(); - ChartController.result.update(); + // ChartController.result.update(); TestUI.updateModesNotice(); UI.setPageTransition(false); // console.log(TestStats.incompleteSeconds); From d9390645de95c621e49b0b6a755173b174667c34 Mon Sep 17 00:00:00 2001 From: Jack Date: Sun, 8 Aug 2021 18:37:18 +0100 Subject: [PATCH 12/14] updated theme loading to fix issues with charts and keymap (again) --- src/js/theme-colors.js | 60 ++++++++++++++++++++------------------ src/js/theme-controller.js | 40 ++++++++++++++++++------- 2 files changed, 60 insertions(+), 40 deletions(-) diff --git a/src/js/theme-colors.js b/src/js/theme-colors.js index 333716f22..a63ec8214 100644 --- a/src/js/theme-colors.js +++ b/src/js/theme-colors.js @@ -29,36 +29,38 @@ export async function get(color) { ret = colors[color]; } - return check(); + return ret; - async function run() { - return new Promise(function (resolve, reject) { - window.setTimeout(() => { - update(); - if (color === undefined) { - ret = colors; - } else { - ret = colors[color]; - } - resolve(check()); - }, 250); - }); - } - async function check() { - if (color === undefined) { - if (ret.bg === "") { - return await run(); - } else { - return ret; - } - } else { - if (ret === "") { - return await run(); - } else { - return ret; - } - } - } + // return check(); + + // async function run() { + // return new Promise(function (resolve, reject) { + // window.setTimeout(() => { + // update(); + // if (color === undefined) { + // ret = colors; + // } else { + // ret = colors[color]; + // } + // resolve(check()); + // }, 250); + // }); + // } + // async function check() { + // if (color === undefined) { + // if (ret.bg === "") { + // return await run(); + // } else { + // return ret; + // } + // } else { + // if (ret === "") { + // return await run(); + // } else { + // return ret; + // } + // } + // } } export function reset() { diff --git a/src/js/theme-controller.js b/src/js/theme-controller.js index 1a9bb092f..dd278e71f 100644 --- a/src/js/theme-controller.js +++ b/src/js/theme-controller.js @@ -62,7 +62,24 @@ function clearCustomTheme() { }); } -export function apply(themeName, preview = false) { +let loadStyle = function (name) { + return new Promise((resolve, reject) => { + let link = document.createElement("link"); + link.type = "text/css"; + link.rel = "stylesheet"; + link.id = "currentTheme"; + link.onload = () => { + resolve(); + }; + link.href = `themes/${name}.css`; + + let headScript = document.querySelector("#currentTheme"); + headScript.replaceWith(link); + }); +}; + +export function apply(themeName) { + console.log(`Applying theme ${themeName}`); clearCustomTheme(); let name = "serika_dark"; @@ -82,11 +99,13 @@ export function apply(themeName, preview = false) { ); } - $(".keymap-key").attr("style", ""); - $("#currentTheme").attr("href", `themes/${name}.css`); - $(".current-theme .text").text(themeName.replace("_", " ")); + ThemeColors.reset(); - if (!preview) { + $(".keymap-key").attr("style", ""); + // $("#currentTheme").attr("href", `themes/${name}.css`); + loadStyle(name).then(() => { + ThemeColors.update(); + $(".current-theme .text").text(themeName.replace("_", " ")); if (themeName === "custom") { colorVars.forEach((e, index) => { document.documentElement.style.setProperty( @@ -103,20 +122,19 @@ export function apply(themeName, preview = false) { } catch (e) { console.log("Analytics unavailable"); } - - ThemeColors.reset(); - ThemeColors.get("bg").then((bgcolor) => { + ThemeColors.get().then((colors) => { $(".keymap-key").attr("style", ""); + console.log("updating chart colors"); ChartController.updateAllChartColors(); updateFavicon(32, 14); - $("#metaThemeColor").attr("content", bgcolor); + $("#metaThemeColor").attr("content", colors.bg); }); - } + }); } export function preview(themeName) { isPreviewingTheme = true; - apply(themeName, true); + apply(themeName); } export function set(themeName) { From a2c1311a57c28e8d7282e2da62cad4222ad44d41 Mon Sep 17 00:00:00 2001 From: Jack Date: Sun, 8 Aug 2021 20:51:20 +0100 Subject: [PATCH 13/14] added debugging function --- src/js/exports.js | 2 ++ src/js/global-dependencies.js | 1 + src/js/test/test-stats.js | 18 ++++++++++++++++++ 3 files changed, 21 insertions(+) diff --git a/src/js/exports.js b/src/js/exports.js index 2230798c4..96683cbfd 100644 --- a/src/js/exports.js +++ b/src/js/exports.js @@ -27,3 +27,5 @@ global.crownTest = async () => { }; global.filterDebug = Account.toggleFilterDebug; + +global.stats = TestStats.getStats; diff --git a/src/js/global-dependencies.js b/src/js/global-dependencies.js index 10fc9822c..12b409f7d 100644 --- a/src/js/global-dependencies.js +++ b/src/js/global-dependencies.js @@ -23,3 +23,4 @@ import "./input-controller"; import "./ready"; import "./about-page"; import * as Account from "./account"; +import * as TestStats from "./test-stats"; diff --git a/src/js/test/test-stats.js b/src/js/test/test-stats.js index 8b0d2d654..60baf3a56 100644 --- a/src/js/test/test-stats.js +++ b/src/js/test/test-stats.js @@ -42,6 +42,24 @@ export let keypressTimings = { }, }; +export function getStats() { + return { + start, + end, + wpmHistory, + rawHistory, + burstHistory, + keypressPerSecond, + currentKeypress, + lastKeypress, + currentBurstStart, + lastSecondNotRound, + missedWords, + accuracy, + keypressTimings, + }; +} + export function restart() { start = 0; end = 0; From fb5febfc7d36cf706d693da741edf401fd1f9a29 Mon Sep 17 00:00:00 2001 From: AronF Date: Mon, 9 Aug 2021 10:03:26 +0000 Subject: [PATCH 14/14] Added quotes for Icelandic (#1711) by AronF --- static/quotes/icelandic.json | 150 +++++++++++++++++++++++++++++++++++ 1 file changed, 150 insertions(+) create mode 100644 static/quotes/icelandic.json diff --git a/static/quotes/icelandic.json b/static/quotes/icelandic.json new file mode 100644 index 000000000..835e128e2 --- /dev/null +++ b/static/quotes/icelandic.json @@ -0,0 +1,150 @@ +{ + "language": "icelandic", + "groups": [[0, 100],[101, 300],[301, 600],[601, 9999]], + "quotes": [ + { + "text": "Það mælti mín móðir að mér skyldi kaupa fley og fagrar árar, fara á brott með víkingum, standa upp í stafni, stýra dýrum knerri, halda svo til hafnar, höggva mann og annan.", + "source": "Egils saga", + "length": 172, + "id": 1 + }, + { + "text": "Þórólfur gerðist þá svo óður að hann kastaði skildinum á bak sér en tók spjótið tveimur höndum. Hljóp hann þá fram og hjó eða lagði til beggja handa. Stukku menn þá frá tveggja vegna en hann drap marga.", + "source": "Egils saga", + "length": 202, + "id": 2 + }, + { + "text": "Egill settist þar niður og skaut skildinum fyrir fætur sér. Hann hafði hjálm á höfði og lagði sverðið um kné sér og dró annað skeið til hálfs en þá skellti hann aftur í slíðrin.", + "source": "Egils saga", + "length": 177, + "id": 3 + }, + { + "text": "Vitfirringurinn segir að búið sé að jarða sig. Á hverjum sunnudegi fer hann upp í kirkjugarð og setur blóm á leiðið.", + "source": "Englar Alheimsins", + "length": 116, + "id": 4 + }, + { + "text": "Við erum allir vistmenn á Kleppi. Verið svo vinsamlegir að hringja á lögregluna strax. Þetta var ákaflega ánægjuleg máltíð.", + "source": "Englar Alheimsins", + "length": 123, + "id": 5 + }, + { + "text": "Það var komið sumar þegar ég kvaddi háhýsi einverunnar og þennan jarðneska heim.", + "source": "Englar Alheimsins", + "length": 80, + "id": 6 + }, + { + "text": "Kleppur er alls ekki ósnotur bygging, ekki svo ólík höll.", + "source": "Englar Alheimsins", + "length": 57, + "id": 7 + }, + { + "text": "Askurinn er allra trjáa mestur og bestur. Limar hans dreifast yfir heim allan og standa yfir himni.", + "source": "Snorra Edda", + "length": 99, + "id": 8 + }, + { + "text": "Loki er fríður og fagur sýnum, illur í skaplyndi, mjög fjölbreytinn að háttum.", + "source": "Snorra Edda", + "length": 78, + "id": 9 + }, + { + "text": "Hrafnar tveir sitja á öxlum honum og segja í eyru honum öll tíðindi þau er þeir sjá eða heyra. Þeir heita svo: Huginn og Muninn.", + "source": "Snorra Edda", + "length": 128, + "id": 10 + }, + { + "text": "Þegar þú í draumum mínum birtist allt er ljúft og gott. Og ég vildi ég gæti sofið heila öld. Því að nóttin veitir aðeins skamma stund með þér.", + "source": "Stefán og Eyfi - Nína", + "length": 142, + "id": 11 + }, + { + "text": "Svo þegar þú birtist fer sólin að skína, smáfuglar kvaka við raust. Í brjálæðishrifningu býð ég þér Tópas og berjasaft skilyrðislaust.", + "source": "Stuðmenn - Popplag í G-dúr", + "length": 134, + "id": 12 + }, + { + "text": "Hvað getum við gert ef aðrir bjóða betur? Dregið okkur saman, skriðið inn í skelina?", + "source": "Ný Dönsk - Hjálpaðu mér upp", + "length": 84, + "id": 13 + }, + { + "text": "Við ræddum saman heima og geyma. Ég hélt mig hlyti að vera að dreyma en ég var örugglega vakandi.", + "source": "Stuðmenn - Ofboðslega frægur", + "length": 97, + "id": 14 + }, + { + "text": "Af hverju get ég ekki gengið menntaveginn þangað til að ég æli. Af hverju get ég ekki gert neitt af viti. Af hverju fæddist ég loser.", + "source": "Sólstrandargæjarnir - Rangur Maður", + "length": 155, + "id": 15 + }, + { + "text": "Glóð er enn í öskunni og flabrauðssneið í töskunni. Lögg er enn í flöskunni. Við komum öskufullir heim.", + "source": "Helgi Björns og reiðmenn vindanna - Ríðum sem fjandinn", + "length": 103, + "id": 16 + }, + { + "text": "Stál og hnífur er merki mitt, merki farandverkamanna. Þitt var mitt og mitt var þitt meðan ég bjó a meðal manna.", + "source": "Bubbi Morthens - Stál og hnífur", + "length": 112, + "id": 17 + }, + { + "text": "Svitinn perlar á brjóstum þínum, þú bítur í hnúann. Þú flýgur á brott með syndum mínum, Svartur Afgan.", + "source": "Bubbi Morthens - Afgan", + "length": 102, + "id": 18 + }, + { + "text": "Það er stutt í það að storknað hraun mun renna á ný. Það er stutt í að jöklar munu breytast í gufuský.", + "source": "Utangarðsmenn - Hiroshima", + "length": 102, + "id": 19 + }, + { + "text": "Kvöldið er okkar og vor um Vaglaskóg. Við skulum tjalda í grænum berjamó. Leiddu mig vinur í lundinn frá í gær. Lindin þar niðar og birkihríslan grær", + "source": "Vor í Vaglaskógi", + "length": 149, + "id": 20 + }, + { + "text": "Hlakka svo til að hitta börnin: Maríu Hænu, Hafþór og Örninn. Vinna upp tíma, klippa smá og líma. Í eltingaleik fram að háttatíma", + "source": "Prins Póló - París norðursins", + "length": 129, + "id": 21 + }, + { + "text": "Sól slær silfri á voga, sjáið jökulinn loga. Allt er bjart fyrir okkur tveim, því ég er kominn heim.", + "source": "Ég er kominn heim", + "length": 100, + "id": 22 + }, + { + "text": "Fann á ný, betra líf. Af því ég fór loks að trúa því að það væri eitthvað annað, eitthvað meir og miklu stærra en allt sem er.", + "source": "Páll óskar - Betra líf", + "length": 126, + "id": 23 + }, + { + "text": "Hún fýlar ekki lögin mín, en mér er sama. Eitt er fyrir víst að þessi gella er slæm dama. Hún er alltaf vond við mig, orðið að vana. Myndi gera allt saman, allt fyrir hana.", + "source": "JóiPé og Króli - B.O.B.A.", + "length": 172, + "id": 24 + } + ] +} \ No newline at end of file