forked from phenom/healer-man
54 lines
2.6 KiB
TypeScript
54 lines
2.6 KiB
TypeScript
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>
|
|
} />;
|
|
}
|