Refactor

2025-08-24 13:11:58 +02:00
parent c92bd85f34
commit 2b959a6c99
7 changed files with 5 additions and 5 deletions
--- a/src/app/(stats)/player/[ign]/_stats/skywars/components.tsx
+++ b/src/app/(stats)/player/[ign]/_stats/skywars/components.tsx
@@ -0,0 +1,126 @@
+import { getPrestigeName, getSkyWarsIcon, getTextColor } from "@/lib/hypixel/skywars"
+import { getSkywarsLevel } from "@/lib/hypixel/skyWarsLevel"
+import { cn } from "@/lib/utils"
+
+export function SkywarsLevel({ xp, icon }: { xp: number, icon: string | undefined }) {
+    const level = getSkywarsLevel(xp)
+    const colors = getTextColor(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-${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>
+        )
+    }
+
+    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>
+    }
+
+    return (
+        <p>
+            <span className={`text-mc-${colors.brackets}`}>[</span>
+            <span className={`text-mc-${colors.text}`}>{val}</span>
+            <span className={`text-mc-${colors.brackets}`}>]</span>
+        </p>
+    )
+}
+
+export function SkywarsProgress({ 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} />
+            <div className={cn("flex-1 h-5 rounded-r-md bg-background", percent === 0 ? "rounded-l-md" : undefined)}></div>
+            <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-${getTextColor(level).text}`, className)}>{level}</div>
+}
+
+function Progress({ level, percent }: { level: number, percent: number }) {
+    if (level > 150 || level === 50) {
+        return (
+            <div
+                className="h-5 rounded-l-md"
+                style={{
+                    width: `${percent}%`,
+                    background: "repeating-linear-gradient(to right,#f55,#fa0,#ff5,#5f5,#5ff,#f5f,#a0a,#f55 16rem)"
+                }}
+            >
+            </div>
+        )
+    }
+
+    return <div className={`h-5 bg-mc-${getTextColor(level).text} rounded-l-md`} style={{ width: `${percent}%` }}></div>
+}
+
+export function SkywarsPrestige({ level, icon }: { level: number, icon?: string }) {
+    const swIcon = getSkyWarsIcon(icon)
+    const pres = getPrestigeName(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-${getTextColor(level).text}`}>
+            {val}
+        </span>
+    )
+}