strat-gameplay-webapp/frontend-sba/components/Game/GameBoard.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>
        </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>
        </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">
              {{ currentPitcher.player.name }}
            </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"></div>

            <!-- 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">
                  {{ currentBatter.player.name }}
                </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>
    </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">{{ currentBatter.player.name }}</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">{{ currentPitcher.player.name }}</div>
          <div class="text-xs text-gray-600">{{ currentPitcher.position }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { LineupPlayerState } from '~/types/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
})
</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>