League Scores

beta

Other games around the league, from a baseball board: each game's inning, both teams, their runs, and who is pitching.

Preview

Games in progress and one final, with a note under them

North
Inning	Team	Runs	Pitcher
9	Bay	5	10
9	Pine	6	10
7	Oak	2	4
7	Lake	0	10
F	Ash	7	5
F	Elm	5	8
Bay here Mon, Tue & Wed

Games that have not started yet show no inning or runs

South
Inning	Team	Runs	Pitcher
	Cove		1
	Dale		3
	Ridge		21
	Vale		4

On a dark green board

North
Inning	Team	Runs	Pitcher
9	Bay	5	10
9	Pine	6	10
7	Oak	2	4
7	Lake	0	10
F	Ash	7	5
F	Elm	5	8
Bay here Mon, Tue & Wed

Install

1. Add the registry to components.json, once per app. Without it, the shadcn CLI looks up @txbrendan in a public list that txbrendan/ui does not control.
```
npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"
```
2. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.
```
npx shadcn@latest add @txbrendan/theme
```

3. Add the component.

npx shadcn@latest add @txbrendan/league-scores

Use it for

Scores from other parks on a baseball scoreboard, one table per league or group.
Pass each game with away and home, each with a short name, runs, and pitcher's number.
Pass inning as the inning being played, or a word like "F" once it is final.
Pass note for a line under the games, like the next series at this park.

Avoid it for

The game being played here. Use LineScore.
Standings or a table of results. Use Standings.

Props

title
The league or group these games are in. It titles the table.
string
games
Each side is { name, runs?, pitcher? }. Visitors show on top, home below.
{ away: LeagueScoresSide; home: LeagueScoresSide; inning?: number | string }[]
note
A line under the games.
ReactNode
className
Extra classes on the table. Later classes win.
string

Prop	Type	Default	What it does
title	string	-	The league or group these games are in. It titles the table.
games	{ away: LeagueScoresSide; home: LeagueScoresSide; inning?: number \| string }[]	-	Each side is { name, runs?, pitcher? }. Visitors show on top, home below.
note	ReactNode	-	A line under the games.
className	string	-	Extra classes on the table. Later classes win.

It is a table captioned with title. Each team is a row header.
Screen readers hear the column names in full: Inning, Team, Runs, and Pitcher.
Each game is its own table body, and its inning spans both of its rows.

Examples

Two games in one group

<LeagueScores
  title="North"
  games={[
    { inning: 9, away: { name: "Bay", runs: 5, pitcher: 10 }, home: { name: "Pine", runs: 6, pitcher: 10 } },
    { inning: "F", away: { name: "Oak", runs: 2, pitcher: 4 }, home: { name: "Lake", runs: 0, pitcher: 10 } },
  ]}
  note="Bay here Mon, Tue & Wed"
/>