Initial commit

components/choam-storm.tsx

@@ -0,0 +1,83 @@
+'use client';
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { HelpTip } from './help-tip';
+import type { Action, GameView } from '@/game/engine';
+import { territory } from '@/game/board';
+
+export function ChoamStorm({
+  game: g,
+  act,
+  busy,
+}: {
+  game: GameView;
+  act: (a: Action) => void;
+  busy: boolean;
+}) {
+  const [selected, setSelected] = useState('');
+  const decision = g.decision?.kind === 'choamStorm' ? g.decision : null;
+  if (!decision || decision.player !== g.me) return null;
+  const card = g.choamWorthless?.cards.find((c) => c.name === 'Jubba Cloak');
+  const choice =
+    decision.territories.find((t) => t.territory === selected) ??
+    decision.territories[0];
+  return (
+    <section className="notice">
+      <h3>
+        Jubba Cloak <HelpTip topic="choamWorthless" />
+      </h3>
+      <p>
+        Protect your own forces in one territory from this storm movement. Spice
+        and other factions’ forces remain exposed. Karama may cancel this
+        effect.
+      </p>
+      {decision.protected.length > 0 && (
+        <p>
+          Protected:{' '}
+          {decision.protected.map((t) => territory(t).name).join(', ')}.
+        </p>
+      )}
+      <label>
+        Threatened territory{' '}
+        <select
+          value={choice?.territory ?? ''}
+          onChange={(e) => setSelected(e.target.value)}
+        >
+          {decision.territories.map((t) => (
+            <option key={t.territory} value={t.territory}>
+              {territory(t.territory).name} · {t.amount} forces · sectors{' '}
+              {t.sectors.join(', ')}
+            </option>
+          ))}
+        </select>
+      </label>
+      {card ? (
+        <Button
+          disabled={busy || !choice}
+          onClick={() =>
+            act({
+              type: 'card',
+              mode: 'choam',
+              card: card.id,
+              territory: choice.territory,
+            })
+          }
+        >
+          Protect this territory
+        </Button>
+      ) : (
+        <p className="fine">
+          No available Jubba Cloak play. Continue when ready to accept the
+          remaining losses.
+        </p>
+      )}
+      <Button
+        variant="outline"
+        disabled={busy}
+        onClick={() => act({ type: 'decision', decline: true })}
+      >
+        Continue storm
+      </Button>
+    </section>
+  );
+}