Jackpot Ticker

Usage

import { JackpotTicker, type JackpotTickerHandle } from '@wdzyi/ui';

const ticker = useRef<JackpotTickerHandle>(null);

// When the server says a tier has dropped:
ticker.current?.drop('Minor', { name: 'Ava Kim', character: 'lucky-cat' }, 1204.18);

<JackpotTicker ref={ticker} tiers={jackpots} lastWin={lastWin} />

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

Props

tiersJackpotTickerTier[]

Top first, each with its name, the amount it stands at, how fast it climbs in dollars a second, and the seed it goes back to when it drops. Give one a cap for a must-drop jackpot, and a tone for its colour. The first is drawn large in foil and the rest in a row beneath it. Four sample tiers by default.

lastWinJackpotTickerWin

Who won last: the tier, the amount, their name and character, and when. It reads as Maya Chen won the Major, 3 minutes ago, with their avatar, and the amount in the tier’s colour.

refRef<JackpotTickerHandle>

Gives drop(tier, winner, amount), to drop a tier from outside, such as when the server says it’s gone. Without an amount, the win is what the tier stands at.

onDrop(win: JackpotTickerWin) => void

Called when a tier drops, with the win.

classNamestring

Added to the ticker. It’s 400px wide at most, and narrows with the space it’s in.

Notes

• The Grand climbs every 0.6 to 1.3s, and the rest every 1.1 to 2.9s, never on a beat, each by what its rate has built up. Every digit that changes rolls forward over 340ms, the units first and each place to the left 45ms later, a little past and back, so the digits spend most of their time at rest. Each turns in a window cut close round it and centred on the line, so a digit at rest is always on the line, and one rolling is seen cut by the window rather than sitting above or below its neighbours.
• Each tier has its colour, gold, purple, blue, cyan then orange unless it’s given one, on its name, its gem and its bar. A tier with a cap has a bar filling from its seed towards it, with Must drop by over the Grand and a light passing along its bar every few seconds. The bar is there to say how far it has come, and never pulses or counts down.
• A drop flashes the tier twice in its colour over 1.1s while fourteen pixel coins spring out of it, each on its own arc and turning over as it falls, and the winner slides in under the tiers with their avatar, the line washed in the tier’s colour. 1.4s later the tier rolls down to its seed over 900ms and climbs again. It sends success when a tier drops, and nothing as they climb.
• One frame loop climbs every tier and turns every wheel, and it stops while the ticker is off screen, every wheel landed on its digit. What built up while it was away comes in at once. Screen readers can read every amount and hear a drop, but aren’t told every cent.
• With reduced motion, the digits change in place, the flash is a single fade, no coins fly, the light along the bar and the pulse by the Grand are still, and the line under the tiers fades rather than slides.