80 lines
2.9 KiB
TypeScript
80 lines
2.9 KiB
TypeScript
import { formatNumber } from "@/lib/formatters"
|
|
import { bedwarsLevelColors, getBedwarsStar, getPrestigeName, getTextColor } from "@/lib/hypixel/bedwars/bedwars"
|
|
import { getBWLevelForExp } from "@/lib/hypixel/bedwars/level"
|
|
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, 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="bedwars-progress"
|
|
tooltipContent={`${formatNumber(currentXp)}/${formatNumber(ceilingXp)} XP`}
|
|
/>
|
|
<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 (
|
|
<p
|
|
className={className}
|
|
style={{
|
|
backgroundImage: "linear-gradient(to left,#a0a,#f5f,#5ff,#5f5,#ff5,#fa0,#f55)",
|
|
WebkitBackgroundClip: "text",
|
|
color: "transparent"
|
|
}}
|
|
>
|
|
{level}
|
|
</p>
|
|
)
|
|
}
|
|
|
|
return <p className={cn(`text-mc-${getTextColor(level)}`, className)}>{level}</p>
|
|
}
|
|
|
|
function Progress({ level, percent, tooltipId, tooltipContent }: { level: number, percent: number, tooltipId: string, tooltipContent: string }) {
|
|
if (level >= 1000 && level < 1100) {
|
|
return <GenericProgress percent={percent} rainbow={true} tooltipId={tooltipId} tooltipContent={tooltipContent} />
|
|
}
|
|
|
|
return <GenericProgress percent={percent} className={`bg-mc-${getTextColor(level)}`} tooltipId={tooltipId} tooltipContent={tooltipContent} />
|
|
}
|