# Runner Display Mockups

Interactive mockups of Options 1, 3, and 4 for runners on base display

## Test Scenarios

## Option 1: Horizontal Runner Card Bar

Three equal-width cards showing all bases with equal visual weight

### Runners on Base

#### ✅ Pros

- • Very compact (single row)
- • Clear visual distinction
- • Easy touch targets
- • Balanced layout

#### ❌ Cons

- • Always shows all 3 cards
- • May feel cluttered when bases empty
- • Less visual hierarchy

## Option 3: Stacked Runner Cards

Only occupied bases get prominent cards, empty bases are minimal chips

### Runners on Base

#### ✅ Pros

- • Optimizes for common case (0-1 runners)
- • Clear visual hierarchy
- • Easy card access with button
- • Mobile-first design
- • Professional card-based UI

#### ❌ Cons

- • More horizontal space with 3 runners
- • Requires player headshots

## Option 4: Expanding Runner Cards with Matchup NEW RECOMMENDATION

Runners list on left, catcher on right. Click a runner to expand it in place and show full card + catcher matchup. Only visible when runners on base.

### Runners on Base

No runners on base

Component hidden

### Catcher

Buster Posey
#28 • C
Click a runner to see matchup →
CATCHER C Buster Posey

#### ✅ Pros

- • Expands in place - no jarring screen flip
- • Smooth transition - runner card grows to show full player card
- • Catcher card appears simultaneously for matchup context
- • Only shows when needed (on_base_code > 0)
- • Consistent with pitcher vs batter styling
- • Clear visual hierarchy

#### ❌ Cons

- • Requires extra click to see full cards
- • Slightly more complex animation

#### 💡 Implementation Notes

- • Component only renders when `thisPlay.on_base_code > 0`
- • Default: Runners list (left) with compact cards + Catcher summary (right)
- • Click runner → Runner card expands in place to show full player card
- • Simultaneously, catcher card expands to show full matchup
- • Click again or click another runner to collapse/switch
- • Smooth height transition using CSS max-height animation

## Final Recommendation: Option 4

🎯 Smooth in-place expansion - Runner card grows to reveal full player card

🔄 Integrated matchup view - Catcher card appears alongside for comparison

👁️ No screen flipping - Everything expands/collapses in the same layout

📱 Mobile-first design - Works seamlessly on all screen sizes

⚾ Strategic context - See runner vs catcher for steal decisions

✨ Clean UX - Compact by default, detailed on demand