Poker Table

Usage

import { PokerTable } from '@wdzyi/ui';

<PokerTable
  seats={table.seats}
  you={player.id}
  button={table.button}
  blinds={[1, 2]}
  board={table.board}
  pot={table.pot}
  toAct={table.toAct}
  winners={table.winners}
  onAction={(move) => socket.send({ type: 'act', move })}
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

seatsPokerTableSeat[]

Up to six, in their order round the table: each with an id, a name, a character for their avatar, their stack, the bet in front of them, their cards, null for one dealt face down, whether they’ve folded, and what they last did on this street.

youstring = the first seat

Your seat’s id. It’s drawn at the foot with your cards face up, and the panel acts for it.

buttonstring

The id of the seat with the dealer button. Cards go round from its left, and the blinds are marked from it.

blinds[number, number] = [1, 2]

The small and big blinds, in dollars.

boardPlayingCardValue[] = []

The cards in the middle: none, the flop’s three, the turn’s four or all five. New ones are dealt in a card at a time.

potnumber = 0

What’s in the pot, not counting the bets still in front of the seats.

toActstring | null = null

The id of the seat whose turn it is. Yours brings the panel to life.

turnSecondsnumber = 20

How long a turn lasts, which the bar under the player to act runs down over. Acting when it runs out is the host’s job, as its clock is the one that counts.

minRaisenumber

The least you can raise to. By default, the highest bet plus the last raise, or the big blind.

winnersPokerTableWinner[] | null

The end of a hand: each winner’s id and what they collect, added to their stacks at the same time. The table lifts the winning cards, names the hand and slides the pot over.

onAction(move: PokerTableMove) => void

Called when you act, with a fold, a check, a call and its amount, or a raise and what it raises to. A bet is a raise from nothing.

namestring = 'Hold’em'

The game, shown with the blinds in the panel.

compactboolean = false

The small frame, for a space as small as a phone’s card: a slim panel beside a short table, where each seat is its avatar and its stack, and Call and Raise drop their amounts.

currencystring = 'AUD'

The currency of the stacks and bets, written the Australian way.

classNamestring

Added to the frame. It’s 860px wide at most, or 440px compact.

Notes

• It’s laid out in the Game Frame it shares with Blackjack and Dice: the amount to raise to, with ½ and 2×, Fold and Check or Call, and Raise in a panel, and the table on a flat stage, a stadium a step lighter than it, with the board’s five places outlined in pixels before the flop. Seats show names and others’ cards, their backs carrying the site’s mark, from about 520px of table, and narrower, each seat is its avatar and its stack.
• The host runs the game and the table shows each change as it would happen. Hole cards go round a card every 120ms from the button’s left, the flop’s three land 280ms apart, each card sliding in over 250ms and turning 110ms in, and a bet lands in front of its seat as a flat disc in 200ms. At the end of a round the bets slide into the pot over 360ms.
• The player to act has a thin bar under their seat, running down over their time. On your turn the panel offers only what you can do: no raise when nobody left could call one, and All in when a call takes everything you have. While you wait, your best hand is named under your cards as the board comes.
• At a showdown the five cards of the winning hand lift 5px and everything else steps back, and one chip names the hand and what it won, as in Two pair, kings and nines · +$97, green only when you take back more than you put in. 650ms later the pot slides over in 480ms, and a win of yours counts into your stack in the panel, reel by reel, the cents landing last. pokerHand and comparePokerHands are exported: the best five of up to seven cards, kickers and the ace-low straight included.
• It sends card for each card dealt or turned, chip for each bet, notify when your turn comes, and win when you take back more than you put in, otherwise settle. Such a win then counts in to a run of coin and one land. Your turn and the showdown are announced. With reduced motion, cards appear where they land, the bar holds still, and chips go straight to where they’re going.