feat: bootstrap walking skeleton

2026-06-11 17:06:52 -05:00
commit ec8f857845
44 changed files with 6677 additions and 0 deletions
@@ -0,0 +1,38 @@
+import { content } from '../content';
+import { gameRuntime } from '../state/runtime';
+import { useGameStore } from '../state/store';
+
+/** Action list — a start button per action, with a progress bar on the active one. */
+export function ActionPanel() {
+  const activeActionId = useGameStore((state) => state.activeActionId);
+  const actionProgress = useGameStore((state) => state.actionProgress);
+
+  return (
+    <section aria-label="Actions" className="flex flex-col gap-2">
+      <h2 className="font-medium text-slate-300 text-sm uppercase tracking-wide">Actions</h2>
+      {content.actions.map((action) => {
+        const isActive = action.id === activeActionId;
+        return (
+          <button
+            type="button"
+            key={action.id}
+            onClick={() => gameRuntime.startAction(action.id)}
+            className="relative overflow-hidden rounded-lg border border-slate-700 bg-slate-800/70 px-4 py-3 text-left transition-colors hover:border-amber-500/60 hover:bg-slate-800"
+          >
+            {isActive ? (
+              <div
+                className="absolute inset-y-0 left-0 bg-amber-500/15"
+                style={{ width: `${Math.round(actionProgress * 100)}%` }}
+                aria-hidden="true"
+              />
+            ) : null}
+            <div className="relative flex items-center justify-between">
+              <span className="font-medium text-slate-100">{action.name}</span>
+              <span className="text-slate-400 text-xs">{isActive ? 'running…' : 'start'}</span>
+            </div>
+          </button>
+        );
+      })}
+    </section>
+  );
+}