joshuaandClaude Opus 5.5
825eb14f2e
A game can now carry a list of items the host puts on the scoreboard one at a time: a question (shown above the standings, with an optional picture and an answer to reveal), a sound (played through the scoreboard's speakers) or a video such as a karaoke track (takes over the screen). - Media is a YouTube link, an https link to a file, or an upload to the private game-media bucket. The scoreboard API signs a URL only for the item that is on screen. - What is on screen is state on the event, like the timer, so the ping still carries no data. An unrevealed answer and a sound's or video's name never reach the scoreboard payload. - Control room: click an item to show it, or "Random" to have one picked (prefers items not played yet). Show/hide answer, pause, take off screen; shortcuts Q / A / X. - Duplicating a game or event copies its items and files; deleting removes the files. Needs supabase/migrations/0006_screen_items.sql applied before deploying. database.types.ts was edited by hand to match; re-run gen:types after. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
8.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".
On screen: questions, sounds, videos
┌──────────────────────────────────────────────────────────────┐
│ Worship Game Night Game 5 of 8: Bible quiz │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ Who built the ark? │ │
│ │ ▓ Noah ▓ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ 1 ████ Lions 142 │
│ 2 ████ Eagles 128 │
└──────────────────────────────────────────────────────────────┘
- Question: a bordered panel above the standings, text in Big Shoulders, sized down as it gets longer; an optional picture above the text. The revealed answer is a Floodlight block that pops in. The standings rows shrink to make room.
- Sound: a slim panel "♪ Listen…" ("Paused" while paused), with the answer under it once revealed.
- Video: fills the screen. The header and standings make way and the page padding shrinks; the timer, the buzzer banner and the footer stay.
- While the browser still blocks sound, a Floodlight note says "Sound is off — click “Turn sound on”".
- Control room: a list like the buzzer panel — the item on screen is highlighted (Floodlight), shown items carry a ✓, answers are visible to the host in small text.
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."