diff --git a/projects/common/src/utils/time-utils.ts b/projects/common/src/utils/time-utils.ts index 65068e0..ff8994e 100644 --- a/projects/common/src/utils/time-utils.ts +++ b/projects/common/src/utils/time-utils.ts @@ -53,6 +53,46 @@ export function formatDateMinimal(date: Date) { }); } +/** + * Formats the date + * + * @param date the date to format + * @param format the format to return + * @returns the formatted date + */ +export function formatDate(date: Date, format: "MMMM YYYY" | "DD MMMM YYYY" | "DD MMMM YYYY HH:mm" = "MMMM YYYY") { + switch (format) { + case "MMMM YYYY": { + return date.toLocaleString("en-US", { + timeZone: "Europe/London", + month: "long", + year: "numeric", + }); + } + case "DD MMMM YYYY": { + return date.toLocaleString("en-US", { + timeZone: "Europe/London", + day: "numeric", + month: "long", + year: "numeric", + }); + } + case "DD MMMM YYYY HH:mm": { + return date.toLocaleString("en-US", { + timeZone: "Europe/London", + day: "numeric", + month: "long", + year: "numeric", + hour: "numeric", + minute: "numeric", + }); + } + default: { + return formatDateMinimal(date); + } + } +} + /** * Gets the midnight aligned date * diff --git a/projects/website/src/components/player/player-stats.tsx b/projects/website/src/components/player/player-stats.tsx index e090807..101a45d 100644 --- a/projects/website/src/components/player/player-stats.tsx +++ b/projects/website/src/components/player/player-stats.tsx @@ -1,11 +1,17 @@ import { formatNumberWithCommas } from "@ssr/common/utils/number-utils"; import StatValue from "@/components/stat-value"; import ScoreSaberPlayer from "@ssr/common/types/player/impl/scoresaber-player"; +import { formatDate } from "@ssr/common/utils/time-utils"; +import { ReactNode } from "react"; +import Tooltip from "@/components/tooltip"; type Badge = { name: string; color?: string; - create: (player: ScoreSaberPlayer) => string | React.ReactNode | undefined; + create: (player: ScoreSaberPlayer) => { + tooltip?: string | ReactNode; + value: string | ReactNode; + }; }; const badges: Badge[] = [ @@ -13,39 +19,60 @@ const badges: Badge[] = [ name: "Ranked Play Count", color: "bg-pp", create: (player: ScoreSaberPlayer) => { - return formatNumberWithCommas(player.statistics.rankedPlayCount); + return { + value: formatNumberWithCommas(player.statistics.rankedPlayCount), + }; }, }, { name: "Total Ranked Score", color: "bg-pp", create: (player: ScoreSaberPlayer) => { - return formatNumberWithCommas(player.statistics.totalRankedScore); + return { + value: formatNumberWithCommas(player.statistics.totalRankedScore), + }; }, }, { name: "Average Ranked Accuracy", color: "bg-pp", create: (player: ScoreSaberPlayer) => { - return player.statistics.averageRankedAccuracy.toFixed(2) + "%"; + return { + value: player.statistics.averageRankedAccuracy.toFixed(2) + "%", + }; }, }, { name: "Total Play Count", create: (player: ScoreSaberPlayer) => { - return formatNumberWithCommas(player.statistics.totalPlayCount); + return { + value: formatNumberWithCommas(player.statistics.totalPlayCount), + }; }, }, { name: "Total Score", create: (player: ScoreSaberPlayer) => { - return formatNumberWithCommas(player.statistics.totalScore); + return { + value: formatNumberWithCommas(player.statistics.totalScore), + }; }, }, { name: "Total Replays Watched", create: (player: ScoreSaberPlayer) => { - return formatNumberWithCommas(player.statistics.replaysWatched); + return { + value: formatNumberWithCommas(player.statistics.replaysWatched), + }; + }, + }, + { + name: "Joined Date", + create: (player: ScoreSaberPlayer) => { + return { + tooltip: formatDate(player.joinedDate, "DD MMMM YYYY HH:mm"), + value: formatDate(player.joinedDate), + }; }, }, ]; @@ -62,8 +89,16 @@ export default function PlayerStats({ player }: Props) { if (toRender === undefined) { return
; } + const { tooltip, value } = toRender; + const stat =