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

added pie-charts for flashes

Browse Source
This commit is contained in:
cnachtigall1991
2021-10-10 21:22:09 +02:00
parent 11863f144c
commit e75f70ce05
4 changed files with 301 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/views/Match.vue
View File

@@ -1,5 +1,5 @@
<template>
<img class="bg-img" src="" alt="">
<img alt="" class="bg-img" src="">
<div class="">
<div class="head row m-auto text-center">
@@ -7,9 +7,9 @@
<img v-if="data.matchDetails.map" :alt="data.matchDetails.map"
:src="require('@/images/map_icons/map_icon_' + data.matchDetails.map + '.svg')"
:title="data.matchDetails.map" class="map-icon">
<img v-if="!data.matchDetails.map" alt="Map icon"
:src="require('../images/map_icons/map_icon_lobby_mapveto.svg')"
title="Map unknown" class="map-icon">
<img v-if="!data.matchDetails.map" :src="require('../images/map_icons/map_icon_lobby_mapveto.svg')"
alt="Map icon"
class="map-icon" title="Map unknown">
</div>
<p class="text-center text-muted fs-6">
{{ FormatFullDate(data.matchDetails.date) }}
@@ -35,15 +35,15 @@
</button>
<div id="matchNav" class="collapse navbar-collapse">
<ul class="list-unstyled d-flex m-auto">
<li class="list-item active">Scoreboard</li>
<li class="list-item">Flashes</li>
<li class="list-item">Grenades</li>
<li class="list-item">Damage</li>
<li class="list-item scoreboard active" @click.prevent="ActivateScoreInfo('scoreboard')">Scoreboard</li>
<li class="list-item flashes" @click.prevent="ActivateScoreInfo('flashes')">Flashes</li>
<li class="list-item grenades" @click.prevent="ActivateScoreInfo('grenades')">Grenades</li>
<li class="list-item damage" @click.prevent="ActivateScoreInfo('damage')">Damage</li>
</ul>
</div>
</div>
<div v-if="data.score.length === 2 && data.stats" class="scoreboard">
<div id="scoreboard">
<div v-if="data.score.length === 2 && data.stats" id="scoreWrapper" class="scoreboard">
<div id="scoreboard" class="active">
<ScoreTeam
: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)"
@@ -56,20 +56,41 @@
:stats="data.stats" :team_id="2"/>
</div>
<div id="flashes">
<FlashChart v-for="(player, id) in data.stats" :key="player.player.steamid64"
:id="id"
:avatar="player.player.avatar"
:duration="player.extended.flash.duration"
:name="player.player.name"
:total="player.extended.flash.total"
/>
</div>
<div id="grenades">
Grenades
</div>
<div id="damage">
Damage
</div>
</div>
</template>
<script>
import {defineAsyncComponent, onBeforeMount, reactive, watch} from "vue";
import axios from 'axios'
import {DisplayRank, GetHLTV_1, GoToPlayer, FormatFullDate, LoadImage} from "../utils";
import {DisplayRank, FormatFullDate, GetHLTV_1, GoToPlayer, LoadImage} from "../utils";
const ScoreTeam = defineAsyncComponent(() => import('../components/ScoreTeam'))
const FlashChart = defineAsyncComponent(() => import('../components/FlashChart'))
export default {
name: 'Match',
props: ['match_id'],
components: {ScoreTeam},
components: {
ScoreTeam,
FlashChart,
},
setup(props) {
// Refs
const data = reactive({
@@ -116,6 +137,19 @@ export default {
data.avgRank = Math.floor(fullRank / count)
}
const ActivateScoreInfo = (id) => {
const activeNavItems = document.querySelector('#matchNav').querySelectorAll('.active')
const newNavItem = document.querySelector(`#matchNav .${id}`)
const activeItems = document.querySelector('#scoreWrapper').querySelectorAll('.active')
const newItem = document.querySelector(`#scoreWrapper #${id}`)
activeNavItems.forEach(item => item.classList.remove('active'))
activeItems.forEach(item => item.classList.remove('active'))
newNavItem.classList.add('active')
newItem.classList.add('active')
}
// Watchers
watch(() => props.match_id, GetMatch)
watch(() => data.stats, GetAvgRank)
@@ -126,7 +160,7 @@ export default {
})
return {
GetMatch, GetAvgRank, data, GoToPlayer, GetHLTV_1, DisplayRank, FormatFullDate, LoadImage
GetMatch, GetAvgRank, ActivateScoreInfo, data, GoToPlayer, GetHLTV_1, DisplayRank, FormatFullDate, LoadImage
}
}
}
@@ -161,8 +195,10 @@ export default {
}
}
.scoreboard {
#scoreWrapper {
z-index: 1;
height: 100%;
width: 100%;
max-width: 100vw;
background: linear-gradient(90deg,
rgba(0, 0, 0, 0.6) 0%,
@@ -171,11 +207,18 @@ export default {
rgba(0, 0, 0, .6) 100%
);
div {
display: flex;
#scoreboard, #flashes, #grenades, #damage {
display: none;
flex-direction: column;
align-items: center;
}
#scoreboard.active,
#flashes.active,
#grenades.active,
#damage.active {
display: flex;
}
}
.nav {