feat: add flex 3v3 stats + display unranked icon if summoner is unranked

client/src/components/SummonerRanked.vue

@@ -24,7 +24,7 @@
       </div>
     </div>
 
-    <div class="mt-1 text-teal-500 text-4xl uppercase font-extrabold">{{ selectedLeague.rank }}</div>
+    <div class="mt-1 text-teal-500 text-4xl uppercase font-extrabold">{{ selectedLeague.fullRank }}</div>
     <div class="mt-4 flex items-start bg-gradient px-4 py-3 rounded-lg">
       <div class="flex items-center">
         <div

client/src/helpers/functions.js

@@ -36,24 +36,3 @@ export function secToTime(sec) {
   const newSec = sec - min * 60
   return min + 'm' + (newSec < 10 ? '0' + newSec : newSec) + 's'
 }
-
-
-/**
- *  Return the link of the rank image
- * @param soloQStats : stats in soloQ of the player
- */
-export function getRankImg(soloQStats) {
-  if (!soloQStats) {
-    return 'https://cdn.valentinkaelin.ch/riot/tier-icons/provisional.png'
-  }
-  return 'https://cdn.valentinkaelin.ch/riot/tier-icons/Emblem_' + capitalize(soloQStats.tier.toLowerCase()) + '.png'
-}
-
-
-/**
- * Capitalize first letter of params string
- * @param string  : string to capitalize
- */
-function capitalize(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1)
-}

client/src/helpers/summoner.js

@@ -1,8 +1,11 @@
-import { timeDifference, getRankImg } from '@/helpers/functions.js'
+import { timeDifference } from '@/helpers/functions.js'
 import { maps, gameModes } from '@/data/data.js'
 import summonersJSON from '@/data/summoner.json'
 import store from '@/store'
 
+const uniqueLeagues = ['CHALLENGER', 'GRANDMASTER', 'MASTER']
+const leaguesNumbers = { 'I': 1, 'II': 2, 'III': 3, 'IV': 4 }
+
 /**
  * Return all the infos about a list of matches built with the Riot API data
  * @param {Object} RiotData : all data from the Riot API
@@ -35,12 +38,27 @@ export function createSummonerData(RiotData) {
   console.log(RiotData)
 
   // Ranked Stats
-  const uniqueLeagues = ['CHALLENGER', 'GRANDMASTER', 'MASTER']
+  RiotData.ranked.soloQ = getLeagueData(RiotData.ranked.soloQ, 'Solo/Duo')
-  RiotData.ranked.soloQ = getLeagueData(uniqueLeagues, RiotData.ranked.soloQ)
+  if (!RiotData.ranked.soloQ) delete 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 = getLeagueData(RiotData.ranked.flex5v5, 'Flex 5vs5')
-  RiotData.ranked.flex5v5 ? RiotData.ranked.flex5v5.name = 'Flex 5vs5' : delete RiotData.ranked.flex5v5
+  if (!RiotData.ranked.flex5v5) delete RiotData.ranked.flex5v5
+
+  RiotData.ranked.flex3v3 = getLeagueData(RiotData.ranked.flex3v3, 'Flex 3vs3')
+  if (!RiotData.ranked.flex3v3) delete RiotData.ranked.flex3v3
+
+  // If Summoner is Unranked
+  if (Object.entries(RiotData.ranked).length === 0) {
+    RiotData.ranked.soloQ = {
+      fullRank: 'Unranked',
+      rankImgLink: 'https://res.cloudinary.com/kln/image/upload/v1571671133/ranks/unranked.png',
+      leaguePoints: 0,
+      wins: 0,
+      losses: 0,
+      winrate: '0%',
+      name: 'Solo/Duo'
+    }
+  }
 
   return {
     account: RiotData.account,
@@ -57,15 +75,24 @@ function getItemLink(id) {
   return `url('https://ddragon.leagueoflegends.com/cdn/${store.getters['ddragon/version']}/img/item/${id}.png')`
 }
 
-function getLeagueData(uniqueLeagues, leagueData) {
+function getLeagueData(leagueData, leagueName) {
   if (!leagueData) return null
 
-  leagueData.rank = uniqueLeagues.includes(leagueData.tier) ? leagueData.tier : `${leagueData.tier} ${leagueData.rank}`
+  leagueData.fullRank = 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) + '%'
+  leagueData.name = leagueName
   return leagueData
 }
 
+/**
+ *  Return the link of the rank image
+ * @param leagueData : stats in soloQ of the player
+ */
+export function getRankImg(leagueData) {
+  return `https://res.cloudinary.com/kln/image/upload/v1571671133/ranks/${leagueData.tier}_${leaguesNumbers[leagueData.rank]}.png`
+}
+
 function getSummonerLink(id) {
   const spellName = Object.entries(summonersJSON.data).find(([, spell]) => Number(spell.key) === id)[0]
   return `https://ddragon.leagueoflegends.com/cdn/${store.getters['ddragon/version']}/img/spell/${spellName}.png`

server/app/Controllers/Http/SummonerController.js

@@ -32,7 +32,8 @@ class SummonerController {
       const ranked = await Jax.League.summonerID(account.id)
       finalJSON.ranked = {
         soloQ: ranked.find(e => e.queueType === 'RANKED_SOLO_5x5') || null,
-        flex5v5: ranked.find(e => e.queueType === 'RANKED_FLEX_SR') || null
+        flex5v5: ranked.find(e => e.queueType === 'RANKED_FLEX_SR') || null,
+        flex3v3: ranked.find(e => e.queueType === 'RANKED_FLEX_TT') || null
       }
 
       // MATCH LIST