278 lines
10 KiB
Vue
278 lines
10 KiB
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"
|
|
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'"
|
|
@click="showAllPlays = !showAllPlays"
|
|
>
|
|
{{ 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
|
|
class="text-sm text-primary hover:text-blue-700 font-medium transition"
|
|
@click="showAllPlays = true"
|
|
>
|
|
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>
|