# Ball Count

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

- Name: `ball-count`
- Status: beta
- Categories: sport, display
- File: the install writes `ball-count.tsx` to your `ui` alias, `@/components/ui` by default.
- Gallery: https://arbokui.com/components/ball-count
- Registry item: https://arbokui.com/r/ball-count.json

## Install

1. Add the registry to `components.json`. Do this first, once:

   ```bash
   npx shadcn@latest registry add "@arbokui=https://arbokui.com/r/{name}.json"
   ```

   The command writes this entry. You can also add it by hand:

   ```json
   {
     "registries": {
       "@arbokui": "https://arbokui.com/r/{name}.json"
     }
   }
   ```

   Without this step, the shadcn CLI looks up `@arbokui` in a public list that Arbokui does not control.

2. Add the theme once per app. It replaces your color tokens with ones checked for contrast:

   ```bash
   npx shadcn@latest add @arbokui/theme
   ```

3. Add the component:

   ```bash
   npx shadcn@latest add @arbokui/ball-count
   ```

## Use it for

- 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.

## Avoid it for

- 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.

## Props

- `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.

## Accessibility

- 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.

## Examples

### A full count with two outs

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

### With the batter at the plate

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