Components

Play-by-Play

A chronological game log, newest play on top - inning markers, kind-colored dots, optional timestamps.

  1. ▲ 5Side retired. Bases cleared
  2. ▼ 4Strikeout
  3. ▼ 4Bat Attitudes runner scores from third
  4. ▼ 4Single. Runners move up
  5. ▼ 4Ball

The event feed from the Schott Classic scorekeeping app, minus the offline-sync machinery - pass events, get a feed. Each row carries an inning marker (▲/▼ + number), a dot colored by what happened, the description, and an optional time.

Install#

npx shadcn@latest add https://benhof.ai/r/play-by-play.json

import { PlayByPlay } from "@/components/play-by-play"

;<PlayByPlay
  title="Play-by-play"
  events={[
    {
      id: "1",
      description: "Strikeout",
      inning: 4,
      half: "bottom",
      kind: "out",
    },
    {
      id: "2",
      description: "Runner scores from third",
      inning: 4,
      half: "bottom",
      kind: "score",
    },
  ]}
/>

Event fields#

The PlayEvent type defines the shape of each event: id, description, inning, half, kind (e.g. "out", "score"), and optional time.

Ordering#

Newest first: when every event has a time, events sort by it; otherwise the given order is treated as append-as-they-happen and reversed. orderPlayEvents is exported if you need the same ordering elsewhere.