cleanup score badges

projects/website/src/components/score/badges/hand-accuracy.tsx

@@ -1,21 +1,16 @@
 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";
+import { ScoreBadgeProps } from "@/components/score/badges/badge-props";
 
-type HandAccuracyProps = {
+type HandAccuracyProps = ScoreBadgeProps & {
-  /**
-   * 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) {
+export function HandAccuracyBadge({ score, hand }: HandAccuracyProps) {
   if (!score.additionalData) {
     return undefined;
   }

projects/website/src/components/score/badges/score-accuracy.tsx

@@ -0,0 +1,67 @@
+import { getScoreBadgeFromAccuracy } from "@/common/song-utils";
+import { Modifier } from "@ssr/common/score/modifier";
+import Tooltip from "@/components/tooltip";
+import { ScoreModifiers } from "@/components/score/score-modifiers";
+import { Change } from "@/common/change";
+import { ScoreBadgeProps } from "@/components/score/badges/badge-props";
+import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
+
+type ScoreAccuracyProps = ScoreBadgeProps & {
+  /**
+   * The leaderboard the score was set on.
+   */
+  leaderboard: ScoreSaberLeaderboard;
+};
+
+export function ScoreAccuracyBadge({ score, leaderboard }: ScoreAccuracyProps) {
+  const scoreImprovement = score.additionalData?.scoreImprovement;
+  const previousAccuracy = scoreImprovement ? score.accuracy - scoreImprovement.accuracy : undefined;
+
+  const fcAccuracy = score.additionalData?.fcAccuracy;
+  const scoreBadge = getScoreBadgeFromAccuracy(score.accuracy);
+  let accDetails = `${scoreBadge.name != "-" ? scoreBadge.name : ""}`;
+  if (scoreBadge.max == null) {
+    accDetails += ` (> ${scoreBadge.min}%)`;
+  } else if (scoreBadge.min == null) {
+    accDetails += ` (< ${scoreBadge.max}%)`;
+  } else {
+    accDetails += ` (${scoreBadge.min}% - ${scoreBadge.max}%)`;
+  }
+
+  const failed = score.modifiers.includes("No Fail" as Modifier);
+  const modCount = score.modifiers.length;
+  return (
+    <>
+      <div className="flex flex-col items-center justify-center cursor-default">
+        <Tooltip
+          display={
+            <div className="flex flex-col gap-2">
+              <div>
+                <p className="font-semibold">Accuracy</p>
+                <p>Score: {accDetails}</p>
+                {!score.fullCombo && fcAccuracy && <p>Full Combo: {fcAccuracy.toFixed(2)}%</p>}
+              </div>
+
+              {modCount > 0 && (
+                <div>
+                  <p className="font-semibold">Modifiers</p>
+                  <ScoreModifiers type="full" score={score} />
+                </div>
+              )}
+              {failed && <p className="text-red-500">Failed</p>}
+            </div>
+          }
+        >
+          <p>
+            {score.accuracy.toFixed(2)}% {modCount > 0 && <ScoreModifiers type="simple" limit={1} score={score} />}
+          </p>
+        </Tooltip>
+        {scoreImprovement && previousAccuracy && (
+          <Tooltip display={`Previous Accuracy: ${previousAccuracy.toFixed(2)}%`}>
+            <Change change={scoreImprovement.accuracy} formatValue={num => `${num.toFixed(2)}%`} />
+          </Tooltip>
+        )}
+      </div>
+    </>
+  );
+}

projects/website/src/components/score/badges/score-pp.tsx

@@ -0,0 +1,49 @@
+import { ScoreBadgeProps } from "@/components/score/badges/badge-props";
+import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
+import Tooltip from "@/components/tooltip";
+import { formatPp } from "@ssr/common/utils/number-utils";
+import { scoresaberService } from "@ssr/common/service/impl/scoresaber";
+import { Change } from "@/common/change";
+
+type ScorePpProps = ScoreBadgeProps & {
+  /**
+   * The leaderboard the score was set on.
+   */
+  leaderboard: ScoreSaberLeaderboard;
+};
+
+export function ScorePpBadge({ score, leaderboard }: ScorePpProps) {
+  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;
+  if (pp === 0 || pp === undefined || weight === undefined) {
+    return undefined;
+  }
+  const weightedPp = pp * weight;
+  const previousPp = fcAccuracy ? scoresaberService.getPp(leaderboard.stars, fcAccuracy).toFixed(0) : undefined;
+  const isSamePp = previousPp === pp.toFixed(0);
+
+  return (
+    <>
+      <Tooltip
+        display={
+          <div>
+            <p className="font-semibold">Performance Points</p>
+            <p>Raw: {formatPp(pp)}pp</p>
+            <p>
+              Weighted: {formatPp(weightedPp)}pp ({(100 * weight).toFixed(2)}%)
+            </p>
+            {previousPp && !isSamePp && <p>Full Combo: {previousPp}pp</p>}
+          </div>
+        }
+      >
+        <div className="flex flex-col items-center justify-center cursor-default">
+          <p>{formatPp(pp)}pp</p>
+          {previousAccuracy && <Change change={previousAccuracy} isPp />}
+        </div>
+      </Tooltip>
+    </>
+  );
+}

projects/website/src/components/score/badges/score-score.tsx

@@ -0,0 +1,14 @@
+import { ScoreBadgeProps } from "@/components/score/badges/badge-props";
+import { formatNumberWithCommas } from "@ssr/common/utils/number-utils";
+import { Change } from "@/common/change";
+
+export function ScoreScoreBadge({ score }: ScoreBadgeProps) {
+  const scoreImprovement = score.additionalData?.scoreImprovement;
+
+  return (
+    <div className="flex flex-col items-center justify-center">
+      <p>{formatNumberWithCommas(Number(score.score.toFixed(0)))}</p>
+      {scoreImprovement && <Change change={scoreImprovement.score} />}
+    </div>
+  );
+}

projects/website/src/components/score/score-stats.tsx

@@ -1,15 +1,12 @@
-import { formatNumberWithCommas, formatPp } from "@ssr/common/utils/number-utils";
 import { getScoreBadgeFromAccuracy } from "@/common/song-utils";
-import Tooltip from "@/components/tooltip";
 import { ScoreBadge, ScoreBadges } from "@/components/score/score-badge";
 import ScoreSaberScore from "@ssr/common/score/impl/scoresaber-score";
 import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
 import ScoreMissesBadge from "@/components/score/badges/score-misses";
-import { Modifier } from "@ssr/common/score/modifier";
+import { HandAccuracyBadge } from "@/components/score/badges/hand-accuracy";
-import { ScoreModifiers } from "@/components/score/score-modifiers";
+import { ScoreAccuracyBadge } from "@/components/score/badges/score-accuracy";
-import { Change } from "@/common/change";
+import { ScorePpBadge } from "@/components/score/badges/score-pp";
-import { scoresaberService } from "@ssr/common/service/impl/scoresaber";
+import { ScoreScoreBadge } from "@/components/score/badges/score-score";
-import { HandAccuracy } from "@/components/score/hand-accuracy";
 
 const badges: ScoreBadge[] = [
   {
@@ -18,37 +15,10 @@ const badges: ScoreBadge[] = [
       return "bg-pp";
     },
     create: (score: ScoreSaberScore, leaderboard: ScoreSaberLeaderboard) => {
-      const scoreImprovement = score.additionalData?.scoreImprovement;
+      if (!score.pp) {
-      const previousAccuracy = scoreImprovement ? score.accuracy - scoreImprovement?.accuracy : undefined;
-      const fcAccuracy = score.additionalData?.fcAccuracy;
-      const pp = score.pp;
-      const weight = score.weight;
-      if (pp === 0 || pp === undefined || weight === undefined) {
         return undefined;
       }
-      const weightedPp = pp * weight;
+      return <ScorePpBadge score={score} leaderboard={leaderboard} />;
-
-      return (
-        <>
-          <Tooltip
-            display={
-              <div>
-                <p className="font-semibold">Performance Points</p>
-                <p>Raw: {formatPp(pp)}pp</p>
-                <p>
-                  Weighted: {formatPp(weightedPp)}pp ({(100 * weight).toFixed(2)}%)
-                </p>
-                {fcAccuracy && <p>Full Combo: {scoresaberService.getPp(leaderboard.stars, fcAccuracy).toFixed(0)}pp</p>}
-              </div>
-            }
-          >
-            <div className="flex flex-col items-center justify-center cursor-default">
-              <p>{formatPp(pp)}pp</p>
-              {previousAccuracy && <Change change={previousAccuracy} isPp />}
-            </div>
-          </Tooltip>
-        </>
-      );
     },
   },
   {
@@ -58,67 +28,13 @@ const badges: ScoreBadge[] = [
       return getScoreBadgeFromAccuracy(acc).color;
     },
     create: (score: ScoreSaberScore, leaderboard: ScoreSaberLeaderboard) => {
-      const scoreImprovement = score.additionalData?.scoreImprovement;
+      return <ScoreAccuracyBadge score={score} leaderboard={leaderboard} />;
-
-      const acc = (score.score / leaderboard.maxScore) * 100;
-      const fcAccuracy = score.additionalData?.fcAccuracy;
-      const scoreBadge = getScoreBadgeFromAccuracy(acc);
-      let accDetails = `${scoreBadge.name != "-" ? scoreBadge.name : ""}`;
-      if (scoreBadge.max == null) {
-        accDetails += ` (> ${scoreBadge.min}%)`;
-      } else if (scoreBadge.min == null) {
-        accDetails += ` (< ${scoreBadge.max}%)`;
-      } else {
-        accDetails += ` (${scoreBadge.min}% - ${scoreBadge.max}%)`;
-      }
-
-      const failed = score.modifiers.includes("No Fail" as Modifier);
-      const modCount = score.modifiers.length;
-      return (
-        <>
-          <Tooltip
-            display={
-              <div className="flex flex-col gap-2">
-                <div>
-                  <p className="font-semibold">Accuracy</p>
-                  <p>Score: {accDetails}</p>
-                  {fcAccuracy && <p>Full Combo: {fcAccuracy.toFixed(2)}%</p>}
-                </div>
-
-                {modCount > 0 && (
-                  <div>
-                    <p className="font-semibold">Modifiers</p>
-                    <ScoreModifiers type="full" score={score} />
-                  </div>
-                )}
-                {failed && <p className="text-red-500">Failed</p>}
-              </div>
-            }
-          >
-            <div className="flex flex-col items-center justify-center cursor-default">
-              <p>
-                {acc.toFixed(2)}% {modCount > 0 && <ScoreModifiers type="simple" limit={1} score={score} />}
-              </p>
-              {scoreImprovement && (
-                <Change change={scoreImprovement.accuracy} formatValue={num => `${num.toFixed(2)}%`} />
-              )}
-            </div>
-          </Tooltip>
-        </>
-      );
     },
   },
   {
     name: "Score",
     create: (score: ScoreSaberScore) => {
-      const scoreImprovement = score.additionalData?.scoreImprovement;
+      return <ScoreScoreBadge score={score} />;
-
-      return (
-        <div className="flex flex-col items-center justify-center">
-          <p>{formatNumberWithCommas(Number(score.score.toFixed(0)))}</p>
-          {scoreImprovement && <Change change={scoreImprovement.score} />}
-        </div>
-      );
     },
   },
   {
@@ -128,7 +44,7 @@ const badges: ScoreBadge[] = [
       if (!score.additionalData) {
         return undefined;
       }
-      return <HandAccuracy score={score} hand="left" />;
+      return <HandAccuracyBadge score={score} hand="left" />;
     },
   },
   {
@@ -138,7 +54,7 @@ const badges: ScoreBadge[] = [
       if (!score.additionalData) {
         return undefined;
       }
-      return <HandAccuracy score={score} hand="right" />;
+      return <HandAccuracyBadge score={score} hand="right" />;
     },
   },
   {