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

reworked the sub-navigation on the Match-page

Browse Source
This commit is contained in:
cnachtigall1991
2021-10-15 11:11:38 +02:00
parent a29f4b1f2a
commit 3e9d8c47e3
11 changed files with 244 additions and 332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
src/views/Match.vue
View File

@@ -35,89 +35,65 @@
</button>
<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' : ''" :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
class="list-item details"
@click.prevent="data.matchDetails.parsed ? ActivateScoreInfo('details') : null">Details
<li :class="!data.matchDetails.parsed ? 'disabled' : ''"
:title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
class="list-item nav-item">
<router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id"
class="nav-link" name="score">Scoreboard
</router-link>
</li>
<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 :class="!data.matchDetails.parsed ? 'disabled' : ''"
:title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
class="list-item nav-item">
<router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/details'"
class="nav-link" name="score">Details
</router-link>
</li>
<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 :class="!data.matchDetails.parsed ? 'disabled' : ''"
:title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
class="list-item nav-item">
<router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/flashes'"
class="nav-link" name="score">Flashes
</router-link>
</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 :class="!data.matchDetails.parsed ? 'disabled' : ''"-->
<!-- :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"-->
<!-- class="list-item nav-item">-->
<!-- <router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/utility'"-->
<!-- class="nav-link" name="score">Utility-->
<!-- </router-link>-->
<!-- </li>-->
<li :class="!data.matchDetails.parsed ? 'disabled' : ''"
:title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
class="list-item nav-item">
<router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/damage'"
class="nav-link" name="score">Damage
</router-link>
</li>
</ul>
</div>
</div>
<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"/>
<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"/>
</div>
<div id="flashes">
<FlashChart :stats="data.stats" />
</div>
<div id="utility">
<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.dmg.ud"
/>
</div>
<div id="damage">
<DamageChart :stats="data.stats"/>
</div>
<div id="details">
<MultiKillsChart :stats="data.stats"/>
</div>
<router-view name="score"/>
</div>
</template>
<script>
import {defineAsyncComponent, onBeforeMount, onMounted, reactive, watch} from "vue";
import {onBeforeMount, onMounted, reactive, watch} from "vue";
import axios from 'axios'
import {DisplayRank, FormatFullDate, GetHLTV_1, GoToPlayer, LoadImage} from "../utils";
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'))
const MultiKillsChart = defineAsyncComponent(() => import('../components/MultiKillsChart'))
import {DisplayRank, FormatFullDate, GetHLTV_1, GoToLink, GoToPlayer, LoadImage} from "../utils";
import {useStore} from "vuex";
import {useRoute} from 'vue-router'
export default {
name: 'Match',
props: ['match_id'],
components: {
ScoreTeam,
FlashChart,
UtilityChart,
UtilityChartTotal,
DamageChart,
MultiKillsChart
},
setup(props) {
const store = useStore()
const route = useRoute()
store.state.matchDetails = {}
// Refs
const data = reactive({
playerName: '',
@@ -137,6 +113,8 @@ export default {
data.stats = response.data.stats
data.score = response.data.score
store.state.matchDetails = response.data
LoadImage(data.matchDetails.map ? data.matchDetails.map : 'random')
console.log(response.data)
@@ -163,25 +141,6 @@ 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')
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}`)
}
}
// Watchers
watch(() => props.match_id, GetMatch)
watch(() => data.stats, GetAvgRank)
@@ -192,15 +151,13 @@ export default {
})
onMounted(() => {
setTimeout(() => {
if (router.currentRoute.value.href.split('/')[3]) {
ActivateScoreInfo(router.currentRoute.value.href.split('/')[3])
}
}, 200)
if (!route.fullPath.match('details' || 'flashes' || 'damage')) {
GoToLink(`/match/${props.match_id}`)
}
})
return {
GetMatch, GetAvgRank, ActivateScoreInfo, data, GoToPlayer, GetHLTV_1, DisplayRank, FormatFullDate, LoadImage
GetMatch, GetAvgRank, data, GoToPlayer, GetHLTV_1, DisplayRank, FormatFullDate, LoadImage
}
}
}
@@ -235,33 +192,6 @@ export default {
}
}
#scoreWrapper {
z-index: 1;
height: 100%;
width: 100%;
max-width: 100vw;
background: linear-gradient(90deg,
rgba(0, 0, 0, 0.6) 0%,
rgba(0, 0, 0, 0.85) 30%,
rgba(0, 0, 0, 0.85) 70%,
rgba(0, 0, 0, .6) 100%
);
#scoreboard, #flashes, #utility, #damage, #details {
display: none;
flex-direction: column;
align-items: center;
}
#scoreboard.active,
#flashes.active,
#utility.active,
#damage.active,
#details.active {
display: flex;
}
}
.nav {
max-width: 100vw;
background: rgba(0, 0, 0, 0.9);
@@ -274,8 +204,9 @@ export default {
border-top: 1px solid rgba(255, 255, 255, .2);
border-bottom: 1px solid rgba(255, 255, 255, .2);
.list-item {
padding: 10px 10px;
.nav-link {
text-decoration: none;
color: white;
&:hover {
background: var(--bs-info);
@@ -283,7 +214,7 @@ export default {
}
}
.active {
.router-link-exact-active {
background: var(--bs-info)
}
@@ -296,4 +227,20 @@ export default {
}
}
}
#scoreWrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
z-index: 1;
height: 100%;
width: 100%;
max-width: 100vw;
background: linear-gradient(90deg,
rgba(0, 0, 0, 0.6) 0%,
rgba(0, 0, 0, 0.85) 30%,
rgba(0, 0, 0, 0.85) 70%,
rgba(0, 0, 0, .6) 100%
);
}
</style>