fix(ui): restore boot-intro continue and fix story tree a11y
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.
This commit is contained in:
@@ -3,19 +3,18 @@ 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 choicesLength = useGameStore((s) => s.story.choices.length);
|
||||
|
||||
// Boot intro: show Continue button when there's prose, no choices, and no tree yet
|
||||
const isBootIntro = currentProse != null && choicesLength === 0 && tree.length === 0;
|
||||
const isBootIntro = useGameStore((s) => s.story.atBootIntro);
|
||||
|
||||
if (isBootIntro) {
|
||||
return (
|
||||
<div className="flex h-[calc(100dvh-6rem)] flex-col items-center justify-center gap-6">
|
||||
<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>
|
||||
@@ -31,11 +30,11 @@ export function StoryView() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid h-[calc(100dvh-6rem)] grid-cols-[3fr_2fr] gap-4">
|
||||
<div className={`grid ${SHELL_HEIGHT} grid-cols-[3fr_2fr] gap-4`}>
|
||||
<StoryTree
|
||||
nodes={tree}
|
||||
selectedId={selectedId}
|
||||
onSelect={(id) => useGameStore.getState().setSelectedStoryNodeId(id)}
|
||||
onSelect={(id) => gameRuntime.selectStoryNode(id)}
|
||||
/>
|
||||
<StoryProseLog log={log} selectedId={selectedId} />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user