Release Healer Man 0.1.22

src/ui/AuraStrip.tsx

@@ -5,6 +5,7 @@ import { formatTimedEffectTimer } from "../game/timedEffectDisplay";
 import {
   auraDefinitionDisplaysInStrip,
   auraDefinitionIcon,
+  auraDefinitionIsDispellableDebuff,
   auraDefinitionIsLongTerm,
   auraDescription,
   auraDisplayName,
@@ -19,6 +20,7 @@ interface AuraStripProps {
   readonly className?: string;
   readonly hideLongTerm?: boolean;
   readonly showOnlyLongTerm?: boolean;
+  readonly highlightDispellableDebuffs?: boolean;
   readonly targetLabels?: Readonly<Record<string, string>>;
   readonly onInspect?: StatusEffectInspectHandler;
   readonly tooltipId?: string;
@@ -31,6 +33,7 @@ export function AuraStrip({
   className = "",
   hideLongTerm = false,
   showOnlyLongTerm = false,
+  highlightDispellableDebuffs = false,
   targetLabels,
   onInspect,
   tooltipId,
@@ -64,6 +67,9 @@ export function AuraStrip({
         const targetLabel = targetLabels?.[aura.targetId];
         const initial = displayName.charAt(0).toUpperCase() || "*";
         const icon = auraDefinitionIcon(aura.definition);
+        const dispellable = highlightDispellableDebuffs
+          && auraDefinitionIsDispellableDebuff(aura.definition);
+        const dispelLabel = dispellable ? `, dispellable ${aura.definition.dispelCategory}` : "";
         const inspection: StatusEffectInspection = {
           id: aura.instanceId,
           name: displayName,
@@ -79,11 +85,11 @@ export function AuraStrip({
         return (
           <span
             key={aura.instanceId}
-            className={`aura aura--${aura.definition.disposition} ${onInspect ? "aura--inspectable" : ""}`.trim()}
+            className={`aura aura--${aura.definition.disposition} ${dispellable ? "aura--dispellable" : ""} ${onInspect ? "aura--inspectable" : ""}`.trim()}
             tabIndex={onInspect ? 0 : undefined}
-            aria-label={`${displayName}${targetLabel ? ` on ${targetLabel}` : ""}, ${aura.definition.disposition}${timer ? `, ${timer} remaining` : ""}`}
+            aria-label={`${displayName}${targetLabel ? ` on ${targetLabel}` : ""}, ${aura.definition.disposition}${dispelLabel}${timer ? `, ${timer} remaining` : ""}`}
             aria-describedby={onInspect ? tooltipId : undefined}
-            title={onInspect ? undefined : `${displayName}${timer ? ` · ${timer} remaining` : ""}`}
+            title={onInspect ? undefined : `${displayName}${dispellable ? ` · Dispellable ${aura.definition.dispelCategory}` : ""}${timer ? ` · ${timer} remaining` : ""}`}
             onPointerEnter={onInspect ? () => onInspect(inspection) : undefined}
             onPointerLeave={onInspect ? (event) => {
               if (event.currentTarget !== document.activeElement) onInspect(null);