Fascinated/scoresaber-reloadedv3
1
1
Fork 0
Code Issues 1 Pull Requests 2 Actions Packages Activity

cleanup score badges
Some checks are pending
Deploy / deploy (push) Waiting to run
Details

Browse Source
This commit is contained in:
Lee 2024-09-30 23:06:06 +01:00
parent 7ca22a07e0
commit be89f6ba71
3 changed files with 25 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/leaderboard/leaderboard-score-stats.tsx
View File

@ -6,7 +6,7 @@ import { XMarkIcon } from "@heroicons/react/24/solid";
import clsx from "clsx";
import { getScoreBadgeFromAccuracy } from "@/common/song-utils";
import Tooltip from "@/components/tooltip";
import { ScoreBadge } from "@/components/score/score-badge";
import { ScoreBadge, ScoreBadges } from "@/components/score/score-badge";
const badges: ScoreBadge[] = [
{
@ -75,14 +75,7 @@ type Props = {
export default function LeaderboardScoreStats({ score, leaderboard }: Props) {
return (
<div className={`grid grid-cols-3 grid-rows-1 gap-1 ml-0 lg:ml-2`}>
{badges.map((badge, index) => {
const toRender = badge.create(score, leaderboard);
const color = badge.color?.(score, leaderboard);
if (toRender === undefined) {
return <div key={index} />;
}
return <StatValue key={index} color={color} value={toRender} />;
})}
<ScoreBadges badges={badges} score={score} leaderboard={leaderboard} />
</div>
);
}

21
src/components/score/score-badge.tsx
View File

@ -1,5 +1,6 @@
import ScoreSaberScoreToken from "@/common/model/token/scoresaber/score-saber-score-token";
import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
import StatValue from "@/components/stat-value";
/**
* A badge to display in the score stats.
@ -12,3 +13,23 @@ export type ScoreBadge = {
leaderboard: ScoreSaberLeaderboardToken
) => string | React.ReactNode | undefined;
};
/**
* The badges to display in the score stats.
*/
type ScoreBadgeProps = {
badges: ScoreBadge[];
score: ScoreSaberScoreToken;
leaderboard: ScoreSaberLeaderboardToken;
};
export function ScoreBadges({ badges, score, leaderboard }: ScoreBadgeProps) {
return badges.map((badge, index) => {
const toRender = badge.create(score, leaderboard);
const color = badge.color?.(score, leaderboard);
if (toRender === undefined) {
return <div key={index} />;
}
return <StatValue key={index} color={color} value={toRender} />;
});
}

11
src/components/score/score-stats.tsx
View File

@ -6,7 +6,7 @@ import StatValue from "@/components/stat-value";
import { XMarkIcon } from "@heroicons/react/24/solid";
import clsx from "clsx";
import Tooltip from "@/components/tooltip";
import { ScoreBadge } from "@/components/score/score-badge";
import { ScoreBadge, ScoreBadges } from "@/components/score/score-badge";
const badges: ScoreBadge[] = [
{
@ -92,14 +92,7 @@ type Props = {
export default function ScoreStats({ score, leaderboard }: Props) {
return (
<div className={`grid grid-cols-3 grid-rows-2 gap-1 ml-0 lg:ml-2`}>
{badges.map((badge, index) => {
const toRender = badge.create(score, leaderboard);
const color = badge.color?.(score, leaderboard);
if (toRender === undefined) {
return <div key={index} />;
}
return <StatValue key={index} color={color} value={toRender} />;
})}
<ScoreBadges badges={badges} score={score} leaderboard={leaderboard} />
</div>
);
}