# 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