Vibecode central

src/app/charactercreator/steps/AbilitiesStep.tsx

@@ -0,0 +1,478 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { ABILITIES, Ability, AbilityScores } from "@/types/content";
+import { useCreator, AbilityMethod } from "../CreatorContext";
+import { useDiceContext } from "@/components/DiceContext";
+import { getAbilityModifier } from "@/lib/dndHelpers";
+
+const STANDARD_ARRAY = [15, 14, 13, 12, 10, 8];
+const POINT_BUY_COST: Record<number, number> = {
+  8: 0, 9: 1, 10: 2, 11: 3, 12: 4, 13: 5, 14: 7, 15: 9,
+};
+const POINT_BUY_BUDGET = 27;
+
+function fmtMod(m: number) { return m >= 0 ? `+${m}` : `${m}`; }
+
+export default function AbilitiesStep() {
+  const { draft, update, species, classes, backgrounds, features, subclasses } = useCreator();
+  const dice = useDiceContext();
+
+  const setMethod = (m: AbilityMethod) => {
+    if (m === "standardArray") {
+      update({ abilityMethod: m, abilities: { strength: 8, dexterity: 8, constitution: 8, intelligence: 8, wisdom: 8, charisma: 8 } });
+    } else if (m === "pointBuy") {
+      update({ abilityMethod: m, abilities: { strength: 8, dexterity: 8, constitution: 8, intelligence: 8, wisdom: 8, charisma: 8 } });
+    } else {
+      update({ abilityMethod: m });
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold text-neutral-100">Ability Scores</h2>
+        <p className="text-sm text-neutral-400 mt-1">Pick a generation method.</p>
+      </div>
+
+      <div className="flex gap-2 flex-wrap">
+        {(["standardArray", "pointBuy", "rolled", "manual"] as AbilityMethod[]).map((m) => (
+          <button
+            key={m}
+            onClick={() => setMethod(m)}
+            className={`px-4 py-2 rounded border text-sm ${draft.abilityMethod === m ? "bg-amber-600/20 border-amber-500 text-amber-300" : "border-neutral-700 text-neutral-300"}`}
+          >
+            {m === "standardArray" ? "Standard Array" : m === "pointBuy" ? "Point Buy" : m === "rolled" ? "Rolled (4d6 drop 1)" : "Manual"}
+          </button>
+        ))}
+      </div>
+
+      {draft.abilityMethod === "standardArray" && <StandardArray />}
+      {draft.abilityMethod === "pointBuy" && <PointBuy />}
+      {draft.abilityMethod === "rolled" && <Rolled dice={dice} />}
+      {draft.abilityMethod === "manual" && <Manual />}
+
+      <AbilityImprovementSection
+        species={species}
+        classes={classes}
+        backgrounds={backgrounds}
+        subclasses={subclasses}
+        features={features}
+      />
+
+      <ScoreSummary abilities={draft.abilities} />
+    </div>
+  );
+}
+
+interface AsiSlot {
+  featureId: string;
+  featureName: string;
+  points: number;
+  maxPerAbility: number;
+  cap?: number;
+}
+
+function AbilityImprovementSection({
+  species,
+  classes,
+  backgrounds,
+  subclasses,
+  features,
+}: {
+  species: import("@/types/content").Species[];
+  classes: import("@/types/content").ClassDef[];
+  backgrounds: import("@/types/content").Background[];
+  subclasses: import("@/types/content").Subclass[];
+  features: Record<string, import("@/types/content").Feature>;
+}) {
+  const { draft, update } = useCreator();
+  const level = draft.classes[0]?.level ?? 1;
+  const chosenClass = classes.find((c) => c.id === draft.classes[0]?.classId);
+  const chosenSpecies = species.find((s) => s.id === draft.speciesId);
+  const chosenBg = backgrounds.find((b) => b.id === draft.backgroundId);
+  const chosenSubclassId = draft.classes[0]?.subclassId ??
+    (chosenClass ? (() => {
+      for (const lf of chosenClass.levelFeatures ?? []) {
+        if (lf.level > level) continue;
+        for (const fid of lf.featureIds) {
+          const f = features[fid];
+          if (f?.effects?.some((e) => e.target.kind === "grantSubclassChoice")) {
+            const pick = draft.featureChoices[fid]?.[0];
+            if (pick) return pick;
+          }
+        }
+      }
+      return undefined;
+    })() : undefined);
+  const chosenSubclass = subclasses.find((s) => s.id === chosenSubclassId);
+
+  const activeFeatureIds = useMemo(() => {
+    const ids: string[] = [];
+    ids.push(...(chosenSpecies?.featureIds ?? []));
+    ids.push(...(chosenBg?.featureIds ?? []));
+    for (const lf of chosenClass?.levelFeatures ?? []) {
+      if (lf.level <= level) ids.push(...lf.featureIds);
+    }
+    for (const lf of chosenSubclass?.levelFeatures ?? []) {
+      if (lf.level <= level) ids.push(...lf.featureIds);
+    }
+    return ids;
+  }, [chosenSpecies, chosenBg, chosenClass, chosenSubclass, level]);
+
+  const asiSlots: AsiSlot[] = useMemo(() => {
+    const out: AsiSlot[] = [];
+    for (const fid of activeFeatureIds) {
+      const f = features[fid];
+      if (!f) continue;
+      for (const eff of f.effects ?? []) {
+        if (eff.target.kind === "abilityScoreChoice" && (eff.level ?? 1) <= level) {
+          out.push({
+            featureId: f.id,
+            featureName: f.name,
+            points: eff.target.points,
+            maxPerAbility: eff.target.maxPerAbility,
+            cap: eff.target.cap,
+          });
+        }
+      }
+    }
+    return out;
+  }, [activeFeatureIds, features, level]);
+
+  if (asiSlots.length === 0) return null;
+
+  const applyPatch = (featureId: string, next: string[]) => {
+    update({ featureChoices: { ...draft.featureChoices, [featureId]: next } });
+  };
+
+  return (
+    <div className="space-y-4">
+      {asiSlots.map((slot) => {
+        const picks = (draft.featureChoices[slot.featureId] ?? []) as Ability[];
+        const counts: Partial<Record<Ability, number>> = {};
+        for (const a of picks) counts[a] = (counts[a] ?? 0) + 1;
+        const remaining = slot.points - picks.length;
+
+        // Baseline = current draft ability + fixed bonuses from other active features
+        // + picks from OTHER asi slots. Excludes this slot's own picks so the delta shown
+        // for this slot lives on top of that baseline.
+        const baseline: Record<Ability, number> = { ...draft.abilities };
+        for (const fid of activeFeatureIds) {
+          const f = features[fid];
+          if (!f) continue;
+          for (const eff of f.effects ?? []) {
+            if ((eff.level ?? 1) > level) continue;
+            if (eff.target.kind === "ability") {
+              const delta =
+                eff.operation === "decrease" ? -(eff.value ?? 0) : eff.value ?? 0;
+              if (eff.operation === "set" && eff.value !== undefined) {
+                baseline[eff.target.ability] = eff.value;
+              } else {
+                baseline[eff.target.ability] += delta;
+              }
+            } else if (eff.target.kind === "abilityScoreChoice" && f.id !== slot.featureId) {
+              const otherPicks = (draft.featureChoices[f.id] ?? []) as Ability[];
+              const otherCounts: Partial<Record<Ability, number>> = {};
+              for (const a of otherPicks) otherCounts[a] = (otherCounts[a] ?? 0) + 1;
+              for (const a of ABILITIES) {
+                baseline[a] += Math.min(otherCounts[a] ?? 0, eff.target.maxPerAbility);
+              }
+            }
+          }
+        }
+
+        const inc = (a: Ability) => {
+          if (remaining <= 0) return;
+          if ((counts[a] ?? 0) >= slot.maxPerAbility) return;
+          if (slot.cap !== undefined && baseline[a] + (counts[a] ?? 0) + 1 > slot.cap) return;
+          applyPatch(slot.featureId, [...picks, a]);
+        };
+        const dec = (a: Ability) => {
+          const idx = picks.lastIndexOf(a);
+          if (idx < 0) return;
+          const next = [...picks];
+          next.splice(idx, 1);
+          applyPatch(slot.featureId, next);
+        };
+
+        return (
+          <div key={slot.featureId} className="p-4 border border-emerald-500/40 bg-emerald-500/5 rounded">
+            <div className="text-sm font-semibold text-emerald-300 mb-1">
+              {slot.featureName} — distribute {slot.points} points (max {slot.maxPerAbility} per ability{slot.cap ? `, cap ${slot.cap}` : ""})
+              <span className="ml-2 text-xs text-neutral-500">({picks.length}/{slot.points})</span>
+            </div>
+            <div className="grid grid-cols-3 md:grid-cols-6 gap-2 mt-3">
+              {ABILITIES.map((a) => {
+                const current = counts[a] ?? 0;
+                const wouldBe = baseline[a] + current;
+                const cappedOut = slot.cap !== undefined && wouldBe >= slot.cap;
+                return (
+                  <div key={a} className="p-2 border border-neutral-700 rounded text-center">
+                    <div className="text-xs uppercase text-neutral-500">{a.slice(0, 3)}</div>
+                    <div className="flex items-center justify-center gap-1 mt-1">
+                      <button type="button" onClick={() => dec(a)} className="w-6 h-6 rounded bg-neutral-800 hover:bg-neutral-700">−</button>
+                      <span className="text-lg font-bold w-6 text-emerald-300">+{current}</span>
+                      <button
+                        type="button"
+                        onClick={() => inc(a)}
+                        disabled={cappedOut || remaining <= 0 || current >= slot.maxPerAbility}
+                        className="w-6 h-6 rounded bg-neutral-800 hover:bg-neutral-700 disabled:opacity-30 disabled:cursor-not-allowed"
+                      >+</button>
+                    </div>
+                    <div className={`text-[10px] mt-1 ${cappedOut ? "text-red-400" : "text-neutral-500"}`}>
+                      {wouldBe}{slot.cap !== undefined ? `/${slot.cap}` : ""}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function ScoreSummary({ abilities }: { abilities: AbilityScores }) {
+  return (
+    <div className="grid grid-cols-3 md:grid-cols-6 gap-2">
+      {ABILITIES.map((a) => (
+        <div key={a} className="p-3 border border-neutral-700 rounded bg-neutral-900 text-center">
+          <div className="text-xs uppercase text-neutral-500">{a.slice(0, 3)}</div>
+          <div className="text-2xl font-bold text-neutral-100">{abilities[a]}</div>
+          <div className="text-sm text-amber-400">{fmtMod(getAbilityModifier(abilities[a]))}</div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function Manual() {
+  const { draft, update } = useCreator();
+  const set = (a: Ability, v: number) =>
+    update({ abilities: { ...draft.abilities, [a]: v } });
+  return (
+    <div className="grid grid-cols-3 md:grid-cols-6 gap-3">
+      {ABILITIES.map((a) => (
+        <div key={a}>
+          <label className="block text-xs uppercase text-neutral-400 mb-1">{a}</label>
+          <input
+            type="number"
+            value={draft.abilities[a]}
+            onChange={(e) => set(a, Number(e.target.value) || 0)}
+            className="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-2 text-center text-lg"
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function StandardArray() {
+  const { draft, update } = useCreator();
+  const assignments = ABILITIES.map((a) => draft.abilities[a]);
+  const remaining = [...STANDARD_ARRAY];
+  for (const v of assignments) {
+    const idx = remaining.indexOf(v);
+    if (idx >= 0) remaining.splice(idx, 1);
+  }
+
+  const setAbility = (a: Ability, value: number) => {
+    update({ abilities: { ...draft.abilities, [a]: value } });
+  };
+
+  return (
+    <div className="space-y-3">
+      <p className="text-sm text-neutral-400">
+        Pool: <span className="font-mono text-neutral-200">{STANDARD_ARRAY.join(", ")}</span>
+      </p>
+      <div className="grid grid-cols-3 md:grid-cols-6 gap-3">
+        {ABILITIES.map((a) => {
+          const current = draft.abilities[a];
+          const options = [8, ...new Set([...STANDARD_ARRAY, current])].sort((x, y) => y - x);
+          return (
+            <div key={a}>
+              <label className="block text-xs uppercase text-neutral-400 mb-1">{a}</label>
+              <select
+                value={current}
+                onChange={(e) => setAbility(a, Number(e.target.value))}
+                className="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-2 text-center text-lg"
+              >
+                {options.map((v) => {
+                  const used = assignments.filter((x) => x === v).length;
+                  const inPool = STANDARD_ARRAY.filter((x) => x === v).length;
+                  const disabled = v !== current && v !== 8 && used >= inPool;
+                  return (
+                    <option key={v} value={v} disabled={disabled}>{v}</option>
+                  );
+                })}
+              </select>
+            </div>
+          );
+        })}
+      </div>
+      <p className="text-xs text-neutral-500">Unassigned pool: {remaining.length > 0 ? remaining.join(", ") : "empty"}</p>
+    </div>
+  );
+}
+
+function PointBuy() {
+  const { draft, update } = useCreator();
+  const spent = useMemo(
+    () => ABILITIES.reduce((sum, a) => sum + (POINT_BUY_COST[draft.abilities[a]] ?? 0), 0),
+    [draft.abilities]
+  );
+  const remaining = POINT_BUY_BUDGET - spent;
+
+  const adjust = (a: Ability, delta: number) => {
+    const next = draft.abilities[a] + delta;
+    if (next < 8 || next > 15) return;
+    const nextCost = POINT_BUY_COST[next];
+    const currentCost = POINT_BUY_COST[draft.abilities[a]];
+    if (POINT_BUY_BUDGET - (spent - currentCost + nextCost) < 0) return;
+    update({ abilities: { ...draft.abilities, [a]: next } });
+  };
+
+  return (
+    <div className="space-y-3">
+      <div className="text-sm">
+        Points remaining: <span className={`font-bold ${remaining < 0 ? "text-red-400" : "text-amber-400"}`}>{remaining}</span> / {POINT_BUY_BUDGET}
+      </div>
+      <div className="grid grid-cols-3 md:grid-cols-6 gap-3">
+        {ABILITIES.map((a) => (
+          <div key={a} className="p-3 border border-neutral-700 rounded text-center">
+            <div className="text-xs uppercase text-neutral-400">{a}</div>
+            <div className="flex items-center justify-center gap-2 mt-2">
+              <button onClick={() => adjust(a, -1)} className="w-7 h-7 rounded bg-neutral-800 hover:bg-neutral-700 text-lg">−</button>
+              <span className="text-xl font-bold w-8">{draft.abilities[a]}</span>
+              <button onClick={() => adjust(a, 1)} className="w-7 h-7 rounded bg-neutral-800 hover:bg-neutral-700 text-lg">+</button>
+            </div>
+            <div className="text-xs text-neutral-500 mt-1">cost {POINT_BUY_COST[draft.abilities[a]] ?? "—"}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function Rolled({ dice }: { dice: ReturnType<typeof useDiceContext> }) {
+  const { draft, update } = useCreator();
+  const [pool, setPool] = useState<number[]>([]);
+  const [assignments, setAssignments] = useState<(Ability | null)[]>(
+    () => Array.from({ length: 6 }, () => null)
+  );
+  const [rolling, setRolling] = useState(false);
+
+  const rollOne = async (): Promise<number> => {
+    const roller = dice.rollerRef.current;
+    if (roller) {
+      try {
+        const outcome = await roller.roll({ 6: 4 }, "Ability roll (4d6 drop lowest)");
+        const rolls = outcome.roll.map((r) => r.value).sort((a, b) => b - a);
+        return rolls[0] + rolls[1] + rolls[2];
+      } catch {
+        /* fall through */
+      }
+    }
+    const rolls = Array.from({ length: 4 }, () => 1 + Math.floor(Math.random() * 6)).sort((a, b) => b - a);
+    return rolls[0] + rolls[1] + rolls[2];
+  };
+
+  const rollNext = async () => {
+    if (pool.length >= 6) return;
+    setRolling(true);
+    const v = await rollOne();
+    setPool([...pool, v]);
+    setRolling(false);
+  };
+
+  const setSlot = (i: number, v: number) => {
+    const next = [...pool];
+    next[i] = v;
+    setPool(next);
+  };
+
+  const setAssignment = (i: number, a: Ability | null) => {
+    const next = [...assignments];
+    next[i] = a;
+    setAssignments(next);
+  };
+
+  const applyAssignments = () => {
+    const nextAbilities = { ...draft.abilities };
+    for (let i = 0; i < 6; i++) {
+      const a = assignments[i];
+      const v = pool[i];
+      if (a && typeof v === "number" && v > 0) nextAbilities[a] = v;
+    }
+    update({ abilities: nextAbilities });
+  };
+
+  const hasSomethingToApply = assignments.some((a, i) => a && (pool[i] ?? 0) > 0);
+
+  return (
+    <div className="space-y-4">
+      <div className="flex gap-2 flex-wrap">
+        <button
+          onClick={rollNext}
+          disabled={rolling || pool.length >= 6}
+          className="px-4 py-2 text-sm bg-amber-600 hover:bg-amber-500 disabled:opacity-40 rounded text-neutral-900 font-semibold"
+        >
+          {rolling ? "Rolling..." : pool.length >= 6 ? "Pool full" : `Roll next (${pool.length}/6)`}
+        </button>
+        <button
+          onClick={() => setPool([])}
+          className="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200"
+        >
+          Clear
+        </button>
+      </div>
+
+      <div>
+        <label className="block text-sm text-neutral-400 mb-2">
+          Pool (physical-dice players: enter values manually). Pick an ability under each slot to assign it.
+        </label>
+        <div className="grid grid-cols-3 md:grid-cols-6 gap-2">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div key={i} className="flex flex-col gap-1">
+              <input
+                type="number"
+                min={3}
+                max={18}
+                value={pool[i] ?? ""}
+                onChange={(e) => setSlot(i, Number(e.target.value) || 0)}
+                placeholder="—"
+                className="bg-neutral-800 border border-neutral-700 rounded px-2 py-2 text-center text-lg"
+              />
+              <select
+                value={assignments[i] ?? ""}
+                onChange={(e) => setAssignment(i, (e.target.value || null) as Ability | null)}
+                className="bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-sm capitalize"
+              >
+                <option value="">---</option>
+                {ABILITIES.map((a) => {
+                  const takenByOther = assignments.some((x, k) => k !== i && x === a);
+                  return (
+                    <option key={a} value={a} disabled={takenByOther}>{a}</option>
+                  );
+                })}
+              </select>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div>
+        <button
+          type="button"
+          onClick={applyAssignments}
+          disabled={!hasSomethingToApply}
+          className="px-4 py-2 text-sm bg-amber-600 hover:bg-amber-500 disabled:opacity-40 rounded text-neutral-900 font-semibold"
+        >
+          Apply changes
+        </button>
+      </div>
+    </div>
+  );
+}