Scoreboard

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.

Copy the scoreboard folder and the flip-dot folder from its package next to your page, link the stylesheets and mount it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="flip-dot/flip-dot.css">
<link rel="stylesheet" href="scoreboard/scoreboard.css">
<div id="scoreboard"></div>

<script type="module">
  import FlipDot from './flip-dot/flip-dot.mjs';
  import { mount } from './scoreboard/scoreboard.mjs';

  const scoreboard = mount(document.getElementById('scoreboard'), {
    home: 'HARWICK',
    away: 'SALTMARSH',
    homeName: 'Harwick Town',
  }, { FlipDot });

  // scoreboard.update({ … });   change any option in place
  // scoreboard.destroy();        and take it away again
</script>

mount(element, options, { FlipDot })

Builds the block inside the element and returns its handle. Hand it the Flip-Dot it is built with.

handle.root

handle.signs

handle.score

handle.seconds

handle.goal(side = 'home')

A goal now, for a demo button and the tests.

handle.update(next = {})

Change options in place.

handle.destroy()

Stops it and cleans up after it.

1. At restSeven 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. ClockA real-seconds match clock while in view; only the changed digits flip; the period follows; the clock stops at full time.
3. GoalEvery 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. PausedA real toggle stops the clock and the goals (WCAG 2.2.2); the lamp reads Paused.
5. Live offNo timers and no pause toggle; the lamp reads Latest.
6. PaletteFloodlight (near-black, amber numbers) or terrace (the club's claret); fitting stadium, amber or white.
7. TabletTimeline and stats stack under 900 px.
8. PhoneUnder a 600 px frame each team takes a row with its number beside it, like a broadcast score bug; the clock and period share a row; the head stacks with one team per line.
9. Reduced motionNo 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 screenThe clock and the goal timers stop and every module sleeps.

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

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. Face: Tektur (SIL OFL 1.1), Latin subsets as WOFF2.

• 03Flip-DotThe flip-disc sign from buses and stations.

More blocks on the same object:

• 03.1Departures BoardA departures board of flip-dot lines under an enamel fascia.
• 03.3Venue MarqueeA club’s site on the night, under a brass flip-dot marquee.
• 06.4Specimen CaseA bento of glass-topped compartments in a machined case, each holding one real Tactile object running small (the Odometer, the Flip-Dot, the Detent Dial, the Vessel) with an engraved label card under the glass.