83 lines
2.5 KiB
TypeScript
83 lines
2.5 KiB
TypeScript
import { ScoresaberLeaderboardInfo } from "@/schemas/scoresaber/leaderboard";
|
|
import { ScoresaberScore } from "@/schemas/scoresaber/score";
|
|
import { formatNumber } from "@/utils/number";
|
|
import { scoresaberDifficultyNumberToName } from "@/utils/songUtils";
|
|
import { formatDate, formatTimeAgo } from "@/utils/timeUtils";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import ScoreStatLabel from "../player/ScoreStatLabel";
|
|
|
|
type ScoreProps = {
|
|
score: ScoresaberScore;
|
|
player: LeaderboardPlayerInfo;
|
|
leaderboard: ScoresaberLeaderboardInfo;
|
|
};
|
|
|
|
export default function LeaderboardScore({
|
|
score,
|
|
player,
|
|
leaderboard,
|
|
}: ScoreProps) {
|
|
const diffName = scoresaberDifficultyNumberToName(
|
|
leaderboard.difficulty.difficulty,
|
|
);
|
|
const accuracy = ((score.baseScore / leaderboard.maxScore) * 100).toFixed(2);
|
|
|
|
return (
|
|
<div className="mb-1 mt-1 grid grid-cols-[0.6fr_3fr_1.3fr] first:pt-0 last:pb-0 md:grid-cols-[1.2fr_6fr_1.3fr]">
|
|
<div className="flex flex-col items-center justify-center">
|
|
<div className="flex w-fit flex-row items-center justify-center gap-1">
|
|
<p>#{formatNumber(score.rank)}</p>
|
|
</div>
|
|
<p
|
|
className="hidden text-sm text-gray-200 md:block"
|
|
title={formatDate(score.timeSet)}
|
|
>
|
|
{formatTimeAgo(score.timeSet)}
|
|
</p>
|
|
</div>
|
|
{/* Song Image */}
|
|
<div className="flex w-full items-center gap-2 ">
|
|
<div className="flex">
|
|
<Image
|
|
src={player.profilePicture}
|
|
alt={player.name}
|
|
className="flex h-fit rounded-md"
|
|
width={50}
|
|
height={50}
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
{/* Player Info */}
|
|
<Link
|
|
href={`/leaderboard/${leaderboard.id}/1`}
|
|
className="transform-gpu transition-all hover:opacity-70"
|
|
>
|
|
<div className="w-fit truncate text-blue-500">
|
|
<p className="font-bold">{player.name}</p>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="flex flex-col items-end gap-2 p-1 md:flex-row md:items-start md:justify-end">
|
|
{/* PP */}
|
|
{score.pp > 0 && (
|
|
<ScoreStatLabel
|
|
className="bg-blue-500 text-center"
|
|
value={formatNumber(score.pp.toFixed(2)) + "pp"}
|
|
/>
|
|
)}
|
|
|
|
{/* Percentage score */}
|
|
<ScoreStatLabel
|
|
value={
|
|
!leaderboard.maxScore
|
|
? formatNumber(score.baseScore)
|
|
: accuracy + "%"
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|