Bridge Training
Bridge ReactPlay

PlayInputs

Interactive card selection grid with trick tracking.

Import from @workspace/bridge-react/play/inputs/*.

Overview

The Play module provides components for card play interaction and display. It includes:

  • PlayInputs — Interactive card selection grid with trick tracking
  • Flat components — PlayInput (textarea), TricksDisplay, PlayAnnotations, PlayErrors, PlayHelp
  • Status — LeadPill, PlaySequencePreview, IncompleteHandsCallout

PlayInputs

Main interactive play component. Renders a card selection grid for the current player, displays played tricks, and handles follow-suit rules.

import { PlayInputs } from '@workspace/bridge-react/play/inputs/play-inputs';

<PlayInputs
  hands={hands}
  auction={auctionSequence}
  leadPlayer="W"
  tricks={tricks}
  onTricksChange={setTricks}
  comments={comments}
  onCommentsChange={setComments}
/>

Props

Prop

Type

Sub-components

The PlayInputs module includes these internal sub-components:

ImportComponentDescription
play/inputs/card-gridCardGridGrid of cards grouped by suit
play/inputs/card-buttonCardButtonSingle clickable card button
play/inputs/trick-rowTrickRowSingle trick with cards and annotations
play/inputs/card-annotation-inputCardAnnotationInputPopover comment input per card
play/inputs/current-player-indicatorCurrentPlayerIndicatorShows whose turn it is

On this page