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

fix mini hover on player
All checks were successful
Deploy Website / docker (ubuntu-latest) (push) Successful in 2m11s
Details

Browse Source
This commit is contained in:
Lee 2024-10-19 17:48:29 +01:00
parent 9b549f8dc6
commit 8f617aca82
2 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,6 +5,7 @@ import ScoreSaberPlayerToken from "@ssr/common/types/token/scoresaber/score-sabe
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"; import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
import { clsx } from "clsx";
type TablePlayerProps = { type TablePlayerProps = {
/** /**
@ -21,9 +22,14 @@ type TablePlayerProps = {
* Hide the country flag * Hide the country flag
*/ */
hideCountryFlag?: boolean; hideCountryFlag?: boolean;
/**
* Whether to apply hover brightness
*/
hoverBrightness?: boolean;
}; };
export function PlayerInfo({ player, highlightedPlayer, hideCountryFlag }: TablePlayerProps) { export function PlayerInfo({ player, highlightedPlayer, hideCountryFlag, hoverBrightness = true }: TablePlayerProps) {
return ( return (
<div className="flex gap-2 items-center"> <div className="flex gap-2 items-center">
<Avatar className="w-[24px] h-[24px] pointer-events-none"> <Avatar className="w-[24px] h-[24px] pointer-events-none">
@ -33,7 +39,10 @@ export function PlayerInfo({ player, highlightedPlayer, hideCountryFlag }: Table
/> />
</Avatar> </Avatar>
{!hideCountryFlag && <CountryFlag code={player.country} size={12} />} {!hideCountryFlag && <CountryFlag code={player.country} size={12} />}
<Link className="transform-gpu transition-all hover:brightness-[66%]" href={`/player/${player.id}`}> <Link
className={clsx(hoverBrightness ? "transform-gpu transition-all hover:brightness-[66%]" : "")}
href={`/player/${player.id}`}
>
<p <p
className={player.id == highlightedPlayer?.id ? "font-bold" : ""} className={player.id == highlightedPlayer?.id ? "font-bold" : ""}
style={{ style={{

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

@ -97,11 +97,11 @@ export default function Mini({ type, player, shouldUpdate }: MiniProps) {
<Link <Link
key={index} key={index}
href={`/player/${playerRanking.id}`} href={`/player/${playerRanking.id}`}
className="grid gap-2 grid-cols-[auto_1fr_auto] items-center bg-accent px-2 py-1.5 cursor-pointer transform-gpu transition-all hover:brightness-[66%] first:rounded-t last:rounded-b" className="grid gap-2 grid-cols-[auto_1fr_auto] items-center bg-accent px-2 py-1.5 cursor-pointer transform-gpu transition-all hover:brightness-75 first:rounded-t last:rounded-b"
> >
<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} highlightedPlayer={player} hideCountryFlag /> <PlayerInfo player={playerRanking} highlightedPlayer={player} hideCountryFlag hoverBrightness={false} />
</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>