My Bets

Usage

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

<MyBets
  bets={account.bets}
  tab={tab}
  onTabChange={setTab}
  onCashOut={(id) => openCashOut(id)}
/>

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

Props

betsMyBetsBet[]

The bets, open and settled together: each with an id, its kind, its legs, the stake and the price it was placed at, a same game multi’s match, an open bet’s cash out value, and a settled bet’s return. One with a return is settled. A leg has its pick, its market, its own price, how it stands, the minute and the score while it’s in play, when it starts, and its kits. Five sample bets by default.

tab, defaultTab'open' | 'settled' = 'open'

Which list is showing, when you hold it, or where it starts.

onTabChange(tab: MyBetsTab) => void

Called with the list picked on the switch.

onCashOut(id: string) => void

Called with a bet’s id when its cash out is pressed. Given, each open bet’s cash out value becomes a button, to open your own cash out, such as the Cash Out card.

currencystring = 'AUD'

The currency of the stakes and amounts, written the Australian way.

classNamestring

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

Notes

• Each bet says what kind it is, with how many of a multi’s legs have won or a same game multi’s match. A leg is marked with a green tick once it’s won, a light that pings every 2s beside the minute and the score while it’s in play, an empty ring before it starts, and a quiet cross, in the grey of its words, if it’s lost. A same game multi’s legs have no prices of their own, as it’s priced as a whole.
• An open bet runs its stake to what it could return, and has what it’s worth to cash out now, rolling on reels to each new value with an arrow coming in 4px from the way it went over 320ms, green up and pink down. Null says it’s suspended.
• A leg landing while it’s watched turns its light into a green square that pops in from half its size on a small spring over 460ms, its tick drawing itself over 420ms a beat later, as the count of legs won flips and the score settles beside it. A settled bet says what it paid: Won and the amount in green only when it’s more than the stake, Cashed out or Returned plainly when it isn’t, and Lost in grey with nothing more.
• The switch’s plate glides between Open and Settled, and the arrows, Home and End move it as they would tabs. The list eases to its new height over 360ms, so whatever holds it can follow, and the bets rise in 70ms apart. It sends select for the switch and success as a leg lands, which is announced. Nothing here moves money, so it never sends coin.
• Under 340px wide the legs drop their market names, and under 300px their kits. With reduced motion, a leg that lands simply shows its tick, the arrow appears in place, the light holds still and the list changes height at once.