Added tooltip to heads

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

@@ -0,0 +1,56 @@
+"use client"
+
+import { getHeads } from "@/lib/hypixel/skywars/skywars"
+import { cn } from "@/lib/utils"
+import { useEffect, useState } from "react"
+import { Tooltip } from "react-tooltip"
+
+export function HeadsBar({ heads, heads_total }: { heads: [string, number][], heads_total: number }) {
+    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 !== "heads-bar") return
+
+            setPos({ x: e.clientX, y: e.clientY - 10 })
+        }, { signal: controller.signal })
+
+        return () => {
+            controller.abort()
+        }
+    })
+
+    return (
+        <>
+            <div className="flex mt-2">
+                {heads.map(([key, total], index) => {
+                    const head = getHeads(key)
+                    const percent = heads_total === 0 ? 0 : total / heads_total
+
+                    return (
+                        <div
+                            data-id="heads-bar"
+                            data-tooltip-id="heads-bar"
+                            data-tooltip-content={`${total} ${head === null ? "Undefined" : head.name} heads`}
+                            key={key}
+                            className={cn(
+                                "h-5",
+                                head === null ? "bg-background" : `bg-mc-${head.color}`,
+                                index === 0 ? "rounded-l-md" : undefined,
+                                index === heads.length - 1 ? "rounded-r-md" : undefined
+                            )}
+                            style={{
+                                width: `${percent * 100}%`
+                            }}
+                        >
+                        </div>
+                    )
+                })}
+            </div>
+            <Tooltip id="heads-bar" position={pos} />
+        </>
+    )
+}

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

@@ -1,8 +1,9 @@
 import { formatNumber } from "@/lib/formatters"
 import { getSkywarsLevel } from "@/lib/hypixel/skywars/level"
-import { getHeadsColor, getPrestigeName, getSkyWarsIcon, getTextColor } from "@/lib/hypixel/skywars/skywars"
+import { getPrestigeName, getSkyWarsIcon, getTextColor } from "@/lib/hypixel/skywars/skywars"
 import { cn } from "@/lib/utils"
 import GenericProgress from "../../_components/GenericProgress"
+import { HeadsBar } from "./client"
 
 type SkywarsHeadsProps = {
     heads: number
@@ -26,17 +27,17 @@ export function SkywarsHeads({
 }: SkywarsHeadsProps) {
     const total_special = Object.values(heads_special).reduce((a, b) => a + b)
     const percentages = {
-        heavenly: heads_special.heavenly / heads,
-        divine: heads_special.divine / heads,
-        sweet: heads_special.sweet / heads,
-        succulent: heads_special.succulent / heads,
-        tasty: heads_special.tasty / heads,
-        salty: heads_special.salty / heads,
-        decent: heads_special.decent / heads,
-        meh: heads_special.meh / heads,
-        yucky: heads_special.yucky / heads,
-        eww: heads_special.eww / heads,
-        rest: (heads - total_special) / heads
+        heavenly: heads_special.heavenly,
+        divine: heads_special.divine,
+        sweet: heads_special.sweet,
+        succulent: heads_special.succulent,
+        tasty: heads_special.tasty,
+        salty: heads_special.salty,
+        decent: heads_special.decent,
+        meh: heads_special.meh,
+        yucky: heads_special.yucky,
+        eww: heads_special.eww,
+        rest: (heads - total_special)
     }
 
     const headsArray = Object.entries(percentages)
@@ -47,29 +48,7 @@ export function SkywarsHeads({
                 <span className="font-bold">{"Total Heads Gathered: "}</span>
                 <span className="text-mc-gray">{formatNumber(heads)}</span>
             </p>
-            {total_special > 0 && (
-                <div className="flex mt-2">
-                    {headsArray.map(([key, val], index) => {
-                        const color = getHeadsColor(key)
-
-                        return (
-                            <div
-                                key={key}
-                                className={cn(
-                                    "h-5",
-                                    color === null ? "bg-background" : `bg-mc-${color}`,
-                                    index === 0 ? "rounded-l-md" : undefined,
-                                    index === headsArray.length - 1 ? "rounded-r-md" : undefined
-                                )}
-                                style={{
-                                    width: `${val * 100}%`
-                                }}
-                            >
-                            </div>
-                        )
-                    })}
-                </div>
-            )}
+            {total_special > 0 && <HeadsBar heads={headsArray} heads_total={heads} />}
         </div>
     )
 }
@@ -99,12 +78,12 @@ export function AngelOfDeath(
     )
 }
 
-export function ShardProgress({ percent }: { percent: number }) {
+export function ShardProgress({ percent, shards }: { percent: number, shards: number }) {
     return (
         <div>
             <h1 className="font-bold">Shard Progress</h1>
             <div className="flex">
-                <GenericProgress percent={percent} className="bg-mc-aqua" />
+                <GenericProgress percent={percent} className="bg-mc-aqua" tooltipId="shards-progress" tooltipContent={`${shards}/20000 Shards`} />
             </div>
         </div>
     )

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

@@ -100,7 +100,7 @@ export default function SkyWarsStats(
                         <SkywarsStatTable stats={stats} />
                         <Separator className="my-4" />
                         <div className="space-y-2">
-                            <ShardProgress percent={shardProgress} />
+                            <ShardProgress percent={shardProgress} shards={stats.shard} />
                             <AngelOfDeath
                                 shards={stats.shard}
                                 lifetime_shards={achievements_skywars_opal_obsession * 20000 + stats.shard}