feat(ui): story tab with tree and prose log
This commit is contained in:
ginnoir
@@ -0,0 +1,73 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
import type { StoryLogEntry } from '../state/store';
|
||||
|
||||
interface StoryProseLogProps {
|
||||
log: StoryLogEntry[];
|
||||
selectedId: string | null;
|
||||
}
|
||||
|
||||
export function StoryProseLog({ log, selectedId }: StoryProseLogProps) {
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const selectedEntryRef = useRef<HTMLLIElement>(null);
|
||||
const prevLogCountRef = useRef(log.length);
|
||||
|
||||
// Auto-scroll to bottom when new entries arrive
|
||||
useEffect(() => {
|
||||
if (log.length > prevLogCountRef.current && !selectedId && scrollRef.current) {
|
||||
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
|
||||
}
|
||||
prevLogCountRef.current = log.length;
|
||||
}, [log.length, selectedId]);
|
||||
|
||||
// Scroll to selected entry when selectedId changes
|
||||
useEffect(() => {
|
||||
if (selectedId && selectedEntryRef.current) {
|
||||
selectedEntryRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
}, [selectedId]);
|
||||
|
||||
if (log.length === 0) {
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center rounded-xl border border-slate-800/60 bg-slate-900/40 shadow-inner">
|
||||
<p className="text-sm text-slate-500 italic">The chronicle is empty…</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={scrollRef}
|
||||
className="overflow-y-auto rounded-xl border border-slate-800/60 bg-slate-900/40 p-4 shadow-inner"
|
||||
>
|
||||
<h2 className="mb-3 text-xs font-semibold tracking-wider text-slate-400 uppercase">
|
||||
Prose Log
|
||||
</h2>
|
||||
<ul className="space-y-3">
|
||||
{log.map((entry, i) => {
|
||||
const isHighlighted = selectedId != null && entry.nodeId === selectedId;
|
||||
// Find first matching entry for the scroll-into-view ref
|
||||
const isFirstMatch = isHighlighted && log.findIndex((e) => e.nodeId === selectedId) === i;
|
||||
|
||||
return (
|
||||
<li
|
||||
key={`${entry.nodeId}:${String(i)}`}
|
||||
ref={isFirstMatch ? selectedEntryRef : undefined}
|
||||
className={`rounded-lg border px-3 py-2 text-sm leading-relaxed transition-colors duration-200 ${
|
||||
isHighlighted
|
||||
? 'border-amber-500/30 bg-amber-500/10 text-slate-100'
|
||||
: 'border-transparent text-slate-300'
|
||||
}`}
|
||||
>
|
||||
{entry.choiceLabel ? (
|
||||
<span className="mb-1 mr-2 inline-block rounded bg-amber-500/20 px-1.5 py-0.5 text-xs font-medium text-amber-300">
|
||||
{entry.choiceLabel}
|
||||
</span>
|
||||
) : null}
|
||||
<span className="whitespace-pre-wrap">{entry.prose}</span>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
import type { StoryTreeNodeView } from '../state/viewModel';
|
||||
|
||||
interface StoryTreeProps {
|
||||
nodes: StoryTreeNodeView[];
|
||||
selectedId: string | null;
|
||||
onSelect: (id: string) => void;
|
||||
}
|
||||
|
||||
interface StoryTreeNodeProps {
|
||||
node: StoryTreeNodeView;
|
||||
depth: number;
|
||||
selectedId: string | null;
|
||||
onSelect: (id: string) => void;
|
||||
}
|
||||
|
||||
function StoryTreeNode({ node, depth, selectedId, onSelect }: StoryTreeNodeProps) {
|
||||
const isSelected = node.id === selectedId;
|
||||
|
||||
let labelClasses =
|
||||
'w-full cursor-pointer rounded px-2 py-1 text-left text-sm transition-colors duration-150';
|
||||
|
||||
if (isSelected) {
|
||||
labelClasses += ' bg-amber-500/15 border border-amber-500/40 text-amber-200';
|
||||
} else if (node.active) {
|
||||
labelClasses += ' text-amber-400 hover:bg-slate-800/60 border border-transparent';
|
||||
} else if (!node.seen) {
|
||||
labelClasses += ' text-slate-600 hover:bg-slate-800/40 border border-transparent';
|
||||
} else {
|
||||
labelClasses += ' text-slate-300 hover:bg-slate-800/60 border border-transparent';
|
||||
}
|
||||
|
||||
return (
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
className={labelClasses}
|
||||
style={{ marginLeft: `${depth * 1}rem` }}
|
||||
onClick={() => onSelect(node.id)}
|
||||
aria-pressed={isSelected}
|
||||
>
|
||||
<span className="flex items-center gap-1.5">
|
||||
{node.active && (
|
||||
<span className="inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-amber-400" />
|
||||
)}
|
||||
{node.label}
|
||||
</span>
|
||||
</button>
|
||||
{node.children.length > 0 && (
|
||||
<ul className="mt-0.5 space-y-0.5">
|
||||
{node.children.map((child) => (
|
||||
<StoryTreeNode
|
||||
key={child.id}
|
||||
node={child}
|
||||
depth={depth + 1}
|
||||
selectedId={selectedId}
|
||||
onSelect={onSelect}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
export function StoryTree({ nodes, selectedId, onSelect }: StoryTreeProps) {
|
||||
if (nodes.length === 0) {
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<p className="text-sm text-slate-500 italic">No story branches yet…</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="overflow-y-auto rounded-xl border border-slate-800/60 bg-slate-900/40 p-4 shadow-inner">
|
||||
<h2 className="mb-3 text-xs font-semibold tracking-wider text-slate-400 uppercase">
|
||||
Story Tree
|
||||
</h2>
|
||||
<ul className="space-y-0.5">
|
||||
{nodes.map((node) => (
|
||||
<StoryTreeNode
|
||||
key={node.id}
|
||||
node={node}
|
||||
depth={0}
|
||||
selectedId={selectedId}
|
||||
onSelect={onSelect}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+24
-57
@@ -1,65 +1,24 @@
|
||||
import { gameRuntime } from '../state/runtime';
|
||||
import { useGameStore } from '../state/store';
|
||||
import { StoryProseLog } from './StoryProseLog';
|
||||
import { StoryTree } from './StoryTree';
|
||||
|
||||
export function StoryView() {
|
||||
const story = useGameStore((s) => s.story);
|
||||
const storyLog = useGameStore((s) => s.storyLog);
|
||||
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);
|
||||
|
||||
const hasChoices = story.choices.length > 0;
|
||||
// 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-full flex-col gap-8 lg:grid lg:grid-cols-3">
|
||||
{/* Story Log Section */}
|
||||
<div className="order-2 flex max-h-[30vh] flex-col overflow-y-auto border-slate-800 border-t pt-6 lg:order-1 lg:max-h-[calc(100vh-6rem)] lg:border-t-0 lg:border-r lg:pt-0 lg:pr-6">
|
||||
<h2 className="mb-4 text-xs font-semibold text-slate-400 tracking-wider uppercase">
|
||||
Story Log
|
||||
</h2>
|
||||
{storyLog.length === 0 ? (
|
||||
<p className="text-sm text-slate-500 italic">The chronicle is empty...</p>
|
||||
) : (
|
||||
<ul className="space-y-3 text-sm text-slate-300">
|
||||
{storyLog.map((entry) => (
|
||||
<li
|
||||
key={`${entry.nodeId}:${entry.choiceLabel ?? ''}:${entry.prose}`}
|
||||
className="border-slate-900 border-b pb-2 last:border-0"
|
||||
>
|
||||
{entry.choiceLabel ? (
|
||||
<span className="font-medium text-amber-400/80">[{entry.choiceLabel}] </span>
|
||||
) : null}
|
||||
<span className="leading-relaxed">{entry.prose}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Active Node Section */}
|
||||
<div className="order-1 flex min-h-[300px] flex-col justify-between rounded-xl border border-slate-800/60 bg-slate-900/40 p-6 shadow-inner lg:order-2 lg:col-span-2">
|
||||
<div className="flex flex-1 flex-col justify-center">
|
||||
<p className="text-lg text-slate-100 leading-relaxed whitespace-pre-wrap">
|
||||
{story.currentProse ||
|
||||
'The path ahead is shrouded in mist. Begin an action to unveil your story.'}
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{story.currentProse && (
|
||||
<div className="mt-6 border-slate-800/80 border-t pt-6">
|
||||
{hasChoices ? (
|
||||
<div className="flex flex-col gap-2">
|
||||
{story.choices.map((choice) => (
|
||||
<button
|
||||
key={choice.id}
|
||||
type="button"
|
||||
disabled={choice.disabled}
|
||||
title={choice.disabled ? (choice.disabledReason ?? undefined) : undefined}
|
||||
onClick={() => gameRuntime.applyStoryChoice(choice.id)}
|
||||
className="w-full cursor-pointer rounded-lg border border-slate-700 bg-slate-950/40 px-4 py-3 text-left text-slate-200 transition-all duration-200 hover:border-amber-500/60 hover:bg-slate-900/60 disabled:cursor-not-allowed disabled:opacity-40"
|
||||
>
|
||||
{choice.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => gameRuntime.continueStory()}
|
||||
@@ -67,10 +26,18 @@ export function StoryView() {
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user