- OffensiveApproach: read game state from store (fix same prop-passing bug as DefensiveSetup),
remove steal option (check_jump encompasses it), hide unavailable actions instead of disabling,
fix conditions (sac/squeeze: <2 outs + runners, hit-and-run: R1/R3 not R2-only)
- Remove all emoji icons from decision components (OffensiveApproach, DefensiveSetup, DecisionPanel)
- RunnerCard: always show hold/not-held pills on occupied bases (status indicator in all phases)
- DecisionPanel: remove dead hasRunnersOnBase computed and prop pass-through
- Rewrite OffensiveApproach tests (32 new tests with Pinia store integration)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Runner highlights and cards:
- Pills: red-500 ring, red-50 background when selected
- Full cards: red gradient (red-900 to red-950), red-600 border
- Pulse glow: red animation (rgba(239, 68, 68))
- Hardcoded red color (#ef4444) for runner pill borders
Catcher highlights and cards:
- Pill: blue-500 ring, blue-50 background when selected
- Full card: blue gradient (blue-900 to blue-950), blue-600 border
- Pulse glow: blue animation (rgba(59, 130, 246))
Updated tests to expect new colors
All 15 RunnersOnBase tests passing
All 16 RunnerCard tests passing
- Replace .border-l-4.border-gray-600 checks with .catcher-pill
- Update isExpanded prop references to isSelected
- Adjust expanded view tests for new side-by-side layout
- matchup-card-blue = runner full card
- matchup-card = catcher full card
- Fix deselection test to check isSelected prop (Transition keeps DOM during animation)
All 15 RunnersOnBase tests passing
All 16 RunnerCard tests passing
- Created RunnersOnBase.vue component with split layout (runners left, catcher right)
- Created RunnerCard.vue for individual runner cards with expand-in-place functionality
- Integrated component into GamePlay.vue (mobile and desktop layouts)
- Added team color computed properties for batting/fielding teams
- Component only shows when runners on base (hasRunners computed)
- Click runner card to expand in place and show full player card + catcher matchup
- Smooth CSS transitions and animations matching pitcher/batter card style
- Includes design documentation and HTML mockup for reference
