monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-10-28 17:56:09 +08:00
Code Issues Projects Releases Packages Wiki Activity

updated the way theme colors are stored and accessed

Browse source 
should completely fix an issue where graphs or keymaps are using the wrong colors
This commit is contained in:
Jack 2021-08-07 15:26:44 +01:00
parent 93fe3023f2
commit 232aa73061
8 changed files with 177 additions and 111 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
src/js/chart-controller.js
View file

@ -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 () {

6
src/js/monkey-power.js
View file

@ -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));
}

22
src/js/settings/theme-picker.js
View file

@ -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);

24
src/js/test/keymap.js
View file

@ -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"

18
src/js/test/test-logic.js
View file

@ -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,

4
src/js/test/test-ui.js
View file

@ -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,

104
src/js/theme-colors.js
View file

@ -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(" ", "");
}

52
src/js/theme-controller.js
View file

@ -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) {