d60b7a2d60
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>
266 lines
11 KiB
Vue
266 lines
11 KiB
Vue
<template>
|
|
<div class="current-situation">
|
|
<!-- Mobile Layout (Stacked) -->
|
|
<div class="lg:hidden space-y-3">
|
|
<!-- Current Pitcher Card -->
|
|
<div
|
|
v-if="currentPitcher"
|
|
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 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="getPlayerPreviewImage(pitcherPlayer)"
|
|
:src="getPlayerPreviewImage(pitcherPlayer)!"
|
|
:alt="pitcherName"
|
|
class="w-full h-full object-cover"
|
|
@error="(e) => (e.target as HTMLImageElement).style.display = 'none'"
|
|
>
|
|
<div v-else class="w-full h-full bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white font-bold text-lg">
|
|
{{ getPlayerFallbackInitial(pitcherPlayer) }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pitcher Info -->
|
|
<div class="flex-1 min-w-0">
|
|
<div class="text-xs font-semibold text-blue-600 dark:text-blue-400 uppercase tracking-wide mb-0.5">
|
|
Pitching
|
|
</div>
|
|
<div class="text-base font-bold text-gray-900 dark:text-white truncate">
|
|
{{ pitcherName }}
|
|
</div>
|
|
<div class="text-xs text-gray-600 dark:text-gray-400">
|
|
{{ currentPitcher.position }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- VS Indicator -->
|
|
<div class="flex items-center justify-center">
|
|
<div class="px-4 py-1 bg-gray-800 dark:bg-gray-700 text-white rounded-full text-xs font-bold shadow-lg">
|
|
VS
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Current Batter Card -->
|
|
<div
|
|
v-if="currentBatter"
|
|
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 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="getPlayerPreviewImage(batterPlayer)"
|
|
:src="getPlayerPreviewImage(batterPlayer)!"
|
|
:alt="batterName"
|
|
class="w-full h-full object-cover"
|
|
@error="(e) => (e.target as HTMLImageElement).style.display = 'none'"
|
|
>
|
|
<div v-else class="w-full h-full bg-gradient-to-br from-red-500 to-red-600 flex items-center justify-center text-white font-bold text-lg">
|
|
{{ getPlayerFallbackInitial(batterPlayer) }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Batter Info -->
|
|
<div class="flex-1 min-w-0">
|
|
<div class="text-xs font-semibold text-red-600 dark:text-red-400 uppercase tracking-wide mb-0.5">
|
|
At Bat
|
|
</div>
|
|
<div class="text-base font-bold text-gray-900 dark:text-white truncate">
|
|
{{ 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Desktop Layout (Side-by-Side) -->
|
|
<div class="hidden lg:grid lg:grid-cols-2 gap-6">
|
|
<!-- Current Pitcher Card -->
|
|
<div
|
|
v-if="currentPitcher"
|
|
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 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="getPlayerPreviewImage(pitcherPlayer)"
|
|
:src="getPlayerPreviewImage(pitcherPlayer)!"
|
|
:alt="pitcherName"
|
|
class="w-full h-full object-cover"
|
|
@error="(e) => (e.target as HTMLImageElement).style.display = 'none'"
|
|
>
|
|
<div v-else class="w-full h-full bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white font-bold text-2xl">
|
|
{{ getPlayerFallbackInitial(pitcherPlayer) }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pitcher Details -->
|
|
<div class="flex-1 min-w-0">
|
|
<div class="text-sm font-semibold text-blue-600 dark:text-blue-400 uppercase tracking-wide mb-1">
|
|
Pitching
|
|
</div>
|
|
<div class="text-xl font-bold text-gray-900 dark:text-white mb-1 truncate">
|
|
{{ pitcherName }}
|
|
</div>
|
|
<div class="text-sm text-gray-600 dark:text-gray-400">
|
|
{{ currentPitcher.position }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Current Batter Card -->
|
|
<div
|
|
v-if="currentBatter"
|
|
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 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="getPlayerPreviewImage(batterPlayer)"
|
|
:src="getPlayerPreviewImage(batterPlayer)!"
|
|
:alt="batterName"
|
|
class="w-full h-full object-cover"
|
|
@error="(e) => (e.target as HTMLImageElement).style.display = 'none'"
|
|
>
|
|
<div v-else class="w-full h-full bg-gradient-to-br from-red-500 to-red-600 flex items-center justify-center text-white font-bold text-2xl">
|
|
{{ getPlayerFallbackInitial(batterPlayer) }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Batter Details -->
|
|
<div class="flex-1 min-w-0">
|
|
<div class="text-sm font-semibold text-red-600 dark:text-red-400 uppercase tracking-wide mb-1">
|
|
At Bat
|
|
</div>
|
|
<div class="text-xl font-bold text-gray-900 dark:text-white mb-1 truncate">
|
|
{{ 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div
|
|
v-if="!currentBatter && !currentPitcher"
|
|
class="text-center py-12 px-4 bg-gray-50 dark:bg-gray-800 rounded-xl border-2 border-dashed border-gray-300 dark:border-gray-700"
|
|
>
|
|
<div class="w-16 h-16 mx-auto mb-4 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<p class="text-gray-500 dark:text-gray-400 font-medium">Waiting for game to start...</p>
|
|
<p class="text-sm text-gray-400 dark:text-gray-500 mt-1">Players will appear here once the game begins.</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, watch, toRefs } from 'vue'
|
|
import type { LineupPlayerState } from '~/types/game'
|
|
import { useGameStore } from '~/store/game'
|
|
|
|
interface Props {
|
|
currentBatter?: LineupPlayerState | null
|
|
currentPitcher?: LineupPlayerState | null
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
currentBatter: null,
|
|
currentPitcher: null
|
|
})
|
|
|
|
// Debug: Watch for prop changes
|
|
const { currentBatter } = toRefs(props)
|
|
watch(currentBatter, (newBatter, oldBatter) => {
|
|
const oldInfo = oldBatter
|
|
? `lineup_id=${oldBatter.lineup_id}, batting_order=${oldBatter.batting_order}`
|
|
: 'None'
|
|
const newInfo = newBatter
|
|
? `lineup_id=${newBatter.lineup_id}, batting_order=${newBatter.batting_order}`
|
|
: 'None'
|
|
console.log('[CurrentSituation] currentBatter prop changed:', oldInfo, '->', newInfo)
|
|
}, { immediate: true })
|
|
|
|
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}`
|
|
})
|
|
|
|
// Get player preview image with fallback priority: headshot > vanity_card > null
|
|
function getPlayerPreviewImage(player: { headshot?: string | null; vanity_card?: string | null } | null): string | null {
|
|
if (!player) return null
|
|
return player.headshot || player.vanity_card || null
|
|
}
|
|
|
|
// Get player avatar fallback - use first + last initials (e.g., "Alex Verdugo" -> "AV")
|
|
// Ignores common suffixes like Jr, Sr, II, III, IV
|
|
function getPlayerFallbackInitial(player: { name: string } | null): string {
|
|
if (!player) return '?'
|
|
const suffixes = ['jr', 'jr.', 'sr', 'sr.', 'ii', 'iii', 'iv', 'v']
|
|
const parts = player.name.trim().split(/\s+/).filter(
|
|
part => !suffixes.includes(part.toLowerCase())
|
|
)
|
|
if (parts.length === 0) return '?'
|
|
if (parts.length === 1) return parts[0].charAt(0).toUpperCase()
|
|
return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase()
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Optional: Add subtle animations */
|
|
.current-situation > div {
|
|
animation: fadeIn 0.3s ease-in;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|