81 lines
2.0 KiB
TypeScript
81 lines
2.0 KiB
TypeScript
import ScoreSaberPlayer from "@/common/data-fetcher/types/scoresaber/scoresaber-player";
|
|
import { formatNumberWithCommas } from "@/common/number-utils";
|
|
import StatValue from "@/components/stat-value";
|
|
import { ClassValue } from "clsx";
|
|
|
|
type Badge = {
|
|
name: string;
|
|
color?: ClassValue;
|
|
create: (player: ScoreSaberPlayer) => string | React.ReactNode | undefined;
|
|
};
|
|
|
|
const badges: Badge[] = [
|
|
{
|
|
name: "Ranked Play Count",
|
|
color: "bg-pp",
|
|
create: (player: ScoreSaberPlayer) => {
|
|
return formatNumberWithCommas(player.scoreStats.rankedPlayCount);
|
|
},
|
|
},
|
|
{
|
|
name: "Total Ranked Score",
|
|
color: "bg-pp",
|
|
create: (player: ScoreSaberPlayer) => {
|
|
return formatNumberWithCommas(player.scoreStats.totalRankedScore);
|
|
},
|
|
},
|
|
{
|
|
name: "Average Ranked Accuracy",
|
|
color: "bg-pp",
|
|
create: (player: ScoreSaberPlayer) => {
|
|
return player.scoreStats.averageRankedAccuracy.toFixed(2) + "%";
|
|
},
|
|
},
|
|
{
|
|
name: "Total Play Count",
|
|
create: (player: ScoreSaberPlayer) => {
|
|
return formatNumberWithCommas(player.scoreStats.totalPlayCount);
|
|
},
|
|
},
|
|
{
|
|
name: "Total Score",
|
|
create: (player: ScoreSaberPlayer) => {
|
|
return formatNumberWithCommas(player.scoreStats.totalScore);
|
|
},
|
|
},
|
|
{
|
|
name: "Total Replays Watched",
|
|
create: (player: ScoreSaberPlayer) => {
|
|
return formatNumberWithCommas(player.scoreStats.replaysWatched);
|
|
},
|
|
},
|
|
];
|
|
|
|
type Props = {
|
|
player: ScoreSaberPlayer;
|
|
};
|
|
|
|
export default function PlayerStats({ player }: Props) {
|
|
return (
|
|
<div
|
|
className={`flex flex-wrap gap-2 w-full justify-center lg:justify-start`}
|
|
>
|
|
{badges.map((badge, index) => {
|
|
const toRender = badge.create(player);
|
|
if (toRender === undefined) {
|
|
return <div key={index} />;
|
|
}
|
|
|
|
return (
|
|
<StatValue
|
|
key={index}
|
|
color={badge.color}
|
|
name={badge.name}
|
|
value={toRender}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|