Match Tracker

Usage

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

<MatchTracker
  home='Kestrel Bay'
  away='Saltmarsh'
  competition='Harbour League · Round 14'
  score={match.score}
  minute={match.minute}
  events={match.events}
  momentum={match.momentum}
  stats={match.stats}
/>

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

Props

home, awaystring = 'Kestrel Bay', 'Saltmarsh'

The two sides, by name.

kits[string | TeamKitTeam, string | TeamKitTeam]

Each side’s kit, home first, by a team’s name or with colours of its own. Left out, each side’s is found from its name.

competitionstring = 'Harbour League · Round 14'

Over the score, such as the competition and the round.

score[number, number] = [2, 1]

The score, home first. A side’s number going up is a goal: the score rolls and that side’s kit hops.

minute, addednumber = 64

The minute the match has reached, and any minutes into stoppage time, as in 90+3.

status'live' | 'half-time' | 'full-time' = 'live'

In play, or stopped at half time or full time, when the light goes out and the minute gives way to the word.

eventsMatchTrackerEvent[]

Goals, cards and substitutions, in any order: each with an id, its minute and any added time, its kind, its side, the player, and a detail such as the assist or who went off. The feed shows the newest first. A sample match’s by default.

momentumnumber[]

Who was on top, a value a minute from the first, from 1 for the home side to -1 for the away side. Empty, the strip isn’t shown.

statsMatchTrackerStat[]

The key stats as paired bars, each a label and both sides’ values, home first, with percent for a share such as possession. Empty, they aren’t shown.

rowsnumber = 4, or 1 compact

How many events the feed shows.

compactboolean = false

The score, the minute and the last event, with the strip under the score if there’s momentum, for a small space.

classNamestring

Added to the tracker. It’s 760px wide at most, and from 640px the feed and the stats sit side by side.

Notes

• Each side’s kit is drawn at three times its pixel size either side of the score, which is set large in the serif. Under it, the minute is in the orange the casino pieces keep for what’s live, its mark ticking with the seconds, beside a light that pings every 2s. At half time and full time the light goes out and the word takes the minute’s place.
• The strip is a match long, a bar a minute: the home side’s rise above the line and the away side’s hang below it, each in whichever of its kit’s colours reads on a pale card and a dark one alike, or in ink where neither does or the two sides are too alike. Every bar is a whole number of pixels wide and sits on a whole pixel, so it stays crisp at any width. A minute just played grows out of the line over 420ms, and each goal has a mark at its minute, above the bars for the home side and below them for the away side.
• The feed lists the newest first, each event with its minute, a small drawn ball, card or pair of arrows, the player, and the side’s kit. A new one opens at the top over 420ms as the oldest folds shut at the foot on the same curve, so the feed never changes height. The stats are paired bars, the side ahead in ink, that ease to new shares over 600ms.
• A goal rolls the score on its reels and hops the scoring side’s kit twice, two whole pixels at a time, over 880ms, and that’s all. It sends notify for a goal and tick as any other event arrives, and goals and red cards are announced.
• From 640px wide the feed and the stats sit side by side, and narrower they stack. With reduced motion, the light and the minute’s mark hold still, bars and events are simply there, the kit doesn’t hop and the stats change in place.