projects/hypixel-stats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Made generic progress

Browse Source
This commit is contained in:
Taken
2025-08-29 13:07:03 +02:00
parent 2b8e4a55dd
commit 06adea0098
5 changed files with 63 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/app/(stats)/player/[ign]/_components/GenericProgress.tsx Normal file
View File

@@ -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>
</>
)
}

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

@@ -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)}`} />
}

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

@@ -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 }) {

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

@@ -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>

3
src/lib/schema/stats.ts
View File

@@ -246,5 +246,6 @@ export const skywarsStatsSchema = z.looseObject({
kills_ranked_normal: z.number().default(0),
deaths_ranked_normal: z.number().default(0),
wins_ranked_normal: z.number().default(0),
losses_ranked_normal: z.number().default(0)
losses_ranked_normal: z.number().default(0),
shard: z.number().default(0)
})