refactor(match-details): new colors for match details stats

client/src/components/Match/DetailedMatchGlobalStats.vue

@@ -38,33 +38,33 @@
           :class="textColor"
           class="text-sm font-medium"
         >{{ `${team.teamStats.kills}/${team.teamStats.deaths}/${team.teamStats.assists}` }}</div>
-        <div class="text-xs text-white">k / d / a</div>
+        <div class="text-xs text-white">K / D / A</div>
       </div>
       <div :class="allyTeam ? 'ml-3' : 'mr-3'">
         <div
           :class="textColor"
           class="text-sm font-medium"
         >{{ +(team.teamStats.gold / 1000).toFixed(1) + 'k' }}</div>
-        <div class="text-xs text-white">gold</div>
+        <div class="text-xs text-white">Gold</div>
       </div>
       <div :class="allyTeam ? 'ml-3' : 'mr-3'">
         <div
           :class="textColor"
           class="text-sm font-medium"
         >{{ +(team.teamStats.dmgChamp / 1000).toFixed(1) + 'k' }}</div>
-        <div class="text-xs text-white">dmg</div>
+        <div class="text-xs text-white">Dmg</div>
       </div>
       <div :class="allyTeam ? 'ml-3' : 'mr-3'" class="flex flex-col justify-end">
         <div class="text-sm font-medium text-teal-400"></div>
         <div class="flex text-xs text-white">
           <div :class="allyTeam ? '' : 'mr-2'">
-            <span :class="textColor">{{ team.towers }}</span> towers
+            <span :class="textColor">{{ team.towers }}</span> Towers
           </div>
           <div :class="allyTeam ? 'ml-2' : 'mr-2'">
-            <span :class="textColor">{{ team.dragons }}</span> dragons
+            <span :class="textColor">{{ team.dragons }}</span> Dragons
           </div>
           <div :class="allyTeam ? 'ml-2' : ''">
-            <span :class="textColor">{{ team.barons }}</span> barons
+            <span :class="textColor">{{ team.barons }}</span> Barons
           </div>
         </div>
       </div>

client/src/components/Match/DetailedMatchTeam.vue

@@ -163,61 +163,61 @@
         </td>
         <td class="relative">
           <div
-            :style="bgColor(player, '71, 132, 116', 'kills')"
+            :style="bgColor(player, 'kills')"
             class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
           >{{ player.stats.kills }}</div>
         </td>
         <td class="relative">
           <div
-            :style="bgColor(player, '156, 71, 109', 'deaths')"
+            :style="bgColor(player, 'deaths')"
             class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
           >{{ player.stats.deaths }}</div>
         </td>
         <td class="relative">
           <div
-            :style="bgColor(player, '146, 100, 79', 'assists')"
+            :style="bgColor(player, 'assists')"
             class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
           >{{ player.stats.assists }}</div>
         </td>
         <td class="relative">
           <div
-            :style="bgColor(player, '140, 101, 182', 'minions')"
+            :style="bgColor(player, 'minions')"
             class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
           >{{ player[statsFormat].minions }}</div>
         </td>
         <td class="relative">
           <div
-            :style="bgColor(player, '55, 118, 179', 'vision')"
+            :style="bgColor(player, 'vision')"
             class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
           >{{ player[statsFormat].vision }}</div>
         </td>
         <td class="relative">
           <div
-            :style="bgColor(player, '146, 100, 79', 'gold')"
+            :style="bgColor(player, 'gold')"
             class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
           >{{ roundStats(player[statsFormat].gold) }}</div>
         </td>
         <td class="relative">
           <div
-            :style="bgColor(player, '156, 71, 109', 'dmgChamp')"
+            :style="bgColor(player, 'dmgChamp')"
             class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
           >{{ roundStats(player[statsFormat].dmgChamp) }}</div>
         </td>
         <td class="relative">
           <div
-            :style="bgColor(player, '156, 71, 109', 'dmgObj')"
+            :style="bgColor(player, 'dmgObj')"
             class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
           >{{ roundStats(player[statsFormat].dmgObj) }}</div>
         </td>
         <td class="relative">
           <div
-            :style="bgColor(player, '146, 145, 106', 'dmgTaken')"
+            :style="bgColor(player, 'dmgTaken')"
             class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
           >{{ roundStats(player[statsFormat].dmgTaken) }}</div>
         </td>
         <td class="relative">
           <div
-            :style="bgColor(player, '71, 132, 116', 'kp')"
+            :style="bgColor(player, 'kp')"
             class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
           >{{ player.stats.kp }}</div>
         </td>
@@ -227,6 +227,7 @@
 </template>
 
 <script>
+import { colors } from '@/data/data.js'
 import { mapState } from 'vuex'
 import DotsLoader from '@/components/Common/DotsLoader.vue'
 import Tooltip from '@/components/Common/Tooltip.vue'
@@ -265,7 +266,7 @@ export default {
   },
 
   methods: {
-    bgColor(player, rgb, stats) {
+    bgColor(player, 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)
@@ -279,7 +280,7 @@ export default {
       }
 
       return {
-        backgroundColor: `rgba(${rgb}, ${opacity})`,
+        backgroundColor: `rgba(${colors[stats]}, ${opacity})`,
         ...biggestValueStyle
       }
     },

client/src/data/data.js

@@ -74,3 +74,43 @@ export const gameModes = {
     name: 'Nexus Blitz'
   }
 }
+
+/* ========= OLD 5 COLORS ========= */
+// KILLS, KP : green -> 71, 132, 116
+// DEATHS, DMGCHAMP, DMGOBJ: red -> 156, 71, 109
+// ASSISTS, GOLD, DMGTAKEN: golden -> 146, 100, 79
+// MINIONS: purple -> 140, 101, 182
+// VISION: blue -> 55, 118, 179
+
+const colorValues = {
+  green: '54,148,109',
+  red: '197,85,93',
+  purple: '141,116,217',
+  teal: '104,186,191',
+  yellow: '166,176,134',
+  orange: '184,137,101',
+  brown: '161,127,134',
+  blue: '55, 118, 179',
+}
+
+export const colors = {
+  // match-details
+  kills: colorValues['green'],
+  deaths: colorValues['red'],
+  assists: colorValues['purple'],
+  minions: colorValues['teal'],
+  vision: colorValues['yellow'],
+  gold: colorValues['orange'],
+  dmgChamp: colorValues['red'],
+  dmgObj: colorValues['yellow'],
+  dmgTaken: colorValues['red'],
+  kp: colorValues['brown'],
+
+  // champions
+  winrate: colorValues['green'],
+  playrate: colorValues['purple'],
+  wins: colorValues['green'],
+  count: colorValues['purple'],
+  kda: colorValues['blue'],
+  gameLength: colorValues['green'],
+}