Prize Wheel

Usage

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

<PrizeWheel
  prizes={wheel.prizes}
  nextSpinAt={account.nextSpinAt}
  onSpin={async () => {
    const { prizeId } = await api.spinDailyWheel();
    return prizeId;
  }}
  onResult={(prize) => prize && refreshBonusBalance()}
/>

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

Props

prizesPrizeWheelPrize[] = ten sample prizes

The prizes round the wheel, clockwise from the top, eight to twelve of them: each with an id, its kind, bonus credit, free spins or nothing this time, the amount in dollars or spins, and top for the one drawn in foil.

onSpin() => string | Promise<string>

Called as the wheel is spun. Return the id of the prize it lands on, or a promise of it, and the wheel turns at full speed until it arrives. Return nothing and it picks one at random.

onResult(prize: PrizeWheelPrize | null) => void

Called once it has landed and the prize is shown, with the prize, or null if the spin didn’t go through.

nextSpinAtnumber | null

When the next spin opens, as a time in ms. While that’s still to come, the middle waits and the panel counts down to it.

cooldownnumber = 86400000

How long after a spin the next one opens, in ms, when nextSpinAt doesn’t say. A day.

sizenumber = 260

The wheel’s width, in px. The panel takes what’s left beside it, or goes beneath it when there isn’t room.

currencystring = 'AUD'

The currency of bonus credit, written the Australian way.

classNamestring

Added to the wheel and its panel together.

Notes

• Pressing the middle brings the wheel up to 3.2 turns a second in 260ms. It holds full speed for at least 360ms, then slows along a curve that leaves it crawling through the last few pegs, and settles back 1.2° onto its prize: 3.5 to 4.5 seconds in all. The pointer is a sprung flap that each peg pushes over and lets go, so it chatters while the wheel is quick and flicks back on its own as it slows.
• The prize is revealed 160ms after the stop. The other slices step back, the lights round the rim flash, a ring and eighteen squares burst from under the pointer, and the amount counts up in the panel, which calls bonus credit bonus credit. The middle then shows what was won, and the clock counts down to the next spin without hurrying anyone.
• It sends spin as it sets off, a tick for each peg with how fast it’s going, never closer than 55ms, and stop as it lands, then win with the prize’s size against the best on the wheel, or settle for Try again tomorrow. The result is announced.
• The middle is a real button, so Enter and Space spin it too. The panel goes beneath the wheel when there’s less than about 130px beside it.
• With reduced motion the wheel doesn’t turn: it dims for 1.2s, then shows where it landed, and nothing chases, flashes or flies.