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

Catcher

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

✅ 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