From 60720fbc80f3903d74f3e06c3e91f481d6e27ed6 Mon Sep 17 00:00:00 2001
From: ademirkan <70380876+ademirkan@users.noreply.github.com>
Date: Thu, 29 Jun 2023 09:53:22 -0700
Subject: [PATCH] Improve word highlight UI in input history (#4417) ademirkan

* put speed above word in input highlight

* updated class name
using class nesting

* put speed below word, added nocursor

* removed unnecessary line

---------

Co-authored-by: Miodec <jack@monkeytype.com>
---
 frontend/src/styles/test.scss                 | 19 +++++++++++--------
 .../src/ts/controllers/chart-controller.ts    |  4 ++--
 frontend/src/ts/test/test-ui.ts               | 14 +++++++-------
 3 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss
index 2fe4da85f..c867d0a92 100644
--- a/frontend/src/styles/test.scss
+++ b/frontend/src/styles/test.scss
@@ -280,9 +280,6 @@
   margin: 0.25em;
   color: var(--sub-color);
   font-variant: no-common-ligatures;
-  // display: flex;
-  // transition: 0.25s
-  /*   margin-bottom: 1px; */
   border-bottom: 2px solid transparent;
   letter {
     display: inline-block;
@@ -296,8 +293,7 @@
     opacity: 0.25;
   }
 
-  // transition: .25s;
-  .wordInputAfter {
+  .wordInputHighlight {
     opacity: 1;
     white-space: nowrap;
     position: absolute;
@@ -315,12 +311,19 @@
     text-shadow: none;
     top: -0.5rem;
     z-index: 10;
-    cursor: text;
-    .speed {
-      font-size: 0.75rem;
+
+    &.withSpeed {
+      .speed {
+        font-size: 0.75rem;
+        color: var(--sub-alt-color);
+      }
     }
   }
 
+  &.nocursor {
+    cursor: none;
+  }
+
   &.error {
     /*   margin-bottom: 1px; */
     border-bottom: 2px solid var(--error-color);
diff --git a/frontend/src/ts/controllers/chart-controller.ts b/frontend/src/ts/controllers/chart-controller.ts
index a91e0ae84..fc20b8b25 100644
--- a/frontend/src/ts/controllers/chart-controller.ts
+++ b/frontend/src/ts/controllers/chart-controller.ts
@@ -217,7 +217,7 @@ export const result: ChartWithUpdateColors<
           callbacks: {
             afterLabel: function (ti): string {
               try {
-                $(".wordInputAfter").remove();
+                $(".wordInputHighlight").remove();
 
                 const wordsToHighlight =
                   TestInput.keypressPerSecond[parseInt(ti.label) - 1].words;
@@ -230,7 +230,7 @@ export const result: ChartWithUpdateColors<
                   const input = wordEl.attr("input");
                   if (input !== undefined) {
                     wordEl.append(
-                      `<div class="wordInputAfter">${input
+                      `<div class="wordInputHighlight">${input
                         .replace(/\t/g, "_")
                         .replace(/\n/g, "_")
                         .replace(/</g, "&lt")
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index acf36f0ef..f1a30dd7f 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -898,13 +898,13 @@ async function loadWordsHistory(): Promise<boolean> {
         const correctedChar = !containsKorean
           ? TestInput.corrected.getHistory(i)
           : Hangul.assemble(TestInput.corrected.getHistory(i).split(""));
-        wordEl = `<div class='word' burst="${
+        wordEl = `<div class='word nocursor' burst="${
           TestInput.burstHistory[i]
         }" input="${correctedChar
           .replace(/"/g, "&quot;")
           .replace(/ /g, "_")}">`;
       } else {
-        wordEl = `<div class='word' burst="${
+        wordEl = `<div class='word nocursor' burst="${
           TestInput.burstHistory[i]
         }" input="${input.replace(/"/g, "&quot;").replace(/ /g, "_")}">`;
       }
@@ -931,14 +931,14 @@ async function loadWordsHistory(): Promise<boolean> {
         }
         if (wordstats.incorrect !== 0 || Config.mode !== "time") {
           if (Config.mode !== "zen" && input !== word) {
-            wordEl = `<div class='word error' burst="${
+            wordEl = `<div class='word nocursor error' burst="${
               TestInput.burstHistory[i]
             }" input="${input.replace(/"/g, "&quot;").replace(/ /g, "_")}">`;
           }
         }
       } else {
         if (Config.mode !== "zen" && input !== word) {
-          wordEl = `<div class='word error' burst="${
+          wordEl = `<div class='word nocursor error' burst="${
             TestInput.burstHistory[i]
           }" input="${input.replace(/"/g, "&quot;").replace(/ /g, "_")}">`;
         }
@@ -1214,11 +1214,11 @@ $(".pageTest #toggleBurstHeatmap").on("click", async () => {
 });
 
 $(".pageTest #resultWordsHistory").on("mouseleave", ".words .word", () => {
-  $(".wordInputAfter").remove();
+  $(".wordInputHighlight").remove();
 });
 
 $(".pageTest #result #wpmChart").on("mouseleave", () => {
-  $(".wordInputAfter").remove();
+  $(".wordInputHighlight").remove();
 });
 
 $(".pageTest #resultWordsHistory").on("mouseenter", ".words .word", (e) => {
@@ -1227,7 +1227,7 @@ $(".pageTest #resultWordsHistory").on("mouseenter", ".words .word", (e) => {
     const burst = parseInt(<string>$(e.currentTarget).attr("burst"));
     if (input !== undefined) {
       $(e.currentTarget).append(
-        `<div class="wordInputAfter">
+        `<div class="wordInputHighlight withSpeed">
           <div class="text">
           ${input
             .replace(/\t/g, "_")