Release Healer Man 0.1.43

src/ui/MainMenuCharacterEditor.tsx

@@ -0,0 +1,53 @@
+import { lazy, Suspense, useEffect, useState } from "react";
+import { classById } from "../app/characterCatalog";
+import { beginMainMenuCharacterEditing } from "../app/mainMenuCharacterEditing";
+import { selectedCharacter, useShellStore } from "../app/shellStore";
+import { DualDisplayFrame } from "../components/DualDisplayFrame";
+import { AbilityBindingsPanel } from "./AbilityBindingsPanel";
+import { BrandMark, FrontSurface } from "./FrontSurface";
+import { KeybindsPanel } from "./KeybindsPanel";
+import { RomSkillsPanel } from "./RomSkillsPanel";
+import { loadTalentGameplayPanel } from "./talentGameplayResources";
+import "./mainMenuCharacterEditor.css";
+
+const TalentGameplayPanel = lazy(loadTalentGameplayPanel);
+export type MainMenuEditor = "talents" | "keybinds" | "bindings";
+
+export function MainMenuCharacterEditor({ editor, onClose }: {
+  editor: MainMenuEditor;
+  onClose: () => void;
+}) {
+  const character = useShellStore(selectedCharacter);
+  const ownerId = useShellStore((state) => state.session?.ownerId);
+  const notice = useShellStore((state) => state.notice);
+  const characterKey = `${ownerId ?? ""}:${character?.id ?? ""}`;
+  const [readyKey, setReadyKey] = useState<string | null>(null);
+
+  useEffect(() => {
+    const stop = beginMainMenuCharacterEditing();
+    setReadyKey(stop ? characterKey : null);
+    return () => stop?.();
+  }, [characterKey]);
+
+  const ready = readyKey === characterKey;
+  return <DualDisplayFrame companionDisabled contextLabel="Character setup" bottom={null} top={
+    <FrontSurface className="main-menu-character-editor" ariaLabel="Main menu character setup">
+      <header className="main-menu-character-editor__header">
+        <BrandMark compact />
+        <div><strong>{character?.name ?? "Character setup"}</strong>
+          <span>{character ? `Level ${character.level} ${classById(character.classId).name}` : "Select a character to edit."}</span></div>
+        <button className="front-button" type="button" onClick={onClose}>Back to main menu</button>
+      </header>
+      {notice && <p className="front-notice" role="status">{notice}</p>}
+      <div className="main-menu-character-editor__panel">
+        {!ready ? <p role="status">Preparing character…</p> : <Suspense fallback={<p role="status">Opening talents…</p>}>
+          {editor === "talents" && (character?.categoryId === "rom"
+            ? <RomSkillsPanel open onClose={onClose} />
+            : <TalentGameplayPanel open onClose={onClose} />)}
+          {editor === "keybinds" && <KeybindsPanel open onClose={onClose} />}
+          {editor === "bindings" && <AbilityBindingsPanel open onClose={onClose} />}
+        </Suspense>}
+      </div>
+    </FrontSurface>
+  } />;
+}