docs(arcade): spec spectator mode UX enhancements for card sorting

Browse Source

Created comprehensive specification for optional spectator mode UI/UX
improvements to make spectator status clear and controls visually disabled.

**Five Enhancement Areas**:

1. **Context Exposure**
   - Add `localPlayerId` and `isSpectating` to context
   - Enable components to make spectator-aware UI decisions

2. **Spectator Indicator Banner**
   - "👀 Spectating [Player]'s game" during playing/results
   - "👤 Add a Player to Start" during setup
   - Soft blue styling, non-intrusive

3. **Visual Disabled States**
   - All buttons: opacity 0.5, cursor not-allowed
   - All cards: opacity 0.6, pointer-events none
   - Setup, playing, and results phases

4. **Spectator Mode Tests**
   - Banner visibility tests
   - Disabled control interaction tests
   - State synchronization tests
   - Context exposure tests

5. **Player Ownership Tests**
   - Validate correct player can move
   - Reject moves from non-active players
   - Reject moves when user doesn't own player
   - Reject spectator move attempts

**Includes**:
- Detailed code examples for all changes
- Visual mockups of UI states
- Implementation checklist (20 tasks)
- Success criteria
- Questions for user before implementation

Game is production-ready without these - enhancements are for improved UX.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

...

This commit is contained in:

Thomas Hallock 2025-10-18 21:16:57 -05:00

parent feecda78d0

commit aafba77d62

1 changed files with 1206 additions and 0 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1206

apps/web/.claude/CARD_SORTING_SPECTATOR_UX.md Normal file

View File

File diff suppressed because it is too large Load Diff