Release Healer Man 0.1.43

src/ui/ArenaActionBar.tsx

@@ -8,6 +8,7 @@ import { currentUiDevice, useUiLayoutStore } from "../game/uiLayoutStore";
 import { ActionBar, ActionIcon, type ActionBarItem, type ActionBarItems } from "./ActionBar";
 import { useInputBindingLabels } from "../input/useInputBindingLabels";
 import { useArenaStore } from "../game/arenaStore";
+import { AbilityTooltipTarget } from "./AbilityTooltip";
 
 const PC_ACTION_CONTROLS = ["face-bottom", "face-left", "face-top", "face-right", "r1", "r2", "dpad-left", "dpad-right"] as const;
 
@@ -38,6 +39,7 @@ export function ArenaActionBar({ character, actor, layer, inputMode, blocked, on
       resourceCost: ability.cost.amount, resourceLabel: kit.resource.name,
       cooldownDuration: Math.max(ability.cooldownMs, ability.gcdMs) / 1000,
       cooldownRemaining: remaining,
+      cooldownSeconds: ability.cooldownMs / 1000, castSeconds: ability.castTimeMs / 1000, range: ability.range.max,
       disabled: blocked || !actor?.alive || !learned || remaining > 0 || actor.effects.some((effect) => effect.id.startsWith("casting:")),
       lockedUntilLevel: learned ? undefined : ability.unlockLevel,
     }];
@@ -65,12 +67,13 @@ export function ArenaActionBar({ character, actor, layer, inputMode, blocked, on
         {desktopBars.map((bar, index) => <section key={index} aria-label={`Action bar ${index + 1}`} style={{ gridTemplateColumns: `repeat(${bar.columns}, minmax(0, 1fr))` }}>
           {bar.slots.map((slot, slotIndex) => {
             const item = slot.abilityId ? items[slot.abilityId] : null;
-            return <button type="button" key={slotIndex} disabled={!item || item.disabled}
+            return <AbilityTooltipTarget key={slotIndex} ability={item} bindingLabel={slot.label}>
+              <button type="button" aria-disabled={!item || item.disabled}
               aria-label={`${item?.name ?? "Empty"}, ${slot.label}`} title={item?.description ?? "Empty binding"}
-              onClick={() => item && onCast(item.id)}>
+              onClick={() => item && !item.disabled && onCast(item.id)}>
               <kbd>{slot.label}</kbd><ActionIcon item={item ?? null} /><span>{item?.name ?? "Empty"}</span>
               {item && (item.cooldownRemaining ?? 0) > 0 && <em>{item.cooldownRemaining!.toFixed(1)}</em>}
-            </button>;
+            </button></AbilityTooltipTarget>;
           })}
         </section>)}
       </nav>