Align batting/pitching/fielding between teams on GameView

This commit is contained in:
Peter 2024-11-09 14:21:12 -06:00
parent 5fa26726ff
commit 849db58deb

View File

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