Same Game Multi

Usage

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

<SameGameMulti
  match={{ home: 'Northgate', away: 'Ridgeway', starts: 'Sat 19:35', competition: 'Coast Premiership' }}
  markets={markets}
  selected={legs}
  onSelect={setLegs}
  onPrice={(legs) => priceSameGameMulti(matchId, legs)}
  onAdd={(multi) => addToSlip(multi)}
/>

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

Props

matchSameGameMultiMatch

The match: its home and away sides, their kits by name or with colours of their own, when it starts and the competition. A sample rugby league match by default.

marketsSameGameMultiMarket[]

The markets to pick from, each with an id, a name and its selections. One with a column heading, such as H2H, sits in the match’s table, its first selection on the home side’s row and its second on the away side’s, and the rest have blocks of their own. Many lets more than one of a market’s selections in, as tryscorers do. A selection has an id, a label, a shorter one for tight spaces, its price, the side it’s on, and the margins it comes in on, as the home side’s points less the away side’s, such as [1, Infinity] for Northgate to win. Five sample markets by default.

selected, defaultSelectedstring[] = []

The selections picked, by id, in the order they were picked, when you hold them, or where it starts when it holds them.

onSelect(selected: string[]) => void

Called with every selection picked, each time a leg is added, taken out or swapped in.

onPrice(legs: SameGameMultiLeg[]) => Promise<number> | number

Prices the legs as a whole. Resolve with the price in decimal odds, or reject and it says it couldn’t be priced, with a way to try again. Left out, it stands in, taking 780ms and pricing a little under the legs multiplied.

stakenumber = 10

What the return under the price is worked out for, as in $10 returns $68.20.

onAdd(bet: SameGameMultiBet) => void

Called with the multi when Add to slip is pressed: its match, its legs, its price, the stake and the potential return.

stackboolean = true

Shows the legs as a stack, each with a cross. Off, the line under the price says how many there are, for a short space.

currencystring = 'AUD'

The currency of the stake and the return, written the Australian way.

classNamestring

Added to the multi. It’s 880px wide at most: from 680px the legs and the price sit in a column beside the markets, and narrower they come under them. Given a height, the price stays docked at the foot as legs come in.

Notes

• Head to head, line and total sit in the match’s table, a row a side, with the start or the total printed small over each price. Tryscorers and the winning margin have blocks of two columns under it, each pick with its side’s kit. A picked price turns to ink in 200ms, and its leg opens at the foot of the stack over 400ms as its kit and words rise 6px out of a blur.
• Every change prices the multi again, as a same game multi is priced as a whole rather than as its legs multiplied: the price and its return step back while it’s worked out, for 450ms at the least so a quick answer doesn’t flicker, and the new price rolls into place on reels within about a second. A leg whose price moves is priced again too. Add to slip waits for two legs, and pressed while a price is still coming, it adds the multi the moment the price lands.
• A price that can’t go with the legs picked keeps its plate and dims to a third: the other side’s head to head, a second pick from a market that takes one, or a margin the legs picked rule out, such as Ridgeway +4.5 once Northgate 13+ is in. Pressing it says why, under its market, such as Ridgeway can’t go with Northgate, they need different winners, with Swap to bring it in and take out what’s in its way.
• The prices are a grid: the arrows move between them, Home and End go along a row, and Ctrl with either goes to the first or the last, so the markets are one stop for Tab. A leg taken out from its cross hands focus to the next. It sends select for a pick, erase for a leg taken out, tick as each price lands, error for a pick it turns away and success when the multi is added, and the price and anything turned away are announced.
• Add to slip is the one flat yellow a game’s main button has, a step lighter under the pointer and a step darker pressed, and quiet until there are two legs. With reduced motion, legs come and go at once, nothing presses in, and the price changes in place with only the step back while it’s worked out.