diff --git a/projects/website/src/components/leaderboard/leaderboard-score.tsx b/projects/website/src/components/leaderboard/leaderboard-score.tsx index afb5d09..6ab8ae3 100644 --- a/projects/website/src/components/leaderboard/leaderboard-score.tsx +++ b/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" )} > - + {/* Score PP */} diff --git a/projects/website/src/components/score/badges/score-misses.tsx b/projects/website/src/components/score/badges/score-misses-and-pauses.tsx similarity index 65% rename from projects/website/src/components/score/badges/score-misses.tsx rename to projects/website/src/components/score/badges/score-misses-and-pauses.tsx index c561efa..1bfd05a 100644 --- a/projects/website/src/components/score/badges/score-misses.tsx +++ b/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 clsx from "clsx"; +import { PauseIcon } from "@heroicons/react/24/solid"; 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,20 +30,42 @@ export default function ScoreMissesBadge({ score, hideXMark }: ScoreMissesBadgeP const isMissImprovement = previousScoreMisses && scoreImprovement && previousScoreMisses.misses > scoreImprovement.misses.misses; + const pauses = additionalData?.pauses; return ( -
- -
-

{score.fullCombo ? FC : formatNumberWithCommas(score.misses)}

- {!hideXMark && } -
-
+
+
+ +
+

+ {score.fullCombo ? FC : formatNumberWithCommas(score.misses)} + {!hideXMark && !score.fullCombo && x} +

+
+
+ {additionalData && !!pauses && pauses > 0 && ( + <> +

|

+ + {pauses}x Pause{pauses > 1 ? "s" : ""} +

+ } + > +
+

{pauses && pauses}

+ +
+
+ + )} +
{additionalData && previousScoreMisses && scoreImprovement && misses && isMissImprovement && (
+
{!fullCombo ? ( <>

Misses

diff --git a/projects/website/src/components/score/score-stats.tsx b/projects/website/src/components/score/score-stats.tsx index c1ee0ea..1863f70 100644 --- a/projects/website/src/components/score/score-stats.tsx +++ b/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 ; + return ; }, }, ];