Blackjack

Usage

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

<Blackjack
  balance={wallet.balance}
  defaultBet={10}
  minBet={5}
  maxBet={500}
  onRound={(round) => saveRound(round)}
/>

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

Props

balancenumber = 250

The player’s balance, in dollars. Deal takes the stake off it, and what comes back counts into it once the round settles. A new balance sent during a round waits until it has settled.

defaultBetnumber = 10

The bet the field starts at, in dollars. It can be typed, halved and doubled within the table’s limits and the balance, and it stays from one round to the next.

minBet, maxBetnumber = 5, 500

The table’s limits on a bet, shown over the field.

shoePlayingCardValue[]

The cards to deal, top first, read when the table opens, such as a shoe your server has shuffled. When they run out it shuffles a fresh one. Left out, it shuffles its own, and again once the cut card comes out three quarters of the way through.

decksnumber = 6

How many decks go into a shoe it shuffles.

onRound(round: BlackjackRound) => void

Called as each round settles, with every hand’s cards, bet, outcome and what came back, the dealer’s cards, and what was staked and returned in all.

compactboolean = false

The small frame, for a space as small as a phone’s card: a slim panel beside a short stage, with 34px cards that keep only their corner.

currencystring = 'AUD'

The currency of the balance and bets, written the Australian way, as in $1,240.50.

classNamestring

Added to the frame. It’s 760px wide at most, or 440px compact, and narrows with the space it’s in.

Notes

• It’s laid out in the Game Frame it shares with the Poker Table and Dice: the bet, Hit, Stand, Split and Double, and Deal in a panel, and a flat stage a step darker beside it, with the shoe in its corner and the house rules across the middle in small capitals. The cards are drawn in pixels: the rank in a pixel face in the corner, one big suit in the middle, a bigger one on an ace, and on the courts the site’s own king, queen and knight, inked in the suit’s colour and crowned in foil. Their backs are deep navy with the site’s mark. Under 640px wide the panel goes under the stage and folds its rows together.
• Cards come from the shoe in the real order, you, the dealer, you, then the dealer’s hole card face down, one every 400ms, each sliding over in 260ms and turning 110ms in. With an ace or a ten showing, the dealer lifts the hole card for 900ms to check for blackjack, and at the end turns it, waits 600ms, and draws a card every 520ms until it’s on 17 or more.
• A total reads both ways, as 4/14, while an ace can still count as eleven, and settles to one number once the hand stands. The dealer stands on all 17s, a blackjack pays three to two and a win one to one, and a push gives the stake back. Double takes one card, laid across the hand as a dealer places it, Split works only when the first two cards match, once a round, and split aces take a card each.
• A win turns its badge green and puts one chip over the stage, the multiplier and what was won, as in 2.00× +$25.00, and 260ms later what came back counts into the balance reel by reel, the cents landing last, as every payout here does, and Deal comes back once it has. A push says plainly what came back, and a bust or a loss turns its badge pink and settles without a word. The balance, the table’s limits and the time at the table are always in the panel.
• Every control is a real button, and focus moves on to Hit once the cards are out and back to Deal once the round has settled. It sends tick for each step of the bet, key as it’s typed, chip for the stake, a double or a split, card for each card dealt or turned, shuffle for a fresh shoe, and win, sized by what came back, or settle. A win then counts in to a run of coin and one land. With reduced motion, cards appear where they land and turn at once. PlayingCard, PixelMark and GameFrame are exported too: the card from 24px wide, keeping only its corner under 52px, the mark, and the frame with its parts.