joshuaandClaude Opus 5.5
f1b3a862f8
- Share links section: scoreboard link, every judged game's judge links and open link with QR codes, and 'Copy all judge links' as plain text for WhatsApp. Warns when links point at localhost. - Error and not-found pages with plain-language copy; a real start page. - Accessibility: darker 'alert strong' red for text and white-on-red (Alert was 4.0:1 on white), no text below 70% ink, 44px block buttons and link targets, scoreboard status stays readable when idle. - vercel.json pins functions to Dublin next to the West EU database; README documents deployment and pre-game-night checks. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
81 lines
4.8 KiB
Markdown
81 lines
4.8 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.
|
|
|
|
## 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."
|