CLAUDE: Redesign ScoreBoard header runners/outs display
- Remove Count box (not needed for this game mode) - Stack Runners above Outs in compact vertical column - Fix diamond orientation: bases now at corners (matching GameBoard) - Change base markers from circles to diamond squares - Remove home plate, keep only 1st/2nd/3rd bases - Remove diamond outline for cleaner look - Remove Outs label, keep only indicator circles - Tighten spacing to align with Inning box height - Remove unused balls/strikes props 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Cal Corum
parent
acdc465841
commit
bf57aaa9f7
@ -34,61 +34,46 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Game Situation - Compact -->
|
||||
<div class="flex items-center justify-between gap-2 text-sm">
|
||||
<!-- Count -->
|
||||
<div class="flex-1 bg-white/10 backdrop-blur rounded-lg px-3 py-2 text-center">
|
||||
<span class="font-medium text-blue-100">Count</span>
|
||||
<div class="font-bold tabular-nums mt-0.5">
|
||||
<span class="text-green-300">{{ balls }}</span>-<span class="text-red-300">{{ strikes }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Outs -->
|
||||
<div class="flex-1 bg-white/10 backdrop-blur rounded-lg px-3 py-2 text-center">
|
||||
<span class="font-medium text-blue-100">Outs</span>
|
||||
<div class="flex items-center justify-center gap-1 mt-1">
|
||||
<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>
|
||||
|
||||
<!-- Runners (Mini Diamond) -->
|
||||
<div class="flex-1 bg-white/10 backdrop-blur rounded-lg px-3 py-2">
|
||||
<div class="font-medium text-blue-100 text-center mb-1">Runners</div>
|
||||
<div class="flex items-center justify-center">
|
||||
<div class="relative w-12 h-12">
|
||||
<!-- Diamond Shape -->
|
||||
<div class="absolute inset-0 rotate-45">
|
||||
<div class="w-full h-full border border-white/40"/>
|
||||
|
||||
<!-- 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-1.5 left-1/2 -translate-x-1/2 w-3 h-3 rounded-full transition-all"
|
||||
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'"
|
||||
/>
|
||||
|
||||
<!-- 3rd Base (Left) -->
|
||||
<div
|
||||
class="absolute top-1/2 -left-1.5 -translate-y-1/2 w-3 h-3 rounded-full transition-all"
|
||||
:class="runners.third ? 'bg-yellow-400 shadow-lg shadow-yellow-500/50' : 'bg-white/20'"
|
||||
/>
|
||||
|
||||
<!-- 1st Base (Right) -->
|
||||
<div
|
||||
class="absolute top-1/2 -right-1.5 -translate-y-1/2 w-3 h-3 rounded-full transition-all"
|
||||
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'"
|
||||
/>
|
||||
|
||||
<!-- Home Plate (Bottom) -->
|
||||
<div class="absolute -bottom-1.5 left-1/2 -translate-x-1/2 w-3 h-3 bg-white rounded-sm transform rotate-45" />
|
||||
<!-- 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>
|
||||
@ -119,17 +104,36 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Count and Outs -->
|
||||
<div class="space-y-2">
|
||||
<div class="bg-white/10 backdrop-blur rounded-lg px-4 py-2 text-center">
|
||||
<span class="text-sm font-medium text-blue-100">Count: </span>
|
||||
<span class="text-xl font-bold tabular-nums">
|
||||
<span class="text-green-300">{{ balls }}</span>-<span class="text-red-300">{{ strikes }}</span>
|
||||
</span>
|
||||
<!-- 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>
|
||||
<div class="bg-white/10 backdrop-blur rounded-lg px-4 py-2 flex items-center justify-center gap-2">
|
||||
<span class="text-sm font-medium text-blue-100">Outs:</span>
|
||||
<div class="flex gap-1.5">
|
||||
|
||||
<!-- 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"
|
||||
@ -139,40 +143,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Runners Diamond (Larger) -->
|
||||
<div class="bg-white/10 backdrop-blur rounded-lg px-4 py-3">
|
||||
<div class="text-sm font-medium text-blue-100 text-center mb-2">RUNNERS</div>
|
||||
<div class="flex items-center justify-center">
|
||||
<div class="relative w-16 h-16">
|
||||
<!-- Diamond Shape -->
|
||||
<div class="absolute inset-0 rotate-45">
|
||||
<div class="w-full h-full border-2 border-white/40"/>
|
||||
|
||||
<!-- 2nd Base -->
|
||||
<div
|
||||
class="absolute -top-2 left-1/2 -translate-x-1/2 w-4 h-4 rounded-full transition-all"
|
||||
:class="runners.second ? 'bg-yellow-400 shadow-lg shadow-yellow-500/50 animate-pulse' : 'bg-white/20'"
|
||||
/>
|
||||
|
||||
<!-- 3rd Base -->
|
||||
<div
|
||||
class="absolute top-1/2 -left-2 -translate-y-1/2 w-4 h-4 rounded-full transition-all"
|
||||
:class="runners.third ? 'bg-yellow-400 shadow-lg shadow-yellow-500/50 animate-pulse' : 'bg-white/20'"
|
||||
/>
|
||||
|
||||
<!-- 1st Base -->
|
||||
<div
|
||||
class="absolute top-1/2 -right-2 -translate-y-1/2 w-4 h-4 rounded-full transition-all"
|
||||
:class="runners.first ? 'bg-yellow-400 shadow-lg shadow-yellow-500/50 animate-pulse' : 'bg-white/20'"
|
||||
/>
|
||||
|
||||
<!-- Home Plate -->
|
||||
<div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-4 h-4 bg-white rounded-sm transform rotate-45" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Home Team Score -->
|
||||
@ -195,8 +165,6 @@ interface Props {
|
||||
awayScore?: number
|
||||
inning?: number
|
||||
half?: InningHalf
|
||||
balls?: number
|
||||
strikes?: number
|
||||
outs?: number
|
||||
runners?: {
|
||||
first: boolean
|
||||
@ -210,8 +178,6 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
awayScore: 0,
|
||||
inning: 1,
|
||||
half: 'top',
|
||||
balls: 0,
|
||||
strikes: 0,
|
||||
outs: 0,
|
||||
runners: () => ({ first: false, second: false, third: false })
|
||||
})
|
||||
|
||||
@ -7,8 +7,6 @@
|
||||
:away-score="3"
|
||||
:inning="7"
|
||||
:half="'bottom'"
|
||||
:balls="2"
|
||||
:strikes="1"
|
||||
:outs="2"
|
||||
:runners="{ first: true, second: false, third: true }"
|
||||
/>
|
||||
|
||||
@ -7,8 +7,6 @@
|
||||
:away-score="gameState?.away_score"
|
||||
:inning="gameState?.inning"
|
||||
:half="gameState?.half"
|
||||
:balls="gameState?.balls"
|
||||
:strikes="gameState?.strikes"
|
||||
:outs="gameState?.outs"
|
||||
:runners="runnersState"
|
||||
/>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user