monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2024-09-20 07:16:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: use css for heatmap colors (@fehmer) (#5879)

Browse source
This commit is contained in:
Christian Fehmer 2024-09-12 20:57:20 +02:00 committed by GitHub
parent f9bd7d778b
commit 98acf75613
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 65 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
frontend/src/styles/test.scss
View file

@ -637,9 +637,32 @@
color: var(--sub-color);
// grid-column: 1/3;
margin-bottom: 1rem;
--unreached-color: var(--sub-color);
--speed-0-color: var(--colorful-error-color);
--speed-1-color: color-mix(
in srgb,
var(--colorful-error-color),
var(--text-color)
);
--speed-2-color: var(--text-color);
--speed-3-color: color-mix(in srgb, var(--main-color), var(--text-color));
--speed-4-color: var(--main-color);
&.withSubColor {
--unreached-color: var(--sub-alt-color);
--speed-2-color: var(--sub-color);
--speed-3-color: color-mix(
in srgb,
var(--sub-color),
var(--text-color)
);
}
.textButton {
padding: 0 0.25em;
}
#copyWordsListButton,
#playpauseReplayButton {
margin-left: 0.5em;
@ -652,6 +675,7 @@
font-size: 0.75rem;
color: var(--sub-color);
width: min-content;
.boxes {
// display: flex;
display: grid;
@ -666,11 +690,22 @@
display: grid;
place-content: center center;
}
.box:nth-child(1) {
.box0 {
border-radius: var(--roundness) 0 0 var(--roundness);
background-color: var(--speed-0-color);
}
.box:nth-child(5) {
.box1 {
background-color: var(--speed-1-color);
}
.box2 {
background-color: var(--speed-2-color);
}
.box3 {
background-color: var(--speed-3-color);
}
.box4 {
border-radius: 0 var(--roundness) var(--roundness) 0;
background-color: var(--speed-4-color);
}
}
}
@ -685,9 +720,27 @@
flex-wrap: wrap;
width: 100%;
align-content: flex-start;
.unreached {
color: var(--unreached-color);
}
.word {
position: relative;
margin: 0.18rem 0.6rem 0.15rem 0;
&[speed="0"] {
color: var(--speed-0-color);
}
&[speed="1"] {
color: var(--speed-1-color);
}
&[speed="2"] {
color: var(--speed-2-color);
}
&[speed="3"] {
color: var(--speed-3-color);
}
&[speed="4"] {
color: var(--speed-4-color);
}
& letter.corrected {
color: var(--text-color);
border-bottom: 2px dotted var(--main-color);

40
frontend/src/ts/test/test-ui.ts
View file

@ -12,7 +12,6 @@ import * as Misc from "../utils/misc";
import * as Strings from "../utils/strings";
import * as JSONData from "../utils/json-data";
import * as Numbers from "../utils/numbers";
import { blendTwoHexColors } from "../utils/colors";
import { get as getTypingSpeedUnit } from "../utils/typing-speed-units";
import * as SlowTimer from "../states/slow-timer";
import * as CompositionState from "../states/composition";
@ -1319,6 +1318,14 @@ export async function applyBurstHeatmap(): Promise<void> {
if (Config.burstHeatmap) {
$("#resultWordsHistory .heatmapLegend").removeClass("hidden");
const themeColors = await ThemeColors.getAll();
if (themeColors.main === themeColors.text) {
$("#resultWordsHistory").addClass("withSubColor");
} else {
$("#resultWordsHistory").removeClass("withSubColor");
}
let burstlist = [...TestInput.burstHistory];
burstlist = burstlist.filter((x) => x !== Infinity);
@ -1329,28 +1336,6 @@ export async function applyBurstHeatmap(): Promise<void> {
burstlist[index] = Math.round(typingSpeedUnit.fromWpm(burst));
});
const themeColors = await ThemeColors.getAll();
let colors = [
themeColors.colorfulError,
blendTwoHexColors(themeColors.colorfulError, themeColors.text, 0.5),
themeColors.text,
blendTwoHexColors(themeColors.main, themeColors.text, 0.5),
themeColors.main,
];
let unreachedColor = themeColors.sub;
if (themeColors.main === themeColors.text) {
colors = [
themeColors.colorfulError,
blendTwoHexColors(themeColors.colorfulError, themeColors.text, 0.5),
themeColors.sub,
blendTwoHexColors(themeColors.sub, themeColors.text, 0.5),
themeColors.main,
];
unreachedColor = themeColors.subAlt;
}
const burstlistSorted = burstlist.sort((a, b) => a - b);
const burstlistLength = burstlist.length;
@ -1400,7 +1385,7 @@ export async function applyBurstHeatmap(): Promise<void> {
$("#resultWordsHistory .words .word").each((_, word) => {
const wordBurstAttr = $(word).attr("burst");
if (wordBurstAttr === undefined) {
$(word).css("color", unreachedColor);
$(word).addClass("unreached");
} else {
let wordBurstVal = parseInt(wordBurstAttr);
wordBurstVal = Math.round(
@ -1408,16 +1393,11 @@ export async function applyBurstHeatmap(): Promise<void> {
);
steps.forEach((step) => {
if (wordBurstVal >= step.val) {
$(word).addClass("heatmapInherit");
$(word).css("color", colors[step.colorId] as string);
$(word).addClass("heatmapInherit").attr("speed", step.colorId);
}
});
}
});
$("#resultWordsHistory .heatmapLegend .boxes .box").each((index, box) => {
$(box).css("background", colors[index] as string);
});
} else {
$("#resultWordsHistory .heatmapLegend").addClass("hidden");
$("#resultWordsHistory .words .word").removeClass("heatmapInherit");