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">
-                <span className={`text-mc-${colors.brackets}`}>[</span>
+            <p className={cn(level > 150 && "font-bold")}>
+                <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) {
-        <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>
+    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[i]}`} key={i}>{c}</span>
+                    } else {
+                        return <span className={`text-mc-${pres.colormap_3[i]}`} key={i}>{c}</span>
+                    }
+                })}
+            </>
+        )
     }
 
     return (
         <p>
-            <span className={`text-mc-${colors.brackets}`}>[</span>
-            <span className={`text-mc-${colors.text}`}>{val}</span>
-            <span className={`text-mc-${colors.brackets}`}>]</span>
+            <span className={`text-mc-${pres.leftBracket}`}>[</span>
+            <MapSkywarsPrestigeColors />
+            <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 val = `${pres} ${swIcon}`
+    const pres = getPrestige(level)
+    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>
     )