joshuaandClaude Opus 5.5
186a112b95
The host marks the answering team "Got it" or "Wrong" (G / W). Wrong passes the turn to the next team in the buzz order; Got it closes the buzzers until "Next question" (B). Undo reverses either mark. In a direct game a correct answer adds 1 to the team's score in the game's first criterion, as an ordinary admin score row, so it flows through the scoring engine (multiplier, placement) and the existing range/step trigger. The point is written before the mark, so a refused point never leaves a "correct" with nothing behind it. Judged games only get the mark: the judges' scores stand. Needs supabase/migrations/0004_buzz_result.sql applied before deploying. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
6.1 KiB
UI & design direction
Concept: "Sports-hall scoreboard at a worship night"
Chunky, legible-from-the-back numbers; team colours do the shouting; everything else stays calm. Spend the boldness in ONE place: the scoreboard's rank-change moment. Admin + judge UIs are quiet and functional.
Tokens
| Name | Hex | Use |
|---|---|---|
| Stage | #1B1640 |
Scoreboard background (deep indigo, not black) |
| Floodlight | #FFD23F |
Leader highlight, focus rings on scoreboard |
| Chalk | #F5F7FA |
Admin/judge background |
| Ink | #14213D |
Primary text on light |
| Signal | #2EC4B6 |
Saved/connected state |
| Alert | #E63946 |
Penalty/hidden accents, borders, status dots |
| Alert strong | #C1121F |
Error text on light backgrounds, and red fills under white text (Alert itself is only 4.0:1 on white) |
| Team colours are user-chosen; pick text colour per team by contrast (white or Ink). |
Type:
- Big Shoulders (Google Fonts; formerly "Big Shoulders Display") — scoreboard numbers, team names, game titles. Tabular numbers.
- Atkinson Hyperlegible — all body/UI text (readable on phones + projector). Sentence case everywhere. No all-caps labels.
Screens
Scoreboard (16:9)
┌──────────────────────────────────────────────────────────────┐
│ Worship Game Night Game 3 of 8: Karaoke │
│ │
│ 1 ████ Lions 142 │
│ 2 ████ Eagles 128 │
│ 3 ████ Sharks 120 │
│ 4 ████ Wolves 97 │
│ │
│ ● live ⛶ │
└──────────────────────────────────────────────────────────────┘
- Each row: rank, colour bar (full-height block in team colour), name, total. Row height scales with team count to fill the screen.
- Leader row gets a Floodlight outline.
- On update: rows slide to new positions (FLIP animation, ~600ms), changed totals count up. Respect
prefers-reduced-motion(instant swap). - Hidden: team colour blocks in alphabetical order, totals replaced by a single centred message "Scores are hidden — final reveal soon".
- Reveal mode: rows appear bottom-up, one per admin click, with a short drum-roll pause effect (visual only).
Admin control room (desktop/laptop)
┌ Games ─────────┐┌ Karaoke · live ───────────────────────┐┌ Scoreboard ─────┐
│ ✓ Name that... ││ [Prev] [Next] Spotlight: [Lions ▾] ││ (●Visible)Frozen│
│ ✓ Guess lyric ││ ││ Hidden │
│ ▶ Karaoke ││ Team Pitch Energy Lyrics Stage Crowd││ [Open] [Reveal] │
│ ○ Charades ││ Lions 4.3 5.0 3.7 4.0 4.7 ││ │
│ ○ Bible quiz ││ Eagles … │├ Bonus ──────────┤
│ ││ Judges: Eben ✓✓✓✓ Melissa ✓✓✗✗ ││ Lions +1 +5 +10 │
│ ││ Notes (only you): … ││ … │
└────────────────┘└───────────────────────────────────────┘└─────────────────┘
Collapses to stacked panels on tablet.
Judge (phone)
┌─────────────────────────┐
│ Karaoke │
│ Judging as Melissa │
│ ▸ Judge notes │
├─────────────────────────┤
│ ★ Now: Lions │
│ Pitch │
│ [1][2][3][4][5] │
│ Energy │
│ [1][2][3][4][5] │
│ … Saved ✓ │
├─────────────────────────┤
│ Eagles … │
└─────────────────────────┘
Selected block filled in team colour. Tap the selected block again to clear.
Buzzer (phone)
┌─────────────────────────┐
│ ● Lions │
│ Bible quiz │
│ │
│ ╭─────────╮ │
│ │ │ │
│ │ Buzz │ │
│ │ │ │
│ ╰─────────╯ │
│ │
│ Ready. Tap to buzz in. │
└─────────────────────────┘
One round button in the team's colour, as big as the screen allows; it reacts on touch-down, not on release. After buzzing it shows the team's place ("1st", "2nd"), then ✓ or ✗ once the host marks the answer. While it's the team's turn to answer, and when it got it, the whole screen turns the team's colour. Greyed out while there is no buzzer game.
On the scoreboard the buzzer is a banner in the answering team's colour above the standings: "Lions buzzed!" with the waiting teams in small text, "Eagles to answer" when the turn passes, "Eagles got it!" at the end. It pops in on each change; reduced motion shows it without the pop.
In the control room the answering team's row is highlighted (Floodlight) and carries the two buttons "Got it +1" and "Wrong"; marked rows show ✓ / ✗ and an "Undo".
Copy
Plain verbs: "Next game", "Hide scores", "Freeze scores", "Show scores", "Add bonus", "Copy judge link". Errors say what happened + what to do: "This link has been turned off. Ask the host for a new one."