cal/strat-gameplay-webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CLAUDE: Add LineupService and SBA API client for player data integration

Browse Source 
Created centralized services for SBA player data fetching at lineup creation:

Backend - New Services:
- app/services/sba_api_client.py: REST client for SBA API (api.sba.manticorum.com)
  with batch player fetching and caching support
- app/services/lineup_service.py: High-level service combining DB operations
  with API calls for complete lineup entries with player data

Backend - Refactored Components:
- app/core/game_engine.py: Replaced raw API calls with LineupService,
  reduced _prepare_next_play() from ~50 lines to ~15 lines
- app/core/substitution_manager.py: Updated pinch_hit(), defensive_replace(),
  change_pitcher() to use lineup_service.get_sba_player_data()
- app/models/game_models.py: Added player_name/player_image to LineupPlayerState
- app/services/__init__.py: Exported new LineupService components
- app/websocket/handlers.py: Enhanced lineup state handling

Frontend - SBA League:
- components/Game/CurrentSituation.vue: Restored player images with fallback
  badges (P/B letters) for both mobile and desktop layouts
- components/Game/GameBoard.vue: Enhanced game board visualization
- composables/useGameActions.ts: Updated game action handling
- composables/useWebSocket.ts: Improved WebSocket state management
- pages/games/[id].vue: Enhanced game page with better state handling
- types/game.ts: Updated type definitions
- types/websocket.ts: Added WebSocket type support

Architecture Improvement:
All SBA player data fetching now goes through LineupService:
- Lineup creation: add_sba_player_to_lineup()
- Lineup loading: load_team_lineup_with_player_data()
- Substitutions: get_sba_player_data()

All 739 unit tests pass.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Cal Corum 2025-11-19 11:55:18 -06:00
parent 4e7ea9e514
commit b15f80310b
14 changed files with 588 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
backend/app/core/game_engine.py
View File

@ -26,6 +26,7 @@ from app.models.game_models import (
GameState, DefensiveDecision, OffensiveDecision
)
from app.services.position_rating_service import position_rating_service
from app.services.lineup_service import lineup_service
from app.services import PlayStatCalculator
logger = logging.getLogger(f'{__name__}.GameEngine')
@ -806,39 +807,21 @@ class GameEngine:
# Fetch from database only if not in cache
if not batting_lineup_state:
batting_lineup = await self.db_ops.get_active_lineup(state.game_id, batting_team)
if batting_lineup:
batting_lineup_state = TeamLineupState(
team_id=batting_team,
players=[
LineupPlayerState(
lineup_id=p.id, # type: ignore[assignment]
card_id=p.card_id if p.card_id else 0, # type: ignore[assignment]
position=p.position, # type: ignore[assignment]
batting_order=p.batting_order, # type: ignore[assignment]
is_active=p.is_active # type: ignore[assignment]
)
for p in batting_lineup
]
)
batting_lineup_state = await lineup_service.load_team_lineup_with_player_data(
game_id=state.game_id,
team_id=batting_team,
league_id=state.league_id
)
if batting_lineup_state:
state_manager.set_lineup(state.game_id, batting_team, batting_lineup_state)
if not fielding_lineup_state:
fielding_lineup = await self.db_ops.get_active_lineup(state.game_id, fielding_team)
if fielding_lineup:
fielding_lineup_state = TeamLineupState(
team_id=fielding_team,
players=[
LineupPlayerState(
lineup_id=p.id, # type: ignore[assignment]
card_id=p.card_id if p.card_id else 0, # type: ignore[assignment]
position=p.position, # type: ignore[assignment]
batting_order=p.batting_order, # type: ignore[assignment]
is_active=p.is_active # type: ignore[assignment]
)
for p in fielding_lineup
]
)
fielding_lineup_state = await lineup_service.load_team_lineup_with_player_data(
game_id=state.game_id,
team_id=fielding_team,
league_id=state.league_id
)
if fielding_lineup_state:
state_manager.set_lineup(state.game_id, fielding_team, fielding_lineup_state)
# Set current player snapshot using cached lineup data

34
backend/app/core/substitution_manager.py
View File

@ -18,6 +18,7 @@ from uuid import UUID
from app.core.substitution_rules import SubstitutionRules, ValidationResult
from app.core.state_manager import state_manager
from app.models.game_models import LineupPlayerState, TeamLineupState
from app.services.lineup_service import lineup_service
if TYPE_CHECKING:
from app.database.operations import DatabaseOperations
@ -156,13 +157,22 @@ class SubstitutionManager:
# Mark old player inactive
player_out.is_active = False
# Fetch player data for SBA league
player_name = f"Player #{player_in_card_id}"
player_image = ""
if state.league_id == 'sba':
player_name, player_image = await lineup_service.get_sba_player_data(player_in_card_id)
# Create new player entry
new_player = LineupPlayerState(
lineup_id=new_lineup_id,
card_id=player_in_card_id,
position=player_out.position,
batting_order=player_out.batting_order,
is_active=True
is_active=True,
is_starter=False,
player_name=player_name,
player_image=player_image
)
# Add to roster
@ -308,13 +318,22 @@ class SubstitutionManager:
# Mark old player inactive
player_out.is_active = False
# Fetch player data for SBA league
player_name = f"Player #{player_in_card_id}"
player_image = ""
if state.league_id == 'sba':
player_name, player_image = await lineup_service.get_sba_player_data(player_in_card_id)
# Create new player entry
new_player = LineupPlayerState(
lineup_id=new_lineup_id,
card_id=player_in_card_id,
position=new_position,
batting_order=batting_order,
is_active=True
is_active=True,
is_starter=False,
player_name=player_name,
player_image=player_image
)
# Add to roster
@ -455,13 +474,22 @@ class SubstitutionManager:
# Mark old pitcher inactive
pitcher_out.is_active = False
# Fetch player data for SBA league
player_name = f"Player #{pitcher_in_card_id}"
player_image = ""
if state.league_id == 'sba':
player_name, player_image = await lineup_service.get_sba_player_data(pitcher_in_card_id)
# Create new pitcher entry
new_pitcher = LineupPlayerState(
lineup_id=new_lineup_id,
card_id=pitcher_in_card_id,
position='P',
batting_order=pitcher_out.batting_order,
is_active=True
is_active=True,
is_starter=False,
player_name=player_name,
player_image=player_image
)
# Add to roster

9
backend/app/models/game_models.py
View File

@ -32,8 +32,8 @@ class LineupPlayerState(BaseModel):
"""
Represents a player in the game lineup.
This is a lightweight reference to a player - the full player data
(ratings, attributes, etc.) will be cached separately in Week 6.
Contains both lineup-specific data (position, batting_order) and
player data (name, image) loaded at game start for efficient access.
Phase 3E-Main: Now includes position_rating for X-Check resolution.
"""
@ -42,6 +42,11 @@ class LineupPlayerState(BaseModel):
position: str
batting_order: Optional[int] = None
is_active: bool = True
is_starter: bool = True
# Player data (loaded at game start from SBA/PD API)
player_name: Optional[str] = None
player_image: Optional[str] = None
# Phase 3E-Main: Position rating (loaded at game start for PD league)
position_rating: Optional['PositionRating'] = None

7
backend/app/services/__init__.py
View File

@ -8,15 +8,19 @@ Date: 2025-11-03
"""
from app.services.pd_api_client import PdApiClient, pd_api_client
from app.services.sba_api_client import SbaApiClient, sba_api_client
from app.services.position_rating_service import PositionRatingService, position_rating_service
from app.services.redis_client import RedisClient, redis_client
from app.services.play_stat_calculator import PlayStatCalculator
from app.services.box_score_service import BoxScoreService, box_score_service
from app.services.stat_view_refresher import StatViewRefresher, stat_view_refresher
from app.services.lineup_service import LineupService, LineupEntryWithPlayer, lineup_service
__all__ = [
"PdApiClient",
"pd_api_client",
"SbaApiClient",
"sba_api_client",
"PositionRatingService",
"position_rating_service",
"RedisClient",
@ -26,4 +30,7 @@ __all__ = [
"box_score_service",
"StatViewRefresher",
"stat_view_refresher",
"LineupService",
"LineupEntryWithPlayer",
"lineup_service",
]

200
backend/app/services/lineup_service.py Normal file
View File

@ -0,0 +1,200 @@
"""
Lineup Service - High-level lineup operations with player data.
Combines database operations with API calls to provide complete
lineup entries with player data.
Author: Claude
Date: 2025-01-10
"""
import logging
from dataclasses import dataclass
from typing import Optional, List
from uuid import UUID
from app.database.operations import DatabaseOperations
from app.services.sba_api_client import sba_api_client
from app.models.game_models import TeamLineupState, LineupPlayerState
logger = logging.getLogger(f'{__name__}.LineupService')
@dataclass
class LineupEntryWithPlayer:
"""Lineup entry with associated player data."""
lineup_id: int
player_id: int
position: str
batting_order: Optional[int]
is_starter: bool
is_active: bool
# Player data from API
player_name: str
player_image: str
class LineupService:
"""
Service for lineup operations that include player data.
Combines database operations with SBA API calls to provide
complete lineup entries with player names and images.
"""
def __init__(self, db_ops: Optional[DatabaseOperations] = None):
self.db_ops = db_ops or DatabaseOperations()
async def add_sba_player_to_lineup(
self,
game_id: UUID,
team_id: int,
player_id: int,
position: str,
batting_order: Optional[int] = None,
is_starter: bool = True
) -> LineupEntryWithPlayer:
"""
Add SBA player to lineup with player data.
1. Creates lineup entry in database
2. Fetches player data from SBA API
3. Returns combined result
Args:
game_id: Game identifier
team_id: Team identifier
player_id: SBA player ID
position: Defensive position
batting_order: Batting order (1-9) if applicable
is_starter: Whether player is in starting lineup
Returns:
LineupEntryWithPlayer with lineup data + player info
Raises:
HTTPError: If SBA API call fails
SQLAlchemyError: If database operation fails
"""
# Step 1: Create lineup entry in database
lineup = await self.db_ops.add_sba_lineup_player(
game_id=game_id,
team_id=team_id,
player_id=player_id,
position=position,
batting_order=batting_order,
is_starter=is_starter
)
# Step 2: Fetch player data from SBA API
player_name = f"Player #{player_id}"
player_image = ""
try:
player = await sba_api_client.get_player(player_id)
player_name = player.name
player_image = player.get_image_url()
logger.info(f"Loaded player data for {player_id}: {player_name}")
except Exception as e:
logger.warning(f"Failed to fetch player data for {player_id}: {e}")
# Continue with defaults - lineup entry is still valid
# Step 3: Return combined result
return LineupEntryWithPlayer(
lineup_id=lineup.id, # type: ignore[arg-type]
player_id=player_id,
position=position,
batting_order=batting_order,
is_starter=is_starter,
is_active=True,
player_name=player_name,
player_image=player_image
)
async def load_team_lineup_with_player_data(
self,
game_id: UUID,
team_id: int,
league_id: str
) -> Optional[TeamLineupState]:
"""
Load existing team lineup from database with player data.
1. Fetches active lineup from database
2. Fetches player data from SBA API (for SBA league)
3. Returns TeamLineupState with player info populated
Args:
game_id: Game identifier
team_id: Team identifier
league_id: League identifier ('sba' or 'pd')
Returns:
TeamLineupState with player data, or None if no lineup found
"""
# Step 1: Get lineup from database
lineup_entries = await self.db_ops.get_active_lineup(game_id, team_id)
if not lineup_entries:
return None
# Step 2: Fetch player data for SBA league
player_data = {}
if league_id == 'sba':
player_ids = [p.player_id for p in lineup_entries if p.player_id] # type: ignore[misc]
if player_ids:
try:
player_data = await sba_api_client.get_players_batch(player_ids)
logger.info(f"Loaded {len(player_data)}/{len(player_ids)} players for team {team_id}")
except Exception as e:
logger.warning(f"Failed to fetch player data for team {team_id}: {e}")
# Step 3: Build TeamLineupState with player data
players = []
for p in lineup_entries:
player_name = None
player_image = None
if league_id == 'sba' and p.player_id and player_data.get(p.player_id): # type: ignore[arg-type]
player = player_data.get(p.player_id) # type: ignore[arg-type]
player_name = player.name
player_image = player.get_image_url()
players.append(LineupPlayerState(
lineup_id=p.id, # type: ignore[arg-type]
card_id=p.card_id if p.card_id else (p.player_id or 0), # type: ignore[arg-type]
position=p.position, # type: ignore[arg-type]
batting_order=p.batting_order, # type: ignore[arg-type]
is_active=p.is_active, # type: ignore[arg-type]
is_starter=p.is_starter, # type: ignore[arg-type]
player_name=player_name,
player_image=player_image
))
return TeamLineupState(team_id=team_id, players=players)
async def get_sba_player_data(self, player_id: int) -> tuple[str, str]:
"""
Fetch player data for a single SBA player.
Args:
player_id: SBA player ID
Returns:
Tuple of (player_name, player_image)
Returns defaults if API call fails
"""
player_name = f"Player #{player_id}"
player_image = ""
try:
player = await sba_api_client.get_player(player_id)
player_name = player.name
player_image = player.get_image_url()
logger.info(f"Loaded player data for {player_id}: {player_name}")
except Exception as e:
logger.warning(f"Failed to fetch player data for {player_id}: {e}")
return player_name, player_image
# Singleton instance
lineup_service = LineupService()

116
backend/app/services/sba_api_client.py Normal file
View File

@ -0,0 +1,116 @@
"""
SBA API client for fetching player data.
Integrates with SBA REST API to retrieve player information
for use in game lineup display.
Author: Claude
Date: 2025-01-10
"""
import logging
from typing import Dict, Any, List, Optional
import httpx
from app.models.player_models import SbaPlayer
logger = logging.getLogger(f'{__name__}.SbaApiClient')
class SbaApiClient:
"""Client for SBA API player data lookups."""
def __init__(self, base_url: str = "https://api.sba.manticorum.com"):
"""
Initialize SBA API client.
Args:
base_url: Base URL for SBA API (default: production)
"""
self.base_url = base_url
self.timeout = httpx.Timeout(10.0, connect=5.0)
async def get_player(self, player_id: int) -> SbaPlayer:
"""
Fetch player data from SBA API.
Args:
player_id: SBA player ID
Returns:
SbaPlayer instance with all player data
Raises:
httpx.HTTPError: If API request fails
Example:
player = await client.get_player(12288)
print(f"Name: {player.name}") # "Ronald Acuna Jr"
print(f"Positions: {player.get_positions()}") # ['RF']
"""
url = f"{self.base_url}/players/{player_id}"
try:
async with httpx.AsyncClient(timeout=self.timeout) as client:
response = await client.get(url)
response.raise_for_status()
data = response.json()
player = SbaPlayer.from_api_response(data)
logger.info(f"Loaded player {player_id}: {player.name}")
return player
except httpx.HTTPError as e:
logger.error(f"Failed to fetch player {player_id}: {e}")
raise
except Exception as e:
logger.error(f"Unexpected error fetching player {player_id}: {e}")
raise
async def get_players_batch(
self,
player_ids: List[int]
) -> Dict[int, SbaPlayer]:
"""
Fetch multiple players in parallel.
Args:
player_ids: List of SBA player IDs to fetch
Returns:
Dictionary mapping player_id to SbaPlayer instance
Players that fail to load will be omitted from the result
Example:
players = await client.get_players_batch([12288, 12289, 12290])
for player_id, player in players.items():
print(f"{player.name}: {player.get_positions()}")
"""
if not player_ids:
return {}
results: Dict[int, SbaPlayer] = {}
async with httpx.AsyncClient(timeout=self.timeout) as client:
for player_id in player_ids:
try:
url = f"{self.base_url}/players/{player_id}"
response = await client.get(url)
response.raise_for_status()
data = response.json()
player = SbaPlayer.from_api_response(data)
results[player_id] = player
except httpx.HTTPError as e:
logger.warning(f"Failed to fetch player {player_id}: {e}")
# Continue with other players
except Exception as e:
logger.warning(f"Unexpected error fetching player {player_id}: {e}")
# Continue with other players
logger.info(f"Loaded {len(results)}/{len(player_ids)} players")
return results
# Singleton instance
sba_api_client = SbaApiClient()

70
backend/app/websocket/handlers.py
View File

@ -14,6 +14,7 @@ from app.core.substitution_manager import SubstitutionManager
from app.core.validators import ValidationError as GameValidationError
from app.config.result_charts import PlayOutcome
from app.database.operations import DatabaseOperations
from app.services.sba_api_client import sba_api_client
logger = logging.getLogger(f'{__name__}.handlers')
@ -101,6 +102,45 @@ def register_handlers(sio: AsyncServer, manager: ConnectionManager) -> None:
"""Handle heartbeat ping"""
await sio.emit("heartbeat_ack", {}, room=sid)
@sio.event
async def request_game_state(sid, data):
"""
Client requests full game state (recovery after disconnect or initial load).
Recovers game from database if not in memory.
"""
try:
game_id_str = data.get("game_id")
if not game_id_str:
await manager.emit_to_user(sid, "error", {"message": "Missing game_id"})
return
try:
game_id = UUID(game_id_str)
except (ValueError, AttributeError):
await manager.emit_to_user(sid, "error", {"message": "Invalid game_id format"})
return
# Try to get from memory first
state = state_manager.get_state(game_id)
# If not in memory, recover from database
if not state:
logger.info(f"Game {game_id} not in memory, recovering from database")
state = await state_manager.recover_game(game_id)
if state:
# Use mode='json' to serialize UUIDs as strings
await manager.emit_to_user(sid, "game_state", state.model_dump(mode='json'))
logger.info(f"Sent game state for {game_id} to {sid}")
else:
await manager.emit_to_user(sid, "error", {"message": f"Game {game_id} not found"})
logger.warning(f"Game {game_id} not found in memory or database")
except Exception as e:
logger.error(f"Request game state error: {e}", exc_info=True)
await manager.emit_to_user(sid, "error", {"message": str(e)})
@sio.event
async def roll_dice(sid, data):
"""
@ -964,7 +1004,7 @@ def register_handlers(sio: AsyncServer, manager: ConnectionManager) -> None:
lineup = state_manager.get_lineup(game_id, team_id)
if lineup:
# Send lineup data
# Send lineup data with player info
await manager.emit_to_user(
sid,
"lineup_data",
@ -978,7 +1018,12 @@ def register_handlers(sio: AsyncServer, manager: ConnectionManager) -> None:
"position": p.position,
"batting_order": p.batting_order,
"is_active": p.is_active,
"is_starter": p.is_starter
"is_starter": p.is_starter,
"player": {
"id": p.card_id,
"name": p.player_name or f"Player #{p.card_id}",
"image": p.player_image or ""
}
}
for p in lineup.players if p.is_active
]
@ -991,6 +1036,8 @@ def register_handlers(sio: AsyncServer, manager: ConnectionManager) -> None:
lineup_entries = await db_ops.get_active_lineup(game_id, team_id)
if lineup_entries:
# Note: Player data not available when loading directly from DB
# This is a cache miss scenario - normally lineups are cached with player data
await manager.emit_to_user(
sid,
"lineup_data",
@ -999,18 +1046,23 @@ def register_handlers(sio: AsyncServer, manager: ConnectionManager) -> None:
"team_id": team_id,
"players": [
{
"lineup_id": entry.id,
"card_id": entry.card_id or entry.player_id,
"position": entry.position,
"batting_order": entry.batting_order,
"is_active": entry.is_active,
"is_starter": entry.is_starter
"lineup_id": entry.id, # type: ignore[assignment]
"card_id": entry.card_id or entry.player_id, # type: ignore[assignment]
"position": entry.position, # type: ignore[assignment]
"batting_order": entry.batting_order, # type: ignore[assignment]
"is_active": entry.is_active, # type: ignore[assignment]
"is_starter": entry.is_starter, # type: ignore[assignment]
"player": {
"id": entry.card_id or entry.player_id, # type: ignore[assignment]
"name": f"Player #{entry.card_id or entry.player_id}", # type: ignore[assignment]
"image": ""
}
}
for entry in lineup_entries
]
}
)
logger.info(f"Lineup data loaded from DB for game {game_id}, team {team_id}")
logger.info(f"Lineup data loaded from DB for game {game_id}, team {team_id} (without player details)")
else:
await manager.emit_to_user(
sid,

159
frontend-sba/components/Game/CurrentSituation.vue
View File

@ -8,9 +8,17 @@
class="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-xl p-4 border-2 border-blue-200 dark:border-blue-700 shadow-md"
>
<div class="flex items-center gap-3">
<!-- Pitcher Badge -->
<div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-lg shadow-lg flex-shrink-0">
P
<!-- Pitcher Image/Badge -->
<div class="w-12 h-12 rounded-full flex items-center justify-center shadow-lg flex-shrink-0 overflow-hidden">
<img
v-if="pitcherPlayer?.image"
:src="pitcherPlayer.image"
:alt="pitcherName"
class="w-full h-full object-cover"
/>
<div v-else class="w-full h-full bg-blue-500 flex items-center justify-center text-white font-bold text-lg">
P
</div>
</div>
<!-- Pitcher Info -->
@ -19,26 +27,12 @@
Pitching
</div>
<div class="text-base font-bold text-gray-900 dark:text-white truncate">
{{ currentPitcher.player.name }}
{{ pitcherName }}
</div>
<div class="text-xs text-gray-600 dark:text-gray-400">
{{ currentPitcher.position }}
<span v-if="currentPitcher.player.team" class="ml-1">• {{ currentPitcher.player.team }}</span>
</div>
</div>
<!-- Player Image (if available) -->
<div
v-if="currentPitcher.player.image"
class="w-14 h-14 rounded-lg overflow-hidden border-2 border-white dark:border-gray-700 shadow-md flex-shrink-0"
>
<img
:src="currentPitcher.player.image"
:alt="currentPitcher.player.name"
class="w-full h-full object-cover"
@error="handleImageError"
/>
</div>
</div>
</div>
@ -55,9 +49,17 @@
class="bg-gradient-to-br from-red-50 to-red-100 dark:from-red-900/20 dark:to-red-800/20 rounded-xl p-4 border-2 border-red-200 dark:border-red-700 shadow-md"
>
<div class="flex items-center gap-3">
<!-- Batter Badge -->
<div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center text-white font-bold text-lg shadow-lg flex-shrink-0">
B
<!-- Batter Image/Badge -->
<div class="w-12 h-12 rounded-full flex items-center justify-center shadow-lg flex-shrink-0 overflow-hidden">
<img
v-if="batterPlayer?.image"
:src="batterPlayer.image"
:alt="batterName"
class="w-full h-full object-cover"
/>
<div v-else class="w-full h-full bg-red-500 flex items-center justify-center text-white font-bold text-lg">
B
</div>
</div>
<!-- Batter Info -->
@ -66,26 +68,13 @@
At Bat
</div>
<div class="text-base font-bold text-gray-900 dark:text-white truncate">
{{ currentBatter.player.name }}
{{ batterName }}
</div>
<div class="text-xs text-gray-600 dark:text-gray-400">
{{ currentBatter.position }}
<span v-if="currentBatter.batting_order" class="ml-1">• Batting {{ currentBatter.batting_order }}</span>
</div>
</div>
<!-- Player Image (if available) -->
<div
v-if="currentBatter.player.image"
class="w-14 h-14 rounded-lg overflow-hidden border-2 border-white dark:border-gray-700 shadow-md flex-shrink-0"
>
<img
:src="currentBatter.player.image"
:alt="currentBatter.player.name"
class="w-full h-full object-cover"
@error="handleImageError"
/>
</div>
</div>
</div>
</div>
@ -98,9 +87,17 @@
class="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-xl p-6 border-2 border-blue-200 dark:border-blue-700 shadow-lg"
>
<div class="flex items-start gap-4">
<!-- Pitcher Badge -->
<div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-2xl shadow-xl flex-shrink-0">
P
<!-- Pitcher Image/Badge -->
<div class="w-16 h-16 rounded-full flex items-center justify-center shadow-xl flex-shrink-0 overflow-hidden">
<img
v-if="pitcherPlayer?.image"
:src="pitcherPlayer.image"
:alt="pitcherName"
class="w-full h-full object-cover"
/>
<div v-else class="w-full h-full bg-blue-500 flex items-center justify-center text-white font-bold text-2xl">
P
</div>
</div>
<!-- Pitcher Details -->
@ -109,28 +106,11 @@
Pitching
</div>
<div class="text-xl font-bold text-gray-900 dark:text-white mb-1 truncate">
{{ currentPitcher.player.name }}
{{ pitcherName }}
</div>
<div class="text-sm text-gray-600 dark:text-gray-400">
{{ currentPitcher.position }}
<span v-if="currentPitcher.player.team" class="ml-2">• {{ currentPitcher.player.team }}</span>
</div>
<div v-if="currentPitcher.player.manager" class="text-xs text-gray-500 dark:text-gray-500 mt-1">
Manager: {{ currentPitcher.player.manager }}
</div>
</div>
<!-- Player Image -->
<div
v-if="currentPitcher.player.image"
class="w-20 h-20 rounded-xl overflow-hidden border-2 border-white dark:border-gray-700 shadow-xl flex-shrink-0"
>
<img
:src="currentPitcher.player.image"
:alt="currentPitcher.player.name"
class="w-full h-full object-cover"
@error="handleImageError"
/>
</div>
</div>
</div>
@ -141,9 +121,17 @@
class="bg-gradient-to-br from-red-50 to-red-100 dark:from-red-900/20 dark:to-red-800/20 rounded-xl p-6 border-2 border-red-200 dark:border-red-700 shadow-lg"
>
<div class="flex items-start gap-4">
<!-- Batter Badge -->
<div class="w-16 h-16 bg-red-500 rounded-full flex items-center justify-center text-white font-bold text-2xl shadow-xl flex-shrink-0">
B
<!-- Batter Image/Badge -->
<div class="w-16 h-16 rounded-full flex items-center justify-center shadow-xl flex-shrink-0 overflow-hidden">
<img
v-if="batterPlayer?.image"
:src="batterPlayer.image"
:alt="batterName"
class="w-full h-full object-cover"
/>
<div v-else class="w-full h-full bg-red-500 flex items-center justify-center text-white font-bold text-2xl">
B
</div>
</div>
<!-- Batter Details -->
@ -152,28 +140,12 @@
At Bat
</div>
<div class="text-xl font-bold text-gray-900 dark:text-white mb-1 truncate">
{{ currentBatter.player.name }}
{{ batterName }}
</div>
<div class="text-sm text-gray-600 dark:text-gray-400">
{{ currentBatter.position }}
<span v-if="currentBatter.batting_order" class="ml-2">• Batting {{ currentBatter.batting_order }}</span>
</div>
<div v-if="currentBatter.player.manager" class="text-xs text-gray-500 dark:text-gray-500 mt-1">
Manager: {{ currentBatter.player.manager }}
</div>
</div>
<!-- Player Image -->
<div
v-if="currentBatter.player.image"
class="w-20 h-20 rounded-xl overflow-hidden border-2 border-white dark:border-gray-700 shadow-xl flex-shrink-0"
>
<img
:src="currentBatter.player.image"
:alt="currentBatter.player.name"
class="w-full h-full object-cover"
@error="handleImageError"
/>
</div>
</div>
</div>
@ -196,7 +168,9 @@
</template>
<script setup lang="ts">
import { computed } from 'vue'
import type { LineupPlayerState } from '~/types/game'
import { useGameStore } from '~/store/game'
interface Props {
currentBatter?: LineupPlayerState | null
@ -208,12 +182,33 @@ const props = withDefaults(defineProps<Props>(), {
currentPitcher: null
})
// Handle broken images
const handleImageError = (event: Event) => {
const img = event.target as HTMLImageElement
// Fallback to a default player silhouette or hide image
img.style.display = 'none'
}
const gameStore = useGameStore()
// Resolve player data from lineup using lineup_id
const batterPlayer = computed(() => {
if (!props.currentBatter) return null
const lineupEntry = gameStore.findPlayerInLineup(props.currentBatter.lineup_id)
return lineupEntry?.player ?? null
})
const pitcherPlayer = computed(() => {
if (!props.currentPitcher) return null
const lineupEntry = gameStore.findPlayerInLineup(props.currentPitcher.lineup_id)
return lineupEntry?.player ?? null
})
// Computed properties for player names with fallback
const batterName = computed(() => {
if (batterPlayer.value?.name) return batterPlayer.value.name
if (!props.currentBatter) return 'Unknown Batter'
return `Player #${props.currentBatter.card_id || props.currentBatter.lineup_id}`
})
const pitcherName = computed(() => {
if (pitcherPlayer.value?.name) return pitcherPlayer.value.name
if (!props.currentPitcher) return 'Unknown Pitcher'
return `Player #${props.currentPitcher.card_id || props.currentPitcher.lineup_id}`
})
</script>
<style scoped>

29
frontend-sba/components/Game/GameBoard.vue
View File

@ -40,7 +40,7 @@
P
</div>
<div class="mt-1 text-xs font-semibold text-white bg-black/30 backdrop-blur px-2 py-0.5 rounded-full whitespace-nowrap">
{{ currentPitcher.player.name }}
{{ getPitcherName }}
</div>
</div>
</div>
@ -61,7 +61,7 @@
B
</div>
<div class="text-xs font-semibold text-white bg-black/40 backdrop-blur px-2 py-1 rounded-lg">
{{ currentBatter.player.name }}
{{ getBatterName }}
</div>
<div class="text-[10px] text-white/80 mt-0.5">
Batting {{ currentBatter.batting_order }}
@ -155,7 +155,7 @@
</div>
<div class="text-xs font-semibold text-red-900">AT BAT</div>
</div>
<div class="text-sm font-bold text-gray-900">{{ currentBatter.player.name }}</div>
<div class="text-sm font-bold text-gray-900">{{ getBatterName }}</div>
<div class="text-xs text-gray-600">{{ currentBatter.position }} • #{{ currentBatter.batting_order }}</div>
</div>
@ -170,7 +170,7 @@
</div>
<div class="text-xs font-semibold text-blue-900">PITCHING</div>
</div>
<div class="text-sm font-bold text-gray-900">{{ currentPitcher.player.name }}</div>
<div class="text-sm font-bold text-gray-900">{{ getPitcherName }}</div>
<div class="text-xs text-gray-600">{{ currentPitcher.position }}</div>
</div>
</div>
@ -179,7 +179,9 @@
</template>
<script setup lang="ts">
import { computed } from 'vue'
import type { LineupPlayerState } from '~/types/game'
import { useGameStore } from '~/store/game'
interface Props {
runners?: {
@ -196,6 +198,25 @@ const props = withDefaults(defineProps<Props>(), {
currentBatter: null,
currentPitcher: null
})
const gameStore = useGameStore()
// Resolve player data from lineup using lineup_id
const batterPlayer = computed(() => {
if (!props.currentBatter) return null
const lineupEntry = gameStore.findPlayerInLineup(props.currentBatter.lineup_id)
return lineupEntry?.player ?? null
})
const pitcherPlayer = computed(() => {
if (!props.currentPitcher) return null
const lineupEntry = gameStore.findPlayerInLineup(props.currentPitcher.lineup_id)
return lineupEntry?.player ?? null
})
// Helper to get player name with fallback
const getBatterName = computed(() => batterPlayer.value?.name ?? `Player #${props.currentBatter?.lineup_id}`)
const getPitcherName = computed(() => pitcherPlayer.value?.name ?? `Player #${props.currentPitcher?.lineup_id}`)
</script>
<style scoped>

15
frontend-sba/composables/useGameActions.ts
View File

@ -30,17 +30,28 @@ export function useGameActions(gameId?: string) {
* Validate socket connection before emitting
*/
function validateConnection(): boolean {
console.log('[GameActions] validateConnection check:', {
isConnected: isConnected.value,
hasSocket: !!socket.value,
currentGameId: currentGameId.value,
passedGameId: gameId,
storeGameId: gameStore.gameId
})
if (!isConnected.value) {
console.error('[GameActions] Validation failed: Not connected')
uiStore.showError('Not connected to game server')
return false
}
if (!socket.value) {
console.error('[GameActions] Validation failed: No socket')
uiStore.showError('WebSocket not initialized')
return false
}
if (!currentGameId.value) {
console.error('[GameActions] Validation failed: No game ID')
uiStore.showError('No active game')
return false
}
@ -112,10 +123,8 @@ export function useGameActions(gameId?: string) {
socket.value!.emit('submit_offensive_decision', {
game_id: currentGameId.value!,
approach: decision.approach,
action: decision.action,
steal_attempts: decision.steal_attempts,
hit_and_run: decision.hit_and_run,
bunt_attempt: decision.bunt_attempt,
})
}

20
frontend-sba/composables/useWebSocket.ts
View File

@ -34,15 +34,14 @@ let socketInstance: Socket<ServerToClientEvents, ClientToServerEvents> | null =
let reconnectionAttempts = 0
let reconnectionTimeout: NodeJS.Timeout | null = null
export function useWebSocket() {
// ============================================================================
// State
// ============================================================================
// Singleton reactive state (shared across all useWebSocket calls)
const isConnected = ref(false)
const isConnecting = ref(false)
const connectionError = ref<string | null>(null)
const lastConnectionAttempt = ref<number | null>(null)
const isConnected = ref(false)
const isConnecting = ref(false)
const connectionError = ref<string | null>(null)
const lastConnectionAttempt = ref<number | null>(null)
export function useWebSocket() {
// State is now module-level singleton (above)
// ============================================================================
// Stores
@ -244,6 +243,11 @@ export function useWebSocket() {
// Game State Events
// ========================================
socketInstance.on('game_state', (state) => {
console.log('[WebSocket] Full game state received (from request_game_state)')
gameStore.setGameState(state)
})
socketInstance.on('game_state_update', (state) => {
console.log('[WebSocket] Game state update received')
gameStore.setGameState(state)

30
frontend-sba/pages/games/[id].vue
View File

@ -182,6 +182,7 @@
<script setup lang="ts">
import { useGameStore } from '~/store/game'
import { useAuthStore } from '~/store/auth'
import { useWebSocket } from '~/composables/useWebSocket'
import { useGameActions } from '~/composables/useGameActions'
import ScoreBoard from '~/components/Game/ScoreBoard.vue'
@ -193,18 +194,25 @@ import type { DefensiveDecision, OffensiveDecision } from '~/types/game'
definePageMeta({
layout: 'game',
middleware: ['auth'],
// middleware: ['auth'], // Temporarily disabled for WebSocket testing
})
const route = useRoute()
const gameStore = useGameStore()
const authStore = useAuthStore()
// Initialize auth from localStorage (for testing without OAuth)
authStore.initializeAuth()
// Get game ID from route
const gameId = computed(() => route.params.id as string)
// WebSocket connection
const { socket, isConnected, connectionError, connect } = useWebSocket()
const actions = useGameActions(gameId.value)
// Pass the raw string value from route params, not computed value
// useGameActions will create its own computed internally if needed
const actions = useGameActions(route.params.id as string)
// Game state from store
const gameState = computed(() => gameStore.gameState)
@ -221,14 +229,14 @@ const connectionStatus = ref<'connecting' | 'connected' | 'disconnected'>('conne
// Computed helpers
const runnersState = computed(() => {
if (!gameState.value?.runners) {
if (!gameState.value) {
return { first: false, second: false, third: false }
}
return {
first: gameState.value.runners.first !== null,
second: gameState.value.runners.second !== null,
third: gameState.value.runners.third !== null
first: gameState.value.on_first !== null,
second: gameState.value.on_second !== null,
third: gameState.value.on_third !== null
}
})
@ -331,6 +339,16 @@ onMounted(async () => {
}, { immediate: true })
})
// Watch for game state to load lineups
watch(gameState, (state) => {
if (state && state.home_team_id && state.away_team_id) {
// Request lineup data for both teams to populate player names
console.log('[Game Page] Game state received - requesting lineups for teams:', state.home_team_id, state.away_team_id)
actions.getLineup(state.home_team_id)
actions.getLineup(state.away_team_id)
}
}, { immediate: true })
onUnmounted(() => {
console.log('[Game Page] Unmounted - Leaving game')

4
frontend-sba/types/game.ts
View File

@ -122,8 +122,8 @@ export interface GameState {
* Backend: DefensiveDecision
*/
export interface DefensiveDecision {
infield_depth: 'in' | 'normal' | 'back' | 'double_play' | 'corners_in'
outfield_depth: 'in' | 'normal' | 'back'
infield_depth: 'infield_in' | 'normal' | 'corners_in'
outfield_depth: 'normal' | 'shallow'
hold_runners: number[] // Bases to hold (e.g., [1, 3])
}

1
frontend-sba/types/websocket.ts
View File

@ -76,6 +76,7 @@ export interface ServerToClientEvents {
decision_required: (data: DecisionPrompt) => void
// Game state events
game_state: (data: GameState) => void
game_state_update: (data: GameState) => void
game_state_sync: (data: GameStateSyncEvent) => void
play_completed: (data: PlayResult) => void