Added tooltip to progress

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

@@ -159,11 +159,16 @@ export function SkywarsLevel({ xp, icon }: { xp: number, icon: string | undefine
     )
 }
 
-export function SkywarsProgress({ level, percent }: { level: number, percent: number }) {
+export function SkywarsProgress({ 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="skywars-progress"
+                tooltipContent={`${formatNumber(currentXp)}/${formatNumber(ceilingXp)} XP`}
+            />
             <LevelNumber level={level + 1} className="ml-2" />
         </div>
     )
@@ -188,12 +193,12 @@ function LevelNumber({ level, className }: { level: number, className?: string }
     return <div className={cn(`text-mc-${getTextColor(level).text}`, className)}>{level}</div>
 }
 
-function Progress({ level, percent }: { level: number, percent: number }) {
+function Progress({ level, percent, tooltipId, tooltipContent }: { level: number, percent: number, tooltipId: string, tooltipContent: string }) {
     if (level > 150 || level === 50) {
-        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).text}`} />
+    return <GenericProgress percent={percent} className={`bg-mc-${getTextColor(level).text}`} tooltipId={tooltipId} tooltipContent={tooltipContent} />
 }
 
 export function SkywarsPrestige({ level, icon }: { level: number, icon?: string }) {

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

@@ -46,12 +46,18 @@ export default function SkyWarsStats(
     const kd = (stats.kills / stats.deaths).toFixed(2)
     const wl = (stats.wins / stats.losses).toFixed(2)
 
+    const current = getSkywarsXpForLevel(Math.floor(level))
+    const next = getSkywarsXpForLevel(Math.floor(level + 1))
+
     const levelProgress = getProgress(
-        getSkywarsXpForLevel(Math.floor(level)),
+        current,
         stats.skywars_experience,
-        getSkywarsXpForLevel(Math.floor(level) + 1)
+        next
     )
 
+    const xpProgress = stats.skywars_experience - current
+    const ceilingXp = next - current
+
     const shardProgress = getProgress(0, stats.shard, 20000)
 
     return (
@@ -88,7 +94,7 @@ export default function SkyWarsStats(
                     </div>
                     <CollapsibleContent>
                         <Separator className="my-4" />
-                        <SkywarsProgress level={Math.floor(level)} percent={levelProgress} />
+                        <SkywarsProgress level={Math.floor(level)} percent={levelProgress} currentXp={xpProgress} ceilingXp={ceilingXp} />
                         <SkyWarsGeneralStats statsChecked={stats} level={level} />
                         <Separator className="my-4" />
                         <SkywarsStatTable stats={stats} />