Added first stat on bedwars

src/app/(stats)/player/[ign]/_components/Sidebar.tsx

@@ -38,7 +38,9 @@ export default function Sidebar({ level, ign, player, guild }: SidebarProps) {
                     </p>
                     <p>
                         <span className="font-bold">{"Total coins: "}</span>
-                        <span className="text-mc-gold">{formatNumber(getTotalCoins(player.stats))}</span>
+                        <span className="text-mc-gold">
+                            {formatNumber(getTotalCoins(player.stats as Record<string, Record<"coins", number | undefined>>))}
+                        </span>
                     </p>
                 </div>
                 <Separator className="my-4" />

src/app/(stats)/player/[ign]/_components/stats/bedewars.tsx

@@ -0,0 +1,87 @@
+"use client"
+
+import { Card, CardContent } from "@/components/ui/card"
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
+import { getBWLevelForExp } from "@/lib/hypixel/bedwarsLevel"
+import { bedwarsLevelColors } from "@/lib/hypixelFormatters"
+import { Player } from "@/lib/schema/player"
+import { cn } from "@/lib/utils"
+import { ChevronDown, ChevronUp, Menu } from "lucide-react"
+import { useEffect, useRef, useState } from "react"
+
+export default function BedwarsStats({ stats }: { stats: Player["player"]["stats"]["Bedwars"] }) {
+    const ref = useRef<HTMLDivElement>(null)
+    const [opened, setOpened] = useState(false)
+
+    useEffect(() => {
+        if (!ref.current) return
+
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === "attributes" && mutation.attributeName === "data-state") {
+                    const dataState = ref.current?.getAttribute("data-state")
+                    setOpened(dataState === "open")
+                }
+            })
+        })
+
+        observer.observe(ref.current, {
+            attributes: true,
+            attributeFilter: ["data-state"]
+        })
+
+        return () => observer.disconnect()
+    }, [])
+
+    if (!stats) return null
+
+    return (
+        <Card>
+            <CardContent>
+                <Collapsible ref={ref}>
+                    <div className="flex justify-between">
+                        <h1 className="text-xl font-bold">Bedwars</h1>
+                        <div className="flex gap-4">
+                            <div className="text-center">
+                                <p>Level</p>
+                                <BedwarsLevel xp={stats.Experience} />
+                            </div>
+                        </div>
+                        <div className="flex gap-2 items-center">
+                            <CollapsibleTrigger className="transition-all">
+                                {opened === false ? <ChevronDown /> : <ChevronUp />}
+                            </CollapsibleTrigger>
+                            <Menu />
+                        </div>
+                    </div>
+                    <CollapsibleContent>
+                        <h1>{stats.Experience}</h1>
+                    </CollapsibleContent>
+                </Collapsible>
+            </CardContent>
+        </Card>
+    )
+}
+
+function BedwarsLevel({ xp }: { xp: number }) {
+    const level = getBWLevelForExp(xp)
+    const color = bedwarsLevelColors(level)
+
+    if (typeof color === "string") {
+        return (
+            <p className={cn(color, "font-bold")}>
+                {`[${level}⭐]`}
+            </p>
+        )
+    }
+
+    const levelArray = `[${level}⭐]`.split("")
+
+    return (
+        <p className="font-bold">
+            {levelArray.map((v, i) => {
+                return <span key={i} className={color[i]}>{v}</span>
+            })}
+        </p>
+    )
+}

src/app/(stats)/player/[ign]/page.tsx

@@ -4,6 +4,7 @@ import { getUuid } from "@/lib/hypixel/api/mojang"
 import { getPlayer } from "@/lib/hypixel/api/player"
 import { getExactLevel } from "@/lib/hypixel/level"
 import Sidebar from "./_components/Sidebar"
+import BedwarsStats from "./_components/stats/bedewars"
 
 export default async function PlayerPage({
     params
@@ -53,9 +54,8 @@ export default async function PlayerPage({
             </h1>
             <div className="flex gap-6 px-6 mt-8 w-full max-w-7xl">
                 <Sidebar level={level} ign={pign} player={player} guild={guild ?? undefined} />
-                <div className="p-6 w-3/4 rounded-xl border shadow-sm bg-card">
-                    <h2 className="mb-4 text-xl font-semibold">Game Statistics</h2>
-                    <p>Game stats will be displayed here...</p>
+                <div className="w-3/4">
+                    <BedwarsStats stats={player.stats.Bedwars} />
                 </div>
             </div>
         </div>