38 lines
1.0 KiB
TypeScript
38 lines
1.0 KiB
TypeScript
import type { Iwt2HealerAbility } from '../content/healerAbilities'
|
|
|
|
export function AbilityBar({
|
|
abilities,
|
|
cooldowns,
|
|
mana,
|
|
onCast,
|
|
}: {
|
|
abilities: Iwt2HealerAbility[]
|
|
cooldowns: Record<string, number>
|
|
mana: number
|
|
onCast: (ability: Iwt2HealerAbility) => void
|
|
}) {
|
|
return (
|
|
<div className="iwt2-ability-bar">
|
|
{abilities.map((ability) => {
|
|
const remaining = cooldowns[ability.id] ?? 0
|
|
const disabled = remaining > 0 || mana < ability.manaCost
|
|
return (
|
|
<button
|
|
aria-label={`${ability.slot}. ${ability.name}`}
|
|
className="iwt2-ability-button"
|
|
disabled={disabled}
|
|
key={ability.id}
|
|
onClick={() => onCast(ability)}
|
|
title={`${ability.name} - ${ability.manaCost} MP`}
|
|
type="button"
|
|
>
|
|
<span>{ability.icon}</span>
|
|
<strong>{ability.slot}</strong>
|
|
<i>{remaining > 0 ? `${remaining.toFixed(1)}s` : `${ability.manaCost} MP`}</i>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|