Bridge ReactPlay
Status
Lead pill, play sequence preview, and incomplete hands callout.
Import from @workspace/bridge-react/play/*.
LeadPill
Status pill showing the opening lead card.
import { LeadPill } from '@workspace/bridge-react/play/lead-pill';
<LeadPill lead="SA" />Demo
Props
Prop
Type
PlaySequencePreview
Compact display of play sequence tokens as badges.
import { PlaySequencePreview } from '@workspace/bridge-react/play/play-sequence-preview';
<PlaySequencePreview
tokens={["SA", "S3", "S7", "SK"]}
title="Play Sequence"
commentCount={2}
/>Demo
Props
Prop
Type
IncompleteHandsCallout
Alert overlay shown when hands are incomplete. Returns null if all hands are complete.
import { IncompleteHandsCallout } from '@workspace/bridge-react/play/incomplete-hands-callout';
<IncompleteHandsCallout hands={hands} />Props
Prop
Type
Hooks
useLead
Hook to get the opening lead (first card of first trick).
import { useLead } from '@workspace/bridge-react/play/hooks/use-lead';
const lead = useLead(tricks);
// lead = { suit: "S", rank: "A" } | nulluseHasPlayedSuit
Hook to check if a player has played a card of a specific suit. Returns a callback.
import { useHasPlayedSuit } from '@workspace/bridge-react/play/hooks/use-has-played-suit';
const hasPlayedSuit = useHasPlayedSuit(tricks);
const played = hasPlayedSuit('N', 'S'); // true if North played a spadeuseTricksWithWinners
Hook that enriches tricks with computed winners using the bridge engine. Takes display tricks (with nullable cards) and a parsed contract, and returns the same tricks with winner fields populated for each complete trick.
import { useTricksWithWinners } from '@workspace/bridge-react/play/hooks/useTricksWithWinners';
const tricksWithWinners = useTricksWithWinners(tricks, contract);
// Each complete trick now has a `winner` field (Player | null)