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

Added tooltip to progress

Browse Source
This commit is contained in:
Taken
2025-08-31 21:11:52 +02:00
parent 6834210999
commit 6686f703bd
2 changed files with 19 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -159,11 +159,16 @@ export function SkywarsLevel({ xp, icon }: { xp: number, icon: string | undefine
) )
} }
export function SkywarsProgress({ level, percent }: { level: number, percent: number }) { export function SkywarsProgress({ level, percent, currentXp, ceilingXp }: { level: number, percent: number, currentXp: number, ceilingXp: number }) {
return ( return (
<div className="flex items-center mb-10"> <div className="flex items-center mb-10">
<LevelNumber level={level} className="mr-2" /> <LevelNumber level={level} className="mr-2" />
<Progress level={level} percent={percent} /> <Progress
level={level}
percent={percent}
tooltipId="skywars-progress"
tooltipContent={`${formatNumber(currentXp)}/${formatNumber(ceilingXp)} XP`}
/>
<LevelNumber level={level + 1} className="ml-2" /> <LevelNumber level={level + 1} className="ml-2" />
</div> </div>
) )
@@ -188,12 +193,12 @@ 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-${getTextColor(level).text}`, className)}>{level}</div>
} }
function Progress({ level, percent }: { level: number, percent: number }) { function Progress({ level, percent, tooltipId, tooltipContent }: { level: number, percent: number, tooltipId: string, tooltipContent: string }) {
if (level > 150 || level === 50) { if (level > 150 || level === 50) {
return <GenericProgress percent={percent} rainbow={true} /> return <GenericProgress percent={percent} rainbow={true} tooltipId={tooltipId} tooltipContent={tooltipContent} />
} }
return <GenericProgress percent={percent} className={`bg-mc-${getTextColor(level).text}`} /> return <GenericProgress percent={percent} className={`bg-mc-${getTextColor(level).text}`} tooltipId={tooltipId} tooltipContent={tooltipContent} />
} }
export function SkywarsPrestige({ level, icon }: { level: number, icon?: string }) { export function SkywarsPrestige({ level, icon }: { level: number, icon?: string }) {

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

@@ -46,12 +46,18 @@ export default function SkyWarsStats(
const kd = (stats.kills / stats.deaths).toFixed(2) const kd = (stats.kills / stats.deaths).toFixed(2)
const wl = (stats.wins / stats.losses).toFixed(2) const wl = (stats.wins / stats.losses).toFixed(2)
const current = getSkywarsXpForLevel(Math.floor(level))
const next = getSkywarsXpForLevel(Math.floor(level + 1))
const levelProgress = getProgress( const levelProgress = getProgress(
getSkywarsXpForLevel(Math.floor(level)), current,
stats.skywars_experience, stats.skywars_experience,
getSkywarsXpForLevel(Math.floor(level) + 1) next
) )
const xpProgress = stats.skywars_experience - current
const ceilingXp = next - current
const shardProgress = getProgress(0, stats.shard, 20000) const shardProgress = getProgress(0, stats.shard, 20000)
return ( return (
@@ -88,7 +94,7 @@ export default function SkyWarsStats(
</div> </div>
<CollapsibleContent> <CollapsibleContent>
<Separator className="my-4" /> <Separator className="my-4" />
<SkywarsProgress level={Math.floor(level)} percent={levelProgress} /> <SkywarsProgress level={Math.floor(level)} percent={levelProgress} currentXp={xpProgress} ceilingXp={ceilingXp} />
<SkyWarsGeneralStats statsChecked={stats} level={level} /> <SkyWarsGeneralStats statsChecked={stats} level={level} />
<Separator className="my-4" /> <Separator className="my-4" />
<SkywarsStatTable stats={stats} /> <SkywarsStatTable stats={stats} />