127 lines
3.3 KiB
Vue
127 lines
3.3 KiB
Vue
<template>
|
|
<div class="pt-3">
|
|
<p class="text-center fs-6">Average Rank: <img :src="require('@/images/ranks/' + data.avgRank + '.png')"
|
|
alt="Rank icon"
|
|
class="rank-icon mx-2"/></p>
|
|
<div v-if="data.matchDetails" class="head row m-auto mb-3 text-center">
|
|
<div class="m-auto">
|
|
<img :alt="data.matchDetails.map"
|
|
:src="mapImg.includes(data.matchDetails.map) ? require('@/images/maps/' + data.matchDetails.map + '.png') : require('@/images/maps/not_found.png')"
|
|
:title="data.matchDetails.map" class="map-icon">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="nav">
|
|
<ul class="list-unstyled d-flex m-auto">
|
|
<li class="list-item active">Scoreboard</li>
|
|
<li class="list-item">Rounds</li>
|
|
<li class="list-item">Weapons</li>
|
|
<li class="list-item">Duels</li>
|
|
<li class="list-item">Heatmaps</li>
|
|
</ul>
|
|
</div>
|
|
<div class="container row m-auto">
|
|
<div v-if="data.score.length === 2 && data.stats" class="col-8 m-auto d-flex flex-column">
|
|
<ScoreTeam :rounds_played="data.score.reduce((a, b) => a + b)" :stats="data.stats" :team_id="1" :score="data.score[0]"/>
|
|
<ScoreTeam :rounds_played="data.score.reduce((a, b) => a + b)" :stats="data.stats" :team_id="2" :score="data.score[1]"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {defineAsyncComponent, onBeforeMount, reactive, watch} from "vue";
|
|
import axios from 'axios'
|
|
import {GetHLTV_1, GoToPlayer} from "../utils";
|
|
|
|
const ScoreTeam = defineAsyncComponent(() => import('../components/ScoreTeam'))
|
|
|
|
export default {
|
|
name: 'Match',
|
|
props: ['match_id'],
|
|
components: {ScoreTeam},
|
|
setup(props) {
|
|
// Vars
|
|
const mapImg = ['de_inferno', 'de_mirage', 'de_overpass']
|
|
|
|
// Refs
|
|
const data = reactive({
|
|
playerName: '',
|
|
matchDetails: {},
|
|
stats: [],
|
|
score: [0],
|
|
avgRank: 0,
|
|
})
|
|
|
|
// Functions
|
|
const GetMatch = () => {
|
|
axios
|
|
.get(`http://localhost:8000/match/${props.match_id}`)
|
|
.then((response) => {
|
|
document.title = `${response.data.map} | csgoWTF`
|
|
data.matchDetails = response.data
|
|
data.stats = response.data.stats
|
|
data.score = response.data.score
|
|
// console.log(response.data)
|
|
})
|
|
.catch((e) => {
|
|
console.log(e)
|
|
})
|
|
}
|
|
|
|
const GetAvgRank = () => {
|
|
let count = 0
|
|
let fullRank = 0
|
|
|
|
data.stats?.map(player => {
|
|
if (player.extended?.rank?.old) {
|
|
fullRank += player.extended?.rank?.old
|
|
count += 1
|
|
}
|
|
})
|
|
|
|
if (count === 0)
|
|
data.avgRank = 0
|
|
else
|
|
data.avgRank = Math.floor(fullRank / count)
|
|
}
|
|
|
|
// Watchers
|
|
watch(() => props.match_id, GetMatch)
|
|
watch(() => data.stats, GetAvgRank)
|
|
|
|
// Run on create
|
|
onBeforeMount(() => {
|
|
GetMatch()
|
|
})
|
|
|
|
return {
|
|
GetMatch, GetAvgRank, data, mapImg, GoToPlayer, GetHLTV_1
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.rank-icon {
|
|
max-width: 50px;
|
|
}
|
|
.nav {
|
|
width: 100vw;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
|
|
.list-item {
|
|
padding: 10px 10px;
|
|
|
|
&:hover {
|
|
background: var(--bs-info);
|
|
cursor: pointer;
|
|
}
|
|
|
|
}
|
|
|
|
.active {
|
|
background: var(--bs-info)
|
|
}
|
|
}
|
|
</style>
|