Bet Slip

Usage

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

<BetSlip
  selections={slip}
  onRemove={(id) => setSlip((list) => list.filter((item) => item.id !== id))}
  mode={mode}
  onModeChange={setMode}
  stake={stake}
  onStakeChange={setStake}
  onPlace={async (bet) => {
    const { reference } = await placeBet(bet);
    return reference;
  }}
  onDone={() => setSlip([])}
/>

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

Props

selectionsBetSlipSelection[]

What’s on the slip, in the order it was added: each with an id, the pick, its market, the match, its price in decimal odds, and its kits, the side it backs or both sides for a pick on the whole match, by name or with colours of their own. A new price shows as a change to accept. Three sample selections by default.

onRemove(id: string) => void

Called when a selection’s cross is pressed. Take it out of selections, and its line folds shut.

mode, defaultMode'singles' | 'multi' = 'singles'

Singles, with the stake on each selection, or one multi. The switch shows once there are two selections or more.

onModeChange(mode: BetSlipMode) => void

Called with the mode picked on the switch.

stake, defaultStakenumber = 0

The stake on each bet, when you hold it, or where it starts when the slip holds it.

onStakeChange(stake: number) => void

Called as the stake is typed, or added to with a chip.

quickStakesnumber[] = [5, 10, 25]

The chips beside the stake, each adding what it’s worth. Each takes its denomination’s colour from the casino set: $5 red, $10 blue, $25 green, $50 orange, $100 black, $500 purple and $1,000 gold.

onAcceptOdds() => void

Called when the new odds are accepted.

onPlace(bet: BetSlipBet) => Promise<string | void>

Places the bet: its mode, selections, stake, total stake, odds and potential return. Resolve with its reference for the receipt, or reject and the slip offers to try again. Left out, it stands in for a second.

onDone() => void

Called when Done is pressed on the receipt. Clear the selections here to start a new slip.

currencystring = 'AUD'

The currency of the stake and returns, written the Australian way, as in $1,240.50.

denseboolean = false

A line a selection without its market and match, and the totals without the odds, for a short dock.

classNamestring

Added to the slip. It’s 360px wide at most. Give it a height to dock it, and the selections scroll inside it.

Notes

• A selection arrives at the foot of the list, its line opening over 400ms as its kit and words rise 6px out of a blur, and a cross folds its line shut in 260ms. The kits sit in a column as wide as a pair, so a pick on the whole match, shown by both sides’ kits, lines up with the rest.
• A moved price takes its colour, green for a drift and pink for a shortening, flashing brighter for 900ms as it lands, with an arrow popping in beside it and the old price struck through. Until the new odds are accepted, the button asks for that in ink rather than offering to place the bet.
• Each chip adds what it’s worth to the stake and pops as it’s pressed, from 0.9 to 1.12 of its size and back over 420ms. The totals roll the short way on reels, and the potential return turns green once there is one: money coming back, not a win.
• Placing shows a working state in the foil, then the slip draws in to its receipt over 420ms rather than swapping: each line closes up to its kit, pick and price as its market folds away, and the stake and the totals fold away as a green tick, Bet placed and the reference rise in where they were. Under them are the stake and the potential return in 32px figures, the return counting in on the Money Count the payout pieces share, and the button becomes Done, keeping focus.
• Enter in the stake places the bet, or accepts the new odds first. It sends pop as a selection lands, chip for a chip, key as the stake is typed, erase as a line or digits go, select for the bet type, notify for a moved price, success once placed and error if it isn’t. The return counts in without a sound, since no money has landed. With reduced motion, lines come and go at once, chips neither lift nor pop, and the slip becomes its receipt with a plain fade.