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>

frontend-sba/components/Game/ScoreBoard.vue

@@ -34,20 +34,38 @@
           </div>
         </div>
 
-        <!-- Game Situation - Compact -->
+        <!-- Game Situation - Runners + Outs stacked -->
-        <div class="flex items-center justify-between gap-2 text-sm">
+        <div class="flex items-center justify-center gap-4 text-sm">
-          <!-- Count -->
+          <!-- Runners + Outs Column -->
-          <div class="flex-1 bg-white/10 backdrop-blur rounded-lg px-3 py-2 text-center">
+          <div class="flex flex-col gap-0.5 w-24">
-            <span class="font-medium text-blue-100">Count</span>
+            <!-- Runners (Mini Diamond) - Fixed positioning -->
-            <div class="font-bold tabular-nums mt-0.5">
+            <div class="bg-white/10 backdrop-blur rounded-lg px-3 py-1">
-              <span class="text-green-300">{{ balls }}</span>-<span class="text-red-300">{{ strikes }}</span>
+              <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="flex-1 bg-white/10 backdrop-blur rounded-lg px-3 py-2 text-center">
+            <div class="bg-white/10 backdrop-blur rounded-lg px-3 py-1.5">
-            <span class="font-medium text-blue-100">Outs</span>
+              <div class="flex items-center justify-center gap-1.5">
-            <div class="flex items-center justify-center gap-1 mt-1">
                 <div
                   v-for="i in 3"
                   :key="i"
@@ -56,39 +74,6 @@
                 />
               </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"/>
-
-                  <!-- 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="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="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" />
-                </div>
-              </div>
-            </div>
           </div>
         </div>
       </div>
@@ -119,17 +104,36 @@
             </div>
           </div>
 
-          <!-- Count and Outs -->
+          <!-- Runners + Outs Column -->
-          <div class="space-y-2">
+          <div class="flex flex-col gap-1 w-28">
-            <div class="bg-white/10 backdrop-blur rounded-lg px-4 py-2 text-center">
+            <!-- Runners (Mini Diamond) - Fixed positioning -->
-              <span class="text-sm font-medium text-blue-100">Count: </span>
+            <div class="bg-white/10 backdrop-blur rounded-lg px-4 py-1.5">
-              <span class="text-xl font-bold tabular-nums">
+              <div class="flex items-center justify-center">
-                <span class="text-green-300">{{ balls }}</span>-<span class="text-red-300">{{ strikes }}</span>
+                <div class="relative w-14 h-14">
-              </span>
+                  <!-- 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 class="bg-white/10 backdrop-blur rounded-lg px-4 py-2 flex items-center justify-center gap-2">
+              </div>
-              <span class="text-sm font-medium text-blue-100">Outs:</span>
+            </div>
-              <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 })
 })

frontend-sba/pages/demo.vue

@@ -7,8 +7,6 @@
         :away-score="3"
         :inning="7"
         :half="'bottom'"
-        :balls="2"
-        :strikes="1"
         :outs="2"
         :runners="{ first: true, second: false, third: true }"
       />

frontend-sba/pages/games/[id].vue

@@ -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"
       />