# Scoreboard

A match centre round a flip-dot scoreboard. Big amber numbers and a clock counting real seconds; a goal ripples the whole board outward before the number turns over.

Block · With a Pass · https://tactileui.dev/blocks/scoreboard

> The code and styling for this block come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

Modular flip dot frame, Solved module layout, Distance ordered ripple, Real seconds match clock, Accessible score sentence, Pausable live updates, Visibility gated timer

## Usage notes

A live result as an event: a club or league site's match centre, an arena's live page, any contest where the number changing is the moment (a leaderboard, a count, a race). The frame is the headline; the timeline and stats underneath carry the detail.

## Options

| Option | Type | Description |
| - | - | - |
| home | text | Up to ten letters; long names drop to the small face. |
| away | text | Away, on the board |
| homeName | text | Home, in full |
| awayName | text | Away, in full |
| competition | text | Competition |
| ground | text | Ground |
| crowd | number | Attendance |
| homeScore | number | Home score |
| awayScore | number | Away score |
| minute | number | Where the match clock starts; it runs in real seconds. |
| live | boolean | The clock runs and goals go in (three at most) while the section is in view, with a pause button. |
| palette | enum | Floodlit near-black, or the club’s claret. |
| scheme | enum | Stadium: white names, amber numbers. Or one colour throughout. |
| finish | enum | Housings |
| glass | boolean | Glass covers |
| light | number | Light from (degrees) |
| cta | text | Button |
| ctaHref | text | Button link |
| next | text | The link in the foot, and the end of the message module’s scroll. |
| nextHref | text | Next match link |

## Methods

- root
- signs
- score
- seconds
- goal
- update
- destroy

## States

1. **At rest**: Seven flip-dot modules in a bolted steel frame: names, two big number modules spanning two rows, the match clock, the period, and a message module scrolling the ground's news; timeline and stats below.
2. **Clock**: A real-seconds match clock while in view; only the changed digits flip; the period follows; the clock stops at full time.
3. **Goal**: Every other module clears and rewrites in order of its distance from the frame's centre (the ripple), the scoring number turns over, the message writes GOAL! then the minute and scorer; the timeline flashes a new row, shots and on-target bars ease; one polite sentence.
4. **Paused**: 
5. **Live off**: No timers and no pause toggle; the lamp reads Latest.
6. **Palette**: Floodlight (near-black, amber numbers) or terrace (the club's claret); fitting stadium, amber or white.
7. **Tablet**: 
8. **Phone**: 
9. **Reduced motion**: No ripple, every change an instant swap, no frames requested; the lamp does not beat; the clock, the goals, the timeline and the stats still update.
10. **Off screen**: The clock and the goal timers stop and every module sleeps.

## How it works

Original composition. Harwick Town, Saltmarsh Athletic, the Northern League, Ashfield Road and every player are invented. Imagery is CSS drawn for the scene; the modules are the Flip-Dot.