projects/hypixel-stats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replaced collapsible with accordion

Browse Source
This commit is contained in:
Taken
2025-09-01 00:29:32 +02:00
parent 27dca3709c
commit 2306f619b2
7 changed files with 105 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
bun.lock
View File

@@ -4,6 +4,7 @@
"": {
"name": "stats-hypixel",
"dependencies": {
"@radix-ui/react-accordion": "^1.2.12",
"@radix-ui/react-collapsible": "^1.1.12",
"@radix-ui/react-separator": "^1.1.7",
"@radix-ui/react-slot": "^1.2.3",
@@ -197,12 +198,18 @@
"@radix-ui/primitive": ["@radix-ui/primitive@1.1.3", "", {}, "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg=="],
"@radix-ui/react-accordion": ["@radix-ui/react-accordion@1.2.12", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collapsible": "1.1.12", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA=="],
"@radix-ui/react-collapsible": ["@radix-ui/react-collapsible@1.1.12", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA=="],
"@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw=="],
"@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg=="],
"@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
"@radix-ui/react-direction": ["@radix-ui/react-direction@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw=="],
"@radix-ui/react-id": ["@radix-ui/react-id@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg=="],
"@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.5", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ=="],

1
package.json
View File

@@ -10,6 +10,7 @@
"fmt": "dprint fmt src/**/*.ts src/**/*.tsx"
},
"dependencies": {
"@radix-ui/react-accordion": "^1.2.12",
"@radix-ui/react-collapsible": "^1.1.12",
"@radix-ui/react-separator": "^1.1.7",
"@radix-ui/react-slot": "^1.2.3",

44
src/app/(stats)/player/[ign]/_stats/bedwars/bedwars.tsx
View File

@@ -1,42 +1,17 @@
"use client"
import { AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
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)
@@ -53,10 +28,10 @@ export default function BedwarsStats({ stats }: { stats: NonNullStats["Bedwars"]
const ceilingXp = next - current
return (
<Card>
<AccordionItem value="bedwars">
<Card className="py-0">
<CardContent>
<Collapsible ref={ref}>
<div className="flex justify-between">
<AccordionTrigger className="items-center hover:no-underline hover:cursor-pointer">
<h1 className="text-xl font-bold">BedWars</h1>
<div className="flex gap-4">
<CollapsedStats
@@ -88,19 +63,16 @@ export default function BedwarsStats({ stats }: { stats: NonNullStats["Bedwars"]
]}
/>
</div>
<CollapsibleTrigger className="transition-all">
{opened === false ? <ChevronDown /> : <ChevronUp />}
</CollapsibleTrigger>
</div>
<CollapsibleContent>
</AccordionTrigger>
<AccordionContent>
<Separator className="my-4" />
<BedwarsProgress level={level} percent={percent} currentXp={xpProgress} ceilingXp={ceilingXp} />
<BedwarsGeneralStats statsChecked={stats} level={level} percent={percent} bbl={bbl} kd={kd} fkd={fkd} wl={wl} />
<Separator className="my-4" />
<BedwarsStatTable stats={stats} />
</CollapsibleContent>
</Collapsible>
</AccordionContent>
</CardContent>
</Card>
</AccordionItem>
)
}

44
src/app/(stats)/player/[ign]/_stats/skywars/skywars.tsx
View File

@@ -1,14 +1,12 @@
"use client"
import { AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
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/skywars/level"
import { NonNullStats } from "@/lib/schema/player"
import { ChevronDown, ChevronUp } from "lucide-react"
import { useEffect, useRef, useState } from "react"
import CollapsedStats from "../../_components/CollapsedStats"
import { AngelOfDeath, ShardProgress, SkywarsHeads, SkywarsLevel, SkywarsProgress } from "./components"
import SkyWarsGeneralStats from "./stats"
@@ -17,29 +15,6 @@ import SkywarsStatTable from "./table"
export default function SkyWarsStats(
{ stats, achievements_skywars_opal_obsession }: { stats: NonNullStats["SkyWars"], achievements_skywars_opal_obsession: number }
) {
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)
@@ -61,10 +36,10 @@ export default function SkyWarsStats(
const shardProgress = getProgress(0, stats.shard, 20000)
return (
<Card>
<AccordionItem value="skywars">
<Card className="py-0">
<CardContent>
<Collapsible ref={ref}>
<div className="flex justify-between">
<AccordionTrigger className="items-center hover:no-underline hover:cursor-pointer">
<h1 className="text-xl font-bold">SkyWars</h1>
<div className="flex gap-4">
<CollapsedStats
@@ -88,11 +63,8 @@ export default function SkyWarsStats(
]}
/>
</div>
<CollapsibleTrigger className="transition-all">
{opened === false ? <ChevronDown /> : <ChevronUp />}
</CollapsibleTrigger>
</div>
<CollapsibleContent>
</AccordionTrigger>
<AccordionContent>
<Separator className="my-4" />
<SkywarsProgress level={Math.floor(level)} percent={levelProgress} currentXp={xpProgress} ceilingXp={ceilingXp} />
<SkyWarsGeneralStats statsChecked={stats} level={level} />
@@ -130,9 +102,9 @@ export default function SkyWarsStats(
})}
/>
</div>
</CollapsibleContent>
</Collapsible>
</AccordionContent>
</CardContent>
</Card>
</AccordionItem>
)
}

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

@@ -1,4 +1,5 @@
import DisplayName from "@/components/player/displayname"
import { Accordion } from "@/components/ui/accordion"
import { Card, CardContent } from "@/components/ui/card"
import { getGuild } from "@/lib/hypixel/api/guild"
import { getUuid } from "@/lib/hypixel/api/mojang"
@@ -83,12 +84,14 @@ async function SuspendedPage({ ign: pign }: { ign: string }) {
/>
{player.stats !== undefined ?
(
<div className="pb-4 space-y-4 w-3/4">
<div className="pb-4 w-3/4">
<Accordion type="multiple" className="space-y-4">
<BedwarsStats stats={player.stats.Bedwars} />
<SkyWarsStats
stats={player.stats.SkyWars}
achievements_skywars_opal_obsession={player.achievements?.["skywars_opal_obsession"] ?? 0}
/>
</Accordion>
</div>
) :
(

66
src/components/ui/accordion.tsx Normal file
View File

@@ -0,0 +1,66 @@
"use client"
import * as AccordionPrimitive from "@radix-ui/react-accordion"
import { ChevronDownIcon } from "lucide-react"
import * as React from "react"
import { cn } from "@/lib/utils"
function Accordion({
...props
}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
return <AccordionPrimitive.Root data-slot="accordion" {...props} />
}
function AccordionItem({
className,
...props
}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
return (
<AccordionPrimitive.Item
data-slot="accordion-item"
className={cn("border-b last:border-b-0", className)}
{...props}
/>
)
}
function AccordionTrigger({
className,
children,
...props
}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
return (
<AccordionPrimitive.Header className="flex">
<AccordionPrimitive.Trigger
data-slot="accordion-trigger"
className={cn(
"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
className
)}
{...props}
>
{children}
<ChevronDownIcon className="transition-transform duration-200 translate-y-0.5 pointer-events-none text-muted-foreground size-4 shrink-0" />
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
)
}
function AccordionContent({
className,
children,
...props
}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
return (
<AccordionPrimitive.Content
data-slot="accordion-content"
className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
{...props}
>
<div className={cn("pt-0 pb-4", className)}>{children}</div>
</AccordionPrimitive.Content>
)
}
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger }

33
src/components/ui/collapsible.tsx
View File

@@ -1,33 +0,0 @@
"use client"
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
function Collapsible({
...props
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
}
function CollapsibleTrigger({
...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
return (
<CollapsiblePrimitive.CollapsibleTrigger
data-slot="collapsible-trigger"
{...props}
/>
)
}
function CollapsibleContent({
...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
return (
<CollapsiblePrimitive.CollapsibleContent
data-slot="collapsible-content"
{...props}
/>
)
}
export { Collapsible, CollapsibleContent, CollapsibleTrigger }