more match-info, parsed-icon on player-page, disabled score-nav-links for not-parsed demos

This commit is contained in:
cnachtigall1991
2021-10-12 02:43:20 +02:00
parent 76aba61361
commit a53c4a3c14
10 changed files with 487 additions and 78 deletions

View File

@@ -36,8 +36,15 @@
<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="list-item flashes" @click.prevent="ActivateScoreInfo('flashes')">Flashes</li>
<li class="list-item utility" @click.prevent="ActivateScoreInfo('utility')">Utility</li>
<li :class="!data.matchDetails.parsed ? 'disabled' : ''" class="list-item flashes"
@click.prevent="data.matchDetails.parsed ? ActivateScoreInfo('flashes') : null">Flashes
</li>
<li :class="!data.matchDetails.parsed ? 'disabled' : ''" class="list-item utility"
@click.prevent="data.matchDetails.parsed ? ActivateScoreInfo('utility') : null">Utility
</li>
<li :class="!data.matchDetails.parsed ? 'disabled' : ''" class="list-item damage"
@click.prevent="data.matchDetails.parsed ? ActivateScoreInfo('damage') : null">Damage
</li>
</ul>
</div>
</div>
@@ -56,8 +63,8 @@
</div>
<div id="flashes">
<FlashChart v-for="(player, id) in data.stats" :key="player.player.steamid64"
:id="id"
<FlashChart v-for="(player, id) in data.stats" :id="id"
:key="player.player.steamid64"
:avatar="player.player.avatar"
:duration="player.extended.flash.duration"
:name="player.player.name"
@@ -66,16 +73,17 @@
</div>
<div id="utility">
<UtilityChart v-for="(player, id) in data.stats" :key="player.player.steamid64"
:id="id"
:avatar="player.player.avatar"
<UtilityChartTotal :stats="data.stats"/>
<UtilityChart v-for="(player, id) in data.stats" :id="id"
:key="player.player.steamid64"
:avatar="player.player.avatar"
:name="player.player.name"
:ud="player.extended.dmg.ud"
:ud="player.extended.dmg.ud"
/>
</div>
<div id="damage">
Damage
<DamageChart :stats="data.stats" />
</div>
</div>
</template>
@@ -89,6 +97,8 @@ import router from "../router";
const ScoreTeam = defineAsyncComponent(() => import('../components/ScoreTeam'))
const FlashChart = defineAsyncComponent(() => import('../components/FlashChart'))
const UtilityChart = defineAsyncComponent(() => import('../components/UtilityChart'))
const UtilityChartTotal = defineAsyncComponent(() => import('../components/UtilityChartTotal'))
const DamageChart = defineAsyncComponent(() => import('../components/DamageChart'))
export default {
name: 'Match',
@@ -97,6 +107,8 @@ export default {
ScoreTeam,
FlashChart,
UtilityChart,
UtilityChartTotal,
DamageChart
},
setup(props) {
// Refs
@@ -156,10 +168,10 @@ export default {
newNavItem.classList.add('active')
newItem.classList.add('active')
if (id === 'flashes' || id === 'utility'){
history.pushState({}, null, `/match/${data.matchDetails.match_id}/${id}`)
if (id === 'flashes' || id === 'utility' || id === 'damage') {
history.replaceState({}, null, `/match/${data.matchDetails.match_id}/${id}`)
} else if (id === 'scoreboard') {
history.pushState({}, null, `/match/${data.matchDetails.match_id}`)
history.replaceState({}, null, `/match/${data.matchDetails.match_id}`)
}
}
@@ -173,11 +185,11 @@ export default {
})
onMounted(() => {
if (router.currentRoute.value.href.split('/')[3]) {
setTimeout(() => {
setTimeout(() => {
if (router.currentRoute.value.href.split('/')[3]) {
ActivateScoreInfo(router.currentRoute.value.href.split('/')[3])
}, 500)
}
}
}, 200)
})
return {
@@ -266,5 +278,14 @@ export default {
.active {
background: var(--bs-info)
}
.disabled {
color: #585858;
&:hover {
background: transparent;
cursor: default;
}
}
}
</style>