Added heads bar

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

@@ -1,14 +1,84 @@
 import { formatNumber } from "@/lib/formatters"
-import { getPrestigeName, getSkyWarsIcon, getTextColor } from "@/lib/hypixel/skywars"
+import { getHeadsColor, getPrestigeName, getSkyWarsIcon, getTextColor } from "@/lib/hypixel/skywars"
 import { getSkywarsLevel } from "@/lib/hypixel/skyWarsLevel"
 import { cn } from "@/lib/utils"
 import GenericProgress from "../../_components/GenericProgress"
 
+type SkywarsHeadsProps = {
+    heads: number
+    heads_special: {
+        eww: number
+        yucky: number
+        meh: number
+        decent: number
+        salty: number
+        tasty: number
+        succulent: number
+        sweet: number
+        divine: number
+        heavenly: number
+    }
+}
+
+export function SkywarsHeads({
+    heads,
+    heads_special
+}: 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
+    }
+
+    const headsArray = Object.entries(percentages)
+
+    return (
+        <div>
+            <p>
+                <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>
+            )}
+        </div>
+    )
+}
+
 export function AngelOfDeath(
     { shards, lifetime_shards, opals, lifetime_opals }: { shards: number, lifetime_shards: number, opals: number, lifetime_opals: number }
 ) {
     return (
-        <div className="grid grid-cols-2 grid-rows-2 mt-5">
+        <div className="grid grid-cols-2 grid-rows-2">
             <p>
                 <span className="font-bold">{"Shards: "}</span>
                 <span className="text-mc-aqua">{shards}</span>
@@ -32,7 +102,7 @@ export function AngelOfDeath(
 export function ShardProgress({ percent }: { percent: number }) {
     return (
         <div>
-            <h1 className="mb-2 font-bold">Shard Progress</h1>
+            <h1 className="font-bold">Shard Progress</h1>
             <div className="flex">
                 <GenericProgress percent={percent} className="bg-mc-aqua" />
             </div>

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

@@ -10,7 +10,7 @@ import { NonNullStats } from "@/lib/schema/player"
 import { ChevronDown, ChevronUp } from "lucide-react"
 import { useEffect, useRef, useState } from "react"
 import CollapsedStats from "../../_components/CollapsedStats"
-import { AngelOfDeath, ShardProgress, SkywarsLevel, SkywarsProgress } from "./components"
+import { AngelOfDeath, ShardProgress, SkywarsHeads, SkywarsLevel, SkywarsProgress } from "./components"
 import SkyWarsGeneralStats from "./stats"
 import SkywarsStatTable from "./table"
 
@@ -93,13 +93,30 @@ export default function SkyWarsStats(
                         <Separator className="my-4" />
                         <SkywarsStatTable stats={stats} />
                         <Separator className="my-4" />
-                        <ShardProgress percent={shardProgress} />
-                        <AngelOfDeath
-                            shards={stats.shard}
-                            lifetime_shards={achievements_skywars_opal_obsession * 20000 + stats.shard}
-                            opals={stats.opals}
-                            lifetime_opals={achievements_skywars_opal_obsession}
-                        />
+                        <div className="space-y-2">
+                            <ShardProgress percent={shardProgress} />
+                            <AngelOfDeath
+                                shards={stats.shard}
+                                lifetime_shards={achievements_skywars_opal_obsession * 20000 + stats.shard}
+                                opals={stats.opals}
+                                lifetime_opals={achievements_skywars_opal_obsession}
+                            />
+                            <SkywarsHeads
+                                heads={stats.heads}
+                                heads_special={{
+                                    heavenly: stats.heads_heavenly,
+                                    divine: stats.heads_divine,
+                                    decent: stats.heads_decent,
+                                    eww: stats.heads_eww,
+                                    meh: stats.heads_meh,
+                                    salty: stats.heads_salty,
+                                    succulent: stats.heads_succulent,
+                                    sweet: stats.heads_sweet,
+                                    tasty: stats.heads_tasty,
+                                    yucky: stats.heads_yucky
+                                }}
+                            />
+                        </div>
                     </CollapsibleContent>
                 </Collapsible>
             </CardContent>