projects/hypixel-stats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finished sidebar

Browse Source
This commit is contained in:
Taken
2025-08-16 23:39:11 +02:00
parent 1921efc76a
commit c79d06f272
35 changed files with 1307 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
src/app/(stats)/player/[ign]/_components/Sidebar.tsx Normal file
View File

@@ -0,0 +1,167 @@
import { Card, CardContent } from "@/components/ui/card"
import { getColor } from "@/data/colors"
import { formatDate, formatNumber } from "@/lib/formatters"
import { getGuildMember, getGuildRankTag, getMemberGEXP, getMemberWeeklyGEXP } from "@/lib/hypixel/guild"
import { getCoinMultiplier, getTotalChallenges, getTotalCoins, getTotalQuests, rewardClaimed } from "@/lib/hypixel/stats"
import { Guild } from "@/lib/schema/guild"
import { Player } from "@/lib/schema/player"
import { Separator } from "@radix-ui/react-separator"
import Link from "next/link"
import SocialIcons from "./SocialIcons"
type SidebarProps = {
level: number
ign: string
player: Player["player"]
guild: Guild["guild"] | undefined
}
export default function Sidebar({ level, ign, player, guild }: SidebarProps) {
return (
<Card className="w-1/4">
<CardContent>
<div className="flex justify-between px-8">
<div className="text-center">
<p>Hypixel level</p>
<p>{level.toFixed(2)}</p>
</div>
<div className="text-center">
<p>Karma</p>
<p className="text-mc-light-purple">{formatNumber(player.karma)}</p>
</div>
</div>
<Separator className="my-4" />
<div>
<p>
<span className="font-bold">{"Coin multiplier: "}</span>
<span>{`x${getCoinMultiplier(level)} (Level ${level.toFixed(1).split(".")[0]})`}</span>
</p>
<p>
<span className="font-bold">{"Total coins: "}</span>
<span className="text-mc-gold">{formatNumber(getTotalCoins(player.stats))}</span>
</p>
</div>
<Separator className="my-4" />
<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.all_time))}</span>
</p>
</div>
<Separator className="my-4" />
<div>
<p>
<span className="font-bold">{"Today's Reward: "}</span>
<span>{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>
<Separator className="my-4" />
<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>
<Separator className="my-4" />
<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>
<Separator className="my-4" />
{guild && (
<>
<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" />
</>
)}
<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.TWITCH}
hypixel={player.socialMedia.links.HYPIXEL}
/>
</div>
</div>
</CardContent>
</Card>
)
}