From ff9ff5b96bdbda99e30e02a3894f0c7c4ef48dfe Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Wed, 23 Oct 2024 07:31:43 +0100
Subject: [PATCH] cleanup hand acc

---
 projects/website/src/common/change.tsx        | 43 ++++++++++++----
 .../src/components/score/hand-accuracy.tsx    | 39 +++++++++++++++
 .../src/components/score/score-stats.tsx      | 49 ++++++-------------
 3 files changed, 87 insertions(+), 44 deletions(-)
 create mode 100644 projects/website/src/components/score/hand-accuracy.tsx

diff --git a/projects/website/src/common/change.tsx b/projects/website/src/common/change.tsx
index 17e0ead..888929a 100644
--- a/projects/website/src/common/change.tsx
+++ b/projects/website/src/common/change.tsx
@@ -1,19 +1,44 @@
 import React from "react";
+import { formatNumberWithCommas, formatPp } from "@ssr/common/utils/number-utils";
 
-/**
- * Renders the change for a stat.
- *
- * @param change the change
- * @param isPp whether the stat is pp
- * @param formatValue the function to format the value
- */
-export function renderChange(change: number | undefined, isPp: boolean, formatValue: (value: number) => string) {
+type ChangeProps = {
+  /**
+   * The amount the value changed
+   */
+  change: number | undefined;
+
+  /**
+   * The function to format the value
+   * @param value
+   */
+  formatValue?: (value: number) => string;
+
+  /**
+   * Whether the number is a pp number
+   */
+  isPp?: boolean;
+
+  /**
+   * Should we use colors?
+   */
+  showColors?: boolean;
+};
+
+export function Change({ change, formatValue, isPp, showColors }: ChangeProps) {
   if (change === 0 || (change && change > 0 && change < 0.01) || change === undefined) {
     return null;
   }
 
+  // Default formats
+  if (!formatValue) {
+    formatValue = formatNumberWithCommas;
+    if (isPp) {
+      formatValue = formatPp;
+    }
+  }
+
   return (
-    <p className={`text-sm ${change > 0 ? "text-green-400" : "text-red-400"}`}>
+    <p className={`text-sm ${showColors && (change > 0 ? "text-green-400" : "text-red-400")}`}>
       {change > 0 ? "+" : ""}
       {`${formatValue(change)}${isPp ? "pp" : ""}`}
     </p>
diff --git a/projects/website/src/components/score/hand-accuracy.tsx b/projects/website/src/components/score/hand-accuracy.tsx
new file mode 100644
index 0000000..864c56b
--- /dev/null
+++ b/projects/website/src/components/score/hand-accuracy.tsx
@@ -0,0 +1,39 @@
+import Tooltip from "@/components/tooltip";
+import { Change } from "@/common/change";
+import ScoreSaberScore from "@ssr/common/score/impl/scoresaber-score";
+import { capitalizeFirstLetter } from "@/common/string-utils";
+
+type HandAccuracyProps = {
+  /**
+   * The score to get the hand accuracy from
+   */
+  score: ScoreSaberScore;
+
+  /**
+   * The hand to get the hand accuracy from
+   */
+  hand: "left" | "right";
+};
+
+export function HandAccuracy({ score, hand }: HandAccuracyProps) {
+  if (!score.additionalData) {
+    return undefined;
+  }
+  const { handAccuracy } = score.additionalData;
+  const scoreImprovement = score.additionalData.scoreImprovement;
+  const previousHandAccuracy = scoreImprovement ? handAccuracy[hand] - scoreImprovement.handAccuracy[hand] : undefined;
+
+  const formattedHand = capitalizeFirstLetter(hand);
+  return (
+    <div className="flex flex-col items-center justify-center">
+      <Tooltip display={`${formattedHand} Hand Accuracy`}>
+        <p>{handAccuracy[hand].toFixed(2)}</p>
+      </Tooltip>
+      {scoreImprovement && previousHandAccuracy && (
+        <Tooltip display={`Previous ${formattedHand} Hand Accuracy: ${previousHandAccuracy.toFixed(2)}`}>
+          <Change change={scoreImprovement.handAccuracy[hand]} formatValue={num => num.toFixed(2)} />
+        </Tooltip>
+      )}
+    </div>
+  );
+}
diff --git a/projects/website/src/components/score/score-stats.tsx b/projects/website/src/components/score/score-stats.tsx
index 11bd854..dc7e6fc 100644
--- a/projects/website/src/components/score/score-stats.tsx
+++ b/projects/website/src/components/score/score-stats.tsx
@@ -7,8 +7,9 @@ import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leade
 import ScoreMissesBadge from "@/components/score/badges/score-misses";
 import { Modifier } from "@ssr/common/score/modifier";
 import { ScoreModifiers } from "@/components/score/score-modifiers";
-import { renderChange } from "@/common/change";
+import { Change } from "@/common/change";
 import { scoresaberService } from "@ssr/common/service/impl/scoresaber";
+import { HandAccuracy } from "@/components/score/hand-accuracy";
 
 const badges: ScoreBadge[] = [
   {
@@ -17,6 +18,8 @@ const badges: ScoreBadge[] = [
       return "bg-pp";
     },
     create: (score: ScoreSaberScore, leaderboard: ScoreSaberLeaderboard) => {
+      const scoreImprovement = score.additionalData?.scoreImprovement;
+      const previousAccuracy = scoreImprovement ? score.accuracy - scoreImprovement?.accuracy : undefined;
       const fcAccuracy = score.additionalData?.fcAccuracy;
       const pp = score.pp;
       const weight = score.weight;
@@ -39,7 +42,10 @@ const badges: ScoreBadge[] = [
               </div>
             }
           >
-            <p>{formatPp(pp)}pp</p>
+            <div className="flex flex-col items-center justify-center cursor-default">
+              <p>{formatPp(pp)}pp</p>
+              {previousAccuracy && <Change change={previousAccuracy} isPp />}
+            </div>
           </Tooltip>
         </>
       );
@@ -93,10 +99,9 @@ const badges: ScoreBadge[] = [
               <p>
                 {acc.toFixed(2)}% {modCount > 0 && <ScoreModifiers type="simple" limit={1} score={score} />}
               </p>
-              {scoreImprovement &&
-                renderChange(scoreImprovement.accuracy, false, num => {
-                  return `${num.toFixed(2)}%`;
-                })}
+              {scoreImprovement && (
+                <Change change={scoreImprovement.accuracy} formatValue={num => `${num.toFixed(2)}%`} />
+              )}
             </div>
           </Tooltip>
         </>
@@ -111,7 +116,7 @@ const badges: ScoreBadge[] = [
       return (
         <div className="flex flex-col items-center justify-center">
           <p>{formatNumberWithCommas(Number(score.score.toFixed(0)))}</p>
-          {scoreImprovement && renderChange(scoreImprovement.score, false, formatNumberWithCommas)}
+          {scoreImprovement && <Change change={scoreImprovement.score} />}
         </div>
       );
     },
@@ -120,40 +125,14 @@ const badges: ScoreBadge[] = [
     name: "Left Hand Accuracy",
     color: () => "bg-hands-left",
     create: (score: ScoreSaberScore) => {
-      if (!score.additionalData) {
-        return undefined;
-      }
-      const { handAccuracy } = score.additionalData;
-      const scoreImprovement = score.additionalData.scoreImprovement;
-
-      return (
-        <Tooltip display={"Left Hand Accuracy"}>
-          <div className="flex flex-col items-center justify-center">
-            <p>{handAccuracy.left.toFixed(2)}</p>
-            {scoreImprovement && renderChange(scoreImprovement.handAccuracy.left, false, num => num.toFixed(2))}
-          </div>
-        </Tooltip>
-      );
+      return <HandAccuracy score={score} hand="left" />;
     },
   },
   {
     name: "Right Hand Accuracy",
     color: () => "bg-hands-right",
     create: (score: ScoreSaberScore) => {
-      if (!score.additionalData) {
-        return undefined;
-      }
-
-      const { handAccuracy } = score.additionalData;
-      const scoreImprovement = score.additionalData.scoreImprovement;
-      return (
-        <Tooltip display={"Right Hand Accuracy"}>
-          <div className="flex flex-col items-center justify-center">
-            <p>{handAccuracy.right.toFixed(2)}</p>
-            {scoreImprovement && renderChange(scoreImprovement.handAccuracy.right, false, num => num.toFixed(2))}
-          </div>
-        </Tooltip>
-      );
+      return <HandAccuracy score={score} hand="right" />;
     },
   },
   {