CLAUDE: Add lineup builder polish - search, filters, player preview, visual improvements
Features: - Player search box with filter by name - Position filter tabs (All, Catchers, Infielders, Outfielders, Pitchers) - Player preview modal on click (shows positions, wara rating) - Clear lineup button with confirmation styling - Progress bar showing lineup completion - Player headshots in both roster list and lineup slots - Skeleton loading state during data fetch - Sticky navigation header with back button - Improved visual styling throughout (pills, cards, badges) TypeScript fixes: - Added pitcherPlayer computed property for proper type narrowing - Removed non-existent SbaPlayer stats (batting_average, home_runs, rbi) - Fixed unused variable warnings Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Cal Corum
parent
3dad6204e6
commit
d65ae19f5e
@ -18,6 +18,15 @@ const season = ref(3)
|
||||
type TeamTab = 'home' | 'away'
|
||||
const activeTab = ref<TeamTab>('away') // Away bats first
|
||||
|
||||
// Search and filter state
|
||||
const searchQuery = ref('')
|
||||
type PositionFilter = 'all' | 'catchers' | 'infielders' | 'outfielders' | 'pitchers'
|
||||
const positionFilter = ref<PositionFilter>('all')
|
||||
|
||||
// Player preview modal
|
||||
const previewPlayer = ref<SbaPlayer | null>(null)
|
||||
const showPreview = ref(false)
|
||||
|
||||
// Roster data
|
||||
const homeRoster = ref<SbaPlayer[]>([])
|
||||
const awayRoster = ref<SbaPlayer[]>([])
|
||||
@ -189,6 +198,77 @@ function removePlayer(slotIndex: number) {
|
||||
lineup[slotIndex].position = null
|
||||
}
|
||||
|
||||
// Clear entire lineup for current team
|
||||
function clearLineup() {
|
||||
const lineup = activeTab.value === 'home' ? homeLineup.value : awayLineup.value
|
||||
lineup.forEach((slot, index) => {
|
||||
slot.player = null
|
||||
slot.position = null
|
||||
})
|
||||
}
|
||||
|
||||
// Position category helpers
|
||||
const CATCHER_POSITIONS = ['C']
|
||||
const INFIELD_POSITIONS = ['1B', '2B', '3B', 'SS']
|
||||
const OUTFIELD_POSITIONS = ['LF', 'CF', 'RF']
|
||||
const PITCHER_POSITIONS = ['P']
|
||||
|
||||
function playerHasPositionInCategory(player: SbaPlayer, category: PositionFilter): boolean {
|
||||
if (category === 'all') return true
|
||||
|
||||
const positions = getPlayerPositions(player)
|
||||
|
||||
switch (category) {
|
||||
case 'catchers':
|
||||
return positions.some(p => CATCHER_POSITIONS.includes(p))
|
||||
case 'infielders':
|
||||
return positions.some(p => INFIELD_POSITIONS.includes(p))
|
||||
case 'outfielders':
|
||||
return positions.some(p => OUTFIELD_POSITIONS.includes(p))
|
||||
case 'pitchers':
|
||||
return positions.some(p => PITCHER_POSITIONS.includes(p))
|
||||
default:
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
// Filtered roster based on search and position filter
|
||||
const filteredRoster = computed(() => {
|
||||
let roster = currentRoster.value
|
||||
|
||||
// Apply search filter
|
||||
if (searchQuery.value.trim()) {
|
||||
const query = searchQuery.value.toLowerCase().trim()
|
||||
roster = roster.filter(p => p.name.toLowerCase().includes(query))
|
||||
}
|
||||
|
||||
// Apply position filter
|
||||
if (positionFilter.value !== 'all') {
|
||||
roster = roster.filter(p => playerHasPositionInCategory(p, positionFilter.value))
|
||||
}
|
||||
|
||||
return roster
|
||||
})
|
||||
|
||||
// Count of players in current lineup
|
||||
const currentLineupCount = computed(() => {
|
||||
return currentLineup.value.filter(s => s.player).length
|
||||
})
|
||||
|
||||
// Pitcher slot helper (for TypeScript narrowing)
|
||||
const pitcherPlayer = computed(() => currentLineup.value[9]?.player)
|
||||
|
||||
// Show player preview
|
||||
function openPlayerPreview(player: SbaPlayer) {
|
||||
previewPlayer.value = player
|
||||
showPreview.value = true
|
||||
}
|
||||
|
||||
function closePlayerPreview() {
|
||||
showPreview.value = false
|
||||
previewPlayer.value = null
|
||||
}
|
||||
|
||||
// Fetch game data
|
||||
async function fetchGameData() {
|
||||
try {
|
||||
@ -299,92 +379,254 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-gray-900 text-white p-4">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<!-- Header -->
|
||||
<div class="mb-6">
|
||||
<h1 class="text-3xl font-bold mb-2">Build Your Lineup</h1>
|
||||
<p class="text-gray-400">Drag players from the roster to the lineup slots</p>
|
||||
<div class="min-h-screen bg-gradient-to-b from-gray-900 via-gray-900 to-gray-950 text-white">
|
||||
<!-- Header Bar -->
|
||||
<div class="sticky top-0 z-40 bg-gray-900/95 backdrop-blur-sm border-b border-gray-800">
|
||||
<div class="max-w-6xl mx-auto px-4 py-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<NuxtLink
|
||||
:to="`/games/${gameId}`"
|
||||
class="flex items-center gap-2 text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
<span class="text-lg">←</span>
|
||||
<span class="hidden sm:inline">Back to Game</span>
|
||||
</NuxtLink>
|
||||
<div class="h-6 w-px bg-gray-700 hidden sm:block" />
|
||||
<div>
|
||||
<h1 class="text-xl font-bold">Build Your Lineup</h1>
|
||||
<p class="text-xs text-gray-500 hidden sm:block">Drag players to assign positions</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-sm text-gray-400">
|
||||
Game #{{ gameId.slice(0, 8) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="flex gap-2 mb-6 border-b border-gray-700">
|
||||
<div class="max-w-6xl mx-auto p-4">
|
||||
<!-- Team Tabs -->
|
||||
<div class="flex gap-2 mb-6 bg-gray-800/50 p-1 rounded-xl inline-flex">
|
||||
<button
|
||||
:class="[
|
||||
'px-6 py-3 font-semibold transition-colors',
|
||||
'px-6 py-2.5 font-semibold rounded-lg transition-all duration-200',
|
||||
activeTab === 'away'
|
||||
? 'bg-blue-600 text-white border-b-2 border-blue-500'
|
||||
: 'text-gray-400 hover:text-white'
|
||||
? 'bg-blue-600 text-white shadow-lg shadow-blue-600/25'
|
||||
: 'text-gray-400 hover:text-white hover:bg-gray-700/50'
|
||||
]"
|
||||
@click="activeTab = 'away'"
|
||||
>
|
||||
Away Lineup
|
||||
Away
|
||||
</button>
|
||||
<button
|
||||
:class="[
|
||||
'px-6 py-3 font-semibold transition-colors',
|
||||
'px-6 py-2.5 font-semibold rounded-lg transition-all duration-200',
|
||||
activeTab === 'home'
|
||||
? 'bg-blue-600 text-white border-b-2 border-blue-500'
|
||||
: 'text-gray-400 hover:text-white'
|
||||
? 'bg-blue-600 text-white shadow-lg shadow-blue-600/25'
|
||||
: 'text-gray-400 hover:text-white hover:bg-gray-700/50'
|
||||
]"
|
||||
@click="activeTab = 'home'"
|
||||
>
|
||||
Home Lineup
|
||||
Home
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Loading state -->
|
||||
<div v-if="loadingRoster" class="text-center py-12">
|
||||
<div class="text-xl">Loading roster...</div>
|
||||
<div v-if="loadingRoster" class="py-12">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<!-- Skeleton roster panel -->
|
||||
<div class="lg:col-span-1">
|
||||
<div class="bg-gray-800/50 rounded-xl p-4 animate-pulse">
|
||||
<div class="h-6 w-32 bg-gray-700 rounded mb-4" />
|
||||
<div class="h-10 w-full bg-gray-700 rounded-lg mb-3" />
|
||||
<div class="flex gap-1 mb-3">
|
||||
<div v-for="i in 5" :key="i" class="h-6 w-16 bg-gray-700 rounded-full" />
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div v-for="i in 6" :key="i" class="h-16 bg-gray-700 rounded-lg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Skeleton lineup panel -->
|
||||
<div class="lg:col-span-2">
|
||||
<div class="h-6 w-24 bg-gray-700 rounded mb-4 animate-pulse" />
|
||||
<div class="space-y-2">
|
||||
<div v-for="i in 9" :key="i" class="h-14 bg-gray-800/50 rounded-lg animate-pulse" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main content -->
|
||||
<div v-else class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<!-- Roster Pool (Sticky on desktop) -->
|
||||
<div class="lg:col-span-1">
|
||||
<div class="lg:sticky lg:top-4">
|
||||
<h2 class="text-xl font-bold mb-4">Available Players</h2>
|
||||
<div class="bg-gray-800 rounded-lg p-4 space-y-2 max-h-[calc(100vh-8rem)] overflow-y-auto">
|
||||
<div
|
||||
v-for="player in currentRoster"
|
||||
:key="player.id"
|
||||
draggable="true"
|
||||
class="bg-gray-700 rounded p-3 cursor-move hover:bg-gray-600 transition-colors"
|
||||
@dragstart="(e) => e.dataTransfer?.setData('player', JSON.stringify(player))"
|
||||
>
|
||||
<div class="font-semibold">{{ player.name }}</div>
|
||||
<div class="text-sm text-gray-400">
|
||||
{{ getPlayerPositions(player).join(', ') || 'No positions' }}
|
||||
<div class="lg:col-span-1 order-2 lg:order-1">
|
||||
<div class="lg:sticky lg:top-20">
|
||||
<!-- Roster Panel Header -->
|
||||
<div class="bg-gray-800/80 backdrop-blur-sm rounded-t-xl border border-gray-700/50 border-b-0 px-4 py-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-lg font-bold text-white">Available Players</h2>
|
||||
<span class="text-xs font-medium text-gray-400 bg-gray-700/50 px-2 py-1 rounded-full">
|
||||
{{ filteredRoster.length }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="currentRoster.length === 0" class="text-gray-500 text-center py-4">
|
||||
All players assigned
|
||||
<!-- Search & Filters -->
|
||||
<div class="bg-gray-800/60 backdrop-blur-sm border-x border-gray-700/50 px-4 py-3 space-y-3">
|
||||
<!-- Search Input -->
|
||||
<div class="relative">
|
||||
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 text-sm">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
placeholder="Search players..."
|
||||
class="w-full bg-gray-900/50 border border-gray-600/50 rounded-lg pl-10 pr-4 py-2 text-white text-sm placeholder-gray-500 focus:outline-none focus:border-blue-500/50 focus:ring-1 focus:ring-blue-500/25 transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Position Filter Tabs -->
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<button
|
||||
v-for="filter in (['all', 'catchers', 'infielders', 'outfielders', 'pitchers'] as PositionFilter[])"
|
||||
:key="filter"
|
||||
:class="[
|
||||
'px-3 py-1.5 text-xs font-medium rounded-lg transition-all duration-200',
|
||||
positionFilter === filter
|
||||
? 'bg-blue-600 text-white shadow-md shadow-blue-600/25'
|
||||
: 'bg-gray-700/50 text-gray-400 hover:text-white hover:bg-gray-700'
|
||||
]"
|
||||
@click="positionFilter = filter"
|
||||
>
|
||||
{{ filter === 'all' ? 'All' : filter.charAt(0).toUpperCase() + filter.slice(1) }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Roster List -->
|
||||
<div class="bg-gray-800/40 backdrop-blur-sm rounded-b-xl border border-gray-700/50 border-t-0 p-2 space-y-1.5 max-h-[calc(100vh-22rem)] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-600 scrollbar-track-transparent">
|
||||
<div
|
||||
v-for="player in filteredRoster"
|
||||
:key="player.id"
|
||||
draggable="true"
|
||||
class="bg-gray-700/60 hover:bg-gray-700 rounded-lg p-2.5 cursor-grab active:cursor-grabbing transition-all duration-150 flex items-center gap-3 group hover:shadow-md hover:shadow-black/20 border border-transparent hover:border-gray-600/50"
|
||||
@dragstart="(e) => e.dataTransfer?.setData('player', JSON.stringify(player))"
|
||||
>
|
||||
<!-- Player Headshot -->
|
||||
<div class="flex-shrink-0 relative">
|
||||
<img
|
||||
v-if="player.headshot || player.image"
|
||||
:src="player.headshot || player.image"
|
||||
:alt="player.name"
|
||||
class="w-10 h-10 rounded-full object-cover bg-gray-600 ring-2 ring-gray-600/50"
|
||||
@error="(e) => (e.target as HTMLImageElement).style.display = 'none'"
|
||||
/>
|
||||
<div v-else class="w-10 h-10 rounded-full bg-gradient-to-br from-gray-600 to-gray-700 flex items-center justify-center text-gray-300 text-sm font-bold ring-2 ring-gray-600/50">
|
||||
{{ player.name.charAt(0) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Player Info -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="font-medium text-white truncate text-sm">{{ player.name }}</div>
|
||||
<div class="flex items-center gap-1 mt-0.5">
|
||||
<span
|
||||
v-for="pos in getPlayerPositions(player).filter(p => p !== 'DH').slice(0, 3)"
|
||||
:key="pos"
|
||||
class="text-[10px] font-medium text-gray-400 bg-gray-800/80 px-1.5 py-0.5 rounded"
|
||||
>
|
||||
{{ pos }}
|
||||
</span>
|
||||
<span v-if="getPlayerPositions(player).filter(p => p !== 'DH').length > 3" class="text-[10px] text-gray-500">
|
||||
+{{ getPlayerPositions(player).filter(p => p !== 'DH').length - 3 }}
|
||||
</span>
|
||||
<span v-if="getPlayerPositions(player).filter(p => p !== 'DH').length === 0" class="text-[10px] text-gray-500">
|
||||
DH
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info Button -->
|
||||
<button
|
||||
class="flex-shrink-0 w-7 h-7 rounded-full bg-gray-600/50 hover:bg-blue-600 text-gray-400 hover:text-white text-xs flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all"
|
||||
@click.stop="openPlayerPreview(player)"
|
||||
>
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Empty state -->
|
||||
<div v-if="filteredRoster.length === 0" class="text-center py-8">
|
||||
<div class="text-gray-500 text-sm">
|
||||
{{ currentRoster.length === 0 ? 'All players assigned to lineup' : 'No players match your search' }}
|
||||
</div>
|
||||
<button
|
||||
v-if="searchQuery || positionFilter !== 'all'"
|
||||
class="mt-2 text-xs text-blue-400 hover:text-blue-300 transition-colors"
|
||||
@click="searchQuery = ''; positionFilter = 'all'"
|
||||
>
|
||||
Clear filters
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lineup Slots -->
|
||||
<div class="lg:col-span-2">
|
||||
<h2 class="text-xl font-bold mb-4">Lineup</h2>
|
||||
<div class="lg:col-span-2 order-1 lg:order-2">
|
||||
<!-- Lineup Header with Clear Button -->
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<h2 class="text-lg font-bold text-white">Batting Order</h2>
|
||||
<div class="flex items-center gap-1.5 text-xs">
|
||||
<span class="text-gray-400">Progress:</span>
|
||||
<div class="w-24 h-2 bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
class="h-full bg-gradient-to-r from-blue-600 to-blue-500 transition-all duration-300"
|
||||
:style="{ width: `${(currentLineupCount / (pitcherSlotDisabled ? 9 : 10)) * 100}%` }"
|
||||
/>
|
||||
</div>
|
||||
<span class="font-medium text-gray-300">{{ currentLineupCount }}/{{ pitcherSlotDisabled ? 9 : 10 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
v-if="currentLineupCount > 0"
|
||||
class="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-red-900/30 hover:bg-red-900/50 text-red-400 hover:text-red-300 rounded-lg border border-red-800/50 transition-all"
|
||||
@click="clearLineup"
|
||||
>
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Batting order slots (1-9) -->
|
||||
<div class="space-y-3 mb-6">
|
||||
<div class="space-y-1.5 mb-6">
|
||||
<div
|
||||
v-for="(slot, index) in currentLineup.slice(0, 9)"
|
||||
:key="index"
|
||||
class="bg-gray-800 rounded-lg p-4"
|
||||
:class="[
|
||||
'bg-gray-800/60 backdrop-blur-sm rounded-lg border transition-all duration-200',
|
||||
slot.player ? 'border-gray-700/50' : 'border-gray-700/30'
|
||||
]"
|
||||
>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-3 p-2.5">
|
||||
<!-- Batting order number -->
|
||||
<div class="text-2xl font-bold text-gray-500 w-8">
|
||||
{{ index + 1 }}
|
||||
<div class="flex-shrink-0 w-8 h-8 rounded-lg bg-gray-700/50 flex items-center justify-center">
|
||||
<span class="text-sm font-bold text-gray-400">{{ index + 1 }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Player slot -->
|
||||
<div
|
||||
class="flex-1"
|
||||
class="flex-1 min-w-0"
|
||||
@drop.prevent="(e) => {
|
||||
const playerData = e.dataTransfer?.getData('player')
|
||||
const fromSlotData = e.dataTransfer?.getData('fromSlot')
|
||||
@ -398,46 +640,79 @@ onMounted(async () => {
|
||||
>
|
||||
<div
|
||||
v-if="slot.player"
|
||||
class="bg-blue-900 rounded p-3 cursor-move"
|
||||
class="bg-blue-900/50 hover:bg-blue-900/70 rounded-lg p-2 cursor-grab active:cursor-grabbing transition-all duration-150 flex items-center gap-2.5 group border border-blue-700/30"
|
||||
draggable="true"
|
||||
@dragstart="(e) => {
|
||||
e.dataTransfer?.setData('player', JSON.stringify(slot.player))
|
||||
e.dataTransfer?.setData('fromSlot', index.toString())
|
||||
}"
|
||||
>
|
||||
<div class="flex justify-between items-start">
|
||||
<div class="flex-1">
|
||||
<div class="font-semibold">{{ slot.player.name }}</div>
|
||||
<div class="text-sm text-gray-400 mt-1">
|
||||
Available: {{ getPlayerPositions(slot.player).join(', ') }}
|
||||
<!-- Player Headshot -->
|
||||
<div class="flex-shrink-0">
|
||||
<img
|
||||
v-if="slot.player.headshot || slot.player.image"
|
||||
:src="slot.player.headshot || slot.player.image"
|
||||
:alt="slot.player.name"
|
||||
class="w-9 h-9 rounded-full object-cover bg-gray-600 ring-2 ring-blue-600/30"
|
||||
@error="(e) => (e.target as HTMLImageElement).style.display = 'none'"
|
||||
/>
|
||||
<div v-else class="w-9 h-9 rounded-full bg-gradient-to-br from-blue-700 to-blue-800 flex items-center justify-center text-blue-200 text-sm font-bold ring-2 ring-blue-600/30">
|
||||
{{ slot.player.name.charAt(0) }}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="text-red-400 hover:text-red-300 ml-2"
|
||||
@click="removePlayer(index)"
|
||||
|
||||
<!-- Player Info -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="font-medium text-white truncate text-sm">{{ slot.player.name }}</div>
|
||||
<div class="flex items-center gap-1 mt-0.5">
|
||||
<span
|
||||
v-for="pos in getPlayerPositions(slot.player).filter(p => p !== 'DH').slice(0, 2)"
|
||||
:key="pos"
|
||||
class="text-[10px] font-medium text-blue-300/80 bg-blue-950/50 px-1.5 py-0.5 rounded"
|
||||
>
|
||||
✕
|
||||
{{ pos }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info Button -->
|
||||
<button
|
||||
class="flex-shrink-0 w-6 h-6 rounded-full bg-blue-800/50 hover:bg-blue-600 text-blue-300 hover:text-white text-xs flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all"
|
||||
@click.stop="openPlayerPreview(slot.player)"
|
||||
>
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Remove Button -->
|
||||
<button
|
||||
class="flex-shrink-0 w-6 h-6 rounded-full bg-red-900/30 hover:bg-red-900/60 text-red-400 hover:text-red-300 text-xs flex items-center justify-center transition-all"
|
||||
@click.stop="removePlayer(index)"
|
||||
>
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="border-2 border-dashed border-gray-600 rounded p-4 text-center text-gray-500">
|
||||
<div v-else class="border-2 border-dashed border-gray-600/50 rounded-lg py-3 px-4 text-center text-gray-500 text-xs transition-colors hover:border-gray-500/50 hover:bg-gray-800/30">
|
||||
Drop player here
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Position selector -->
|
||||
<div class="w-32">
|
||||
<div class="w-20 flex-shrink-0">
|
||||
<select
|
||||
v-if="slot.player"
|
||||
v-model="slot.position"
|
||||
:class="[
|
||||
'w-full bg-gray-700 border rounded px-3 py-2',
|
||||
'w-full bg-gray-700/80 border rounded-lg px-2 py-1.5 text-sm font-medium transition-all focus:outline-none focus:ring-1',
|
||||
duplicatePositions.includes(slot.position || '')
|
||||
? 'border-red-500 font-bold text-red-400'
|
||||
: 'border-gray-600'
|
||||
? 'border-red-500 text-red-400 focus:ring-red-500/50'
|
||||
: 'border-gray-600/50 text-white focus:border-blue-500/50 focus:ring-blue-500/25'
|
||||
]"
|
||||
>
|
||||
<option :value="null">Position</option>
|
||||
<option :value="null" class="text-gray-400">Pos</option>
|
||||
<option
|
||||
v-for="pos in getPlayerPositions(slot.player)"
|
||||
:key="pos"
|
||||
@ -446,8 +721,8 @@ onMounted(async () => {
|
||||
{{ pos }}
|
||||
</option>
|
||||
</select>
|
||||
<div v-else class="text-gray-600 text-sm text-center">
|
||||
-
|
||||
<div v-else class="text-gray-600 text-xs text-center">
|
||||
—
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -456,23 +731,25 @@ onMounted(async () => {
|
||||
|
||||
<!-- Pitcher slot (10) -->
|
||||
<div class="mb-6">
|
||||
<h3 class="text-lg font-semibold mb-3 flex items-center gap-2">
|
||||
Pitcher (Non-Batting)
|
||||
<span v-if="pitcherSlotDisabled" class="text-sm text-yellow-400">
|
||||
(Disabled - Pitcher batting)
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<h3 class="text-sm font-semibold text-gray-300">Starting Pitcher</h3>
|
||||
<span v-if="pitcherSlotDisabled" class="text-xs text-yellow-500 bg-yellow-500/10 px-2 py-0.5 rounded-full">
|
||||
Pitcher in batting order
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
:class="[
|
||||
'bg-gray-800 rounded-lg p-4',
|
||||
pitcherSlotDisabled && 'opacity-50 pointer-events-none'
|
||||
'bg-gray-800/60 backdrop-blur-sm rounded-lg border transition-all duration-200',
|
||||
pitcherSlotDisabled ? 'opacity-40 pointer-events-none border-gray-700/20' : 'border-gray-700/50'
|
||||
]"
|
||||
>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="text-2xl font-bold text-gray-500 w-8">P</div>
|
||||
<div class="flex items-center gap-3 p-2.5">
|
||||
<div class="flex-shrink-0 w-8 h-8 rounded-lg bg-green-900/30 flex items-center justify-center">
|
||||
<span class="text-sm font-bold text-green-400">P</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex-1"
|
||||
class="flex-1 min-w-0"
|
||||
@drop.prevent="(e) => {
|
||||
const playerData = e.dataTransfer?.getData('player')
|
||||
const fromSlotData = e.dataTransfer?.getData('fromSlot')
|
||||
@ -485,52 +762,88 @@ onMounted(async () => {
|
||||
@dragover.prevent
|
||||
>
|
||||
<div
|
||||
v-if="currentLineup[9].player"
|
||||
class="bg-blue-900 rounded p-3 cursor-move"
|
||||
v-if="pitcherPlayer"
|
||||
class="bg-green-900/40 hover:bg-green-900/60 rounded-lg p-2 cursor-grab active:cursor-grabbing transition-all duration-150 flex items-center gap-2.5 group border border-green-700/30"
|
||||
draggable="true"
|
||||
@dragstart="(e) => {
|
||||
e.dataTransfer?.setData('player', JSON.stringify(currentLineup[9].player))
|
||||
e.dataTransfer?.setData('player', JSON.stringify(pitcherPlayer))
|
||||
e.dataTransfer?.setData('fromSlot', '9')
|
||||
}"
|
||||
>
|
||||
<div class="flex justify-between items-start">
|
||||
<div class="flex-1">
|
||||
<div class="font-semibold">{{ currentLineup[9].player.name }}</div>
|
||||
<div class="text-sm text-gray-400 mt-1">
|
||||
Available: {{ getPlayerPositions(currentLineup[9].player).join(', ') }}
|
||||
<!-- Player Headshot -->
|
||||
<div class="flex-shrink-0">
|
||||
<img
|
||||
v-if="pitcherPlayer.headshot || pitcherPlayer.image"
|
||||
:src="pitcherPlayer.headshot || pitcherPlayer.image"
|
||||
:alt="pitcherPlayer.name"
|
||||
class="w-9 h-9 rounded-full object-cover bg-gray-600 ring-2 ring-green-600/30"
|
||||
@error="(e) => (e.target as HTMLImageElement).style.display = 'none'"
|
||||
/>
|
||||
<div v-else class="w-9 h-9 rounded-full bg-gradient-to-br from-green-700 to-green-800 flex items-center justify-center text-green-200 text-sm font-bold ring-2 ring-green-600/30">
|
||||
{{ pitcherPlayer.name.charAt(0) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Player Info -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="font-medium text-white truncate text-sm">{{ pitcherPlayer.name }}</div>
|
||||
<div class="text-[10px] text-green-400/80 mt-0.5">Pitcher</div>
|
||||
</div>
|
||||
|
||||
<!-- Info Button -->
|
||||
<button
|
||||
class="text-red-400 hover:text-red-300 ml-2"
|
||||
@click="removePlayer(9)"
|
||||
class="flex-shrink-0 w-6 h-6 rounded-full bg-green-800/50 hover:bg-green-600 text-green-300 hover:text-white text-xs flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all"
|
||||
@click.stop="openPlayerPreview(pitcherPlayer)"
|
||||
>
|
||||
✕
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Remove Button -->
|
||||
<button
|
||||
class="flex-shrink-0 w-6 h-6 rounded-full bg-red-900/30 hover:bg-red-900/60 text-red-400 hover:text-red-300 text-xs flex items-center justify-center transition-all"
|
||||
@click.stop="removePlayer(9)"
|
||||
>
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="border-2 border-dashed border-gray-600 rounded p-4 text-center text-gray-500">
|
||||
<div v-else class="border-2 border-dashed border-gray-600/50 rounded-lg py-3 px-4 text-center text-gray-500 text-xs transition-colors hover:border-gray-500/50 hover:bg-gray-800/30">
|
||||
Drop pitcher here
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-32">
|
||||
<div class="text-gray-600 text-sm text-center font-semibold">P</div>
|
||||
<div class="w-20 flex-shrink-0">
|
||||
<div class="text-green-500 text-xs text-center font-medium">P</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Validation errors -->
|
||||
<div v-if="validationErrors.length > 0" class="bg-red-900/30 border border-red-500 rounded-lg p-4 mb-4">
|
||||
<div class="font-semibold mb-2">Please fix the following errors:</div>
|
||||
<ul class="list-disc list-inside space-y-1">
|
||||
<li v-for="error in validationErrors" :key="error" class="text-sm">
|
||||
<div v-if="validationErrors.length > 0" class="bg-red-950/50 border border-red-800/50 rounded-xl p-4 mb-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-red-900/50 flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-semibold text-red-300 text-sm mb-1">Please fix the following:</div>
|
||||
<ul class="space-y-1">
|
||||
<li v-for="error in validationErrors" :key="error" class="text-xs text-red-400/90 flex items-center gap-1.5">
|
||||
<span class="w-1 h-1 rounded-full bg-red-400/60" />
|
||||
{{ error }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit button -->
|
||||
<div class="sticky bottom-4 pt-4">
|
||||
<ActionButton
|
||||
variant="success"
|
||||
size="lg"
|
||||
@ -545,4 +858,85 @@ onMounted(async () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Player Preview Modal -->
|
||||
<Teleport to="body">
|
||||
<div
|
||||
v-if="showPreview && previewPlayer"
|
||||
class="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4"
|
||||
@click.self="closePlayerPreview"
|
||||
>
|
||||
<div class="bg-gray-800 rounded-xl max-w-md w-full max-h-[90vh] overflow-y-auto shadow-2xl">
|
||||
<!-- Modal Header -->
|
||||
<div class="relative">
|
||||
<!-- Large Player Image -->
|
||||
<div class="h-48 bg-gradient-to-b from-blue-900 to-gray-800 flex items-center justify-center">
|
||||
<img
|
||||
v-if="previewPlayer.headshot || previewPlayer.image"
|
||||
:src="previewPlayer.headshot || previewPlayer.image"
|
||||
:alt="previewPlayer.name"
|
||||
class="w-32 h-32 rounded-full object-cover border-4 border-gray-700 shadow-lg"
|
||||
@error="(e) => (e.target as HTMLImageElement).style.display = 'none'"
|
||||
/>
|
||||
<div v-else class="w-32 h-32 rounded-full bg-gray-700 flex items-center justify-center text-gray-400 text-4xl font-bold border-4 border-gray-600">
|
||||
{{ previewPlayer.name.charAt(0) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Close Button -->
|
||||
<button
|
||||
class="absolute top-3 right-3 w-8 h-8 rounded-full bg-gray-900/80 hover:bg-gray-700 text-gray-400 hover:text-white flex items-center justify-center transition-colors"
|
||||
@click="closePlayerPreview"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Player Info -->
|
||||
<div class="p-6">
|
||||
<h2 class="text-2xl font-bold text-center mb-1">{{ previewPlayer.name }}</h2>
|
||||
<p class="text-gray-400 text-center text-sm mb-4">
|
||||
{{ getPlayerPositions(previewPlayer).filter(p => p !== 'DH').join(' / ') || 'Designated Hitter' }}
|
||||
</p>
|
||||
|
||||
<!-- Stats Grid -->
|
||||
<div class="grid grid-cols-2 gap-4 mb-4">
|
||||
<!-- Positions -->
|
||||
<div class="bg-gray-700/50 rounded-lg p-3">
|
||||
<div class="text-xs text-gray-400 uppercase tracking-wide mb-1">Positions</div>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<span
|
||||
v-for="pos in getPlayerPositions(previewPlayer).filter(p => p !== 'DH')"
|
||||
:key="pos"
|
||||
class="px-2 py-0.5 bg-blue-900 text-blue-200 text-xs rounded"
|
||||
>
|
||||
{{ pos }}
|
||||
</span>
|
||||
<span v-if="getPlayerPositions(previewPlayer).filter(p => p !== 'DH').length === 0" class="text-gray-500 text-sm">
|
||||
DH Only
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- WAR -->
|
||||
<div class="bg-gray-700/50 rounded-lg p-3">
|
||||
<div class="text-xs text-gray-400 uppercase tracking-wide mb-1">WAR</div>
|
||||
<div class="text-xl font-bold">
|
||||
{{ previewPlayer.wara?.toFixed(1) || '—' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Close Button -->
|
||||
<button
|
||||
class="w-full py-2 bg-gray-700 hover:bg-gray-600 rounded-lg text-gray-300 hover:text-white transition-colors"
|
||||
@click="closePlayerPreview"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user