#5 added Hitgroup-Puppet to DamageSite
This commit is contained in:
364
src/components/HitgroupPuppet.vue
Normal file
364
src/components/HitgroupPuppet.vue
Normal file
@@ -0,0 +1,364 @@
|
||||
<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 disabled value="">Select a Player</option>
|
||||
<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-model="data.selectWeapon" class="form-select">
|
||||
<option disabled value="">Select a Weapon</option>
|
||||
<option class="select-hr" value="All">All</option>
|
||||
<option disabled>───────────────────────────</option>
|
||||
<option v-for="(value, index) in data.eq_map" :key="index" :value="value">
|
||||
{{ Object.values(value).toString().charAt(0).toUpperCase() + Object.values(value).toString().slice(1) }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div v-show="false" :key="data.selectWeapon || data.selectPlayer">{{ processDmg() }}</div>
|
||||
|
||||
<div id="hitgroup-puppet"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts/core';
|
||||
import {GeoComponent, TooltipComponent, VisualMapComponent} from 'echarts/components';
|
||||
import {MapChart} from 'echarts/charts';
|
||||
import {CanvasRenderer} from 'echarts/renderers';
|
||||
import {onMounted, onUnmounted, reactive, ref} from "vue";
|
||||
import {useStore} from "vuex";
|
||||
|
||||
import $ from 'jquery'
|
||||
|
||||
export default {
|
||||
name: "HitgroupPuppet.vue",
|
||||
props: {
|
||||
equipment_map: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
stats: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const store = useStore()
|
||||
|
||||
const data = reactive({
|
||||
selectPlayer: '',
|
||||
selectWeapon: '',
|
||||
eq_map: []
|
||||
})
|
||||
|
||||
console.log(store.state.playersArr)
|
||||
|
||||
setTimeout(() => {
|
||||
for (let i in props.equipment_map) {
|
||||
if (i < 500) {
|
||||
const obj = {}
|
||||
obj[i] = props.equipment_map[i]
|
||||
data.eq_map.push(obj)
|
||||
}
|
||||
}
|
||||
}, 400)
|
||||
|
||||
let myChart1
|
||||
|
||||
const getWindowWidth = () => {
|
||||
const windowWidth = window.innerWidth
|
||||
if (windowWidth <= 750)
|
||||
return windowWidth
|
||||
else
|
||||
return 650
|
||||
}
|
||||
|
||||
const setHeight = () => {
|
||||
const windowWidth = getWindowWidth()
|
||||
if (windowWidth >= 751)
|
||||
return windowWidth * 3 / 7.5
|
||||
else if (windowWidth >= 501 && windowWidth <= 750)
|
||||
return windowWidth * 3 / 6.5
|
||||
else
|
||||
return windowWidth * 3 / 5.5
|
||||
}
|
||||
|
||||
const width = ref(getWindowWidth())
|
||||
const height = ref(setHeight())
|
||||
|
||||
const processDmg = () => {
|
||||
let arr = []
|
||||
if (data.selectPlayer && data.selectWeapon) {
|
||||
switch (data.selectPlayer) {
|
||||
case "All":
|
||||
props.stats.forEach(player => {
|
||||
Object.values(player).forEach(enemies => {
|
||||
Object.values(enemies).forEach(weapons => {
|
||||
Object.values(weapons).forEach(weapon => {
|
||||
// 0: weapon
|
||||
// 1: hitgroup
|
||||
// 2: dmg
|
||||
if (weapon) {
|
||||
if (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)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
break;
|
||||
|
||||
case "Team 1":
|
||||
props.stats.forEach(player => {
|
||||
store.state.playersArr.forEach(p => {
|
||||
if (p.player.steamid64 === Object.keys(player).toString() && p.team_id === 1)
|
||||
Object.values(player).forEach(enemies => {
|
||||
Object.values(enemies).forEach(weapons => {
|
||||
Object.values(weapons).forEach(weapon => {
|
||||
// 0: weapon
|
||||
// 1: hitgroup
|
||||
// 2: dmg
|
||||
if (weapon) {
|
||||
if (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)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
break;
|
||||
|
||||
case "Team 2":
|
||||
props.stats.forEach(player => {
|
||||
store.state.playersArr.forEach(p => {
|
||||
if (p.player.steamid64 === Object.keys(player).toString() && p.team_id === 2)
|
||||
Object.values(player).forEach(enemies => {
|
||||
Object.values(enemies).forEach(weapons => {
|
||||
Object.values(weapons).forEach(weapon => {
|
||||
// 0: weapon
|
||||
// 1: hitgroup
|
||||
// 2: dmg
|
||||
if (weapon) {
|
||||
if (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)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
break;
|
||||
|
||||
default:
|
||||
props.stats.forEach(player => {
|
||||
if (Object.keys(player).toString() === data.selectPlayer.steamid64) {
|
||||
Object.values(player).forEach(enemies => {
|
||||
Object.values(enemies).forEach(weapons => {
|
||||
Object.values(weapons).forEach(weapon => {
|
||||
// 0: weapon
|
||||
// 1: hitgroup
|
||||
// 2: dmg
|
||||
if (weapon) {
|
||||
if (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)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
break;
|
||||
}
|
||||
buildCharts(sumDmgArr(arr))
|
||||
}
|
||||
}
|
||||
|
||||
const sumDmgArr = (arr) => {
|
||||
let holder = {};
|
||||
|
||||
arr.forEach(function (d) {
|
||||
// eslint-disable-next-line no-prototype-builtins
|
||||
if (holder.hasOwnProperty(parseInt(Object.keys(d).toString()))) {
|
||||
holder[parseInt(Object.keys(d).toString())] = holder[parseInt(Object.keys(d).toString())] + parseInt(Object.values(d).toString());
|
||||
} else {
|
||||
holder[parseInt(Object.keys(d).toString())] = parseInt(Object.values(d).toString());
|
||||
}
|
||||
});
|
||||
|
||||
let arr2 = [];
|
||||
|
||||
for (let i = 1; i < 8; i++) {
|
||||
if (holder[i] !== undefined) {
|
||||
arr2.push(holder[i])
|
||||
} else {
|
||||
arr2.push(0)
|
||||
}
|
||||
}
|
||||
|
||||
return arr2
|
||||
}
|
||||
|
||||
const getMax = (arr) => {
|
||||
let max = 0
|
||||
for (let i = 0; i < 7; i++) {
|
||||
if (arr[i] > max)
|
||||
max = arr[i]
|
||||
}
|
||||
return max
|
||||
}
|
||||
|
||||
const optionGen = (arr = []) => {
|
||||
return {
|
||||
tooltip: {},
|
||||
visualMap: {
|
||||
left: 'center',
|
||||
bottom: '5%',
|
||||
textStyle: {
|
||||
color: 'white',
|
||||
},
|
||||
min: 0,
|
||||
max: getMax(arr) || 100,
|
||||
orient: 'horizontal',
|
||||
realtime: true,
|
||||
calculable: true,
|
||||
inRange: {
|
||||
color: ['#00ff00', '#db6e00', '#cf0000']
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Hitgroup Dummy',
|
||||
type: 'map',
|
||||
map: 'hitgroup-puppet',
|
||||
top: '0%',
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
selectedMode: false,
|
||||
data: [
|
||||
{name: 'Head', value: arr[0] || 0},
|
||||
{name: 'Chest', value: arr[1] || 0},
|
||||
{name: 'Stomach', value: arr[2] || 0},
|
||||
{name: 'Left Arm', value: arr[3] || 0},
|
||||
{name: 'Right Arm', value: arr[4] || 0},
|
||||
{name: 'Left Foot', value: arr[5] || 0},
|
||||
{name: 'Right Foot', value: arr[6] || 0}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
const disposeCharts = () => {
|
||||
if (myChart1 != null && myChart1 !== '' && myChart1 !== undefined) {
|
||||
myChart1.dispose()
|
||||
}
|
||||
}
|
||||
|
||||
const buildCharts = (arr) => {
|
||||
disposeCharts()
|
||||
|
||||
myChart1 = echarts.init(document.getElementById('hitgroup-puppet'), {}, {width: 500, height: 500})
|
||||
|
||||
const url = require('@/assets/images/icons/hitgroup-puppet.svg')
|
||||
$.get(url, function (svg) {
|
||||
echarts.registerMap('hitgroup-puppet', {svg: svg})
|
||||
myChart1.setOption(optionGen(arr));
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (store.state.matchDetails.stats) {
|
||||
echarts.use([
|
||||
TooltipComponent,
|
||||
VisualMapComponent,
|
||||
GeoComponent,
|
||||
MapChart,
|
||||
CanvasRenderer
|
||||
]);
|
||||
|
||||
buildCharts()
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
disposeCharts()
|
||||
})
|
||||
|
||||
window.onresize = () => {
|
||||
if (window.innerWidth <= 750) {
|
||||
width.value = getWindowWidth() - 20
|
||||
height.value = setHeight()
|
||||
}
|
||||
|
||||
buildCharts()
|
||||
}
|
||||
|
||||
return {props, data, store, processDmg}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.hitgroup {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.select-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1rem;
|
||||
|
||||
.form-select {
|
||||
background: var(--bs-secondary);
|
||||
color: var(--bs-primary);
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user