feat: Add detailed character statistics tracking and visualization (@Amr-Shams)

backend/src/api/controllers/result.ts

@@ -727,7 +727,7 @@ async function calculateXp(
   breakdown.base = baseXp;
 
   let modifier = 1;
-
+  // check if charstats is undefined
   const correctedEverything = charStats
     .slice(1)
     .every((charStat: number) => charStat === 0);
@@ -740,7 +740,6 @@ async function calculateXp(
     modifier += 0.25;
     breakdown["corrected"] = Math.round(baseXp * 0.25);
   }
-
   if (mode === "quote") {
     // real sentences bonus
     modifier += 0.5;

backend/src/utils/result.ts

@@ -22,6 +22,7 @@ export function buildDbResult(
   isPb: boolean
 ): DBResult {
   const ce = completedEvent;
+
   const res: DBResult = {
     _id: new ObjectId(),
     uid: ce.uid,
@@ -51,6 +52,7 @@ export function buildDbResult(
     bailedOut: ce.bailedOut,
     blindMode: ce.blindMode,
     name: userName,
+    detailedCharStats: ce.detailedCharStats,
   };
 
   //compress object by omitting default values. Frontend will add them back after reading

frontend/src/html/pages/test.html

@@ -72,7 +72,6 @@
           <i class="fas fa-search"></i>
         </button>
       </div>
-
       <div class="zen">
         <div
           class="textButton"
@@ -83,9 +82,7 @@
             margin-left: 0;
             margin-right: 0;
           "
-        >
-
-        </div>
+        ></div>
       </div>
 
       <div class="customText">
@@ -326,6 +323,15 @@
           </div>
           <div class="bottom">-</div>
         </div>
+
+        <div class="group charStats">
+          <div class="top">miss / nail</div>
+          <div class="bottom" aria-label="" data-balloon-pos="up">
+            <span id="hardestChar">-</span>
+            /
+            <span id="easiestChar">-</span>
+          </div>
+        </div>
       </div>
       <div class="chart">
         <div class="chartLegend">
@@ -399,6 +405,24 @@
           </div>
           <div class="words"></div>
         </div>
+        <div id="resultCharStats" class="hidden">
+          <div class="title">
+            <span>character statistics</span>
+            <button
+              id="copyCharStatsButton"
+              class="textButton"
+              aria-label="Copy character stats"
+              data-balloon-pos="up"
+              style="display: inline-block"
+              tabindex="-1"
+            >
+              <i class="fas fa-fw fa-copy"></i>
+            </button>
+          </div>
+          <div id="charStatsChartContainer">
+            <canvas id="charStatsChart"></canvas>
+          </div>
+        </div>
         <div id="resultReplay" class="hidden">
           <div class="title">
             watch replay
@@ -459,6 +483,15 @@
           >
             <i class="fas fa-fw fa-align-left"></i>
           </button>
+          <button
+            class="text"
+            id="showCharStatsButton"
+            aria-label="Toggle character statistics"
+            role="button"
+            data-balloon-pos="down"
+          >
+            <i class="fas fa-fw fa-chart-bar"></i>
+          </button>
           <button
             class="text"
             id="watchReplayButton"

frontend/src/styles/test.scss

@@ -571,6 +571,66 @@
   position: relative;
 }
 
+#resultCharStats {
+  position: relative;
+
+  #charStatsChartContainer {
+    height: 300px;
+    margin: 1rem 0;
+    position: relative;
+  }
+
+  .charStatsList {
+    margin-top: 1rem;
+
+    .charStatsListContent {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+
+      .charStatsHeader {
+        display: grid;
+        grid-template-columns: 2fr 1fr 1fr;
+        gap: 1rem;
+        padding: 0.5rem;
+        border-bottom: 1px solid var(--sub-color);
+        font-weight: bold;
+        color: var(--main-color);
+      }
+
+      .charStatsItem {
+        display: grid;
+        grid-template-columns: 2fr 1fr 1fr;
+        gap: 1rem;
+        padding: 0.5rem;
+        border-bottom: 1px solid var(--sub-color);
+        opacity: 0.8;
+
+        &:hover {
+          opacity: 1;
+          background-color: var(--bg-color);
+        }
+
+        .charStatsChar {
+          font-family: var(--font);
+          font-size: 1.2rem;
+          color: var(--main-color);
+        }
+
+        .charStatsRate {
+          color: var(--error-color);
+          text-align: right;
+        }
+
+        .charStatsCount {
+          text-align: right;
+          color: var(--sub-color);
+        }
+      }
+    }
+  }
+}
+
 #words.noErrorBorder,
 #resultWordsHistory.noErrorBorder {
   .word.error {
@@ -685,7 +745,8 @@
     }
 
     #resultWordsHistory,
-    #resultReplay {
+    #resultReplay,
+    #resultCharStats {
       // grid-area: wordsHistory;
       color: var(--sub-color);
       // grid-column: 1/3;
@@ -694,7 +755,8 @@
         padding: 0 0.25em;
       }
       #copyWordsListButton,
-      #playpauseReplayButton {
+      #playpauseReplayButton,
+      #copyCharStatsButton {
         margin-left: 0.5em;
       }
       .heatmapLegend {

frontend/src/ts/controllers/route-controller.ts

@@ -1,5 +1,4 @@
 import * as PageController from "./page-controller";
-import * as TestUI from "../test/test-ui";
 import * as PageTransition from "../states/page-transition";
 import { isAuthAvailable, isAuthenticated } from "../firebase";
 import { isFunboxActive } from "../test/funbox/list";
@@ -170,14 +169,14 @@ export async function navigate(
   if (
     !options.force &&
     (TestState.testRestarting ||
-      TestUI.resultCalculating ||
+      TestState.resultCalculating ||
       PageTransition.get())
   ) {
     console.debug(
       `navigate: ${url} ignored, page is busy (testRestarting: ${
         TestState.testRestarting
       }, resultCalculating: ${
-        TestUI.resultCalculating
+        TestState.resultCalculating
       }, pageTransition: ${PageTransition.get()})`
     );
     return;

frontend/src/ts/input/handlers/before-insert-text.ts

@@ -23,7 +23,7 @@ export function onBeforeInsertText(data: string): boolean {
     return true;
   }
 
-  if (TestUI.resultCalculating) {
+  if (TestState.resultCalculating) {
     return true;
   }
 

frontend/src/ts/modals/last-signed-out-result.ts

@@ -61,7 +61,10 @@ function fillData(): void {
   fillGroup("acc", r.acc + "%");
   fillGroup("raw", r.rawWpm);
   fillGroup("con", r.consistency + "%");
-  fillGroup("chardata", r.charStats.join("/"));
+
+  const [correct, missed, incorrect, extra] = r.charStats;
+
+  fillGroup("chardata", `${correct}/${missed}/${incorrect}/${extra}`);
 
   let tt = r.mode + " " + r.mode2;