Fascinated/scoresaber-reloadedv3
Archived
1
1
Fork 0
Code Issues 1 Pull Requests 2 Actions Packages Activity

improve the per score leaderboard view and add a border to the card to make it more obvious
All checks were successful
Deploy SSR / deploy (push) Successful in 1m21s
Details

Browse Source
This commit is contained in:
Lee 2024-09-13 00:00:14 +01:00
parent e852ac864d
commit 33b270ab0b
4 changed files with 9 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/leaderboard/leaderboard-player.tsx
View File

@ -13,10 +13,10 @@ export default function LeaderboardPlayer({ score }: Props) {
<Image <Image
unoptimized unoptimized
src={player.profilePicture} src={player.profilePicture}
width={32} width={48}
height={32} height={48}
alt="Song Artwork" alt="Song Artwork"
className="rounded-md min-w-[32px]" className="rounded-md min-w-[48px]"
priority priority
/> />
<div> <div>

6
src/components/leaderboard/leaderboard-score.tsx
View File

@ -2,7 +2,6 @@
import ScoreSaberLeaderboard from "@/common/data-fetcher/types/scoresaber/scoresaber-leaderboard"; import ScoreSaberLeaderboard from "@/common/data-fetcher/types/scoresaber/scoresaber-leaderboard";
import ScoreSaberScore from "@/common/data-fetcher/types/scoresaber/scoresaber-score"; import ScoreSaberScore from "@/common/data-fetcher/types/scoresaber/scoresaber-score";
import { timeAgo } from "@/common/time-utils";
import ScoreRankInfo from "../player/score/score-rank-info"; import ScoreRankInfo from "../player/score/score-rank-info";
import LeaderboardPlayer from "./leaderboard-player"; import LeaderboardPlayer from "./leaderboard-player";
import LeaderboardScoreStats from "./leaderboard-score-stats"; import LeaderboardScoreStats from "./leaderboard-score-stats";
@ -21,10 +20,9 @@ type Props = {
export default function LeaderboardScore({ score, leaderboard }: Props) { export default function LeaderboardScore({ score, leaderboard }: Props) {
return ( return (
<div className="grid w-full pb-2 pt-2 gap-2 lg:gap-0 first:pt-0 last:pb-0 grid-cols-[20px 1fr_1fr] lg:grid-cols-[100px_4fr_0.8fr_300px]"> <div className="grid items-center w-full pb-2 pt-2 gap-2 lg:gap-0 first:pt-0 last:pb-0 grid-cols-[20px 1fr_1fr] lg:grid-cols-[130px_4fr_300px]">
<ScoreRankInfo score={score} isLeaderboard /> <ScoreRankInfo score={score} />
<LeaderboardPlayer score={score} /> <LeaderboardPlayer score={score} />
<p className="text-sm text-right">{timeAgo(new Date(score.timeSet))}</p>
<LeaderboardScoreStats score={score} leaderboard={leaderboard} /> <LeaderboardScoreStats score={score} leaderboard={leaderboard} />
</div> </div>
); );

2
src/components/leaderboard/leaderboard-scores.tsx
View File

@ -48,7 +48,7 @@ export default function LeaderboardScores({ leaderboard }: Props) {
return ( return (
<motion.div initial={{ opacity: 0, y: -50 }} exit={{ opacity: 0, y: -50 }} animate={{ opacity: 1, y: 0 }}> <motion.div initial={{ opacity: 0, y: -50 }} exit={{ opacity: 0, y: -50 }} animate={{ opacity: 1, y: 0 }}>
<Card className="flex gap-2"> <Card className="flex gap-2 border border-input mt-2">
<div className="text-center"> <div className="text-center">
{isError && <p>Oopsies! Something went wrong.</p>} {isError && <p>Oopsies! Something went wrong.</p>}
{currentScores.scores.length === 0 && <p>No scores found. Invalid Page?</p>} {currentScores.scores.length === 0 && <p>No scores found. Invalid Page?</p>}

13
src/components/player/score/score-rank-info.tsx
View File

@ -2,26 +2,19 @@ import ScoreSaberScore from "@/common/data-fetcher/types/scoresaber/scoresaber-s
import { formatNumberWithCommas } from "@/common/number-utils"; import { formatNumberWithCommas } from "@/common/number-utils";
import { timeAgo } from "@/common/time-utils"; import { timeAgo } from "@/common/time-utils";
import { GlobeAmericasIcon } from "@heroicons/react/24/solid"; import { GlobeAmericasIcon } from "@heroicons/react/24/solid";
import clsx from "clsx";
type Props = { type Props = {
score: ScoreSaberScore; score: ScoreSaberScore;
isLeaderboard?: boolean;
}; };
export default function ScoreRankInfo({ score, isLeaderboard = false }: Props) { export default function ScoreRankInfo({ score }: Props) {
return ( return (
<div <div className="flex w-full flex-row justify-between lg:w-[125px] lg:flex-col lg:justify-center items-center">
className={clsx(
"flex w-full flex-row justify-between lg:w-[125px] lg:flex-col",
!isLeaderboard && "lg:justify-center items-center"
)}
>
<div className="flex gap-1 items-center"> <div className="flex gap-1 items-center">
<GlobeAmericasIcon className="w-5 h-5" /> <GlobeAmericasIcon className="w-5 h-5" />
<p className="text-pp">#{formatNumberWithCommas(score.rank)}</p> <p className="text-pp">#{formatNumberWithCommas(score.rank)}</p>
</div> </div>
{!isLeaderboard && <p className="text-sm">{timeAgo(new Date(score.timeSet))}</p>} <p className="text-sm">{timeAgo(new Date(score.timeSet))}</p>
</div> </div>
); );
} }