44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
import { gameRuntime } from '../state/runtime';
|
|
import { useGameStore } from '../state/store';
|
|
import { StoryProseLog } from './StoryProseLog';
|
|
import { StoryTree } from './StoryTree';
|
|
|
|
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;
|
|
|
|
if (isBootIntro) {
|
|
return (
|
|
<div className="flex h-[calc(100dvh-6rem)] 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 h-[calc(100dvh-6rem)] grid-cols-[3fr_2fr] gap-4">
|
|
<StoryTree
|
|
nodes={tree}
|
|
selectedId={selectedId}
|
|
onSelect={(id) => useGameStore.getState().setSelectedStoryNodeId(id)}
|
|
/>
|
|
<StoryProseLog log={log} selectedId={selectedId} />
|
|
</div>
|
|
);
|
|
}
|