75 lines
2.5 KiB
TypeScript
75 lines
2.5 KiB
TypeScript
import { getBedwarsStar, getPrestigeName, getTextColor } from "@/lib/hypixel/bedwars"
|
|
import { getBWLevelForExp } from "@/lib/hypixel/bedwarsLevel"
|
|
import { bedwarsLevelColors } from "@/lib/hypixelFormatters"
|
|
import { cn } from "@/lib/utils"
|
|
import GenericProgress from "../../_components/GenericProgress"
|
|
import Multicolored from "../../_components/Multicolored"
|
|
|
|
export function BedwarsLevel({ xp }: { xp: number }) {
|
|
const level = getBWLevelForExp(xp)
|
|
const color = bedwarsLevelColors(level)
|
|
const star = getBedwarsStar(level)
|
|
const val = `[${level}${star}]`
|
|
|
|
return <Multicolored val={val} color={color} />
|
|
}
|
|
|
|
export function BedwarsProgress({ 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>
|
|
)
|
|
}
|
|
|
|
export function BedWarsPrestige({ level }: { level: number }) {
|
|
if (level >= 1000 && level < 1100) {
|
|
return (
|
|
<span
|
|
style={{
|
|
backgroundImage: "linear-gradient(to left,#a0a,#f5f,#5ff,#5f5,#ff5,#fa0,#f55)",
|
|
WebkitBackgroundClip: "text",
|
|
color: "transparent"
|
|
}}
|
|
>
|
|
{`${getPrestigeName(level)} ${getBedwarsStar(level)}`}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<span className={`text-mc-${getTextColor(level)}`}>
|
|
{`${getPrestigeName(level)} ${getBedwarsStar(level)}`}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
function LevelNumber({ level, className }: { level: number, className?: string }) {
|
|
if (level >= 1000 && level < 1100) {
|
|
return (
|
|
<div
|
|
className={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)}`, className)}>{level}</div>
|
|
}
|
|
|
|
function Progress({ level, percent }: { level: number, percent: number }) {
|
|
if (level >= 1000 && level < 1100) {
|
|
return <GenericProgress percent={percent} rainbow={true} />
|
|
}
|
|
|
|
return <GenericProgress percent={percent} className={`bg-mc-${getTextColor(level)}`} />
|
|
}
|