Added repaired weapons bar
This commit is contained in:
60
src/app/(stats)/player/[ign]/_stats/warlords/client.tsx
Normal file
60
src/app/(stats)/player/[ign]/_stats/warlords/client.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
"use client"
|
||||
|
||||
import { formatNumber } from "@/lib/formatters"
|
||||
import { getWarlordsWeaponsRepaired } from "@/lib/hypixel/warlords/general"
|
||||
import { NonNullStats } from "@/lib/schema/player"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { useEffect, useState } from "react"
|
||||
import { Tooltip } from "react-tooltip"
|
||||
|
||||
export function WarlordsWeaponsBar({ stats }: { stats: NonNullable<NonNullStats["Warlords"]> }) {
|
||||
const [pos, setPos] = useState({ x: 0, y: 0 })
|
||||
|
||||
useEffect(() => {
|
||||
const controller = new AbortController()
|
||||
|
||||
window.addEventListener("mousemove", (e) => {
|
||||
if (!(e.target instanceof HTMLDivElement)) return
|
||||
if (e.target.dataset.id !== "warlords-weapons-bar") return
|
||||
|
||||
setPos({ x: e.clientX, y: e.clientY - 10 })
|
||||
}, { signal: controller.signal })
|
||||
|
||||
return () => {
|
||||
controller.abort()
|
||||
}
|
||||
})
|
||||
|
||||
const repaired = getWarlordsWeaponsRepaired(stats)
|
||||
|
||||
return (
|
||||
<>
|
||||
<p>
|
||||
<span className="font-bold">{"Total Weapons Repaired: "}</span>
|
||||
<span>{formatNumber(stats.repaired)}</span>
|
||||
</p>
|
||||
<div className="flex overflow-hidden mt-2 mb-4 rounded-md">
|
||||
{repaired.map(({ repaired, num }) => {
|
||||
const percent = num / stats.repaired
|
||||
|
||||
if (percent === 0) return null
|
||||
|
||||
return (
|
||||
<div
|
||||
data-id="warlords-weapons-bar"
|
||||
data-tooltip-id="warlords-weapons-bar"
|
||||
data-tooltip-content={`${formatNumber(num)} ${repaired.name} Weapons`}
|
||||
key={repaired.id}
|
||||
className={cn("h-5", `bg-mc-${repaired.color}`)}
|
||||
style={{
|
||||
width: `${percent * 100}%`
|
||||
}}
|
||||
>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<Tooltip id="warlords-weapons-bar" position={pos} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -4,6 +4,7 @@ import { devide } from "@/lib/hypixel/general"
|
||||
import { getWarlordsLosses, getWarlordsMostPlayedClass } from "@/lib/hypixel/warlords/general"
|
||||
import { NonNullStats } from "@/lib/schema/player"
|
||||
import GeneralStats from "../GeneralStats"
|
||||
import { WarlordsWeaponsBar } from "./client"
|
||||
import WarlordsGeneralStats from "./stats"
|
||||
|
||||
export default function WarlordsStats({ stats }: { stats: NonNullStats["Warlords"] }) {
|
||||
@@ -39,6 +40,9 @@ export default function WarlordsStats({ stats }: { stats: NonNullStats["Warlords
|
||||
>
|
||||
<Separator className="my-4" />
|
||||
<WarlordsGeneralStats stats={stats} />
|
||||
<Separator className="my-4" />
|
||||
<WarlordsWeaponsBar stats={stats} />
|
||||
<Separator className="my-4" />
|
||||
</GeneralStats>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@ export const MODES = [
|
||||
export const RARITIES = [
|
||||
{ id: "common", name: "Common", color: "green" },
|
||||
{ id: "rare", name: "Rare", color: "blue" },
|
||||
{ id: "epic", name: "Epic", color: "purple" },
|
||||
{ id: "epic", name: "Epic", color: "dark-purple" },
|
||||
{ id: "legendary", name: "Legendary", color: "gold" }
|
||||
] as const
|
||||
export const UPGRADES = [
|
||||
|
||||
@@ -1,6 +1,16 @@
|
||||
import { CLASSES } from "@/data/hypixel/warlords"
|
||||
import { CLASSES, RARITIES } from "@/data/hypixel/warlords"
|
||||
import { NonNullStats } from "@/lib/schema/player"
|
||||
|
||||
export function getWarlordsWeaponsRepaired(stats: NonNullable<NonNullStats["Warlords"]>) {
|
||||
const val: { repaired: typeof RARITIES[number], num: number }[] = []
|
||||
|
||||
for (const repaired of RARITIES.slice().reverse()) {
|
||||
val.push({ repaired, num: stats[`repaired_${repaired.id}`] })
|
||||
}
|
||||
|
||||
return val
|
||||
}
|
||||
|
||||
export function getWarlordsLosses(stats: NonNullable<NonNullStats["Warlords"]>) {
|
||||
return stats.mage_plays + stats.paladin_plays + stats.shaman_plays + stats.warrior_plays - stats.wins
|
||||
}
|
||||
|
||||
@@ -21,5 +21,10 @@ export const warlordsStatsSchema = z.object({
|
||||
mage_losses: z.number().default(0),
|
||||
paladin_losses: z.number().default(0),
|
||||
shaman_losses: z.number().default(0),
|
||||
warrior_losses: z.number().default(0)
|
||||
warrior_losses: z.number().default(0),
|
||||
repaired: z.number().default(0),
|
||||
repaired_common: z.number().default(0),
|
||||
repaired_rare: z.number().default(0),
|
||||
repaired_epic: z.number().default(0),
|
||||
repaired_legendary: z.number().default(0)
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user