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

show role color on role badge
All checks were successful
Deploy Website / docker (ubuntu-latest) (push) Successful in 2m56s
Details

Browse Source
This commit is contained in:
Lee 2024-10-23 23:05:20 +01:00
parent 42264ece64
commit 20376070c3
2 changed files with 21 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
projects/website/src/components/player/player-stats.tsx
View File

@ -4,13 +4,11 @@ import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
import { formatDate } from "@ssr/common/utils/time-utils"; import { formatDate } from "@ssr/common/utils/time-utils";
import { ReactNode } from "react"; import { ReactNode } from "react";
import Tooltip from "@/components/tooltip"; import Tooltip from "@/components/tooltip";
import { DailyChange } from "@/components/statistic/daily-change";
import { getScoreSaberRole } from "@ssr/common/utils/scoresaber.util"; import { getScoreSaberRole } from "@ssr/common/utils/scoresaber.util";
import { PlayerStatChange } from "@ssr/common/player/player-stat-change";
type Stat = { type Stat = {
name: string; name: string;
color?: string; color?: (player: ScoreSaberPlayer) => string;
create: (player: ScoreSaberPlayer) => { create: (player: ScoreSaberPlayer) => {
tooltip?: string | ReactNode; tooltip?: string | ReactNode;
value: string | ReactNode; value: string | ReactNode;
@ -20,43 +18,28 @@ type Stat = {
const playerStats: Stat[] = [ const playerStats: Stat[] = [
{ {
name: "Ranked Play Count", name: "Ranked Play Count",
color: "bg-pp", color: () => "bg-pp",
create: (player: ScoreSaberPlayer) => { create: (player: ScoreSaberPlayer) => {
return { return {
value: ( value: <>{formatNumberWithCommas(player.statistics.rankedPlayCount)}</>,
<>
{formatNumberWithCommas(player.statistics.rankedPlayCount)}{" "}
<DailyChange type={PlayerStatChange.RankedPlayCount} player={player} />
</>
),
}; };
}, },
}, },
{ {
name: "Total Ranked Score", name: "Total Ranked Score",
color: "bg-pp", color: () => "bg-pp",
create: (player: ScoreSaberPlayer) => { create: (player: ScoreSaberPlayer) => {
return { return {
value: ( value: <>{formatNumberWithCommas(player.statistics.totalRankedScore)}</>,
<>
{formatNumberWithCommas(player.statistics.totalRankedScore)}{" "}
<DailyChange type={PlayerStatChange.TotalRankedScore} player={player} />
</>
),
}; };
}, },
}, },
{ {
name: "Average Ranked Accuracy", name: "Average Ranked Accuracy",
color: "bg-pp", color: () => "bg-pp",
create: (player: ScoreSaberPlayer) => { create: (player: ScoreSaberPlayer) => {
return { return {
value: ( value: <>{player.statistics.averageRankedAccuracy.toFixed(2) + "%"}</>,
<>
{player.statistics.averageRankedAccuracy.toFixed(2) + "%"}{" "}
<DailyChange type={PlayerStatChange.AverageRankedAccuracy} player={player} />
</>
),
}; };
}, },
}, },
@ -64,12 +47,7 @@ const playerStats: Stat[] = [
name: "Total Play Count", name: "Total Play Count",
create: (player: ScoreSaberPlayer) => { create: (player: ScoreSaberPlayer) => {
return { return {
value: ( value: <>{formatNumberWithCommas(player.statistics.totalPlayCount)}</>,
<>
{formatNumberWithCommas(player.statistics.totalPlayCount)}{" "}
<DailyChange type={PlayerStatChange.TotalPlayCount} player={player} />
</>
),
}; };
}, },
}, },
@ -77,12 +55,7 @@ const playerStats: Stat[] = [
name: "Total Score", name: "Total Score",
create: (player: ScoreSaberPlayer) => { create: (player: ScoreSaberPlayer) => {
return { return {
value: ( value: <>{formatNumberWithCommas(player.statistics.totalScore)}</>,
<>
{formatNumberWithCommas(player.statistics.totalScore)}{" "}
<DailyChange type={PlayerStatChange.TotalScore} player={player} />
</>
),
}; };
}, },
}, },
@ -90,12 +63,7 @@ const playerStats: Stat[] = [
name: "Total Replays Watched", name: "Total Replays Watched",
create: (player: ScoreSaberPlayer) => { create: (player: ScoreSaberPlayer) => {
return { return {
value: ( value: <>{formatNumberWithCommas(player.statistics.replaysWatched)}</>,
<>
{formatNumberWithCommas(player.statistics.replaysWatched)}{" "}
<DailyChange type={PlayerStatChange.TotalReplaysWatched} player={player} />
</>
),
}; };
}, },
}, },
@ -114,7 +82,15 @@ const playerStats: Stat[] = [
const role = getScoreSaberRole(player); const role = getScoreSaberRole(player);
return { return {
value: role?.name, value: !role ? undefined : (
<p
style={{
color: role.color,
}}
>
{role.name}
</p>
),
}; };
}, },
}, },
@ -133,7 +109,7 @@ export default function PlayerStats({ player }: Props) {
return <div key={index} />; return <div key={index} />;
} }
const { tooltip, value } = toRender; const { tooltip, value } = toRender;
const stat = <StatValue color={badge.color} name={badge.name} value={value} />; const stat = <StatValue color={badge.color?.(player)} name={badge.name} value={value} />;
return ( return (
<div key={index}> <div key={index}>

2
projects/website/src/components/statistic/daily-change.tsx
View File

@ -36,7 +36,7 @@ export function DailyChange({ type, player, change, tooltip }: DailyChangeProps)
} }
const value = ( const value = (
<p className={`text-sm ${change > 0 ? "text-green-400" : "text-red-400"}`}> <p className={`text-xs ${change > 0 ? "text-green-400" : "text-red-400"}`}>
{change > 0 ? "+" : ""} {change > 0 ? "+" : ""}
{`${formatValue(change)}${type.type == "Performance Points" ? "pp" : ""}`} {`${formatValue(change)}${type.type == "Performance Points" ? "pp" : ""}`}
</p> </p>