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

Compare commits

base: Fascinated:ca3bfa813611d3fc96a2c083c01dc60273eb7f49
Branches Tags
Fascinated:master Fascinated:renovate/node-22.x Fascinated:renovate/lucide-monorepo Fascinated:custom-score-sorting
..
compare: Fascinated:d9b68f0c65322d17b9fee95994093de50f6a4345
Branches Tags
Fascinated:master Fascinated:renovate/node-22.x Fascinated:renovate/lucide-monorepo Fascinated:custom-score-sorting

2 Commits
ca3bfa8136 ... d9b68f0c65

Author SHA1 Message Date
Liam
d9b68f0c65 make the players name gray in the mini card to indicate its them
All checks were successful
Deploy / deploy (push) Successful in 2m26s
Details
2024-09-27 22:17:10 +01:00
Liam
61b8fce571 make mini cards bigger on player page 2024-09-27 22:07:13 +01:00
2 changed files with 11 additions and 11 deletions
Show Stats Expand all files Collapse all files

2
src/components/player/player-data.tsx
View File

@ -42,7 +42,7 @@ export default function PlayerData({ initialPlayerData: initalPlayerData, initia
)} )}
<PlayerScores initialScoreData={initialScoreData} player={player} sort={sort} page={page} /> <PlayerScores initialScoreData={initialScoreData} player={player} sort={sort} page={page} />
</article> </article>
<aside className="w-[500px] hidden xl:flex flex-col gap-2"> <aside className="w-[550px] hidden xl:flex flex-col gap-2">
<Mini type="Global" player={player} /> <Mini type="Global" player={player} />
<Mini type="Country" player={player} /> <Mini type="Country" player={player} />
</aside> </aside>

20
src/components/ranking/mini.tsx
View File

@ -98,7 +98,7 @@ export default function Mini({ type, player }: MiniProps) {
} }
return ( return (
<Card className="w-full flex gap-2 sticky"> <Card className="w-full flex gap-2 sticky select-none">
<div className="flex gap-2"> <div className="flex gap-2">
{icon} {icon}
<p>{type} Ranking</p> <p>{type} Ranking</p>
@ -106,27 +106,27 @@ export default function Mini({ type, player }: MiniProps) {
<div className="flex flex-col"> <div className="flex flex-col">
{isLoading && <p className="text-gray-400">Loading...</p>} {isLoading && <p className="text-gray-400">Loading...</p>}
{isError && <p className="text-red-500">Error</p>} {isError && <p className="text-red-500">Error</p>}
{players?.map((player, index) => { {players?.map((playerRanking, index) => {
const rank = type == "Global" ? player.rank : player.countryRank; const rank = type == "Global" ? playerRanking.rank : playerRanking.countryRank;
const playerName = const playerName =
player.name.length > PLAYER_NAME_MAX_LENGTH playerRanking.name.length > PLAYER_NAME_MAX_LENGTH
? player.name.substring(0, PLAYER_NAME_MAX_LENGTH) + "..." ? playerRanking.name.substring(0, PLAYER_NAME_MAX_LENGTH) + "..."
: player.name; : playerRanking.name;
return ( return (
<Link <Link
key={index} key={index}
href={`/player/${player.id}`} href={`/player/${playerRanking.id}`}
className="flex justify-between gap-2 bg-accent px-2 py-1.5 cursor-pointer transform-gpu transition-all hover:brightness-75 first:rounded-t last:rounded-b" className="flex justify-between gap-2 bg-accent px-2 py-1.5 cursor-pointer transform-gpu transition-all hover:brightness-75 first:rounded-t last:rounded-b"
> >
<div className="flex gap-2"> <div className="flex gap-2">
<p className="text-gray-400">#{formatNumberWithCommas(rank)}</p> <p className="text-gray-400">#{formatNumberWithCommas(rank)}</p>
<Avatar className="w-6 h-6 pointer-events-none"> <Avatar className="w-6 h-6 pointer-events-none">
<AvatarImage alt="Profile Picture" src={player.profilePicture} /> <AvatarImage alt="Profile Picture" src={playerRanking.profilePicture} />
</Avatar> </Avatar>
<p>{playerName}</p> <p className={playerRanking.id === player.id ? "text-gray-400" : ""}>{playerName}</p>
</div> </div>
<p className="text-pp">{formatPp(player.pp)}pp</p> <p className="text-pp">{formatPp(playerRanking.pp)}pp</p>
</Link> </Link>
); );
})} })}