Release Healer Man 0.1.15

src/ui/ClassHallScreen.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useState } from "react";
 import { classById, raceById, type RomClassId } from "../app/characterCatalog";
 import { selectedCharacter, useShellStore } from "../app/shellStore";
+import type { CharacterProfile } from "../app/types";
 import {
   ROM_ELITE_SKILL_LEVELS,
   ROM_SECONDARY_UNLOCK_LEVEL,
@@ -13,9 +14,100 @@ import { CharacterPreview } from "./CharacterPreview";
 import { LazyLocalCompanionPanel } from "./LazyLocalCompanionPanel";
 import { ControllerButton } from "./ControllerButton";
 import { BrandMark, ControllerLegend, FrontSurface } from "./FrontSurface";
+import { PARTY_ROLE_LABELS } from "../game/partyRoles";
+import {
+  specializationById,
+  specializationsForClass,
+} from "../game/specializationCatalog";
 
 export function ClassHallScreen() {
   const character = useShellStore(selectedCharacter);
+  if (!character) return null;
+  return character.categoryId === "rom"
+    ? <RomClassHall character={character} />
+    : <SpecializationClassHall character={character} />;
+}
+
+function SpecializationClassHall({ character }: { readonly character: CharacterProfile }) {
+  const notice = useShellStore((state) => state.notice);
+  const returnToMainMenu = useShellStore((state) => state.returnToMainMenu);
+  const returnToCharacters = useShellStore((state) => state.returnToCharacters);
+  const changeSpecialization = useShellStore((state) => state.changeSelectedSpecialization);
+  const [pendingSpecializationId, setPendingSpecializationId] = useState<string | null>(null);
+  const options = useMemo(() => specializationsForClass(character.classId), [character.classId]);
+  const current = specializationById(character.specializationId);
+  const forced = current === null;
+  const goBack = forced ? returnToCharacters : returnToMainMenu;
+  const apply = (resetTalents: boolean) => {
+    if (!pendingSpecializationId || !changeSpecialization(pendingSpecializationId, resetTalents)) return;
+    setPendingSpecializationId(null);
+    if (forced) returnToMainMenu();
+  };
+  const actions = useMemo<MenuAction[]>(() => pendingSpecializationId ? [
+    { id: "specialization-cancel", run: () => setPendingSpecializationId(null) },
+    { id: "specialization-keep", run: () => apply(false) },
+    { id: "specialization-reset", run: () => apply(true) },
+  ] : [
+    ...options.map((definition) => ({ id: `specialization-${definition.id}`, run: () => setPendingSpecializationId(definition.id) })),
+    { id: "class-hall-back", run: goBack },
+  ], [goBack, options, pendingSpecializationId]);
+  const controller = useMenuController(actions, {
+    initialId: current ? `specialization-${current.id}` : options[0] ? `specialization-${options[0].id}` : "class-hall-back",
+    onBack: pendingSpecializationId ? () => setPendingSpecializationId(null) : goBack,
+  });
+  const race = raceById(character.raceId);
+  const characterClass = classById(character.classId);
+  const pending = specializationById(pendingSpecializationId);
+
+  return (
+    <DualDisplayFrame
+      contextLabel="Specialization details"
+      top={
+        <FrontSurface className="class-hall-screen" ariaLabel="Class Hall specialization selection">
+          <header className="class-hall-header">
+            <BrandMark compact />
+            <div><span>{characterClass.name} / Class Hall</span><strong>{forced ? "Choose your specialization to continue." : "Change your combat path."}</strong></div>
+            <ControllerButton controlId="class-hall-back" selectedId={controller.selectedId} select={controller.select} type="button" onClick={goBack}>{forced ? "Roster" : "Back"}</ControllerButton>
+          </header>
+          <aside className="class-hall-character">
+            <CharacterPreview character={character} />
+            <div><p className="front-kicker">{race.name} / Level {character.level}</p><h1>{character.name}</h1><strong style={{ color: characterClass.color }}>{characterClass.name}</strong>{current && <small>{current.displayName} / {PARTY_ROLE_LABELS[current.role]}</small>}</div>
+          </aside>
+          <main className="class-hall-content">
+            <section className="secondary-class-choice">
+              <p className="front-kicker">Specialization and heirloom profile</p>
+              <h2>{forced ? "A specialization is required" : `Current: ${current.displayName}`}</h2>
+              <p>Your saved specialization locks your activity role and tunes every heirloom stat and weapon slot. Talent points do not change specialization automatically.</p>
+              <div>{options.map((definition) => (
+                <ControllerButton key={definition.id} controlId={`specialization-${definition.id}`} selectedId={controller.selectedId} select={controller.select} className={`front-button secondary-class-option ${current?.id === definition.id ? "is-active" : ""}`} type="button" onClick={() => setPendingSpecializationId(definition.id)}>
+                  <b style={{ color: characterClass.color }}>{characterClass.sigil}</b>
+                  <span><strong>{definition.displayName}</strong><small>{PARTY_ROLE_LABELS[definition.role]} / {definition.gearArchetype.replaceAll("-", " ")} / {definition.weaponLayout.replaceAll("-", " ")}</small></span>
+                </ControllerButton>
+              ))}</div>
+            </section>
+            {notice && <p className="front-notice" role="status">{notice}</p>}
+          </main>
+          {pending && (
+            <div className="front-modal-backdrop"><section className="front-confirm" role="alertdialog" aria-modal="true" aria-labelledby="specialization-confirm-title">
+              <p className="front-kicker">Specialization change</p>
+              <h2 id="specialization-confirm-title">Become {pending.displayName}?</h2>
+              <p>Heirloom stats and your allowed activity role change immediately. Choose whether to preserve the current talent build and action bindings.</p>
+              <div>
+                <ControllerButton controlId="specialization-cancel" selectedId={controller.selectedId} select={controller.select} className="front-button" type="button" onClick={() => setPendingSpecializationId(null)}>Cancel</ControllerButton>
+                <ControllerButton controlId="specialization-keep" selectedId={controller.selectedId} select={controller.select} className="front-button" type="button" onClick={() => apply(false)}>Keep talents</ControllerButton>
+                <ControllerButton controlId="specialization-reset" selectedId={controller.selectedId} select={controller.select} className="front-button front-button--primary" type="button" onClick={() => apply(true)}>Reset talents</ControllerButton>
+              </div>
+            </section></div>
+          )}
+          <ControllerLegend back />
+        </FrontSurface>
+      }
+      bottom={<LazyLocalCompanionPanel />}
+    />
+  );
+}
+
+function RomClassHall({ character }: { readonly character: CharacterProfile }) {
   const notice = useShellStore((state) => state.notice);
   const returnToMainMenu = useShellStore((state) => state.returnToMainMenu);
   const chooseSecondary = useShellStore((state) => state.chooseRomSecondaryClass);
@@ -38,7 +130,6 @@ export function ClassHallScreen() {
     onBack: pendingClassId ? () => setPendingClassId(null) : returnToMainMenu,
   });
 
-  if (!character) return null;
   const race = raceById(character.raceId);
   const primary = classById(character.classId);
   const secondary = character.secondaryClassId ? classById(character.secondaryClassId) : null;