feat: add Flex 5vs5 global stats

client/src/components/SummonerRanked.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="ml-6 leading-none">
+    <div class="relative inline-block text-white">
+      <select
+        v-model="selectedKey"
+        class="block appearance-none bg-select w-full px-4 py-2 pr-8 rounded-md leading-tight text-lg font-extrabold cursor-pointer focus:outline-none"
+      >
+        <option
+          v-for="(data, leagueName) in ranked"
+          :key="leagueName"
+          :value="leagueName"
+        >{{ data.name }}</option>
+      </select>
+      <div
+        class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
+      >
+        <svg
+          class="text-white fill-current h-5 w-5"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+        >
+          <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
+        </svg>
+      </div>
+    </div>
+
+    <div class="mt-1 text-teal-500 text-4xl uppercase font-extrabold">{{ selectedLeague.rank }}</div>
+    <div class="mt-4 flex items-start bg-gradient px-4 py-3 rounded-lg">
+      <div class="flex items-center">
+        <div
+          class="w-20 h-20 bg-blue-1000"
+          :style="{background: `url(${selectedLeague.rankImgLink}) center/cover`}"
+        ></div>
+        <div class="ml-2 text-xl font-extrabold">{{ selectedLeague.leaguePoints }} LP</div>
+      </div>
+      <div class="ml-10 mt-2 font-extrabold uppercase leading-none">
+        <div class="text-teal-500 text-base">Record</div>
+        <div class="flex">
+          <div class="mt-2 text-sm leading-tight text-right">
+            <div>{{ selectedLeague.wins }}</div>
+            <div>{{ selectedLeague.losses }}</div>
+          </div>
+          <div class="ml-2 mt-2 text-sm leading-tight">
+            <div class="text-teal-500">Wins</div>
+            <div class="text-red-300">Losses</div>
+          </div>
+        </div>
+      </div>
+      <div class="ml-10 mt-2 font-extrabold">
+        <div class="text-teal-500 text-base uppercase">Winrate</div>
+        <div class="mt-2 text-xl leading-tight">{{ selectedLeague.winrate }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    ranked: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      selectedKey: Object.keys(this.ranked)[0]
+    }
+  },
+
+  computed: {
+    selectedLeague() {
+      return this.ranked[this.selectedKey]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.bg-select {
+  background-color: rgba(49, 130, 206, 0.2);
+}
+
+.bg-select:focus {
+  background-color: #2c5282;
+}
+</style>

client/src/helpers/summoner.js

@@ -34,20 +34,16 @@ export function createSummonerData(RiotData) {
   console.log(RiotData)
 
   // Ranked Stats
-  const soloQStats = RiotData.soloQ
-  const soloQ = soloQStats ? {} : null
-  if (soloQ) {
-    soloQ.rank = `${soloQStats.tier} ${soloQStats.rank}`
-    soloQ.rankImgLink = getRankImg(soloQStats)
-    soloQ.wins = soloQStats.wins
-    soloQ.losses = soloQStats.losses
-    soloQ.winrate = +(soloQ.wins * 100 / (soloQ.wins + soloQ.losses)).toFixed(1) + '%'
-    soloQ.lp = soloQStats.leaguePoints
-  }
+  const uniqueLeagues = ['CHALLENGER', 'GRANDMASTER', 'MASTER']
+  RiotData.ranked.soloQ = getLeagueData(uniqueLeagues, RiotData.ranked.soloQ)
+  RiotData.ranked.soloQ ? RiotData.ranked.soloQ.name = 'Solo/Duo' : delete RiotData.ranked.soloQ
+
+  RiotData.ranked.flex5v5 = getLeagueData(uniqueLeagues, RiotData.ranked.flex5v5)
+  RiotData.ranked.flex5v5 ? RiotData.ranked.flex5v5.name = 'Flex 5vs5' : delete RiotData.ranked.flex5v5
 
   return {
     account: RiotData.account,
-    soloQ,
+    ranked: RiotData.ranked,
     matchList: RiotData.allMatches,
     matches: createMatchData(RiotData.matchesDetails)
   }
@@ -60,6 +56,15 @@ function getItemLink(id) {
   return `url('https://ddragon.leagueoflegends.com/cdn/${process.env.VUE_APP_PATCH}/img/item/${id}.png')`
 }
 
+function getLeagueData(uniqueLeagues, leagueData) {
+  if (!leagueData) return null
+
+  leagueData.rank = uniqueLeagues.includes(leagueData.tier) ? leagueData.tier : `${leagueData.tier} ${leagueData.rank}`
+  leagueData.rankImgLink = getRankImg(leagueData)
+  leagueData.winrate = +(leagueData.wins * 100 / (leagueData.wins + leagueData.losses)).toFixed(1) + '%'
+  return leagueData
+}
+
 function getSummonerLink(id) {
   const spellName = Object.entries(summonersJSON.data).find(([, spell]) => Number(spell.key) === id)[0]
   return `https://ddragon.leagueoflegends.com/cdn/${process.env.VUE_APP_PATCH}/img/spell/${spellName}.png`

client/src/store/modules/summoner.js

@@ -9,7 +9,7 @@ export const state = {
     matchIndex: 0,
     matchList: [],
     matches: [],
-    soloQ: {}
+    ranked: {}
   },
   matchesLoading: false,
   status: '',
@@ -33,7 +33,7 @@ export const mutations = {
     state.infos.account = infos.account
     state.infos.matchList = infos.matchList
     state.infos.matches = infos.matches
-    state.infos.soloQ = infos.soloQ
+    state.infos.ranked = infos.ranked
     state.infos.matchIndex = infos.matches.length
     state.status = 'found'
   },

client/src/views/Summoner.vue

@@ -37,38 +37,11 @@
                     >{{ summonerInfos.account.summonerLevel }}</div>
                   </div>
                 </div>
-                <div v-if="summonerInfos.soloQ" class="ml-6 leading-none">
-                  <div class="text-lg font-extrabold">Solo/Duo</div>
-                  <div
-                    class="text-teal-500 text-4xl uppercase font-extrabold"
-                  >{{ summonerInfos.soloQ.rank }}</div>
-                  <div class="mt-4 flex items-start bg-gradient px-4 py-3 rounded-lg">
-                    <div class="flex items-center">
-                      <div
-                        class="w-20 h-20 bg-blue-1000"
-                        :style="{background: `url(${summonerInfos.soloQ.rankImgLink}) center/cover`}"
-                      ></div>
-                      <div class="ml-2 text-xl font-extrabold">{{ summonerInfos.soloQ.lp }} LP</div>
-                    </div>
-                    <div class="ml-10 mt-2 font-extrabold uppercase leading-none">
-                      <div class="text-teal-500 text-base">Record</div>
-                      <div class="flex">
-                        <div class="mt-2 text-sm leading-tight text-right">
-                          <div>{{ summonerInfos.soloQ.wins }}</div>
-                          <div>{{ summonerInfos.soloQ.losses }}</div>
-                        </div>
-                        <div class="ml-2 mt-2 text-sm leading-tight">
-                          <div class="text-teal-500">Wins</div>
-                          <div class="text-red-300">Losses</div>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="ml-10 mt-2 font-extrabold">
-                      <div class="text-teal-500 text-base uppercase">Winrate</div>
-                      <div class="mt-2 text-xl leading-tight">{{ summonerInfos.soloQ.winrate }}</div>
-                    </div>
-                  </div>
-                </div>
+
+                <SummonerRanked
+                  v-if="Object.entries(summonerInfos.ranked).length !== 0"
+                  :ranked="summonerInfos.ranked"
+                />
               </div>
             </div>
 
@@ -93,7 +66,6 @@
             :loading="matchesLoading"
             btn-class="mt-4 block mx-auto bg-blue-800 px-4 py-2 rounded-md font-semibold hover:bg-blue-1000 shadow-lg"
           >More matches</LoadingButton>
-
         </div>
       </template>
 
@@ -117,6 +89,7 @@ import { mapState, mapActions, mapGetters } from 'vuex'
 import LazyBackground from '@/components/LazyBackgroundImage.vue'
 import LoadingButton from '@/components/LoadingButton.vue'
 import RecentActivity from '@/components/RecentActivity.vue'
+import SummonerRanked from '@/components/SummonerRanked.vue'
 import Match from '@/components/Match.vue'
 import SearchForm from '@/components/SearchForm.vue'
 
@@ -126,7 +99,8 @@ export default {
     LoadingButton,
     Match,
     RecentActivity,
-    SearchForm
+    SearchForm,
+    SummonerRanked
   },
 
   computed: {

server/app/Controllers/Http/SummonerController.js

@@ -29,8 +29,10 @@ class SummonerController {
 
       // RANKED STATS
       const ranked = await Jax.League.summonerID(account.id)
-      const soloQ = ranked.filter(e => e.queueType === 'RANKED_SOLO_5x5')
-      finalJSON.soloQ = soloQ.length ? soloQ[0] : null;
+      finalJSON.ranked = {
+        soloQ: ranked.find(e => e.queueType === 'RANKED_SOLO_5x5') || null,
+        flex5v5: ranked.find(e => e.queueType === 'RANKED_FLEX_SR') || null
+      }
 
       // MATCH LIST
       const matchList = await MatchHelper.getFullMatchList(account)