2026-06-11 22:52:29 -05:00
3 changed files with 198 additions and 66 deletions
@@ -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>
+  );
+}
@@ -1,76 +1,43 @@
 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-[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="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.'}
-          </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()}
-                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>
-        )}
-      </div>
+    <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>
  );
 }