fix: round correctly the winrate of roles

This commit is contained in:
Valentin Kaelin 2019-11-13 19:49:38 +01:00
parent 196d71e1fa
commit 9903d03d8a

View file

@ -41,11 +41,13 @@
<div class="flex flex-col justify-end w-2 h-12 bg-blue-900 rounded-full cursor-pointer"> <div class="flex flex-col justify-end w-2 h-12 bg-blue-900 rounded-full cursor-pointer">
<div <div
:style="{height: (role.count * 3 / mostPlayedRole) * role.wins / role.count + 'rem'}" :style="{height: (role.count * 3 / mostPlayedRole) * role.wins / role.count + 'rem'}"
class="bg-green-400 rounded-t-full" :class="roundedRoleWins(role.wins, role.count)"
class="bg-green-400"
></div> ></div>
<div <div
:style="{height: (role.count * 3 / mostPlayedRole) * role.losses / role.count + 'rem'}" :style="{height: (role.count * 3 / mostPlayedRole) * role.losses / role.count + 'rem'}"
class="bg-red-400 rounded-b-full" :class="roundedRoleLosses(role.losses, role.count)"
class="bg-red-400"
></div> ></div>
</div> </div>
</template> </template>
@ -177,7 +179,7 @@
</div> </div>
<ul class="mt-1 text-gray-100"> <ul class="mt-1 text-gray-100">
<li <li
v-for="(championClass, index) in stats.class.sort((a, b) => b.count - a.count)" v-for="(championClass, index) in championClasses"
:key="index" :key="index"
:class="{'bg-blue-760': index % 2 !== 0}" :class="{'bg-blue-760': index % 2 !== 0}"
class="flex justify-between items-center px-4 py-1 leading-tight" class="flex justify-between items-center px-4 py-1 leading-tight"
@ -233,6 +235,10 @@ export default {
}, },
computed: { computed: {
championClasses() {
const classes = [...this.stats.class]
return classes.sort((a, b) => b.count - a.count)
},
mostPlayedRole() { mostPlayedRole() {
return Math.max(...this.stats.role.map(r => r.count), 0) return Math.max(...this.stats.role.map(r => r.count), 0)
}, },
@ -263,6 +269,12 @@ export default {
.filter(l => l.type === typeName) .filter(l => l.type === typeName)
.sort((a, b) => b.count - a.count) .sort((a, b) => b.count - a.count)
}, },
roundedRoleLosses(win, count) {
return win === count ? 'rounded-full' : 'rounded-b-full'
},
roundedRoleWins(win, count) {
return win === count ? 'rounded-full' : 'rounded-t-full'
},
winLossColor(win, loss) { winLossColor(win, loss) {
const colors = { const colors = {
win: 'text-gray-200', win: 'text-gray-200',