Race Card

Usage

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

<RaceCard
  race={{ track: 'Kestrel Park', number: 5, name: 'Saltbush Handicap', distance: 1200, class: 'BM78', condition: 'Good 4' }}
  runners={field}
  jumpsAt={jumpsAt}
  selected={picked}
  onSelect={setPicked}
/>

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

Props

raceRaceCardRace

The race: its track, its number on the day, its name, the distance in metres, the class, such as BM78, and the track’s rating, such as Good 4. R5 at Kestrel Park by default.

runnersRaceCardRunner[]

The field, a row each: the saddlecloth number, name, barrier, jockey with any claim, trainer, weight in kg, last starts such as x2131, Win and Place prices in decimal odds and the price it opened at for the flucs. Scratched strikes it through and marks it SCR, and silks are found from its name unless you give it some. Change a price and it flashes. Nine sample runners by default, one scratched.

jumpsAtnumber

When it jumps, in ms since 1970, as Date.now() gives it. The head counts down to it, and once it’s passed, betting closes. Four minutes and twelve seconds from now by default.

selected, defaultSelectedstring[] = []

The prices picked, when you hold them, each as its runner’s number and the bet, such as 4:win or 4:place.

onSelect(selected: string[]) => void

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

sort, defaultSort'number' | 'price' = 'number'

By saddlecloth number, or by the Win price with the favourite first, when you hold it. The No. and Win heads change it.

onSortChange(sort: RaceCardSort) => void

Called with the order picked on the heads.

classNamestring

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

Notes

• Each runner has its number and silks, its name with its barrier in brackets, the jockey and trainer under it, the form and weight, the flucs, and its Win and Place prices on flat plates. Under 520px wide the flucs step aside, under 400px the jockey and trainer give their line to the form and weight so the names stay whole, and under 360px the plates go from 56px to 48px.
• A price that moves comes in 5px from the way it went, out of a blur, over 340ms, with a tint and an arrow that hold for the first part of 1.5s and then fade: green with an arrow up for a price going out, pink with an arrow down for one coming in, as on Live Odds. The flucs keep the arrow, from the price it opened at to the price now.
• A picked price is in ink. The No. and Win heads sort the field by number or by price, the favourite first and any scratchings last, and the rows glide to their new places over 420ms, one moving up passing over the rest. A scratched runner is struck through, its silks faded and its prices gone, with SCR where they were.
• The countdown to the jump goes a second at a time, and nothing about it changes as it nears: no colour and no hurry. Once it has jumped, the prices dim and stop taking presses, and that betting has closed is announced, as is a change of order.
• The prices are a grid: the arrows move between them, skipping scratchings, 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, select for a sort, and the faintest tick as a price moves. With reduced motion, a moved price changes in place with its colour fading back, and the rows take their new places at once.