Updated build battle with new titles

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

@@ -46,7 +46,7 @@ export default function GenericProgress({ percent, tooltipId, tooltipContent, cl
                 >
                     <div
                         data-id={tooltipId}
-                        className={cn("h-5 rounded-l-md", percent > 100 ? "rounded-r-md" : undefined, className)}
+                        className={cn("h-5 rounded-l-md", percent >= 100 ? "rounded-r-md" : undefined, className)}
                         style={{
                             width: `${percent > 100 ? 100 : percent}%`,
                             background: "repeating-linear-gradient(to right,#f55,#fa0,#ff5,#5f5,#5ff,#f5f,#a0a,#f55 16rem)"
@@ -75,7 +75,7 @@ export default function GenericProgress({ percent, tooltipId, tooltipContent, cl
             >
                 <div
                     data-id={tooltipId}
-                    className={cn("h-5 rounded-l-md", percent > 100 ? "rounded-r-md" : undefined, className)}
+                    className={cn("h-5 rounded-l-md", percent >= 100 ? "rounded-r-md" : undefined, className)}
                     style={{ width: `${percent > 100 ? 100 : percent}%` }}
                 >
                 </div>

src/app/(stats)/player/[ign]/_stats/build-battle/build-battle.tsx

@@ -4,6 +4,7 @@ import { Separator } from "@/components/ui/separator"
 import { formatNumber } from "@/lib/formatters"
 import { getBuildBattleRank } from "@/lib/hypixel/build-battle/general"
 import { NonNullStats } from "@/lib/schema/player"
+import { cn } from "@/lib/utils"
 import CollapsedStats from "../../_components/CollapsedStats"
 import BuildBattleTitleProgress from "./progress"
 import BuildBattleGeneralStats from "./stats"
@@ -25,7 +26,7 @@ export default function BuildBattleStats({ stats }: { stats: NonNullStats["Build
                                 stats={[
                                     {
                                         title: <p>Title</p>,
-                                        stat: <p className={`font-bold text-mc-${rank.color}`}>{rank.name}</p>
+                                        stat: <p className={cn(rank.bold && "font-bold", `text-mc-${rank.color}`)}>{rank.name}</p>
                                     },
                                     {
                                         title: <p>Wins</p>,

src/app/(stats)/player/[ign]/_stats/build-battle/progress.tsx

@@ -14,11 +14,11 @@ export default function BuildBattleTitleProgress({ score }: { score: number }) {
             <GenericProgress
                 percent={percent}
                 tooltipId="build-battle-progress"
-                tooltipContent={`${score}/${next !== null ? next.value : 0} Score`}
+                tooltipContent={`${score}/${next.value} Score`}
                 className={`bg-mc-${current.color}`}
             />
-            <p className={cn("font-bold", next !== null ? `text-mc-${next.color}` : "text-mc-gold")}>
+            <p className={cn(next.bold && "font-bold", `text-mc-${next.color}`)}>
-                {next !== null ? next.name : "Already max rank"}
+                {next.name}
             </p>
         </div>
     )

src/app/(stats)/player/[ign]/_stats/build-battle/stats.tsx

@@ -2,6 +2,7 @@ import { formatNumber } from "@/lib/formatters"
 import { getBuildBattleRank } from "@/lib/hypixel/build-battle/general"
 import { devide } from "@/lib/hypixel/general"
 import { NonNullStats } from "@/lib/schema/player"
+import { cn } from "@/lib/utils"
 import { BasicStat } from "../../_components/Stats"
 
 export default function BuildBattleGeneralStats({ stats }: { stats: NonNullable<NonNullStats["BuildBattle"]> }) {
@@ -10,7 +11,7 @@ export default function BuildBattleGeneralStats({ stats }: { stats: NonNullable<
         <div className="flex">
             <div className="flex-1">
                 <BasicStat title="Score: " value={formatNumber(stats.score)} />
-                <BasicStat title="Title: " value={rank.name} className={`font-bold text-mc-${rank.color}`} />
+                <BasicStat title="Title: " value={rank.name} className={cn(rank.bold && "font-bold", `text-mc-${rank.color}`)} />
                 <BasicStat title="Tokens: " value={formatNumber(stats.coins)} className="text-mc-dark-green" />
             </div>
             <div className="flex-1">

src/data/hypixel/build-battle.ts

@@ -7,16 +7,23 @@ export const MODES = [
     { id: "", name: "Overall" }
 ] as const
 export const STARS = [
-    { value: 0, name: "Rookie", color: "white" },
+    { value: 0, name: "Rookie", color: "white", bold: false },
-    { value: 100, name: "Untrained", color: "gray" },
+    { value: 100, name: "Untrained", color: "gray", bold: false },
-    { value: 250, name: "Amateur", color: "yellow" },
+    { value: 250, name: "Amateur", color: "dark-gray", bold: false },
-    { value: 500, name: "Apprentice", color: "green" },
+    { value: 500, name: "Prospect", color: "green", bold: false },
-    { value: 1000, name: "Experienced", color: "light-purple" },
+    { value: 1000, name: "Apprentice", color: "dark-green", bold: false },
-    { value: 2000, name: "Seasoned", color: "blue" },
+    { value: 2000, name: "Experienced", color: "aqua", bold: false },
-    { value: 3500, name: "Trained", color: "dark-green" },
+    { value: 3500, name: "Seasoned", color: "dark-aqua", bold: false },
-    { value: 5000, name: "Skilled", color: "dark-aqua" },
+    { value: 5000, name: "Trained", color: "blue", bold: false },
-    { value: 7500, name: "Talented", color: "red" },
+    { value: 7500, name: "Skilled", color: "dark-blue", bold: false },
-    { value: 10000, name: "Professional", color: "dark-purple" },
+    { value: 10000, name: "Talented", color: "dark-purple", bold: false },
-    { value: 15000, name: "Expert", color: "dark-blue" },
+    { value: 15000, name: "Professional", color: "light-purple", bold: false },
-    { value: 20000, name: "Master", color: "dark-red" }
+    { value: 20000, name: "Artisan", color: "red", bold: false },
+    { value: 30000, name: "Expert", color: "dark-red", bold: false },
+    { value: 50000, name: "Master", color: "gold", bold: false },
+    { value: 100000, name: "Legend", color: "green", bold: true },
+    { value: 200000, name: "Grandmaster", color: "aqua", bold: true },
+    { value: 300000, name: "Celestial", color: "light-purple", bold: true },
+    { value: 400000, name: "Divine", color: "red", bold: true },
+    { value: 500000, name: "Ascended", color: "gold", bold: true }
 ] as const

src/lib/hypixel/build-battle/general.ts

@@ -12,7 +12,7 @@ export function getNextBuildBattleRank(score: number) {
 
     const next = STARS.indexOf(current) + 1
 
-    return next > STARS.length - 1 ? null : STARS[next]
+    return next > STARS.length - 1 ? STARS.at(-1)! : STARS[next]
 }
 
 export function getBuildBattleModeName(id: typeof MODES[number]["id"]) {