Live Odds

Usage

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

<LiveOdds
  title='Match result'
  fixtures={fixtures}
  selected={picked}
  onSelect={setPicked}
/>

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

Props

fixturesLiveOddsFixture[]

A row each: an id, the home and away sides, home, draw and away prices, and either the minute and score while it’s in play or when it starts. Suspended locks its prices, and kits gives each side’s kit, which is otherwise found from its name. Change the prices and each one that moved flashes; raise a side’s score and it’s a goal. Four sample fixtures by default.

selected, defaultSelectedstring[] = []

The prices picked, when you hold them, each as its fixture’s id and side, such as kb-pe:home.

onSelect(selected: string[]) => void

Called with every price picked, each time one is pressed or Clear is.

titlestring = 'Match result'

The market, at the head of the board.

classNamestring

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

Notes

• Each side’s kit sits beside its name, drawn the same as in the slip and on a cash out. On a board narrower than about 380px the kits step aside so the names stay whole, under 400px the column heads become 1, X and 2, and under 360px the buttons go from 48px squares to 44px.
• A price that moves comes in 5px from the way it went, out of a blur, over 340ms. Its tint, its arrow and its colour hold for the first part of 1.5s and then fade back. A picked price is in ink, and a move on it shows in the same colours turned to read on the ink.
• In play, the light pings a ring every 2s and the minute’s mark ticks with the seconds, in the orange the casino pieces keep for what’s live. A goal pops the score from one and a half times its size and holds it in orange, hops the scoring side’s kit twice a pixel at a time, and turns Live to Goal for 2.6s.
• Suspending a fixture dims its buttons and takes their prices away under one locked bar in 240ms, in ink, as it’s a pause rather than a loss. Any new prices wait behind it and flash as the fixture comes back. The prices are a grid: the arrows move between them, Home and End go along a row, and Ctrl with Home or End goes to the corners.
• It sends select as a price is picked, toggle-off as one is let go, erase for Clear and notify for a goal. Goals and suspensions are announced, but the moves aren’t, as there are too many to hear. With reduced motion, a price changes in place, the light and the minute’s mark hold still, and a goal is the score’s colour alone.