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

make mini ranking text smaller
All checks were successful
Deploy Website / docker (ubuntu-latest) (push) Successful in 2m7s
Details

Browse Source
This commit is contained in:
Lee 2024-10-19 15:37:25 +01:00
parent a1148d0f59
commit 982202f813
4 changed files with 11 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
projects/website/src/components/leaderboard/leaderboard-score.tsx
View File

@ -26,7 +26,7 @@ export default function LeaderboardScore({ score, claimedPlayer }: Props) {
{/* Player */} {/* Player */}
<td className="px-4 py-2 flex gap-2 whitespace-nowrap"> <td className="px-4 py-2 flex gap-2 whitespace-nowrap">
<PlayerInfo player={scorePlayer} claimedPlayer={claimedPlayer} /> <PlayerInfo player={scorePlayer} highlightedPlayer={claimedPlayer} />
</td> </td>
{/* Time Set */} {/* Time Set */}

9
projects/website/src/components/player/player-info.tsx
View File

@ -4,6 +4,7 @@ import Link from "next/link";
import ScoreSaberPlayerToken from "@ssr/common/types/token/scoresaber/score-saber-player-token"; import ScoreSaberPlayerToken from "@ssr/common/types/token/scoresaber/score-saber-player-token";
import ScoreSaberLeaderboardPlayerInfoToken from "@ssr/common/types/token/scoresaber/score-saber-leaderboard-player-info-token"; import ScoreSaberLeaderboardPlayerInfoToken from "@ssr/common/types/token/scoresaber/score-saber-leaderboard-player-info-token";
import { getScoreSaberRole } from "@ssr/common/scoresaber.util"; import { getScoreSaberRole } from "@ssr/common/scoresaber.util";
import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
type TablePlayerProps = { type TablePlayerProps = {
/** /**
@ -12,9 +13,9 @@ type TablePlayerProps = {
player: ScoreSaberPlayerToken | ScoreSaberLeaderboardPlayerInfoToken; player: ScoreSaberPlayerToken | ScoreSaberLeaderboardPlayerInfoToken;
/** /**
* The claimed player. * The player to highlight.
*/ */
claimedPlayer?: ScoreSaberPlayerToken; highlightedPlayer?: ScoreSaberPlayerToken | ScoreSaberPlayer;
/** /**
* Hide the country flag * Hide the country flag
@ -22,7 +23,7 @@ type TablePlayerProps = {
hideCountryFlag?: boolean; hideCountryFlag?: boolean;
}; };
export function PlayerInfo({ player, claimedPlayer, hideCountryFlag }: TablePlayerProps) { export function PlayerInfo({ player, highlightedPlayer, hideCountryFlag }: TablePlayerProps) {
return ( return (
<> <>
<Avatar className="w-[24px] h-[24px] pointer-events-none"> <Avatar className="w-[24px] h-[24px] pointer-events-none">
@ -34,7 +35,7 @@ export function PlayerInfo({ player, claimedPlayer, hideCountryFlag }: TablePlay
{!hideCountryFlag && <CountryFlag code={player.country} size={12} />} {!hideCountryFlag && <CountryFlag code={player.country} size={12} />}
<Link className="transform-gpu transition-all hover:text-blue-500" href={`/player/${player.id}`}> <Link className="transform-gpu transition-all hover:text-blue-500" href={`/player/${player.id}`}>
<p <p
className={player.id == claimedPlayer?.id ? "font-bold" : ""} className={player.id == highlightedPlayer?.id ? "font-bold" : ""}
style={{ style={{
color: getScoreSaberRole(player)?.color, color: getScoreSaberRole(player)?.color,
}} }}

8
projects/website/src/components/ranking/mini.tsx
View File

@ -40,7 +40,7 @@ type Variants = {
const miniVariants: Variants = { const miniVariants: Variants = {
Global: { Global: {
icon: () => <GlobeAmericasIcon className="w-6 h-6" />, icon: () => <GlobeAmericasIcon className="w-5 h-5" />,
}, },
Country: { Country: {
icon: (player: ScoreSaberPlayer) => { icon: (player: ScoreSaberPlayer) => {
@ -79,12 +79,12 @@ export default function Mini({ type, player, shouldUpdate }: MiniProps) {
} }
return ( return (
<Card className="w-full flex gap-2 sticky select-none"> <Card className="w-full flex gap-2 sticky select-none text-sm">
<div className="flex gap-2"> <div className="flex gap-2">
{icon} {icon}
<p>{type} Ranking</p> <p>{type} Ranking</p>
</div> </div>
<div className="flex flex-col text-sm"> <div className="flex flex-col text-xs">
{response.players.map((playerRanking, index) => { {response.players.map((playerRanking, index) => {
const rank = type == "Global" ? playerRanking.rank : playerRanking.countryRank; const rank = type == "Global" ? playerRanking.rank : playerRanking.countryRank;
const playerName = const playerName =
@ -101,7 +101,7 @@ export default function Mini({ type, player, shouldUpdate }: MiniProps) {
> >
<p className="text-gray-400">#{formatNumberWithCommas(rank)}</p> <p className="text-gray-400">#{formatNumberWithCommas(rank)}</p>
<div className="flex gap-2 items-center"> <div className="flex gap-2 items-center">
<PlayerInfo player={playerRanking} claimedPlayer={claimedPlayer} hideCountryFlag /> <PlayerInfo player={playerRanking} highlightedPlayer={player} hideCountryFlag />
</div> </div>
<div className="inline-flex min-w-[11.5em] gap-2 items-center"> <div className="inline-flex min-w-[11.5em] gap-2 items-center">
<p className="text-pp text-right">{formatPp(playerRanking.pp)}pp</p> <p className="text-pp text-right">{formatPp(playerRanking.pp)}pp</p>

2
projects/website/src/components/ranking/player-ranking.tsx
View File

@ -26,7 +26,7 @@ export function PlayerRanking({ player, isCountry }: PlayerRankingProps) {
<span className="text-sm">{isCountry && "(#" + formatNumberWithCommas(player.rank) + ")"}</span> <span className="text-sm">{isCountry && "(#" + formatNumberWithCommas(player.rank) + ")"}</span>
</td> </td>
<td className="flex items-center gap-2 px-4 py-2"> <td className="flex items-center gap-2 px-4 py-2">
<PlayerInfo player={player} claimedPlayer={claimedPlayer} /> <PlayerInfo player={player} highlightedPlayer={claimedPlayer} />
</td> </td>
<td className="px-4 py-2 text-pp text-center">{formatPp(player.pp)}pp</td> <td className="px-4 py-2 text-pp text-center">{formatPp(player.pp)}pp</td>
<td className="px-4 py-2 text-center">{formatNumberWithCommas(player.scoreStats.totalPlayCount)}</td> <td className="px-4 py-2 text-center">{formatNumberWithCommas(player.scoreStats.totalPlayCount)}</td>