Support staged group shipment funding

components/coalition-funding.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import { useId, useState } from 'react';
+
+/** Only the viewer's own pledges and contributions offered to that viewer. */
+export type CoalitionFundingView = {
+  targets: readonly { id: string; name: string; pledged: number; maximum: number }[];
+  incoming: readonly { donor: string; name: string; amount: number }[];
+  blocked: string | null;
+};
+export type CoalitionFundingContribution = { donor: string; amount: number };
+export type CoalitionPledgeAction = { type: 'coalitionPledge'; recipient: string; amount: number };
+
+function safeMaximum(value: number): number {
+  return Number.isSafeInteger(value) && value >= 0 ? value : 0;
+}
+
+/** Keep only positive donor-specific allocations within the current pledges. */
+export function coalitionFundingContributions(
+  incoming: CoalitionFundingView['incoming'], selections: Readonly<Record<string, number>>,
+): CoalitionFundingContribution[] {
+  return incoming.flatMap(entry => {
+    const selected = selections[entry.donor];
+    const amount = Number.isFinite(selected)
+      ? Math.max(0, Math.min(safeMaximum(entry.amount), Math.trunc(selected))) : 0;
+    return amount ? [{ donor: entry.donor, amount }] : [];
+  });
+}
+
+/** Advisory validation only; the engine verifies current membership, escrow,
+ * commitments and wallet again when it receives the action. */
+export function coalitionPledgeAction(
+  target: CoalitionFundingView['targets'][number], raw: string,
+  blocked: string | null, busy = false,
+): CoalitionPledgeAction | null {
+  if (busy || blocked || !/^(0|[1-9]\d*)$/.test(raw)) return null;
+  const amount = Number(raw);
+  if (!Number.isSafeInteger(amount) || amount > safeMaximum(target.maximum)) return null;
+  return { type: 'coalitionPledge', recipient: target.id, amount };
+}
+
+export function CoalitionFunding({ view, busy = false, act, onContributionsChange }: {
+  view: CoalitionFundingView;
+  busy?: boolean;
+  act: (action: CoalitionPledgeAction) => void;
+  onContributionsChange?: (contributions: CoalitionFundingContribution[]) => void;
+}) {
+  const id = useId();
+  const [pledges, setPledges] = useState<Record<string, string>>({});
+  const incomingKey = JSON.stringify(view.incoming.map(({donor, amount}) => [donor, amount]));
+  const [selection, setSelection] = useState<{key:string; shares:Record<string, number>}>({key:'', shares:{}});
+  const shares = selection.key === incomingKey ? selection.shares : {};
+
+  function changeShare(donor: string, amount: number) {
+    const next = { ...shares, [donor]: amount };
+    const contributions = coalitionFundingContributions(view.incoming, next);
+    setSelection({key:incomingKey, shares:Object.fromEntries(contributions.map(item => [item.donor, item.amount]))});
+    onContributionsChange?.(contributions);
+  }
+
+  return <section aria-label="Group alliance funding" className="alliance-funding space-y-3">
+    <h3>Group alliance funding</h3>
+    <p>Set aside spice separately for each ally. Unspent pledges return at the end of the phase.</p>
+    {view.blocked && <p className="notice">{view.blocked}</p>}
+    {view.targets.map((target, index) => {
+      const raw = pledges[target.id] ?? String(target.pledged);
+      const action = coalitionPledgeAction(target, raw, view.blocked, busy);
+      const inputId = `${id}-pledge-${index}`;
+      return <div key={target.id} className="space-y-2">
+        <label htmlFor={inputId}>Pledge to {target.name} · {target.pledged} spice currently set aside</label>
+        <input id={inputId} type="number" min={0} max={safeMaximum(target.maximum)} step={1}
+          inputMode="numeric" value={raw} disabled={busy || !!view.blocked}
+          onChange={event => setPledges(previous => ({ ...previous, [target.id]: event.target.value }))} />
+        <button type="button" className="game-action" disabled={!action}
+          onClick={() => { if (action) act(action); }}>Set funding for {target.name}</button>
+      </div>;
+    })}
+    {view.incoming.length ? <div>
+      <p>Spice pledged to you:</p>
+      {view.incoming.map((entry, index) => {
+        const maximum = safeMaximum(entry.amount);
+        const value = Math.max(0, Math.min(maximum, shares[entry.donor] ?? 0));
+        const inputId = `${id}-share-${index}`;
+        return <div key={entry.donor} className="space-y-2">
+          <p>{entry.name}: {entry.amount} spice</p>
+          {onContributionsChange && <>
+            <label htmlFor={inputId}>Use from {entry.name} for your next shipment</label>
+            <input id={inputId} type="number" min={0} max={maximum} step={1}
+              inputMode="numeric" value={value} disabled={busy || !!view.blocked}
+              onChange={event => {
+                const entered = Number(event.target.value);
+                changeShare(entry.donor, Number.isFinite(entered)
+                  ? Math.max(0, Math.min(maximum, Math.trunc(entered))) : 0);
+              }} />
+          </>}
+        </div>;
+      })}
+    </div> : <p>No allies have pledged spice to you.</p>}
+  </section>;
+}