mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2024-09-20 07:16:17 +08:00
revert: use css for heatmap colors (@fehmer) (#5892)
Reverts monkeytypegame/monkeytype#5879 Co-authored-by: Christian Fehmer <fehmer@users.noreply.github.com>
This commit is contained in:
parent
07d94a6d1c
commit
c4dbaf2ec1
|
@ -637,32 +637,9 @@
|
|||
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;
|
||||
|
@ -675,7 +652,6 @@
|
|||
font-size: 0.75rem;
|
||||
color: var(--sub-color);
|
||||
width: min-content;
|
||||
|
||||
.boxes {
|
||||
// display: flex;
|
||||
display: grid;
|
||||
|
@ -690,22 +666,11 @@
|
|||
display: grid;
|
||||
place-content: center center;
|
||||
}
|
||||
.box0 {
|
||||
.box:nth-child(1) {
|
||||
border-radius: var(--roundness) 0 0 var(--roundness);
|
||||
background-color: var(--speed-0-color);
|
||||
}
|
||||
.box1 {
|
||||
background-color: var(--speed-1-color);
|
||||
}
|
||||
.box2 {
|
||||
background-color: var(--speed-2-color);
|
||||
}
|
||||
.box3 {
|
||||
background-color: var(--speed-3-color);
|
||||
}
|
||||
.box4 {
|
||||
.box:nth-child(5) {
|
||||
border-radius: 0 var(--roundness) var(--roundness) 0;
|
||||
background-color: var(--speed-4-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -720,27 +685,9 @@
|
|||
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);
|
||||
|
|
|
@ -12,6 +12,7 @@ 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";
|
||||
|
@ -1318,14 +1319,6 @@ 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);
|
||||
|
@ -1336,6 +1329,28 @@ 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;
|
||||
|
||||
|
@ -1385,7 +1400,7 @@ export async function applyBurstHeatmap(): Promise<void> {
|
|||
$("#resultWordsHistory .words .word").each((_, word) => {
|
||||
const wordBurstAttr = $(word).attr("burst");
|
||||
if (wordBurstAttr === undefined) {
|
||||
$(word).addClass("unreached");
|
||||
$(word).css("color", unreachedColor);
|
||||
} else {
|
||||
let wordBurstVal = parseInt(wordBurstAttr);
|
||||
wordBurstVal = Math.round(
|
||||
|
@ -1393,11 +1408,16 @@ export async function applyBurstHeatmap(): Promise<void> {
|
|||
);
|
||||
steps.forEach((step) => {
|
||||
if (wordBurstVal >= step.val) {
|
||||
$(word).addClass("heatmapInherit").attr("speed", step.colorId);
|
||||
$(word).addClass("heatmapInherit");
|
||||
$(word).css("color", colors[step.colorId] as string);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$("#resultWordsHistory .heatmapLegend .boxes .box").each((index, box) => {
|
||||
$(box).css("background", colors[index] as string);
|
||||
});
|
||||
} else {
|
||||
$("#resultWordsHistory .heatmapLegend").addClass("hidden");
|
||||
$("#resultWordsHistory .words .word").removeClass("heatmapInherit");
|
||||
|
|
Loading…
Reference in a new issue