Updated bedears stats

2025-08-19 19:39:36 +02:00
parent ecc0098fb8
commit f8a54dc4b6
13 changed files with 276 additions and 187 deletions
--- a/src/app/(stats)/player/[ign]/_stats/bedwars/bedwars.tsx
+++ b/src/app/(stats)/player/[ign]/_stats/bedwars/bedwars.tsx
@@ -0,0 +1,126 @@
+"use client"
+
+import { Card, CardContent } from "@/components/ui/card"
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
+import { getBedwarsStar, getPrestigeName, getTextColor } from "@/lib/hypixel/bedwars"
+import { getBWLevelForExp, getTotalExpForLevel } from "@/lib/hypixel/bedwarsLevel"
+import { getProgress } from "@/lib/hypixel/general"
+import { Player } from "@/lib/schema/player"
+import { Separator } from "@radix-ui/react-separator"
+import { ChevronDown, ChevronUp, Menu } from "lucide-react"
+import { useEffect, useRef, useState } from "react"
+import CollapsedStats from "../../_components/CollapsedStats"
+import { BedwarsLevel, BedwarsProgress } from "./bedwars-components"
+
+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
+
+    const kd = (stats.kills_bedwars / stats.deaths_bedwars).toFixed(2)
+    const fkd = (stats.final_kills_bedwars / stats.final_deaths_bedwars).toFixed(2)
+    const wl = (stats.wins_bedwars / stats.losses_bedwars).toFixed(2)
+    const bbl = (stats.beds_broken_bedwars / stats.beds_lost_bedwars).toFixed(2)
+    const level = getBWLevelForExp(stats.Experience)
+
+    const percent = getProgress(
+        getTotalExpForLevel(level),
+        stats.Experience,
+        getTotalExpForLevel(level + 1)
+    )
+
+    return (
+        <Card>
+            <CardContent>
+                <Collapsible ref={ref}>
+                    <div className="flex justify-between">
+                        <h1 className="text-xl font-bold">Bedwars</h1>
+                        <div className="flex gap-4">
+                            <CollapsedStats
+                                stats={[
+                                    {
+                                        title: <p>Level</p>,
+                                        stat: <BedwarsLevel xp={stats.Experience} />
+                                    },
+                                    {
+                                        title: <p>WS</p>,
+                                        stat: <p>{stats.winstreak ?? "?"}</p>
+                                    },
+                                    {
+                                        title: <p>KD</p>,
+                                        stat: <p>{kd}</p>
+                                    },
+                                    {
+                                        title: <p>FKD</p>,
+                                        stat: <p>{fkd}</p>
+                                    },
+                                    {
+                                        title: <p>WL</p>,
+                                        stat: <p>{wl}</p>
+                                    },
+                                    {
+                                        title: <p>BBL</p>,
+                                        stat: <p>{bbl}</p>
+                                    }
+                                ]}
+                            />
+                        </div>
+                        <div className="flex gap-2 items-center">
+                            <CollapsibleTrigger className="transition-all">
+                                {opened === false ? <ChevronDown /> : <ChevronUp />}
+                            </CollapsibleTrigger>
+                            <Menu />
+                        </div>
+                    </div>
+                    <CollapsibleContent>
+                        <Separator className="my-4" />
+                        <BedwarsProgress level={level} percent={percent} />
+                        <div>
+                            <div>
+                                <div>
+                                    <p>
+                                        <span className="font-bold">{"Level: "}</span>
+                                        <span>{`${level}.${percent.toFixed(0)}`}</span>
+                                    </p>
+                                    <p>
+                                        <span className="font-bold">{"Prestige: "}</span>
+                                        <span className={`text-mc-${getTextColor(level)}`}>
+                                            {`${getPrestigeName(level)} ${getBedwarsStar(level)}`}
+                                        </span>
+                                    </p>
+                                    <p>
+                                        <span className="font-bold">{"Tokens: "}</span>
+                                        <span className="text-mc-dark-green">{}</span>
+                                    </p>
+                                </div>
+                            </div>
+                            <div></div>
+                            <div></div>
+                        </div>
+                    </CollapsibleContent>
+                </Collapsible>
+            </CardContent>
+        </Card>
+    )
+}