Doble/LeagueStats
1
0
Fork 0
mirror of https://github.com/vkaelin/LeagueStats.git synced 2026-03-25 12:57:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Valentin Kaelin 2020-08-22 18:18:40 +02:00
parent f55405fc4d
commit c7d894be03
3 changed files with 59 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
client/src/components/Match/DetailedMatchGlobalStats.vue
View file

@ -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>

25
client/src/components/Match/DetailedMatchTeam.vue
View file

@ -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
}
},

40
client/src/data/data.js
View file

@ -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'],
}