add more info to leaderboard score misses

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>

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>
   );

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} />;
     },
   },
 ];