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

src/ui/CharacterCreateScreen.tsx

@@ -34,12 +34,15 @@ export function CharacterCreateScreen() {
   const race = raceById(draft.raceId);
   const characterClass = classById(draft.classId);
   const availableRaces = useMemo(() => racesForCategory(draft.categoryId), [draft.categoryId]);
-  const availableClasses = useMemo(() => classesForRace(draft.raceId), [draft.raceId]);
+  const availableClasses = useMemo(
+    () => classesForRace(draft.raceId, draft.categoryId),
+    [draft.categoryId, draft.raceId],
+  );
   const appearanceLabels = race.labels[draft.gender];
   const appearanceCounts = race.counts[draft.gender];
 
   const chooseRace = (raceId: RaceId) => {
-    const nextClasses = classesForRace(raceId);
+    const nextClasses = classesForRace(raceId, draft.categoryId);
     const nextGenders = supportedGenders(raceId);
     const classId = nextClasses.some((definition) => definition.id === draft.classId)
       ? draft.classId
@@ -154,7 +157,7 @@ export function CharacterCreateScreen() {
                 </div>
               </main>
               <section className="creator-classes">
-                <header><span>02</span><div><strong>Class</strong><small>{availableClasses.length} {draft.categoryId === "rom" ? "RuneWaker" : "WoW / Ascension"} classes available to {race.name}</small></div></header>
+                <header><span>02</span><div><strong>Class</strong><small>{availableClasses.length} {draft.categoryId === "rom" ? "RuneWaker" : draft.categoryId === "coa" ? "CoA" : "WoW"} classes available to {race.name}</small></div></header>
                 <div className="class-grid">
                   {availableClasses.map((definition) => (
                     <ControllerButton