# Runner Display Alternatives - Design Proposals

## Current Implementation Issues
- Baseball diamond is visually cluttered
- Runners are represented by small numbered circles that are hard to see
- Player information is not immediately accessible
- Takes up significant vertical space
- Doesn't provide quick access to runner card details
- UX is confusing - users want to quickly glance at cards for each runner

## Design Goals
- **Glanceable**: See runner status instantly without searching
- **Compact**: Use less vertical space (mobile-first)
- **Card Access**: Quick access to view runner player cards
- **Clear State**: Immediately obvious which bases are occupied
- **Professional**: Modern, polished appearance

---

## Option 1: Horizontal Runner Card Bar

### Visual Description
A sleek horizontal bar showing 3 slots (1st, 2nd, 3rd) with mini player cards that expand on tap/click.

```
┌────────────────────────────────────────────────────────┐
│  RUNNERS ON BASE                                       │
│  ┌──────┐    ┌──────┐    ┌──────┐                    │
│  │ 1B   │    │ 2B   │    │ 3B   │                    │
│  │ ────  │    │[IMG] │    │ ────  │                    │
│  │      │    │ J.D. │    │      │                    │
│  │ Empty│    │      │    │ Empty│                    │
│  └──────┘    └──────┘    └──────┘                    │
└────────────────────────────────────────────────────────┘
```

### Features
- **Empty State**: Gray/muted card with dashed border and "Empty" text
- **Occupied State**: Player headshot, name, and team color border
- **Tap to Expand**: Shows full player card modal
- **Visual Hierarchy**: Occupied bases use team colors and are visually prominent
- **Badge Indicator**: Small circular badge with base number (1/2/3) on top-right

### Pros
- ✅ Very compact (single row)
- ✅ Clear visual distinction between empty/occupied
- ✅ Easy touch targets for mobile
- ✅ Horizontally balanced layout
- ✅ Player images make it personal/engaging

### Cons
- ❌ May be cramped on very small screens
- ❌ Requires good player headshots for best effect

### CSS Approach
- Grid layout with 3 equal columns
- Card-style mini containers
- Smooth hover/tap states with scale transform
- Team color accent on occupied cards

---

## Option 2: Compact Diamond Indicator Strip

### Visual Description
Minimalist strip showing bases as dots/indicators with runner names inline.

```
┌────────────────────────────────────────────────────────┐
│  ○ 1B Empty    ● 2B J. Doe (#24)    ○ 3B Empty       │
│  Tap any runner to view card                           │
└────────────────────────────────────────────────────────┘
```

### Features
- **Dot Indicators**: Hollow circle = empty, filled circle = occupied
- **Inline Text**: Base label + player name (abbreviated) + jersey number
- **Color Coding**: Dot and text use team color when occupied
- **Single Line**: Extremely compact
- **Hover State**: Underline runner names, show "tap to view card" tooltip

### Pros
- ✅ Absolute minimal space usage
- ✅ Text-based, works without images
- ✅ Extremely fast to scan
- ✅ Works well in both light/dark mode

### Cons
- ❌ Less visually engaging
- ❌ No player images visible
- ❌ May feel too minimal/plain
- ❌ Harder to tap on mobile (smaller targets)

### CSS Approach
- Flexbox with space-between
- Dot using ::before pseudo-element
- Text truncation for long names
- Underline decoration on hover/active

---

## Option 3: Stacked Runner Cards (Recommended)

### Visual Description
Card-based interface showing only occupied bases as expandable cards in a horizontal stack. Empty bases are represented by small placeholder chips.

```
┌────────────────────────────────────────────────────────┐
│  RUNNERS ON BASE                                       │
│                                                         │
│  1B: ─        2B: [Card]         3B: ─                │
│              ┌──────────┐                              │
│              │  [IMG]   │                              │
│              │ J. Doe   │                              │
│              │  #24  2B │                              │
│              │  [View]  │                              │
│              └──────────┘                              │
└────────────────────────────────────────────────────────┘
```

### Features
- **Empty Bases**: Small chip/badge showing "1B: —" (muted, minimal)
- **Occupied Bases**: Full mini card with:
  - Player headshot (circular)
  - Player name (bold)
  - Jersey number + position
  - Team color accent/border
  - "View Card" button
- **Responsive**: Cards stack vertically on narrow screens
- **Visual Priority**: Occupied bases are much larger and more prominent
- **Quick Actions**: Button directly on card for instant access

### Pros
- ✅ Best balance of compact + informative
- ✅ Only shows detail where needed (occupied bases)
- ✅ Clear call-to-action with "View Card" button
- ✅ Player images add personality
- ✅ Responsive layout adapts well to mobile
- ✅ Professional, modern card-based UI pattern

### Cons
- ❌ Slightly more vertical space when bases loaded
- ❌ Requires player headshots for best experience

### CSS Approach
- Flexbox/Grid hybrid (flex-wrap for responsive)
- Empty bases: inline-flex badge (h-8, minimal)
- Occupied bases: w-32 card with padding
- Shadow and border-radius for card depth
- Team color as left border accent (4px)

### Implementation Details
```vue
<div class="runners-container">
  <!-- Empty Base -->
  <div class="runner-empty">
    <span class="base-label">1B:</span>
    <span class="empty-indicator">—</span>
  </div>

  <!-- Occupied Base -->
  <div class="runner-card" :style="{ borderColor: teamColor }">
    <img :src="player.headshot" class="runner-avatar" />
    <div class="runner-info">
      <p class="runner-name">{{ player.name }}</p>
      <p class="runner-meta">#{{ player.jersey }} • 2B</p>
    </div>
    <button @click="viewCard(player)" class="btn-view-card">
      View Card
    </button>
  </div>
</div>
```

---

## Recommendation: Option 3 (Stacked Runner Cards)

### Why This Is Best
1. **Optimizes for the common case**: Most at-bats have 0-1 runners, so minimizing empty state is key
2. **Mobile-first**: Large tap targets, clear hierarchy, easy to use one-handed
3. **Information density**: Shows exactly what's needed without clutter
4. **Modern UX**: Card-based pattern is familiar and professional
5. **Scalable**: Works equally well with 1, 2, or 3 runners on base

### Responsive Behavior
- **Mobile (< 640px)**: Stack cards vertically, full width
- **Tablet (640-1024px)**: Horizontal row, cards side-by-side
- **Desktop (> 1024px)**: Same as tablet, more breathing room

### Accessibility
- Semantic HTML with proper ARIA labels
- Keyboard navigation support
- High contrast for empty vs occupied states
- Screen reader announces "Runner on second base: J. Doe, number 24"

---

## Next Steps
1. Choose preferred option (or hybrid approach)
2. Create Vue component implementation
3. Test on mobile devices
4. Gather user feedback
5. Iterate based on real gameplay usage
