Updated bedwars progress

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

@@ -1,8 +1,12 @@
 import { cn } from "@/lib/utils"
+import { useEffect, useState } from "react"
+import { Tooltip } from "react-tooltip"
 
 type GenericProgressProps =
     & {
         percent: number
+        tooltipId: string
+        tooltipContent: string
     }
     & ({
         className: string
@@ -12,27 +16,72 @@ type GenericProgressProps =
         rainbow: true
     })
 
-export default function GenericProgress({ percent, className, rainbow }: GenericProgressProps) {
+export default function GenericProgress({ percent, tooltipId, tooltipContent, className, rainbow }: GenericProgressProps) {
+    const [pos, setPos] = useState({ x: 0, y: 0 })
+
+    useEffect(() => {
+        const controller = new AbortController()
+
+        window.addEventListener("mousemove", (e) => {
+            if (!(e.target instanceof HTMLDivElement)) return
+            if (e.target.dataset.id !== tooltipId) return
+
+            setPos({ x: e.clientX, y: e.clientY - 10 })
+        }, { signal: controller.signal })
+
+        return () => {
+            controller.abort()
+        }
+    })
+
     if (rainbow) {
         return (
             <>
                 <div
-                    className="h-5 rounded-l-md"
-                    style={{
-                        width: `${percent}%`,
-                        background: "repeating-linear-gradient(to right,#f55,#fa0,#ff5,#5f5,#5ff,#f5f,#a0a,#f55 16rem)"
-                    }}
+                    data-tooltip-id={tooltipId}
+                    data-tooltip-content={tooltipContent}
+                    className="flex flex-1"
                 >
+                    <div
+                        data-id={tooltipId}
+                        className="h-5 rounded-l-md"
+                        style={{
+                            width: `${percent}%`,
+                            background: "repeating-linear-gradient(to right,#f55,#fa0,#ff5,#5f5,#5ff,#f5f,#a0a,#f55 16rem)"
+                        }}
+                    >
+                    </div>
+                    <div
+                        data-id={tooltipId}
+                        className={cn("flex-1 h-5 rounded-r-md bg-background", percent === 0 ? "rounded-l-md" : undefined)}
+                    >
+                    </div>
                 </div>
-                <div className={cn("flex-1 h-5 rounded-r-md bg-background", percent === 0 ? "rounded-l-md" : undefined)}></div>
+                <Tooltip id={tooltipId} position={pos} />
             </>
         )
     }
 
     return (
         <>
-            <div className={cn("h-5 rounded-l-md", className)} style={{ width: `${percent}%` }}></div>
-            <div className={cn("flex-1 h-5 rounded-r-md bg-background", percent === 0 ? "rounded-l-md" : undefined)}></div>
+            <div
+                data-tooltip-id={tooltipId}
+                data-tooltip-content={tooltipContent}
+                className="flex flex-1"
+            >
+                <div
+                    data-id={tooltipId}
+                    className={cn("h-5 rounded-l-md", className)}
+                    style={{ width: `${percent}%` }}
+                >
+                </div>
+                <div
+                    data-id={tooltipId}
+                    className={cn("flex-1 h-5 rounded-r-md bg-background", percent === 0 ? "rounded-l-md" : undefined)}
+                >
+                </div>
+            </div>
+            <Tooltip id={tooltipId} position={pos} />
         </>
     )
 }

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

@@ -45,11 +45,12 @@ export default function BedwarsStats({ stats }: { stats: NonNullStats["Bedwars"]
     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)
-    )
+    const current = getTotalExpForLevel(level)
+    const next = getTotalExpForLevel(level + 1)
+    const percent = getProgress(current, stats.Experience, next)
+
+    const xpProgress = stats.Experience - current
+    const ceilingXp = next - current
 
     return (
         <Card>
@@ -93,7 +94,7 @@ export default function BedwarsStats({ stats }: { stats: NonNullStats["Bedwars"]
                     </div>
                     <CollapsibleContent>
                         <Separator className="my-4" />
-                        <BedwarsProgress level={level} percent={percent} />
+                        <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} />

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

@@ -1,3 +1,4 @@
+import { formatNumber } from "@/lib/formatters"
 import { bedwarsLevelColors, getBedwarsStar, getPrestigeName, getTextColor } from "@/lib/hypixel/bedwars/bedwars"
 import { getBWLevelForExp } from "@/lib/hypixel/bedwars/level"
 import { cn } from "@/lib/utils"
@@ -13,11 +14,16 @@ export function BedwarsLevel({ xp }: { xp: number }) {
     return <Multicolored val={val} color={color} />
 }
 
-export function BedwarsProgress({ level, percent }: { level: number, percent: number }) {
+export function BedwarsProgress({ level, percent, currentXp, ceilingXp }: { level: number, percent: number, currentXp: number, ceilingXp: number }) {
     return (
         <div className="flex items-center mb-10">
             <LevelNumber level={level} className="mr-2" />
-            <Progress level={level} percent={percent} />
+            <Progress
+                level={level}
+                percent={percent}
+                tooltipId="bedwars-progress"
+                tooltipContent={`${formatNumber(currentXp)}/${formatNumber(ceilingXp)} XP`}
+            />
             <LevelNumber level={level + 1} className="ml-2" />
         </div>
     )
@@ -48,7 +54,7 @@ export function BedWarsPrestige({ level }: { level: number }) {
 function LevelNumber({ level, className }: { level: number, className?: string }) {
     if (level >= 1000 && level < 1100) {
         return (
-            <div
+            <p
                 className={className}
                 style={{
                     backgroundImage: "linear-gradient(to left,#a0a,#f5f,#5ff,#5f5,#ff5,#fa0,#f55)",
@@ -57,17 +63,17 @@ function LevelNumber({ level, className }: { level: number, className?: string }
                 }}
             >
                 {level}
-            </div>
+            </p>
         )
     }
 
-    return <div className={cn(`text-mc-${getTextColor(level)}`, className)}>{level}</div>
+    return <p className={cn(`text-mc-${getTextColor(level)}`, className)}>{level}</p>
 }
 
-function Progress({ level, percent }: { level: number, percent: number }) {
+function Progress({ level, percent, tooltipId, tooltipContent }: { level: number, percent: number, tooltipId: string, tooltipContent: string }) {
     if (level >= 1000 && level < 1100) {
-        return <GenericProgress percent={percent} rainbow={true} />
+        return <GenericProgress percent={percent} rainbow={true} tooltipId={tooltipId} tooltipContent={tooltipContent} />
     }
 
-    return <GenericProgress percent={percent} className={`bg-mc-${getTextColor(level)}`} />
+    return <GenericProgress percent={percent} className={`bg-mc-${getTextColor(level)}`} tooltipId={tooltipId} tooltipContent={tooltipContent} />
 }