feat: add bg color according to stats in match details

client/src/components/Match/DetailedMatch.vue

@@ -1,14 +1,14 @@
 <template>
   <transition name="slide">
     <div v-if="data.status === 'loaded' && detailsOpen" class="bg-blue-800 rounded-b-lg">
-      <DetailedMatchTeam :data="allyTeam" />
+      <DetailedMatchTeam :data="allyTeam" :all-players="[...allyTeam.players, ...enemyTeam.players]" />
 
       <div class="px-3 py-2 flex justify-between">
         <DetailedMatchGlobalStats :team="allyTeam" :ally-team="true" />
         <DetailedMatchGlobalStats :team="enemyTeam" :ally-team="false" />
       </div>
 
-      <DetailedMatchTeam :data="enemyTeam" />
+      <DetailedMatchTeam :data="enemyTeam" :all-players="[...allyTeam.players, ...enemyTeam.players]" />
     </div>
     <div v-else-if="data.status === 'loading' && detailsOpen">
       <p class="bg-blue-800 py-5 text-blue-100 text-lg font-semibold">Loading...</p>

client/src/components/Match/DetailedMatchTeam.vue

@@ -117,45 +117,45 @@
           </div>
         </td>
         <td
-          :class="{'border-b border-blue-700': displayBorderbottom(index)}"
-          class="p-2 text-white text-xs font-semibold"
-        >{{ player.kills }}</td>
+          :style="bgColor(player, '71, 132, 116', 'kills')"
+          class="p-2 text-white text-sm"
+        >{{ player.stats.kills }}</td>
         <td
-          :class="{'border-b border-blue-700': displayBorderbottom(index)}"
-          class="p-2 text-white text-xs font-semibold"
-        >{{ player.deaths }}</td>
+          :style="bgColor(player, '156, 71, 109', 'deaths')"
+          class="p-2 text-white text-sm"
+        >{{ player.stats.deaths }}</td>
         <td
-          :class="{'border-b border-blue-700': displayBorderbottom(index)}"
-          class="p-2 text-white text-xs font-semibold"
-        >{{ player.assists }}</td>
+          :style="bgColor(player, '146, 100, 79', 'assists')"
+          class="p-2 text-white text-sm"
+        >{{ player.stats.assists }}</td>
         <td
-          :class="{'border-b border-blue-700': displayBorderbottom(index)}"
-          class="p-2 text-white text-xs font-semibold"
+          class="p-2 text-white text-sm"
+          :style="bgColor(player, '140, 101, 182', 'minions')"
         >{{ player.percentStats.minions }}</td>
         <td
-          :class="{'border-b border-blue-700': displayBorderbottom(index)}"
-          class="p-2 text-white text-xs font-semibold"
+          class="p-2 text-white text-sm"
+          :style="bgColor(player, '55, 118, 179', 'vision')"
         >{{ player.percentStats.vision }}</td>
         <td
-          :class="{'border-b border-blue-700': displayBorderbottom(index)}"
-          class="p-2 text-white text-xs font-semibold"
+          class="p-2 text-white text-sm"
+          :style="bgColor(player, '146, 100, 79', 'gold')"
         >{{ player.stats.gold }}</td>
         <td
-          :class="{'border-b border-blue-700': displayBorderbottom(index)}"
-          class="p-2 text-white text-xs font-semibold"
+          :style="bgColor(player, '156, 71, 109', 'dmgChamp')"
+          class="p-2 text-white text-sm"
         >{{ player.stats.dmgChamp }}</td>
         <td
-          :class="{'border-b border-blue-700': displayBorderbottom(index)}"
-          class="p-2 text-white text-xs font-semibold"
+          :style="bgColor(player, '156, 71, 109', 'dmgObj')"
+          class="p-2 text-white text-sm text-red"
         >{{ player.stats.dmgObj }}</td>
         <td
-          :class="{'border-b border-blue-700': displayBorderbottom(index)}"
-          class="p-2 text-white text-xs font-semibold"
+          :style="bgColor(player, '146, 145, 106', 'dmgTaken')"
+          class="p-2 text-white text-sm"
         >{{ player.stats.dmgTaken }}</td>
         <td
-          :class="{'border-b border-blue-700': displayBorderbottom(index)}"
-          class="p-2 text-white text-xs font-semibold"
-        >{{ player.kp }}</td>
+          :style="bgColor(player, '71, 132, 116', 'kp')"
+          class="p-2 text-white text-sm"
+        >{{ player.stats.kp }}</td>
       </tr>
     </tbody>
   </table>
@@ -166,6 +166,10 @@ import { mapGetters } from 'vuex'
 
 export default {
   props: {
+    allPlayers: {
+      type: Array,
+      required: true
+    },
     data: {
       type: Object,
       required: true
@@ -183,6 +187,16 @@ export default {
   },
 
   methods: {
+    bgColor(player, rgb, stats) {
+      const value = parseFloat(player.stats[stats])
+      const biggestValue = Math.max(...this.allPlayers.map(p => parseFloat(p.stats[stats])), 0)
+      const opacity = (value / biggestValue).toFixed(2)
+
+      return {
+        backgroundColor: `rgba(${rgb}, ${opacity})`,
+        boxShadow: value === biggestValue ? '#abb4d0 0px 0px 0px 2px inset' : ''
+      }
+    },
     displayBorderbottom(index) {
       return this.allyTeam || index !== this.data.players.length - 1
     }

client/src/components/Match/Match.vue

@@ -49,13 +49,13 @@
               </div>
               <div class="mx-auto flex flex-col justify-center items-center leading-none">
                 <div class="text-xl font-extrabold text-teal-500">
-                  <span class>{{ data.kills }}</span>
+                  <span class>{{ data.stats.kills }}</span>
                   <span class>/</span>
-                  <span class>{{ data.deaths }}</span>
+                  <span class>{{ data.stats.deaths }}</span>
                   <span class>/</span>
-                  <span class>{{ data.assists }}</span>
+                  <span class>{{ data.stats.assists }}</span>
                 </div>
-                <div class="mt-2 text-white text-xs font-extrabold">{{ data.kda }} KDA</div>
+                <div class="mt-2 text-white text-xs font-extrabold">{{ data.stats.kda }} KDA</div>
               </div>
             </div>
 
@@ -100,7 +100,7 @@
             <div class="flex items-center">
               <img src="@/assets/img/icons/KillParticipation.svg" alt="KillParticipation" />
               <div class="ml-1 kp text-sm font-bold">
-                {{ data.kp }}
+                {{ data.stats.kp }}
                 <!-- <span class="font-normal">kp</span> -->
               </div>
             </div>

server/app/Transformers/MatchTransformer.js

@@ -34,20 +34,13 @@ class MatchTransformer {
     const name = identity.player.summonerName
     const champion = (({ id, name }) => ({ id, name }))(Object.entries(this.champions).find(([, champion]) => Number(champion.key) === player.championId)[1])
     const role = this.MatchHelper.getRoleName(player.timeline)
-
-    const kills = player.stats.kills
-    const deaths = player.stats.deaths
-    const assists = player.stats.assists
-    let kda
-    if (kills + assists !== 0 && deaths === 0) {
-      kda = '∞'
-    } else {
-      kda = +(deaths === 0 ? 0 : ((kills + assists) / deaths)).toFixed(2)
-    }
     const level = player.stats.champLevel
 
     // Regular stats / Full match stats
     const stats = {
+      kills: player.stats.kills,
+      deaths: player.stats.deaths,
+      assists: player.stats.assists,
       minions: player.stats.totalMinionsKilled + player.stats.neutralMinionsKilled,
       vision: player.stats.visionScore,
       gold: +(player.stats.goldEarned / 1000).toFixed(1) + 'k',
@@ -56,19 +49,25 @@ class MatchTransformer {
       dmgTaken: +(player.stats.totalDamageTaken / 1000).toFixed(1) + 'k',
     }
 
+    if (stats.kills + stats.assists !== 0 && stats.deaths === 0) {
+      stats.kda = '∞'
+    } else {
+      stats.kda = +(stats.deaths === 0 ? 0 : ((stats.kills + stats.assists) / stats.deaths)).toFixed(2)
+    }
+
     // Percent stats / Per minute stats : only for detailed match
     let percentStats
-    let kp
     if (detailed) {
       percentStats = {
         minions: +(stats.minions / (this.match.gameDuration / 60)).toFixed(2),
         vision: +(stats.vision / (this.match.gameDuration / 60)).toFixed(2),
+        gold: +(player.stats.goldEarned * 100 / teamStats.gold).toFixed(1) + '%',
         dmgChamp: +(player.stats.totalDamageDealtToChampions * 100 / teamStats.dmgChamp).toFixed(1) + '%',
         dmgObj: +(player.stats.damageDealtToObjectives * 100 / teamStats.dmgObj).toFixed(1) + '%',
         dmgTaken: +(player.stats.totalDamageTaken * 100 / teamStats.dmgTaken).toFixed(1) + '%',
       }
 
-      kp = teamStats.kills === 0 ? '0%' : +((kills + assists) * 100 / teamStats.kills).toFixed(1) + '%'
+      stats.kp = teamStats.kills === 0 ? '0%' : +((stats.kills + stats.assists) * 100 / teamStats.kills).toFixed(1) + '%'
     } else {
       const totalKills = this.match.participants.reduce((prev, current) => {
         if (current.teamId !== player.teamId) {
@@ -77,7 +76,7 @@ class MatchTransformer {
         return prev + current.stats.kills
       }, 0)
 
-      kp = totalKills === 0 ? '0%' : +((kills + assists) * 100 / totalKills).toFixed(1) + '%'
+      stats.kp = totalKills === 0 ? '0%' : +((stats.kills + stats.assists) * 100 / totalKills).toFixed(1) + '%'
     }
 
 
@@ -111,12 +110,7 @@ class MatchTransformer {
       role,
       primaryRune,
       secondaryRune,
-      kills,
-      deaths,
-      assists,
-      kda,
       level,
-      kp,
       items,
       firstSum,
       secondSum,