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

implement a janky fix for mobile until i can be bothered to make it mobile friendly
All checks were successful
Deploy Website / deploy (push) Successful in 3m26s
Details

Browse Source
This commit is contained in:
Lee 2024-10-11 03:35:12 +01:00
parent e4f0376af3
commit 4894e0597c
1 changed files with 22 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
projects/website/src/components/ranking/ranking-data.tsx
View File

@ -11,19 +11,8 @@ import { PlayerRanking } from "@/components/ranking/player-ranking";
const REFRESH_INTERVAL = 1000 * 60 * 5; const REFRESH_INTERVAL = 1000 * 60 * 5;
type RankingDataProps = { type RankingDataProps = {
/**
* The page to show when opening the leaderboard.
*/
initialPage: number; initialPage: number;
/**
* The country to show when opening the leaderboard.
*/
country?: string | undefined; country?: string | undefined;
/**
* The leaderboard to display.
*/
initialPageData?: ScoreSaberPlayersPageToken; initialPageData?: ScoreSaberPlayersPageToken;
}; };
@ -53,9 +42,6 @@ export default function RankingData({ initialPage, country, initialPageData }: R
} }
}, [data, isLoading, isError]); }, [data, isLoading, isError]);
/**
* Gets the URL to the page.
*/
const getUrl = useCallback( const getUrl = useCallback(
(page: number) => { (page: number) => {
return `/ranking/${country != undefined ? `${country}/` : ""}${page}`; return `/ranking/${country != undefined ? `${country}/` : ""}${page}`;
@ -63,10 +49,6 @@ export default function RankingData({ initialPage, country, initialPageData }: R
[country] [country]
); );
/**
* Handle updating the URL when the page number,
* sort, or search term changes.
*/
useEffect(() => { useEffect(() => {
const newUrl = getUrl(currentPage); const newUrl = getUrl(currentPage);
window.history.replaceState({ ...window.history.state, as: newUrl, url: newUrl }, "", newUrl); window.history.replaceState({ ...window.history.state, as: newUrl, url: newUrl }, "", newUrl);
@ -80,26 +62,29 @@ export default function RankingData({ initialPage, country, initialPageData }: R
return ( return (
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<table className="table w-full table-auto border-spacing-2 border-none text-left"> {/* Wrapping the table in a scrollable container */}
<thead> <div className="overflow-x-auto">
<tr> <table className="table w-full table-auto border-spacing-2 border-none text-left">
<th className="px-4 py-2">Rank</th> <thead>
<th className="px-4 py-2">Player</th> <tr>
<th className="px-4 py-2 text-center">Performance Points</th> <th className="px-4 py-2">Rank</th>
<th className="px-4 py-2 text-center">Total Plays</th> <th className="px-4 py-2">Player</th>
<th className="px-4 py-2 text-center">Total Ranked Plays</th> <th className="px-4 py-2 text-center">Performance Points</th>
<th className="px-4 py-2 text-center">Avg Ranked Accuracy</th> <th className="px-4 py-2 text-center">Total Plays</th>
<th className="px-4 py-2 text-center">Weekly Change</th> <th className="px-4 py-2 text-center">Total Ranked Plays</th>
</tr> <th className="px-4 py-2 text-center">Avg Ranked Accuracy</th>
</thead> <th className="px-4 py-2 text-center">Weekly Change</th>
<tbody className="border-none overflow-x-scroll w-full">
{players.map(player => (
<tr key={player.rank} className="border-b border-border">
<PlayerRanking isCountry={country != undefined} player={player} />
</tr> </tr>
))} </thead>
</tbody> <tbody className="border-none">
</table> {players.map(player => (
<tr key={player.rank} className="border-b border-border">
<PlayerRanking isCountry={country != undefined} player={player} />
</tr>
))}
</tbody>
</table>
</div>
{/* Pagination */} {/* Pagination */}
<Pagination <Pagination