Completed mini bw stats

src/app/(stats)/player/[ign]/_components/CollapsedStats.tsx

@@ -0,0 +1,23 @@
+import { ReactNode } from "react"
+
+type collapsedStatsProps = {
+    stats: {
+        title: ReactNode
+        stat: ReactNode
+    }[]
+}
+
+export default function CollapsedStats({ stats }: collapsedStatsProps) {
+    return (
+        <>
+            {stats.map((s, i) => {
+                return (
+                    <div key={i} className="text-center">
+                        {s.title}
+                        {s.stat}
+                    </div>
+                )
+            })}
+        </>
+    )
+}

src/app/(stats)/player/[ign]/_components/Multicolored.tsx

@@ -0,0 +1,23 @@
+export default function Multicolored({ val, color }: { val: string, color: string | string[] }) {
+    if (typeof color === "string") {
+        return (
+            <p className={color}>
+                {val}
+            </p>
+        )
+    }
+
+    const valArray = val.split("")
+
+    return (
+        <p>
+            {valArray.map((v, i) => {
+                return (
+                    <span key={i} className={color[i]}>
+                        {v}
+                    </span>
+                )
+            })}
+        </p>
+    )
+}

src/app/(stats)/player/[ign]/_components/stats/bedewars.tsx

@@ -2,12 +2,15 @@
 
 import { Card, CardContent } from "@/components/ui/card"
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
+import { getBedwarsStar } from "@/lib/hypixel/bedwars"
 import { getBWLevelForExp } from "@/lib/hypixel/bedwarsLevel"
 import { bedwarsLevelColors } from "@/lib/hypixelFormatters"
 import { Player } from "@/lib/schema/player"
-import { cn } from "@/lib/utils"
+import { Separator } from "@radix-ui/react-separator"
 import { ChevronDown, ChevronUp, Menu } from "lucide-react"
 import { useEffect, useRef, useState } from "react"
+import CollapsedStats from "../CollapsedStats"
+import Multicolored from "../Multicolored"
 
 export default function BedwarsStats({ stats }: { stats: Player["player"]["stats"]["Bedwars"] }) {
     const ref = useRef<HTMLDivElement>(null)
@@ -35,6 +38,11 @@ export default function BedwarsStats({ stats }: { stats: Player["player"]["stats
 
     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)
+
     return (
         <Card>
             <CardContent>
@@ -42,10 +50,34 @@ export default function BedwarsStats({ stats }: { stats: Player["player"]["stats
                     <div className="flex justify-between">
                         <h1 className="text-xl font-bold">Bedwars</h1>
                         <div className="flex gap-4">
-                            <div className="text-center">
-                                <p>Level</p>
-                                <BedwarsLevel xp={stats.Experience} />
-                            </div>
+                            <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">
@@ -55,7 +87,7 @@ export default function BedwarsStats({ stats }: { stats: Player["player"]["stats
                         </div>
                     </div>
                     <CollapsibleContent>
-                        <h1>{stats.Experience}</h1>
+                        <Separator className="my-4" />
                     </CollapsibleContent>
                 </Collapsible>
             </CardContent>
@@ -66,22 +98,8 @@ export default function BedwarsStats({ stats }: { stats: Player["player"]["stats
 function BedwarsLevel({ xp }: { xp: number }) {
     const level = getBWLevelForExp(xp)
     const color = bedwarsLevelColors(level)
+    const star = getBedwarsStar(level)
+    const val = `[${level}${star}]`
 
-    if (typeof color === "string") {
-        return (
-            <p className={cn(color, "font-bold")}>
-                {`[${level}⭐]`}
-            </p>
-        )
-    }
-
-    const levelArray = `[${level}⭐]`.split("")
-
-    return (
-        <p className="font-bold">
-            {levelArray.map((v, i) => {
-                return <span key={i} className={color[i]}>{v}</span>
-            })}
-        </p>
-    )
+    return <Multicolored val={val} color={color} />
 }