Fascinated/scoresaber-reloaded-v2
1
2
Fork 0
Code Issues 1 Pull Requests 10 Actions Activity

add mobile check
All checks were successful
deploy / deploy (push) Successful in 1m3s
Details

Browse Source
This commit is contained in:
Lee 2023-10-27 23:48:42 +01:00
parent 39efca8fb7
commit 4d6ece7a3b
1 changed files with 53 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
src/components/player/GlobalRanking.tsx
View File

@ -5,6 +5,7 @@ import { ScoreSaberAPI } from "@/utils/scoresaber/api";
import { normalizedRegionName } from "@/utils/utils"; import { normalizedRegionName } from "@/utils/utils";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import Link from "next/link"; import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import Card from "../Card"; import Card from "../Card";
import Container from "../Container"; import Container from "../Container";
@ -29,6 +30,10 @@ type GlobalRankingProps = {
}; };
export default function GlobalRanking({ page, country }: 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 [error, setError] = useState(false);
const [errorMessage, setErrorMessage] = useState(""); const [errorMessage, setErrorMessage] = useState("");
@ -41,6 +46,13 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
const updatePage = useCallback( const updatePage = useCallback(
(page: any) => { (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); console.log("Switching page to", page);
ScoreSaberAPI.fetchTopPlayers(page, country).then((response) => { ScoreSaberAPI.fetchTopPlayers(page, country).then((response) => {
if (!response) { if (!response) {
@ -65,7 +77,7 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
); );
}); });
}, },
[country, pageInfo], [country, isMobile, pageInfo, router],
); );
useEffect(() => { useEffect(() => {
@ -117,41 +129,48 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
</p> </p>
</div> </div>
<table className="hidden w-full table-auto border-spacing-2 border-none text-left md:table"> {!isMobile && (
<thead> <table className="table w-full table-auto border-spacing-2 border-none text-left">
<tr> <thead>
<th className="px-4 py-2">Rank</th> <tr>
<th className="px-4 py-2">Profile</th> <th className="px-4 py-2">Rank</th>
<th className="px-4 py-2">Performance Points</th> <th className="px-4 py-2">Profile</th>
<th className="px-4 py-2">Total Plays</th> <th className="px-4 py-2">Performance Points</th>
<th className="px-4 py-2">Total Ranked Plays</th> <th className="px-4 py-2">Total Plays</th>
<th className="px-4 py-2">Avg Ranked Accuracy</th> <th className="px-4 py-2">Total Ranked Plays</th>
</tr> <th className="px-4 py-2">Avg Ranked Accuracy</th>
</thead>
<tbody className="border-none">
{players.map((player) => (
<tr key={player.rank} className="border-b border-gray-700">
<PlayerRanking
showCountryFlag={country ? false : true}
player={player}
/>
</tr> </tr>
))} </thead>
</tbody> <tbody className="border-none">
</table> {players.map((player) => (
<tr
key={player.rank}
className="border-b border-gray-700"
>
<PlayerRanking
showCountryFlag={country ? false : true}
player={player}
/>
</tr>
))}
</tbody>
</table>
)}
<div className="flex flex-col gap-2 md:hidden"> {isMobile && (
{players.map((player) => ( <div className="flex flex-col gap-2">
<div {players.map((player) => (
key={player.rank} <div
className="flex flex-col gap-2 rounded-md bg-gray-700 hover:bg-gray-600" key={player.rank}
> className="flex flex-col gap-2 rounded-md bg-gray-700 hover:bg-gray-600"
<Link href={`/player/${player.id}/top/1`}> >
<PlayerRankingMobile player={player} /> <Link href={`/player/${player.id}/top/1`}>
</Link> <PlayerRankingMobile player={player} />
</div> </Link>
))} </div>
</div> ))}
</div>
)}
{/* Pagination */} {/* Pagination */}
<div className="flex w-full flex-row justify-center rounded-md bg-gray-800 md:flex-col"> <div className="flex w-full flex-row justify-center rounded-md bg-gray-800 md:flex-col">