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

highlight correct player on leaderboard scores and make player name clickable on a leaderboard score
Some checks failed
Deploy Website / docker (ubuntu-latest) (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Lee 2024-10-26 11:45:34 +01:00
parent 413d72182d
commit e0c719eaba
5 changed files with 27 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,6 +8,7 @@ import { ScoreTimeSet } from "@/components/score/score-time-set";
import { ScoreModifiers } from "@/components/score/score-modifiers";
import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
import ScoreMissesBadge from "@/components/score/badges/score-misses";
import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
type Props = {
/**
@ -23,10 +24,10 @@ type Props = {
/**
* The claimed player.
*/
claimedPlayer?: ScoreSaberPlayerToken;
highlightedPlayer?: ScoreSaberPlayer;
};
export default function LeaderboardScore({ score, leaderboard, claimedPlayer }: Props) {
export default function LeaderboardScore({ score, leaderboard, highlightedPlayer }: Props) {
const scorePlayer = score.playerInfo;
return (
@ -36,7 +37,7 @@ export default function LeaderboardScore({ score, leaderboard, claimedPlayer }:
{/* Player */}
<td className="px-4 py-2 flex gap-2 whitespace-nowrap">
<PlayerInfo player={scorePlayer} highlightedPlayer={claimedPlayer} />
<PlayerInfo player={scorePlayer} highlightedPlayer={highlightedPlayer} useLink />
</td>
{/* Time Set */}

7
projects/website/src/components/leaderboard/leaderboard-scores.tsx
View File

@ -16,6 +16,7 @@ import LeaderboardScoresResponse from "@ssr/common/response/leaderboard-scores-r
import useDatabase from "@/hooks/use-database";
import { useLiveQuery } from "dexie-react-hooks";
import LeaderboardScoresSkeleton from "@/components/leaderboard/skeleton/leaderboard-scores-skeleton";
import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
type LeaderboardScoresProps = {
initialPage?: number;
@ -25,6 +26,7 @@ type LeaderboardScoresProps = {
isLeaderboardPage?: boolean;
leaderboardChanged?: (id: number) => void;
disableUrlChanging?: boolean;
highlightedPlayer?: ScoreSaberPlayer;
};
export default function LeaderboardScores({
@ -35,12 +37,11 @@ export default function LeaderboardScores({
isLeaderboardPage,
leaderboardChanged,
disableUrlChanging,
highlightedPlayer,
}: LeaderboardScoresProps) {
if (!initialPage) {
initialPage = 1;
}
const database = useDatabase();
const claimedPlayer = useLiveQuery(() => database.getClaimedPlayer());
const { width } = useWindowDimensions();
const controls = useAnimation();
@ -182,7 +183,7 @@ export default function LeaderboardScores({
<motion.tbody initial="hidden" animate={controls} className="border-none" variants={scoreAnimation}>
{currentScores.scores.map((playerScore, index) => (
<motion.tr key={index} className="border-b border-border" variants={scoreAnimation}>
<LeaderboardScore score={playerScore} leaderboard={leaderboard} claimedPlayer={claimedPlayer} />
<LeaderboardScore score={playerScore} leaderboard={leaderboard} highlightedPlayer={highlightedPlayer} />
</motion.tr>
))}
</motion.tbody>

7
projects/website/src/components/player/player-scores.tsx
View File

@ -218,7 +218,12 @@ export default function PlayerScores({ initialScoreData, initialSearch, player,
>
{scores.scores.map((score, index) => (
<motion.div key={index} variants={scoreAnimation}>
<Score score={score.score} leaderboard={score.leaderboard} beatSaverMap={score.beatSaver} />
<Score
score={score.score}
leaderboard={score.leaderboard}
beatSaverMap={score.beatSaver}
highlightedPlayer={player}
/>
</motion.div>
))}
</motion.div>

9
projects/website/src/components/score/score-views/score-overview.tsx
View File

@ -4,8 +4,14 @@ import { ScoreStatsToken } from "@ssr/common/types/token/beatleader/score-stats/
import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
import LeaderboardScoresResponse from "@ssr/common/response/leaderboard-scores-response";
import { ScoreSaberScore } from "@ssr/common/model/score/impl/scoresaber-score";
import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
type ScoreOverviewProps = {
/**
* The player to highlight
*/
highlightedPlayer?: ScoreSaberPlayer;
/**
* The initial page to show
*/
@ -27,7 +33,7 @@ type ScoreOverviewProps = {
scores?: LeaderboardScoresResponse<ScoreSaberScore, ScoreSaberLeaderboard>;
};
export function ScoreOverview({ scoreStats, initialPage, leaderboard, scores }: ScoreOverviewProps) {
export function ScoreOverview({ highlightedPlayer, scoreStats, initialPage, leaderboard, scores }: ScoreOverviewProps) {
return (
<>
{scoreStats && (
@ -40,6 +46,7 @@ export function ScoreOverview({ scoreStats, initialPage, leaderboard, scores }:
initialPage={initialPage}
initialScores={scores}
leaderboard={leaderboard}
highlightedPlayer={highlightedPlayer}
disableUrlChanging
/>
</>

6
projects/website/src/components/score/score.tsx
View File

@ -26,8 +26,11 @@ import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leade
import { BeatSaverMap } from "@ssr/common/model/beatsaver/map";
import LeaderboardScoresResponse from "@ssr/common/response/leaderboard-scores-response";
import { ScoreStatsToken } from "@ssr/common/types/token/beatleader/score-stats/score-stats";
import ScoreSaberPlayerToken from "@ssr/common/types/token/scoresaber/score-saber-player-token";
import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
type Props = {
highlightedPlayer?: ScoreSaberPlayer;
score: ScoreSaberScore;
leaderboard: ScoreSaberLeaderboard;
beatSaverMap?: BeatSaverMap;
@ -53,7 +56,7 @@ const modes: Mode[] = [
{ name: "Score History", icon: <TrendingUpIcon className="w-4 h-4" /> },
];
export default function Score({ leaderboard, beatSaverMap, score, settings }: Props) {
export default function Score({ leaderboard, beatSaverMap, score, settings, highlightedPlayer }: Props) {
const [baseScore, setBaseScore] = useState(score.score);
const [isLeaderboardExpanded, setIsLeaderboardExpanded] = useState(false);
const [loading, setLoading] = useState(false);
@ -176,6 +179,7 @@ export default function Score({ leaderboard, beatSaverMap, score, settings }: Pr
leaderboard={leaderboard}
initialPage={scoresPage}
scoreStats={dropdownData.scoreStats}
highlightedPlayer={highlightedPlayer}
/>
)}