diff --git a/src/components/player/PlayerInfo.tsx b/src/components/player/PlayerInfo.tsx index 8233b5a..762cf0e 100644 --- a/src/components/player/PlayerInfo.tsx +++ b/src/components/player/PlayerInfo.tsx @@ -1,265 +1,259 @@ -import { ScoresaberPlayer } from "@/schemas/scoresaber/player"; -import { useScoresaberScoresStore } from "@/store/scoresaberScoresStore"; -import { useSettingsStore } from "@/store/settingsStore"; -import { formatNumber } from "@/utils/number"; -import { - calcPpBoundary, - getAveragePp, - getHighestPpPlay, - getTotalScores, -} from "@/utils/scoresaber/scores"; -import { - GlobeAsiaAustraliaIcon, - HomeIcon, - UserIcon, - XMarkIcon, -} from "@heroicons/react/20/solid"; -import dynamic from "next/dynamic"; -import { useRef } from "react"; -import { toast } from "react-toastify"; -import { useStore } from "zustand"; -import Avatar from "../Avatar"; -import Card from "../Card"; -import Label from "../Label"; - -const PlayerChart = dynamic(() => import("./PlayerChart")); -const ReactCountryFlag = dynamic(() => import("react-country-flag")); - -type PlayerInfoProps = { - playerData: ScoresaberPlayer; -}; - -export default function PlayerInfo({ playerData }: PlayerInfoProps) { - const playerId = playerData.id; - const settingsStore = useStore(useSettingsStore, (store) => store); - const playerScoreStore = useStore(useScoresaberScoresStore, (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?.setProfile(playerData); - addProfile(false); - } - - async function addFriend() { - const friend = await settingsStore?.addFriend(playerData.id); - if (!friend) { - toast.error(`Failed to add ${playerData.name} as a friend`); - return; - } - addProfile(true); - } - - async function removeFriend() { - settingsStore?.removeFriend(playerData.id); - - toast.success(`Successfully removed ${playerData.name} as a friend`); - } - - async function addProfile(isFriend: boolean) { - if (!useScoresaberScoresStore.getState().exists(playerId)) { - if (!isFriend) { - toast.success(`Successfully set ${playerData.name} as your profile`); - } else { - toast.success(`Successfully added ${playerData.name} as a friend`); - } - - const reponse = await playerScoreStore?.addOrUpdatePlayer( - playerId, - (page, totalPages) => { - const autoClose = page == totalPages ? 5000 : false; - - if (page == 1) { - toastId.current = toast.info( - `Fetching scores for ${playerData.name} page ${page}/${totalPages}`, - { - autoClose: autoClose, - progress: page / totalPages, - }, - ); - } else { - if (page != totalPages) { - toast.update(toastId.current, { - progress: page / totalPages, - render: `Fetching scores for ${playerData.name} page ${page}/${totalPages}`, - autoClose: autoClose, - }); - } else { - toast.update(toastId.current, { - progress: 0, - render: `Successfully fetched scores for ${playerData.name}`, - autoClose: autoClose, - type: "success", - }); - } - } - - console.log( - `Fetching scores for ${playerId} (${page}/${totalPages})`, - ); - }, - ); - if (reponse?.error) { - toast.error("Failed to fetch scores"); - console.log(reponse.message); - return; - } - } - } - - const isOwnProfile = settingsStore.player?.id == playerId; - - return ( - - {/* Player Info */} - - - {/* Avatar */} - - - - - {/* Settings Buttons */} - - {!isOwnProfile && ( - - - - )} - - {!isOwnProfile && ( - <> - {!settingsStore?.isFriend(playerId) && ( - - - - )} - - {settingsStore.isFriend(playerId) && ( - - - - )} - > - )} - - - - {/* Name */} - {playerData.name} - - - {/* Global Rank */} - - - - - #{formatNumber(playerData.rank)} - - - - {/* Country Rank */} - - - - #{formatNumber(playerData.countryRank)} - - - - {/* PP */} - - {formatNumber(playerData.pp)}pp - - - {/* Labels */} - - - - - - {hasLocalScores && ( - <> - - - - - > - )} - - - {/* Chart */} - - - - - ); -} +import { ScoresaberPlayer } from "@/schemas/scoresaber/player"; +import { useScoresaberScoresStore } from "@/store/scoresaberScoresStore"; +import { useSettingsStore } from "@/store/settingsStore"; +import { formatNumber } from "@/utils/number"; +import { + calcPpBoundary, + getAveragePp, + getHighestPpPlay, + getTotalScores, +} from "@/utils/scoresaber/scores"; +import { + GlobeAsiaAustraliaIcon, + HomeIcon, + UserIcon, + XMarkIcon, +} from "@heroicons/react/20/solid"; +import dynamic from "next/dynamic"; +import { useRef } from "react"; +import { toast } from "react-toastify"; +import { useStore } from "zustand"; +import Avatar from "../Avatar"; +import Card from "../Card"; +import Label from "../Label"; + +const PlayerChart = dynamic(() => import("./PlayerChart")); +const ReactCountryFlag = dynamic(() => import("react-country-flag")); + +type PlayerInfoProps = { + playerData: ScoresaberPlayer; +}; + +export default function PlayerInfo({ playerData }: PlayerInfoProps) { + const playerId = playerData.id; + const settingsStore = useStore(useSettingsStore, (store) => store); + const playerScoreStore = useStore(useScoresaberScoresStore, (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?.setProfile(playerData); + addProfile(false); + } + + async function addFriend() { + const friend = await settingsStore?.addFriend(playerData.id); + if (!friend) { + toast.error(`Failed to add ${playerData.name} as a friend`); + return; + } + addProfile(true); + } + + async function removeFriend() { + settingsStore?.removeFriend(playerData.id); + + toast.success(`Successfully removed ${playerData.name} as a friend`); + } + + async function addProfile(isFriend: boolean) { + if (!useScoresaberScoresStore.getState().exists(playerId)) { + if (!isFriend) { + toast.success(`Successfully set ${playerData.name} as your profile`); + } else { + toast.success(`Successfully added ${playerData.name} as a friend`); + } + + const reponse = await playerScoreStore?.addOrUpdatePlayer( + playerId, + (page, totalPages) => { + const autoClose = page == totalPages ? 5000 : false; + + if (page == 1) { + toastId.current = toast.info( + `Fetching scores for ${playerData.name} page ${page}/${totalPages}`, + { + autoClose: autoClose, + progress: page / totalPages, + }, + ); + } else { + if (page != totalPages) { + toast.update(toastId.current, { + progress: page / totalPages, + render: `Fetching scores for ${playerData.name} page ${page}/${totalPages}`, + autoClose: autoClose, + }); + } else { + toast.update(toastId.current, { + progress: 0, + render: `Successfully fetched scores for ${playerData.name}`, + autoClose: autoClose, + type: "success", + }); + } + } + + console.log( + `Fetching scores for ${playerId} (${page}/${totalPages})`, + ); + }, + ); + if (reponse?.error) { + toast.error("Failed to fetch scores"); + console.log(reponse.message); + return; + } + } + } + + const isOwnProfile = settingsStore.player?.id == playerId; + + return ( + + {/* Player Info */} + + + {/* Avatar */} + + + + + {/* Settings Buttons */} + + {!isOwnProfile && ( + + + + )} + + {!isOwnProfile && ( + <> + {!settingsStore?.isFriend(playerId) && ( + + + + )} + + {settingsStore.isFriend(playerId) && ( + + + + )} + > + )} + + + + {/* Name */} + {playerData.name} + + + {/* Global Rank */} + + + + + #{formatNumber(playerData.rank)} + + + + {/* Country Rank */} + + + + #{formatNumber(playerData.countryRank)} + + + + {/* PP */} + + {formatNumber(playerData.pp)}pp + + + {/* Labels */} + + + + + + {hasLocalScores && ( + <> + + + + > + )} + + + {/* Chart */} + + + + + ); +}
{playerData.name}
#{formatNumber(playerData.rank)}
#{formatNumber(playerData.countryRank)}
{formatNumber(playerData.pp)}pp