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

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;
}
}