CSGOWTF/csgowtf
3
2
Fork 1
Code Issues 18 Pull Requests Projects Releases 7 Wiki Activity

refactored to match api-changes + added multi-kill-chart

Browse Source
This commit is contained in:
cnachtigall1991
2021-10-13 18:19:05 +02:00
parent f033f4bd26
commit 66c18ffe02
7 changed files with 270 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/DamageChart.vue
View File

@@ -71,11 +71,11 @@ export default {
let arr = []
if (team === 1) {
for (let i = 0; i < 5; i++) {
arr.push(-checkStatEmpty(stats[i].extended.dmg.team))
arr.push(-checkStatEmpty(stats[i].dmg.team))
}
} else {
for (let i = 5; i < stats.length; i++) {
arr.push(-checkStatEmpty(stats[i].extended.dmg.team))
arr.push(-checkStatEmpty(stats[i].dmg.team))
}
}
arr.reverse()
@@ -87,18 +87,18 @@ export default {
if (team === 1) {
for (let i = 0; i < 5; i++) {
arr.push({
value: checkStatEmpty(stats[i].extended.dmg.enemy),
value: checkStatEmpty(stats[i].dmg.enemy),
itemStyle: {
color: getComputedStyle(document.documentElement).getPropertyValue(`--csgo-${stats[i].extended.color}`)
color: getComputedStyle(document.documentElement).getPropertyValue(`--csgo-${stats[i].color}`)
}
})
}
} else {
for (let i = 5; i < stats.length; i++) {
arr.push({
value: checkStatEmpty(stats[i].extended.dmg.enemy),
value: checkStatEmpty(stats[i].dmg.enemy),
itemStyle: {
color: getComputedStyle(document.documentElement).getPropertyValue(`--csgo-${stats[i].extended.color}`)
color: getComputedStyle(document.documentElement).getPropertyValue(`--csgo-${stats[i].color}`)
}
})
}

186
src/components/MultiKillsChart.vue Normal file
View File

@@ -0,0 +1,186 @@
<template>
<div class="multi-kills-chart">
<h4 class="text-center">Multi-Kills</h4>
<div id="multi-kills-chart"></div>
</div>
</template>
<script>
import * as echarts from 'echarts/core';
import {GridComponent, TooltipComponent, VisualMapComponent} from 'echarts/components';
import {HeatmapChart} from 'echarts/charts';
import {CanvasRenderer} from 'echarts/renderers';
import {onMounted} from "vue";
export default {
name: "FlashChart",
props: {
stats: {
type: Object,
required: true
}
},
setup(props) {
const teamArr = (stats) => {
let arr = []
for (let i = 0; i < stats.length; i++) {
arr.push(truncate(checkStatEmpty(stats[i].player.name), 15))
}
arr.reverse()
return arr
}
const multiKillArr = (stats) => {
let arr = []
for (let i = 0; i < stats.length; i++) {
for (let j = 0; j < multiKills.length; j++) {
if (j === 0)
arr.push([i, j, checkStatEmpty(stats[i].multi_kills.duo)])
if (j === 1)
arr.push([i, j, checkStatEmpty(stats[i].multi_kills.triple)])
if (j === 2)
arr.push([i, j, checkStatEmpty(stats[i].multi_kills.quad)])
if (j === 3)
arr.push([i, j, checkStatEmpty(stats[i].multi_kills.pent)])
}
}
return arr
}
const getMax = (stats) => {
let max = 0
for (let i = 0; i < stats.length; i++) {
if (stats[i].multi_kills.duo > max)
max = stats[i].multi_kills.duo
if (stats[i].multi_kills.triple > max)
max = stats[i].multi_kills.triple
if (stats[i].multi_kills.quad > max)
max = stats[i].multi_kills.quad
if (stats[i].multi_kills.pent > max)
max = stats[i].multi_kills.pent
}
return max
}
const checkStatEmpty = (stat) => {
if (stat)
return stat
}
const truncate = (str, len, ending) => {
if (len == null)
len = 100
if (ending == null)
ending = '..'
if (str.length > len)
return str.substring(0, len - ending.length) + ending
else
return str
}
const multiKills = ['2k', '3k', '4k', '5k']
const player = teamArr(props.stats)
const data = multiKillArr(props.stats)
const max = getMax(props.stats)
const optionGen = (player, data) => {
return {
tooltip: {
position: 'top'
},
grid: {
height: '50%',
top: '10%'
},
xAxis: {
type: 'category',
data: player,
splitArea: {
show: true
},
axisLabel: {
fontSize: 14,
color: 'white',
rotate: 50
}
},
yAxis: {
type: 'category',
data: multiKills,
splitArea: {
show: true
},
axisLabel: {
color: 'white'
}
},
visualMap: {
min: 0,
max: max,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%',
textStyle: {
color: 'white'
}
},
series: [
{
name: 'Mutlki-Kill',
type: 'heatmap',
data: data,
label: {
fontSize: 14,
show: true
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
}
onMounted(() => {
echarts.use([
TooltipComponent,
GridComponent,
VisualMapComponent,
HeatmapChart,
CanvasRenderer
]);
let myChart = echarts.init(document.getElementById('multi-kills-chart'), {}, {width: 1000, height: 600});
let option = optionGen(player, data)
myChart.setOption(option);
})
return {props}
}
}
</script>
<style lang="scss" scoped>
.multi-kills-chart {
flex-direction: column;
align-items: center;
h4 {
margin-top: 1rem;
margin-bottom: -40px;
}
#multi-kills-chart {
margin: 0;
}
}
</style>

14
src/components/ScoreTeam.vue
View File

@@ -27,20 +27,20 @@
:assists="player.assists"
:avatar="player.player.avatar"
:deaths="player.deaths"
:dmg="player.extended?.dmg?.enemy"
:dmg="player.dmg?.enemy"
:hs="player.headshot"
:kdiff="player.kills - player.deaths"
:kills="player.kills"
:mk_duo="player.extended?.multi_kills?.duo"
:mk_pent="player.extended?.multi_kills?.pent"
:mk_quad="player.extended?.multi_kills?.quad"
:mk_triple="player.extended?.multi_kills?.triple"
:mk_duo="player.multi_kills?.duo"
:mk_pent="player.multi_kills?.pent"
:mk_quad="player.multi_kills?.quad"
:mk_triple="player.multi_kills?.triple"
:mvp="player.mvp"
:name="player.player.name"
:player_score="player.score"
:rank="player.extended?.rank?.old"
:rank="player.rank?.old"
:rounds_played="props.rounds_played"
:color="player.extended?.color"
:color="player.color"
:tracked="player.player.tracked"
:parsed="props.parsed"
/>

2
src/components/UtilityChartTotal.vue
View File

@@ -34,7 +34,7 @@ export default {
const seriesArr = (stats) => {
let arr = []
for (let i = 0; i < stats.length; i++) {
const sum = checkStatEmpty(stats[i].extended.dmg.ud.flames) + checkStatEmpty(stats[i].extended.dmg.ud.flash) + checkStatEmpty(stats[i].extended.dmg.ud.he) + checkStatEmpty(stats[i].extended.dmg.ud.smoke)
const sum = checkStatEmpty(stats[i].dmg.ud.flames) + checkStatEmpty(stats[i].dmg.ud.flash) + checkStatEmpty(stats[i].dmg.ud.he) + checkStatEmpty(stats[i].dmg.ud.smoke)
if (sum !== 0) {
arr.push({

4
src/router/index.js
View File

@@ -1,4 +1,4 @@
import { createRouter, createWebHistory } from 'vue-router'
import {createRouter, createWebHistory} from 'vue-router'
function lazyLoad(view) {
return () => import(`@/views/${view}.vue`)
@@ -21,7 +21,7 @@ const routes = [
name: 'Match',
component: lazyLoad('Match'),
props: true,
alias: ['/match/:match_id/flashes', '/match/:match_id/utility', '/match/:match_id/damage']
alias: ['/match/:match_id/flashes', '/match/:match_id/utility', '/match/:match_id/damage', '/match/:match_id/details']
},
{
path: '/explore',

54
src/views/Match.vue
View File

@@ -36,14 +36,21 @@
<div id="matchNav" class="collapse navbar-collapse">
<ul class="list-unstyled d-flex m-auto">
<li class="list-item scoreboard active" @click.prevent="ActivateScoreInfo('scoreboard')">Scoreboard</li>
<li :class="!data.matchDetails.parsed ? 'disabled' : ''" class="list-item flashes"
@click.prevent="data.matchDetails.parsed ? ActivateScoreInfo('flashes') : null" :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''">Flashes
<li :class="!data.matchDetails.parsed ? 'disabled' : ''" :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
class="list-item details"
@click.prevent="data.matchDetails.parsed ? ActivateScoreInfo('details') : null">Details
</li>
<li :class="!data.matchDetails.parsed ? 'disabled' : ''" class="list-item utility"
@click.prevent="data.matchDetails.parsed ? ActivateScoreInfo('utility') : null" :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''">Utility
<li :class="!data.matchDetails.parsed ? 'disabled' : ''" :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
class="list-item flashes"
@click.prevent="data.matchDetails.parsed ? ActivateScoreInfo('flashes') : null">Flashes
</li>
<li :class="!data.matchDetails.parsed ? 'disabled' : ''" class="list-item damage"
@click.prevent="data.matchDetails.parsed ? ActivateScoreInfo('damage') : null" :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''">Damage
<li :class="!data.matchDetails.parsed ? 'disabled' : ''" :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
class="list-item utility"
@click.prevent="data.matchDetails.parsed ? ActivateScoreInfo('utility') : null">Utility
</li>
<li :class="!data.matchDetails.parsed ? 'disabled' : ''" :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
class="list-item damage"
@click.prevent="data.matchDetails.parsed ? ActivateScoreInfo('damage') : null">Damage
</li>
</ul>
</div>
@@ -51,24 +58,24 @@
<div v-if="data.score.length === 2 && data.stats" id="scoreWrapper" class="scoreboard">
<div id="scoreboard" class="active">
<ScoreTeam
:parsed="data.matchDetails.parsed"
:rounds="data.matchDetails.max_rounds ? data.matchDetails.max_rounds : data.score[data.matchDetails.match_result - 1] === 16 ? 30 : data.score[data.matchDetails.match_result - 1] === 15 ? 30 : 16"
:rounds_played="data.score.reduce((a, b) => a + b)"
:score="data.score[0]"
:stats="data.stats" :team_id="1" :parsed="data.matchDetails.parsed" />
:score="data.score[0]" :stats="data.stats" :team_id="1"/>
<ScoreTeam
:parsed="data.matchDetails.parsed"
:rounds="data.matchDetails.max_rounds ? data.matchDetails.max_rounds : data.score.reduce((a, b) => a + b) >= 16 ? 30 : 16"
:rounds_played="data.score.reduce((a, b) => a + b)"
:score="data.score[1]"
:stats="data.stats" :team_id="2" :parsed="data.matchDetails.parsed" />
:score="data.score[1]" :stats="data.stats" :team_id="2"/>
</div>
<div id="flashes">
<FlashChart v-for="(player, id) in data.stats" :id="id"
:key="player.player.steamid64"
:avatar="player.player.avatar"
:duration="player.extended.flash.duration"
:duration="player.flash.duration"
:name="player.player.name"
:total="player.extended.flash.total"
:total="player.flash.total"
/>
</div>
@@ -78,12 +85,16 @@
:key="player.player.steamid64"
:avatar="player.player.avatar"
:name="player.player.name"
:ud="player.extended.dmg.ud"
:ud="player.dmg.ud"
/>
</div>
<div id="damage">
<DamageChart :stats="data.stats" />
<DamageChart :stats="data.stats"/>
</div>
<div id="details">
<MultiKillsChart :stats="data.stats"/>
</div>
</div>
</template>
@@ -99,6 +110,7 @@ const FlashChart = defineAsyncComponent(() => import('../components/FlashChart')
const UtilityChart = defineAsyncComponent(() => import('../components/UtilityChart'))
const UtilityChartTotal = defineAsyncComponent(() => import('../components/UtilityChartTotal'))
const DamageChart = defineAsyncComponent(() => import('../components/DamageChart'))
const MultiKillsChart = defineAsyncComponent(() => import('../components/MultiKillsChart'))
export default {
name: 'Match',
@@ -108,7 +120,8 @@ export default {
FlashChart,
UtilityChart,
UtilityChartTotal,
DamageChart
DamageChart,
MultiKillsChart
},
setup(props) {
// Refs
@@ -144,8 +157,8 @@ export default {
let fullRank = 0
data.stats?.map(player => {
if (player.extended?.rank?.old) {
fullRank += player.extended?.rank?.old
if (player.rank?.old) {
fullRank += player.rank?.old
count += 1
}
})
@@ -168,7 +181,7 @@ export default {
newNavItem.classList.add('active')
newItem.classList.add('active')
if (id === 'flashes' || id === 'utility' || id === 'damage') {
if (['flashes', 'utility', 'damage', 'details'].indexOf(id) > -1) {
history.replaceState({}, null, `/match/${data.matchDetails.match_id}/${id}`)
} else if (id === 'scoreboard') {
history.replaceState({}, null, `/match/${data.matchDetails.match_id}`)
@@ -240,7 +253,7 @@ export default {
rgba(0, 0, 0, .6) 100%
);
#scoreboard, #flashes, #utility, #damage {
#scoreboard, #flashes, #utility, #damage, #details {
display: none;
flex-direction: column;
align-items: center;
@@ -249,7 +262,8 @@ export default {
#scoreboard.active,
#flashes.active,
#utility.active,
#damage.active {
#damage.active,
#details.active {
display: flex;
}
}

62
src/views/Player.vue
View File

@@ -122,7 +122,7 @@
<tbody>
<tr v-for="match in data.matches"
:key="match.match_id"
:class="GetWinLoss(match.match_result, match.stats[0].team_id)"
:class="GetWinLoss(match.match_result, match.stats.team_id)"
class="match"
@click="GoToMatch(match.match_id)">
<td class="td-map text-center">
@@ -135,9 +135,9 @@
</td>
<td class="td-rank text-center">
<img
:alt="DisplayRank(match.stats[0].extended?.rank?.new)[1]"
:src="DisplayRank(match.stats[0].extended?.rank?.new)[0]"
:title="DisplayRank(match.stats[0].extended?.rank?.new)[1]"
:alt="DisplayRank(match.stats.rank?.new)[1]"
:src="DisplayRank(match.stats.rank?.new)[0]"
:title="DisplayRank(match.stats.rank?.new)[1]"
class="rank-icon">
</td>
<td class="td-length text-center">
@@ -145,43 +145,43 @@
title="Long match"></i>
<i v-if="match.max_rounds === 16" class="far fa-circle text-muted" title="Short match"></i>
</td>
<td :class="match.stats[0].team_id === match.match_result ? 'text-success' : !match.match_result ? 'text-warning' : 'text-danger'"
<td :class="match.stats.team_id === match.match_result ? 'text-success' : !match.match_result ? 'text-warning' : 'text-danger'"
class="td-score text-center fw-bold">
{{ match.score[0] }} - {{ match.score[1] }}
</td>
<td class="td-kills text-center">
{{ match.stats[0].kills ? match.stats[0].kills : "0" }}
{{ match.stats.kills ? match.stats.kills : "0" }}
</td>
<td class="td-assists text-center">
{{ match.stats[0].assists ? match.stats[0].assists : "0" }}
{{ match.stats.assists ? match.stats.assists : "0" }}
</td>
<td class="td-deaths text-center">
{{ match.stats[0].deaths ? match.stats[0].deaths : "0" }}
{{ match.stats.deaths ? match.stats.deaths : "0" }}
</td>
<td :class="(match.stats[0].kills ? match.stats[0].kills : 0) - (match.stats[0].deaths ? match.stats[0].deaths : 0) >= 0 ? 'text-success' : 'text-danger'"
<td :class="(match.stats.kills ? match.stats.kills : 0) - (match.stats.deaths ? match.stats.deaths : 0) >= 0 ? 'text-success' : 'text-danger'"
class="td-plus text-center">
{{
(match.stats[0].kills ? match.stats[0].kills : 0) - (match.stats[0].deaths ? match.stats[0].deaths : 0)
(match.stats.kills ? match.stats.kills : 0) - (match.stats.deaths ? match.stats.deaths : 0)
}}
</td>
<td :class="GetHLTV_1(
match.stats[0].kills,
match.stats.kills,
match.score[0] + match.score[1],
match.stats[0].deaths,
match.stats[0].extended?.multi_kills?.duo,
match.stats[0].extended?.multi_kills?.triple,
match.stats[0].extended?.multi_kills?.quad,
match.stats[0].extended?.multi_kills?.pent) >= 1 ? 'text-success' : 'text-warning'"
match.stats.deaths,
match.stats.multi_kills?.duo,
match.stats.multi_kills?.triple,
match.stats.multi_kills?.quad,
match.stats.multi_kills?.pent) >= 1 ? 'text-success' : 'text-warning'"
class="td-hltv text-center fw-bold">
{{
GetHLTV_1(
match.stats[0].kills,
match.stats.kills,
match.score[0] + match.score[1],
match.stats[0].deaths,
match.stats[0].extended?.multi_kills?.duo,
match.stats[0].extended?.multi_kills?.triple,
match.stats[0].extended?.multi_kills?.quad,
match.stats[0].extended?.multi_kills?.pent)
match.stats.deaths,
match.stats.multi_kills?.duo,
match.stats.multi_kills?.triple,
match.stats.multi_kills?.quad,
match.stats.multi_kills?.pent)
}}
</td>
<td :title="FormatFullDuration(match.duration)" class="td-duration text-center">
@@ -270,6 +270,8 @@ export default {
document.title = `${data.playerDetails.name} | csgoWTF`
console.log(data.playerDetails)
} else {
GoToLink('/')
}
} else {
GoToLink('/')
@@ -279,13 +281,15 @@ export default {
const TrackPlayer = async () => {
[data.statusErrorCode, data.statusError] = await TrackMe(data.playerDetails.steamid64, data.userData.authcode, data.userData.sharecode)
// setTimeout(() => {
if (data.statusErrorCode === 202) {
data.statusErrorCode = 0
data.statusError = ''
data.tracked = true
}
// }, 2000)
setTimeout(() => {
if (data.statusErrorCode === 202) {
data.statusErrorCode = 0
data.statusError = ''
data.tracked = true
}
window.location.reload()
}, 2000)
}
onMounted(() => {