made the score info boxes a grid (still need work)
All checks were successful
deploy / deploy (push) Successful in 54s
All checks were successful
deploy / deploy (push) Successful in 54s
This commit is contained in:
parent
2e971198dc
commit
b3ad0d413d
@ -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>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user