Dice

Usage

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

<Dice
  balance={wallet.balance}
  defaultStake={1}
  target={target}
  onTargetChange={setTarget}
  onRoll={async (bet) => {
    const roll = await api.rollDice(bet);
    return roll.value;
  }}
/>

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

Props

target, defaultTargetnumber = 50.5

The target, from 2 to 98 to two places, when you hold it, or where it starts.

onTargetChange(target: number) => void

Called as the handle is dragged, a step is taken with the keys, or a target is typed.

mode, defaultMode'over' | 'under' = 'over'

Roll over the target or under it. Flipping it keeps the chance the same: over 66 is under 34.

onModeChange(mode: DiceMode) => void

Called with the way round chosen in the panel.

stake, defaultStakenumber = 1

What each roll costs, in dollars, when you hold it, or what the bet field starts at. It can be typed, halved and doubled, from 10 cents to the balance.

onStakeChange(stake: number) => void

Called as the bet is typed, halved or doubled.

balancenumber = 100

The player’s balance, in dollars. A roll takes the stake off it, and a win counts on as the mark lands.

edgenumber = 1

The house’s edge, as a percentage. The multiplier is 100 less the edge, over the chance.

historynumber[] = []

Rolls from before, newest first, to start the recent rolls with.

onRoll(bet: { target, mode, stake }) => number | Promise<number>

Called as Roll is pressed. Return the number that came up, from 0 to 99.99, or a promise of it. Return nothing and it rolls its own.

onResult(roll: DiceRoll) => void

Called once the mark has landed, with the roll, whether it won and the payout.

compactboolean = false

The small frame, for a space as small as a phone’s card: a slim panel beside a short stage, without the recent rolls or the figures under the line.

currencystring = 'AUD'

The currency of the stake, the profit and the balance, written the Australian way.

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 Blackjack and the Poker Table: the bet, Over and Under, Roll and the profit on a win in a panel, and a flat stage with the result, the line, and the target, the win chance and the multiplier under it. Under 640px wide the panel goes under the stage, and the profit on a win is left to the multiplier.
• Dragging the handle, or pressing anywhere along the line, moves the target a whole number at a time and ticks each step. The arrows do the same, ten with Shift or Page Up and Down, and Home and End go to either end. A target to two places can be typed under the line, and Enter takes it.
• Roll takes the stake, and the number rolls its digits up to its value, the leftmost first, over about 1.2s, while the die in the button tumbles and a mark travels along the line, settling 4px as it lands. A win turns the mark green and puts one chip over the stage, the multiplier and what was won, as in 2.91× +$1.91. Anything else just settles.
• It sends tick for each step of the target or the bet, key as the bet is typed, select for Over or Under, roll as the dice roll, then win with its size or settle, and the result is announced. With reduced motion the number and the mark change at once, and nothing tumbles or drops.