239 lines
9.4 KiB
Vue
239 lines
9.4 KiB
Vue
<template>
|
|
<div class="game-board-container">
|
|
<!-- Baseball Diamond Visualization -->
|
|
<div class="relative w-full max-w-md mx-auto aspect-square">
|
|
<!-- Field Background (Green) -->
|
|
<div class="absolute inset-0 bg-gradient-to-br from-green-600 to-green-700 rounded-lg overflow-hidden">
|
|
<!-- Infield Dirt (Diamond Shape) -->
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<div class="relative w-3/4 h-3/4">
|
|
<div class="absolute inset-0 rotate-45 bg-gradient-to-br from-amber-700 to-amber-800 rounded-lg opacity-80"/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Base Paths (White Lines) -->
|
|
<svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100">
|
|
<!-- 1st to 2nd base line -->
|
|
<line x1="72" y1="50" x2="50" y2="28" stroke="white" stroke-width="0.3" opacity="0.6" />
|
|
<!-- 2nd to 3rd base line -->
|
|
<line x1="50" y1="28" x2="28" y2="50" stroke="white" stroke-width="0.3" opacity="0.6" />
|
|
<!-- 3rd to home line -->
|
|
<line x1="28" y1="50" x2="50" y2="72" stroke="white" stroke-width="0.3" opacity="0.6" />
|
|
<!-- Home to 1st line -->
|
|
<line x1="50" y1="72" x2="72" y2="50" stroke="white" stroke-width="0.3" opacity="0.6" />
|
|
</svg>
|
|
|
|
<!-- Pitcher's Mound -->
|
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
|
|
<div class="w-10 h-10 bg-amber-700 rounded-full border-2 border-amber-600 shadow-lg flex items-center justify-center">
|
|
<div class="w-6 h-6 bg-white/20 rounded-full"/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Current Pitcher (on mound) -->
|
|
<div
|
|
v-if="currentPitcher"
|
|
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 mt-12"
|
|
>
|
|
<div class="text-center">
|
|
<div class="w-8 h-8 mx-auto bg-blue-500 rounded-full border-2 border-white shadow-lg flex items-center justify-center text-white text-xs font-bold">
|
|
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">
|
|
{{ getPitcherName }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Home Plate -->
|
|
<div class="absolute bottom-[14%] left-1/2 -translate-x-1/2">
|
|
<div class="relative">
|
|
<!-- Home Plate (Pentagon Shape) -->
|
|
<div class="w-8 h-8 bg-white rotate-45 shadow-xl border-2 border-gray-200"/>
|
|
|
|
<!-- Current Batter -->
|
|
<div
|
|
v-if="currentBatter"
|
|
class="absolute -bottom-14 left-1/2 -translate-x-1/2 w-32"
|
|
>
|
|
<div class="text-center">
|
|
<div class="w-8 h-8 mx-auto bg-red-500 rounded-full border-2 border-white shadow-lg flex items-center justify-center text-white text-xs font-bold mb-1">
|
|
B
|
|
</div>
|
|
<div class="text-xs font-semibold text-white bg-black/40 backdrop-blur px-2 py-1 rounded-lg">
|
|
{{ getBatterName }}
|
|
</div>
|
|
<div class="text-[10px] text-white/80 mt-0.5">
|
|
Batting {{ currentBatter.batting_order }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 1st Base -->
|
|
<div class="absolute top-1/2 right-[14%] -translate-y-1/2">
|
|
<div
|
|
class="w-10 h-10 rotate-45 shadow-xl transition-all duration-300"
|
|
:class="runners.first ? 'bg-yellow-400 border-2 border-yellow-300 animate-pulse-subtle' : 'bg-white/90 border-2 border-gray-200'"
|
|
>
|
|
<!-- Runner on 1st -->
|
|
<div
|
|
v-if="runners.first"
|
|
class="absolute -top-8 left-1/2 -translate-x-1/2 -rotate-45"
|
|
>
|
|
<div class="w-6 h-6 bg-yellow-500 rounded-full border-2 border-white shadow-lg flex items-center justify-center">
|
|
<span class="text-white text-[10px] font-bold">1</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] font-bold text-white/60 whitespace-nowrap">
|
|
1ST
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2nd Base -->
|
|
<div class="absolute top-[14%] left-1/2 -translate-x-1/2">
|
|
<div
|
|
class="w-10 h-10 rotate-45 shadow-xl transition-all duration-300"
|
|
:class="runners.second ? 'bg-yellow-400 border-2 border-yellow-300 animate-pulse-subtle' : 'bg-white/90 border-2 border-gray-200'"
|
|
>
|
|
<!-- Runner on 2nd -->
|
|
<div
|
|
v-if="runners.second"
|
|
class="absolute -top-8 left-1/2 -translate-x-1/2 -rotate-45"
|
|
>
|
|
<div class="w-6 h-6 bg-yellow-500 rounded-full border-2 border-white shadow-lg flex items-center justify-center">
|
|
<span class="text-white text-[10px] font-bold">2</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="absolute -top-6 left-1/2 -translate-x-1/2 text-[10px] font-bold text-white/60 whitespace-nowrap">
|
|
2ND
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3rd Base -->
|
|
<div class="absolute top-1/2 left-[14%] -translate-y-1/2">
|
|
<div
|
|
class="w-10 h-10 rotate-45 shadow-xl transition-all duration-300"
|
|
:class="runners.third ? 'bg-yellow-400 border-2 border-yellow-300 animate-pulse-subtle' : 'bg-white/90 border-2 border-gray-200'"
|
|
>
|
|
<!-- Runner on 3rd -->
|
|
<div
|
|
v-if="runners.third"
|
|
class="absolute -top-8 left-1/2 -translate-x-1/2 -rotate-45"
|
|
>
|
|
<div class="w-6 h-6 bg-yellow-500 rounded-full border-2 border-white shadow-lg flex items-center justify-center">
|
|
<span class="text-white text-[10px] font-bold">3</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] font-bold text-white/60 whitespace-nowrap">
|
|
3RD
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Outfield Grass Pattern (Subtle) -->
|
|
<div class="absolute inset-0 opacity-10 pointer-events-none">
|
|
<div class="absolute inset-0" style="background: repeating-linear-gradient(90deg, transparent 0px, transparent 20px, rgba(0,0,0,0.05) 20px, rgba(0,0,0,0.05) 40px)"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile-Friendly Info Panel Below Diamond -->
|
|
<div class="mt-4 lg:hidden">
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<!-- Current Batter Card -->
|
|
<div
|
|
v-if="currentBatter"
|
|
class="bg-red-50 border-2 border-red-200 rounded-lg p-3"
|
|
>
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<div class="w-6 h-6 bg-red-500 rounded-full flex items-center justify-center text-white text-xs font-bold">
|
|
B
|
|
</div>
|
|
<div class="text-xs font-semibold text-red-900">AT BAT</div>
|
|
</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>
|
|
|
|
<!-- Current Pitcher Card -->
|
|
<div
|
|
v-if="currentPitcher"
|
|
class="bg-blue-50 border-2 border-blue-200 rounded-lg p-3"
|
|
>
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<div class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center text-white text-xs font-bold">
|
|
P
|
|
</div>
|
|
<div class="text-xs font-semibold text-blue-900">PITCHING</div>
|
|
</div>
|
|
<div class="text-sm font-bold text-gray-900">{{ getPitcherName }}</div>
|
|
<div class="text-xs text-gray-600">{{ currentPitcher.position }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import type { LineupPlayerState } from '~/types/game'
|
|
import { useGameStore } from '~/store/game'
|
|
|
|
interface Props {
|
|
runners?: {
|
|
first: boolean
|
|
second: boolean
|
|
third: boolean
|
|
}
|
|
currentBatter?: LineupPlayerState | null
|
|
currentPitcher?: LineupPlayerState | null
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
runners: () => ({ first: false, second: false, third: false }),
|
|
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>
|
|
/* Subtle pulse for runners on base */
|
|
@keyframes pulse-subtle {
|
|
0%, 100% {
|
|
transform: scale(1) rotate(45deg);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: scale(1.05) rotate(45deg);
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
.animate-pulse-subtle {
|
|
animation: pulse-subtle 2s ease-in-out infinite;
|
|
}
|
|
</style>
|