Finals Board

Preview

Install

1. 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. 2. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.

   npx shadcn@latest add @txbrendan/theme

3. 3. Add the component.

   npx shadcn@latest add @txbrendan/finals-board

Props

• semis

  The four sides, as the semi-finals pair them. Each is { id, name, colors?, pattern? }.

  [[FinalsTeam, FinalsTeam], [FinalsTeam, FinalsTeam]]

• schedule

  Each match's { pitch, kickoff, title? }, with kickoff like "13:00". Without bronze, there is no bronze final.

  { sf1, sf2, final, bronze? }

• minutes

  How long each match holds its pitch: the competition's slot.

  number · default 40

• value

  Winners by match, as team ids, controlled. Like { sf1: "rovers", final: null }.

  FinalsResults

• defaultValue

  Winners at the start, when the board keeps its own.

  FinalsResults

• onChange

  Hears every result, and the old results back on ⌘Z.

  (results: FinalsResults) => void

• held

  Whether the final's pitch is held now, controlled.

  boolean

• defaultHeld

  Whether it starts held, when the board keeps its own.

  boolean · default false

• onHold

  Hears the hold switch.

  (held: boolean) => void

• holdMinutes

  How far a hold moves the matches on the final's pitch that have no result when it starts. A moved match keeps its new kickoff once recorded.

  number · default 15

• className

  Extra classes. Later classes win.

  string

Accessibility

• Cup bracket and Day control are groups named by their titles.
• Each match's two teams are a radio group, named by the match and described by its pitch and kickoff. Tab reaches the group, the arrow keys move between the teams, and the chosen team is the winner.
• A recorded match also names its winner in text, like "Rovers won.", which the group's description reads with its pitch and kickoff.
• A final waits as a plain group that names who it waits for, like "Semi-final 1 winner", until both semi-finals are in.
• One live line says each result and each hold once, like "Semi-final 1: Rovers won. Cup final and Bronze final cleared." ⌘Z says the undo in the page's own region.
• ⌘Z works with focus on a team, since the teams are not text fields.
• A held match's new kickoff has "+15 min" beside it, in words as well as amber, so it shows in forced colors.
• The timeline is a named region with a list per pitch. It takes a Tab stop only when it scrolls sideways.
• The champion types itself in only when the final is recorded on the page, never on load. Screen readers hear the name whole. Under reduced motion or with motion off, it shows at once.

Examples

<FinalsBoard
  semis={[[rovers, lions], [hawks, wolves]]}
  schedule={{
    sf1: { pitch: "Pitch 1", kickoff: "13:00" },
    sf2: { pitch: "Pitch 2", kickoff: "13:00" },
    final: { pitch: "Pitch 1", kickoff: "14:30" },
    bronze: { pitch: "Pitch 2", kickoff: "14:00" },
  }}
/>

const [results, setResults] = useState<FinalsResults>({});
const [held, setHeld] = useState(false);

<FinalsBoard semis={semis} schedule={schedule} value={results} onChange={setResults} held={held} onHold={setHeld} />