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,70 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useCreator } from "../CreatorContext";
+import SelectorGrid from "../components/SelectorGrid";
+import Modal from "../components/Modal";
+import ClassBuilder from "../components/ClassBuilder";
+
+export default function ClassStep() {
+  const { classes, refreshClasses, draft, update } = useCreator();
+  const [builderOpen, setBuilderOpen] = useState(false);
+
+  useEffect(() => { refreshClasses(); }, [refreshClasses]);
+
+  const selectedClassId = draft.classes[0]?.classId;
+
+  const selectClass = (classId: string) => {
+    update({
+      classes: [{ classId, level: draft.classes[0]?.level ?? 1 }],
+    });
+  };
+
+  const setLevel = (level: number) => {
+    if (!draft.classes[0]) return;
+    update({ classes: [{ ...draft.classes[0], level }] });
+  };
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold text-neutral-100">Choose a Class</h2>
+        <p className="text-sm text-neutral-400 mt-1">Multi-classing planned for later. Pick one for now.</p>
+      </div>
+
+      {selectedClassId && (
+        <div className="flex items-center gap-3 p-3 bg-neutral-800/60 rounded border border-neutral-700">
+          <label className="text-sm text-neutral-300">Starting level:</label>
+          <input
+            type="number"
+            min={1}
+            max={20}
+            value={draft.classes[0]?.level ?? 1}
+            onChange={(e) => setLevel(Math.max(1, Math.min(20, Number(e.target.value) || 1)))}
+            className="w-20 bg-neutral-950 border border-neutral-700 rounded px-2 py-1 text-sm"
+          />
+        </div>
+      )}
+
+      <SelectorGrid
+        items={classes}
+        selectedId={selectedClassId}
+        onSelect={(c) => selectClass(c.id)}
+        onAddCustom={() => setBuilderOpen(true)}
+        addLabel="Add Class"
+        renderMeta={(c) => `d${c.hitDice?.sides ?? "?"} hit die`}
+      />
+
+      <Modal open={builderOpen} onClose={() => setBuilderOpen(false)} title="Create Custom Class" wide confirmClose>
+        <ClassBuilder
+          onCancel={() => setBuilderOpen(false)}
+          onSave={async (c) => {
+            await refreshClasses();
+            selectClass(c.id);
+            setBuilderOpen(false);
+          }}
+        />
+      </Modal>
+    </div>
+  );
+}