feat: add reload button on live game tab

client/src/mixins/liveGame.js

@@ -19,6 +19,9 @@ export const liveGame = {
     gamemode() {
       return gameModes[this.current.gameQueueConfigId]
     },
+    gameStartTime() {
+      return (new Date() - new Date(this.current.gameStartTime)) / 1000
+    },
     teamColor() {
       return this.current.participants.find(p => p.summonerId === this.account.id).teamId
     },
@@ -29,7 +32,7 @@ export const liveGame = {
   },
 
   created() {
-    this.gameLength = this.current ? this.current.gameLength : 0
+    this.gameLength = this.current ? this.gameStartTime : 0
 
     setInterval(() => {
       this.gameLength++

client/src/store/modules/summoner.js

@@ -52,6 +52,9 @@ export const mutations = {
     state.live.match = live
     state.live.liveLoaded = true
   },
+  LIVE_NOT_FOUND(state) {
+    state.live.liveLoaded = false
+  },
   MATCHES_LOADING(state) {
     state.overview.matchesLoading = true
   },
@@ -124,11 +127,14 @@ export const actions = {
     commit('CHAMPIONS_FOUND', { champions: resp.data })
   },
   async liveMatchRequest({ commit, rootState }) {
+    commit('LIVE_NOT_FOUND')
     const resp = await axios(({ url: 'summoner-live', data: { account: state.basic.account, region: rootState.currentRegion }, method: 'POST' })).catch(() => { })
     console.log('---LIVE---')
     console.log(resp.data)
 
-    commit('LIVE_FOUND', { live: resp.data })
+    if (resp.data) {
+      commit('LIVE_FOUND', { live: resp.data })
+    }
   },
   async moreMatches({ commit }) {
     commit('MATCHES_LOADING')

client/src/views/SummonerLive.vue

@@ -1,14 +1,16 @@
 <template>
   <div key="live-game">
     <div v-if="playing || summonerLoading">
-      <div v-if="playing" class="flex items-center justify-end text-blue-200 text-base">
+      <div v-if="liveLoaded" class="flex items-center justify-end text-blue-200 text-base">
         <div>{{ gamemode.type }} {{ gamemode.name }}</div>
         <div class="mx-2">-</div>
         <div>{{ gameLength|secToTime(true) }}</div>
+        <button
+          @click="liveMatchRequest"
+          class="ml-4 bg-blue-800 px-3 py-1 text-blue-100 rounded-md shadow-md hover:bg-blue-760"
+        >Reload</button>
       </div>
-      <div v-else class="flex items-center justify-end text-blue-200 text-base">
+      <div v-else class="h-8"></div>
-        <div>Loading</div>
-      </div>
 
       <LiveTeam :team="allyTeam" :ally="true" />
       <LiveTeam :team="enemyTeam" :ally="false" class="mt-4" />
@@ -55,7 +57,7 @@ export default {
   watch: {
     summonerFound() {
       this.fetchData()
-      this.gameLength = this.current ? this.current.gameLength : 0
+      this.gameLength = this.current ? this.gameStartTime : 0
     }
   },
 
@@ -64,9 +66,10 @@ export default {
   },
 
   methods: {
-    fetchData() {
+    async fetchData() {
       if (this.playing && !this.liveLoaded && this.summonerFound) {
-        this.liveMatchRequest()
+        await this.liveMatchRequest()
+        this.gameLength = this.gameStartTime
       }
     },
     ...mapActions('summoner', ['liveMatchRequest']),

server/app/Controllers/Http/SummonerController.js

@@ -129,7 +129,7 @@ class SummonerController {
     let currentGame = await Jax.Spectator.summonerID(account.id, region)
 
     if (!currentGame) {
-      response.json(null)
+      return response.json(null)
     }
 
     currentGame = await LiveMatchTransformer.transform(currentGame, { region })