Player

Import from @workspace/bridge-react/player/player-position-icon, @workspace/bridge-react/labels/player, 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

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

Displays a translated label for a player position. Uses useBridgeLabels() internally. Shortcut components PlayerNorth, PlayerSouth, PlayerEast, PlayerWest are also available.

import { Player, PlayerNorth, PlayerSouth } from '@workspace/bridge-react/labels/player';

<Player player="N" />  {/* "North" */}
<PlayerSouth />         {/* "South" */}

Props

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

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} />

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

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

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

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

Props

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

Player

On this page