Release Healer Man 0.1.15

src/ui/CharacterCreateScreen.tsx

@@ -21,6 +21,8 @@ import { CharacterPreview } from "./CharacterPreview";
 import { ControllerButton } from "./ControllerButton";
 import { BrandMark, ControllerLegend, FrontSurface } from "./FrontSurface";
 import { LazyLocalCompanionPanel } from "./LazyLocalCompanionPanel";
+import { PARTY_ROLE_LABELS } from "../game/partyRoles";
+import { specializationsForClass } from "../game/specializationCatalog";
 
 export function CharacterCreateScreen() {
   const draft = useShellStore((state) => state.draft);
@@ -40,6 +42,7 @@ export function CharacterCreateScreen() {
   );
   const appearanceLabels = race.labels[draft.gender];
   const appearanceCounts = race.counts[draft.gender];
+  const specializationOptions = useMemo(() => specializationsForClass(draft.classId), [draft.classId]);
 
   const chooseRace = (raceId: RaceId) => {
     const nextClasses = classesForRace(raceId, draft.categoryId);
@@ -69,6 +72,7 @@ export function CharacterCreateScreen() {
       run: () => chooseGender(gender),
     })),
     ...availableClasses.map((definition) => ({ id: `class-${definition.id}`, run: () => updateDraft({ classId: definition.id }) })),
+    ...specializationOptions.map((definition) => ({ id: `spec-${definition.id}`, run: () => updateDraft({ specializationId: definition.id }) })),
     { id: "rotate-left", run: () => updateDraft({ rotation: draft.rotation - 12 }) },
     { id: "rotate-right", run: () => updateDraft({ rotation: draft.rotation + 12 }) },
     { id: "creator-back", run: cancel },
@@ -82,7 +86,7 @@ export function CharacterCreateScreen() {
     { id: "randomize", run: randomize },
     { id: "appearance-back", run: () => setStep("identity") },
     { id: "create-character", run: createCharacter },
-  ], [draft, appearanceCounts, availableClasses, availableRaces, cancel, createCharacter, randomize, setStep, updateDraft]);
+  ], [draft, appearanceCounts, availableClasses, availableRaces, cancel, createCharacter, randomize, setStep, specializationOptions, updateDraft]);
   const controller = useMenuController(actions, {
     columns: draft.step === "identity" ? 5 : 2,
     initialId: draft.step === "identity" ? `race-${draft.raceId}` : "character-name",
@@ -180,6 +184,25 @@ export function CharacterCreateScreen() {
                   <span>{characterClass.description}</span>
                   <small>{characterClass.armor} / {characterClass.resourceSummary} / {characterClass.specializations.length ? characterClass.specializations.join(" · ") : "Automatic skill ranks"}</small>
                 </div>
+                {specializationOptions.length > 0 && (
+                  <div className="creator-specializations" aria-label="Specialization">
+                    <strong>Specialization</strong>
+                    {specializationOptions.map((definition) => (
+                      <ControllerButton
+                        key={definition.id}
+                        controlId={`spec-${definition.id}`}
+                        selectedId={controller.selectedId}
+                        select={controller.select}
+                        className={draft.specializationId === definition.id ? "is-active" : ""}
+                        type="button"
+                        onClick={() => updateDraft({ specializationId: definition.id })}
+                      >
+                        <span>{definition.displayName}</span>
+                        <small>{PARTY_ROLE_LABELS[definition.role]} / {definition.talentTree}</small>
+                      </ControllerButton>
+                    ))}
+                  </div>
+                )}
               </section>
               <footer className="creator-footer">
                 <ControllerButton controlId="creator-back" selectedId={controller.selectedId} select={controller.select} className="front-button" type="button" onClick={cancel}>Back to roster</ControllerButton>