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
- When catcher pill is clicked, display lead runner (3B > 2B > 1B priority) + catcher side-by-side
- Maintains consistent layout whether runner or catcher is selected
- Add leadRunnerBase computed to find highest priority runner
- Add displayedRunnerBase computed to show selected OR lead runner
- Update template to use displayedRunnerPlayer for consistent rendering
All 15 RunnersOnBase tests passing
- Swap base order to 3B, 2B, 1B (left to right, closer to baseball diamond)
- Auto-select lead runner on mount (priority: 3B > 2B > 1B)
- Make catcher pill clickable to show catcher card only
- Add 'catcher' as a selection option alongside runner bases
- Update expanded view to handle catcher-only display (centered, single card)
- Add toggleCatcher() function
- Update tests for new base order and auto-selection behavior
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
Backend changes:
- Add PendingXCheck model for interactive x-check state
- Extend decision_phase/pending_decision validators with 4 new phases
- Add initiate_x_check() to roll dice and present chart to player
- Add submit_x_check_result() to process player selection
- Add resolve_x_check_from_selection() to resolve from player input
- Add WebSocket handlers for x-check workflow
- Modify resolve_manual_play() to route X_CHECK to interactive flow
- All 986 unit tests passing
Frontend changes:
- Extend DecisionPhase type with x-check/DECIDE phases
- Add XCheckData, DecideAdvanceData, DecideThrowData, DecideSpeedCheckData interfaces
- Add PendingXCheck to GameState
- Add 4 new client→server WebSocket events
Next: Implement XCheckWizard component and GameplayPanel integration
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Test empty/occupied/expanded states
- Test player name handling and initials
- Test runner selection and catcher card expansion
- Test team color integration
- All 40 tests passing
- Removed GameBoard component from both mobile and desktop layouts
- Removed unused GameBoard import
- RunnersOnBase component now handles runner display
- Cleaner UI focused on pitcher/batter matchup and expandable runner cards
- 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
Backend:
- Add home_team_dice_color and away_team_dice_color to GameState model
- Extract dice_color from game metadata in StateManager (default: cc0000)
- Add runners_on_base param to roll_ab for chaos check skipping
Frontend - Dice Display:
- Create DiceShapes.vue with SVG d6 (square) and d20 (hexagon) shapes
- Apply home team's dice_color to d6 dice, white for resolution d20
- Show chaos d20 in amber only when WP/PB check triggered
- Add automatic text contrast based on color luminance
- Reduce blank space and remove info bubble from dice results
Frontend - Player Cards:
- Consolidate pitcher/batter cards to single location below diamond
- Add active card highlighting based on dice roll (d6_one: 1-3=batter, 4-6=pitcher)
- New card header format: [Team] Position [Name] with full card image
- Remove redundant card displays from GameBoard and GameplayPanel
- Enlarge PlayerCardModal on desktop (max-w-3xl at 1024px+)
Tests:
- Add DiceShapes.spec.ts with 34 tests for color calculations and rendering
- Update DiceRoller.spec.ts for new DiceShapes integration
- Fix test_roll_dice_success for new runners_on_base parameter
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
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>
- Add vuedraggable for mobile-friendly lineup building
- Add touch delay and threshold settings for better mobile UX
- Add drag ghost/chosen/dragging visual states
- Add replacement mode visual feedback when dragging over occupied slots
- Add getBench action to useGameActions for substitution panel
- Add BN (bench) to valid positions in LineupPlayerState
- Update lineup service to load full lineup (active + bench)
- Add touch-manipulation CSS to UI components (ActionButton, ButtonGroup, ToggleSwitch)
- Add select-none to prevent text selection during touch interactions
- Add mobile touch patterns documentation
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add player_positions JSONB column to roster_links (migration 006)
- Add player_data JSONB column to cache name/image/headshot (migration 007)
- Add is_pitcher/is_batter computed properties for two-way player support
- Update lineup submission to populate RosterLink with all players + positions
- Update get_bench handler to use cached data (no runtime API calls)
- Add BenchPlayer type to frontend with proper filtering
- Add new Lineup components: InlineSubstitutionPanel, LineupSlotRow,
PositionSelector, UnifiedLineupTab
- Add integration tests for get_bench_players
Bench players now load instantly without API dependency, and properly
filter batters vs pitchers (including CP closer position).
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Backend:
- Add game_metadata to load_game_state() return dict in DatabaseOperations
- Populate team display fields (name, color, thumbnail) in _rebuild_state_from_data()
so recovered games show team colors/names
Frontend:
- Add text-outline CSS for score visibility on any background (light logos, gradients)
- Handle thumbnail 404 with @error event, show enhanced shadow when no thumbnail
- Apply consistent outline across mobile and desktop layouts
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Backend:
- Add game_metadata to create_game() and quick_create_game() endpoints
- Fetch team display info (lname, sname, abbrev, color, thumbnail) from
SBA API at game creation time and store in DB
- Populate GameState with team display fields from game_metadata
- Fix submit_team_lineup to cache lineup in state_manager after DB write
so auto-start correctly detects both teams ready
Frontend:
- Read team colors/names/thumbnails from gameState instead of useState
- Remove useState approach that failed across SSR navigation
- Fix create.vue redirect from legacy /games/lineup/[id] to /games/[id]
- Update game.vue header to show team names from gameState
Docs:
- Update CLAUDE.md to note dev mode has broken auth, always use prod
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- ScoreBoard: Dynamic gradient using team colors (away left, home right)
with dark center blend and 20% overlay for text readability
- Fetch team colors from API using cached season from schedule state
- Fix sticky tabs by removing overflow-auto from game layout main
- Move play-by-play below gameplay panel on mobile layout
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Use useWebSocket composable directly as source of truth for connection
status instead of gameStore.isConnected which could get out of sync.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Refactor game page into tab container with Game, Lineups, Stats tabs
- Extract GamePlay, LineupBuilder, GameStats components from page
- Add manager-aware default tab logic (pending + manager → Lineups tab)
- Implement per-team lineup submission (each team submits independently)
- Add lineup-status endpoint with actual lineup data for recovery
- Fix lineup persistence across tab switches and page refreshes
- Query database directly for pending games (avoids GameState validation)
- Add userTeamIds to auth store for manager detection
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Lineup builder: Use layout: false to remove white border/padding
- Create game: Swap team order so Away Team appears above Home Team
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Bug fixes:
- Fix pitcher filter to recognize SP, RP, CP positions (not just P)
- Fix validation to allow 9 players when pitcher bats (no DH games)
- Simplify position filters to All/Batters/Pitchers
Image display improvements:
- Use headshot > vanity_card priority (avoid card images in circles)
- Show player initials as fallback (e.g., "AV" for Alex Verdugo)
- Handle name suffixes (Jr, Sr, II, III, IV) correctly
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Features:
- Player search box with filter by name
- Position filter tabs (All, Catchers, Infielders, Outfielders, Pitchers)
- Player preview modal on click (shows positions, wara rating)
- Clear lineup button with confirmation styling
- Progress bar showing lineup completion
- Player headshots in both roster list and lineup slots
- Skeleton loading state during data fetch
- Sticky navigation header with back button
- Improved visual styling throughout (pills, cards, badges)
TypeScript fixes:
- Added pitcherPlayer computed property for proper type narrowing
- Removed non-existent SbaPlayer stats (batting_average, home_runs, rbi)
- Fixed unused variable warnings
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Enables precise tracking of which webapp games correspond to specific
scheduled matchups from SBA/PD league systems.
Backend:
- Add schedule_game_id column to games table with index
- Create Alembic migration for the new column
- Update QuickCreateRequest to accept schedule_game_id
- Update GameListItem response to include schedule_game_id
- Update DatabaseOperations.create_game() to store the link
Frontend:
- Pass schedule_game_id when creating game from "Play" button
- Add activeScheduleGameMap to track webapp games by schedule ID
- Show "In Progress" (green) link for active games
- Show "Resume" (green) link for pending games
- Show "Play" (blue) button for unstarted games
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Implements schedule viewing from SBA production API with week navigation
and game creation from scheduled matchups. Groups games by team matchup
horizontally with games stacked vertically for space efficiency.
Backend:
- Add schedule routes (/api/schedule/current, /api/schedule/games)
- Add SBA API client methods for schedule data
- Fix multi-worker state isolation (single worker for in-memory state)
- Add Redis migration TODO for future scalability
- Support custom team IDs in quick-create endpoint
Frontend:
- Add Schedule tab as default on home page
- Week navigation with prev/next and "Current Week" jump
- Horizontal group layout (2-6 columns responsive)
- Completed games show score + "Final" badge (no Play button)
- Incomplete games show "Play" button to create webapp game
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Added HIGH-003 task documenting the isMyTurn resolution phase bug
that was discovered and fixed during integration testing. All 6
production blockers now complete.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Bug fix: During resolution phase (dice rolling), isMyTurn was false
for both players, preventing anyone from seeing the dice roller.
Now the batting team has control during resolution since they read
their card.
Demo mode: myTeamId now returns whichever team needs to act,
allowing single-player testing of both sides.
Changes:
- Add creator_discord_id to GameState (backend + frontend types)
- Add get_current_user_optional dependency for optional auth
- Update quick-create to capture creator's discord_id
- Fix isMyTurn to give batting team control during resolution
- Demo mode: myTeamId returns active team based on phase
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
SBA users are already league members - they don't need a marketing page.
Moving the games list to "/" reduces friction by eliminating a redirect.
Changes:
- pages/index.vue: Now shows games list (was marketing/dashboard)
- pages/games/index.vue: Redirects to / for backwards compatibility
- Updated all internal links from /games to /
- Auth callback redirects to / after login
User flow is now:
- Not logged in: / → auth middleware → Discord OAuth → /
- Logged in: / shows games list directly
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
When WebSocket connection fails after max attempts (permanentlyFailed state):
- Show red error banner with "Connection Failed" message and "Try Again" button
- Loading modal distinguishes between connecting/reconnecting/failed states
- "Try Again" button uses manualRetry() to reset state and attempt fresh connection
- Yellow reconnecting banner only shows during active reconnection attempts
Uses permanentlyFailed state and manualRetry() from HIGH-002.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
After max reconnection attempts (10), the stuck state detector was
continuing to retry forever. Now:
- Add permanentlyFailed state flag to track when we've given up
- Set flag and stop stuck state detector when max attempts reached
- Add manualRetry() method for UI to reset state and try again
- Expose permanentlyFailed in public API for error boundary (HIGH-001)
Also marks CRIT-002 and CRIT-002-BACKEND as completed in project plan.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add explicit Pinia store imports to layouts/game.vue. Nuxt 4 requires
explicit imports for stores - auto-imports no longer work.
This fixes: ReferenceError: useAuthStore is not defined
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Backend:
- Add get_teams_by_owner() to SBA API client
- Update /api/auth/me to return user's teams from SBA API
- Add sba_current_season config setting (default: 13)
Frontend:
- Replace hardcoded myTeamId with computed from auth store teams
- Fix isMyTurn logic to check actual team ownership
- Update REFACTORING_PLAN.json
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add submitSubstitution() method that routes to appropriate internal method
- Remove individual substitution methods from exports (now internal only)
- Add validation for defensive_replacement requiring position parameter
- Update tests to use unified wrapper, add test for validation error
Fixes CRIT-001: Game page called non-existent submitSubstitution method
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Frontend UX improvements:
- Single-click Discord OAuth from home page (no intermediate /auth page)
- Auto-redirect authenticated users from home to /games
- Fixed Nuxt layout system - app.vue now wraps NuxtPage with NuxtLayout
- Games page now has proper card container with shadow/border styling
- Layout header includes working logout with API cookie clearing
Games list enhancements:
- Display team names (lname) instead of just team IDs
- Show current score for each team
- Show inning indicator (Top/Bot X) for active games
- Responsive header with wrapped buttons on mobile
Backend improvements:
- Added team caching to SbaApiClient (1-hour TTL)
- Enhanced GameListItem with team names, scores, inning data
- Games endpoint now enriches response with SBA API team data
Docker optimizations:
- Optimized Dockerfile using --chown flag on COPY (faster than chown -R)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Create frontend-sba/.env.example and frontend-pd/.env.example templates
- Fix hardcoded allowedHosts in nuxt.config.ts (now reads NUXT_ALLOWED_HOSTS)
- Add NUXT_ALLOWED_HOSTS support to frontend-pd/nuxt.config.ts
- Update docker-compose.yml with missing env vars:
- FRONTEND_URL, DISCORD_SERVER_REDIRECT_URI
- ALLOWED_DISCORD_IDS, WS_HEARTBEAT_INTERVAL, WS_CONNECTION_TIMEOUT
- NUXT_ALLOWED_HOSTS for both frontends
- Create docker-compose.prod.yml for production overrides
- Update root .env.example with new variables
- Add "Multi-Domain Deployment" section to README.md with checklist
- Update all CLAUDE.md files with environment configuration docs
- Remove obsolete 'version' attribute from docker-compose files
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Refactored useWebSocket.ts to prevent SSR-related connection issues:
- Created ClientState interface to encapsulate all client-only state
- Added getClientState() function with lazy initialization on client only
- Added SSR guards (import.meta.client) to all connection functions
- Reset reactive state on client hydration to ensure clean slate
- Moved heartbeatInterval and stuckStateCheckInterval into ClientState
- Changed NodeJS.Timeout to ReturnType<typeof setTimeout/setInterval>
- Wrapped auth watcher in import.meta.client guard
Root cause: Module-level singleton state was being initialized during
SSR, then persisting in a potentially corrupted state during hydration.
This caused intermittent "Socket exists: no" issues where the browser
wouldn't even attempt WebSocket connections.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Service Scripts:
- start-services.sh: Add pre-flight checks, health monitoring, --dev/--prod modes,
port options, dependency checks, and version logging
- stop-services.sh: Add port 3000 cleanup, verification, --quiet/--force flags
- status-services.sh: New script for monitoring service status with --watch mode
WebSocket:
- Remove conflicting socket.client.ts plugin that was interfering with
useWebSocket.ts composable (used JWT auth vs cookie auth)
- Add debugging logs to useWebSocket.ts to diagnose intermittent connection issues
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Root cause: Auth middleware was commented out on game detail page
([id].vue), causing SSR to render without checking authentication.
Safari's client-side auth check wasn't reaching the backend due to
caching behavior, resulting in "Auth: Failed" display.
Changes:
- Re-enabled middleware: ['auth'] in pages/games/[id].vue
- Added /api/auth/ws-token endpoint for Safari WebSocket fallback
- Added expires_minutes param to create_token() for short-lived tokens
- Added token query param support to WebSocket handlers
- Updated SAFARI_WEBSOCKET_ISSUE.md documentation
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Replaced O(n²) deduplication check per play with O(1) array replacement:
- Added setPlayHistory() for game_state_sync (replaces entire array)
- Simplified addPlayToHistory() for live play_resolved events (just push)
This separates sync operations (replace) from live events (append),
eliminating the need for deduplication checks during gameplay.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Backend changes:
- Modified request_game_state handler to fetch plays from database
- Convert Play DB models to frontend-compatible PlayResult dicts
- Emit game_state_sync event with state + recent_plays array
Frontend changes:
- Added deduplication by play_number in addPlayToHistory()
- Prevents duplicate plays when game_state_sync is received
Field mapping from Play model:
- hit_type -> outcome
- result_description -> description
- batter_id -> batter_lineup_id
- batter_final -> batter_result
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Enhanced PlayByPlay with a tabbed interface:
- "Recent" tab shows plays from current half inning only
- "Scoring" tab shows all plays where runs were scored
- Badge counts on each tab show number of matching plays
- Tab-aware empty states with contextual messaging
- Footer shows total game plays count
Removed unused showFilters prop and showAllPlays toggle.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
