Support Sapho ordering for shared arrivals

components/sapho-arrival-order.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import type { Action } from '@/game/engine';
+import { Button } from './ui/button';
+
+/** Public order and responses; choices contain only this viewer's legal cards. */
+export type SaphoArrivalOrderView = {
+  event: string;
+  revision: number;
+  order: string[];
+  passed: string[];
+  choices: { card: string; mode: 'first' | 'last' }[];
+};
+export type SaphoArrivalOrderProps = {
+  view: SaphoArrivalOrderView;
+  me: string;
+  busy: boolean;
+  name: (player: string) => string;
+  act: (action: Action) => void;
+};
+
+function current(props: SaphoArrivalOrderProps, view: SaphoArrivalOrderView,
+  event: string, revision: number): boolean {
+  return !props.busy && props.view === view && view.event === event &&
+    view.revision === revision && typeof event === 'string' && event.length > 0 &&
+    Number.isSafeInteger(revision) && revision >= 0 &&
+    view.order.includes(props.me) && !view.passed.includes(props.me);
+}
+
+/** Both original reaction owners can continue without revealing their hands. */
+export function SaphoArrivalOrderPass(props: SaphoArrivalOrderProps) {
+  const { view } = props, event = view.event, revision = view.revision;
+  const canAct = () => current(props, view, event, revision);
+  return <Button className="game-action min-h-11 whitespace-normal" data-testid="sapho-arrival-order-pass"
+    disabled={!canAct()} onClick={() => { if (canAct()) props.act({ type: 'arrivalOrderPass', event, revision }); }}>
+    Continue without changing reaction order
+  </Button>;
+}
+
+export function SaphoArrivalOrderChoiceButton(props: SaphoArrivalOrderProps & {
+  choice: SaphoArrivalOrderView['choices'][number];
+}) {
+  const { view, choice } = props, event = view.event, revision = view.revision;
+  const card = choice.card, mode = choice.mode;
+  const canAct = () => current(props, view, event, revision) &&
+    typeof card === 'string' && card.length > 0 && (mode === 'first' || mode === 'last') &&
+    choice.card === card && choice.mode === mode &&
+    view.choices.some(item => item.card === card && item.mode === mode);
+  return <Button className="game-action min-h-11 whitespace-normal" data-testid={`sapho-arrival-order-${mode}`}
+    disabled={!canAct()} onClick={() => {
+      if (canAct()) props.act({ type: 'saphoArrivalOrder', event, revision, card, mode });
+    }}>
+    Use Juice of Sapho to react {mode}
+  </Button>;
+}
+
+/** Do not infer eligibility from a hand: the server supplies the public window
+ * and only the current viewer's privately quoted card choices. */
+export function SaphoArrivalOrder(props: SaphoArrivalOrderProps) {
+  const { view, me, name } = props;
+  const eligible = view.order.includes(me), passed = view.passed.includes(me);
+  return <section className="notice space-y-3" aria-label="Ambassador and Terror reaction order">
+    <h3>Ambassador and Terror reaction order</h3>
+    <p>Both reactions follow the same entry. Before either begins, their owners may continue or use an available order change.</p>
+    <p>Current order: {view.order.map((player, index) =>
+      <span key={player}>{index > 0 && ' → '}{name(player)}</span>)}.</p>
+    <p>{view.passed.length} of {view.order.length} players have finished this choice.</p>
+    <p className="fine">This ordering procedure is a provisional interpretation.</p>
+    {eligible && !passed ? <>
+      <SaphoArrivalOrderPass {...props} />
+      {view.choices.map(choice => <SaphoArrivalOrderChoiceButton {...props}
+        key={`${choice.card}:${choice.mode}`} choice={choice} />)}
+    </> : <p>{eligible ? 'You have finished this choice.' : 'Waiting for the reaction owners.'}</p>}
+  </section>;
+}