Bridge Training
UI BridgePlay

PlayEditor

Headless compound primitive for card-play editing, composed with the play table components.

Import from @workspace/ui-bridge/primitives/editor/play-editor.

Overview

PlayEditor.Root manages the tricks, follow-suit validation, the current player and the remaining hands. It renders no DOM: children read the state through usePlayEditorContext() and compose the play components from @workspace/ui-bridge/components/play/* (PlayCurrentPlayerHand, PlayTrickTable, PlayControls).

import { PlayControls } from '@workspace/ui-bridge/components/play/play-controls';
import { PlayCurrentPlayerHand } from '@workspace/ui-bridge/components/play/play-current-player-hand';
import { PlayTrickTable } from '@workspace/ui-bridge/components/play/play-trick-table';
import { useTrump } from '@workspace/ui-bridge/contract/hooks/use-trump';
import { PlayEditor } from '@workspace/ui-bridge/primitives/editor/play-editor';

const trump = useTrump(auction);

<PlayEditor.Root
  hands={hands}
  tricks={tricks}
  onTricksChange={setTricks}
  declarer="S"
  trump={trump}
  comments={comments}
  onCommentsChange={setComments}
>
  <PlayCurrentPlayerHand />
  <PlayTrickTable />
  <PlayControls />
</PlayEditor.Root>

Tricks and comments are controlled (tricks / onTricksChange) or uncontrolled (defaultTricks). The opening leader is the player to the left of declarer.

Read-only mode

Pass readOnly to freeze the tricks: cards are no longer playable and the controls are disabled. Static rendering of a finished play lives in TricksDisplay.

Props

Prop

Type

Notes

  • Wrapped with withBridgeContext: usable outside a BridgeProvider through the context prop.
  • trump comes from the deal's Auction through useTrump(auction) (null until a contract exists).