101 lines
3.5 KiB
TypeScript
101 lines
3.5 KiB
TypeScript
"use client"
|
|
|
|
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: { username: string, 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(({ username, sacrifice }, index) => {
|
|
const text = sacrifice.at(0) + sacrifice.split("").slice(1, sacrifice.length).join("").toLowerCase()
|
|
|
|
return (
|
|
<Link href={`/player/${username}`} key={index}>
|
|
<Image
|
|
data-id="presigeous-heads"
|
|
data-tooltip-id="presigeous-heads"
|
|
data-tooltip-content={text}
|
|
src={`https://minotar.net/helm/${username}/24.png`}
|
|
width={24}
|
|
height={24}
|
|
alt={username}
|
|
/>
|
|
</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 })
|
|
|
|
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 mb-4">
|
|
{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} />
|
|
</>
|
|
)
|
|
}
|