The live two-team score card from a scorekeeper's phone - inning header, AT BAT indicator, and +/− steppers that appear when you wire up onScoreChange.
A working mini-scorekeeper composed with score-panel, count-display, base-diamond, and play-by-play. Call the game.
No plays yet.
Rewritten from the Schott Classic scorekeeping app, where an umpire runs the game from a phone at the field. One component, two personalities: pass onScoreChange and it's an input surface with steppers; leave it off and it's a read-only score display for spectators.
The demo below composes the whole scorekeeping family - count-display, base-diamond, and play-by-play - into a working mini-scorekeeper with a tiny slice of wiffle rules. Call the game.
Install#
npx shadcn@latest add https://benhof.ai/r/score-panel.json
import { ScorePanel } from "@/components/score-panel"
;<ScorePanel
away={{ name: "Whiffleblowers", score: 3 }}
home={{ name: "Bat Attitudes", score: 4 }}
batting="home"
inning={4}
half="bottom"
totalInnings={5}
onScoreChange={(side, delta) => adjust(side, delta)}
/>
Props#
| Prop | Type | Default | Description | ||
|---|---|---|---|---|---|
away / home | ScorePanelTeam | - | { name, score } for each side. | ||
batting | `"away" \ | "home"` | - | Batting side gets the pulsing marker and AT BAT tag. | |
inning / half | number / `"top" \ | "bottom"` | - / "top" | Rendered in the header as "▲ 3". | |
totalInnings | number | - | Shown as "of 5" beside the inning. | ||
status | `"scheduled" \ | "in_progress" \ | "final"` | "in_progress" | Steppers only work in progress; final shows a tag. |
onScoreChange | (side, delta) => void | - | Presence turns on the +/− steppers. | ||
compact | boolean | false | Reduces row height and type scale for phone layouts. |
Notes#
formatInning(inning, half) is exported - "▲ 3" / "▼ 5" - for reuse in headers and feeds.