Components
Play input, tricks display, annotations, errors, help, and play comments display.
Import from @workspace/bridge-react/play/*.
PlayInput
Controlled textarea for entering play notation as text.
import { PlayInput } from '@workspace/bridge-react/play/play-input';
<PlayInput
value={playText}
onChange={setPlayText}
isValid={isPlayValid}
labels={{ label: "Play sequence", placeholder: "SA S3 S7 SK..." }}
/>Props
Prop
Type
TricksDisplay
Read-only display of played tricks with cards and winners.
import { TricksDisplay } from '@workspace/bridge-react/play/tricks-display';
<TricksDisplay
tricks={tricks}
renderCard={(card) => <CardDisplay card={card} />}
renderPlayer={(player) => player}
/>Demo
Props
Prop
Type
PlayAnnotations
Numbered annotation editor for play comments (referenced as =1=, =2= in notation).
import { PlayAnnotations } from '@workspace/bridge-react/play/play-annotations';
<PlayAnnotations
annotations={[{ number: 1, content: "Good lead" }]}
onChange={(num, val) => updateAnnotation(num, val)}
onAdd={() => addAnnotation()}
onRemove={(num) => removeAnnotation(num)}
/>Demo
Props
Prop
Type
PlayErrors
Displays a list of play validation errors.
import { PlayErrors } from '@workspace/bridge-react/play/play-errors';
<PlayErrors errors={["Invalid card at line 3", "Must follow suit"]} />Demo
Props
Prop
Type
PlayHelp
Help content for play notation format. Can be wrapped in a tooltip or popover.
import { PlayHelp } from '@workspace/bridge-react/play/play-help';
<PlayHelp
suitCorrespondences={[{ input: "S", display: "Spades" }]}
exampleLines={["SA S3 S7 SK", "HK H4 H9 HA"]}
wrapper={(content) => <Tooltip>{content}</Tooltip>}
/>Demo
Props
Prop
Type
PlayComments
Import from @workspace/bridge-react/play/play-comments-display.
Compound display component for card play comments with Display and Empty sub-components. The display shows numbered comments with a blue left border. Follows the same compound pattern as AuctionComments and FinalComment.
PlayComments.Display
import { PlayComments } from '@workspace/bridge-react/play/play-comments-display';
<PlayComments.Display comments={[
{ number: 1, value: 'Lead the 4th best from longest and strongest' },
{ number: 2, value: 'Finesse through dummy\'s King' },
]} />Demo
Card play comments
Lead the 4th best from longest and strongest
Finesse through dummy's King
Props
Prop
Type
PlayComments.Empty
Placeholder shown when there are no play comments.
<PlayComments.Empty />
<PlayComments.Empty labels={{ message: "Aucun commentaire de jeu" }} />Demo
No card play comments
Props
Prop
Type