106 lines
4.6 KiB
TypeScript
106 lines
4.6 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 { getBWLevelForExp, getTotalExpForLevel } from "@/lib/hypixel/bedwars/level"
|
|
import { getProgress } from "@/lib/hypixel/general"
|
|
import { NonNullStats } from "@/lib/schema/player"
|
|
import { ChevronDown, ChevronUp } from "lucide-react"
|
|
import { useEffect, useRef, useState } from "react"
|
|
import CollapsedStats from "../../_components/CollapsedStats"
|
|
import { BedwarsLevel, BedwarsProgress } from "./components"
|
|
import BedwarsGeneralStats from "./stats"
|
|
import BedwarsStatTable from "./table"
|
|
|
|
export default function BedwarsStats({ stats }: { stats: NonNullStats["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 className="text-muted-foreground">{stats.winstreak ?? "?"}</p>
|
|
},
|
|
{
|
|
title: <p>KD</p>,
|
|
stat: <p className="text-muted-foreground">{kd}</p>
|
|
},
|
|
{
|
|
title: <p>FKD</p>,
|
|
stat: <p className="text-muted-foreground">{fkd}</p>
|
|
},
|
|
{
|
|
title: <p>WL</p>,
|
|
stat: <p className="text-muted-foreground">{wl}</p>
|
|
},
|
|
{
|
|
title: <p>BBL</p>,
|
|
stat: <p className="text-muted-foreground">{bbl}</p>
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
<CollapsibleTrigger className="transition-all">
|
|
{opened === false ? <ChevronDown /> : <ChevronUp />}
|
|
</CollapsibleTrigger>
|
|
</div>
|
|
<CollapsibleContent>
|
|
<Separator className="my-4" />
|
|
<BedwarsProgress level={level} percent={percent} />
|
|
<BedwarsGeneralStats statsChecked={stats} level={level} percent={percent} bbl={bbl} kd={kd} fkd={fkd} wl={wl} />
|
|
<Separator className="my-4" />
|
|
<BedwarsStatTable stats={stats} />
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|