How hard can you smash?

The idea

A working demo of the Smash Challenge screen, not production code. It exists so the behaviour, the states and the timing are unambiguous. Two views share one live state: the stadium screen renders it, the operator device changes it.

Design

Type, colour and layout come from the Padelplay distributors site — light ground with the swish artwork, the lockup in a lime identity band, dark-green ink, hairline borders and tabular numerals. Kern Extended sets the numbers and display lines; FK Grotesk Light sets everything else. Please build against those tokens rather than re-deriving a look.

Contest rules

• Maximum 4 players per round.
• Each player smashes up to 4 times — fewer is allowed and must not be penalised.
• Every smash is scored 0–10, one decimal place.
• The winner is the player with the single hardest smash, not the highest total — a total would punish anyone who took fewer swings.
• Ties break in favour of whoever needed fewer smashes to reach that score.
• The screen shows only the players actually added and only the smashes actually taken. Never render empty placeholder slots: a round may be two players taking three smashes each, and blank slots would imply something is still owed.

Screen states

• Opening question — attract state before the first player is added.
• Players — the line-up; each new name animates in beside the others.
• Scoring — one player on court, the smashes they have taken, their best so far.
• Reveal — a pushed score takes the whole screen on the identity lime, then returns. The crowd never sees a number being typed or corrected.
• Final ranking — champion on lime with their hardest smash, then the rest.
• Reset — back to the opening question for the next group.

Why the reveal is a separate step

The operator types privately and pushes on the announcer's cue. Live-typing to a stadium screen shows every keystroke and every correction to thousands of people, so entry and reveal stay separate.

Shared state

{
  phase:    "start" | "roster" | "scoring" | "results",
  players:  [{ id, name, scores: number[] }],   // max 4, scores max 4
  activeId: string | null,                       // who is on court
  reveal:   { playerId, value, isBest, seq },    // drives the reveal
  seq:      number,                              // increments per push
  rev:      number                               // increments per operator action
}

The display animates a reveal only when seq increases while it is already open, so a screen connecting late renders the current state without replaying an old score. The operator ignores any snapshot whose rev is older than its own, so a delayed echo cannot undo a newer action. Snapshots arrive frozen — clone before mutating.

Display rendering

The stadium view is authored at a fixed 1920×1080 and scaled to the output, so it is identical on any projector or LED wall and never reflows. The brand fonts and the swish artwork are embedded, so nothing depends on the venue's network.