fix: timer of the live games if the match is still loading

client/src/components/Match/LiveMatch.vue

@@ -7,7 +7,7 @@
           <span>V</span>
           <span class="ml-4 -mt-3">S</span>
         </div>
-        <div class="pb-2 text-blue-200">{{ gameLength|secToTime(true) }}</div>
+        <div class="pb-2 text-blue-200">{{ displayStartTime }}</div>
       </div>
       <ul class="w-1/2 text-left">
         <li

client/src/mixins/liveGame.js

@@ -11,10 +11,16 @@ export const liveGame = {
 
   computed: {
     allyTeam() {
-      return this.current.participants.filter(p => p.teamId === this.teamColor)
+      return this.current && this.current.participants ? this.current.participants.filter(p => p.teamId === this.teamColor) : []
+    },
+    displayStartTime() {
+      if (this.current.gameStartTime === 0) {
+        return 'Not started yet'
+      }
+      return this.$options.filters.secToTime(this.gameLength, true)
     },
     enemyTeam() {
-      return this.current.participants.filter(p => p.teamId !== this.teamColor)
+      return this.current && this.current.participants ? this.current.participants.filter(p => p.teamId !== this.teamColor) : []
     },
     gamemode() {
       return gameModes[this.current.gameQueueConfigId]
@@ -27,7 +33,7 @@ export const liveGame = {
     },
     ...mapState({
       account: state => state.summoner.basic.account,
-      current: state => state.summoner.basic.current,
+      current: state => state.summoner.live.match,
     })
   },
 

client/src/store/modules/summoner.js

@@ -6,10 +6,8 @@ export const namespaced = true
 export const state = {
   basic: {
     account: {},
-    current: {},
     matchList: [],
     ranked: {},
-    playing: false,
     status: '',
   },
   overview: {
@@ -29,7 +27,8 @@ export const state = {
   },
   live: {
     match: {},
-    liveLoaded: false
+    liveLoaded: false,
+    playing: false,
   },
 }
 
@@ -78,11 +77,11 @@ export const mutations = {
   },
   SUMMONER_FOUND(state, infos) {
     state.basic.account = infos.account
-    state.basic.current = infos.current
     state.basic.matchList = infos.matchList
     state.basic.ranked = infos.ranked
-    state.basic.playing = infos.playing
     state.basic.status = 'found'
+    state.live.match = infos.current
+    state.live.playing = infos.playing
   },
   SUMMONER_NOT_FOUND(state) {
     state.basic.status = 'error'
@@ -169,7 +168,7 @@ export const getters = {
   matchesLoading: state => state.overview.matchesLoading,
   moreMatchesToFetch: state => state.overview.matchIndex < state.basic.matchList.length,
   overviewLoaded: state => state.overview.loaded,
-  playing: state => state.basic.playing,
+  playing: state => state.live.playing,
   summonerFound: state => state.basic.status === 'found',
   summonerNotFound: state => state.basic.status === 'error',
   summonerLoading: state => state.basic.status === 'loading',

client/src/views/Summoner.vue

@@ -6,7 +6,7 @@
       <SummonerMates />
     </div>
     <div class="w-9/12">
-      <div v-if="basic.current">
+      <div v-if="current">
         <LiveMatch />
       </div>
       <div v-if="overview.matches.length">
@@ -55,7 +55,7 @@ export default {
 
   computed: {
     ...mapState({
-      basic: state => state.summoner.basic,
+      current: state => state.summoner.live.match,
       overview: state => state.summoner.overview
     }),
     ...mapGetters('summoner', ['matchesLoading', 'moreMatchesToFetch', 'overviewLoaded', 'summonerFound'])

client/src/views/SummonerLive.vue

@@ -4,7 +4,7 @@
       <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>
+        <div>{{ displayStartTime }}</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"
@@ -39,25 +39,18 @@ export default {
   mixins: [liveGame],
 
   computed: {
-    allyTeam() {
-      return this.live.participants ? this.live.participants.filter(p => p.teamId === this.teamColor) : []
-    },
-    enemyTeam() {
-      return this.live.participants ? this.live.participants.filter(p => p.teamId !== this.teamColor) : []
-    },
     ...mapGetters('summoner', ['summonerLoading', 'summonerFound']),
     ...mapState({
-      current: state => state.summoner.basic.current,
       live: state => state.summoner.live.match,
       liveLoaded: state => state.summoner.live.liveLoaded,
-      playing: state => state.summoner.basic.playing,
+      playing: state => state.summoner.live.playing,
     })
   },
 
   watch: {
     summonerFound() {
       this.fetchData()
-      this.gameLength = this.current ? this.gameStartTime : 0
+      this.gameLength = this.live ? this.gameStartTime : 0
     }
   },