From 6baeab930dd40f79ae54346c92e595a61ceefa83 Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Mon, 21 Oct 2024 07:33:46 +0100
Subject: [PATCH] add more info to leaderboard score misses

---
 .../components/leaderboard/leaderboard-score.tsx    |  7 ++++---
 .../badges/{full-combo.tsx => score-misses.tsx}     | 13 ++++++++++---
 .../website/src/components/score/score-stats.tsx    |  4 ++--
 3 files changed, 16 insertions(+), 8 deletions(-)
 rename projects/website/src/components/score/badges/{full-combo.tsx => score-misses.tsx} (69%)

diff --git a/projects/website/src/components/leaderboard/leaderboard-score.tsx b/projects/website/src/components/leaderboard/leaderboard-score.tsx
index e3e0577..a077b5d 100644
--- a/projects/website/src/components/leaderboard/leaderboard-score.tsx
+++ b/projects/website/src/components/leaderboard/leaderboard-score.tsx
@@ -7,6 +7,7 @@ import Tooltip from "@/components/tooltip";
 import { ScoreTimeSet } from "@/components/score/score-time-set";
 import { ScoreModifiers } from "@/components/score/score-modifiers";
 import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
+import ScoreMissesBadge from "@/components/score/badges/score-misses";
 
 type Props = {
   /**
@@ -52,11 +53,11 @@ export default function LeaderboardScore({ score, leaderboard, claimedPlayer }:
       {/* Score Misses */}
       <td
         className={clsx(
-          "px-4 py-2 text-center whitespace-nowrap",
+          "px-4 py-2 whitespace-nowrap cursor-default",
           score.misses > 0 ? "text-red-500" : "text-green-500"
         )}
       >
-        {score.misses > 0 ? `${score.misses}x` : "FC"}
+        <ScoreMissesBadge score={score} hideXMark />
       </td>
 
       {/* Score PP */}
@@ -74,7 +75,7 @@ export default function LeaderboardScore({ score, leaderboard, claimedPlayer }:
             </div>
           }
         >
-          <p className="cursor-pointer">
+          <p className="cursor-default">
             <ScoreModifiers type="simple" score={score} />
           </p>
         </Tooltip>
diff --git a/projects/website/src/components/score/badges/full-combo.tsx b/projects/website/src/components/score/badges/score-misses.tsx
similarity index 69%
rename from projects/website/src/components/score/badges/full-combo.tsx
rename to projects/website/src/components/score/badges/score-misses.tsx
index 430c326..0c0e67a 100644
--- a/projects/website/src/components/score/badges/full-combo.tsx
+++ b/projects/website/src/components/score/badges/score-misses.tsx
@@ -4,7 +4,14 @@ import clsx from "clsx";
 import Tooltip from "@/components/tooltip";
 import { ScoreBadgeProps } from "@/components/score/badges/badge-props";
 
-export default function FullComboBadge({ score }: ScoreBadgeProps) {
+type ScoreMissesBadgeProps = ScoreBadgeProps & {
+  /**
+   * Hide the "X" mark for misses.
+   */
+  hideXMark?: boolean;
+};
+
+export default function ScoreMissesBadge({ score, hideXMark }: ScoreMissesBadgeProps) {
   return (
     <Tooltip
       display={
@@ -21,9 +28,9 @@ export default function FullComboBadge({ score }: ScoreBadgeProps) {
         </div>
       }
     >
-      <div className="flex gap-1">
+      <div className="flex gap-1 items-center justify-center">
         <p>{score.fullCombo ? <span className="text-green-400">FC</span> : formatNumberWithCommas(score.misses)}</p>
-        <XMarkIcon className={clsx("w-5 h-5", score.fullCombo ? "hidden" : "text-red-400")} />
+        {!hideXMark && <XMarkIcon className={clsx("w-5 h-5", score.fullCombo ? "hidden" : "text-red-400")} />}
       </div>
     </Tooltip>
   );
diff --git a/projects/website/src/components/score/score-stats.tsx b/projects/website/src/components/score/score-stats.tsx
index 646023e..2d343ac 100644
--- a/projects/website/src/components/score/score-stats.tsx
+++ b/projects/website/src/components/score/score-stats.tsx
@@ -4,7 +4,7 @@ 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 FullComboBadge from "@/components/score/badges/full-combo";
+import ScoreMissesBadge from "@/components/score/badges/score-misses";
 import { Modifier } from "@ssr/common/score/modifier";
 import { ScoreModifiers } from "@/components/score/score-modifiers";
 
@@ -106,7 +106,7 @@ const badges: ScoreBadge[] = [
   {
     name: "Full Combo",
     create: (score: ScoreSaberScore) => {
-      return <FullComboBadge score={score} />;
+      return <ScoreMissesBadge score={score} />;
     },
   },
 ];