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

monkeytypegame · Sep 12, 2024 · 98acf75 · 98acf75
1 parent f9bd7d7
commit 98acf75
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 32 deletions.
diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss
@@ -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);
+          }
+          .box1 {
+            background-color: var(--speed-1-color);
+          }
+          .box2 {
+            background-color: var(--speed-2-color);
           }
-          .box:nth-child(5) {
+          .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);

diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
@@ -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,24 +1385,19 @@ 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(
           getTypingSpeedUnit(Config.typingSpeedUnit).fromWpm(wordBurstVal)
         );
         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");