diff --git a/projects/website/src/common/change.tsx b/projects/website/src/common/change.tsx index 888929a..9e12830 100644 --- a/projects/website/src/common/change.tsx +++ b/projects/website/src/common/change.tsx @@ -1,5 +1,6 @@ import React from "react"; import { formatNumberWithCommas, formatPp } from "@ssr/common/utils/number-utils"; +import { clsx } from "clsx"; type ChangeProps = { /** @@ -13,6 +14,11 @@ type ChangeProps = { */ formatValue?: (value: number) => string; + /** + * The additional class names + */ + className?: string; + /** * Whether the number is a pp number */ @@ -24,7 +30,7 @@ type ChangeProps = { showColors?: boolean; }; -export function Change({ change, formatValue, isPp, showColors }: ChangeProps) { +export function Change({ change, formatValue, className, isPp, showColors }: ChangeProps) { if (change === 0 || (change && change > 0 && change < 0.01) || change === undefined) { return null; } @@ -38,7 +44,7 @@ export function Change({ change, formatValue, isPp, showColors }: ChangeProps) { } return ( -

0 ? "text-green-400" : "text-red-400")}`}> +

0 ? "text-green-400" : "text-red-400"), className)}> {change > 0 ? "+" : ""} {`${formatValue(change)}${isPp ? "pp" : ""}`}

diff --git a/projects/website/src/components/score/badges/hand-accuracy.tsx b/projects/website/src/components/score/badges/hand-accuracy.tsx index 3c8e423..74bd2ee 100644 --- a/projects/website/src/components/score/badges/hand-accuracy.tsx +++ b/projects/website/src/components/score/badges/hand-accuracy.tsx @@ -26,7 +26,11 @@ export function HandAccuracyBadge({ score, hand }: HandAccuracyProps) { {scoreImprovement && previousHandAccuracy && ( - num.toFixed(2)} /> + num.toFixed(2)} + /> )} diff --git a/projects/website/src/components/score/badges/score-accuracy.tsx b/projects/website/src/components/score/badges/score-accuracy.tsx index 715a59f..8ba2707 100644 --- a/projects/website/src/components/score/badges/score-accuracy.tsx +++ b/projects/website/src/components/score/badges/score-accuracy.tsx @@ -58,7 +58,7 @@ export function ScoreAccuracyBadge({ score, leaderboard }: ScoreAccuracyProps) { {scoreImprovement && previousAccuracy && ( - `${num.toFixed(2)}%`} /> + `${num.toFixed(2)}%`} /> )} diff --git a/projects/website/src/components/score/badges/score-misses.tsx b/projects/website/src/components/score/badges/score-misses.tsx index 722dfda..98b7b2e 100644 --- a/projects/website/src/components/score/badges/score-misses.tsx +++ b/projects/website/src/components/score/badges/score-misses.tsx @@ -27,6 +27,8 @@ export default function ScoreMissesBadge({ score, hideXMark }: ScoreMissesBadgeP wallsHit: (scoreImprovement.misses.wallsHit - misses.wallsHit) * -1, }; const previousScoreFc = previousScoreMisses?.misses == 0; + const isMissImprovement = + previousScoreMisses && scoreImprovement && previousScoreMisses.misses > scoreImprovement.misses.misses; return (
@@ -42,7 +44,7 @@ export default function ScoreMissesBadge({ score, hideXMark }: ScoreMissesBadgeP {!hideXMark && }
- {additionalData && previousScoreMisses && scoreImprovement && misses && ( + {additionalData && previousScoreMisses && scoreImprovement && misses && isMissImprovement && (
-
+
{previousScoreFc ? (

FC

) : ( @@ -67,7 +69,7 @@ export default function ScoreMissesBadge({ score, hideXMark }: ScoreMissesBadgeP wallsHit={misses.wallsHit} fullCombo={additionalData.fullCombo} > -
+
{additionalData.fullCombo ?

FC

: formatNumberWithCommas(misses.misses)}
diff --git a/projects/website/src/components/score/badges/score-pp.tsx b/projects/website/src/components/score/badges/score-pp.tsx index 93200d6..18789df 100644 --- a/projects/website/src/components/score/badges/score-pp.tsx +++ b/projects/website/src/components/score/badges/score-pp.tsx @@ -1,9 +1,10 @@ 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 { ensurePositiveNumber, formatPp } from "@ssr/common/utils/number-utils"; import { scoresaberService } from "@ssr/common/service/impl/scoresaber"; import { Change } from "@/common/change"; +import { Warning } from "@/components/warning"; type ScorePpProps = ScoreBadgeProps & { /** @@ -22,26 +23,42 @@ export function ScorePpBadge({ score, leaderboard }: ScorePpProps) { return undefined; } const weightedPp = pp * weight; - const previousPp = fcAccuracy ? scoresaberService.getPp(leaderboard.stars, fcAccuracy).toFixed(0) : undefined; - const isSamePp = previousPp === pp.toFixed(0); + const fcPp = + !score.fullCombo && fcAccuracy ? scoresaberService.getPp(leaderboard.stars, fcAccuracy).toFixed(0) : undefined; return ( <> -

Performance Points

-

Raw: {formatPp(pp)}pp

-

- Weighted: {formatPp(weightedPp)}pp ({(100 * weight).toFixed(2)}%) -

- {previousPp && !isSamePp &&

Full Combo: {previousPp}pp

} +
+
+

Performance Points

+

Raw: {formatPp(pp)}pp

+

+ Weighted: {formatPp(weightedPp)}pp ({(100 * weight).toFixed(2)}%) +

+ {fcPp &&

Full Combo: {fcPp}pp

} +
+ + {previousAccuracy && ( + +

+ The previous pp may not be 100% accurate due to ScoreSaber API limitations. +

+
+ )}
} >

{formatPp(pp)}pp

- {previousAccuracy && } + {previousAccuracy && ( + + )}
diff --git a/projects/website/src/components/score/badges/score-score.tsx b/projects/website/src/components/score/badges/score-score.tsx index 2b653f5..977f73e 100644 --- a/projects/website/src/components/score/badges/score-score.tsx +++ b/projects/website/src/components/score/badges/score-score.tsx @@ -8,7 +8,7 @@ export function ScoreScoreBadge({ score }: ScoreBadgeProps) { return (

{formatNumberWithCommas(Number(score.score.toFixed(0)))}

- {scoreImprovement && } + {scoreImprovement && }
); } diff --git a/projects/website/src/components/tooltip.tsx b/projects/website/src/components/tooltip.tsx index 610b650..5052bd1 100644 --- a/projects/website/src/components/tooltip.tsx +++ b/projects/website/src/components/tooltip.tsx @@ -48,7 +48,9 @@ export default function Tooltip({ children, display, asChild = true, side = "top {children} - {display} + + {display} + ); } diff --git a/projects/website/src/components/warning.tsx b/projects/website/src/components/warning.tsx new file mode 100644 index 0000000..505d323 --- /dev/null +++ b/projects/website/src/components/warning.tsx @@ -0,0 +1,23 @@ +import { ExclamationTriangleIcon } from "@heroicons/react/24/solid"; +import { ReactNode } from "react"; + +type WarningProps = { + /** + * The size of the warning icon. + */ + size?: number; + + /** + * The children to display. + */ + children: ReactNode; +}; + +export function Warning({ size = 32, children }: WarningProps) { + return ( +
+ + {children} +
+ ); +}