joshuaandClaude Opus 5.5
c89a82295b
Next.js 16 App Router with strict TypeScript, Tailwind 4 theme tokens from docs/UI.md, Vitest, and the three Supabase clients. Env vars are validated with zod in next.config.ts so dev and build fail fast with a readable error. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
4.6 KiB
4.6 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 |
Errors, penalties, hidden state |
| Team colours are user-chosen; pick text colour per team by contrast (white or Ink). |
Type:
- Big Shoulders Display (Google Fonts) — 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.
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."