98 lines
4.1 KiB
TypeScript
98 lines
4.1 KiB
TypeScript
"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 { getProgress } from "@/lib/hypixel/general"
|
|
import { getSkywarsLevel, getSkywarsXpForLevel } from "@/lib/hypixel/skyWarsLevel"
|
|
import { NonNullStats } from "@/lib/schema/player"
|
|
import { ChevronDown, ChevronUp } from "lucide-react"
|
|
import { useEffect, useRef, useState } from "react"
|
|
import CollapsedStats from "../../_components/CollapsedStats"
|
|
import { SkywarsLevel, SkywarsProgress } from "./components"
|
|
import SkyWarsGeneralStats from "./stats"
|
|
import SkywarsStatTable from "./table"
|
|
|
|
export default function SkyWarsStats({ stats }: { stats: NonNullStats["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 level = getSkywarsLevel(stats.skywars_experience)
|
|
const kd = (stats.kills / stats.deaths).toFixed(2)
|
|
const wl = (stats.wins / stats.losses).toFixed(2)
|
|
|
|
const percent = getProgress(
|
|
getSkywarsXpForLevel(Math.floor(level)),
|
|
stats.skywars_experience,
|
|
getSkywarsXpForLevel(Math.floor(level) + 1)
|
|
)
|
|
|
|
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 className="text-muted-foreground">{kd}</p>
|
|
},
|
|
{
|
|
title: <p>Wins</p>,
|
|
stat: <p className="text-muted-foreground">{formatNumber(stats.wins)}</p>
|
|
},
|
|
{
|
|
title: <p>WL</p>,
|
|
stat: <p className="text-muted-foreground">{wl}</p>
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
<CollapsibleTrigger className="transition-all">
|
|
{opened === false ? <ChevronDown /> : <ChevronUp />}
|
|
</CollapsibleTrigger>
|
|
</div>
|
|
<CollapsibleContent>
|
|
<Separator className="my-4" />
|
|
<SkywarsProgress level={Math.floor(level)} percent={percent} />
|
|
<SkyWarsGeneralStats statsChecked={stats} level={level} />
|
|
<Separator className="my-4" />
|
|
<SkywarsStatTable stats={stats} />
|
|
<Separator className="my-4" />
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|