feat: add role for summoner's matches

client/src/components/Match.vue

@@ -9,10 +9,11 @@
             >{{ data.champ }}</div>
 
             <div class="flex">
-              <div class="flex flex-col justify-center items-center">
+              <div class="flex flex-col justify-end items-center">
                 <div
-                  class="w-10 h-10 bg-blue-1000"
-                  :style="{background: `url(${require('@/assets/img/roles/Bot.png')}) center/cover`}"
+                  v-if="data.role !== 'NONE'"
+                  class="w-10 h-10 bg-center bg-cover"
+                  :style="{backgroundImage: `url(${require('@/assets/img/roles/' + data.role + '.png')})`}"
                 ></div>
                 <span class="text-xs text-teal-500 font-extrabold">LVL {{ data.level }}</span>
               </div>
@@ -22,12 +23,12 @@
               ></div>
               <div class="ml-2 flex flex-row sm:flex-col sm:justify-around">
                 <div
-                  class="w-6 h-6 bg-blue-1000 rounded-md"
-                  :style="{background: `url(${data.firstSum}) center/cover`}"
+                  class="w-6 h-6 bg-blue-1000 rounded-md bg-center bg-cover"
+                  :style="{backgroundImage: `url(${data.firstSum})`}"
                 ></div>
                 <div
-                  class="w-6 h-6 bg-blue-1000 rounded-md"
-                  :style="{background: `url(${data.secondSum}) center/cover`}"
+                  class="w-6 h-6 bg-blue-1000 rounded-md bg-center bg-cover"
+                  :style="{backgroundImage: `url(${data.secondSum})`}"
                 ></div>
               </div>
               <div class="ml-1 flex flex-row sm:flex-col sm:justify-around">
@@ -62,8 +63,8 @@
             <div
               v-for="(item, index) in data.items"
               :key="index"
-              :style="{background: item}"
-              class="ml-1 w-8 h-8 rounded-md bg-blue-1000"
+              :style="{backgroundImage: item}"
+              class="ml-1 w-8 h-8 rounded-md bg-blue-1000 bg-center bg-cover"
             ></div>
           </div>
 

client/src/helpers/summoner.js

@@ -29,9 +29,10 @@ export function createSummonerData(RiotData, championsInfos, runesInfos) {
   // Loop on all matches
   for (let i = 0; i < matches.length; i++) {
     const currentMatch = matches[i]
-    const participantId = currentMatch.participantIdentities.find((p) => p.player.currentAccountId === userStats.accountId).participantId - 1
+    const participantId = currentMatch.participantIdentities.find((p) => p.player.currentAccountId === userStats.accountId).participantId
+    const player = currentMatch.participants[participantId - 1]
+    const teamId = player.teamId
 
-    const teamId = currentMatch.participants[participantId].teamId
     let win = currentMatch.teams.find((t) => t.teamId === teamId).win
 
     // Match less than 5min
@@ -43,27 +44,36 @@ export function createSummonerData(RiotData, championsInfos, runesInfos) {
     let mode = gameModes[currentMatch.queueId]
     if (!mode)
       mode = 'Undefined gamemode'
-    const champion = Object.entries(championsInfos).find(([, champion]) => Number(champion.key) === currentMatch.participants[participantId].championId)[0]
-    const role = currentMatch.participants[participantId].timeline.lane
+    const champion = Object.entries(championsInfos).find(([, champion]) => Number(champion.key) === player.championId)[0]
+
+    let role = player.timeline.lane
+    if(role === 'BOTTOM') {
+      if(player.timeline.role.includes('SUPPORT')) {
+        role = 'SUPPORT'
+      } else {
+        role = 'BOTTOM'
+      }
+    }
+
     const timeAgo = timeDifference(currentMatch.gameCreation)
     const time = secToTime(currentMatch.gameDuration)
-    const kills = currentMatch.participants[participantId].stats.kills
-    const deaths = currentMatch.participants[participantId].stats.deaths
-    const assists = currentMatch.participants[participantId].stats.assists
+    const kills = player.stats.kills
+    const deaths = player.stats.deaths
+    const assists = player.stats.assists
     const kda = ((kills + assists) / deaths).toFixed(2)
-    const level = currentMatch.participants[participantId].stats.champLevel
-    const damage = (currentMatch.participants[participantId].stats.totalDamageDealtToChampions / 1000).toFixed(1) + 'k'
+    const level = player.stats.champLevel
+    const damage = (player.stats.totalDamageDealtToChampions / 1000).toFixed(1) + 'k'
 
-    const primaryRuneCategory = runesInfos.find(r => r.id === currentMatch.participants[participantId].stats.perkPrimaryStyle)
+    const primaryRuneCategory = runesInfos.find(r => r.id === player.stats.perkPrimaryStyle)
     let primaryRune
     for (const subCat of primaryRuneCategory.slots) {
-      primaryRune = subCat.runes.find(r => r.id === currentMatch.participants[participantId].stats.perk0)
+      primaryRune = subCat.runes.find(r => r.id === player.stats.perk0)
       if (primaryRune) {
         break
       }
     }
     primaryRune = `https://ddragon.leagueoflegends.com/cdn/img/${primaryRune.icon}`
-    let secondaryRune = runesInfos.find(r => r.id === currentMatch.participants[participantId].stats.perkSubStyle)
+    let secondaryRune = runesInfos.find(r => r.id === player.stats.perkSubStyle)
     secondaryRune = `https://ddragon.leagueoflegends.com/cdn/img/${secondaryRune.icon}`
 
 
@@ -78,14 +88,14 @@ export function createSummonerData(RiotData, championsInfos, runesInfos) {
     const items = []
     for (let i = 0; i < 6; i++) {
       const currentItem = 'item' + i
-      items.push(getItemLink(currentMatch.participants[participantId].stats[currentItem]))
+      items.push(getItemLink(player.stats[currentItem]))
     }
 
-    const gold = (currentMatch.participants[participantId].stats.goldEarned / 1000).toFixed(1) + 'k'
-    const minions = currentMatch.participants[participantId].stats.totalMinionsKilled + currentMatch.participants[participantId].stats.neutralMinionsKilled
+    const gold = (player.stats.goldEarned / 1000).toFixed(1) + 'k'
+    const minions = player.stats.totalMinionsKilled + player.stats.neutralMinionsKilled
 
-    const firstSum = currentMatch.participants[participantId].spell1Id
-    const secondSum = currentMatch.participants[participantId].spell2Id
+    const firstSum = player.spell1Id
+    const secondSum = player.spell2Id
 
     matchesInfos.push({
       result: win,
@@ -126,7 +136,10 @@ export function createSummonerData(RiotData, championsInfos, runesInfos) {
 }
 
 function getItemLink(id) {
-  return `url('https://ddragon.leagueoflegends.com/cdn/${process.env.VUE_APP_PATCH}/img/item/${id === 0 ? 3637 : id}.png') no-repeat center center / contain`
+  if(id === 0) {
+    return null
+  }
+  return `url('https://ddragon.leagueoflegends.com/cdn/${process.env.VUE_APP_PATCH}/img/item/${id}.png')`
 }
 
 function getSummonerLink(id) {