Renamed files
This commit is contained in:
315
src/app/(stats)/player/[ign]/_components/sidebar.tsx
Normal file
315
src/app/(stats)/player/[ign]/_components/sidebar.tsx
Normal file
@@ -0,0 +1,315 @@
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import { getColor } from "@/lib/colors"
|
||||
import { formatDate, formatNumber } from "@/lib/formatters"
|
||||
import { getCoinMultiplier, getTotalChallenges, getTotalCoins, getTotalQuests, rewardClaimed } from "@/lib/hypixel/general/stats"
|
||||
import { getGame, getGameMode } from "@/lib/hypixel/general/status"
|
||||
import { getGuildMember, getGuildRankTag, getMemberGEXP, getMemberWeeklyGEXP } from "@/lib/hypixel/guild/guild"
|
||||
import { Guild } from "@/lib/schema/guild"
|
||||
import { Player } from "@/lib/schema/player"
|
||||
import { Session } from "@/lib/schema/status"
|
||||
import Link from "next/link"
|
||||
import SocialIcons from "./social-icons"
|
||||
|
||||
type SidebarProps = {
|
||||
level: number
|
||||
ign: string
|
||||
player: Player["player"]
|
||||
guild: Guild["guild"] | undefined
|
||||
rank: string | undefined
|
||||
specialRank: string | undefined
|
||||
eulaCoins: boolean | undefined
|
||||
session: Session["session"] | null
|
||||
}
|
||||
|
||||
export default function Sidebar({ level, ign, player, guild, rank, specialRank, eulaCoins, session }: SidebarProps) {
|
||||
const levelMultiplier = getCoinMultiplier(level, rank, specialRank, eulaCoins)
|
||||
|
||||
const levelMultiplierVal = levelMultiplier.value
|
||||
const levelMultiplierText = levelMultiplier.level === true ? `(Level ${level.toString().split(".")[0]})` : `(${levelMultiplier.name})`
|
||||
|
||||
function General() {
|
||||
return (
|
||||
<div className="flex justify-between px-8">
|
||||
<div className="text-center">
|
||||
<p>Hypixel level</p>
|
||||
<p>{formatNumber(level)}</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p>Karma</p>
|
||||
<p className="text-mc-light-purple">{formatNumber(player.karma)}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Coins() {
|
||||
return (
|
||||
<div>
|
||||
<p>
|
||||
<span className="font-bold">{"Coin multiplier: "}</span>
|
||||
<span>{`x${levelMultiplierVal} ${levelMultiplierText}`}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-bold">{"Total coins: "}</span>
|
||||
<span className="text-mc-gold">
|
||||
{formatNumber(getTotalCoins(player.stats))}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Other() {
|
||||
return (
|
||||
<div>
|
||||
<p>
|
||||
<span>
|
||||
<Link href={`/achievements/${ign}`} className="font-bold underline">
|
||||
Achievement Points
|
||||
</Link>
|
||||
</span>
|
||||
<span className="font-bold">{": "}</span>
|
||||
<span>{formatNumber(player.achievementPoints ?? 0)}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span>
|
||||
<Link href={`/quests/${ign}`} className="font-bold underline">
|
||||
Quests Completed
|
||||
</Link>
|
||||
</span>
|
||||
<span className="font-bold">{": "}</span>
|
||||
<span>{formatNumber(getTotalQuests(player.quests))}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-bold">{"Challenges Completed: "}</span>
|
||||
<span>{formatNumber(getTotalChallenges(player.challenges))}</span>
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function DailyRewards() {
|
||||
return (
|
||||
<div>
|
||||
<p>
|
||||
<span className="font-bold">{"Today's Reward: "}</span>
|
||||
<span
|
||||
className={`${rewardClaimed(player.lastClaimedReward) === true ? "font-bold text-mc-green" : undefined}`}
|
||||
>
|
||||
{rewardClaimed(player.lastClaimedReward) ? "Claimed" : "Unclaimed"}
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-bold">{"Rewards Claimed: "}</span>
|
||||
<span>{player.totalRewards}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-bold">{"Reward Streak: "}</span>
|
||||
<span>{player.rewardStreak}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-bold">{"Top Reward Streak: "}</span>
|
||||
<span>{player.rewardHighScore}</span>
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Gifting() {
|
||||
return (
|
||||
<div>
|
||||
<p>
|
||||
<span className="font-bold">{"Gifts Given: "}</span>
|
||||
<span>{player.giftingMeta?.giftsGiven ?? 0}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-bold">{"Ranks Given: "}</span>
|
||||
<span>{player.giftingMeta?.ranksGiven ?? 0}</span>
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Logins() {
|
||||
return (
|
||||
<div>
|
||||
<p>
|
||||
<span className="font-bold">{"First Login: "}</span>
|
||||
<span>{formatDate(player.firstLogin ?? 0)}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-bold">{"Last Login: "}</span>
|
||||
<span>{formatDate(player.lastLogin ?? 0)}</span>
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function SkyblockButton() {
|
||||
return (
|
||||
<Button asChild variant="outline">
|
||||
<Link href={`https://sky.shiiyu.moe/stats/${player.displayname}`}>
|
||||
View SkyBlock Stats
|
||||
</Link>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
function GuildInfo() {
|
||||
if (!guild) return null
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col gap-8">
|
||||
<div>
|
||||
<Link href={`/guild/${ign}`}>
|
||||
<h1 className="text-xl font-bold underline">Guild</h1>
|
||||
</Link>
|
||||
<p>
|
||||
<span className="font-bold">{"Name: "}</span>
|
||||
<span className={getColor(guild.tagColor, "text", "gray")}>{guild.name}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-bold">{"Members: "}</span>
|
||||
<span>{guild.members.length}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
<span className="font-bold">{"Rank: "}</span>
|
||||
<span>{`${getGuildMember(guild, player.uuid)?.rank} `}</span>
|
||||
<span className={getColor(guild.tagColor, "text", "gray")}>
|
||||
{getGuildRankTag(guild, player.uuid)}
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-bold">{"Daily GEXP: "}</span>
|
||||
<span>{formatNumber(getMemberGEXP(guild, player.uuid, 0) ?? 0)}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-bold">{"Weekly GEXP: "}</span>
|
||||
<span>{formatNumber(getMemberWeeklyGEXP(guild, player.uuid) ?? 0)}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-bold">{"Joined: "}</span>
|
||||
<span>{formatDate(getGuildMember(guild, player.uuid)?.joined ?? 0)}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Separator className="my-4" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function OnlineStatus() {
|
||||
if (!session?.online) {
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col gap-2">
|
||||
<h2 className="text-xl font-bold">Online Status</h2>
|
||||
<p>
|
||||
<span className="font-bold">{"Status: "}</span>
|
||||
<span>Offline</span>
|
||||
</p>
|
||||
</div>
|
||||
<Separator className="my-4" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const noMapGameTypes = ["BUILD_BATTLE", "HOUSING", "REPLAY"]
|
||||
const noMapArcadeModes = [
|
||||
"DAYONE",
|
||||
"DEFENDER",
|
||||
"DRAGONWARS2",
|
||||
"DROPPER",
|
||||
"SOCCER",
|
||||
"STARWARS",
|
||||
"SIMON_SAYS",
|
||||
"PARTY",
|
||||
"DRAW_THEIR_THING",
|
||||
"PIXEL_PARTY",
|
||||
"THROW_OUT"
|
||||
]
|
||||
|
||||
const showMode = !(session.gameType === "REPLAY")
|
||||
const showMap = session.map !== undefined &&
|
||||
session.gameType !== undefined &&
|
||||
!noMapGameTypes.includes(session.gameType) &&
|
||||
session.mode !== undefined &&
|
||||
!(session.gameType === "ARCADE" && noMapArcadeModes.includes(session.mode))
|
||||
const mode = session.mode === "LOBBY" ? "Lobby" : getGameMode(session.gameType, session.mode)
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col gap-2">
|
||||
<h2 className="text-xl font-bold">Online Status</h2>
|
||||
<div>
|
||||
{session.gameType && (
|
||||
<p>
|
||||
<span className="font-bold">{"Game: "}</span>
|
||||
<span>{getGame(session.gameType)?.name || "Unknown"}</span>
|
||||
</p>
|
||||
)}
|
||||
{showMode && (
|
||||
<p>
|
||||
<span className="font-bold">{"Mode: "}</span>
|
||||
<span>{mode || "Unknown"}</span>
|
||||
</p>
|
||||
)}
|
||||
{showMap && (
|
||||
<p>
|
||||
<span className="font-bold">{"Map: "}</span>
|
||||
<span>{session.map}</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Separator className="my-4" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function SoicalLinks() {
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className="text-xl font-bold underline">Social Links</h1>
|
||||
<div className="flex gap-2">
|
||||
<SocialIcons
|
||||
discord={player?.socialMedia?.links?.DISCORD}
|
||||
twitch={player?.socialMedia?.links?.TWITCH}
|
||||
youtube={player?.socialMedia?.links?.YOUTUBE}
|
||||
twitter={player?.socialMedia?.links?.TWITTER}
|
||||
hypixel={player?.socialMedia?.links?.HYPIXEL}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="mx-auto w-full lg:mx-0 lg:w-1/4 max-w-120 md:max-w-3/10">
|
||||
<CardContent>
|
||||
<General />
|
||||
<Separator className="my-4" />
|
||||
<Coins />
|
||||
<Separator className="my-4" />
|
||||
<Other />
|
||||
<Separator className="my-4" />
|
||||
<DailyRewards />
|
||||
<Separator className="my-4" />
|
||||
<Gifting />
|
||||
<Separator className="my-4" />
|
||||
<Logins />
|
||||
<Separator className="my-4" />
|
||||
<SkyblockButton />
|
||||
<Separator className="my-4" />
|
||||
<GuildInfo />
|
||||
<OnlineStatus />
|
||||
<SoicalLinks />
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user