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

<template>
  <div class="play-by-play-container">
    <!-- Header -->
    <div class="flex items-center justify-between mb-4">
      <h2 class="text-lg font-bold text-gray-900 dark:text-white flex items-center gap-2">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
        </svg>
        Play-by-Play
      </h2>

      <!-- Filter Toggle (Mobile) -->
      <button
        v-if="showFilters"
        @click="showAllPlays = !showAllPlays"
        class="lg:hidden text-xs px-3 py-1 rounded-full transition-colors"
        :class="showAllPlays ? 'bg-gray-200 text-gray-700' : 'bg-primary/10 text-primary font-medium'"
      >
        {{ showAllPlays ? 'Show Recent' : 'Show All' }}
      </button>
    </div>

    <!-- Plays Feed -->
    <div
      class="space-y-2 overflow-y-auto"
      :class="scrollable ? 'max-h-96' : ''"
      :style="maxHeight ? `max-height: ${maxHeight}px` : ''"
    >
      <!-- Empty State -->
      <div
        v-if="!plays || plays.length === 0"
        class="text-center py-12 px-4"
      >
        <div class="w-16 h-16 mx-auto mb-4 bg-gray-100 dark:bg-gray-800 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="M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <p class="text-gray-500 dark:text-gray-400 font-medium">No plays yet</p>
        <p class="text-sm text-gray-400 dark:text-gray-500 mt-1">The game will start soon...</p>
      </div>

      <!-- Play Items -->
      <TransitionGroup name="play-slide">
        <div
          v-for="play in displayedPlays"
          :key="play.play_number"
          class="play-item group"
        >
          <!-- Play Card -->
          <div
            class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm hover:shadow-md transition-all cursor-pointer border-l-4"
            :class="getPlayBorderColor(play)"
          >
            <!-- Play Header -->
            <div class="flex items-start justify-between mb-2">
              <div class="flex items-center gap-2">
                <!-- Play Icon -->
                <div
                  class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0"
                  :class="getPlayIconClass(play)"
                >
                  <component :is="getPlayIcon(play)" class="w-4 h-4" />
                </div>

                <!-- Inning Badge -->
                <span class="text-xs font-medium px-2 py-0.5 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 rounded-full">
                  {{ formatInning(play) }}
                </span>
              </div>

              <!-- Play Number -->
              <span class="text-xs text-gray-400 font-mono">
                #{{ play.play_number }}
              </span>
            </div>

            <!-- Play Description -->
            <p
              class="text-sm text-gray-900 dark:text-gray-100 font-medium leading-relaxed"
              :class="{'line-clamp-2 group-hover:line-clamp-none': compact}"
            >
              {{ play.description }}
            </p>

            <!-- Play Stats (Runs/Outs) -->
            <div class="flex items-center gap-3 mt-3">
              <!-- Runs Scored -->
              <div
                v-if="play.runs_scored > 0"
                class="flex items-center gap-1 text-xs font-semibold text-green-600 dark:text-green-400"
              >
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
                </svg>
                <span>{{ play.runs_scored }} {{ play.runs_scored === 1 ? 'Run' : 'Runs' }}</span>
              </div>

              <!-- Outs Recorded -->
              <div
                v-if="play.outs_recorded > 0"
                class="flex items-center gap-1 text-xs font-semibold text-red-600 dark:text-red-400"
              >
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
                <span>{{ play.outs_recorded }} {{ play.outs_recorded === 1 ? 'Out' : 'Outs' }}</span>
              </div>

              <!-- Outcome Badge -->
              <div class="ml-auto">
                <span
                  class="text-xs px-2 py-0.5 rounded-full font-medium"
                  :class="getOutcomeBadgeClass(play)"
                >
                  {{ formatOutcome(play.outcome) }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </TransitionGroup>
    </div>

    <!-- Load More (if showing recent) -->
    <div
      v-if="!showAllPlays && plays && plays.length > limit"
      class="text-center mt-4"
    >
      <button
        @click="showAllPlays = true"
        class="text-sm text-primary hover:text-blue-700 font-medium transition"
      >
        View All {{ plays.length }} Plays →
      </button>
    </div>
  </div>
</template>

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

interface Props {
  plays?: PlayResult[]
  limit?: number
  compact?: boolean
  scrollable?: boolean
  maxHeight?: number
  showFilters?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  plays: () => [],
  limit: 10,
  compact: false,
  scrollable: true,
  maxHeight: 0,
  showFilters: true
})

// State
const showAllPlays = ref(false)

// Computed
const displayedPlays = computed(() => {
  if (!props.plays || props.plays.length === 0) return []

  // Sort by play number descending (most recent first)
  const sorted = [...props.plays].sort((a, b) => b.play_number - a.play_number)

  // Return limited or all
  return showAllPlays.value ? sorted : sorted.slice(0, props.limit)
})

// Methods
const formatInning = (play: PlayResult): string => {
  // Extract inning from play (assuming it's in description or metadata)
  // Fallback format for now
  return `Inning ${play.inning || '?'}`
}

const formatOutcome = (outcome: string): string => {
  // Convert SINGLE_1 -> Single, STRIKEOUT -> K, etc.
  if (outcome.startsWith('SINGLE')) return 'Single'
  if (outcome.startsWith('DOUBLE')) return 'Double'
  if (outcome.startsWith('TRIPLE')) return 'Triple'
  if (outcome.includes('HOMERUN')) return 'Home Run'
  if (outcome.includes('STRIKEOUT')) return 'K'
  if (outcome.includes('WALK')) return 'BB'
  if (outcome.includes('GROUNDOUT')) return 'Groundout'
  if (outcome.includes('FLYOUT')) return 'Flyout'
  if (outcome.includes('LINEOUT')) return 'Lineout'
  return outcome.replace(/_/g, ' ')
}

const getPlayBorderColor = (play: PlayResult): string => {
  if (play.runs_scored > 0) return 'border-green-500'
  if (play.outs_recorded > 0) return 'border-red-500'
  if (play.outcome.includes('SINGLE') || play.outcome.includes('DOUBLE') || play.outcome.includes('TRIPLE') || play.outcome.includes('HOMERUN')) {
    return 'border-blue-500'
  }
  return 'border-gray-300 dark:border-gray-700'
}

const getPlayIconClass = (play: PlayResult): string => {
  if (play.runs_scored > 0) return 'bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400'
  if (play.outs_recorded > 0) return 'bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400'
  if (play.outcome.includes('SINGLE') || play.outcome.includes('DOUBLE') || play.outcome.includes('TRIPLE') || play.outcome.includes('HOMERUN')) {
    return 'bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400'
  }
  return 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400'
}

const getPlayIcon = (play: PlayResult) => {
  // Return SVG path as component
  if (play.runs_scored > 0) {
    return h('svg', { xmlns: 'http://www.w3.org/2000/svg', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor' }, [
      h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M5 10l7-7m0 0l7 7m-7-7v18' })
    ])
  }
  if (play.outs_recorded > 0) {
    return h('svg', { xmlns: 'http://www.w3.org/2000/svg', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor' }, [
      h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M6 18L18 6M6 6l12 12' })
    ])
  }
  // Default baseball icon
  return h('svg', { xmlns: 'http://www.w3.org/2000/svg', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor' }, [
    h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M21 12a9 9 0 11-18 0 9 9 0 0118 0z' }),
    h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z' })
  ])
}

const getOutcomeBadgeClass = (play: PlayResult): string => {
  if (play.outcome.includes('HOMERUN')) return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400'
  if (play.outcome.includes('SINGLE') || play.outcome.includes('DOUBLE') || play.outcome.includes('TRIPLE')) {
    return 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400'
  }
  if (play.outcome.includes('STRIKEOUT')) return 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
  if (play.outcome.includes('WALK')) return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
  return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-400'
}
</script>

<style scoped>
/* Play slide-in animation */
.play-slide-enter-active {
  transition: all 0.4s ease-out;
}

.play-slide-leave-active {
  transition: all 0.3s ease-in;
}

.play-slide-enter-from {
  opacity: 0;
  transform: translateY(-20px);
}

.play-slide-leave-to {
  opacity: 0;
  transform: translateX(20px);
}

/* Line clamp utilities */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-none {
  display: block;
  -webkit-line-clamp: unset;
}
</style>