strat-gameplay-webapp/frontend-sba/components/Game/ScoreBoard.vue

<template>
  <div class="bg-gradient-to-r from-primary to-blue-600 text-white shadow-lg">
    <div class="container mx-auto px-3 py-4">
      <!-- Mobile Layout (default) -->
      <div class="lg:hidden">
        <!-- Score Display - Large and Clear -->
        <div class="flex items-center justify-between mb-3">
          <!-- Away Team -->
          <div class="flex-1 text-center">
            <div class="text-xs font-medium text-blue-100 mb-1">AWAY</div>
            <div class="text-4xl font-bold tabular-nums">{{ awayScore }}</div>
          </div>

          <!-- Inning Indicator -->
          <div class="flex-1 text-center px-2">
            <div class="bg-white/20 backdrop-blur rounded-lg px-3 py-2">
              <div class="text-xs font-medium text-blue-100">INNING</div>
              <div class="text-2xl font-bold">{{ inning }}</div>
              <div class="text-xs font-medium">
                <span
                  class="px-2 py-0.5 rounded-full text-xs font-bold"
                  :class="half === 'top' ? 'bg-blue-200 text-blue-900' : 'bg-yellow-400 text-yellow-900'"
                >
                  {{ half === 'top' ? '▲ TOP' : '▼ BOT' }}
                </span>
              </div>
            </div>
          </div>

          <!-- Home Team -->
          <div class="flex-1 text-center">
            <div class="text-xs font-medium text-blue-100 mb-1">HOME</div>
            <div class="text-4xl font-bold tabular-nums">{{ homeScore }}</div>
          </div>
        </div>

        <!-- Game Situation - Runners + Outs stacked -->
        <div class="flex items-center justify-center gap-4 text-sm">
          <!-- Runners + Outs Column -->
          <div class="flex flex-col gap-0.5 w-24">
            <!-- Runners (Mini Diamond) - Fixed positioning -->
            <div class="bg-white/10 backdrop-blur rounded-lg px-3 py-1">
              <div class="flex items-center justify-center">
                <div class="relative w-11 h-11">
                  <!-- 2nd Base (Top) -->
                  <div
                    class="absolute top-0.5 left-1/2 -translate-x-1/2 w-5 h-5 rotate-45 transition-all"
                    :class="runners.second ? 'bg-yellow-400 shadow-lg shadow-yellow-500/50' : 'bg-white/20'"
                  />

                  <!-- 1st Base (Right) -->
                  <div
                    class="absolute top-[60%] -right-1.5 -translate-y-1/2 w-5 h-5 rotate-45 transition-all"
                    :class="runners.first ? 'bg-yellow-400 shadow-lg shadow-yellow-500/50' : 'bg-white/20'"
                  />

                  <!-- 3rd Base (Left) -->
                  <div
                    class="absolute top-[60%] -left-1.5 -translate-y-1/2 w-5 h-5 rotate-45 transition-all"
                    :class="runners.third ? 'bg-yellow-400 shadow-lg shadow-yellow-500/50' : 'bg-white/20'"
                  />
                </div>
              </div>
            </div>

            <!-- Outs -->
            <div class="bg-white/10 backdrop-blur rounded-lg px-3 py-1.5">
              <div class="flex items-center justify-center gap-1.5">
                <div
                  v-for="i in 3"
                  :key="i"
                  class="w-3 h-3 rounded-full transition-all"
                  :class="i <= outs ? 'bg-red-400 shadow-lg shadow-red-500/50' : 'bg-white/30'"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Desktop Layout (lg and up) -->
      <div class="hidden lg:flex items-center justify-between">
        <!-- Left: Away Team Score -->
        <div class="flex items-center gap-4">
          <div class="text-center min-w-[100px]">
            <div class="text-sm font-medium text-blue-100">AWAY</div>
            <div class="text-5xl font-bold tabular-nums">{{ awayScore }}</div>
          </div>
        </div>

        <!-- Center: Game Situation -->
        <div class="flex items-center gap-6">
          <!-- Inning -->
          <div class="bg-white/20 backdrop-blur rounded-lg px-6 py-3 text-center min-w-[120px]">
            <div class="text-sm font-medium text-blue-100">INNING</div>
            <div class="text-3xl font-bold">{{ inning }}</div>
            <div class="mt-1">
              <span
                class="px-3 py-1 rounded-full text-sm font-bold"
                :class="half === 'top' ? 'bg-blue-200 text-blue-900' : 'bg-yellow-400 text-yellow-900'"
              >
                {{ half === 'top' ? '▲ TOP' : '▼ BOTTOM' }}
              </span>
            </div>
          </div>

          <!-- Runners + Outs Column -->
          <div class="flex flex-col gap-1 w-28">
            <!-- Runners (Mini Diamond) - Fixed positioning -->
            <div class="bg-white/10 backdrop-blur rounded-lg px-4 py-1.5">
              <div class="flex items-center justify-center">
                <div class="relative w-14 h-14">
                  <!-- 2nd Base (Top) -->
                  <div
                    class="absolute top-0.5 left-1/2 -translate-x-1/2 w-6 h-6 rotate-45 transition-all"
                    :class="runners.second ? 'bg-yellow-400 shadow-lg shadow-yellow-500/50 animate-pulse' : 'bg-white/20'"
                  />

                  <!-- 1st Base (Right) -->
                  <div
                    class="absolute top-[60%] -right-1.5 -translate-y-1/2 w-6 h-6 rotate-45 transition-all"
                    :class="runners.first ? 'bg-yellow-400 shadow-lg shadow-yellow-500/50 animate-pulse' : 'bg-white/20'"
                  />

                  <!-- 3rd Base (Left) -->
                  <div
                    class="absolute top-[60%] -left-1.5 -translate-y-1/2 w-6 h-6 rotate-45 transition-all"
                    :class="runners.third ? 'bg-yellow-400 shadow-lg shadow-yellow-500/50 animate-pulse' : 'bg-white/20'"
                  />
                </div>
              </div>
            </div>

            <!-- Outs -->
            <div class="bg-white/10 backdrop-blur rounded-lg px-4 py-2 flex items-center justify-center">
              <div class="flex gap-2">
                <div
                  v-for="i in 3"
                  :key="i"
                  class="w-4 h-4 rounded-full transition-all"
                  :class="i <= outs ? 'bg-red-400 shadow-lg shadow-red-500/50' : 'bg-white/30'"
                />
              </div>
            </div>
          </div>
        </div>

        <!-- Right: Home Team Score -->
        <div class="flex items-center gap-4">
          <div class="text-center min-w-[100px]">
            <div class="text-sm font-medium text-blue-100">HOME</div>
            <div class="text-5xl font-bold tabular-nums">{{ homeScore }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { InningHalf } from '~/types/game'

interface Props {
  homeScore?: number
  awayScore?: number
  inning?: number
  half?: InningHalf
  outs?: number
  runners?: {
    first: boolean
    second: boolean
    third: boolean
  }
}

const props = withDefaults(defineProps<Props>(), {
  homeScore: 0,
  awayScore: 0,
  inning: 1,
  half: 'top',
  outs: 0,
  runners: () => ({ first: false, second: false, third: false })
})
</script>

<style scoped>
/* Ensure tabular numbers for consistent score display */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Pulse animation for runners */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
}
</style>