From 232aa73061cf18d6e2b4cc9e7fb590aa419563d3 Mon Sep 17 00:00:00 2001 From: Jack Date: Sat, 7 Aug 2021 15:26:44 +0100 Subject: [PATCH] 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) {