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 { 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>

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

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