Made generic progress

src/app/(stats)/player/[ign]/_components/GenericProgress.tsx

@@ -0,0 +1,38 @@
+import { cn } from "@/lib/utils"
+
+type GenericProgressProps =
+    & {
+        percent: number
+    }
+    & ({
+        className: string
+        rainbow?: never
+    } | {
+        className?: never
+        rainbow: true
+    })
+
+export default function GenericProgress({ percent, className, rainbow }: GenericProgressProps) {
+    if (rainbow) {
+        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>
+                <div className={cn("flex-1 h-5 rounded-r-md bg-background", percent === 0 ? "rounded-l-md" : undefined)}></div>
+            </>
+        )
+    }
+
+    return (
+        <>
+            <div className={cn("h-5 rounded-l-md", className)} style={{ width: `${percent}%` }}></div>
+            <div className={cn("flex-1 h-5 rounded-r-md bg-background", percent === 0 ? "rounded-l-md" : undefined)}></div>
+        </>
+    )
+}

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

@@ -2,6 +2,7 @@ import { getBedwarsStar, getPrestigeName, getTextColor } from "@/lib/hypixel/bed
 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 }) {
@@ -18,7 +19,6 @@ export function BedwarsProgress({ level, percent }: { level: number, percent: nu
         <div className="flex items-center mb-10">
             <LevelNumber level={level} className="mr-2" />
             <Progress level={level} percent={percent} />
-            <div className="flex-1 h-5 rounded-r-md bg-background"></div>
             <LevelNumber level={level + 1} className="ml-2" />
         </div>
     )
@@ -67,17 +67,8 @@ function LevelNumber({ level, className }: { level: number, className?: string }
 
 function Progress({ level, percent }: { level: number, percent: number }) {
     if (level >= 1000 && level < 1100) {
-        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 <GenericProgress percent={percent} rainbow={true} />
     }
 
-    return <div className={`h-5 bg-mc-${getTextColor(level)} rounded-l-md`} style={{ width: `${percent}%` }}></div>
+    return <GenericProgress percent={percent} className={`bg-mc-${getTextColor(level)}`} />
 }

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

@@ -1,6 +1,18 @@
 import { getPrestigeName, getSkyWarsIcon, getTextColor } from "@/lib/hypixel/skywars"
 import { getSkywarsLevel } from "@/lib/hypixel/skyWarsLevel"
 import { cn } from "@/lib/utils"
+import GenericProgress from "../../_components/GenericProgress"
+
+export function ShardProgress({ percent }: { percent: number }) {
+    return (
+        <div>
+            <h1 className="mb-2 font-bold">Shard Progress</h1>
+            <div className="flex">
+                <GenericProgress percent={percent} className="bg-mc-aqua" />
+            </div>
+        </div>
+    )
+}
 
 export function SkywarsLevel({ xp, icon }: { xp: number, icon: string | undefined }) {
     const level = getSkywarsLevel(xp)
@@ -56,7 +68,6 @@ export function SkywarsProgress({ level, percent }: { level: number, percent: nu
         <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>
     )
@@ -83,19 +94,10 @@ function LevelNumber({ level, className }: { level: number, className?: string }
 
 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 <GenericProgress percent={percent} rainbow={true} />
     }
 
-    return <div className={`h-5 bg-mc-${getTextColor(level).text} rounded-l-md`} style={{ width: `${percent}%` }}></div>
+    return <GenericProgress percent={percent} className={`bg-mc-${getTextColor(level).text}`} />
 }
 
 export function SkywarsPrestige({ level, icon }: { level: number, icon?: string }) {

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

@@ -10,7 +10,7 @@ import { NonNullStats } from "@/lib/schema/player"
 import { ChevronDown, ChevronUp } from "lucide-react"
 import { useEffect, useRef, useState } from "react"
 import CollapsedStats from "../../_components/CollapsedStats"
-import { SkywarsLevel, SkywarsProgress } from "./components"
+import { ShardProgress, SkywarsLevel, SkywarsProgress } from "./components"
 import SkyWarsGeneralStats from "./stats"
 import SkywarsStatTable from "./table"
 
@@ -44,12 +44,14 @@ export default function SkyWarsStats({ stats }: { stats: NonNullStats["SkyWars"]
     const kd = (stats.kills / stats.deaths).toFixed(2)
     const wl = (stats.wins / stats.losses).toFixed(2)
 
-    const percent = getProgress(
+    const levelProgress = getProgress(
         getSkywarsXpForLevel(Math.floor(level)),
         stats.skywars_experience,
         getSkywarsXpForLevel(Math.floor(level) + 1)
     )
 
+    const shardProgress = getProgress(0, stats.shard, 20000)
+
     return (
         <Card>
             <CardContent>
@@ -84,11 +86,12 @@ export default function SkyWarsStats({ stats }: { stats: NonNullStats["SkyWars"]
                     </div>
                     <CollapsibleContent>
                         <Separator className="my-4" />
-                        <SkywarsProgress level={Math.floor(level)} percent={percent} />
+                        <SkywarsProgress level={Math.floor(level)} percent={levelProgress} />
                         <SkyWarsGeneralStats statsChecked={stats} level={level} />
                         <Separator className="my-4" />
                         <SkywarsStatTable stats={stats} />
                         <Separator className="my-4" />
+                        <ShardProgress percent={shardProgress} />
                     </CollapsibleContent>
                 </Collapsible>
             </CardContent>