cal/strat-gameplay-webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
be31e2ccb4
strat-gameplay-webapp/frontend-sba/.claude/TEST_PLAN_UI_OVERHAUL.md
Cal Corum be31e2ccb4 CLAUDE: Complete in-game UI overhaul with player cards and outcome wizard 
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>
2026-01-23 15:23:38 -06:00

7.5 KiB
Raw Blame History

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

  • Navigate to active game
  • Locate pitcher card in CurrentSituation component
  • Click pitcher card
  • Expected: PlayerCardModal opens showing pitcher's full playing card image
  • Expected: Modal shows player name, position
  • Click outside modal or X button
  • Expected: Modal closes

1.2 Desktop - Batter Card

  • Click batter card in CurrentSituation
  • Expected: PlayerCardModal opens showing batter's full playing card image
  • Expected: Shows batting order info

1.3 Mobile - Pitcher Card

  • Switch to mobile view (or use actual device)
  • Tap pitcher card
  • Expected: Modal slides up from bottom
  • Swipe down on modal
  • Expected: Modal closes

1.4 Mobile - Batter Card

  • Tap batter card
  • Expected: Modal slides up showing batter's card

Test 2: GameBoard Interactivity

2.1 Expand/Collapse Field View

  • Locate expand button (bottom-right of diamond)
  • Click expand button
  • Expected: All 9 fielder positions appear (C, 1B, 2B, SS, 3B, LF, CF, RF + P already visible)
  • Click expand button again (now shows X)
  • Expected: Field collapses back to simplified view

2.2 Tappable Pitcher on Diamond

  • Click pitcher indicator on mound
  • Expected: PlayerCardModal opens with pitcher's card

2.3 Tappable Batter on Diamond

  • Click batter indicator at home plate
  • Expected: PlayerCardModal opens with batter's card

Test 3: Post-Roll Card Display

3.1 Batter Card Display (d6 = 1-3)

  • Start a play (decisions submitted)
  • Click "Roll Dice" button
  • If d6_one is 1, 2, or 3:
    • Expected: Batter's card image appears inline
    • Expected: Shows "BATTER CARD" label in red
    • Expected: Full-width card image for readability

3.2 Pitcher Card Display (d6 = 4-6)

  • Roll dice again (or wait for next play)
  • If d6_one is 4, 5, or 6:
    • Expected: Pitcher's card image appears inline
    • Expected: Shows "PITCHER CARD" label in blue
    • Expected: Full-width card image for readability

3.3 Card Fallback

  • If player has no image:
    • Expected: Shows initials placeholder instead

Test 4: OutcomeWizard Progressive Disclosure

4.1 Category Selection (Step 1)

  • After rolling dice, locate outcome selection area
  • Expected: Three large category buttons visible:
    • "On Base" (green)
    • "Out" (red)
    • "X-Check" (orange)

4.2 On Base Flow

  • Click "On Base"
  • Expected: Sub-categories appear (Single, Double, Triple, Home Run, Walk, HBP)
  • Click "Single"
  • Expected: Specific outcomes appear (Single (1 base), Single (2 bases), Single (uncapped))
  • Click "Back" button
  • Expected: Returns to sub-category selection
  • Click "Home Run"
  • Expected: Outcome submitted directly (no further steps needed)

4.3 Out Flow with Location

  • Start new play, roll dice
  • Click "Out"
  • Click "Groundout"
  • Expected: Specific groundout types appear (A, B, C)
  • Click "Groundball A"
  • Expected: Location picker appears (diamond with position buttons)
  • Click position button (e.g., "SS")
  • Expected: Outcome submitted with location

4.4 X-Check Flow

  • Start new play, roll dice
  • Click "X-Check"
  • Expected: Location picker appears immediately
  • Click any position
  • Expected: X-Check outcome submitted

4.5 Cancel Flow

  • Start outcome selection
  • Click "Cancel" button
  • 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

  • All buttons are at least 44x44px
  • Easy to tap without accidental touches

5.2 Scrolling

  • During normal gameplay, minimal scrolling required
  • Outcome wizard fits on screen without scrolling

5.3 Swipe Gestures

  • PlayerCardModal: Swipe down to close
  • 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

  • If player image URL is broken or missing:
    • Expected: Falls back to initials display
    • Expected: No JS errors in console

7.2 Rapid Interactions

  • Click multiple cards quickly
  • Expected: Only one modal opens at a time

7.3 Game State Transitions

  • Complete a play
  • Expected: Outcome wizard resets for next play
  • 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