fixed #29
This commit is contained in:
@@ -5,7 +5,7 @@
|
||||
<TotalDamage/>
|
||||
</div>
|
||||
<div class="hitgroup">
|
||||
<h3 class="text-center">Damage by Hitgroup</h3>
|
||||
<!-- <h3 class="text-center">Damage by Hitgroup</h3>-->
|
||||
<HitgroupPuppet :equipment_map="data.equipment_map" :stats="data.stats" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,31 +1,64 @@
|
||||
<template>
|
||||
<div class="hitgroup pt-2">
|
||||
<div class="select-group mb-4">
|
||||
<select v-if="store.state.playersArr" v-model="data.selectPlayer" class="form-select">
|
||||
<option value="All">All</option>
|
||||
<option value="Team 1">Team 1</option>
|
||||
<option value="Team 2">Team 2</option>
|
||||
<option disabled>───────────────────────────</option>
|
||||
<option v-for="(value, index) in props.stats" :key="index"
|
||||
:value="Object.keys(value).toString() === store.state.playersArr[index].player.steamid64 ? store.state.playersArr[index].player : ''">
|
||||
{{
|
||||
Object.keys(value).toString() === store.state.playersArr[index].player.steamid64 ? store.state.playersArr[index].player.name : ''
|
||||
}}
|
||||
</option>
|
||||
</select>
|
||||
<div class="d-flex flex-lg-nowrap flex-wrap justify-content-center gap-4">
|
||||
<div class="d-flex flex-column justify-content-center align-items-center w-auto">
|
||||
<div class="select-group mb-4">
|
||||
<select v-if="store.state.playersArr" v-model="data.selectPlayer" class="form-select">
|
||||
<option value="All">All</option>
|
||||
<option value="Team 1">Team 1</option>
|
||||
<option value="Team 2">Team 2</option>
|
||||
<option disabled>───────────────────────────</option>
|
||||
<option v-for="(value, index) in props.stats" :key="index"
|
||||
:value="Object.keys(value).toString() === store.state.playersArr[index].player.steamid64 ? store.state.playersArr[index].player : ''">
|
||||
{{
|
||||
Object.keys(value).toString() === store.state.playersArr[index].player.steamid64 ? store.state.playersArr[index].player.name : ''
|
||||
}}
|
||||
</option>
|
||||
</select>
|
||||
|
||||
<select v-if="data.selectPlayer !== ''" :key="data.selectPlayer" v-model="data.selectWeapon" class="form-select">
|
||||
<option class="select-hr" value="All">All</option>
|
||||
<option disabled>───────────────────────────</option>
|
||||
<option v-for="(value, index) in processPlayerWeapon()" :key="index" :value="value">
|
||||
<!-- This is here, because weapons are not always named correctly -->
|
||||
<!-- {{ Object.values(value).toString().charAt(0).toUpperCase() + Object.values(value).toString().slice(1) }}-->
|
||||
{{ Object.values(value).toString() }}
|
||||
</option>
|
||||
</select>
|
||||
<select v-if="data.selectPlayer !== ''" :key="data.selectPlayer" v-model="data.selectWeapon"
|
||||
class="form-select">
|
||||
<option class="select-hr" value="All">All</option>
|
||||
<option disabled>───────────────────────────</option>
|
||||
<option v-for="(value, index) in processPlayerWeapon()" :key="index" :value="value">
|
||||
<!-- This is here, because weapons are not always named correctly -->
|
||||
<!-- {{ Object.values(value).toString().charAt(0).toUpperCase() + Object.values(value).toString().slice(1) }}-->
|
||||
{{ Object.values(value).toString() }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="hitgroup-puppet"/>
|
||||
</div>
|
||||
|
||||
<div v-if="data.weaponDmg"
|
||||
id="bar-graph"
|
||||
class="w-auto"
|
||||
:style="{
|
||||
minWidth: dmgWidth + 'px'
|
||||
}">
|
||||
<table class="table table-borderless">
|
||||
<tr v-for="(value, index) in data.weaponDmg" :key="index">
|
||||
<td v-if="index < 10 && (data.selectWeapon === 'All' || Object.keys(data.selectWeapon).toString() === Object.keys(value).toString())"
|
||||
style="width: 100px">
|
||||
<img :alt="Object.values(value).toString()"
|
||||
:src="DisplayWeapon(parseInt(Object.keys(value)[0]))"/>
|
||||
</td>
|
||||
<td v-if="index < 10 && (data.selectWeapon === 'All' || Object.keys(data.selectWeapon).toString() === Object.keys(value).toString())">
|
||||
<span :style="{
|
||||
width: (processWeaponDmg(Object.keys(value).toString()) / processWeaponDmg(Object.keys(data.weaponDmg[0]).toString()) * 100).toFixed(0) + '%',
|
||||
backgroundColor: 'orangered',
|
||||
display: 'block',
|
||||
}"
|
||||
class="rounded"
|
||||
>
|
||||
<span>{{ processWeaponDmg(Object.keys(value).toString()) }}</span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="hitgroup-puppet"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -36,6 +69,7 @@ import {MapChart} from 'echarts/charts';
|
||||
import {CanvasRenderer} from 'echarts/renderers';
|
||||
import {onMounted, onUnmounted, reactive, ref, watch} from "vue";
|
||||
import {useStore} from "vuex";
|
||||
import {DisplayWeapon} from '@/utils'
|
||||
|
||||
import $ from 'jquery'
|
||||
|
||||
@@ -57,7 +91,8 @@ export default {
|
||||
const data = reactive({
|
||||
selectPlayer: 'All',
|
||||
selectWeapon: 'All',
|
||||
eq_map: []
|
||||
eq_map: [],
|
||||
weaponDmg: []
|
||||
})
|
||||
|
||||
let myChart1
|
||||
@@ -70,6 +105,16 @@ export default {
|
||||
return 650
|
||||
}
|
||||
|
||||
const setDmgWidth = () => {
|
||||
const windowWidth = getWindowWidth()
|
||||
if (windowWidth >= 500)
|
||||
return 500
|
||||
else
|
||||
return windowWidth - 10
|
||||
}
|
||||
|
||||
const dmgWidth = ref(setDmgWidth())
|
||||
|
||||
const setHeight = () => {
|
||||
const windowWidth = getWindowWidth()
|
||||
if (windowWidth >= 751)
|
||||
@@ -83,6 +128,17 @@ export default {
|
||||
const width = ref(getWindowWidth())
|
||||
const height = ref(setHeight())
|
||||
|
||||
const processWeaponDmg = (id) => {
|
||||
let value = ''
|
||||
data.weaponDmg.forEach(w => {
|
||||
if (Object.keys(w).toString() === id) {
|
||||
value = Object.values(w).toString()
|
||||
}
|
||||
})
|
||||
|
||||
return value
|
||||
}
|
||||
|
||||
const processPlayerWeapon = () => {
|
||||
let arr = []
|
||||
if (data.selectPlayer === 'All') {
|
||||
@@ -152,7 +208,7 @@ export default {
|
||||
return arr2
|
||||
}
|
||||
|
||||
const processDmg = () => {
|
||||
const processDmg = (by = 'hitgroup') => {
|
||||
let arr = []
|
||||
if (data.selectPlayer && data.selectWeapon) {
|
||||
switch (data.selectPlayer) {
|
||||
@@ -165,14 +221,26 @@ export default {
|
||||
// 1: hitgroup
|
||||
// 2: dmg
|
||||
if (weapon) {
|
||||
if (Object.values(weapon)[0] === parseInt(Object.keys(data.selectWeapon).toString())) {
|
||||
let obj = {}
|
||||
obj[weapon[1]] = weapon[2]
|
||||
arr.push(obj)
|
||||
} else if (data.selectWeapon === 'All') {
|
||||
let obj = {}
|
||||
obj[weapon[1]] = weapon[2]
|
||||
arr.push(obj)
|
||||
if (by === 'hitgroup') {
|
||||
if (Object.values(weapon)[0] === parseInt(Object.keys(data.selectWeapon).toString())) {
|
||||
let obj = {}
|
||||
obj[weapon[1]] = weapon[2]
|
||||
arr.push(obj)
|
||||
} else if (data.selectWeapon === 'All') {
|
||||
let obj = {}
|
||||
obj[weapon[1]] = weapon[2]
|
||||
arr.push(obj)
|
||||
}
|
||||
} else if (by === 'weapon') {
|
||||
if (Object.values(weapon)[0] === parseInt(Object.keys(data.selectWeapon).toString())) {
|
||||
let obj = {}
|
||||
obj[weapon[0]] = weapon[2]
|
||||
arr.push(obj)
|
||||
} else if (data.selectWeapon === 'All') {
|
||||
let obj = {}
|
||||
obj[weapon[0]] = weapon[2]
|
||||
arr.push(obj)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -192,14 +260,26 @@ export default {
|
||||
// 1: hitgroup
|
||||
// 2: dmg
|
||||
if (weapon) {
|
||||
if (Object.values(weapon)[0] === parseInt(Object.keys(data.selectWeapon).toString())) {
|
||||
let obj = {}
|
||||
obj[weapon[1]] = weapon[2]
|
||||
arr.push(obj)
|
||||
} else if (data.selectWeapon === 'All') {
|
||||
let obj = {}
|
||||
obj[weapon[1]] = weapon[2]
|
||||
arr.push(obj)
|
||||
if (by === 'hitgroup') {
|
||||
if (Object.values(weapon)[0] === parseInt(Object.keys(data.selectWeapon).toString())) {
|
||||
let obj = {}
|
||||
obj[weapon[1]] = weapon[2]
|
||||
arr.push(obj)
|
||||
} else if (data.selectWeapon === 'All') {
|
||||
let obj = {}
|
||||
obj[weapon[1]] = weapon[2]
|
||||
arr.push(obj)
|
||||
}
|
||||
} else if (by === 'weapon') {
|
||||
if (Object.values(weapon)[0] === parseInt(Object.keys(data.selectWeapon).toString())) {
|
||||
let obj = {}
|
||||
obj[weapon[0]] = weapon[2]
|
||||
arr.push(obj)
|
||||
} else if (data.selectWeapon === 'All') {
|
||||
let obj = {}
|
||||
obj[weapon[0]] = weapon[2]
|
||||
arr.push(obj)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -220,14 +300,26 @@ export default {
|
||||
// 1: hitgroup
|
||||
// 2: dmg
|
||||
if (weapon) {
|
||||
if (Object.values(weapon)[0] === parseInt(Object.keys(data.selectWeapon).toString())) {
|
||||
let obj = {}
|
||||
obj[weapon[1]] = weapon[2]
|
||||
arr.push(obj)
|
||||
} else if (data.selectWeapon === 'All') {
|
||||
let obj = {}
|
||||
obj[weapon[1]] = weapon[2]
|
||||
arr.push(obj)
|
||||
if (by === 'hitgroup') {
|
||||
if (Object.values(weapon)[0] === parseInt(Object.keys(data.selectWeapon).toString())) {
|
||||
let obj = {}
|
||||
obj[weapon[1]] = weapon[2]
|
||||
arr.push(obj)
|
||||
} else if (data.selectWeapon === 'All') {
|
||||
let obj = {}
|
||||
obj[weapon[1]] = weapon[2]
|
||||
arr.push(obj)
|
||||
}
|
||||
} else if (by === 'weapon') {
|
||||
if (Object.values(weapon)[0] === parseInt(Object.keys(data.selectWeapon).toString())) {
|
||||
let obj = {}
|
||||
obj[weapon[0]] = weapon[2]
|
||||
arr.push(obj)
|
||||
} else if (data.selectWeapon === 'All') {
|
||||
let obj = {}
|
||||
obj[weapon[0]] = weapon[2]
|
||||
arr.push(obj)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -247,14 +339,26 @@ export default {
|
||||
// 1: hitgroup
|
||||
// 2: dmg
|
||||
if (weapon) {
|
||||
if (Object.values(weapon)[0] === parseInt(Object.keys(data.selectWeapon).toString())) {
|
||||
let obj = {}
|
||||
obj[weapon[1]] = weapon[2]
|
||||
arr.push(obj)
|
||||
} else if (data.selectWeapon === 'All') {
|
||||
let obj = {}
|
||||
obj[weapon[1]] = weapon[2]
|
||||
arr.push(obj)
|
||||
if (by === 'hitgroup') {
|
||||
if (Object.values(weapon)[0] === parseInt(Object.keys(data.selectWeapon).toString())) {
|
||||
let obj = {}
|
||||
obj[weapon[1]] = weapon[2]
|
||||
arr.push(obj)
|
||||
} else if (data.selectWeapon === 'All') {
|
||||
let obj = {}
|
||||
obj[weapon[1]] = weapon[2]
|
||||
arr.push(obj)
|
||||
}
|
||||
} else if (by === 'weapon') {
|
||||
if (Object.values(weapon)[0] === parseInt(Object.keys(data.selectWeapon).toString())) {
|
||||
let obj = {}
|
||||
obj[weapon[0]] = weapon[2]
|
||||
arr.push(obj)
|
||||
} else if (data.selectWeapon === 'All') {
|
||||
let obj = {}
|
||||
obj[weapon[0]] = weapon[2]
|
||||
arr.push(obj)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -267,10 +371,15 @@ export default {
|
||||
} else {
|
||||
arr = []
|
||||
}
|
||||
buildCharts(sumDmgArr(arr))
|
||||
|
||||
if (by === 'hitgroup') {
|
||||
buildCharts(sumDmgArr(arr))
|
||||
} else if (by === 'weapon') {
|
||||
data.weaponDmg = sumDmgArr(arr, 'weapon')
|
||||
}
|
||||
}
|
||||
|
||||
const sumDmgArr = (arr) => {
|
||||
const sumDmgArr = (arr, by = 'hitgroup') => {
|
||||
let holder = {};
|
||||
|
||||
arr.forEach(function (d) {
|
||||
@@ -284,12 +393,26 @@ export default {
|
||||
|
||||
let arr2 = [];
|
||||
|
||||
for (let i = 1; i < 8; i++) {
|
||||
if (holder[i] !== undefined) {
|
||||
arr2.push(holder[i])
|
||||
} else {
|
||||
arr2.push(0)
|
||||
if (by === 'hitgroup') {
|
||||
for (let i = 1; i < 8; i++) {
|
||||
if (holder[i] !== undefined) {
|
||||
arr2.push(holder[i])
|
||||
} else {
|
||||
arr2.push(0)
|
||||
}
|
||||
}
|
||||
} else if (by === 'weapon') {
|
||||
for (let i = 1; i < 312; i++) {
|
||||
if (holder[i] !== undefined) {
|
||||
let obj = {}
|
||||
obj[i] = holder[i]
|
||||
arr2.push(obj)
|
||||
}
|
||||
}
|
||||
|
||||
arr2.sort((a, b) => {
|
||||
return Object.values(b).toString() - Object.values(a).toString()
|
||||
})
|
||||
}
|
||||
|
||||
return arr2
|
||||
@@ -301,6 +424,7 @@ export default {
|
||||
if (arr[i] > max)
|
||||
max = arr[i]
|
||||
}
|
||||
|
||||
return max
|
||||
}
|
||||
|
||||
@@ -380,6 +504,7 @@ export default {
|
||||
|
||||
watch(() => props.stats, () => {
|
||||
processDmg()
|
||||
processDmg('weapon')
|
||||
processPlayerWeapon()
|
||||
})
|
||||
}
|
||||
@@ -393,6 +518,7 @@ export default {
|
||||
if (window.innerWidth <= 750) {
|
||||
width.value = getWindowWidth() - 20
|
||||
height.value = setHeight()
|
||||
dmgWidth.value = setDmgWidth()
|
||||
}
|
||||
|
||||
buildCharts()
|
||||
@@ -402,34 +528,29 @@ export default {
|
||||
data.selectWeapon = 'All'
|
||||
processPlayerWeapon()
|
||||
processDmg()
|
||||
processDmg('weapon')
|
||||
})
|
||||
|
||||
watch(() => data.selectWeapon, () => {
|
||||
processDmg()
|
||||
processDmg('weapon')
|
||||
})
|
||||
|
||||
return {props, data, store, processPlayerWeapon}
|
||||
return {props, data, store, dmgWidth, processPlayerWeapon, processWeaponDmg, DisplayWeapon}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.hitgroup {
|
||||
.select-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
gap: 1rem;
|
||||
|
||||
.select-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1rem;
|
||||
|
||||
.form-select {
|
||||
background: var(--bs-secondary);
|
||||
color: var(--bs-primary);
|
||||
width: 250px;
|
||||
}
|
||||
.form-select {
|
||||
background: var(--bs-secondary);
|
||||
color: var(--bs-primary);
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user