From e823ba8ff29eee2ae1d908014169ee83ac30b1e5 Mon Sep 17 00:00:00 2001
From: Peter <peterlgirouard@gmail.com>
Date: Sun, 10 Nov 2024 20:05:13 -0600
Subject: [PATCH 1/5] Fetch adjacent games

---
 src/views/GameView.vue | 30 ++++++++++++++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/views/GameView.vue b/src/views/GameView.vue
index fdef8ea..92d7b35 100644
--- a/src/views/GameView.vue
+++ b/src/views/GameView.vue
@@ -351,11 +351,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
+  team1nextGame: Game
+  team2prevGame: Game
+  team2nextGame: Game
+}
+
 export default {
   name: 'GameView',
   data() {
@@ -367,6 +374,7 @@ export default {
       battingStats: [] as BattingStat[],
       pitchingStats: [] as PitchingStat[],
       fieldingStats: [] as FieldingStat[],
+      adjacentGames: undefined as AdjacentGameHelper | undefined,
     }
   },
   props: {
@@ -457,7 +465,6 @@ export default {
         decisionStrings.push(`Blown Save${blownSaves.length > 1 ? 's' : ''}: ${blownSaves.map(h => h.player.name).join(', ')}`)
       }
 
-
       return decisionStrings.join(' | ')
     }
   },
@@ -477,6 +484,25 @@ 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)!
+      }
     },
     outsToInnings(stat: PitchingStat): string {
       return outsToInnings(stat)

From 228ccd2f3de755cb99dc5290b1c20974cb594e11 Mon Sep 17 00:00:00 2001
From: Peter <peterlgirouard@gmail.com>
Date: Sun, 10 Nov 2024 20:54:36 -0600
Subject: [PATCH 2/5] Previous button for team 1, with watchers to update page
 data

---
 src/views/GameView.vue | 90 +++++++++++++++++++++++++++++++++---------
 1 file changed, 72 insertions(+), 18 deletions(-)

diff --git a/src/views/GameView.vue b/src/views/GameView.vue
index 92d7b35..ff235f7 100644
--- a/src/views/GameView.vue
+++ b/src/views/GameView.vue
@@ -3,23 +3,36 @@
 
     <!-- Teams and Score -->
     <div class="row">
-      <div class="col-sm-2">
-        <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" />
-        </RouterLink>
+      <div class="col-sm-3">
+        <div class="row">
+          <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
+            }
+          }">
+            PREVIOUS
+          </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" />
+          </RouterLink>
+        </div>
       </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="homeTeamAbbreviation && homeTeamThumbnail"
           :to="{ name: 'team', params: { seasonNumber: seasonNumber, teamAbbreviation: homeTeamAbbreviation } }">
-          <img id="thumbnail" height="90" style="float:right; vertical-align:middle; max-height:100%;"
+          <img id="thumbnail" height="90" style="float:left; vertical-align:middle; max-height:100%;"
             :src="homeTeamThumbnail" />
         </RouterLink>
       </div>
@@ -357,10 +370,10 @@ import { fetchTeam } from '@/services/teamsService'
 import { outsToInnings } from '@/services/utilities'
 
 interface AdjacentGameHelper {
-  team1prevGame: Game
-  team1nextGame: Game
-  team2prevGame: Game
-  team2nextGame: Game
+  team1prevGame: Game | undefined
+  team1nextGame: Game | undefined
+  team2prevGame: Game | undefined
+  team2nextGame: Game | undefined
 }
 
 export default {
@@ -471,6 +484,38 @@ export default {
   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()
@@ -498,15 +543,24 @@ export default {
       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)!
+        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)
     },
   }
 }
-</script>
\ No newline at end of file
+</script>

From 885d905c5c3bc8d34d5b143fb0ca78768edb516f Mon Sep 17 00:00:00 2001
From: Peter <peterlgirouard@gmail.com>
Date: Sun, 10 Nov 2024 21:15:20 -0600
Subject: [PATCH 3/5] Add all prev/next buttons - naive implementation for
 navigating to next game... could be improved

---
 src/views/GameView.vue | 69 ++++++++++++++++++++++++++++++------------
 1 file changed, 49 insertions(+), 20 deletions(-)

diff --git a/src/views/GameView.vue b/src/views/GameView.vue
index ff235f7..eb2e0a6 100644
--- a/src/views/GameView.vue
+++ b/src/views/GameView.vue
@@ -4,24 +4,32 @@
     <!-- Teams and Score -->
     <div class="row">
       <div class="col-sm-3">
-        <div class="row">
-          <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
-            }
-          }">
-            PREVIOUS
-          </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" />
-          </RouterLink>
-        </div>
+        <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
+          }
+        }">
+          Previous {{ awayTeamAbbreviation }} Game
+        </RouterLink>
+        <RouterLink v-if="awayTeamAbbreviation && awayTeamThumbnail"
+          :to="{ name: 'team', params: { seasonNumber: seasonNumber, teamAbbreviation: awayTeamAbbreviation } }">
+          <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
+          }
+        }">
+          Next {{ awayTeamAbbreviation }} Game
+        </RouterLink>
       </div>
       <div class="col-sm-6">
         <h1 class="text-center">{{ finalScore }}</h1>
@@ -30,10 +38,31 @@
         </h2>
       </div>
       <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
+          }
+        }">
+          Previous {{ homeTeamAbbreviation }} Game
+        </RouterLink>
         <RouterLink v-if="homeTeamAbbreviation && homeTeamThumbnail"
           :to="{ name: 'team', params: { seasonNumber: seasonNumber, teamAbbreviation: homeTeamAbbreviation } }">
-          <img id="thumbnail" height="90" style="float:left; 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
+          }
+        }">
+          Next {{ homeTeamAbbreviation }} Game
         </RouterLink>
       </div>
     </div>

From e69b5691e7eb77ef294906199e0e615235d760f2 Mon Sep 17 00:00:00 2001
From: Peter <peterlgirouard@gmail.com>
Date: Sun, 10 Nov 2024 21:31:22 -0600
Subject: [PATCH 4/5] Use buttons

---
 src/views/GameView.vue | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/views/GameView.vue b/src/views/GameView.vue
index eb2e0a6..5643c79 100644
--- a/src/views/GameView.vue
+++ b/src/views/GameView.vue
@@ -12,8 +12,10 @@
             team1Abbreviation: adjacentGames!.team1prevGame!.away_team.abbrev,
             team2Abbreviation: adjacentGames!.team1prevGame!.home_team.abbrev
           }
-        }">
-          Previous {{ awayTeamAbbreviation }} Game
+        }" v-slot="{ href, navigate }">
+          <button :href="href" @click="navigate">
+            &lt;&lt;Prev
+          </button>
         </RouterLink>
         <RouterLink v-if="awayTeamAbbreviation && awayTeamThumbnail"
           :to="{ name: 'team', params: { seasonNumber: seasonNumber, teamAbbreviation: awayTeamAbbreviation } }">
@@ -27,8 +29,10 @@
             team1Abbreviation: adjacentGames!.team1nextGame!.away_team.abbrev,
             team2Abbreviation: adjacentGames!.team1nextGame!.home_team.abbrev
           }
-        }">
-          Next {{ awayTeamAbbreviation }} Game
+        }" v-slot="{ href, navigate }">
+          <button :href="href" @click="navigate">
+            Next&gt;&gt;
+          </button>
         </RouterLink>
       </div>
       <div class="col-sm-6">
@@ -46,8 +50,10 @@
             team1Abbreviation: adjacentGames!.team2prevGame!.away_team.abbrev,
             team2Abbreviation: adjacentGames!.team2prevGame!.home_team.abbrev
           }
-        }">
-          Previous {{ homeTeamAbbreviation }} Game
+        }" v-slot="{ href, navigate }">
+          <button :href="href" @click="navigate">
+            &lt;&lt;Prev
+          </button>
         </RouterLink>
         <RouterLink v-if="homeTeamAbbreviation && homeTeamThumbnail"
           :to="{ name: 'team', params: { seasonNumber: seasonNumber, teamAbbreviation: homeTeamAbbreviation } }">
@@ -61,8 +67,10 @@
             team1Abbreviation: adjacentGames!.team2nextGame!.away_team.abbrev,
             team2Abbreviation: adjacentGames!.team2nextGame!.home_team.abbrev
           }
-        }">
-          Next {{ homeTeamAbbreviation }} Game
+        }" v-slot="{ href, navigate }">
+          <button :href="href" @click="navigate">
+            Next&gt;&gt;
+          </button>
         </RouterLink>
       </div>
     </div>

From c831e4596dc4309fa9309fff9bf5fc76482c8cab Mon Sep 17 00:00:00 2001
From: Peter <peterlgirouard@gmail.com>
Date: Mon, 11 Nov 2024 18:48:08 -0600
Subject: [PATCH 5/5] Simplify prev/next buttons, and add tooltip

---
 src/views/GameView.vue | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/views/GameView.vue b/src/views/GameView.vue
index 5643c79..c9df6ad 100644
--- a/src/views/GameView.vue
+++ b/src/views/GameView.vue
@@ -13,8 +13,9 @@
             team2Abbreviation: adjacentGames!.team1prevGame!.home_team.abbrev
           }
         }" v-slot="{ href, navigate }">
-          <button :href="href" @click="navigate">
-            &lt;&lt;Prev
+          <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"
@@ -30,8 +31,9 @@
             team2Abbreviation: adjacentGames!.team1nextGame!.home_team.abbrev
           }
         }" v-slot="{ href, navigate }">
-          <button :href="href" @click="navigate">
-            Next&gt;&gt;
+          <button :href="href" @click="navigate" class="btn btn-sm btn-primary mx-1"
+            :title="`Next ${awayTeamAbbreviation} Game`">
+            &gt;&gt;
           </button>
         </RouterLink>
       </div>
@@ -51,8 +53,9 @@
             team2Abbreviation: adjacentGames!.team2prevGame!.home_team.abbrev
           }
         }" v-slot="{ href, navigate }">
-          <button :href="href" @click="navigate">
-            &lt;&lt;Prev
+          <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"
@@ -68,8 +71,9 @@
             team2Abbreviation: adjacentGames!.team2nextGame!.home_team.abbrev
           }
         }" v-slot="{ href, navigate }">
-          <button :href="href" @click="navigate">
-            Next&gt;&gt;
+          <button :href="href" @click="navigate" class="btn btn-sm btn-primary mx-1"
+            :title="`Next ${homeTeamAbbreviation} Game`">
+            &gt;&gt;
           </button>
         </RouterLink>
       </div>