Player

Import from @workspace/bridge-react/player/player-position-icon, @workspace/bridge-react/player/player-label, or @workspace/bridge-react/player/player-selector.

PlayerPositionIcon

Compass needle SVG icon that rotates to point at the given player position. The top half of the needle uses the active color, while the bottom half is muted.

import { PlayerPositionIcon } from '@workspace/bridge-react/player/player-position-icon';

<PlayerPositionIcon position="N" />
<PlayerPositionIcon
  position="S"
  activeColor="hsl(221, 83%, 53%)"
  inactiveColor="#ccc"
/>

Demo

object

Props

Prop

Type

PlayerSideIcon

Variant of the compass icon that highlights both positions of a partnership side (NS or EW).

import { PlayerSideIcon } from '@workspace/bridge-react/player/player-position-icon';

<PlayerSideIcon side="NS" activeColor="blue" />
<PlayerSideIcon side="EW" activeColor="red" />

Demo

object

Props

Prop

Type

PlayerLabel

Displays a translated label for a player position. Uses useTranslation() internally.

import { PlayerLabel } from '@workspace/bridge-react/player/player-label';

<PlayerLabel player="N" />  {/* "North" */}
<PlayerLabel player="S" />  {/* "South" */}

Props

Prop

Type

PlayerSelector

Controlled player selector with two layout variants:

buttons — compass-style grid with directional icons (default)
select — dropdown select

import { PlayerSelector } from '@workspace/bridge-react/player/player-selector';

<PlayerSelector value={player} onChange={setPlayer} />
<PlayerSelector value={player} onChange={setPlayer} variant="select" />

Props

Prop

Type

PlayerPositionDisplay

Displays a player position with a compass icon and translated label. Shows "-" for null.

import { PlayerPositionDisplay } from '@workspace/bridge-react/player/player-position-display';

<PlayerPositionDisplay player="N" />
<PlayerPositionDisplay player={null} />

Demo

North

object

Props

Prop

Type

PlayerSideDisplay

Displays the player side (attack/defense) with a side icon and label. Shows "-" for null or unknown sides.

import { PlayerSideDisplay } from '@workspace/bridge-react/player/player-side-display';

<PlayerSideDisplay side="attack" />
<PlayerSideDisplay side="defense" />
<PlayerSideDisplay side={null} />

Demo

Attack

object

Props

Prop

Type

SelectedPlayerAlert

Alert component showing the currently selected player position with a title and description. On small screens (< @xl), displays a PlayerSelector dropdown instead of the alert.

Import from @workspace/bridge-react/player/selected-player-alert.

import { SelectedPlayerAlert } from '@workspace/bridge-react/player/selected-player-alert';

<SelectedPlayerAlert player="N" onChange={setPlayer} />

Props

Prop

Type

Custom Labels

Override the default English labels via the labels prop:

<SelectedPlayerAlert
  player="N"
  onChange={setPlayer}
  labels={{
    positionTitle: { N: "Nord", S: "Sud", E: "Est", W: "Ouest" },
    positionDescription: { north: "Position du déclarant", south: "...", east: "...", west: "..." },
  }}
/>

Utilities

Export	Description
`DEFAULT_PLAYER_SIDE_COLORS`	`{ NS: 'hsl(221, 83%, 53%)', EW: 'hsl(0, 84%, 60%)' }`
`getPlayerSideColor(player)`	Returns the side color for a player position

On this page