Ball Count

beta

The count from a baseball board: balls, strikes, and outs as lit numbers with their lights, and who is at bat.

Preview

A new batter, a count in progress, and a full count with two outs

With the batter's number and average

On a dark green board

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/ball-count

Beside a line score while a baseball game is on.
Pass balls, strikes, and outs as they stand. Each shows as a lit number and a row of lights.
Pass batter with the shirt number at the plate, and their average as you print it, like ".267".
Reset balls and strikes to 0 for each new batter, and outs to 0 for each new half-inning.

A finished game. There is no count, so leave it off the board.
Counting anything else, like sets or fouls. The lights stop at 3 balls, 2 strikes, and 2 outs.

balls
Balls on the batter, 0 to 3. Higher values show as 3.
number
strikes
Strikes on the batter, 0 to 2. Higher values show as 2.
number
outs
Outs in the half-inning, 0 to 2. Higher values show as 2.
number
batter
Who is at the plate. Leave it out between batters.
{ number: number; average?: string }
className
Extra classes on the list. Later classes win.
string

Prop	Type	Default	What it does
balls	number	-	Balls on the batter, 0 to 3. Higher values show as 3.
strikes	number	-	Strikes on the batter, 0 to 2. Higher values show as 2.
outs	number	-	Outs in the half-inning, 0 to 2. Higher values show as 2.
batter	{ number: number; average?: string }	-	Who is at the plate. Leave it out between batters.
className	string	-	Extra classes on the list. Later classes win.

It is a description list, so screen readers hear each name with its number, like "Balls 1".
The number is text. The lights repeat it for the eye and are hidden from screen readers.
Lit lights take system colors in forced colors, and unlit ones keep an outline, so the count still shows.
It is not a live region, since the count changes on every pitch. Say what matters, like a run, elsewhere.

<BallCount balls={3} strikes={2} outs={2} />

<BallCount balls={1} strikes={2} outs={1} batter={{ number: 24, average: ".267" }} />