updating buff and debuff icons. separated COA classes from WoW classes on the character creation screen

src/ui/AuraStrip.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import type { AuraDisposition } from "../game/combatAuras";
+import type { AuraDefinition, AuraDisposition } from "../game/combatAuras";
 import { useCombatStore } from "../game/combatStore";
 import { formatTimedEffectTimer } from "../game/timedEffectDisplay";
 
@@ -9,6 +9,14 @@ interface AuraStripProps {
   readonly className?: string;
 }
 
+export function auraDefinitionDisplaysInStrip(definition: AuraDefinition): boolean {
+  return definition.hideFromAuraStrip !== true;
+}
+
+export function auraDefinitionIcon(definition: AuraDefinition): string | null {
+  return definition.icon?.trim() || null;
+}
+
 export function AuraStrip({
   targetId,
   dispositions = ["buff", "debuff"],
@@ -19,6 +27,7 @@ export function AuraStrip({
   const auras = allAuras.filter((aura) => (
     aura.targetId === targetId
     && dispositions.includes(aura.definition.disposition)
+    && auraDefinitionDisplaysInStrip(aura.definition)
     && (aura.expiresAt === null || aura.expiresAt > now)
   ));
 
@@ -36,6 +45,7 @@ export function AuraStrip({
         const remaining = aura.expiresAt === null ? null : Math.max(0, aura.expiresAt - now);
         const timer = remaining === null ? "" : formatTimedEffectTimer(remaining);
         const initial = aura.definition.name.trim().charAt(0).toUpperCase() || "*";
+        const icon = auraDefinitionIcon(aura.definition);
         return (
           <span
             key={aura.instanceId}
@@ -43,7 +53,9 @@ export function AuraStrip({
             aria-label={`${aura.definition.name}, ${aura.definition.disposition}${timer ? `, ${timer} remaining` : ""}`}
             title={`${aura.definition.name}${timer ? ` · ${timer} remaining` : ""}`}
           >
-            <span className="aura__initial" aria-hidden="true">{initial}</span>
+            {icon
+              ? <img className="aura__icon" src={icon} alt="" draggable={false} />
+              : <span className="aura__initial" aria-hidden="true">{initial}</span>}
             {aura.stacks > 1 ? <b className="aura__stacks">{aura.stacks}</b> : null}
             {timer ? <b className="aura__timer" aria-hidden="true">{timer}</b> : null}
           </span>