cal/sba-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #37 from pgiro/game-view-updates

Browse Source 
Game view updates
This commit is contained in:
Peter 2024-11-14 17:00:16 -06:00 committed by GitHub
commit 04d6b3bf95
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 131 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
src/views/GameView.vue
View File

@ -3,24 +3,78 @@
<!-- Teams and Score -->
<div class="row">
<div class="col-sm-2">
<div class="col-sm-3">
<RouterLink v-if="adjacentGames?.team1prevGame" :to="{
name: 'games', params: {
seasonNumber: adjacentGames!.team1prevGame!.season,
weekNumber: adjacentGames!.team1prevGame!.week,
gameNumber: adjacentGames!.team1prevGame!.game_num,
team1Abbreviation: adjacentGames!.team1prevGame!.away_team.abbrev,
team2Abbreviation: adjacentGames!.team1prevGame!.home_team.abbrev
}
}" v-slot="{ href, navigate }">
<button :href="href" @click="navigate" class="btn btn-sm btn-primary mx-1"
:title="`Previous ${awayTeamAbbreviation} Game`">
&lt;&lt;
</button>
</RouterLink>
<RouterLink v-if="awayTeamAbbreviation && awayTeamThumbnail"
:to="{ name: 'team', params: { seasonNumber: seasonNumber, teamAbbreviation: awayTeamAbbreviation } }">
<img id="thumbnail" height="90" style="float:right; vertical-align:middle; max-height:100%;"
:src="awayTeamThumbnail" />
<img id="thumbnail" height="90" style="vertical-align:middle; max-height:100%;" :src="awayTeamThumbnail" />
</RouterLink>
<RouterLink v-if="adjacentGames?.team1nextGame" :to="{
name: 'games', params: {
seasonNumber: adjacentGames!.team1nextGame!.season,
weekNumber: adjacentGames!.team1nextGame!.week,
gameNumber: adjacentGames!.team1nextGame!.game_num,
team1Abbreviation: adjacentGames!.team1nextGame!.away_team.abbrev,
team2Abbreviation: adjacentGames!.team1nextGame!.home_team.abbrev
}
}" v-slot="{ href, navigate }">
<button :href="href" @click="navigate" class="btn btn-sm btn-primary mx-1"
:title="`Next ${awayTeamAbbreviation} Game`">
&gt;&gt;
</button>
</RouterLink>
</div>
<div class="col-sm">
<div class="col-sm-6">
<h1 class="text-center">{{ finalScore }}</h1>
<h2 class="text-center">
Season {{ seasonNumber }} - Week {{ weekNumber }} - Game {{ gameNumber }}
</h2>
</div>
<div class="col-sm-2">
<div class="col-sm-3">
<RouterLink v-if="adjacentGames?.team2prevGame" :to="{
name: 'games', params: {
seasonNumber: adjacentGames!.team2prevGame!.season,
weekNumber: adjacentGames!.team2prevGame!.week,
gameNumber: adjacentGames!.team2prevGame!.game_num,
team1Abbreviation: adjacentGames!.team2prevGame!.away_team.abbrev,
team2Abbreviation: adjacentGames!.team2prevGame!.home_team.abbrev
}
}" v-slot="{ href, navigate }">
<button :href="href" @click="navigate" class="btn btn-sm btn-primary mx-1"
:title="`Previous ${homeTeamAbbreviation} Game`">
&lt;&lt;
</button>
</RouterLink>
<RouterLink v-if="homeTeamAbbreviation && homeTeamThumbnail"
:to="{ name: 'team', params: { seasonNumber: seasonNumber, teamAbbreviation: homeTeamAbbreviation } }">
<img id="thumbnail" height="90" style="float:right; vertical-align:middle; max-height:100%;"
:src="homeTeamThumbnail" />
<img id="thumbnail" height="90" style="vertical-align:middle; max-height:100%;" :src="homeTeamThumbnail" />
</RouterLink>
<RouterLink v-if="adjacentGames?.team2nextGame" :to="{
name: 'games', params: {
seasonNumber: adjacentGames!.team2nextGame!.season,
weekNumber: adjacentGames!.team2nextGame!.week,
gameNumber: adjacentGames!.team2nextGame!.game_num,
team1Abbreviation: adjacentGames!.team2nextGame!.away_team.abbrev,
team2Abbreviation: adjacentGames!.team2nextGame!.home_team.abbrev
}
}" v-slot="{ href, navigate }">
<button :href="href" @click="navigate" class="btn btn-sm btn-primary mx-1"
:title="`Next ${homeTeamAbbreviation} Game`">
&gt;&gt;
</button>
</RouterLink>
</div>
</div>
@ -351,11 +405,18 @@ import type { Game, Team } from '@/services/apiResponseTypes'
import { isDiscordAuthenticated } from '@/services/authenticationService'
import { fetchBattingStatsBySeries, type BattingStat } from '@/services/battingStatsService'
import { fetchFieldingStatsBySeries, type FieldingStat } from '@/services/fieldingStatsService'
import { fetchSingleGame } from '@/services/gameService'
import { fetchGamesBySeasonAndTeamId, fetchSingleGame } from '@/services/gameService'
import { fetchPitchingStatsBySeries, type PitchingStat } from '@/services/pitchingStatsService'
import { fetchTeam } from '@/services/teamsService'
import { outsToInnings } from '@/services/utilities'
interface AdjacentGameHelper {
team1prevGame: Game | undefined
team1nextGame: Game | undefined
team2prevGame: Game | undefined
team2nextGame: Game | undefined
}
export default {
name: 'GameView',
data() {
@ -367,6 +428,7 @@ export default {
battingStats: [] as BattingStat[],
pitchingStats: [] as PitchingStat[],
fieldingStats: [] as FieldingStat[],
adjacentGames: undefined as AdjacentGameHelper | undefined,
}
},
props: {
@ -457,13 +519,44 @@ export default {
decisionStrings.push(`Blown Save${blownSaves.length > 1 ? 's' : ''}: ${blownSaves.map(h => h.player.name).join(', ')}`)
}
return decisionStrings.join(' | ')
}
},
created() {
this.fetchData()
},
watch: {
seasonNumber(newValue, oldValue) {
if (newValue !== oldValue) {
this.clearData()
this.fetchData()
}
},
weekNumber(newValue, oldValue) {
if (newValue !== oldValue) {
this.clearData()
this.fetchData()
}
},
gameNumber(newValue, oldValue) {
if (newValue !== oldValue) {
this.clearData()
this.fetchData()
}
},
team1Abbreviation(newValue, oldValue) {
if (newValue !== oldValue) {
this.clearData()
this.fetchData()
}
},
team2Abbreviation(newValue, oldValue) {
if (newValue !== oldValue) {
this.clearData()
this.fetchData()
}
},
},
methods: {
async fetchData(): Promise<void> {
this.isAuthenticated = await isDiscordAuthenticated()
@ -477,6 +570,34 @@ export default {
this.battingStats = await fetchBattingStatsBySeries(this.seasonNumber, this.weekNumber, this.team1.id, this.team2.id)
this.pitchingStats = await fetchPitchingStatsBySeries(this.seasonNumber, this.weekNumber, this.team1.id, this.team2.id)
this.fieldingStats = await fetchFieldingStatsBySeries(this.seasonNumber, this.weekNumber, this.team1.id, this.team2.id)
await this.fetchAdjacentGames()
},
async fetchAdjacentGames(): Promise<void> {
const team1Games = await fetchGamesBySeasonAndTeamId(this.seasonNumber, this.team1!.id)
const team2Games = await fetchGamesBySeasonAndTeamId(this.seasonNumber, this.team2!.id)
const prevGameNumber = this.gameNumber === 1 ? 4 : this.gameNumber - 1
const nextGameNumber = this.gameNumber === 4 ? 1 : this.gameNumber + 1
const prevWeekNumber = this.gameNumber === 1 ? this.weekNumber - 1 : this.weekNumber
const nextWeekNumber = this.gameNumber === 4 ? this.weekNumber + 1 : this.weekNumber
this.adjacentGames = {
team1nextGame: team1Games.find(g => g.week === nextWeekNumber && g.game_num === nextGameNumber),
team1prevGame: team1Games.find(g => g.week === prevWeekNumber && g.game_num === prevGameNumber),
team2nextGame: team2Games.find(g => g.week === nextWeekNumber && g.game_num === nextGameNumber),
team2prevGame: team2Games.find(g => g.week === prevWeekNumber && g.game_num === prevGameNumber)
}
},
clearData(): void {
this.team1 = undefined
this.team2 = undefined
this.game = undefined
this.battingStats = []
this.pitchingStats = []
this.fieldingStats = []
this.adjacentGames = undefined
},
outsToInnings(stat: PitchingStat): string {
return outsToInnings(stat)