feat: add some infos about live game on overview tab

client/src/components/Match/LiveMatch.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="ml-4 mt-4 bg-blue-800 rounded-lg overflow-hidden text-sm">
+    <div class="relative w-full flex justify-between">
+      <div class="absolute horizontal-center h-full flex flex-col items-center justify-between">
+        <div class="text-blue-200 text-base leading-loose">{{ gamemode.name }}</div>
+        <div class="vs flex flex-col text-2xl font-bold leading-none">
+          <span>V</span>
+          <span class="ml-4 -mt-3">S</span>
+        </div>
+        <div class="pb-2 text-blue-200">{{ gameLength|secToTime(true) }}</div>
+      </div>
+      <ul class="w-1/2 text-left">
+        <li
+          v-for="(ally, index) in allyTeam"
+          :key="ally.summonerId"
+          :class="index % 2 === 0 ? 'accent-ally' : 'ally'"
+          class="flex items-center px-5 py-1 leading-loose"
+        >
+          <div
+            :style="{backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${ally.championId}.png')`}"
+            class="w-6 h-6 bg-cover bg-center bg-blue-1000 rounded-full"
+          ></div>
+          <router-link
+            v-if="!ally.bot"
+            :to="{ name: 'summoner', params: { region: $route.params.region, name: ally.summonerName }}"
+            :class="[compareSummonernames($route.params.name, ally.summonerName) ? 'text-white' : 'text-blue-200']"
+            class="relative ml-2 hover:text-white"
+          >{{ ally.summonerName }}</router-link>
+        </li>
+      </ul>
+      <ul class="w-1/2 text-right">
+        <li
+          v-for="(enemy, index) in enemyTeam"
+          :key="enemy.summonerId"
+          :class="index % 2 === 0 ? 'accent-enemy' : 'enemy'"
+          class="flex items-center justify-end px-5 py-1 leading-loose"
+        >
+          <router-link
+            v-if="!enemy.bot"
+            :to="{ name: 'summoner', params: { region: $route.params.region, name: enemy.summonerName }}"
+            class="relative text-red-200 hover:text-white"
+          >{{ enemy.summonerName }}</router-link>
+          <div
+            :style="{backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${enemy.championId}.png')`}"
+            class="ml-2 w-6 h-6 bg-cover bg-center bg-blue-1000 rounded-full"
+          ></div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import { compareSummonernames } from '@/helpers/functions.js'
+import { gameModes } from '@/data/data.js'
+import { mapState } from 'vuex'
+
+export default {
+  data() {
+    return {
+      gameLength: 0
+    }
+  },
+
+  computed: {
+    allyTeam() {
+      return this.current.participants.filter(p => p.teamId === this.teamColor)
+    },
+    enemyTeam() {
+      return this.current.participants.filter(p => p.teamId !== this.teamColor)
+    },
+    gamemode() {
+      return gameModes[this.current.gameQueueConfigId]
+    },
+    teamColor() {
+      return this.current.participants.find(p => compareSummonernames(p.summonerName, this.$route.params.name)).teamId
+    },
+    ...mapState({
+      current: state => state.summoner.basic.current,
+    })
+  },
+
+  created() {
+    this.gameLength = this.current.gameLength
+
+    setInterval(() => {
+      this.gameLength++
+    }, 1000)
+  },
+
+  methods: {
+    compareSummonernames
+  }
+}
+</script>
+
+<style scoped>
+.accent-ally {
+  background-image: linear-gradient(
+    90deg,
+    rgba(49, 130, 206, 0.7) 0%,
+    rgba(44, 82, 130, 0) 100%
+  );
+}
+
+.ally {
+  background-image: linear-gradient(
+    90deg,
+    rgba(49, 130, 206, 0.3) 0%,
+    rgba(44, 82, 130, 0) 90%
+  );
+}
+
+.accent-enemy {
+  background-image: linear-gradient(
+    90deg,
+    rgba(44, 82, 130, 0) 0%,
+    rgba(140, 0, 0, 0.4) 100%
+  );
+}
+
+.enemy {
+  background-image: linear-gradient(
+    90deg,
+    rgba(44, 82, 130, 0) 10%,
+    rgba(140, 0, 0, 0.3) 100%
+  );
+}
+
+.vs {
+  text-shadow: 3px 2px 0px rgba(49, 130, 206, 0.8),
+    -3px 2px 0px rgba(229, 62, 62, 0.8);
+}
+</style>

client/src/helpers/summoner.js

@@ -55,12 +55,7 @@ export function createBasicSummonerData(RiotData) {
     }
   }
 
-  return {
-    account: RiotData.account,
-    matchList: RiotData.allMatches,
-    ranked: RiotData.ranked,
-    playing: RiotData.playing,
-  }
+  return RiotData
 }
 
 function getLeagueData(leagueData, leagueName) {

client/src/main.js

@@ -18,10 +18,12 @@ Vue.filter('kilo', (value) => {
   return `${+(value / 1000).toFixed(1)}k`
 })
 
-Vue.filter('secToTime', (sec) => {
+Vue.filter('secToTime', (sec, dotNotation = false) => {
   const min = Math.floor(sec / 60)
-  const newSec = Math.floor(sec - min * 60)
-  return min + 'm' + (newSec < 10 ? '0' + newSec : newSec) + 's'
+  let newSec = Math.floor(sec - min * 60)
+  newSec = newSec < 10 ? '0' + newSec : newSec
+
+  return dotNotation ? `${min}:${newSec}` : `${min}m${newSec}s`
 })
 
 Vue.filter('percent', (value) => {

client/src/store/modules/summoner.js

@@ -6,6 +6,7 @@ export const namespaced = true
 export const state = {
   basic: {
     account: {},
+    current: {},
     matchList: [],
     ranked: {},
     playing: false,
@@ -52,6 +53,7 @@ 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

client/src/views/Summoner.vue

@@ -5,7 +5,11 @@
       <SummonerStats />
       <SummonerMates />
     </div>
-    <div v-if="overview.matches.length" class="w-9/12">
+    <div class="w-9/12">
+      <div v-if="basic.current">
+        <LiveMatch />
+      </div>
+      <div v-if="overview.matches.length">
         <ul>
           <Match
             v-for="(match, index) in overview.matches"
@@ -21,6 +25,7 @@
         >More matches</LoadingButton>
       </div>
     </div>
+  </div>
   <div v-else>
     <OverviewLoader />
   </div>
@@ -29,6 +34,7 @@
 
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex'
+import LiveMatch from '@/components/Match/LiveMatch.vue'
 import LoadingButton from '@/components/LoadingButton.vue'
 import Match from '@/components/Match/Match.vue'
 import OverviewLoader from '@/components/Summoner/Overview/OverviewLoader.vue'
@@ -38,6 +44,7 @@ import SummonerStats from '@/components/Summoner/Overview/SummonerStats.vue'
 
 export default {
   components: {
+    LiveMatch,
     LoadingButton,
     Match,
     OverviewLoader,
@@ -48,6 +55,7 @@ export default {
 
   computed: {
     ...mapState({
+      basic: state => state.summoner.basic,
       overview: state => state.summoner.overview
     }),
     ...mapGetters('summoner', ['matchesLoading', 'moreMatchesToFetch', 'overviewLoaded', 'summonerFound'])

server/app/Controllers/Http/SummonerController.js

@@ -41,11 +41,12 @@ class SummonerController {
       // MATCH LIST
       await MatchService.updateMatchList(account, summonerDB)
       const matchList = summonerDB.matchList
-      finalJSON.allMatches = matchList
+      finalJSON.matchList = matchList
 
       // CURRENT GAME
       const currentGame = await Jax.Spectator.summonerID(account.id, region)
       finalJSON.playing = !!currentGame
+      finalJSON.current = currentGame
 
       // RANKED STATS
       finalJSON.ranked = await SummonerService.getRanked(account, region)