diff --git a/projects/website/src/components/player/player-header.tsx b/projects/website/src/components/player/player-header.tsx index c620a15..9540a07 100644 --- a/projects/website/src/components/player/player-header.tsx +++ b/projects/website/src/components/player/player-header.tsx @@ -10,6 +10,7 @@ import { ReactElement } from "react"; import PlayerTrackedStatus from "@/components/player/player-tracked-status"; import ScoreSaberPlayer from "@ssr/common/types/player/impl/scoresaber-player"; import Link from "next/link"; +import { capitalizeFirstLetter } from "@/common/string-utils"; /** * Renders the change for a stat. @@ -42,15 +43,37 @@ const renderChange = (player: ScoreSaberPlayer, type: "rank" | "countryRank" | " const todayStats = player.statisticChange?.today; const weeklyStats = player.statisticChange?.weekly; const monthlyStats = player.statisticChange?.monthly; + const todayStat = todayStats?.[type]; + const weeklyStat = weeklyStats?.[type]; + const monthlyStat = monthlyStats?.[type]; + + const renderChange = (value: number | undefined, timeFrame: "daily" | "weekly" | "monthly") => { + if (value == undefined) { + return "Missing Data"; + } + const format = (value: number) => { + if (value == 0) { + return 0; + } + return type == "pp" ? formatPp(value) : formatNumberWithCommas(value); + }; + + return ( +

+ {capitalizeFirstLetter(timeFrame)} Change:{" "} + = 0 ? (value == 0 ? "" : "text-green-500") : "text-red-500"}`}>{format(value)} +

+ ); + }; return ( -

Daily Change: {todayStats?.[type] || "Missing Data"}

-

Weekly Change: {weeklyStats?.[type] || "Missing Data"}

-

Monthly Change: {monthlyStats?.[type] || "Missing Data"}

+ {renderChange(todayStat, "daily")} + {renderChange(weeklyStat, "weekly")} + {renderChange(monthlyStat, "monthly")} } >