show pause count for scores

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

@@ -6,7 +6,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/model/leaderboard/impl/scoresaber-leaderboard";
-import ScoreMissesBadge from "@/components/score/badges/score-misses";
+import ScoreMissesAndPausesBadge from "@/components/score/badges/score-misses-and-pauses";
 import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
 
 type Props = {
@@ -57,7 +57,7 @@ export default function LeaderboardScore({ score, leaderboard, highlightedPlayer
           score.misses > 0 ? "text-red-500" : "text-green-500"
         )}
       >
-        <ScoreMissesBadge score={score} hideXMark />
+        <ScoreMissesAndPausesBadge score={score} hideXMark />
       </td>
 
       {/* Score PP */}

projects/website/src/components/score/badges/score-misses-and-pauses.tsx

@@ -1,9 +1,9 @@
 import { formatNumberWithCommas } from "@ssr/common/utils/number-utils";
-import { XMarkIcon } from "@heroicons/react/24/solid";
+import { PauseIcon } from "@heroicons/react/24/solid";
-import clsx from "clsx";
 import { ScoreBadgeProps } from "@/components/score/badges/badge-props";
 import { ScoreMissesTooltip } from "@/components/score/score-misses-tooltip";
 import { Misses } from "@ssr/common/model/additional-score-data/misses";
+import Tooltip from "@/components/tooltip";
 
 type ScoreMissesBadgeProps = ScoreBadgeProps & {
   /**
@@ -12,7 +12,7 @@ type ScoreMissesBadgeProps = ScoreBadgeProps & {
   hideXMark?: boolean;
 };
 
-export default function ScoreMissesBadge({ score, hideXMark }: ScoreMissesBadgeProps) {
+export default function ScoreMissesAndPausesBadge({ score, hideXMark }: ScoreMissesBadgeProps) {
   const additionalData = score.additionalData;
   const scoreImprovement = additionalData?.scoreImprovement;
 
@@ -30,8 +30,10 @@ export default function ScoreMissesBadge({ score, hideXMark }: ScoreMissesBadgeP
   const isMissImprovement =
     previousScoreMisses && scoreImprovement && previousScoreMisses.misses > scoreImprovement.misses.misses;
 
+  const pauses = additionalData?.pauses;
   return (
-    <div className="flex flex-col justify-center items-center">
+    <div className="flex flex-col justify-center items-center w-full">
+      <div className="flex items-center gap-1">
         <ScoreMissesTooltip
           missedNotes={score.missedNotes}
           badCuts={score.badCuts}
@@ -39,11 +41,31 @@ export default function ScoreMissesBadge({ score, hideXMark }: ScoreMissesBadgeP
           wallsHit={misses?.wallsHit}
           fullCombo={score.fullCombo}
         >
-        <div className="flex gap-1 items-center">
+          <div className="flex items-center">
-          <p>{score.fullCombo ? <span className="text-green-400">FC</span> : formatNumberWithCommas(score.misses)}</p>
+            <p>
-          {!hideXMark && <XMarkIcon className={clsx("w-5 h-5", score.fullCombo ? "hidden" : "text-red-400")} />}
+              {score.fullCombo ? <span className="text-green-400">FC</span> : formatNumberWithCommas(score.misses)}
+              {!hideXMark && !score.fullCombo && <span>x</span>}
+            </p>
           </div>
         </ScoreMissesTooltip>
+        {additionalData && !!pauses && pauses > 0 && (
+          <>
+            <p>|</p>
+            <Tooltip
+              display={
+                <p>
+                  {pauses}x Pause{pauses > 1 ? "s" : ""}
+                </p>
+              }
+            >
+              <div className="flex gap-1 items-center">
+                <p>{pauses && pauses}</p>
+                <PauseIcon className="w-4 h-4" />
+              </div>
+            </Tooltip>
+          </>
+        )}
+      </div>
       {additionalData && previousScoreMisses && scoreImprovement && misses && isMissImprovement && (
         <div className="flex gap-2 items-center justify-center">
           <ScoreMissesTooltip

projects/website/src/components/score/score-misses-tooltip.tsx

@@ -25,7 +25,7 @@ export function ScoreMissesTooltip({
   return (
     <Tooltip
       display={
-        <div className="flex flex-col">
+        <div className="flex flex-col w-full">
           {!fullCombo ? (
             <>
               <p className="font-semibold">Misses</p>

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

@@ -2,7 +2,7 @@ import { getScoreBadgeFromAccuracy } from "@/common/song-utils";
 import { ScoreBadge, ScoreBadges } from "@/components/score/score-badge";
 import { ScoreSaberScore } from "@ssr/common/model/score/impl/scoresaber-score";
 import ScoreSaberLeaderboard from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
-import ScoreMissesBadge from "@/components/score/badges/score-misses";
+import ScoreMissesAndPausesBadge from "@/components/score/badges/score-misses-and-pauses";
 import { HandAccuracyBadge } from "@/components/score/badges/hand-accuracy";
 import { ScoreAccuracyBadge } from "@/components/score/badges/score-accuracy";
 import { ScorePpBadge } from "@/components/score/badges/score-pp";
@@ -60,7 +60,7 @@ const badges: ScoreBadge[] = [
   {
     name: "Full Combo",
     create: (score: ScoreSaberScore) => {
-      return <ScoreMissesBadge score={score} />;
+      return <ScoreMissesAndPausesBadge score={score} />;
     },
   },
 ];