feat(ui): app shell with nav rail

2026-06-11 21:24:42 -05:00
parent ed9607e9e8
commit ee79872d4d
8 changed files with 432 additions and 48 deletions
@@ -0,0 +1,76 @@
+import { gameRuntime } from '../state/runtime';
+import { useGameStore } from '../state/store';
+
+export function StoryView() {
+  const story = useGameStore((s) => s.story);
+  const storyLog = useGameStore((s) => s.storyLog);
+
+  const hasChoices = story.choices.length > 0;
+
+  return (
+    <div className="grid h-full grid-cols-1 gap-8 lg:grid-cols-3">
+      {/* Story Log Section */}
+      <div className="flex max-h-[30vh] flex-col overflow-y-auto border-slate-800 lg:max-h-[calc(100vh-6rem)] lg:border-r 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="flex min-h-[300px] flex-col justify-between rounded-xl border border-slate-800/60 bg-slate-900/40 p-6 shadow-inner 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>
+  );
+}