made the score info boxes a grid (still need work)
All checks were successful
deploy / deploy (push) Successful in 54s

This commit is contained in:
Lee 2023-10-21 02:24:47 +01:00
parent 2e971198dc
commit b3ad0d413d
2 changed files with 29 additions and 4 deletions

@ -23,6 +23,7 @@ export default function Score({ score, leaderboard }: ScoreProps) {
{moment(score.timeSet).fromNow()} {moment(score.timeSet).fromNow()}
</p> </p>
</div> </div>
{/* Song Image */}
<div className="flex w-full items-center gap-2"> <div className="flex w-full items-center gap-2">
<Image <Image
src={leaderboard.coverImage} src={leaderboard.coverImage}
@ -31,6 +32,7 @@ export default function Score({ score, leaderboard }: ScoreProps) {
width={60} width={60}
height={60} height={60}
/> />
{/* Song Info */}
<div className="w-fit truncate text-blue-500"> <div className="w-fit truncate text-blue-500">
<p>{leaderboard.songName}</p> <p>{leaderboard.songName}</p>
<p> <p>
@ -41,10 +43,13 @@ export default function Score({ score, leaderboard }: ScoreProps) {
</div> </div>
<div className="flex items-center justify-between p-1 md:items-start md:justify-end"> <div className="flex items-center justify-between p-1 md:items-start md:justify-end">
<div className="flex flex-col md:hidden"> <div className="flex flex-col md:hidden">
{/* Score rank */}
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<GlobeAsiaAustraliaIcon width={20} height={20} /> <GlobeAsiaAustraliaIcon width={20} height={20} />
<p>#{score.rank}</p> <p>#{score.rank}</p>
</div> </div>
{/* Time Set (Mobile) */}
<div> <div>
{" "} {" "}
<p className="block text-sm text-gray-200 xs:hidden"> <p className="block text-sm text-gray-200 xs:hidden">
@ -52,13 +57,17 @@ export default function Score({ score, leaderboard }: ScoreProps) {
</p> </p>
</div> </div>
</div> </div>
<div className="flex items-end justify-end gap-2">
{/* PP */}
<div className="grid w-fit grid-cols-2 grid-rows-1 justify-end gap-2">
{score.pp > 0 && ( {score.pp > 0 && (
<ScoreStatLabel <ScoreStatLabel
className="bg-blue-500 text-center"
value={formatNumber(score.pp.toFixed(2)) + "pp"} value={formatNumber(score.pp.toFixed(2)) + "pp"}
className="bg-blue-500"
/> />
)} )}
{/* Percentage score */}
<ScoreStatLabel <ScoreStatLabel
value={ value={
!leaderboard.maxScore !leaderboard.maxScore
@ -67,6 +76,13 @@ export default function Score({ score, leaderboard }: ScoreProps) {
"%" "%"
} }
/> />
{/* Missed Notes */}
<ScoreStatLabel
className="min-w-[3rem] bg-red-500"
title={`${score.missedNotes} missed notes. ${score.badCuts} bad cuts.`}
value={formatNumber(score.missedNotes + score.badCuts) + "x"}
/>
</div> </div>
</div> </div>
</div> </div>

@ -2,17 +2,26 @@ import clsx from "clsx";
type LabelProps = { type LabelProps = {
value: string; value: string;
title?: string;
className?: string; className?: string;
}; };
export default function ScoreStatLabel({ export default function ScoreStatLabel({
value, value,
title,
className = "bg-neutral-700", className = "bg-neutral-700",
}: LabelProps) { }: LabelProps) {
return ( return (
<div className={clsx("flex flex-col justify-center rounded-md", className)}> <div
className={clsx(
"flex min-w-[5rem] flex-col justify-center rounded-md",
className,
)}
>
<div className="p4-[0.3rem] flex items-center gap-2 pb-[0.2rem] pl-[0.3rem] pr-[0.3rem] pt-[0.2rem]"> <div className="p4-[0.3rem] flex items-center gap-2 pb-[0.2rem] pl-[0.3rem] pr-[0.3rem] pt-[0.2rem]">
<p>{value}</p> <p className="w-full text-center" title={title}>
{value}
</p>
</div> </div>
</div> </div>
); );