cleanup player page and update error page
All checks were successful
deploy / deploy (push) Successful in 58s
All checks were successful
deploy / deploy (push) Successful in 58s
This commit is contained in:
parent
574f265d01
commit
59fbad3b7c
@ -1,35 +1,17 @@
|
||||
"use client";
|
||||
|
||||
import Avatar from "@/components/Avatar";
|
||||
import Card from "@/components/Card";
|
||||
import Container from "@/components/Container";
|
||||
import Label from "@/components/Label";
|
||||
import Pagination from "@/components/Pagination";
|
||||
import PlayerChart from "@/components/PlayerChart";
|
||||
import Score from "@/components/Score";
|
||||
import Error from "@/components/Error";
|
||||
import PlayerInfo from "@/components/PlayerInfo";
|
||||
import Scores from "@/components/Scores";
|
||||
import { Spinner } from "@/components/Spinner";
|
||||
import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
|
||||
import { ScoresaberPlayerScore } from "@/schemas/scoresaber/playerScore";
|
||||
import { usePlayerScoresStore } from "@/store/playerScoresStore";
|
||||
import { useSettingsStore } from "@/store/settingsStore";
|
||||
import { SortType, SortTypes } from "@/types/SortTypes";
|
||||
import { formatNumber } from "@/utils/number";
|
||||
import { fetchScores, getPlayerInfo } from "@/utils/scoresaber/api";
|
||||
import useStore from "@/utils/useStore";
|
||||
import { GlobeAsiaAustraliaIcon, HomeIcon } from "@heroicons/react/20/solid";
|
||||
import Image from "next/image";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import ReactCountryFlag from "react-country-flag";
|
||||
import { toast } from "react-toastify";
|
||||
|
||||
type PageInfo = {
|
||||
loading: boolean;
|
||||
page: number;
|
||||
totalPages: number;
|
||||
sortType: SortType;
|
||||
scores: ScoresaberPlayerScore[];
|
||||
};
|
||||
import { getPlayerInfo } from "@/utils/scoresaber/api";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
type PlayerInfo = {
|
||||
loading: boolean;
|
||||
@ -41,11 +23,7 @@ const DEFAULT_SORT_TYPE = SortTypes.top;
|
||||
export default function Player({ params }: { params: { id: string } }) {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
const settingsStore = useStore(useSettingsStore, (store) => store);
|
||||
const playerScoreStore = useStore(usePlayerScoresStore, (store) => store);
|
||||
|
||||
const searchParams = useSearchParams();
|
||||
const router = useRouter();
|
||||
|
||||
let page;
|
||||
const pageString = searchParams.get("page");
|
||||
@ -72,99 +50,12 @@ export default function Player({ params }: { params: { id: string } }) {
|
||||
player: undefined,
|
||||
});
|
||||
|
||||
const [scores, setScores] = useState<PageInfo>({
|
||||
loading: true,
|
||||
page: page,
|
||||
totalPages: 1,
|
||||
sortType: sortType,
|
||||
scores: [],
|
||||
});
|
||||
|
||||
const updateScoresPage = useCallback(
|
||||
(sortType: SortType, page: any) => {
|
||||
console.log("Switching page to", page);
|
||||
fetchScores(params.id, page, sortType.value, 10).then(
|
||||
(scoresResponse) => {
|
||||
if (!scoresResponse) {
|
||||
setError(true);
|
||||
setErrorMessage("No Scores");
|
||||
setScores({ ...scores, loading: false });
|
||||
return;
|
||||
}
|
||||
setScores({
|
||||
...scores,
|
||||
scores: scoresResponse.scores,
|
||||
totalPages: scoresResponse.pageInfo.totalPages,
|
||||
loading: false,
|
||||
page: page,
|
||||
sortType: sortType,
|
||||
});
|
||||
useSettingsStore.setState({
|
||||
lastUsedSortType: sortType,
|
||||
});
|
||||
|
||||
if (page > 1) {
|
||||
router.push(
|
||||
`/player/${params.id}?page=${page}&sort=${sortType.value}`,
|
||||
{
|
||||
scroll: false,
|
||||
},
|
||||
);
|
||||
} else {
|
||||
router.push(`/player/${params.id}?sort=${sortType.value}`, {
|
||||
scroll: false,
|
||||
});
|
||||
}
|
||||
},
|
||||
);
|
||||
},
|
||||
[params.id, router, scores],
|
||||
);
|
||||
|
||||
const toastId: any = useRef(null);
|
||||
|
||||
async function claimProfile() {
|
||||
settingsStore?.setUserId(params.id);
|
||||
settingsStore?.refreshProfile();
|
||||
|
||||
const reponse = await playerScoreStore?.addPlayer(
|
||||
params.id,
|
||||
(page, totalPages) => {
|
||||
const autoClose = page == totalPages ? 5000 : false;
|
||||
|
||||
if (page == 1) {
|
||||
toastId.current = toast.info(
|
||||
`Fetching scores ${page}/${totalPages}`,
|
||||
{
|
||||
autoClose: autoClose,
|
||||
progress: page / totalPages,
|
||||
},
|
||||
);
|
||||
} else {
|
||||
toast.update(toastId.current, {
|
||||
progress: page / totalPages,
|
||||
render: `Fetching scores ${page}/${totalPages}`,
|
||||
autoClose: autoClose,
|
||||
});
|
||||
}
|
||||
|
||||
console.log(`Fetching scores for ${params.id} (${page}/${totalPages})`);
|
||||
},
|
||||
);
|
||||
if (reponse?.error) {
|
||||
toast.error("Failed to claim profile");
|
||||
console.log(reponse.message);
|
||||
return;
|
||||
}
|
||||
|
||||
toast.success("Successfully claimed profile");
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
|
||||
if (!params.id) {
|
||||
setError(true);
|
||||
setErrorMessage("No player id");
|
||||
setPlayer({ ...player, loading: false });
|
||||
return;
|
||||
}
|
||||
@ -184,9 +75,8 @@ export default function Player({ params }: { params: { id: string } }) {
|
||||
return;
|
||||
}
|
||||
setPlayer({ ...player, player: playerResponse, loading: false });
|
||||
updateScoresPage(scores.sortType, 1);
|
||||
});
|
||||
}, [error, mounted, params.id, player, scores, updateScoresPage]);
|
||||
}, [error, mounted, params.id, player]);
|
||||
|
||||
if (player.loading || error || !player.player) {
|
||||
return (
|
||||
@ -195,20 +85,10 @@ export default function Player({ params }: { params: { id: string } }) {
|
||||
<Card className="mt-2">
|
||||
<div className="p-3 text-center">
|
||||
<div role="status">
|
||||
{player.loading && <Spinner />}
|
||||
|
||||
{error && (
|
||||
<div className="flex flex-col items-center justify-center gap-2">
|
||||
<p className="text-xl text-red-500">{errorMessage}</p>
|
||||
|
||||
<Image
|
||||
alt="Sad cat"
|
||||
src={"https://cdn.fascinated.cc/BxI9iJI9.jpg"}
|
||||
width={200}
|
||||
height={200}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col items-center justify-center gap-2">
|
||||
{error && <Error errorMessage={errorMessage} />}
|
||||
{!error && <Spinner />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
@ -222,147 +102,8 @@ export default function Player({ params }: { params: { id: string } }) {
|
||||
return (
|
||||
<main>
|
||||
<Container>
|
||||
{/* Player Info */}
|
||||
<Card className="mt-2">
|
||||
<div className="flex flex-col items-center gap-3 md:flex-row md:items-start">
|
||||
<div className="min-w-fit">
|
||||
{/* Avatar */}
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<Avatar url={playerData.profilePicture} label="Avatar" />
|
||||
</div>
|
||||
|
||||
{/* Settings Buttons */}
|
||||
<div className="absolute right-3 top-20 flex flex-col justify-end gap-2 md:relative md:right-0 md:top-0 md:mt-2 md:flex-row md:justify-center">
|
||||
{settingsStore?.userId !== params.id && (
|
||||
<button>
|
||||
<HomeIcon
|
||||
title="Set as your Profile"
|
||||
width={28}
|
||||
height={28}
|
||||
onClick={claimProfile}
|
||||
/>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-1 flex w-full flex-col items-center gap-2 md:items-start">
|
||||
{/* Name */}
|
||||
<p className="text-2xl">{playerData.name}</p>
|
||||
|
||||
<div className="flex gap-3 text-xl">
|
||||
{/* Global Rank */}
|
||||
<div className="flex items-center gap-1 text-gray-300">
|
||||
<GlobeAsiaAustraliaIcon width={32} height={32} />
|
||||
<p>#{playerData.rank}</p>
|
||||
</div>
|
||||
|
||||
{/* Country Rank */}
|
||||
<div className="flex items-center gap-1 text-gray-300">
|
||||
<ReactCountryFlag
|
||||
countryCode={playerData.country}
|
||||
svg
|
||||
className="!h-7 !w-7"
|
||||
/>
|
||||
<p>#{playerData.countryRank}</p>
|
||||
</div>
|
||||
|
||||
{/* PP */}
|
||||
<div className="flex items-center text-gray-300">
|
||||
<p>{formatNumber(playerData.pp)}pp</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Labels */}
|
||||
<div className="flex flex-wrap justify-center gap-2 md:justify-start">
|
||||
<Label
|
||||
title="Total play count"
|
||||
className="bg-blue-500"
|
||||
value={formatNumber(playerData.scoreStats.totalPlayCount)}
|
||||
/>
|
||||
<Label
|
||||
title="Total score"
|
||||
className="bg-blue-500"
|
||||
value={formatNumber(playerData.scoreStats.totalScore)}
|
||||
/>
|
||||
<Label
|
||||
title="Avg ranked acc"
|
||||
className="bg-blue-500"
|
||||
value={`${playerData.scoreStats.averageRankedAccuracy.toFixed(
|
||||
2,
|
||||
)}%`}
|
||||
/>
|
||||
<Label
|
||||
title="Replays watched"
|
||||
value={formatNumber(playerData.scoreStats.replaysWatched)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Chart */}
|
||||
<PlayerChart scoresaber={player.player} />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Scores */}
|
||||
<Card className="mt-2 w-full items-center md:flex-col">
|
||||
{/* Sort */}
|
||||
<div className="m-2 w-full text-sm">
|
||||
<div className="flex justify-center gap-2">
|
||||
{Object.values(SortTypes).map((sortType) => {
|
||||
return (
|
||||
<button
|
||||
key={sortType.value}
|
||||
className={`flex transform-gpu flex-row items-center gap-1 rounded-md p-[0.35rem] transition-all hover:opacity-80 ${
|
||||
scores.sortType.value === sortType.value
|
||||
? "bg-blue-500"
|
||||
: "bg-gray-500"
|
||||
}`}
|
||||
onClick={() => {
|
||||
updateScoresPage(sortType, 1);
|
||||
}}
|
||||
>
|
||||
{sortType.icon}
|
||||
<p>{sortType.name}</p>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-1">
|
||||
{scores.loading ? (
|
||||
<div className="flex justify-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 divide-y divide-gray-500">
|
||||
{!scores.loading && scores.scores.length == 0 ? (
|
||||
<p className="text-red-400">{errorMessage}</p>
|
||||
) : (
|
||||
scores.scores.map((scoreData, id) => {
|
||||
const { score, leaderboard } = scoreData;
|
||||
|
||||
return (
|
||||
<Score key={id} score={score} leaderboard={leaderboard} />
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
<div className="flex w-full flex-row justify-center rounded-md bg-gray-800 md:flex-col">
|
||||
<div className="p-3">
|
||||
<Pagination
|
||||
currentPage={scores.page}
|
||||
totalPages={scores.totalPages}
|
||||
onPageChange={(page) => {
|
||||
updateScoresPage(scores.sortType, page);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<PlayerInfo playerData={playerData} />
|
||||
<Scores playerData={playerData} page={page} sortType={sortType} />
|
||||
</Container>
|
||||
</main>
|
||||
);
|
||||
|
24
src/components/Error.tsx
Normal file
24
src/components/Error.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import Image from "next/image";
|
||||
|
||||
type ErrorProps = {
|
||||
errorMessage?: string;
|
||||
};
|
||||
|
||||
export default function Error({ errorMessage }: ErrorProps) {
|
||||
return (
|
||||
<div role="status">
|
||||
<div className="flex flex-col items-center justify-center gap-4">
|
||||
<p className="text-2xl font-bold text-red-500">Something went wrong!</p>
|
||||
<p className="text-xl text-gray-400">{errorMessage}</p>
|
||||
|
||||
<Image
|
||||
alt="Sad cat"
|
||||
src={"https://cdn.fascinated.cc/BxI9iJI9.jpg"}
|
||||
width={200}
|
||||
height={200}
|
||||
className="rounded-xl"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
@ -2,7 +2,7 @@ import clsx from "clsx";
|
||||
|
||||
type LabelProps = {
|
||||
title: string;
|
||||
value: string;
|
||||
value: any;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
|
163
src/components/PlayerInfo.tsx
Normal file
163
src/components/PlayerInfo.tsx
Normal file
@ -0,0 +1,163 @@
|
||||
import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
|
||||
import { usePlayerScoresStore } from "@/store/playerScoresStore";
|
||||
import { useSettingsStore } from "@/store/settingsStore";
|
||||
import { formatNumber } from "@/utils/number";
|
||||
import { calcPpBoundary, getHighestPpPlay } from "@/utils/scoresaber/scores";
|
||||
import { GlobeAsiaAustraliaIcon, HomeIcon } from "@heroicons/react/20/solid";
|
||||
import { useRef } from "react";
|
||||
import ReactCountryFlag from "react-country-flag";
|
||||
import { toast } from "react-toastify";
|
||||
import { useStore } from "zustand";
|
||||
import Avatar from "./Avatar";
|
||||
import Card from "./Card";
|
||||
import Label from "./Label";
|
||||
import PlayerChart from "./PlayerChart";
|
||||
|
||||
type PlayerInfoProps = {
|
||||
playerData: ScoresaberPlayer;
|
||||
};
|
||||
|
||||
export default function PlayerInfo({ playerData }: PlayerInfoProps) {
|
||||
const playerId = playerData.id;
|
||||
const settingsStore = useStore(useSettingsStore, (store) => store);
|
||||
const playerScoreStore = useStore(usePlayerScoresStore, (store) => store);
|
||||
|
||||
// Whether we have scores for this player in the local database
|
||||
const hasLocalScores = playerScoreStore?.exists(playerId);
|
||||
|
||||
const toastId: any = useRef(null);
|
||||
|
||||
async function claimProfile() {
|
||||
settingsStore?.setUserId(playerId);
|
||||
settingsStore?.refreshProfile();
|
||||
|
||||
const reponse = await playerScoreStore?.addPlayer(
|
||||
playerId,
|
||||
(page, totalPages) => {
|
||||
const autoClose = page == totalPages ? 5000 : false;
|
||||
|
||||
if (page == 1) {
|
||||
toastId.current = toast.info(
|
||||
`Fetching scores ${page}/${totalPages}`,
|
||||
{
|
||||
autoClose: autoClose,
|
||||
progress: page / totalPages,
|
||||
},
|
||||
);
|
||||
} else {
|
||||
toast.update(toastId.current, {
|
||||
progress: page / totalPages,
|
||||
render: `Fetching scores ${page}/${totalPages}`,
|
||||
autoClose: autoClose,
|
||||
});
|
||||
}
|
||||
|
||||
console.log(`Fetching scores for ${playerId} (${page}/${totalPages})`);
|
||||
},
|
||||
);
|
||||
if (reponse?.error) {
|
||||
toast.error("Failed to claim profile");
|
||||
console.log(reponse.message);
|
||||
return;
|
||||
}
|
||||
|
||||
toast.success("Successfully claimed profile");
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="mt-2">
|
||||
{/* Player Info */}
|
||||
<div className="flex flex-col items-center gap-3 md:flex-row md:items-start">
|
||||
<div className="min-w-fit">
|
||||
{/* Avatar */}
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<Avatar url={playerData.profilePicture} label="Avatar" />
|
||||
</div>
|
||||
|
||||
{/* Settings Buttons */}
|
||||
<div className="absolute right-3 top-20 flex flex-col justify-end gap-2 md:relative md:right-0 md:top-0 md:mt-2 md:flex-row md:justify-center">
|
||||
{settingsStore?.userId !== playerId && (
|
||||
<button>
|
||||
<HomeIcon
|
||||
title="Set as your Profile"
|
||||
width={28}
|
||||
height={28}
|
||||
onClick={claimProfile}
|
||||
/>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-1 flex w-full flex-col items-center gap-2 md:items-start">
|
||||
{/* Name */}
|
||||
<p className="text-2xl">{playerData.name}</p>
|
||||
|
||||
<div className="flex gap-3 text-xl">
|
||||
{/* Global Rank */}
|
||||
<div className="flex items-center gap-1 text-gray-300">
|
||||
<GlobeAsiaAustraliaIcon width={32} height={32} />
|
||||
<p>#{playerData.rank}</p>
|
||||
</div>
|
||||
|
||||
{/* Country Rank */}
|
||||
<div className="flex items-center gap-1 text-gray-300">
|
||||
<ReactCountryFlag
|
||||
countryCode={playerData.country}
|
||||
svg
|
||||
className="!h-7 !w-7"
|
||||
/>
|
||||
<p>#{playerData.countryRank}</p>
|
||||
</div>
|
||||
|
||||
{/* PP */}
|
||||
<div className="flex items-center text-gray-300">
|
||||
<p>{formatNumber(playerData.pp)}pp</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Labels */}
|
||||
<div className="flex flex-wrap justify-center gap-2 md:justify-start">
|
||||
<Label
|
||||
title="Total play count"
|
||||
className="bg-blue-500"
|
||||
value={formatNumber(playerData.scoreStats.totalPlayCount)}
|
||||
/>
|
||||
<Label
|
||||
title="Total score"
|
||||
className="bg-blue-500"
|
||||
value={formatNumber(playerData.scoreStats.totalScore)}
|
||||
/>
|
||||
<Label
|
||||
title="Avg ranked acc"
|
||||
className="bg-blue-500"
|
||||
value={`${playerData.scoreStats.averageRankedAccuracy.toFixed(
|
||||
2,
|
||||
)}%`}
|
||||
/>
|
||||
|
||||
{hasLocalScores && (
|
||||
<>
|
||||
<Label
|
||||
title="Top PP"
|
||||
className="bg-[#8992e8]"
|
||||
value={`${formatNumber(
|
||||
getHighestPpPlay(playerId)?.toFixed(2),
|
||||
)}pp`}
|
||||
/>
|
||||
<Label
|
||||
title="+ 1pp"
|
||||
className="bg-[#8992e8]"
|
||||
value={`${formatNumber(
|
||||
calcPpBoundary(playerId, 1)?.toFixed(2),
|
||||
)}pp per global raw`}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Chart */}
|
||||
<PlayerChart scoresaber={playerData} />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
150
src/components/Scores.tsx
Normal file
150
src/components/Scores.tsx
Normal file
@ -0,0 +1,150 @@
|
||||
import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
|
||||
import { ScoresaberPlayerScore } from "@/schemas/scoresaber/playerScore";
|
||||
import { useSettingsStore } from "@/store/settingsStore";
|
||||
import { SortType, SortTypes } from "@/types/SortTypes";
|
||||
import { fetchScores } from "@/utils/scoresaber/api";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import Card from "./Card";
|
||||
import Pagination from "./Pagination";
|
||||
import Score from "./Score";
|
||||
import { Spinner } from "./Spinner";
|
||||
|
||||
type PageInfo = {
|
||||
loading: boolean;
|
||||
page: number;
|
||||
totalPages: number;
|
||||
sortType: SortType;
|
||||
scores: ScoresaberPlayerScore[];
|
||||
};
|
||||
|
||||
type ScoresProps = {
|
||||
playerData: ScoresaberPlayer;
|
||||
page: number;
|
||||
sortType: SortType;
|
||||
};
|
||||
|
||||
export default function Scores({ playerData, page, sortType }: ScoresProps) {
|
||||
const playerId = playerData.id;
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const [error, setError] = useState(false);
|
||||
const [errorMessage, setErrorMessage] = useState("");
|
||||
|
||||
const [scores, setScores] = useState<PageInfo>({
|
||||
loading: true,
|
||||
page: page,
|
||||
totalPages: 1,
|
||||
sortType: sortType,
|
||||
scores: [],
|
||||
});
|
||||
|
||||
const updateScoresPage = useCallback(
|
||||
(sortType: SortType, page: any) => {
|
||||
console.log("Switching page to", page);
|
||||
fetchScores(playerId, page, sortType.value, 10).then((scoresResponse) => {
|
||||
if (!scoresResponse) {
|
||||
setError(true);
|
||||
setErrorMessage("No Scores");
|
||||
setScores({ ...scores, loading: false });
|
||||
return;
|
||||
}
|
||||
setScores({
|
||||
...scores,
|
||||
scores: scoresResponse.scores,
|
||||
totalPages: scoresResponse.pageInfo.totalPages,
|
||||
loading: false,
|
||||
page: page,
|
||||
sortType: sortType,
|
||||
});
|
||||
useSettingsStore.setState({
|
||||
lastUsedSortType: sortType,
|
||||
});
|
||||
|
||||
if (page > 1) {
|
||||
router.push(
|
||||
`/player/${playerId}?page=${page}&sort=${sortType.value}`,
|
||||
{
|
||||
scroll: false,
|
||||
},
|
||||
);
|
||||
} else {
|
||||
router.push(`/player/${playerId}?sort=${sortType.value}`, {
|
||||
scroll: false,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
[playerId, router, scores],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!scores.loading || error) return;
|
||||
|
||||
updateScoresPage(scores.sortType, scores.page);
|
||||
}, [error, playerId, updateScoresPage, scores]);
|
||||
|
||||
return (
|
||||
<Card className="mt-2 w-full items-center md:flex-col">
|
||||
{/* Sort */}
|
||||
<div className="m-2 w-full text-sm">
|
||||
<div className="flex justify-center gap-2">
|
||||
{Object.values(SortTypes).map((sortType) => {
|
||||
return (
|
||||
<button
|
||||
key={sortType.value}
|
||||
className={`flex transform-gpu flex-row items-center gap-1 rounded-md p-[0.35rem] transition-all hover:opacity-80 ${
|
||||
scores.sortType.value === sortType.value
|
||||
? "bg-blue-500"
|
||||
: "bg-gray-500"
|
||||
}`}
|
||||
onClick={() => {
|
||||
updateScoresPage(sortType, 1);
|
||||
}}
|
||||
>
|
||||
{sortType.icon}
|
||||
<p>{sortType.name}</p>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full p-1">
|
||||
{scores.loading ? (
|
||||
<div className="flex justify-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 divide-y divide-gray-500">
|
||||
{!scores.loading && scores.scores.length == 0 ? (
|
||||
<p className="text-red-400">{errorMessage}</p>
|
||||
) : (
|
||||
scores.scores.map((scoreData, id) => {
|
||||
const { score, leaderboard } = scoreData;
|
||||
|
||||
return (
|
||||
<Score key={id} score={score} leaderboard={leaderboard} />
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
<div className="flex w-full flex-row justify-center rounded-md bg-gray-800 md:flex-col">
|
||||
<div className="p-3">
|
||||
<Pagination
|
||||
currentPage={scores.page}
|
||||
totalPages={scores.totalPages}
|
||||
onPageChange={(page) => {
|
||||
updateScoresPage(scores.sortType, page);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
170
src/utils/scoresaber/scores.ts
Normal file
170
src/utils/scoresaber/scores.ts
Normal file
@ -0,0 +1,170 @@
|
||||
// Yoinked from https://github.com/Shurdoof/pp-calculator/blob/c24b5ca452119339928831d74e6d603fb17fd5ef/src/lib/pp/calculator.ts
|
||||
// Thank for for this I have no fucking idea what the maths is doing but it works!
|
||||
|
||||
import { usePlayerScoresStore } from "@/store/playerScoresStore";
|
||||
|
||||
export const WEIGHT_COEFFICIENT = 0.965;
|
||||
|
||||
const starMultiplier = 42.11;
|
||||
const ppCurve = [
|
||||
[1, 7],
|
||||
[0.999, 6.24],
|
||||
[0.9975, 5.31],
|
||||
[0.995, 4.14],
|
||||
[0.9925, 3.31],
|
||||
[0.99, 2.73],
|
||||
[0.9875, 2.31],
|
||||
[0.985, 2.0],
|
||||
[0.9825, 1.775],
|
||||
[0.98, 1.625],
|
||||
[0.9775, 1.515],
|
||||
[0.975, 1.43],
|
||||
[0.9725, 1.36],
|
||||
[0.97, 1.3],
|
||||
[0.965, 1.195],
|
||||
[0.96, 1.115],
|
||||
[0.955, 1.05],
|
||||
[0.95, 1],
|
||||
[0.94, 0.94],
|
||||
[0.93, 0.885],
|
||||
[0.92, 0.835],
|
||||
[0.91, 0.79],
|
||||
[0.9, 0.75],
|
||||
[0.875, 0.655],
|
||||
[0.85, 0.57],
|
||||
[0.825, 0.51],
|
||||
[0.8, 0.47],
|
||||
[0.75, 0.4],
|
||||
[0.7, 0.34],
|
||||
[0.65, 0.29],
|
||||
[0.6, 0.25],
|
||||
[0.0, 0.0],
|
||||
];
|
||||
|
||||
function clamp(value: number, min: number, max: number) {
|
||||
if (min !== null && value < min) {
|
||||
return min;
|
||||
}
|
||||
|
||||
if (max !== null && value > max) {
|
||||
return max;
|
||||
}
|
||||
|
||||
return value;
|
||||
}
|
||||
|
||||
function lerp(v0: number, v1: number, t: number) {
|
||||
return v0 + t * (v1 - v0);
|
||||
}
|
||||
|
||||
function calculatePPModifier(c1: Array<any>, c2: Array<any>, acc: number) {
|
||||
const distance = (c2[0] - acc) / (c2[0] - c1[0]);
|
||||
return lerp(c2[1], c1[1], distance);
|
||||
}
|
||||
|
||||
function findPPModifier(acc: number, curve: Array<any>) {
|
||||
acc = clamp(acc, 0, 100) / 100;
|
||||
|
||||
let prev = curve[1];
|
||||
for (const item of curve) {
|
||||
if (item[0] <= acc) {
|
||||
return calculatePPModifier(item, prev, acc);
|
||||
}
|
||||
prev = item;
|
||||
}
|
||||
}
|
||||
|
||||
export function getScoreSaberPP(acc: number, stars: number) {
|
||||
const ppValue = stars * starMultiplier;
|
||||
const modifier = findPPModifier(acc * 100, ppCurve);
|
||||
if (!modifier) return undefined;
|
||||
|
||||
const finalPP = modifier * ppValue;
|
||||
return {
|
||||
pp: Number.isNaN(finalPP) ? undefined : finalPP,
|
||||
};
|
||||
}
|
||||
|
||||
export function getTotalPpFromSortedPps(ppArray: Array<any>, startIdx = 0) {
|
||||
return ppArray.reduce(
|
||||
(cum, pp, idx) => cum + Math.pow(WEIGHT_COEFFICIENT, idx + startIdx) * pp,
|
||||
0,
|
||||
);
|
||||
}
|
||||
|
||||
function calcRawPpAtIdx(
|
||||
bottomScores: Array<any>,
|
||||
idx: number,
|
||||
expected: number,
|
||||
) {
|
||||
const oldBottomPp = getTotalPpFromSortedPps(bottomScores, idx);
|
||||
const newBottomPp = getTotalPpFromSortedPps(bottomScores, idx + 1);
|
||||
|
||||
// 0.965^idx * rawPpToFind = expected + oldBottomPp - newBottomPp;
|
||||
// rawPpToFind = (expected + oldBottomPp - newBottomPp) / 0.965^idx;
|
||||
return (
|
||||
(expected + oldBottomPp - newBottomPp) / Math.pow(WEIGHT_COEFFICIENT, idx)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the amount of raw pp needed to gain the expected pp
|
||||
*
|
||||
* @param playerId the player id
|
||||
* @param expectedPp the expected pp
|
||||
* @returns the pp boundary (+ per raw pp)
|
||||
*/
|
||||
export function calcPpBoundary(playerId: string, expectedPp = 1) {
|
||||
const rankedScores = usePlayerScoresStore
|
||||
.getState()
|
||||
.players.find((p) => p.id === playerId)
|
||||
?.scores?.filter((s) => s.score.pp !== undefined);
|
||||
if (!rankedScores) return null;
|
||||
|
||||
const rankedScorePps = rankedScores
|
||||
.map((s) => s.score.pp)
|
||||
.sort((a, b) => b - a);
|
||||
|
||||
let idx = rankedScorePps.length - 1;
|
||||
|
||||
while (idx >= 0) {
|
||||
const bottomSlice = rankedScorePps.slice(idx);
|
||||
const bottomPp = getTotalPpFromSortedPps(bottomSlice, idx);
|
||||
|
||||
bottomSlice.unshift(rankedScorePps[idx]);
|
||||
const modifiedBottomPp = getTotalPpFromSortedPps(bottomSlice, idx);
|
||||
const diff = modifiedBottomPp - bottomPp;
|
||||
|
||||
if (diff > expectedPp) {
|
||||
const ppBoundary = calcRawPpAtIdx(
|
||||
rankedScorePps.slice(idx + 1),
|
||||
idx + 1,
|
||||
expectedPp,
|
||||
);
|
||||
return ppBoundary;
|
||||
}
|
||||
|
||||
idx--;
|
||||
}
|
||||
return calcRawPpAtIdx(rankedScorePps, 0, expectedPp);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the highest pp play of a player
|
||||
*
|
||||
* @param playerId the player id
|
||||
* @returns the highest pp play
|
||||
*/
|
||||
export function getHighestPpPlay(playerId: string) {
|
||||
const rankedScores = usePlayerScoresStore
|
||||
.getState()
|
||||
.players.find((p) => p.id === playerId)
|
||||
?.scores?.filter((s) => s.score.pp !== undefined);
|
||||
if (!rankedScores) return null;
|
||||
|
||||
const rankedScorePps = rankedScores
|
||||
.map((s) => s.score.pp)
|
||||
.sort((a, b) => b - a);
|
||||
|
||||
return rankedScorePps[0];
|
||||
}
|
Loading…
Reference in New Issue
Block a user