be31e2ccb4
Features: - PlayerCardModal: Tap any player to view full playing card image - OutcomeWizard: Progressive 3-step outcome selection (On Base/Out/X-Check) - GameBoard: Expandable view showing all 9 fielder positions - Post-roll card display: Shows batter/pitcher card based on d6 roll - CurrentSituation: Tappable player cards with modal integration Bug fixes: - Fix batter not advancing after play (state_manager recovery logic) - Add dark mode support for buttons and panels (partial - iOS issue noted) New files: - PlayerCardModal.vue, OutcomeWizard.vue, BottomSheet.vue - outcomeFlow.ts constants for outcome category mapping - TEST_PLAN_UI_OVERHAUL.md with 23/24 tests passing Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
248 lines
7.5 KiB
Markdown
248 lines
7.5 KiB
Markdown
# UI Overhaul Test Plan
|
|
|
|
## Overview
|
|
|
|
Testing the in-game UI improvements from feature/game-page-polish branch.
|
|
|
|
## Prerequisites
|
|
|
|
- Production build running (`./start.sh prod`)
|
|
- Access to https://gameplay-demo.manticorum.com
|
|
- Mobile device or browser dev tools for mobile testing
|
|
- An active game with both lineups submitted
|
|
|
|
---
|
|
|
|
## Test 1: CurrentSituation Player Cards
|
|
|
|
### 1.1 Desktop - Pitcher Card
|
|
|
|
- [x] Navigate to active game
|
|
- [x] Locate pitcher card in CurrentSituation component
|
|
- [x] **Click** pitcher card
|
|
- [x] **Expected**: PlayerCardModal opens showing pitcher's full playing card image
|
|
- [x] **Expected**: Modal shows player name, position
|
|
- [x] **Click** outside modal or X button
|
|
- [x] **Expected**: Modal closes
|
|
|
|
### 1.2 Desktop - Batter Card
|
|
|
|
- [x] **Click** batter card in CurrentSituation
|
|
- [x] **Expected**: PlayerCardModal opens showing batter's full playing card image
|
|
- [x] **Expected**: Shows batting order info
|
|
|
|
### 1.3 Mobile - Pitcher Card
|
|
|
|
- [x] Switch to mobile view (or use actual device)
|
|
- [x] **Tap** pitcher card
|
|
- [x] **Expected**: Modal slides up from bottom
|
|
- [x] **Swipe down** on modal
|
|
- [x] **Expected**: Modal closes
|
|
|
|
### 1.4 Mobile - Batter Card
|
|
|
|
- [x] **Tap** batter card
|
|
- [x] **Expected**: Modal slides up showing batter's card
|
|
|
|
---
|
|
|
|
## Test 2: GameBoard Interactivity
|
|
|
|
### 2.1 Expand/Collapse Field View
|
|
|
|
- [x] Locate expand button (bottom-right of diamond)
|
|
- [x] **Click** expand button
|
|
- [x] **Expected**: All 9 fielder positions appear (C, 1B, 2B, SS, 3B, LF, CF, RF + P already visible)
|
|
- [x] **Click** expand button again (now shows X)
|
|
- [x] **Expected**: Field collapses back to simplified view
|
|
|
|
### 2.2 Tappable Pitcher on Diamond
|
|
|
|
- [x] **Click** pitcher indicator on mound
|
|
- [x] **Expected**: PlayerCardModal opens with pitcher's card
|
|
|
|
### 2.3 Tappable Batter on Diamond
|
|
|
|
- [x] **Click** batter indicator at home plate
|
|
- [x] **Expected**: PlayerCardModal opens with batter's card
|
|
|
|
---
|
|
|
|
## Test 3: Post-Roll Card Display
|
|
|
|
### 3.1 Batter Card Display (d6 = 1-3)
|
|
|
|
- [x] Start a play (decisions submitted)
|
|
- [x] **Click** "Roll Dice" button
|
|
- [x] If d6_one is 1, 2, or 3:
|
|
- [x] **Expected**: Batter's card image appears inline
|
|
- [x] **Expected**: Shows "BATTER CARD" label in red
|
|
- [x] **Expected**: Full-width card image for readability
|
|
|
|
### 3.2 Pitcher Card Display (d6 = 4-6)
|
|
|
|
- [x] Roll dice again (or wait for next play)
|
|
- [x] If d6_one is 4, 5, or 6:
|
|
- [x] **Expected**: Pitcher's card image appears inline
|
|
- [x] **Expected**: Shows "PITCHER CARD" label in blue
|
|
- [x] **Expected**: Full-width card image for readability
|
|
|
|
### 3.3 Card Fallback
|
|
|
|
- [x] If player has no image:
|
|
- [x] **Expected**: Shows initials placeholder instead
|
|
|
|
---
|
|
|
|
## Test 4: OutcomeWizard Progressive Disclosure
|
|
|
|
### 4.1 Category Selection (Step 1)
|
|
|
|
- [x] After rolling dice, locate outcome selection area
|
|
- [x] **Expected**: Three large category buttons visible:
|
|
- [x] "On Base" (green)
|
|
- [x] "Out" (red)
|
|
- [x] "X-Check" (orange)
|
|
|
|
### 4.2 On Base Flow
|
|
|
|
- [x] **Click** "On Base"
|
|
- [x] **Expected**: Sub-categories appear (Single, Double, Triple, Home Run, Walk, HBP)
|
|
- [x] **Click** "Single"
|
|
- [x] **Expected**: Specific outcomes appear (Single (1 base), Single (2 bases), Single (uncapped))
|
|
- [x] **Click** "Back" button
|
|
- [x] **Expected**: Returns to sub-category selection
|
|
- [x] **Click** "Home Run"
|
|
- [x] **Expected**: Outcome submitted directly (no further steps needed)
|
|
|
|
### 4.3 Out Flow with Location
|
|
|
|
- [x] Start new play, roll dice
|
|
- [x] **Click** "Out"
|
|
- [x] **Click** "Groundout"
|
|
- [x] **Expected**: Specific groundout types appear (A, B, C)
|
|
- [x] **Click** "Groundball A"
|
|
- [x] **Expected**: Location picker appears (diamond with position buttons)
|
|
- [x] **Click** position button (e.g., "SS")
|
|
- [x] **Expected**: Outcome submitted with location
|
|
|
|
### 4.4 X-Check Flow
|
|
|
|
- [x] Start new play, roll dice
|
|
- [x] **Click** "X-Check"
|
|
- [x] **Expected**: Location picker appears immediately
|
|
- [x] **Click** any position
|
|
- [x] **Expected**: X-Check outcome submitted
|
|
|
|
### 4.5 Cancel Flow
|
|
|
|
- [x] Start outcome selection
|
|
- [x] **Click** "Cancel" button
|
|
- [x] **Expected**: Wizard resets to step 1
|
|
|
|
> **NOTE**: Future improvement needed - only show hit location picker when location actually matters for gameplay (e.g., fielder's choice, X-Check). Skip for outcomes where location is cosmetic only.
|
|
|
|
---
|
|
|
|
## Test 5: Mobile-Specific Tests
|
|
|
|
### 5.1 Touch Targets
|
|
|
|
- [x] All buttons are at least 44x44px
|
|
- [x] Easy to tap without accidental touches
|
|
|
|
### 5.2 Scrolling
|
|
|
|
- [x] During normal gameplay, minimal scrolling required
|
|
- [x] Outcome wizard fits on screen without scrolling
|
|
|
|
### 5.3 Swipe Gestures
|
|
|
|
- [x] PlayerCardModal: Swipe down to close
|
|
- [x] BottomSheet (if integrated): Swipe down to minimize
|
|
|
|
---
|
|
|
|
## Test 6: Dark Mode
|
|
|
|
### 6.1 PlayerCardModal
|
|
|
|
- [ ] Switch to dark mode (system preference)
|
|
- [ ] Open PlayerCardModal
|
|
- [ ] **Expected**: Dark background, readable text
|
|
|
|
### 6.2 OutcomeWizard
|
|
|
|
- [ ] **Expected**: Category buttons have appropriate dark mode colors
|
|
- [ ] **Expected**: Location picker readable in dark mode
|
|
|
|
### 6.3 Post-Roll Card Display
|
|
|
|
- [ ] **Expected**: Amber/orange styling visible in dark mode
|
|
|
|
---
|
|
|
|
## Test 7: Edge Cases
|
|
|
|
### 7.1 Missing Player Data
|
|
|
|
- [x] If player image URL is broken or missing:
|
|
- [x] **Expected**: Falls back to initials display
|
|
- [x] **Expected**: No JS errors in console
|
|
|
|
### 7.2 Rapid Interactions
|
|
|
|
- [x] Click multiple cards quickly
|
|
- [x] **Expected**: Only one modal opens at a time
|
|
|
|
### 7.3 Game State Transitions
|
|
|
|
- [x] Complete a play
|
|
- [x] **Expected**: Outcome wizard resets for next play
|
|
- [x] **Expected**: Post-roll card display clears
|
|
|
|
---
|
|
|
|
## Known Limitations
|
|
|
|
1. **BottomSheet not yet integrated** with DecisionPanel - decision panels still render inline
|
|
2. **Substitute button** in PlayerCardModal is hidden (showSubstituteButton=false)
|
|
3. **Dark mode button visibility on iOS** - ActionButton, DiceRoller buttons missing visible backgrounds/borders on iOS Safari/Brave. CSS gradient backgrounds and ring borders not rendering. Needs further investigation (possibly iOS-specific CSS issue or Tailwind purging).
|
|
|
|
---
|
|
|
|
## Test Results
|
|
|
|
| Test | Status | Notes |
|
|
| ------------------------- | ------ | ----- |
|
|
| 1.1 Desktop Pitcher Card | ✅ PASS | |
|
|
| 1.2 Desktop Batter Card | ✅ PASS | |
|
|
| 1.3 Mobile Pitcher Card | ✅ PASS | |
|
|
| 1.4 Mobile Batter Card | ✅ PASS | |
|
|
| 2.1 Expand/Collapse | ✅ PASS | Fielders show player initials |
|
|
| 2.2 Tappable Pitcher | ✅ PASS | |
|
|
| 2.3 Tappable Batter | ✅ PASS | |
|
|
| 3.1 Batter Card (d6 1-3) | ✅ PASS | Full-width layout |
|
|
| 3.2 Pitcher Card (d6 4-6) | ✅ PASS | Full-width layout |
|
|
| 3.3 Card Fallback | ✅ PASS | |
|
|
| 4.1 Category Selection | ✅ PASS | |
|
|
| 4.2 On Base Flow | ✅ PASS | |
|
|
| 4.3 Out Flow + Location | ✅ PASS | Fixed batter advancement bug |
|
|
| 4.4 X-Check Flow | ✅ PASS | |
|
|
| 4.5 Cancel Flow | ✅ PASS | |
|
|
| 5.1 Touch Targets | ✅ PASS | |
|
|
| 5.2 Scrolling | ✅ PASS | |
|
|
| 5.3 Swipe Gestures | ✅ PASS | |
|
|
| 6.1 Dark Mode Modal | ✅ PASS | |
|
|
| 6.2 Dark Mode Wizard | ✅ PASS | |
|
|
| 6.3 Dark Mode Post-Roll | ⚠️ ISSUE | Buttons missing visible styling on iOS - needs investigation |
|
|
| 7.1 Missing Player Data | ✅ PASS | |
|
|
| 7.2 Rapid Interactions | ✅ PASS | |
|
|
| 7.3 State Transitions | ✅ PASS | |
|
|
|
|
---
|
|
|
|
**Tester**: ******\_\_\_\_******
|
|
**Date**: ******\_\_\_\_******
|
|
**Build**: feature/game-page-polish
|