Updated bedears stats

src/app/(stats)/player/[ign]/_stats/bedwars/bedwars-components.tsx

@@ -0,0 +1,24 @@
+import { getBedwarsStar, getTextColor } from "@/lib/hypixel/bedwars"
+import { getBWLevelForExp } from "@/lib/hypixel/bedwarsLevel"
+import { bedwarsLevelColors } from "@/lib/hypixelFormatters"
+import Multicolored from "../../_components/Multicolored"
+
+export function BedwarsLevel({ xp }: { xp: number }) {
+    const level = getBWLevelForExp(xp)
+    const color = bedwarsLevelColors(level)
+    const star = getBedwarsStar(level)
+    const val = `[${level}${star}]`
+
+    return <Multicolored val={val} color={color} />
+}
+
+export function BedwarsProgress({ level, percent }: { level: number, percent: number }) {
+    return (
+        <div className="flex items-center mb-10">
+            <div className={`mr-2 text-mc-${getTextColor(level)}`}>{level}</div>
+            <div className={`h-5 bg-mc-${getTextColor(level)} rounded-l-md`} style={{ width: `${percent}%` }}></div>
+            <div className="flex-1 h-5 rounded-r-md bg-background"></div>
+            <div className={`ml-2 text-mc-${getTextColor(level)}`}>{level + 1}</div>
+        </div>
+    )
+}

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

@@ -2,15 +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 { getBedwarsStar, getPrestigeName, getTextColor } from "@/lib/hypixel/bedwars"
+import { getBWLevelForExp, getTotalExpForLevel } from "@/lib/hypixel/bedwarsLevel"
+import { getProgress } from "@/lib/hypixel/general"
 import { Player } from "@/lib/schema/player"
 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"
+import CollapsedStats from "../../_components/CollapsedStats"
+import { BedwarsLevel, BedwarsProgress } from "./bedwars-components"
 
 export default function BedwarsStats({ stats }: { stats: Player["player"]["stats"]["Bedwars"] }) {
     const ref = useRef<HTMLDivElement>(null)
@@ -42,6 +42,13 @@ export default function BedwarsStats({ stats }: { stats: Player["player"]["stats
     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>
@@ -88,18 +95,32 @@ export default function BedwarsStats({ stats }: { stats: Player["player"]["stats
                     </div>
                     <CollapsibleContent>
                         <Separator className="my-4" />
+                        <BedwarsProgress level={level} percent={percent} />
+                        <div>
+                            <div>
+                                <div>
+                                    <p>
+                                        <span className="font-bold">{"Level: "}</span>
+                                        <span>{`${level}.${percent.toFixed(0)}`}</span>
+                                    </p>
+                                    <p>
+                                        <span className="font-bold">{"Prestige: "}</span>
+                                        <span className={`text-mc-${getTextColor(level)}`}>
+                                            {`${getPrestigeName(level)} ${getBedwarsStar(level)}`}
+                                        </span>
+                                    </p>
+                                    <p>
+                                        <span className="font-bold">{"Tokens: "}</span>
+                                        <span className="text-mc-dark-green">{}</span>
+                                    </p>
+                                </div>
+                            </div>
+                            <div></div>
+                            <div></div>
+                        </div>
                     </CollapsibleContent>
                 </Collapsible>
             </CardContent>
         </Card>
     )
 }
-
-function BedwarsLevel({ xp }: { xp: number }) {
-    const level = getBWLevelForExp(xp)
-    const color = bedwarsLevelColors(level)
-    const star = getBedwarsStar(level)
-    const val = `[${level}${star}]`
-
-    return <Multicolored val={val} color={color} />
-}

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

@@ -4,7 +4,7 @@ import { getUuid } from "@/lib/hypixel/api/mojang"
 import { getPlayer } from "@/lib/hypixel/api/player"
 import { getExactLevel } from "@/lib/hypixel/level"
 import Sidebar from "./_components/Sidebar"
-import BedwarsStats from "./_components/stats/bedewars"
+import BedwarsStats from "./_stats/bedwars/bedwars"
 
 export default async function PlayerPage({
     params