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 */}
<td className="px-4 py-2 flex gap-2 whitespace-nowrap">
<PlayerInfo player={scorePlayer} claimedPlayer={claimedPlayer} />
<PlayerInfo player={scorePlayer} highlightedPlayer={claimedPlayer} />
</td>
{/* 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 ScoreSaberLeaderboardPlayerInfoToken from "@ssr/common/types/token/scoresaber/score-saber-leaderboard-player-info-token";
import { getScoreSaberRole } from "@ssr/common/scoresaber.util";
import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
type TablePlayerProps = {
/**
@ -12,9 +13,9 @@ type TablePlayerProps = {
player: ScoreSaberPlayerToken | ScoreSaberLeaderboardPlayerInfoToken;
/**
* The claimed player.
* The player to highlight.
*/
claimedPlayer?: ScoreSaberPlayerToken;
highlightedPlayer?: ScoreSaberPlayerToken | ScoreSaberPlayer;
/**
* Hide the country flag
@ -22,7 +23,7 @@ type TablePlayerProps = {
hideCountryFlag?: boolean;
};
export function PlayerInfo({ player, claimedPlayer, hideCountryFlag }: TablePlayerProps) {
export function PlayerInfo({ player, highlightedPlayer, hideCountryFlag }: TablePlayerProps) {
return (
<>
<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} />}
<Link className="transform-gpu transition-all hover:text-blue-500" href={`/player/${player.id}`}>
<p
className={player.id == claimedPlayer?.id ? "font-bold" : ""}
className={player.id == highlightedPlayer?.id ? "font-bold" : ""}
style={{
color: getScoreSaberRole(player)?.color,
}}

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

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