Updated skywars to use new prestiges

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

@@ -1,6 +1,6 @@
 import { formatNumber } from "@/lib/formatters"
 import { getSkywarsLevel } from "@/lib/hypixel/skywars/level"
-import { getPrestigeName, getSkyWarsIcon, getTextColor } from "@/lib/hypixel/skywars/skywars"
+import { getPrestige, getSkyWarsIcon } from "@/lib/hypixel/skywars/skywars"
 import { cn } from "@/lib/utils"
 import GenericProgress from "../../_components/GenericProgress"
 import { HeadsBar, PresigeousHeads } from "./client"
@@ -95,14 +95,14 @@ export function ShardProgress({ percent, shards }: { percent: number, shards: nu
 
 export function SkywarsLevel({ xp, icon }: { xp: number, icon: string | undefined }) {
     const level = getSkywarsLevel(xp)
-    const colors = getTextColor(Math.floor(level))
+    const pres = getPrestige(Math.floor(level))
     const swIcon = getSkyWarsIcon(icon)
     const val = `${Math.floor(level)}${swIcon}`
 
-    if (level > 150) {
+    if (pres.name.startsWith("Mythic")) {
         return (
-            <p className="font-bold">
+            <p className={cn(level > 150 && "font-bold")}>
-                <span className={`text-mc-${colors.brackets}`}>[</span>
+                <span className={`text-mc-${pres.leftBracket}`}>[</span>
                 <span
                     style={{
                         backgroundImage: "linear-gradient(to left,#a0a,#f5f,#5ff,#5f5,#ff5,#fa0,#f55)",
@@ -112,32 +112,34 @@ export function SkywarsLevel({ xp, icon }: { xp: number, icon: string | undefine
                 >
                     {`${val}`}
                 </span>
-                <span className={`text-mc-${colors.brackets}`}>]</span>
+                <span className={`text-mc-${pres.rightBracket}`}>]</span>
             </p>
         )
     }
 
-    if (level === 50) {
+    function MapSkywarsPrestigeColors() {
-        <p>
+        if (typeof pres.colormap_2 === "string") {
-            <span className={`text-mc-${colors.brackets}`}>[</span>
+            return <span className={`text-mc-${pres.colormap_2}`}>{val}</span>
-            <span
+        }
-                style={{
+
-                    backgroundImage: "linear-gradient(to left,#a0a,#f5f,#5ff,#5f5,#ff5,#fa0,#f55)",
+        return (
-                    WebkitBackgroundClip: "text",
+            <>
-                    color: "transparent"
+                {val.split("").map((c, i) => {
-                }}
+                    if (level.toString().length === 2) {
-            >
+                        return <span className={`text-mc-${pres.colormap_2[i]}`} key={i}>{c}</span>
-                {`${val}`}
+                    } else {
-            </span>
+                        return <span className={`text-mc-${pres.colormap_3[i]}`} key={i}>{c}</span>
-            <span className={`text-mc-${colors.brackets}`}>]</span>
+                    }
-        </p>
+                })}
+            </>
+        )
     }
 
     return (
         <p>
-            <span className={`text-mc-${colors.brackets}`}>[</span>
+            <span className={`text-mc-${pres.leftBracket}`}>[</span>
-            <span className={`text-mc-${colors.text}`}>{val}</span>
+            <MapSkywarsPrestigeColors />
-            <span className={`text-mc-${colors.brackets}`}>]</span>
+            <span className={`text-mc-${pres.rightBracket}`}>]</span>
         </p>
     )
 }
@@ -158,7 +160,8 @@ export function SkywarsProgress({ level, percent, currentXp, ceilingXp }: { leve
 }
 
 function LevelNumber({ level, className }: { level: number, className?: string }) {
-    if (level > 150 || level === 50) {
+    const pres = getPrestige(level)
+    if (pres.name.startsWith("Mythic")) {
         return (
             <div
                 className={cn(level > 150 ? "font-bold" : undefined, className)}
@@ -173,23 +176,31 @@ function LevelNumber({ level, className }: { level: number, className?: string }
         )
     }
 
-    return <div className={cn(`text-mc-${getTextColor(level).text}`, className)}>{level}</div>
+    return <div className={cn(`text-mc-${pres.leftBracket}`, className)}>{level}</div>
 }
 
 function Progress({ level, percent, tooltipId, tooltipContent }: { level: number, percent: number, tooltipId: string, tooltipContent: string }) {
-    if (level > 150 || level === 50) {
+    const pres = getPrestige(level)
+    if (pres.name.startsWith("Mythic")) {
         return <GenericProgress percent={percent} rainbow={true} tooltipId={tooltipId} tooltipContent={tooltipContent} />
     }
 
-    return <GenericProgress percent={percent} className={`bg-mc-${getTextColor(level).text}`} tooltipId={tooltipId} tooltipContent={tooltipContent} />
+    return (
+        <GenericProgress
+            percent={percent}
+            className={`bg-mc-${pres.leftBracket}`}
+            tooltipId={tooltipId}
+            tooltipContent={tooltipContent}
+        />
+    )
 }
 
 export function SkywarsPrestige({ level, icon }: { level: number, icon?: string }) {
     const swIcon = getSkyWarsIcon(icon)
-    const pres = getPrestigeName(level)
+    const pres = getPrestige(level)
-    const val = `${pres} ${swIcon}`
+    const val = `${pres.name} ${swIcon}`
 
-    if (level > 150 || level === 50) {
+    if (pres.name.startsWith("Mythic")) {
         return (
             <span
                 style={{
@@ -205,7 +216,7 @@ export function SkywarsPrestige({ level, icon }: { level: number, icon?: string
     }
 
     return (
-        <span className={`text-mc-${getTextColor(level).text}`}>
+        <span className={`text-mc-${pres.leftBracket}`}>
             {val}
         </span>
     )

src/data/hypixel/skywars.ts

@@ -2,37 +2,204 @@ export const INITIAL_XP = [0, 20, 70, 150, 250, 500, 1000, 2000, 3500, 6000, 100
 export const RECURRING_XP = 10000 as const
 
 export const PRESTIGES = [
-    { level: 0, color: "gray", b_color: "gray", name: "None" },
+    { name: "Stone", level: 0, leftBracket: "gray", rightBracket: "gray", colormap_2: "gray", colormap_3: "gray" },
-    { level: 5, color: "white", b_color: "white", name: "Iron" },
+    { name: "Iron", level: 10, leftBracket: "white", rightBracket: "white", colormap_2: "white", colormap_3: "white" },
-    { level: 10, color: "gold", b_color: "gold", name: "Gold" },
+    { name: "Gold", level: 20, leftBracket: "gold", rightBracket: "gold", colormap_2: "gold", colormap_3: "gold" },
-    { level: 15, color: "aqua", b_color: "aqua", name: "Diamond" },
+    { name: "Diamond", level: 30, leftBracket: "aqua", rightBracket: "aqua", colormap_2: "aqua", colormap_3: "aqua" },
-    { level: 20, color: "dark-green", b_color: "dark-green", name: "Emerald" },
+    { name: "Ruby", level: 40, leftBracket: "red", rightBracket: "red", colormap_2: "red", colormap_3: "red" },
-    { level: 25, color: "dark-aqua", b_color: "dark-aqua", name: "Sapphire" },
+    { name: "Crystal", level: 50, leftBracket: "light-purple", rightBracket: "light-purple", colormap_2: "light-purple", colormap_3: "light-purple" },
-    { level: 30, color: "dark-red", b_color: "dark-red", name: "Ruby" },
+    { name: "Amethyst", level: 60, leftBracket: "dark-purple", rightBracket: "dark-purple", colormap_2: "dark-purple", colormap_3: "dark-purple" },
-    { level: 35, color: "light-purple", b_color: "light-purple", name: "Crystal" },
+    { name: "Opal", level: 70, leftBracket: "blue", rightBracket: "blue", colormap_2: "blue", colormap_3: "blue" },
-    { level: 40, color: "blue", b_color: "blue", name: "Opal" },
+    { name: "Topaz", level: 80, leftBracket: "yellow", rightBracket: "yellow", colormap_2: "yellow", colormap_3: "yellow" },
-    { level: 45, color: "purple", b_color: "purple", name: "Amethyst" },
+    { name: "Jade", level: 90, leftBracket: "green", rightBracket: "green", colormap_2: "green", colormap_3: "green" },
-    { level: 50, color: "rainbow", b_color: "red", name: "Rainbow" },
+    {
-    { level: 55, color: "white", b_color: "gray", name: "First Class" },
+        name: "Mythic I",
-    { level: 60, color: "red", b_color: "dark-red", name: "Assassin" },
+        level: 100,
-    { level: 65, color: "white", b_color: "red", name: "Veteran" },
+        leftBracket: "red",
-    { level: 70, color: "gold", b_color: "yellow", name: "God Like" },
+        rightBracket: "light-purple",
-    { level: 75, color: "blue", b_color: "white", name: "Warrior" },
+        colormap_2: ["yellow", "green", "aqua"],
-    { level: 80, color: "aqua", b_color: "white", name: "Captain" },
+        colormap_3: ["gold", "yellow", "green", "aqua"]
-    { level: 85, color: "dark-aqua", b_color: "white", name: "Soldier" },
+    },
-    { level: 90, color: "dark-aqua", b_color: "green", name: "Infantry" },
+    { name: "Bloody", level: 110, leftBracket: "dark-red", rightBracket: "dark-red", colormap_2: "red", colormap_3: "red" },
-    { level: 95, color: "yellow", b_color: "red", name: "Sergeant" },
+    { name: "Cobalt", level: 120, leftBracket: "dark-blue", rightBracket: "dark-blue", colormap_2: "dark-blue", colormap_3: "dark-blue" },
-    { level: 100, color: "dark-blue", b_color: "blue", name: "Lieutenant" },
+    { name: "Content", level: 130, leftBracket: "red", rightBracket: "red", colormap_2: "white", colormap_3: "white" },
-    { level: 105, color: "dark-red", b_color: "gold", name: "Admiral" },
+    { name: "Crimson", level: 140, leftBracket: "dark-red", rightBracket: "dark-red", colormap_2: "dark-red", colormap_3: "dark-red" },
-    { level: 110, color: "aqua", b_color: "dark-blue", name: "General" },
+    { name: "Firefly", level: 150, leftBracket: "gold", rightBracket: "gold", colormap_2: "yellow", colormap_3: "yellow" },
-    { level: 115, color: "gray", b_color: "dark-gray", name: "Villain" },
+    { name: "Emerald", level: 160, leftBracket: "dark-green", rightBracket: "dark-green", colormap_2: "dark-green", colormap_3: "dark-green" },
-    { level: 120, color: "purple", b_color: "light-purple", name: "Skilled" },
+    { name: "Abyss", level: 170, leftBracket: "dark-blue", rightBracket: "dark-blue", colormap_2: "blue", colormap_3: "blue" },
-    { level: 125, color: "yellow", b_color: "white", name: "Sneaky" },
+    { name: "Sapphire", level: 180, leftBracket: "dark-aqua", rightBracket: "dark-aqua", colormap_2: "dark-aqua", colormap_3: "dark-aqua" },
-    { level: 130, color: "yellow", b_color: "red", name: "Overlord" },
+    { name: "Emergency", level: 190, leftBracket: "dark-red", rightBracket: "dark-red", colormap_2: "yellow", colormap_3: "yellow" },
-    { level: 135, color: "red", b_color: "gold", name: "War Chief" },
+    {
-    { level: 140, color: "red", b_color: "green", name: "Warlock" },
+        name: "Mythic II",
-    { level: 145, color: "aqua", b_color: "green", name: "Emperor" },
+        level: 200,
-    { level: 150, color: "rainbow", b_color: "red", name: "Mythic" }
+        leftBracket: "gold",
+        rightBracket: "red",
+        colormap_2: ["green", "aqua", "light-purple"],
+        colormap_3: ["yellow", "green", "light-purple", "aqua"]
+    },
+    { name: "Mulberry", level: 210, leftBracket: "dark-purple", rightBracket: "dark-purple", colormap_2: "light-purple", colormap_3: "light-purple" },
+    { name: "Slate", level: 220, leftBracket: "dark-gray", rightBracket: "dark-gray", colormap_2: "dark-gray", colormap_3: "dark-gray" },
+    { name: "Blood God", level: 230, leftBracket: "light-purple", rightBracket: "light-purple", colormap_2: "aqua", colormap_3: "aqua" },
+    { name: "Midnight", level: 240, leftBracket: "black", rightBracket: "black", colormap_2: "black", colormap_3: "black" },
+    {
+        name: "Sun",
+        level: 250,
+        leftBracket: "red",
+        rightBracket: "red",
+        colormap_2: ["yellow", "yellow", "gold"],
+        colormap_3: ["gold", "yellow", "yellow", "gold"]
+    },
+    {
+        name: "Bulb",
+        level: 260,
+        leftBracket: "black",
+        rightBracket: "black",
+        colormap_2: ["gold", "gold", "yellow"],
+        colormap_3: ["yellow", "gold", "gold", "yellow"]
+    },
+    { name: "Twilight", level: 270, leftBracket: "dark-blue", rightBracket: "dark-blue", colormap_2: "dark-aqua", colormap_3: "dark-aqua" },
+    {
+        name: "Natural",
+        level: 280,
+        leftBracket: "green",
+        rightBracket: "dark-green",
+        colormap_2: ["green", "yellow", "green"],
+        colormap_3: ["dark-green", "green", "yellow", "green"]
+    },
+    { name: "Icicle", level: 290, leftBracket: "blue", rightBracket: "blue", colormap_2: "aqua", colormap_3: "aqua" },
+    {
+        name: "Mythic III",
+        level: 300,
+        leftBracket: "yellow",
+        rightBracket: "gold",
+        colormap_2: ["aqua", "light-purple", "red"],
+        colormap_3: ["green", "aqua", "light-purple", "red"]
+    },
+    { name: "Graphite", level: 310, leftBracket: "dark-gray", rightBracket: "dark-gray", colormap_2: "gray", colormap_3: "gray" },
+    { name: "Punk", level: 320, leftBracket: "light-purple", rightBracket: "light-purple", colormap_2: "green", colormap_3: "green" },
+    { name: "Meltdown", level: 330, leftBracket: "yellow", rightBracket: "yellow", colormap_2: "red", colormap_3: "red" },
+    {
+        name: "Iridescent",
+        level: 340,
+        leftBracket: "aqua",
+        rightBracket: "green",
+        colormap_2: ["aqua", "light-purple", "green"],
+        colormap_3: ["green", "aqua", "light-purple", "green"]
+    },
+    {
+        name: "Marigold",
+        level: 350,
+        leftBracket: "white",
+        rightBracket: "gold",
+        colormap_2: ["yellow", "yellow", "gold"],
+        colormap_3: ["white", "yellow", "yellow", "gold"]
+    },
+    {
+        name: "Beach",
+        level: 360,
+        leftBracket: "blue",
+        rightBracket: "yellow",
+        colormap_2: ["aqua", "white", "yellow"],
+        colormap_3: ["dark-aqua", "aqua", "white", "yellow"]
+    },
+    {
+        name: "Spark",
+        level: 370,
+        leftBracket: "yellow",
+        rightBracket: "dark-gray",
+        colormap_2: ["white", "white", "dark-gray"],
+        colormap_3: ["yellow", "white", "white", "dark-gray"]
+    },
+    {
+        name: "Target",
+        level: 380,
+        leftBracket: "red",
+        rightBracket: "red",
+        colormap_2: ["red", "red", "white"],
+        colormap_3: ["white", "red", "red", "white"]
+    },
+    { name: "Limelight", level: 390, leftBracket: "dark-green", rightBracket: "dark-green", colormap_2: "green", colormap_3: "green" },
+    {
+        name: "Mythic IV",
+        level: 400,
+        leftBracket: "green",
+        rightBracket: "yellow",
+        colormap_2: ["light-purple", "red", "gold"],
+        colormap_3: ["aqua", "light-purple", "red", "gold"]
+    },
+    { name: "Cerulean", level: 410, leftBracket: "dark-aqua", rightBracket: "dark-aqua", colormap_2: "aqua", colormap_3: "aqua" },
+    {
+        name: "Magical",
+        level: 420,
+        leftBracket: "black",
+        rightBracket: "black",
+        colormap_2: ["dark-gray", "dark-gray", "dark-purple"],
+        colormap_3: ["dark-purple", "dark-gray", "dark-gray", "dark-purple"]
+    },
+    {
+        name: "Luminous",
+        level: 430,
+        leftBracket: "gold",
+        rightBracket: "dark-aqua",
+        colormap_2: ["white", "white", "aqua"],
+        colormap_3: ["gold", "white", "white", "aqua"]
+    },
+    {
+        name: "Synthesis",
+        level: 440,
+        leftBracket: "green",
+        rightBracket: "white",
+        colormap_2: ["green", "yellow", "white"],
+        colormap_3: ["dark-green", "green", "yellow", "white"]
+    },
+    {
+        name: "Burn",
+        level: 450,
+        leftBracket: "dark-red",
+        rightBracket: "white",
+        colormap_2: ["red", "gold", "yellow"],
+        colormap_3: ["dark-red", "red", "gold", "yellow"]
+    },
+    {
+        name: "Dramatic",
+        level: 460,
+        leftBracket: "blue",
+        rightBracket: "dark-red",
+        colormap_2: ["dark-aqua", "light-purple", "dark-purple"],
+        colormap_3: ["aqua", "dark-aqua", "light-purple", "dark-purple"]
+    },
+    {
+        name: "Radiant",
+        level: 470,
+        leftBracket: "black",
+        rightBracket: "dark-gray",
+        colormap_2: ["gray", "white", "gray"],
+        colormap_3: ["dark-gray", "gray", "white", "gray"]
+    },
+    {
+        name: "Tidal",
+        level: 480,
+        leftBracket: "dark-blue",
+        rightBracket: "white",
+        colormap_2: ["blue", "dark-aqua", "aqua"],
+        colormap_3: ["dark-blue", "blue", "dark-aqua", "aqua"]
+    },
+    {
+        name: "Firework",
+        level: 490,
+        leftBracket: "blue",
+        rightBracket: "dark-red",
+        colormap_2: ["white", "white", "red"],
+        colormap_3: ["aqua", "white", "white", "red"]
+    },
+    {
+        name: "Mythic V",
+        level: 500,
+        leftBracket: "aqua",
+        rightBracket: "green",
+        colormap_2: ["red", "gold", "yellow"],
+        colormap_3: ["light-purple", "red", "gold", "yellow"]
+    }
 ] as const
 
 export const ICONS = {
@@ -106,3 +273,4 @@ export const HEADS = [
     { id: "divine", name: "Divine", color: "gold" },
     { id: "heavenly", name: "Heavenly", color: "dark-purple" }
 ] as const
+

src/lib/hypixel/skywars/skywars.ts

@@ -32,22 +32,14 @@ export function concatSkywarsStats(...stats: SkywarsModeStats[]) {
     ]
 }
 
-export function getTextColor(level: number) {
+export function getPrestige(level: number) {
-    const floored = floorLevel(level, 5)
+    const floored = floorLevel(level, 10)
 
-    if (level > 150) {
+    if (level > PRESTIGES.at(-1)!.level) {
-        return {
+        PRESTIGES.at(-1)!
-            text: PRESTIGES.at(-1)?.color ?? "gray",
-            brackets: PRESTIGES.at(-1)?.b_color ?? "gray"
-        }
     }
 
-    const pres = PRESTIGES.find(p => p.level === floored)
+    return PRESTIGES.find(p => p.level === floored)!
-
-    return {
-        text: pres?.color ?? "gray",
-        brackets: pres?.b_color ?? "gray"
-    }
 }
 
 export function getSkyWarsIcon(icon?: string) {
@@ -60,14 +52,6 @@ export function getSkyWarsIcon(icon?: string) {
     return icons[icon] ?? ICONS.default
 }
 
-export function getPrestigeName(level: number) {
-    const floored = floorLevel(level, 5)
-
-    if (level > 150) return PRESTIGES.at(-1)!.name
-
-    return PRESTIGES.find(p => p.level === floored)!.name
-}
-
 export type _SkywarsStats = Record<string, number>
 type Mode =
     | "normal"

đ

@@ -0,0 +1,236 @@
+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>
+    )
+}