Updated site

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

@@ -2,9 +2,57 @@
 
 import { getHeads } from "@/lib/hypixel/skywars/skywars"
 import { cn } from "@/lib/utils"
+import Image from "next/image"
+import Link from "next/link"
 import { useEffect, useState } from "react"
 import { Tooltip } from "react-tooltip"
 
+export function PresigeousHeads({ heads }: { heads: { name: string | null, timestamp: number, sacrifice: string }[] }) {
+    const [pos, setPos] = useState({ x: 0, y: 0 })
+
+    useEffect(() => {
+        const controller = new AbortController()
+
+        window.addEventListener("mousemove", (e) => {
+            if (!(e.target instanceof HTMLImageElement)) return
+            if (e.target.dataset.id !== "presigeous-heads") return
+
+            setPos({ x: e.clientX, y: e.clientY - 10 })
+        }, { signal: controller.signal })
+
+        return () => {
+            controller.abort()
+        }
+    })
+
+    return (
+        <div className="flex flex-wrap gap-2">
+            {heads.map(({ name, sacrifice }, index) => {
+                if (!name) {
+                    return null
+                }
+
+                const text = sacrifice.at(0) + sacrifice.split("").slice(1, sacrifice.length).join("").toLowerCase()
+
+                return (
+                    <Link href={`/player/${name}`} key={index}>
+                        <Image
+                            data-id="presigeous-heads"
+                            data-tooltip-id="presigeous-heads"
+                            data-tooltip-content={text}
+                            src={`https://minotar.net/helm/${name}/24.png`}
+                            width={24}
+                            height={24}
+                            alt={name}
+                        />
+                    </Link>
+                )
+            })}
+            <Tooltip id="presigeous-heads" position={pos} />
+        </div>
+    )
+}
+
 export function HeadsBar({ heads, heads_total }: { heads: [string, number][], heads_total: number }) {
     const [pos, setPos] = useState({ x: 0, y: 0 })
 
@@ -25,7 +73,7 @@ export function HeadsBar({ heads, heads_total }: { heads: [string, number][], he
 
     return (
         <>
-            <div className="flex mt-2">
+            <div className="flex mt-2 mb-4">
                 {heads.map(([key, total], index) => {
                     const head = getHeads(key)
                     const percent = heads_total === 0 ? 0 : total / heads_total

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

@@ -3,7 +3,7 @@ import { getSkywarsLevel } from "@/lib/hypixel/skywars/level"
 import { getPrestigeName, getSkyWarsIcon, getTextColor } from "@/lib/hypixel/skywars/skywars"
 import { cn } from "@/lib/utils"
 import GenericProgress from "../../_components/GenericProgress"
-import { HeadsBar } from "./client"
+import { HeadsBar, PresigeousHeads } from "./client"
 
 type SkywarsHeadsProps = {
     heads: number
@@ -19,11 +19,13 @@ type SkywarsHeadsProps = {
         divine: number
         heavenly: number
     }
+    prestigeous: { name: string | null, timestamp: number, sacrifice: string }[]
 }
 
 export function SkywarsHeads({
     heads,
-    heads_special
+    heads_special,
+    prestigeous
 }: SkywarsHeadsProps) {
     const total_special = Object.values(heads_special).reduce((a, b) => a + b)
     const percentages = {
@@ -49,6 +51,8 @@ export function SkywarsHeads({
                 <span className="text-mc-gray">{formatNumber(heads)}</span>
             </p>
             {total_special > 0 && <HeadsBar heads={headsArray} heads_total={heads} />}
+            <p className="font-bold">Prestigious Head Collection</p>
+            <PresigeousHeads heads={prestigeous} />
         </div>
     )
 }

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

@@ -121,6 +121,13 @@ export default function SkyWarsStats(
                                     tasty: stats.heads_tasty,
                                     yucky: stats.heads_yucky
                                 }}
+                                prestigeous={stats.head_collection === undefined ? [] : stats.head_collection.prestigious.map(v => {
+                                    return {
+                                        name: v.username,
+                                        timestamp: v.timestamp,
+                                        sacrifice: v.sacrifice
+                                    }
+                                })}
                             />
                         </div>
                     </CollapsibleContent>

src/app/layout.tsx

@@ -1,3 +1,5 @@
+import { ReactScan } from "@/components/ReactScan"
+
 import { ReactNode } from "react"
 import "./globals.css"
 import ThemeProvider from "@/components/ThemeProvider"
@@ -6,6 +8,7 @@ import { Toaster } from "@/components/ui/sonner"
 export default function RootLayout({ children }: Readonly<{ children: ReactNode }>) {
     return (
         <html lang="en" suppressHydrationWarning>
+            {process.env.NODE_ENV === "development" && <ReactScan />}
             <body className="antialiased">
                 <ThemeProvider>
                     {children}