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

move score page fetching to the backend
Some checks failed
Deploy Backend / deploy (push) Successful in 2m26s
Details
Deploy Website / deploy (push) Failing after 1m52s
Details

Browse Source
This commit is contained in:
Lee
2024-10-17 15:30:14 +01:00
parent 118dc9d9f1
commit b3c124631a
78 changed files with 1150 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
projects/website/src/app/(pages)/leaderboard/[...slug]/page.tsx
View File

@ -3,11 +3,14 @@ import { redirect } from "next/navigation";
import { Colors } from "@/common/colors";
import { getAverageColor } from "@/common/image-utils";
import { LeaderboardData } from "@/components/leaderboard/leaderboard-data";
import { scoresaberService } from "@ssr/common/service/impl/scoresaber";
import ScoreSaberLeaderboardScoresPageToken from "@ssr/common/types/token/scoresaber/score-saber-leaderboard-scores-page-token";
import NodeCache from "node-cache";
import ScoreSaberLeaderboardToken from "@ssr/common/types/token/scoresaber/score-saber-leaderboard-token";
import { Config } from "@ssr/common/config";
import ScoreSaberScore from "@ssr/common/score/impl/scoresaber-score";
import { LeaderboardResponse } from "@ssr/common/response/leaderboard-response";
import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
import { fetchLeaderboard } from "@ssr/common/utils/leaderboard.util";
import PlayerScoresResponse from "../../../../../../common/src/response/player-scores-response.ts";
import { fetchLeaderboardScores } from "@ssr/common/utils/score-utils";
const UNKNOWN_LEADERBOARD = {
title: "ScoreSaber Reloaded - Unknown Leaderboard",
@ -24,8 +27,8 @@ type Props = {
};
type LeaderboardData = {
leaderboard: ScoreSaberLeaderboardToken | undefined;
scores: ScoreSaberLeaderboardScoresPageToken | undefined;
leaderboardResponse: LeaderboardResponse<ScoreSaberLeaderboard>;
scores?: PlayerScoresResponse<ScoreSaberScore, ScoreSaberLeaderboard>;
page: number;
};
@ -38,7 +41,10 @@ const leaderboardCache = new NodeCache({ stdTTL: 60, checkperiod: 120 });
* @param fetchScores whether to fetch the scores
* @returns the leaderboard data and scores
*/
const getLeaderboardData = async ({ params }: Props, fetchScores: boolean = true) => {
const getLeaderboardData = async (
{ params }: Props,
fetchScores: boolean = true
): Promise<LeaderboardData | undefined> => {
const { slug } = await params;
const id = slug[0]; // The leaderboard id
const page = parseInt(slug[1]) || 1; // The page number
@ -47,16 +53,17 @@ const getLeaderboardData = async ({ params }: Props, fetchScores: boolean = true
if (leaderboardCache.has(cacheId)) {
return leaderboardCache.get(cacheId) as LeaderboardData;
}
const leaderboard = await scoresaberService.lookupLeaderboard(id);
let scores: ScoreSaberLeaderboardScoresPageToken | undefined;
if (fetchScores) {
scores = await scoresaberService.lookupLeaderboardScores(id + "", page);
const leaderboard = await fetchLeaderboard<ScoreSaberLeaderboard>("scoresaber", id + "");
if (leaderboard === undefined) {
return undefined;
}
const leaderboardData = {
const scores = fetchScores
? await fetchLeaderboardScores<ScoreSaberScore, ScoreSaberLeaderboard>("scoresaber", id + "", page)
: undefined;
const leaderboardData: LeaderboardData = {
leaderboardResponse: leaderboard,
page: page,
leaderboard: leaderboard,
scores: scores,
};
@ -65,8 +72,8 @@ const getLeaderboardData = async ({ params }: Props, fetchScores: boolean = true
};
export async function generateMetadata(props: Props): Promise<Metadata> {
const { leaderboard } = await getLeaderboardData(props, false);
if (leaderboard === undefined) {
const response = await getLeaderboardData(props, false);
if (response === undefined) {
return {
title: UNKNOWN_LEADERBOARD.title,
description: UNKNOWN_LEADERBOARD.description,
@ -77,6 +84,7 @@ export async function generateMetadata(props: Props): Promise<Metadata> {
};
}
const { leaderboard } = response.leaderboardResponse;
return {
title: `${leaderboard.songName} ${leaderboard.songSubName} by ${leaderboard.songAuthorName}`,
openGraph: {
@ -95,24 +103,25 @@ export async function generateMetadata(props: Props): Promise<Metadata> {
}
export async function generateViewport(props: Props): Promise<Viewport> {
const { leaderboard } = await getLeaderboardData(props, false);
if (leaderboard === undefined) {
const response = await getLeaderboardData(props, false);
if (response === undefined) {
return {
themeColor: Colors.primary,
};
}
const color = await getAverageColor(leaderboard.coverImage);
const color = await getAverageColor(response.leaderboardResponse.leaderboard.songArt);
return {
themeColor: color.color,
};
}
export default async function LeaderboardPage(props: Props) {
const { leaderboard, scores, page } = await getLeaderboardData(props);
if (leaderboard == undefined) {
const response = await getLeaderboardData(props);
if (response == undefined) {
return redirect("/");
}
const { leaderboardResponse, scores } = response;
return <LeaderboardData initialLeaderboard={leaderboard} initialPage={page} initialScores={scores} />;
return <LeaderboardData initialLeaderboard={response.leaderboardResponse} initialScores={scores} />;
}

20
projects/website/src/app/(pages)/player/[...slug]/page.tsx
View File

@ -3,13 +3,16 @@ import { Metadata, Viewport } from "next";
import { redirect } from "next/navigation";
import { Colors } from "@/common/colors";
import { getAverageColor } from "@/common/image-utils";
import { ScoreSort } from "@ssr/common/types/score/score-sort";
import { scoresaberService } from "@ssr/common/service/impl/scoresaber";
import ScoreSaberPlayerScoresPageToken from "@ssr/common/types/token/scoresaber/score-saber-player-scores-page-token";
import ScoreSaberPlayer, { getScoreSaberPlayerFromToken } from "@ssr/common/types/player/impl/scoresaber-player";
import NodeCache from "node-cache";
import { getCookieValue } from "@ssr/common/utils/cookie-utils";
import { Config } from "@ssr/common/config";
import ScoreSaberPlayer, { getScoreSaberPlayerFromToken } from "@ssr/common/player/impl/scoresaber-player";
import { ScoreSort } from "@ssr/common/score/score-sort";
import ScoreSaberScore from "@ssr/common/score/impl/scoresaber-score";
import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
import { fetchPlayerScores } from "@ssr/common/utils/score-utils";
import PlayerScoresResponse from "../../../../../../common/src/response/player-scores-response";
const UNKNOWN_PLAYER = {
title: "ScoreSaber Reloaded - Unknown Player",
@ -27,7 +30,7 @@ type Props = {
type PlayerData = {
player: ScoreSaberPlayer | undefined;
scores: ScoreSaberPlayerScoresPageToken | undefined;
scores: PlayerScoresResponse<ScoreSaberScore, ScoreSaberLeaderboard> | undefined;
sort: ScoreSort;
page: number;
search: string;
@ -56,14 +59,9 @@ const getPlayerData = async ({ params }: Props, fetchScores: boolean = true): Pr
const playerToken = await scoresaberService.lookupPlayer(id);
const player = playerToken && (await getScoreSaberPlayerFromToken(playerToken, await getCookieValue("playerId")));
let scores: ScoreSaberPlayerScoresPageToken | undefined;
let scores: PlayerScoresResponse<ScoreSaberScore, ScoreSaberLeaderboard> | undefined;
if (fetchScores) {
scores = await scoresaberService.lookupPlayerScores({
playerId: id,
sort,
page,
search,
});
scores = await fetchPlayerScores("scoresaber", id, page, sort, search);
}
const playerData = {

7
projects/website/src/common/database/database.ts
View File

@ -1,5 +1,4 @@
import Dexie, { EntityTable } from "dexie";
import BeatSaverMap from "./types/beatsaver-map";
import Settings from "./types/settings";
import { Friend } from "@/common/database/types/friends";
import ScoreSaberPlayerToken from "@ssr/common/types/token/scoresaber/score-saber-player-token";
@ -15,11 +14,6 @@ export default class Database extends Dexie {
*/
settings!: EntityTable<Settings, "id">;
/**
* Cached BeatSaver maps
*/
beatSaverMaps!: EntityTable<BeatSaverMap, "hash">;
/**
* The added friends
*/
@ -37,7 +31,6 @@ export default class Database extends Dexie {
// Mapped tables
this.settings.mapToClass(Settings);
this.beatSaverMaps.mapToClass(BeatSaverMap);
// Populate default settings if the table is empty
this.on("populate", () => this.populateDefaults());

23
projects/website/src/common/database/types/beatsaver-map.ts
View File

@ -1,23 +0,0 @@
import { Entity } from "dexie";
import Database from "../database";
import { BeatSaverMapToken } from "@ssr/common/types/token/beatsaver/beat-saver-map-token";
/**
* A beat saver map.
*/
export default class BeatSaverMap extends Entity<Database> {
/**
* The hash of the map.
*/
hash!: string;
/**
* The bsr code for the map.
*/
bsr!: string;
/**
* The full data for the map.
*/
fullData!: BeatSaverMapToken;
}

2
projects/website/src/components/api/api-health.tsx
View File

@ -36,7 +36,7 @@ export function ApiHealth() {
? "The API has recovered connectivity."
: "The API has lost connectivity, some data may be unavailable.",
variant: online ? "success" : "destructive",
duration: 10_000, // 10 seconds
duration: 5_000, // 5 seconds
});
}

2
projects/website/src/components/friend/add-friend.tsx
View File

@ -6,7 +6,7 @@ import { useToast } from "@/hooks/use-toast";
import Tooltip from "../tooltip";
import { Button } from "../ui/button";
import { PersonIcon } from "@radix-ui/react-icons";
import ScoreSaberPlayer from "@ssr/common/types/player/impl/scoresaber-player";
import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
import { trackPlayer } from "@ssr/common/utils/player-utils";
type Props = {

69
projects/website/src/components/leaderboard/leaderboard-data.tsx
View File

@ -2,70 +2,55 @@
import LeaderboardScores from "@/components/leaderboard/leaderboard-scores";
import { LeaderboardInfo } from "@/components/leaderboard/leaderboard-info";
import ScoreSaberScore from "@ssr/common/score/impl/scoresaber-score";
import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
import { LeaderboardResponse } from "@ssr/common/response/leaderboard-response";
import { useQuery } from "@tanstack/react-query";
import { useCallback, useEffect, useState } from "react";
import BeatSaverMap from "@/common/database/types/beatsaver-map";
import ScoreSaberLeaderboardScoresPageToken from "@ssr/common/types/token/scoresaber/score-saber-leaderboard-scores-page-token";
import ScoreSaberLeaderboardToken from "@ssr/common/types/token/scoresaber/score-saber-leaderboard-token";
import { scoresaberService } from "@ssr/common/service/impl/scoresaber";
import { lookupBeatSaverMap } from "@/common/beatsaver-utils";
import { useState } from "react";
import { fetchLeaderboard } from "@ssr/common/utils/leaderboard.util";
import PlayerScoresResponse from "../../../../common/src/response/player-scores-response.ts";
const REFRESH_INTERVAL = 1000 * 60 * 5;
type LeaderboardDataProps = {
/**
* The page to show when opening the leaderboard.
* The initial leaderboard data.
*/
initialPage?: number;
initialLeaderboard: LeaderboardResponse<ScoreSaberLeaderboard>;
/**
* The initial scores to show.
* The initial score data.
*/
initialScores?: ScoreSaberLeaderboardScoresPageToken;
/**
* The leaderboard to display.
*/
initialLeaderboard: ScoreSaberLeaderboardToken;
initialScores: PlayerScoresResponse<ScoreSaberScore, ScoreSaberLeaderboard>;
};
export function LeaderboardData({ initialPage, initialScores, initialLeaderboard }: LeaderboardDataProps) {
const [beatSaverMap, setBeatSaverMap] = useState<BeatSaverMap | undefined>();
const [selectedLeaderboardId, setSelectedLeaderboardId] = useState(initialLeaderboard.id);
export function LeaderboardData({ initialLeaderboard, initialScores }: LeaderboardDataProps) {
const [currentLeaderboardId, setCurrentLeaderboardId] = useState(initialLeaderboard.leaderboard.id);
let currentLeaderboard = initialLeaderboard;
const { data } = useQuery({
queryKey: ["leaderboard", selectedLeaderboardId],
queryFn: () => scoresaberService.lookupLeaderboard(selectedLeaderboardId + ""),
initialData: initialLeaderboard,
let leaderboard = initialLeaderboard;
const { data, isLoading, isError } = useQuery({
queryKey: ["leaderboard", currentLeaderboardId],
queryFn: async (): Promise<LeaderboardResponse<ScoreSaberLeaderboard> | undefined> => {
return fetchLeaderboard<ScoreSaberLeaderboard>("scoresaber", currentLeaderboardId + "");
},
refetchInterval: REFRESH_INTERVAL,
refetchIntervalInBackground: false,
});
if (data) {
currentLeaderboard = data;
}
const fetchBeatSaverData = useCallback(async () => {
const beatSaverMap = await lookupBeatSaverMap(initialLeaderboard.songHash);
setBeatSaverMap(beatSaverMap);
}, [initialLeaderboard.songHash]);
useEffect(() => {
fetchBeatSaverData();
}, [fetchBeatSaverData]);
if (!currentLeaderboard) {
return null;
if (data && (!isLoading || !isError)) {
leaderboard = data;
}
return (
<main className="flex flex-col-reverse xl:flex-row w-full gap-2">
<LeaderboardScores
leaderboard={currentLeaderboard}
leaderboard={leaderboard.leaderboard}
initialScores={initialScores}
initialPage={initialPage}
leaderboardChanged={newId => setCurrentLeaderboardId(newId)}
showDifficulties
isLeaderboardPage
leaderboardChanged={id => setSelectedLeaderboardId(id)}
/>
<LeaderboardInfo leaderboard={currentLeaderboard} beatSaverMap={beatSaverMap} />
<LeaderboardInfo leaderboard={leaderboard.leaderboard} beatSaverMap={leaderboard.beatsaver} />
</main>
);
}

8
projects/website/src/components/leaderboard/leaderboard-info.tsx
View File

@ -2,14 +2,14 @@ import Card from "@/components/card";
import Image from "next/image";
import { LeaderboardSongStarCount } from "@/components/leaderboard/leaderboard-song-star-count";
import ScoreButtons from "@/components/score/score-buttons";
import BeatSaverMap from "@/common/database/types/beatsaver-map";
import ScoreSaberLeaderboardToken from "@ssr/common/types/token/scoresaber/score-saber-leaderboard-token";
import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
import { BeatSaverMap } from "@ssr/common/model/beatsaver/beatsaver-map";
type LeaderboardInfoProps = {
/**
* The leaderboard to display.
*/
leaderboard: ScoreSaberLeaderboardToken;
leaderboard: ScoreSaberLeaderboard;
/**
* The beat saver map associated with the leaderboard.
@ -46,7 +46,7 @@ export function LeaderboardInfo({ leaderboard, beatSaverMap }: LeaderboardInfoPr
</div>
</div>
<Image
src={leaderboard.coverImage}
src={leaderboard.songArt}
alt={`${leaderboard.songName} Cover Image`}
className="rounded-md w-[96px] h-[96px]"
width={96}

8
projects/website/src/components/leaderboard/leaderboard-player.tsx
View File

@ -1,7 +1,7 @@
import Image from "next/image";
import Link from "next/link";
import ScoreSaberScoreToken from "@ssr/common/types/token/scoresaber/score-saber-score-token";
import ScoreSaberPlayer from "@ssr/common/types/player/impl/scoresaber-player";
import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
import ScoreSaberScore from "@ssr/common/score/impl/scoresaber-score";
type Props = {
/**
@ -12,11 +12,11 @@ type Props = {
/**
* The score to display.
*/
score: ScoreSaberScoreToken;
score: ScoreSaberScore;
};
export default function LeaderboardPlayer({ player, score }: Props) {
const scorePlayer = score.leaderboardPlayerInfo;
const scorePlayer = score.playerInfo;
const isPlayerWhoSetScore = player && scorePlayer.id === player.id;
return (

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

@ -4,8 +4,8 @@ import clsx from "clsx";
import { getScoreBadgeFromAccuracy } from "@/common/song-utils";
import Tooltip from "@/components/tooltip";
import { ScoreBadge, ScoreBadges } from "@/components/score/score-badge";
import ScoreSaberScoreToken from "@ssr/common/types/token/scoresaber/score-saber-score-token";
import ScoreSaberLeaderboardToken from "@ssr/common/types/token/scoresaber/score-saber-leaderboard-token";
import ScoreSaberScore from "@ssr/common/score/impl/scoresaber-score";
import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
const badges: ScoreBadge[] = [
{
@ -13,7 +13,7 @@ const badges: ScoreBadge[] = [
color: () => {
return "bg-pp";
},
create: (score: ScoreSaberScoreToken) => {
create: (score: ScoreSaberScore) => {
const pp = score.pp;
if (pp === 0) {
return undefined;
@ -23,12 +23,12 @@ const badges: ScoreBadge[] = [
},
{
name: "Accuracy",
color: (score: ScoreSaberScoreToken, leaderboard: ScoreSaberLeaderboardToken) => {
const acc = (score.baseScore / leaderboard.maxScore) * 100;
color: (score: ScoreSaberScore, leaderboard: ScoreSaberLeaderboard) => {
const acc = (score.score / leaderboard.maxScore) * 100;
return getScoreBadgeFromAccuracy(acc).color;
},
create: (score: ScoreSaberScoreToken, leaderboard: ScoreSaberLeaderboardToken) => {
const acc = (score.baseScore / leaderboard.maxScore) * 100;
create: (score: ScoreSaberScore, leaderboard: ScoreSaberLeaderboard) => {
const acc = (score.score / leaderboard.maxScore) * 100;
const scoreBadge = getScoreBadgeFromAccuracy(acc);
let accDetails = `Accuracy ${scoreBadge.name != "-" ? scoreBadge.name : ""}`;
if (scoreBadge.max == null) {
@ -56,12 +56,12 @@ const badges: ScoreBadge[] = [
},
{
name: "Full Combo",
create: (score: ScoreSaberScoreToken) => {
const fullCombo = score.missedNotes === 0;
create: (score: ScoreSaberScore) => {
const fullCombo = score.misses === 0;
return (
<>
<p>{fullCombo ? <span className="text-green-400">FC</span> : formatNumberWithCommas(score.missedNotes)}</p>
<p>{fullCombo ? <span className="text-green-400">FC</span> : formatNumberWithCommas(score.misses)}</p>
<XMarkIcon className={clsx("w-5 h-5", fullCombo ? "hidden" : "text-red-400")} />
</>
);
@ -70,8 +70,8 @@ const badges: ScoreBadge[] = [
];
type Props = {
score: ScoreSaberScoreToken;
leaderboard: ScoreSaberLeaderboardToken;
score: ScoreSaberScore;
leaderboard: ScoreSaberLeaderboard;
};
export default function LeaderboardScoreStats({ score, leaderboard }: Props) {

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

@ -1,9 +1,9 @@
import LeaderboardPlayer from "./leaderboard-player";
import LeaderboardScoreStats from "./leaderboard-score-stats";
import ScoreRankInfo from "@/components/score/score-rank-info";
import ScoreSaberPlayer from "@ssr/common/types/player/impl/scoresaber-player";
import ScoreSaberScoreToken from "@ssr/common/types/token/scoresaber/score-saber-score-token";
import ScoreSaberLeaderboardToken from "@ssr/common/types/token/scoresaber/score-saber-leaderboard-token";
import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
import ScoreSaberScore from "@ssr/common/score/impl/scoresaber-score";
import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
type Props = {
/**
@ -14,12 +14,12 @@ type Props = {
/**
* The score to display.
*/
score: ScoreSaberScoreToken;
score: ScoreSaberScore;
/**
* The leaderboard to display.
*/
leaderboard: ScoreSaberLeaderboardToken;
leaderboard: ScoreSaberLeaderboard;
};
export default function LeaderboardScore({ player, score, leaderboard }: Props) {

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

@ -11,10 +11,11 @@ import { scoreAnimation } from "@/components/score/score-animation";
import { Button } from "@/components/ui/button";
import { clsx } from "clsx";
import { getDifficultyFromRawDifficulty } from "@/common/song-utils";
import ScoreSaberLeaderboardScoresPageToken from "@ssr/common/types/token/scoresaber/score-saber-leaderboard-scores-page-token";
import ScoreSaberPlayer from "@ssr/common/types/player/impl/scoresaber-player";
import ScoreSaberLeaderboardToken from "@ssr/common/types/token/scoresaber/score-saber-leaderboard-token";
import { scoresaberService } from "@ssr/common/service/impl/scoresaber";
import { fetchLeaderboardScores } from "@ssr/common/utils/score-utils";
import ScoreSaberScore from "@ssr/common/score/impl/scoresaber-score";
import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
import PlayerScoresResponse from "../../../../common/src/response/player-scores-response.ts";
type LeaderboardScoresProps = {
/**
@ -25,18 +26,18 @@ type LeaderboardScoresProps = {
/**
* The initial scores to show.
*/
initialScores?: ScoreSaberLeaderboardScoresPageToken;
initialScores?: PlayerScoresResponse<ScoreSaberScore, ScoreSaberLeaderboard>;
/**
* The leaderboard to display.
*/
leaderboard: ScoreSaberLeaderboard;
/**
* The player who set the score.
*/
player?: ScoreSaberPlayer;
/**
* The leaderboard to display.
*/
leaderboard: ScoreSaberLeaderboardToken;
/**
* Whether to show the difficulties.
*/
@ -73,17 +74,20 @@ export default function LeaderboardScores({
const [selectedLeaderboardId, setSelectedLeaderboardId] = useState(leaderboard.id);
const [previousPage, setPreviousPage] = useState(initialPage);
const [currentPage, setCurrentPage] = useState(initialPage);
const [currentScores, setCurrentScores] = useState<ScoreSaberLeaderboardScoresPageToken | undefined>(initialScores);
const [currentScores, setCurrentScores] = useState<
PlayerScoresResponse<ScoreSaberScore, ScoreSaberLeaderboard> | undefined
>(initialScores);
const topOfScoresRef = useRef<HTMLDivElement>(null);
const [shouldFetch, setShouldFetch] = useState(false);
const [shouldFetch, setShouldFetch] = useState(true);
const {
data: scores,
isError,
isLoading,
} = useQuery({
queryKey: ["leaderboardScores-" + leaderboard.id, selectedLeaderboardId, currentPage],
queryFn: () => scoresaberService.lookupLeaderboardScores(selectedLeaderboardId + "", currentPage),
const { data, isError, isLoading } = useQuery({
queryKey: ["leaderboardScores", selectedLeaderboardId, currentPage],
queryFn: () =>
fetchLeaderboardScores<ScoreSaberScore, ScoreSaberLeaderboard>(
"scoresaber",
selectedLeaderboardId + "",
currentPage
),
staleTime: 30 * 1000,
enabled: (shouldFetch && isLeaderboardPage) || !isLeaderboardPage,
});
@ -93,9 +97,9 @@ export default function LeaderboardScores({
*/
const handleScoreAnimation = useCallback(async () => {
await controls.start(previousPage >= currentPage ? "hiddenRight" : "hiddenLeft");
setCurrentScores(scores);
setCurrentScores(data);
await controls.start("visible");
}, [controls, currentPage, previousPage, scores]);
}, [controls, currentPage, previousPage, data]);
/**
* Set the selected leaderboard.
@ -118,10 +122,10 @@ export default function LeaderboardScores({
* Set the current scores.
*/
useEffect(() => {
if (scores) {
if (data) {
handleScoreAnimation();
}
}, [scores, handleScoreAnimation]);
}, [data, handleScoreAnimation]);
/**
* Handle scrolling to the top of the
@ -185,17 +189,19 @@ export default function LeaderboardScores({
variants={scoreAnimation}
className="grid min-w-full grid-cols-1 divide-y divide-border"
>
{currentScores.scores.map((playerScore, index) => (
<motion.div key={index} variants={scoreAnimation}>
<LeaderboardScore key={index} player={player} score={playerScore} leaderboard={leaderboard} />
</motion.div>
))}
{currentScores.scores.map((playerScore, index) => {
return (
<motion.div key={index} variants={scoreAnimation}>
<LeaderboardScore key={index} player={player} score={playerScore} leaderboard={leaderboard} />
</motion.div>
);
})}
</motion.div>
<Pagination
mobilePagination={width < 768}
page={currentPage}
totalPages={Math.ceil(currentScores.metadata.total / currentScores.metadata.itemsPerPage)}
totalPages={currentScores.metadata.totalPages}
loadingPage={isLoading ? currentPage : undefined}
generatePageUrl={page => {
return `/leaderboard/${selectedLeaderboardId}/${page}`;

8
projects/website/src/components/leaderboard/leaderboard-song-star-count.tsx
View File

@ -1,13 +1,12 @@
import { songDifficultyToColor } from "@/common/song-utils";
import { StarIcon } from "@heroicons/react/24/solid";
import { getDifficultyFromScoreSaberDifficulty } from "@ssr/common/utils/scoresaber-utils";
import ScoreSaberLeaderboardToken from "@ssr/common/types/token/scoresaber/score-saber-leaderboard-token";
import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
type LeaderboardSongStarCountProps = {
/**
* The leaderboard for the song
*/
leaderboard: ScoreSaberLeaderboardToken;
leaderboard: ScoreSaberLeaderboard;
};
export function LeaderboardSongStarCount({ leaderboard }: LeaderboardSongStarCountProps) {
@ -15,12 +14,11 @@ export function LeaderboardSongStarCount({ leaderboard }: LeaderboardSongStarCou
return null;
}
const diff = getDifficultyFromScoreSaberDifficulty(leaderboard.difficulty.difficulty);
return (
<div
className="w-fit h-[20px] rounded-sm flex justify-center items-center text-xs cursor-default"
style={{
backgroundColor: songDifficultyToColor(diff) + "f0", // Transparency value (in hex 0-255)
backgroundColor: songDifficultyToColor(leaderboard.difficulty.difficultyRaw) + "f0", // Transparency value (in hex 0-255)
}}
>
<div className="flex gap-1 items-center justify-center p-1">

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

@ -3,7 +3,7 @@
import React from "react";
import GenericChart, { DatasetConfig } from "@/components/chart/generic-chart";
import { getValueFromHistory } from "@/common/player-utils";
import ScoreSaberPlayer from "@ssr/common/types/player/impl/scoresaber-player";
import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
import { parseDate } from "@ssr/common/utils/time-utils";
type Props = {

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

@ -3,7 +3,7 @@
import React from "react";
import { DatasetConfig } from "@/components/chart/generic-chart";
import GenericPlayerChart from "@/components/player/chart/generic-player-chart";
import ScoreSaberPlayer from "@ssr/common/types/player/impl/scoresaber-player";
import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
import { isWholeNumber } from "@ssr/common/utils/number-utils";
type Props = {

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

@ -6,7 +6,7 @@ import Tooltip from "@/components/tooltip";
import PlayerAccuracyChart from "@/components/player/chart/player-accuracy-chart";
import { GlobeAmericasIcon } from "@heroicons/react/24/solid";
import { TrendingUpIcon } from "lucide-react";
import ScoreSaberPlayer from "@ssr/common/types/player/impl/scoresaber-player";
import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
type PlayerChartsProps = {
/**

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

@ -4,7 +4,7 @@ import { formatNumberWithCommas, isWholeNumber } from "@ssr/common/utils/number-
import React from "react";
import { DatasetConfig } from "@/components/chart/generic-chart";
import GenericPlayerChart from "@/components/player/chart/generic-player-chart";
import ScoreSaberPlayer from "@ssr/common/types/player/impl/scoresaber-player";
import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
type Props = {
player: ScoreSaberPlayer;

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

@ -1,6 +1,6 @@
import Image from "next/image";
import Tooltip from "@/components/tooltip";
import ScoreSaberPlayer from "@ssr/common/types/player/impl/scoresaber-player";
import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
type Props = {
player: ScoreSaberPlayer;

18
projects/website/src/components/player/player-data.tsx
View File

@ -10,30 +10,26 @@ import { useIsMobile } from "@/hooks/use-is-mobile";
import { useIsVisible } from "@/hooks/use-is-visible";
import { useRef } from "react";
import PlayerCharts from "@/components/player/chart/player-charts";
import ScoreSaberPlayer, { getScoreSaberPlayerFromToken } from "@ssr/common/types/player/impl/scoresaber-player";
import ScoreSaberPlayerScoresPageToken from "@ssr/common/types/token/scoresaber/score-saber-player-scores-page-token";
import { ScoreSort } from "@ssr/common/types/score/score-sort";
import { scoresaberService } from "@ssr/common/service/impl/scoresaber";
import useDatabase from "@/hooks/use-database";
import { useLiveQuery } from "dexie-react-hooks";
import ScoreSaberPlayer, { getScoreSaberPlayerFromToken } from "@ssr/common/player/impl/scoresaber-player";
import { ScoreSort } from "@ssr/common/score/score-sort";
import ScoreSaberScore from "@ssr/common/score/impl/scoresaber-score";
import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
import PlayerScoresResponse from "../../../../common/src/response/player-scores-response.ts";
const REFRESH_INTERVAL = 1000 * 60 * 5;
type Props = {
initialPlayerData: ScoreSaberPlayer;
initialScoreData?: ScoreSaberPlayerScoresPageToken;
initialScoreData?: PlayerScoresResponse<ScoreSaberScore, ScoreSaberLeaderboard>;
initialSearch?: string;
sort: ScoreSort;
page: number;
};
export default function PlayerData({
initialPlayerData: initialPlayerData,
initialScoreData,
initialSearch,
sort,
page,
}: Props) {
export default function PlayerData({ initialPlayerData, initialScoreData, initialSearch, sort, page }: Props) {
const isMobile = useIsMobile();
const miniRankingsRef = useRef<HTMLDivElement>(null);
const isMiniRankingsVisible = useIsVisible(miniRankingsRef);

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

@ -8,7 +8,7 @@ import PlayerStats from "./player-stats";
import Tooltip from "@/components/tooltip";
import { ReactElement } from "react";
import PlayerTrackedStatus from "@/components/player/player-tracked-status";
import ScoreSaberPlayer from "@ssr/common/types/player/impl/scoresaber-player";
import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
import Link from "next/link";
import { capitalizeFirstLetter } from "@/common/string-utils";
import AddFriend from "@/components/friend/add-friend";

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

@ -12,14 +12,16 @@ import { Input } from "@/components/ui/input";
import { clsx } from "clsx";
import { useDebounce } from "@uidotdev/usehooks";
import { scoreAnimation } from "@/components/score/score-animation";
import ScoreSaberPlayer from "@ssr/common/types/player/impl/scoresaber-player";
import ScoreSaberPlayerScoresPageToken from "@ssr/common/types/token/scoresaber/score-saber-player-scores-page-token";
import { ScoreSort } from "@ssr/common/types/score/score-sort";
import { scoresaberService } from "@ssr/common/service/impl/scoresaber";
import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
import { ScoreSort } from "@ssr/common/score/score-sort";
import { setCookieValue } from "@ssr/common/utils/cookie-utils";
import ScoreSaberScore from "@ssr/common/score/impl/scoresaber-score";
import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
import { fetchPlayerScores } from "@ssr/common/utils/score-utils";
import PlayerScoresResponse from "@ssr/common/response/player-scores-response";
type Props = {
initialScoreData?: ScoreSaberPlayerScoresPageToken;
initialScoreData?: PlayerScoresResponse<ScoreSaberScore, ScoreSaberLeaderboard>;
initialSearch?: string;
player: ScoreSaberPlayer;
sort: ScoreSort;
@ -50,27 +52,25 @@ export default function PlayerScores({ initialScoreData, initialSearch, player,
const [pageState, setPageState] = useState<PageState>({ page, sort });
const [previousPage, setPreviousPage] = useState(page);
const [currentScores, setCurrentScores] = useState<ScoreSaberPlayerScoresPageToken | undefined>(initialScoreData);
const [scores, setScores] = useState<PlayerScoresResponse<ScoreSaberScore, ScoreSaberLeaderboard> | undefined>(
initialScoreData
);
const [searchTerm, setSearchTerm] = useState(initialSearch || "");
const debouncedSearchTerm = useDebounce(searchTerm, 250);
const [shouldFetch, setShouldFetch] = useState(false);
const topOfScoresRef = useRef<HTMLDivElement>(null);
const isSearchActive = debouncedSearchTerm.length >= 3;
const {
data: scores,
isError,
isLoading,
} = useQuery({
const { data, isError, isLoading } = useQuery({
queryKey: ["playerScores", player.id, pageState, debouncedSearchTerm],
queryFn: () => {
return scoresaberService.lookupPlayerScores({
playerId: player.id,
page: pageState.page,
sort: pageState.sort,
...(isSearchActive && { search: debouncedSearchTerm }),
});
},
queryFn: () =>
fetchPlayerScores<ScoreSaberScore, ScoreSaberLeaderboard>(
"scoresaber",
player.id,
pageState.page,
pageState.sort,
debouncedSearchTerm
),
staleTime: 30 * 1000, // 30 seconds
enabled: shouldFetch && (debouncedSearchTerm.length >= 3 || debouncedSearchTerm.length === 0),
});
@ -80,9 +80,9 @@ export default function PlayerScores({ initialScoreData, initialSearch, player,
*/
const handleScoreAnimation = useCallback(async () => {
await controls.start(previousPage >= pageState.page ? "hiddenRight" : "hiddenLeft");
setCurrentScores(scores);
setScores(data);
await controls.start("visible");
}, [scores, controls, previousPage, pageState.page]);
}, [controls, previousPage, pageState.page, data]);
/**
* Change the score sort.
@ -122,8 +122,10 @@ export default function PlayerScores({ initialScoreData, initialSearch, player,
* Handle score animation.
*/
useEffect(() => {
if (scores) handleScoreAnimation();
}, [scores, handleScoreAnimation]);
if (data) {
handleScoreAnimation();
}
}, [data, handleScoreAnimation]);
/**
* Gets the URL to the page.
@ -203,10 +205,10 @@ export default function PlayerScores({ initialScoreData, initialSearch, player,
</div>
</div>
{currentScores && (
{scores !== undefined && (
<>
<div className="text-center">
{isError || (currentScores.playerScores.length === 0 && <p>No scores found. Invalid Page or Search?</p>)}
{isError || (scores.scores.length === 0 && <p>No scores found. Invalid Page or Search?</p>)}
</div>
<motion.div
@ -215,9 +217,14 @@ export default function PlayerScores({ initialScoreData, initialSearch, player,
variants={scoreAnimation}
className="grid min-w-full grid-cols-1 divide-y divide-border"
>
{currentScores.playerScores.map((playerScore, index) => (
<motion.div key={index} variants={scoreAnimation}>
<Score player={player} playerScore={playerScore} />
{scores.scores.map((score, index) => (
<motion.div key={score.score.id} variants={scoreAnimation}>
<Score
player={player}
score={score.score}
leaderboard={score.leaderboard}
beatSaverMap={score.beatSaver}
/>
</motion.div>
))}
</motion.div>
@ -225,7 +232,7 @@ export default function PlayerScores({ initialScoreData, initialSearch, player,
<Pagination
mobilePagination={width < 768}
page={pageState.page}
totalPages={Math.ceil(currentScores.metadata.total / currentScores.metadata.itemsPerPage)}
totalPages={scores.metadata.totalPages}
loadingPage={isLoading ? pageState.page : undefined}
generatePageUrl={page => {
return getUrl(page);

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

@ -1,6 +1,6 @@
import { formatNumberWithCommas } from "@ssr/common/utils/number-utils";
import StatValue from "@/components/stat-value";
import ScoreSaberPlayer from "@ssr/common/types/player/impl/scoresaber-player";
import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
import { formatDate } from "@ssr/common/utils/time-utils";
import { ReactNode } from "react";
import Tooltip from "@/components/tooltip";

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

@ -6,7 +6,7 @@ import Tooltip from "@/components/tooltip";
import { InformationCircleIcon } from "@heroicons/react/16/solid";
import { formatNumberWithCommas } from "@ssr/common/utils/number-utils";
import { PlayerTrackedSince } from "@ssr/common/types/player/player-tracked-since";
import ScoreSaberPlayer from "@ssr/common/types/player/impl/scoresaber-player";
import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
import { Config } from "@ssr/common/config";
type Props = {

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

@ -7,7 +7,7 @@ import Card from "../card";
import CountryFlag from "../country-flag";
import { Avatar, AvatarImage } from "../ui/avatar";
import { PlayerRankingSkeleton } from "@/components/ranking/player-ranking-skeleton";
import ScoreSaberPlayer from "@ssr/common/types/player/impl/scoresaber-player";
import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
import { ScoreSaberPlayersPageToken } from "@ssr/common/types/token/scoresaber/score-saber-players-page-token";
import { scoresaberService } from "@ssr/common/service/impl/scoresaber";
import ScoreSaberPlayerToken from "@ssr/common/types/token/scoresaber/score-saber-player-token";

15
projects/website/src/components/score/score-badge.tsx
View File

@ -1,17 +1,14 @@
import StatValue from "@/components/stat-value";
import ScoreSaberScoreToken from "@ssr/common/types/token/scoresaber/score-saber-score-token";
import ScoreSaberLeaderboardToken from "@ssr/common/types/token/scoresaber/score-saber-leaderboard-token";
import ScoreSaberScore from "@ssr/common/score/impl/scoresaber-score";
import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
/**
* A badge to display in the score stats.
*/
export type ScoreBadge = {
name: string;
color?: (score: ScoreSaberScoreToken, leaderboard: ScoreSaberLeaderboardToken) => string | undefined;
create: (
score: ScoreSaberScoreToken,
leaderboard: ScoreSaberLeaderboardToken
) => string | React.ReactNode | undefined;
color?: (score: ScoreSaberScore, leaderboard: ScoreSaberLeaderboard) => string | undefined;
create: (score: ScoreSaberScore, leaderboard: ScoreSaberLeaderboard) => string | React.ReactNode | undefined;
};
/**
@ -19,8 +16,8 @@ export type ScoreBadge = {
*/
type ScoreBadgeProps = {
badges: ScoreBadge[];
score: ScoreSaberScoreToken;
leaderboard: ScoreSaberLeaderboardToken;
score: ScoreSaberScore;
leaderboard: ScoreSaberLeaderboard;
};
export function ScoreBadges({ badges, score, leaderboard }: ScoreBadgeProps) {

16
projects/website/src/components/score/score-buttons.tsx
View File

@ -1,6 +1,5 @@
"use client";
import BeatSaverMap from "@/common/database/types/beatsaver-map";
import { songNameToYouTubeLink } from "@/common/youtube-utils";
import BeatSaverLogo from "@/components/logos/beatsaver-logo";
import YouTubeLogo from "@/components/logos/youtube-logo";
@ -8,19 +7,20 @@ import { useToast } from "@/hooks/use-toast";
import { useState } from "react";
import ScoreButton from "./score-button";
import { copyToClipboard } from "@/common/browser-utils";
import ScoreSaberLeaderboardToken from "@ssr/common/types/token/scoresaber/score-saber-leaderboard-token";
import { ArrowDownIcon } from "@heroicons/react/24/solid";
import clsx from "clsx";
import ScoreEditorButton from "@/components/score/score-editor-button";
import ScoreSaberScoreToken from "@ssr/common/types/token/scoresaber/score-saber-score-token";
import ScoreSaberScore from "@ssr/common/score/impl/scoresaber-score";
import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
import { BeatSaverMap } from "@ssr/common/model/beatsaver/beatsaver-map";
type Props = {
score?: ScoreSaberScoreToken;
leaderboard: ScoreSaberLeaderboardToken;
score?: ScoreSaberScore;
leaderboard: ScoreSaberLeaderboard;
beatSaverMap?: BeatSaverMap;
alwaysSingleLine?: boolean;
setIsLeaderboardExpanded?: (isExpanded: boolean) => void;
updateScore?: (score: ScoreSaberScoreToken) => void;
updateScore?: (score: ScoreSaberScore) => void;
};
export default function ScoreButtons({
@ -35,7 +35,7 @@ export default function ScoreButtons({
const { toast } = useToast();
return (
<div className="flex justify-end gap-2 h-[64px]">
<div className={`flex justify-end gap-2 h-[${alwaysSingleLine ? "32" : "64"}px]`}>
<div
className={`flex ${alwaysSingleLine ? "flex-nowrap" : "flex-wrap"} items-center lg:items-start justify-center lg:justify-end gap-1`}
>
@ -90,7 +90,7 @@ export default function ScoreButtons({
{/* View Leaderboard button */}
{leaderboardExpanded != undefined && setIsLeaderboardExpanded != undefined && (
<div className="pr-2 flex items-center justify-center cursor-default">
<div className="flex items-center justify-center cursor-default">
<ArrowDownIcon
className={clsx(
"w-6 h-6 transition-all transform-gpu cursor-pointer",

18
projects/website/src/components/score/score-editor-button.tsx
View File

@ -1,44 +1,44 @@
import { Button } from "@/components/ui/button";
import { CogIcon } from "@heroicons/react/24/solid";
import clsx from "clsx";
import ScoreSaberScoreToken from "@ssr/common/types/token/scoresaber/score-saber-score-token";
import { useState } from "react";
import { Slider } from "@/components/ui/slider";
import ScoreSaberLeaderboardToken from "@ssr/common/types/token/scoresaber/score-saber-leaderboard-token";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { ResetIcon } from "@radix-ui/react-icons";
import Tooltip from "@/components/tooltip";
import ScoreSaberScore from "@ssr/common/score/impl/scoresaber-score";
import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
type ScoreEditorButtonProps = {
score: ScoreSaberScoreToken;
leaderboard: ScoreSaberLeaderboardToken;
updateScore: (score: ScoreSaberScoreToken) => void;
score: ScoreSaberScore;
leaderboard: ScoreSaberLeaderboard;
updateScore: (score: ScoreSaberScore) => void;
};
export default function ScoreEditorButton({ score, leaderboard, updateScore }: ScoreEditorButtonProps) {
const [isScoreEditMode, setIsScoreEditMode] = useState(false);
const maxScore = leaderboard.maxScore || 1; // Use 1 to prevent division by zero
const accuracy = (score.baseScore / maxScore) * 100;
const accuracy = (score.score / maxScore) * 100;
const handleSliderChange = (value: number[]) => {
const newAccuracy = Math.max(0, Math.min(value[0], 100)); // Ensure the accuracy stays within 0-100
const newBaseScore = (newAccuracy / 100) * maxScore;
updateScore({
...score,
baseScore: newBaseScore,
score: newBaseScore,
});
};
const handleSliderReset = () => {
updateScore({
...score,
baseScore: (accuracy / 100) * maxScore,
score: (accuracy / 100) * maxScore,
});
};
return (
<div className="pr-2 flex items-center justify-center cursor-default relative">
<div className="flex items-center justify-center cursor-default relative">
<Popover
onOpenChange={open => {
setIsScoreEditMode(open);

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

@ -49,7 +49,7 @@ export default function ScoreFeed() {
</Link>
</p>
<Score
playerScore={score}
score={score}
settings={{
noScoreButtons: true,
}}

19
projects/website/src/components/score/score-info.tsx
View File

@ -1,31 +1,30 @@
import BeatSaverMap from "@/common/database/types/beatsaver-map";
import { getDifficultyFromScoreSaberDifficulty } from "@ssr/common/utils/scoresaber-utils";
import FallbackLink from "@/components/fallback-link";
import Tooltip from "@/components/tooltip";
import { StarIcon } from "@heroicons/react/24/solid";
import Image from "next/image";
import { songDifficultyToColor } from "@/common/song-utils";
import Link from "next/link";
import ScoreSaberLeaderboardToken from "@ssr/common/types/token/scoresaber/score-saber-leaderboard-token";
import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
import { BeatSaverMap } from "@ssr/common/model/beatsaver-map";
type Props = {
leaderboard: ScoreSaberLeaderboardToken;
leaderboard: ScoreSaberLeaderboard;
beatSaverMap?: BeatSaverMap;
};
export default function ScoreSongInfo({ leaderboard, beatSaverMap }: Props) {
const diff = getDifficultyFromScoreSaberDifficulty(leaderboard.difficulty.difficulty);
const mappersProfile =
beatSaverMap != undefined ? `https://beatsaver.com/profile/${beatSaverMap?.fullData.uploader.id}` : undefined;
beatSaverMap != undefined ? `https://beatsaver.com/profile/${beatSaverMap?.author.authorId}` : undefined;
const starCount = leaderboard.stars;
const difficulty = leaderboard.difficulty;
return (
<div className="flex gap-3 items-center">
<div className="relative flex justify-center h-[64px]">
<Tooltip
display={
<>
<p>Difficulty: {diff}</p>
<p>Difficulty: {difficulty.difficulty}</p>
{starCount > 0 && <p>Stars: {starCount.toFixed(2)}</p>}
</>
}
@ -33,7 +32,7 @@ export default function ScoreSongInfo({ leaderboard, beatSaverMap }: Props) {
<div
className="absolute w-full h-[18px] bottom-0 right-0 rounded-sm flex justify-center items-center text-[0.70rem] cursor-default"
style={{
backgroundColor: songDifficultyToColor(diff) + "f0", // Transparency value (in hex 0-255)
backgroundColor: songDifficultyToColor(difficulty.difficultyRaw) + "f0", // Transparency value (in hex 0-255)
}}
>
{starCount > 0 ? (
@ -42,13 +41,13 @@ export default function ScoreSongInfo({ leaderboard, beatSaverMap }: Props) {
<StarIcon className="w-[14px] h-[14px]" />
</div>
) : (
<p>{diff}</p>
<p>{difficulty.difficulty}</p>
)}
</div>
</Tooltip>
<Image
unoptimized
src={`https://img.fascinated.cc/upload/w_64,h_64/${leaderboard.coverImage}`}
src={`https://img.fascinated.cc/upload/w_64,h_64/${leaderboard.songArt}`}
width={64}
height={64}
alt="Song Artwork"

12
projects/website/src/components/score/score-rank-info.tsx
View File

@ -2,15 +2,15 @@ import { formatNumberWithCommas } from "@ssr/common/utils/number-utils";
import { format } from "@formkit/tempo";
import { GlobeAmericasIcon } from "@heroicons/react/24/solid";
import Tooltip from "../tooltip";
import ScoreSaberScoreToken from "@ssr/common/types/token/scoresaber/score-saber-score-token";
import { timeAgo } from "@ssr/common/utils/time-utils";
import Link from "next/link";
import { getPageFromRank } from "@ssr/common/utils/utils";
import ScoreSaberLeaderboardToken from "@ssr/common/types/token/scoresaber/score-saber-leaderboard-token";
import ScoreSaberScore from "@ssr/common/score/impl/scoresaber-score";
import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
type Props = {
score: ScoreSaberScoreToken;
leaderboard: ScoreSaberLeaderboardToken;
score: ScoreSaberScore;
leaderboard: ScoreSaberLeaderboard;
};
export default function ScoreRankInfo({ score, leaderboard }: Props) {
@ -29,13 +29,13 @@ export default function ScoreRankInfo({ score, leaderboard }: Props) {
display={
<p>
{format({
date: new Date(score.timeSet),
date: new Date(score.timestamp),
format: "DD MMMM YYYY HH:mm a",
})}
</p>
}
>
<p className="text-sm cursor-default select-none">{timeAgo(new Date(score.timeSet))}</p>
<p className="text-sm cursor-default select-none">{timeAgo(new Date(score.timestamp))}</p>
</Tooltip>
</div>
);

35
projects/website/src/components/score/score-stats.tsx
View File

@ -4,8 +4,8 @@ import { XMarkIcon } from "@heroicons/react/24/solid";
import clsx from "clsx";
import Tooltip from "@/components/tooltip";
import { ScoreBadge, ScoreBadges } from "@/components/score/score-badge";
import ScoreSaberScoreToken from "@ssr/common/types/token/scoresaber/score-saber-score-token";
import ScoreSaberLeaderboardToken from "@ssr/common/types/token/scoresaber/score-saber-leaderboard-token";
import ScoreSaberScore from "@ssr/common/score/impl/scoresaber-score";
import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
const badges: ScoreBadge[] = [
{
@ -13,12 +13,13 @@ const badges: ScoreBadge[] = [
color: () => {
return "bg-pp";
},
create: (score: ScoreSaberScoreToken) => {
create: (score: ScoreSaberScore) => {
const pp = score.pp;
if (pp === 0) {
const weight = score.weight;
if (pp === 0 || pp === undefined || weight === undefined) {
return undefined;
}
const weightedPp = pp * score.weight;
const weightedPp = pp * weight;
return (
<>
@ -26,7 +27,7 @@ const badges: ScoreBadge[] = [
display={
<div>
<p>
Weighted: {formatPp(weightedPp)}pp ({(100 * score.weight).toFixed(2)}%)
Weighted: {formatPp(weightedPp)}pp ({(100 * weight).toFixed(2)}%)
</p>
</div>
}
@ -39,12 +40,12 @@ const badges: ScoreBadge[] = [
},
{
name: "Accuracy",
color: (score: ScoreSaberScoreToken, leaderboard: ScoreSaberLeaderboardToken) => {
const acc = (score.baseScore / leaderboard.maxScore) * 100;
color: (score: ScoreSaberScore, leaderboard: ScoreSaberLeaderboard) => {
const acc = (score.score / leaderboard.maxScore) * 100;
return getScoreBadgeFromAccuracy(acc).color;
},
create: (score: ScoreSaberScoreToken, leaderboard: ScoreSaberLeaderboardToken) => {
const acc = (score.baseScore / leaderboard.maxScore) * 100;
create: (score: ScoreSaberScore, leaderboard: ScoreSaberLeaderboard) => {
const acc = (score.score / leaderboard.maxScore) * 100;
const scoreBadge = getScoreBadgeFromAccuracy(acc);
let accDetails = `Accuracy ${scoreBadge.name != "-" ? scoreBadge.name : ""}`;
if (scoreBadge.max == null) {
@ -72,8 +73,8 @@ const badges: ScoreBadge[] = [
},
{
name: "Score",
create: (score: ScoreSaberScoreToken) => {
return `${formatNumberWithCommas(Number(score.baseScore.toFixed(0)))}`;
create: (score: ScoreSaberScore) => {
return `${formatNumberWithCommas(Number(score.score.toFixed(0)))}`;
},
},
{
@ -86,14 +87,14 @@ const badges: ScoreBadge[] = [
},
{
name: "Full Combo",
create: (score: ScoreSaberScoreToken) => {
create: (score: ScoreSaberScore) => {
return (
<Tooltip
display={
<div className="flex flex-col justify-center items-center">
{!score.fullCombo ? (
<>
<p>Missed Notes: {formatNumberWithCommas(score.missedNotes)}</p>
<p>Missed Notes: {formatNumberWithCommas(score.misses)}</p>
<p>Bad Cuts: {formatNumberWithCommas(score.badCuts)}</p>
</>
) : (
@ -107,7 +108,7 @@ const badges: ScoreBadge[] = [
{score.fullCombo ? (
<span className="text-green-400">FC</span>
) : (
formatNumberWithCommas(score.missedNotes + score.badCuts)
formatNumberWithCommas(score.misses + score.badCuts)
)}
</p>
<XMarkIcon className={clsx("w-5 h-5", score.fullCombo ? "hidden" : "text-red-400")} />
@ -119,8 +120,8 @@ const badges: ScoreBadge[] = [
];
type Props = {
score: ScoreSaberScoreToken;
leaderboard: ScoreSaberLeaderboardToken;
score: ScoreSaberScore;
leaderboard: ScoreSaberLeaderboard;
};
export default function ScoreStats({ score, leaderboard }: Props) {

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

@ -1,18 +1,18 @@
"use client";
import BeatSaverMap from "@/common/database/types/beatsaver-map";
import LeaderboardScores from "@/components/leaderboard/leaderboard-scores";
import { useCallback, useEffect, useState } from "react";
import { useEffect, useState } from "react";
import ScoreButtons from "./score-buttons";
import ScoreSongInfo from "./score-info";
import ScoreRankInfo from "./score-rank-info";
import ScoreStats from "./score-stats";
import { motion } from "framer-motion";
import ScoreSaberPlayer from "@ssr/common/types/player/impl/scoresaber-player";
import ScoreSaberPlayerScoreToken from "@ssr/common/types/token/scoresaber/score-saber-player-score-token";
import { lookupBeatSaverMap } from "@/common/beatsaver-utils";
import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
import { getPageFromRank } from "@ssr/common/utils/utils";
import { scoresaberService } from "@ssr/common/service/impl/scoresaber";
import ScoreSaberScore from "@ssr/common/score/impl/scoresaber-score";
import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
import { BeatSaverMap } from "@ssr/common/model/beatsaver/beatsaver-map";
type Props = {
/**
@ -20,10 +20,20 @@ type Props = {
*/
player?: ScoreSaberPlayer;
/**
* The leaderboard.
*/
leaderboard: ScoreSaberLeaderboard;
/**
* The beat saver map for this song.
*/
beatSaverMap?: BeatSaverMap;
/**
* The score to display.
*/
playerScore: ScoreSaberPlayerScoreToken;
score: ScoreSaberScore;
/**
* Score settings
@ -33,36 +43,18 @@ type Props = {
};
};
export default function Score({ player, playerScore, settings }: Props) {
const { score, leaderboard } = playerScore;
const [baseScore, setBaseScore] = useState<number>(score.baseScore);
const [beatSaverMap, setBeatSaverMap] = useState<BeatSaverMap | undefined>();
export default function Score({ player, leaderboard, beatSaverMap, score, settings }: Props) {
const [baseScore, setBaseScore] = useState<number>(score.score);
const [isLeaderboardExpanded, setIsLeaderboardExpanded] = useState(false);
const fetchBeatSaverData = useCallback(async () => {
// No need to fetch if no buttons
if (settings?.noScoreButtons == true) {
return;
}
const beatSaverMapData = await lookupBeatSaverMap(leaderboard.songHash);
setBeatSaverMap(beatSaverMapData);
}, [leaderboard.songHash, settings?.noScoreButtons]);
/**
* Set the base score
*/
useEffect(() => {
if (playerScore?.score?.baseScore) {
setBaseScore(playerScore.score.baseScore);
if (score?.score) {
setBaseScore(score.score);
}
}, [playerScore]);
/**
* Fetch the beatSaver data on page load
*/
useEffect(() => {
fetchBeatSaverData();
}, [fetchBeatSaverData]);
}, [score]);
/**
* Close the leaderboard when the score changes
@ -72,7 +64,7 @@ export default function Score({ player, playerScore, settings }: Props) {
}, [score]);
const accuracy = (baseScore / leaderboard.maxScore) * 100;
const pp = baseScore === score.baseScore ? score.pp : scoresaberService.getPp(leaderboard.stars, accuracy);
const pp = baseScore === score.score ? score.pp : scoresaberService.getPp(leaderboard.stars, accuracy);
// Dynamic grid column classes
const gridColsClass = settings?.noScoreButtons
@ -92,14 +84,14 @@ export default function Score({ player, playerScore, settings }: Props) {
score={score}
setIsLeaderboardExpanded={setIsLeaderboardExpanded}
updateScore={score => {
setBaseScore(score.baseScore);
setBaseScore(score.score);
}}
/>
)}
<ScoreStats
score={{
...score,
baseScore,
score: baseScore,
pp: pp ? pp : score.pp,
}}
leaderboard={leaderboard}