ginnoir
880abe5888
Finding 1 (critical): atBootIntro was derived from tree.length === 0 in
StoryView.tsx, but buildStoryTree always returns all topology-root nodes,
so tree.length is always > 0 and the Continue button never rendered.
Fix: add atBootIntro: boolean to StoryView (viewModel), computed by
finding the boot-trigger node id without hardcoding the literal string,
then comparing to the current node. StoryView.tsx reads it from the store.
Also add a viewModel test covering both true and false cases.
Finding 2: onSelect in StoryView.tsx called useGameStore.getState()
directly, bypassing the runtime command layer. Fix: add
GameRuntime.selectStoryNode(id) and wire onSelect through gameRuntime.
Finding 3: aria-pressed on story tree nodes wrongly signals toggle-button
semantics. Fix: replace with aria-current={isSelected ? 'true' : undefined}.
Optional: hoist h-[calc(100dvh-6rem)] to SHELL_HEIGHT const in StoryView.tsx.
43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
import { gameRuntime } from '../state/runtime';
|
|
import { useGameStore } from '../state/store';
|
|
import { StoryProseLog } from './StoryProseLog';
|
|
import { StoryTree } from './StoryTree';
|
|
|
|
const SHELL_HEIGHT = 'h-[calc(100dvh-6rem)]';
|
|
|
|
export function StoryView() {
|
|
const tree = useGameStore((s) => s.story.tree);
|
|
const log = useGameStore((s) => s.storyLog);
|
|
const selectedId = useGameStore((s) => s.selectedStoryNodeId);
|
|
const currentProse = useGameStore((s) => s.story.currentProse);
|
|
const isBootIntro = useGameStore((s) => s.story.atBootIntro);
|
|
|
|
if (isBootIntro) {
|
|
return (
|
|
<div className={`flex ${SHELL_HEIGHT} flex-col items-center justify-center gap-6`}>
|
|
<p className="max-w-lg text-center text-lg leading-relaxed text-slate-100 whitespace-pre-wrap">
|
|
{currentProse}
|
|
</p>
|
|
<button
|
|
type="button"
|
|
onClick={() => gameRuntime.continueStory()}
|
|
className="cursor-pointer rounded-lg bg-amber-600 px-6 py-2.5 font-medium text-slate-100 transition-colors hover:bg-amber-500"
|
|
>
|
|
Continue
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={`grid ${SHELL_HEIGHT} grid-cols-[3fr_2fr] gap-4`}>
|
|
<StoryTree
|
|
nodes={tree}
|
|
selectedId={selectedId}
|
|
onSelect={(id) => gameRuntime.selectStoryNode(id)}
|
|
/>
|
|
<StoryProseLog log={log} selectedId={selectedId} />
|
|
</div>
|
|
);
|
|
}
|