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>
130 lines
8.1 KiB
Markdown
130 lines
8.1 KiB
Markdown
# 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."
|