Vibecode central

2026-07-31 19:50:55 -04:00
parent 1362f28585
commit a3ea76fdff
67 changed files with 6287 additions and 202 deletions
@@ -0,0 +1,43 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useCreator } from "../CreatorContext";
+import SelectorGrid from "../components/SelectorGrid";
+import Modal from "../components/Modal";
+import BackgroundBuilder from "../components/BackgroundBuilder";
+
+export default function BackgroundStep() {
+  const { backgrounds, refreshBackgrounds, draft, update } = useCreator();
+  const [builderOpen, setBuilderOpen] = useState(false);
+
+  useEffect(() => { refreshBackgrounds(); }, [refreshBackgrounds]);
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold text-neutral-100">Choose a Background</h2>
+        <p className="text-sm text-neutral-400 mt-1">Your character&apos;s life before adventuring.</p>
+      </div>
+
+      <SelectorGrid
+        items={backgrounds}
+        selectedId={draft.backgroundId}
+        onSelect={(b) => update({ backgroundId: b.id })}
+        onAddCustom={() => setBuilderOpen(true)}
+        addLabel="Add Background"
+        renderMeta={(b) => `${b.skillProficiencies?.length ?? 0} skills`}
+      />
+
+      <Modal open={builderOpen} onClose={() => setBuilderOpen(false)} title="Create Custom Background" wide confirmClose>
+        <BackgroundBuilder
+          onCancel={() => setBuilderOpen(false)}
+          onSave={async (b) => {
+            await refreshBackgrounds();
+            update({ backgroundId: b.id });
+            setBuilderOpen(false);
+          }}
+        />
+      </Modal>
+    </div>
+  );
+}