From 849db58deb9984faff64738055531c582c751ae0 Mon Sep 17 00:00:00 2001
From: Peter <peterlgirouard@gmail.com>
Date: Sat, 9 Nov 2024 14:21:12 -0600
Subject: [PATCH] Align batting/pitching/fielding between teams on GameView

---
 src/views/GameView.vue | 575 +++++++++++++++++++++--------------------
 1 file changed, 293 insertions(+), 282 deletions(-)

diff --git a/src/views/GameView.vue b/src/views/GameView.vue
index aa6877c..fdef8ea 100644
--- a/src/views/GameView.vue
+++ b/src/views/GameView.vue
@@ -38,297 +38,308 @@
     <!-- Full Scorecard -->
     <div class="row" id="scorecard">
 
-      <!-- Away Team -->
-      <div class="col-xl-6">
-
+      <!-- Batting -->
+      <div class="row">
         <!-- Away Batting -->
-        <h3 id="awayteam-batting-header">{{ awayTeamName }} Batting</h3>
-        <div class="table-responsive-xl">
-          <table class="table table-sm table-striped" id="away-batting">
-            <thead class="thead-dark">
-              <tr>
-                <th>Player</th>
-                <th>PA</th>
-                <th>AB</th>
-                <th>R</th>
-                <th>H</th>
-                <th>2B</th>
-                <th>3B</th>
-                <th>HR</th>
-                <th>RBI</th>
-                <th>SB</th>
-                <th>CS</th>
-                <th>BB</th>
-                <th>SO</th>
-                <th>GIDP</th>
-                <th>HBP</th>
-                <th>SAC</th>
-                <th>IBB</th>
-              </tr>
-            </thead>
-            <tbody id="awayteam-batting-table">
-              <tr v-for="stat in awayTeamBattingStats" :key="stat.player.name">
-                <td>
-                  <RouterLink
-                    :to="{ name: 'player', params: { seasonNumber: seasonNumber, playerName: stat.player.name } }">
-                    {{ stat.player.name }}
-                  </RouterLink>
-                </td>
-                <td>{{ stat.pa }}</td>
-                <td>{{ stat.ab }}</td>
-                <td>{{ stat.run }}</td>
-                <td>{{ stat.hit }}</td>
-                <td>{{ stat.double }}</td>
-                <td>{{ stat.triple }}</td>
-                <td>{{ stat.hr }}</td>
-                <td>{{ stat.rbi }}</td>
-                <td>{{ stat.sb }}</td>
-                <td>{{ stat.cs }}</td>
-                <td>{{ stat.bb }}</td>
-                <td>{{ stat.so }}</td>
-                <td>{{ stat.gidp }}</td>
-                <td>{{ stat.hbp }}</td>
-                <td>{{ stat.sac }}</td>
-                <td>{{ stat.ibb }}</td>
-              </tr>
-            </tbody>
-            <tfoot></tfoot>
-          </table>
+        <div class="col-xl-6">
+          <h3 id="awayteam-batting-header">{{ awayTeamName }} Batting</h3>
+          <div class="table-responsive-xl">
+            <table class="table table-sm table-striped" id="away-batting">
+              <thead class="thead-dark">
+                <tr>
+                  <th>Player</th>
+                  <th>PA</th>
+                  <th>AB</th>
+                  <th>R</th>
+                  <th>H</th>
+                  <th>2B</th>
+                  <th>3B</th>
+                  <th>HR</th>
+                  <th>RBI</th>
+                  <th>SB</th>
+                  <th>CS</th>
+                  <th>BB</th>
+                  <th>SO</th>
+                  <th>GIDP</th>
+                  <th>HBP</th>
+                  <th>SAC</th>
+                  <th>IBB</th>
+                </tr>
+              </thead>
+              <tbody id="awayteam-batting-table">
+                <tr v-for="stat in awayTeamBattingStats" :key="stat.player.name">
+                  <td>
+                    <RouterLink
+                      :to="{ name: 'player', params: { seasonNumber: seasonNumber, playerName: stat.player.name } }">
+                      {{ stat.player.name }}
+                    </RouterLink>
+                  </td>
+                  <td>{{ stat.pa }}</td>
+                  <td>{{ stat.ab }}</td>
+                  <td>{{ stat.run }}</td>
+                  <td>{{ stat.hit }}</td>
+                  <td>{{ stat.double }}</td>
+                  <td>{{ stat.triple }}</td>
+                  <td>{{ stat.hr }}</td>
+                  <td>{{ stat.rbi }}</td>
+                  <td>{{ stat.sb }}</td>
+                  <td>{{ stat.cs }}</td>
+                  <td>{{ stat.bb }}</td>
+                  <td>{{ stat.so }}</td>
+                  <td>{{ stat.gidp }}</td>
+                  <td>{{ stat.hbp }}</td>
+                  <td>{{ stat.sac }}</td>
+                  <td>{{ stat.ibb }}</td>
+                </tr>
+              </tbody>
+              <tfoot></tfoot>
+            </table>
+          </div>
         </div>
-
-        <!-- Away Fielding -->
-        <h3 id="awayteam-fielding-header">{{ awayTeamName }} Fielding</h3>
-        <div class="table-responsive-xl">
-          <table class="table table-sm table-striped" style="max-width: 25rem" id="away-fielding">
-            <thead class="thead-dark">
-              <tr>
-                <th>Player</th>
-                <th>X-Ch</th>
-                <th>X-Hit</th>
-                <th>Error</th>
-                <th>PB</th>
-                <th>SBa</th>
-                <th>CSc</th>
-              </tr>
-            </thead>
-            <tbody id="awayteam-fielding-table">
-              <tr v-for="stat in awayTeamFieldingStats" :key="stat.player.name">
-                <td>
-                  <RouterLink
-                    :to="{ name: 'player', params: { seasonNumber: seasonNumber, playerName: stat.player.name } }">
-                    {{ stat.player.name }}
-                  </RouterLink>
-                </td>
-                <td>{{ stat.xCheckCount }}</td>
-                <td>{{ stat.hit }}</td>
-                <td>{{ stat.error }}</td>
-                <td>{{ stat.passedBallCount }}</td>
-                <td>{{ stat.stolenBaseCheckCount }}</td>
-                <td>{{ stat.caughtStealingCount }}</td>
-              </tr>
-            </tbody>
-            <tfoot></tfoot>
-          </table>
+        <!-- Home Batting -->
+        <div class="col-xl-6">
+          <h3 id="hometeam-batting-header">{{ homeTeamName }} Batting</h3>
+          <div class="table-responsive-xl">
+            <table class="table table-sm table-striped" id="home-batting">
+              <thead class="thead-dark">
+                <tr>
+                  <th>Player</th>
+                  <th>PA</th>
+                  <th>AB</th>
+                  <th>R</th>
+                  <th>H</th>
+                  <th>2B</th>
+                  <th>3B</th>
+                  <th>HR</th>
+                  <th>RBI</th>
+                  <th>SB</th>
+                  <th>CS</th>
+                  <th>BB</th>
+                  <th>SO</th>
+                  <th>GIDP</th>
+                  <th>HBP</th>
+                  <th>SAC</th>
+                  <th>IBB</th>
+                </tr>
+              </thead>
+              <tbody id="hometeam-batting-table">
+                <tr v-for="stat in homeTeamBattingStats" :key="stat.player.name">
+                  <td>
+                    <RouterLink
+                      :to="{ name: 'player', params: { seasonNumber: seasonNumber, playerName: stat.player.name } }">
+                      {{ stat.player.name }}
+                    </RouterLink>
+                  </td>
+                  <td>{{ stat.pa }}</td>
+                  <td>{{ stat.ab }}</td>
+                  <td>{{ stat.run }}</td>
+                  <td>{{ stat.hit }}</td>
+                  <td>{{ stat.double }}</td>
+                  <td>{{ stat.triple }}</td>
+                  <td>{{ stat.hr }}</td>
+                  <td>{{ stat.rbi }}</td>
+                  <td>{{ stat.sb }}</td>
+                  <td>{{ stat.cs }}</td>
+                  <td>{{ stat.bb }}</td>
+                  <td>{{ stat.so }}</td>
+                  <td>{{ stat.gidp }}</td>
+                  <td>{{ stat.hbp }}</td>
+                  <td>{{ stat.sac }}</td>
+                  <td>{{ stat.ibb }}</td>
+                </tr>
+              </tbody>
+              <tfoot></tfoot>
+            </table>
+          </div>
         </div>
-
+      </div>
+      <!-- Pitching -->
+      <div class="row">
         <!-- Away Pitching -->
-        <h3 id="awayteam-pitching-header">{{ awayTeamName }} Pitching</h3>
-        <div class="table-responsive-xl">
-          <table class="table table-sm table-striped" style="max-width: 50rem" id="away-pitching">
-            <thead class="thead-dark">
-              <tr>
-                <th>Player</th>
-                <th>W</th>
-                <th>L</th>
-                <th>SV</th>
-                <th>HD</th>
-                <th>BSV</th>
-                <th>IP</th>
-                <th>H</th>
-                <th>R</th>
-                <th>ER</th>
-                <th>HR</th>
-                <th>BB</th>
-                <th>SO</th>
-                <th>HBP</th>
-                <th>BK</th>
-                <th>WP</th>
-              </tr>
-            </thead>
-            <tbody id="awayteam-pitching-table">
-              <tr v-for="stat in awayTeamPitchingStats" :key="stat.player.name">
-                <td>
-                  <RouterLink
-                    :to="{ name: 'player', params: { seasonNumber: seasonNumber, playerName: stat.player.name } }">
-                    {{ stat.player.name }}
-                  </RouterLink>
-                </td>
-                <td>{{ stat.win }}</td>
-                <td>{{ stat.loss }}</td>
-                <td>{{ stat.save }}</td>
-                <td>{{ stat.hold }}</td>
-                <td>{{ stat.bsave }}</td>
-                <td>{{ outsToInnings(stat) }}</td>
-                <td>{{ stat.hits }}</td>
-                <td>{{ stat.run }}</td>
-                <td>{{ stat.e_run }}</td>
-                <td>{{ stat.hr }}</td>
-                <td>{{ stat.bb }}</td>
-                <td>{{ stat.so }}</td>
-                <td>{{ stat.hbp }}</td>
-                <td>{{ stat.balk }}</td>
-                <td>{{ stat.wp }}</td>
-              </tr>
-            </tbody>
-            <tfoot></tfoot>
-          </table>
+        <div class="col-xl-6">
+          <h3 id="awayteam-pitching-header">{{ awayTeamName }} Pitching</h3>
+          <div class="table-responsive-xl">
+            <table class="table table-sm table-striped" style="max-width: 50rem" id="away-pitching">
+              <thead class="thead-dark">
+                <tr>
+                  <th>Player</th>
+                  <th>W</th>
+                  <th>L</th>
+                  <th>SV</th>
+                  <th>HD</th>
+                  <th>BSV</th>
+                  <th>IP</th>
+                  <th>H</th>
+                  <th>R</th>
+                  <th>ER</th>
+                  <th>HR</th>
+                  <th>BB</th>
+                  <th>SO</th>
+                  <th>HBP</th>
+                  <th>BK</th>
+                  <th>WP</th>
+                </tr>
+              </thead>
+              <tbody id="awayteam-pitching-table">
+                <tr v-for="stat in awayTeamPitchingStats" :key="stat.player.name">
+                  <td>
+                    <RouterLink
+                      :to="{ name: 'player', params: { seasonNumber: seasonNumber, playerName: stat.player.name } }">
+                      {{ stat.player.name }}
+                    </RouterLink>
+                  </td>
+                  <td>{{ stat.win }}</td>
+                  <td>{{ stat.loss }}</td>
+                  <td>{{ stat.save }}</td>
+                  <td>{{ stat.hold }}</td>
+                  <td>{{ stat.bsave }}</td>
+                  <td>{{ outsToInnings(stat) }}</td>
+                  <td>{{ stat.hits }}</td>
+                  <td>{{ stat.run }}</td>
+                  <td>{{ stat.e_run }}</td>
+                  <td>{{ stat.hr }}</td>
+                  <td>{{ stat.bb }}</td>
+                  <td>{{ stat.so }}</td>
+                  <td>{{ stat.hbp }}</td>
+                  <td>{{ stat.balk }}</td>
+                  <td>{{ stat.wp }}</td>
+                </tr>
+              </tbody>
+              <tfoot></tfoot>
+            </table>
+          </div>
+        </div>
+        <!-- Home Pitching -->
+        <div class="col-xl-6">
+          <h3 id="hometeam-pitching-header">{{ homeTeamName }} Pitching</h3>
+          <div class="table-responsive-xl">
+            <table class="table table-sm table-striped" style="max-width: 50rem" id="home-pitching">
+              <thead class="thead-dark">
+                <tr>
+                  <th>Player</th>
+                  <th>W</th>
+                  <th>L</th>
+                  <th>SV</th>
+                  <th>HD</th>
+                  <th>BSV</th>
+                  <th>IP</th>
+                  <th>H</th>
+                  <th>R</th>
+                  <th>ER</th>
+                  <th>HR</th>
+                  <th>BB</th>
+                  <th>SO</th>
+                  <th>HBP</th>
+                  <th>BK</th>
+                  <th>WP</th>
+                </tr>
+              </thead>
+              <tbody id="hometeam-pitching-table">
+                <tr v-for="stat in homeTeamPitchingStats" :key="stat.player.name">
+                  <td>
+                    <RouterLink
+                      :to="{ name: 'player', params: { seasonNumber: seasonNumber, playerName: stat.player.name } }">
+                      {{ stat.player.name }}
+                    </RouterLink>
+                  </td>
+                  <td>{{ stat.win }}</td>
+                  <td>{{ stat.loss }}</td>
+                  <td>{{ stat.save }}</td>
+                  <td>{{ stat.hold }}</td>
+                  <td>{{ stat.bsave }}</td>
+                  <td>{{ outsToInnings(stat) }}</td>
+                  <td>{{ stat.hits }}</td>
+                  <td>{{ stat.run }}</td>
+                  <td>{{ stat.e_run }}</td>
+                  <td>{{ stat.hr }}</td>
+                  <td>{{ stat.bb }}</td>
+                  <td>{{ stat.so }}</td>
+                  <td>{{ stat.hbp }}</td>
+                  <td>{{ stat.balk }}</td>
+                  <td>{{ stat.wp }}</td>
+                </tr>
+              </tbody>
+              <tfoot></tfoot>
+            </table>
+          </div>
         </div>
       </div>
 
-      <!-- Home Team -->
-      <div class="col-xl-6">
-
-        <!-- Home Batting -->
-        <h3 id="hometeam-batting-header">{{ homeTeamName }} Batting</h3>
-        <div class="table-responsive-xl">
-          <table class="table table-sm table-striped" id="home-batting">
-            <thead class="thead-dark">
-              <tr>
-                <th>Player</th>
-                <th>PA</th>
-                <th>AB</th>
-                <th>R</th>
-                <th>H</th>
-                <th>2B</th>
-                <th>3B</th>
-                <th>HR</th>
-                <th>RBI</th>
-                <th>SB</th>
-                <th>CS</th>
-                <th>BB</th>
-                <th>SO</th>
-                <th>GIDP</th>
-                <th>HBP</th>
-                <th>SAC</th>
-                <th>IBB</th>
-              </tr>
-            </thead>
-            <tbody id="hometeam-batting-table">
-              <tr v-for="stat in homeTeamBattingStats" :key="stat.player.name">
-                <td>
-                  <RouterLink
-                    :to="{ name: 'player', params: { seasonNumber: seasonNumber, playerName: stat.player.name } }">
-                    {{ stat.player.name }}
-                  </RouterLink>
-                </td>
-                <td>{{ stat.pa }}</td>
-                <td>{{ stat.ab }}</td>
-                <td>{{ stat.run }}</td>
-                <td>{{ stat.hit }}</td>
-                <td>{{ stat.double }}</td>
-                <td>{{ stat.triple }}</td>
-                <td>{{ stat.hr }}</td>
-                <td>{{ stat.rbi }}</td>
-                <td>{{ stat.sb }}</td>
-                <td>{{ stat.cs }}</td>
-                <td>{{ stat.bb }}</td>
-                <td>{{ stat.so }}</td>
-                <td>{{ stat.gidp }}</td>
-                <td>{{ stat.hbp }}</td>
-                <td>{{ stat.sac }}</td>
-                <td>{{ stat.ibb }}</td>
-              </tr>
-            </tbody>
-            <tfoot></tfoot>
-          </table>
+      <!-- Fielding -->
+      <div class="row">
+        <!-- Away Fielding -->
+        <div class="col-xl-6">
+          <h3 id="awayteam-fielding-header">{{ awayTeamName }} Fielding</h3>
+          <div class="table-responsive-xl">
+            <table class="table table-sm table-striped" style="max-width: 25rem" id="away-fielding">
+              <thead class="thead-dark">
+                <tr>
+                  <th>Player</th>
+                  <th>X-Ch</th>
+                  <th>X-Hit</th>
+                  <th>Error</th>
+                  <th>PB</th>
+                  <th>SBa</th>
+                  <th>CSc</th>
+                </tr>
+              </thead>
+              <tbody id="awayteam-fielding-table">
+                <tr v-for="stat in awayTeamFieldingStats" :key="stat.player.name">
+                  <td>
+                    <RouterLink
+                      :to="{ name: 'player', params: { seasonNumber: seasonNumber, playerName: stat.player.name } }">
+                      {{ stat.player.name }}
+                    </RouterLink>
+                  </td>
+                  <td>{{ stat.xCheckCount }}</td>
+                  <td>{{ stat.hit }}</td>
+                  <td>{{ stat.error }}</td>
+                  <td>{{ stat.passedBallCount }}</td>
+                  <td>{{ stat.stolenBaseCheckCount }}</td>
+                  <td>{{ stat.caughtStealingCount }}</td>
+                </tr>
+              </tbody>
+              <tfoot></tfoot>
+            </table>
+          </div>
         </div>
 
-        <!-- Home Fielding -->
-        <h3 id="hometeam-fielding-header">{{ homeTeamName }} Fielding</h3>
-        <div class="table-responsive-xl">
-          <table class="table table-sm table-striped" style="max-width: 25rem" id="home-fielding">
-            <thead class="thead-dark">
-              <tr>
-                <th>Player</th>
-                <th>X-Ch</th>
-                <th>X-Hit</th>
-                <th>Error</th>
-                <th>PB</th>
-                <th>SBa</th>
-                <th>CSc</th>
-              </tr>
-            </thead>
-            <tbody id="hometeam-fielding-table">
-              <tr v-for="stat in homeTeamFieldingStats" :key="stat.player.name">
-                <td>
-                  <RouterLink
-                    :to="{ name: 'player', params: { seasonNumber: seasonNumber, playerName: stat.player.name } }">
-                    {{ stat.player.name }}
-                  </RouterLink>
-                </td>
-                <td>{{ stat.xCheckCount }}</td>
-                <td>{{ stat.hit }}</td>
-                <td>{{ stat.error }}</td>
-                <td>{{ stat.passedBallCount }}</td>
-                <td>{{ stat.stolenBaseCheckCount }}</td>
-                <td>{{ stat.caughtStealingCount }}</td>
-              </tr>
-            </tbody>
-            <tfoot></tfoot>
-          </table>
-        </div>
-
-        <!-- Home Pitching -->
-        <h3 id="hometeam-pitching-header">{{ homeTeamName }} Pitching</h3>
-        <div class="table-responsive-xl">
-          <table class="table table-sm table-striped" style="max-width: 50rem" id="home-pitching">
-            <thead class="thead-dark">
-              <tr>
-                <th>Player</th>
-                <th>W</th>
-                <th>L</th>
-                <th>SV</th>
-                <th>HD</th>
-                <th>BSV</th>
-                <th>IP</th>
-                <th>H</th>
-                <th>R</th>
-                <th>ER</th>
-                <th>HR</th>
-                <th>BB</th>
-                <th>SO</th>
-                <th>HBP</th>
-                <th>BK</th>
-                <th>WP</th>
-              </tr>
-            </thead>
-            <tbody id="hometeam-pitching-table">
-              <tr v-for="stat in homeTeamPitchingStats" :key="stat.player.name">
-                <td>
-                  <RouterLink
-                    :to="{ name: 'player', params: { seasonNumber: seasonNumber, playerName: stat.player.name } }">
-                    {{ stat.player.name }}
-                  </RouterLink>
-                </td>
-                <td>{{ stat.win }}</td>
-                <td>{{ stat.loss }}</td>
-                <td>{{ stat.save }}</td>
-                <td>{{ stat.hold }}</td>
-                <td>{{ stat.bsave }}</td>
-                <td>{{ outsToInnings(stat) }}</td>
-                <td>{{ stat.hits }}</td>
-                <td>{{ stat.run }}</td>
-                <td>{{ stat.e_run }}</td>
-                <td>{{ stat.hr }}</td>
-                <td>{{ stat.bb }}</td>
-                <td>{{ stat.so }}</td>
-                <td>{{ stat.hbp }}</td>
-                <td>{{ stat.balk }}</td>
-                <td>{{ stat.wp }}</td>
-              </tr>
-            </tbody>
-            <tfoot></tfoot>
-          </table>
+        <!-- Home Team -->
+        <div class="col-xl-6">
+          <!-- Home Fielding -->
+          <h3 id="hometeam-fielding-header">{{ homeTeamName }} Fielding</h3>
+          <div class="table-responsive-xl">
+            <table class="table table-sm table-striped" style="max-width: 25rem" id="home-fielding">
+              <thead class="thead-dark">
+                <tr>
+                  <th>Player</th>
+                  <th>X-Ch</th>
+                  <th>X-Hit</th>
+                  <th>Error</th>
+                  <th>PB</th>
+                  <th>SBa</th>
+                  <th>CSc</th>
+                </tr>
+              </thead>
+              <tbody id="hometeam-fielding-table">
+                <tr v-for="stat in homeTeamFieldingStats" :key="stat.player.name">
+                  <td>
+                    <RouterLink
+                      :to="{ name: 'player', params: { seasonNumber: seasonNumber, playerName: stat.player.name } }">
+                      {{ stat.player.name }}
+                    </RouterLink>
+                  </td>
+                  <td>{{ stat.xCheckCount }}</td>
+                  <td>{{ stat.hit }}</td>
+                  <td>{{ stat.error }}</td>
+                  <td>{{ stat.passedBallCount }}</td>
+                  <td>{{ stat.stolenBaseCheckCount }}</td>
+                  <td>{{ stat.caughtStealingCount }}</td>
+                </tr>
+              </tbody>
+              <tfoot></tfoot>
+            </table>
+          </div>
         </div>
       </div>
     </div>