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

import { formatNumber } from "@/lib/formatters"
import { getSkywarsLevel } from "@/lib/hypixel/skywars/level"
import { getHeadsColor, getPrestigeName, getSkyWarsIcon, getTextColor } from "@/lib/hypixel/skywars/skywars"
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">
            <p>
                <span className="font-bold">{"Shards: "}</span>
                <span className="text-mc-aqua">{shards}</span>
            </p>
            <p>
                <span className="font-bold">{"Opals: "}</span>
                <span className="text-mc-blue">{opals}</span>
            </p>
            <p>
                <span className="font-bold">{"Lifetime Shards: "}</span>
                <span className="text-mc-aqua">{formatNumber(lifetime_shards)}</span>
            </p>
            <p>
                <span className="font-bold">{"Lifetime Opals: "}</span>
                <span className="text-mc-blue">{lifetime_opals}</span>
            </p>
        </div>
    )
}

export function ShardProgress({ percent }: { percent: number }) {
    return (
        <div>
            <h1 className="font-bold">Shard Progress</h1>
            <div className="flex">
                <GenericProgress percent={percent} className="bg-mc-aqua" />
            </div>
        </div>
    )
}

export function SkywarsLevel({ xp, icon }: { xp: number, icon: string | undefined }) {
    const level = getSkywarsLevel(xp)
    const colors = getTextColor(Math.floor(level))
    const swIcon = getSkyWarsIcon(icon)
    const val = `${Math.floor(level)}${swIcon}`

    if (level > 150) {
        return (
            <p className="font-bold">
                <span className={`text-mc-${colors.brackets}`}>[</span>
                <span
                    style={{
                        backgroundImage: "linear-gradient(to left,#a0a,#f5f,#5ff,#5f5,#ff5,#fa0,#f55)",
                        WebkitBackgroundClip: "text",
                        color: "transparent"
                    }}
                >
                    {`${val}`}
                </span>
                <span className={`text-mc-${colors.brackets}`}>]</span>
            </p>
        )
    }

    if (level === 50) {
        <p>
            <span className={`text-mc-${colors.brackets}`}>[</span>
            <span
                style={{
                    backgroundImage: "linear-gradient(to left,#a0a,#f5f,#5ff,#5f5,#ff5,#fa0,#f55)",
                    WebkitBackgroundClip: "text",
                    color: "transparent"
                }}
            >
                {`${val}`}
            </span>
            <span className={`text-mc-${colors.brackets}`}>]</span>
        </p>
    }

    return (
        <p>
            <span className={`text-mc-${colors.brackets}`}>[</span>
            <span className={`text-mc-${colors.text}`}>{val}</span>
            <span className={`text-mc-${colors.brackets}`}>]</span>
        </p>
    )
}

export function SkywarsProgress({ level, percent }: { level: number, percent: number }) {
    return (
        <div className="flex items-center mb-10">
            <LevelNumber level={level} className="mr-2" />
            <Progress level={level} percent={percent} />
            <LevelNumber level={level + 1} className="ml-2" />
        </div>
    )
}

function LevelNumber({ level, className }: { level: number, className?: string }) {
    if (level > 150 || level === 50) {
        return (
            <div
                className={cn(level > 150 ? "font-bold" : undefined, className)}
                style={{
                    backgroundImage: "linear-gradient(to left,#a0a,#f5f,#5ff,#5f5,#ff5,#fa0,#f55)",
                    WebkitBackgroundClip: "text",
                    color: "transparent"
                }}
            >
                {level}
            </div>
        )
    }

    return <div className={cn(`text-mc-${getTextColor(level).text}`, className)}>{level}</div>
}

function Progress({ level, percent }: { level: number, percent: number }) {
    if (level > 150 || level === 50) {
        return <GenericProgress percent={percent} rainbow={true} />
    }

    return <GenericProgress percent={percent} className={`bg-mc-${getTextColor(level).text}`} />
}

export function SkywarsPrestige({ level, icon }: { level: number, icon?: string }) {
    const swIcon = getSkyWarsIcon(icon)
    const pres = getPrestigeName(level)
    const val = `${pres} ${swIcon}`

    if (level > 150 || level === 50) {
        return (
            <span
                style={{
                    backgroundImage: "linear-gradient(to left,#a0a,#f5f,#5ff,#5f5,#ff5,#fa0,#f55)",
                    WebkitBackgroundClip: "text",
                    color: "transparent"
                }}
                className={level > 150 ? "font-bold" : undefined}
            >
                {val}
            </span>
        )
    }

    return (
        <span className={`text-mc-${getTextColor(level).text}`}>
            {val}
        </span>
    )
}