add more info to leaderboard score misses
All checks were successful
Deploy Website / docker (ubuntu-latest) (push) Successful in 2m7s

This commit is contained in:
Lee 2024-10-21 07:33:46 +01:00
parent 87b2c7c48a
commit 6baeab930d
3 changed files with 16 additions and 8 deletions

@ -7,6 +7,7 @@ import Tooltip from "@/components/tooltip";
import { ScoreTimeSet } from "@/components/score/score-time-set"; import { ScoreTimeSet } from "@/components/score/score-time-set";
import { ScoreModifiers } from "@/components/score/score-modifiers"; import { ScoreModifiers } from "@/components/score/score-modifiers";
import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard"; import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
import ScoreMissesBadge from "@/components/score/badges/score-misses";
type Props = { type Props = {
/** /**
@ -52,11 +53,11 @@ export default function LeaderboardScore({ score, leaderboard, claimedPlayer }:
{/* Score Misses */} {/* Score Misses */}
<td <td
className={clsx( 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 ? "text-red-500" : "text-green-500"
)} )}
> >
{score.misses > 0 ? `${score.misses}x` : "FC"} <ScoreMissesBadge score={score} hideXMark />
</td> </td>
{/* Score PP */} {/* Score PP */}
@ -74,7 +75,7 @@ export default function LeaderboardScore({ score, leaderboard, claimedPlayer }:
</div> </div>
} }
> >
<p className="cursor-pointer"> <p className="cursor-default">
<ScoreModifiers type="simple" score={score} /> <ScoreModifiers type="simple" score={score} />
</p> </p>
</Tooltip> </Tooltip>

@ -4,7 +4,14 @@ import clsx from "clsx";
import Tooltip from "@/components/tooltip"; import Tooltip from "@/components/tooltip";
import { ScoreBadgeProps } from "@/components/score/badges/badge-props"; 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 ( return (
<Tooltip <Tooltip
display={ display={
@ -21,9 +28,9 @@ export default function FullComboBadge({ score }: ScoreBadgeProps) {
</div> </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> <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> </div>
</Tooltip> </Tooltip>
); );

@ -4,7 +4,7 @@ import Tooltip from "@/components/tooltip";
import { ScoreBadge, ScoreBadges } from "@/components/score/score-badge"; import { ScoreBadge, ScoreBadges } from "@/components/score/score-badge";
import ScoreSaberScore from "@ssr/common/score/impl/scoresaber-score"; import ScoreSaberScore from "@ssr/common/score/impl/scoresaber-score";
import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard"; 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 { Modifier } from "@ssr/common/score/modifier";
import { ScoreModifiers } from "@/components/score/score-modifiers"; import { ScoreModifiers } from "@/components/score/score-modifiers";
@ -106,7 +106,7 @@ const badges: ScoreBadge[] = [
{ {
name: "Full Combo", name: "Full Combo",
create: (score: ScoreSaberScore) => { create: (score: ScoreSaberScore) => {
return <FullComboBadge score={score} />; return <ScoreMissesBadge score={score} />;
}, },
}, },
]; ];