diff --git a/src/components/player/GlobalRanking.tsx b/src/components/player/GlobalRanking.tsx index 3bc8415..7b60166 100644 --- a/src/components/player/GlobalRanking.tsx +++ b/src/components/player/GlobalRanking.tsx @@ -5,6 +5,7 @@ import { ScoreSaberAPI } from "@/utils/scoresaber/api"; import { normalizedRegionName } from "@/utils/utils"; import dynamic from "next/dynamic"; import Link from "next/link"; +import { useRouter, useSearchParams } from "next/navigation"; import { useCallback, useEffect, useState } from "react"; import Card from "../Card"; import Container from "../Container"; @@ -29,6 +30,10 @@ type GlobalRankingProps = { }; export default function GlobalRanking({ page, country }: GlobalRankingProps) { + const router = useRouter(); + const searchQuery = useSearchParams(); + const isMobile = searchQuery.get("mobile") == "true"; + const [error, setError] = useState(false); const [errorMessage, setErrorMessage] = useState(""); @@ -41,6 +46,13 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) { const updatePage = useCallback( (page: any) => { + const windowSize = document.documentElement.clientWidth; + if (windowSize < 768 && !isMobile) { + router.push(`/ranking/global/${page}?mobile=true`); + router.refresh(); + return; + } + console.log("Switching page to", page); ScoreSaberAPI.fetchTopPlayers(page, country).then((response) => { if (!response) { @@ -65,7 +77,7 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) { ); }); }, - [country, pageInfo], + [country, isMobile, pageInfo, router], ); useEffect(() => { @@ -117,41 +129,48 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {

- - - - - - - - - - - - - {players.map((player) => ( - - + {!isMobile && ( +
RankProfilePerformance PointsTotal PlaysTotal Ranked PlaysAvg Ranked Accuracy
+ + + + + + + + - ))} - -
RankProfilePerformance PointsTotal PlaysTotal Ranked PlaysAvg Ranked Accuracy
+ + + {players.map((player) => ( + + + + ))} + + + )} -
- {players.map((player) => ( -
- - - -
- ))} -
+ {isMobile && ( +
+ {players.map((player) => ( +
+ + + +
+ ))} +
+ )} {/* Pagination */}