Added first skywars stats

2025-08-22 13:16:08 +02:00
parent 85be250836
commit 4dd571c367
9 changed files with 300 additions and 3 deletions
--- a/src/app/(stats)/player/[ign]/_stats/skywars/skywars.tsx
+++ b/src/app/(stats)/player/[ign]/_stats/skywars/skywars.tsx
@@ -0,0 +1,81 @@
+"use client"
+
+import { Card, CardContent } from "@/components/ui/card"
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
+import { Separator } from "@/components/ui/separator"
+import { formatNumber } from "@/lib/formatters"
+import { Player } from "@/lib/schema/player"
+import { ChevronDown, ChevronUp } from "lucide-react"
+import { useEffect, useRef, useState } from "react"
+import CollapsedStats from "../../_components/CollapsedStats"
+import { SkywarsLevel } from "./skywars-components"
+
+export default function SkyWarsStats({ stats }: { stats: Player["player"]["stats"]["SkyWars"] }) {
+    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 / stats.deaths).toFixed(2)
+    const wl = (stats.wins / stats.losses).toFixed(2)
+
+    return (
+        <Card>
+            <CardContent>
+                <Collapsible ref={ref}>
+                    <div className="flex justify-between">
+                        <h1 className="text-xl font-bold">SkyWars</h1>
+                        <div className="flex gap-4">
+                            <CollapsedStats
+                                stats={[
+                                    {
+                                        title: <p>Level</p>,
+                                        stat: <SkywarsLevel xp={stats.skywars_experience} icon={stats.selected_prestige_icon} />
+                                    },
+                                    {
+                                        title: <p>KD</p>,
+                                        stat: <p>{kd}</p>
+                                    },
+                                    {
+                                        title: <p>Wins</p>,
+                                        stat: <p>{formatNumber(stats.wins)}</p>
+                                    },
+                                    {
+                                        title: <p>WL</p>,
+                                        stat: <p>{wl}</p>
+                                    }
+                                ]}
+                            />
+                        </div>
+                        <CollapsibleTrigger className="transition-all">
+                            {opened === false ? <ChevronDown /> : <ChevronUp />}
+                        </CollapsibleTrigger>
+                    </div>
+                    <CollapsibleContent>
+                        <Separator className="my-4" />
+                    </CollapsibleContent>
+                </Collapsible>
+            </CardContent>
+        </Card>
+    )
+}