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: display allyTeam in blue and enemyTeam in red

Browse source
This commit is contained in:
Valentin Kaelin 2019-11-04 17:47:05 +01:00
parent d3628d6cf6
commit a4e3697f24
3 changed files with 13 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
client/src/components/Match/DetailedMatch.vue
View file

@ -9,16 +9,15 @@
<div <div
v-for="ban in allyTeam.bans" v-for="ban in allyTeam.bans"
:key="'ban-' + ban.pickTurn" :key="'ban-' + ban.pickTurn"
:class="[{'ml-2': ban.pickTurn !== 6 && ban.pickTurn !== 1}, banColorChampion(allyTeam.color)]" :class="[{'ml-2': ban.pickTurn !== 6 && ban.pickTurn !== 1}]"
class="relative ban inline-block border-2 rounded-full" class="relative ban ban-blue inline-block border-2 border-teal-500 rounded-full"
> >
<div <div
:style="[ban.champion.id ? {backgroundImage: `url('https://ddragon.leagueoflegends.com/cdn/${version}/img/champion/${ban.champion.id}.png')`} : '']" :style="[ban.champion.id ? {backgroundImage: `url('https://ddragon.leagueoflegends.com/cdn/${version}/img/champion/${ban.champion.id}.png')`} : '']"
class="ban-img w-6 h-6 bg-cover bg-center bg-blue-1000 rounded-full" class="ban-img w-6 h-6 bg-cover bg-center bg-blue-1000 rounded-full"
></div> ></div>
<div <div
:class="banColorPickOrder(allyTeam.color)" class="absolute ban-order w-4 h-4 flex items-center justify-center text-xs text-teal-100 bg-teal-500 font-bold rounded-full"
class="absolute ban-order w-4 h-4 flex items-center justify-center text-xs font-bold rounded-full"
>{{ ban.pickTurn }}</div> >{{ ban.pickTurn }}</div>
</div> </div>
</div> </div>
@ -27,16 +26,15 @@
<div <div
v-for="ban in enemyTeam.bans" v-for="ban in enemyTeam.bans"
:key="'ban-' + ban.pickTurn" :key="'ban-' + ban.pickTurn"
:class="[{'ml-2': ban.pickTurn !== 6 && ban.pickTurn !== 1}, banColorChampion(enemyTeam.color)]" :class="[{'ml-2': ban.pickTurn !== 6 && ban.pickTurn !== 1}]"
class="relative ban inline-block border-2 rounded-full" class="relative ban ban-red inline-block border-2 border-red-500 rounded-full"
> >
<div <div
:style="[ban.champion.id ? {backgroundImage: `url('https://ddragon.leagueoflegends.com/cdn/${version}/img/champion/${ban.champion.id}.png')`} : '']" :style="[ban.champion.id ? {backgroundImage: `url('https://ddragon.leagueoflegends.com/cdn/${version}/img/champion/${ban.champion.id}.png')`} : '']"
class="ban-img w-6 h-6 bg-cover bg-center bg-blue-1000 rounded-full" class="ban-img w-6 h-6 bg-cover bg-center bg-blue-1000 rounded-full"
></div> ></div>
<div <div
:class="banColorPickOrder(enemyTeam.color)" class="absolute ban-order w-4 h-4 flex items-center justify-center text-xs text-red-100 bg-red-500 font-bold rounded-full"
class="absolute ban-order w-4 h-4 flex items-center justify-center text-xs font-bold rounded-full"
>{{ ban.pickTurn }}</div> >{{ ban.pickTurn }}</div>
</div> </div>
</div> </div>
@ -77,15 +75,6 @@ export default {
return this.data.blueTeam.players.some(p => p.name.toLowerCase() === this.$route.params.name.toLowerCase()) ? this.data.redTeam : this.data.blueTeam return this.data.blueTeam.players.some(p => p.name.toLowerCase() === this.$route.params.name.toLowerCase()) ? this.data.redTeam : this.data.blueTeam
}, },
...mapGetters('ddragon', ['version']), ...mapGetters('ddragon', ['version']),
},
methods: {
banColorChampion(colorTeam) {
return colorTeam === 'Blue' ? 'ban-blue border-teal-500' : 'ban-red border-red-500'
},
banColorPickOrder(colorTeam) {
return colorTeam === 'Blue' ? 'text-teal-100 bg-teal-500' : 'text-red-100 bg-red-500'
}
} }
} }
</script> </script>

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

@ -5,9 +5,9 @@
<th class="py-5 border-r border-blue-700"> <th class="py-5 border-r border-blue-700">
<div class="flex justify-between"> <div class="flex justify-between">
<span <span
:class="data.color === 'Blue' ? 'text-teal-400' : 'text-red-400'" :class="allyTeam ? 'text-teal-400' : 'text-red-400'"
class="pl-2" class="pl-2"
>{{ data.color }} Team</span> >{{ allyTeam ? 'Ally' : 'Enemy' }} Team</span>
<span>{{ `${data.teamStats.kills}/${data.teamStats.deaths}/${data.teamStats.assists}` }}</span> <span>{{ `${data.teamStats.kills}/${data.teamStats.deaths}/${data.teamStats.assists}` }}</span>
<div class="flex pr-2"> <div class="flex pr-2">
<svg class="w-4 h-4 items-center"> <svg class="w-4 h-4 items-center">
@ -55,9 +55,10 @@
class="ml-3 relative w-8 h-8 bg-cover bg-center bg-blue-1000 rounded-full" class="ml-3 relative w-8 h-8 bg-cover bg-center bg-blue-1000 rounded-full"
> >
<div <div
class="absolute level-position bottom-0 w-5 h-5 bg-blue-900 rounded-full text-teal-100 text-xs" :class="allyTeam ? 'bg-teal-500 text-teal-100' : 'bg-red-500 text-red-100'"
class="absolute level-position bottom-0 flex items-center justify-center w-4 h-4 rounded-full text-xxs"
> >
<span class="leading-relaxed">{{ player.level }}</span> <span>{{ player.level }}</span>
</div> </div>
</div> </div>
<div class="ml-1 flex flex-col justify-around"> <div class="ml-1 flex flex-col justify-around">
@ -253,6 +254,6 @@ export default {
} }
.level-position { .level-position {
left: -10px; left: -5px;
} }
</style> </style>

1
client/tailwind.config.js
View file

@ -258,6 +258,7 @@ module.exports = {
], ],
}, },
fontSize: { fontSize: {
xxs: '0.625rem',
xs: '0.75rem', xs: '0.75rem',
sm: '0.875rem', sm: '0.875rem',
base: '1rem', base: '1rem',