Update Healer Man server

src/ui/TimedEffectStrip.tsx

@@ -3,7 +3,7 @@ import { abilityById } from "../game/abilityCatalog";
 import { useCombatStore, type TimedCombatEffect } from "../game/combatStore";
 import {
   formatTimedEffectTimer,
-  timedEffectRemainingMs,
+  groupTimedEffectsForDisplay,
 } from "../game/timedEffectDisplay";
 import {
   timedEffectDescription,
@@ -41,20 +41,14 @@ function LiveTimedEffectStrip({
     return () => window.clearInterval(timer);
   }, []);
 
-  const visibleEffects = effects
-    .map((effect) => ({
-      effect,
-      ability: abilityById(effect.sourceAbilityId),
-      remainingMs: timedEffectRemainingMs(effect, now),
-    }))
-    .filter(({ remainingMs }) => remainingMs > 0)
-    .sort((left, right) => left.remainingMs - right.remainingMs);
+  const visibleEffects = groupTimedEffectsForDisplay(effects, now);
 
   if (!visibleEffects.length) return null;
 
   return (
     <span className={`timed-effect-strip ${className}`.trim()} aria-label="Periodic effects">
-      {visibleEffects.map(({ effect, ability, remainingMs }) => {
+      {visibleEffects.map(({ effect, stacks, remainingMs }) => {
+        const ability = abilityById(effect.sourceAbilityId);
         const label = ability?.name ?? effect.sourceAbilityId;
         const timer = formatTimedEffectTimer(remainingMs);
         const disposition = effect.kind === "hot" ? "buff" : "debuff";
@@ -64,16 +58,16 @@ function LiveTimedEffectStrip({
           disposition,
           description: timedEffectDescription(effect.kind, ability?.description),
           remainingLabel: `${timer} remaining`,
-          stacks: 1,
+          stacks,
         };
         return (
           <span
             key={effect.id}
             className={`timed-effect timed-effect--${effect.kind} ${onInspect ? "timed-effect--inspectable" : ""}`.trim()}
             tabIndex={onInspect ? 0 : undefined}
-            aria-label={`${label}, ${effect.kind === "hot" ? "healing" : "damage"} over time, ${timer} remaining`}
+            aria-label={`${label}, ${effect.kind === "hot" ? "healing" : "damage"} over time${stacks > 1 ? `, ${stacks} stacks` : ""}, ${timer} remaining`}
             aria-describedby={onInspect ? tooltipId : undefined}
-            title={onInspect ? undefined : `${label} · ${timer} remaining`}
+            title={onInspect ? undefined : `${label}${stacks > 1 ? ` · ${stacks} stacks` : ""} · ${timer} remaining`}
             onPointerEnter={onInspect ? () => onInspect(inspection) : undefined}
             onPointerLeave={onInspect ? (event) => {
               if (event.currentTarget !== document.activeElement) onInspect(null);
@@ -84,6 +78,7 @@ function LiveTimedEffectStrip({
             {ability?.icon
               ? <img src={ability.icon} alt="" draggable={false} />
               : <span className="timed-effect__fallback" aria-hidden="true">{effect.kind === "hot" ? "+" : "!"}</span>}
+            {stacks > 1 ? <b className="timed-effect__stacks" aria-hidden="true">{stacks}</b> : null}
             <b className="timed-effect__timer" aria-hidden="true">{timer}</b>
           </span>
         );