Why tf
This commit is contained in:
236
đ
236
đ
@@ -1,236 +0,0 @@
|
||||
import { formatNumber } from "@/lib/formatters"
|
||||
import { getSkywarsLevel } from "@/lib/hypixel/skywars/level"
|
||||
import { getPrestige, getSkyWarsIcon } from "@/lib/hypixel/skywars/skywars"
|
||||
import { cn } from "@/lib/utils"
|
||||
import GenericProgress from "../../_components/GenericProgress"
|
||||
import { HeadsBar, PresigeousHeads } from "./client"
|
||||
|
||||
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
|
||||
}
|
||||
prestigeous: { username: string, timestamp: number, sacrifice: string }[]
|
||||
}
|
||||
|
||||
export function SkywarsHeads({
|
||||
heads,
|
||||
heads_special,
|
||||
prestigeous
|
||||
}: SkywarsHeadsProps) {
|
||||
const total_special = Object.values(heads_special).reduce((a, b) => a + b)
|
||||
const percentages = {
|
||||
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)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p>
|
||||
<span className="font-bold">{"Total Heads Gathered: "}</span>
|
||||
<span className="text-mc-gray">{formatNumber(heads)}</span>
|
||||
</p>
|
||||
{total_special > 0 ? <HeadsBar heads={headsArray} heads_total={heads} /> : <p>This person has no heads collected.</p>}
|
||||
<p className="font-bold">Prestigious Head Collection</p>
|
||||
{prestigeous.length > 0 ? <PresigeousHeads heads={prestigeous} /> : <p>No prestigeous heads. Now what a skill issue.</p>}
|
||||
</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, shards }: { percent: number, shards: number }) {
|
||||
return (
|
||||
<div>
|
||||
<h1 className="font-bold">Shard Progress</h1>
|
||||
<div className="flex">
|
||||
<GenericProgress percent={percent} className="bg-mc-aqua" tooltipId="shards-progress" tooltipContent={`${shards}/20000 Shards`} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function SkywarsLevel({ xp, icon }: { xp: number, icon: string | undefined }) {
|
||||
const level = getSkywarsLevel(xp)
|
||||
const pres = getPrestige(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-${pres.leftBracket}`}>[</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-${pres.rightBracket}`}>]</span>
|
||||
// </p>
|
||||
// )
|
||||
// }
|
||||
//
|
||||
// if (level === 50) {
|
||||
// <p>
|
||||
// <span className={`text-mc-${pres.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-${pres.brackets}`}>]</span>
|
||||
// </p>
|
||||
// }
|
||||
|
||||
function MapSkywarsPrestigeColors() {
|
||||
if (typeof pres.colormap_2 === "string") {
|
||||
return <span className={`text-mc-${pres.colormap_2}`}>{val}</span>
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{val.split("").map((c, i) => {
|
||||
if (level.toString().length === 2) {
|
||||
return <span className={`text-mc-${pres.colormap_2}`} key={i}>{c}</span>
|
||||
} else {
|
||||
}
|
||||
})}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<p>
|
||||
<span className={`text-mc-${pres.leftBracket}`}>[</span>
|
||||
<MapSkywarsPrestigeColors />
|
||||
<span className={`text-mc-${pres.rightBracket}`}>]</span>
|
||||
</p>
|
||||
)
|
||||
}
|
||||
|
||||
export function SkywarsProgress({ level, percent, currentXp, ceilingXp }: { level: number, percent: number, currentXp: number, ceilingXp: number }) {
|
||||
return (
|
||||
<div className="flex items-center mb-10">
|
||||
<LevelNumber level={level} className="mr-2" />
|
||||
<Progress
|
||||
level={level}
|
||||
percent={percent}
|
||||
tooltipId="skywars-progress"
|
||||
tooltipContent={`${formatNumber(currentXp)}/${formatNumber(ceilingXp)} XP`}
|
||||
/>
|
||||
<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-${getPrestige(level).leftBracket}`, className)}>{level}</div>
|
||||
}
|
||||
|
||||
function Progress({ level, percent, tooltipId, tooltipContent }: { level: number, percent: number, tooltipId: string, tooltipContent: string }) {
|
||||
if (level > 150 || level === 50) {
|
||||
return <GenericProgress percent={percent} rainbow={true} tooltipId={tooltipId} tooltipContent={tooltipContent} />
|
||||
}
|
||||
|
||||
return (
|
||||
<GenericProgress
|
||||
percent={percent}
|
||||
className={`bg-mc-${getPrestige(level).leftBracket}`}
|
||||
tooltipId={tooltipId}
|
||||
tooltipContent={tooltipContent}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export function SkywarsPrestige({ level, icon }: { level: number, icon?: string }) {
|
||||
const swIcon = getSkyWarsIcon(icon)
|
||||
const pres = getPrestige(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-${pres.leftBracket}`}>
|
||||
{val}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user