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

41
src/components/DamageChart.vue
View File

@@ -1,5 +1,5 @@
<template>
<div v-if="props.stats" class="player-dmg">
<div class="player-dmg">
<h4 class="text-center mt-3 mb-3">Team 1</h4>
<div id="dmg-chart-1"></div>
<hr>
@@ -15,38 +15,28 @@ import {BarChart} from 'echarts/charts';
import {CanvasRenderer} from 'echarts/renderers';
import {onMounted} from "vue";
import {checkStatEmpty, getPlayerArr} from "../utils";
import {useStore} from "vuex";
export default {
name: "FlashChart",
props: {
stats: {
type: Object,
required: true
}
},
setup(props) {
const teamArr = (stats, team) => {
let arr = []
for (let i = (team - 1) * 5; i < team * 5; i++) {
arr.push(-checkStatEmpty(stats[i].dmg.team))
}
arr.reverse()
return arr
}
setup() {
const store = useStore()
const enemyArr = (stats, team) => {
const dataArr = (stats, team, prop) => {
if (['team', 'enemy', 'self'].indexOf(prop) > -1) {
let arr = []
for (let i = (team - 1) * 5; i < team * 5; i++) {
arr.push({
value: checkStatEmpty(stats[i].dmg.enemy),
value: checkStatEmpty(Function('return(function(stats, i){ return stats[i].dmg.' + prop + '})')()(stats, i)) * (prop === 'enemy' ? 1 : -1),
itemStyle: {
color: getComputedStyle(document.documentElement).getPropertyValue(`--csgo-${stats[i].color}`)
color: prop === 'enemy' ? getComputedStyle(document.documentElement).getPropertyValue(`--csgo-${stats[i].color}`) : 'firebrick'
}
})
}
arr.reverse()
return arr
}
}
const optionGen = (stats, team) => {
return {
@@ -84,14 +74,13 @@ export default {
name: 'Team',
type: 'bar',
stack: 'Total',
color: 'firebrick',
label: {
show: true,
},
emphasis: {
focus: 'series'
},
data: teamArr(stats, team)
data: dataArr(stats, team, 'team')
},
{
name: 'Enemy',
@@ -104,14 +93,14 @@ export default {
emphasis: {
focus: 'series'
},
data: enemyArr(stats, team)
data: dataArr(stats, team, 'enemy')
}
]
}
}
onMounted(() => {
if (props.stats) {
if (store.state.matchDetails.stats) {
echarts.use([
TooltipComponent,
GridComponent,
@@ -122,15 +111,13 @@ export default {
let myChart1 = echarts.init(document.getElementById('dmg-chart-1'), {}, {width: 1000, height: 300});
let myChart2 = echarts.init(document.getElementById('dmg-chart-2'), {}, {width: 1000, height: 300});
let option1 = optionGen(props.stats, 1)
let option2 = optionGen(props.stats, 2)
let option1 = optionGen(store.state.matchDetails.stats, 1)
let option2 = optionGen(store.state.matchDetails.stats, 2)
myChart1.setOption(option1);
myChart2.setOption(option2);
}
})
return {props}
}
}
</script>

32
src/components/FlashChart.vue
View File

@@ -1,6 +1,6 @@
<template>
<h4 class="text-center mt-3">Flash-Duration <small class="text-muted">(in s)</small></h4>
<div v-if="props.stats" class="player-dmg d-xxl-flex">
<h3 class="text-center col-12 mt-3">Flash-Duration <small class="text-muted">(in s)</small></h3>
<div class="player-dmg d-xxl-flex">
<div class="team-1 mx-5">
<h4 class="text-center mt-3 mb-3">Team 1</h4>
<div id="flash-chart-1"></div>
@@ -19,16 +19,13 @@ import {BarChart} from 'echarts/charts';
import {CanvasRenderer} from 'echarts/renderers';
import {onMounted} from "vue";
import {checkStatEmpty, getPlayerArr} from "../utils";
import {useStore} from "vuex";
export default {
name: "FlashChart",
props: {
stats: {
type: Object,
required: true
},
},
setup(props) {
setup() {
const store = useStore()
const durationArr = (stats, team, prop) => {
if (['team', 'enemy', 'self'].indexOf(prop) > -1) {
let arr = []
@@ -53,11 +50,6 @@ export default {
}
}
},
legend: {
textStyle: {
color: 'white'
}
},
grid: {
left: '3%',
right: '4%',
@@ -70,24 +62,24 @@ export default {
},
yAxis: {
type: 'category',
data: getPlayerArr(props.stats, id)
data: getPlayerArr(store.state.matchDetails.stats, id, true)
},
color: color,
series: [
{
name: 'Enemy',
type: 'bar',
data: durationArr(props.stats, id, 'enemy'),
data: durationArr(store.state.matchDetails.stats, id, 'enemy'),
},
{
name: 'Team',
type: 'bar',
data: durationArr(props.stats, id, 'team'),
data: durationArr(store.state.matchDetails.stats, id, 'team'),
},
{
name: 'Self',
type: 'bar',
data: durationArr(props.stats, id, 'self'),
data: durationArr(store.state.matchDetails.stats, id, 'self'),
}
]
}
@@ -96,7 +88,7 @@ export default {
let myChart1, myChart2, option1, option2
onMounted(() => {
if (props.stats) {
if (store.state.matchDetails.stats) {
const color = ['indianred', '#69b13b', 'cornflowerblue']
echarts.use([
@@ -116,8 +108,6 @@ export default {
myChart2.setOption(option2);
}
})
return {props}
}
}
</script>

110
src/components/MultiKillsChart.vue
View File

@@ -1,7 +1,14 @@
<template>
<div class="multi-kills-chart" v-if="props.stats">
<h4 class="text-center">Multi-Kills</h4>
<div id="multi-kills-chart"></div>
<h3 class="text-center col-12 mt-3">Multi-Kills</h3>
<div class="player-dmg d-xxl-flex">
<div class="team-1 mx-5">
<h4 class="text-center mt-3 mb-3">Team 1</h4>
<div id="multi-kills-chart-1"></div>
</div>
<div class="team-2 mx-5">
<h4 class="text-center mt-3 mb-3">Team 2</h4>
<div id="multi-kills-chart-2"></div>
</div>
</div>
</template>
@@ -11,46 +18,35 @@ import {GridComponent, TooltipComponent, VisualMapComponent} from 'echarts/compo
import {HeatmapChart} from 'echarts/charts';
import {CanvasRenderer} from 'echarts/renderers';
import {onMounted} from "vue";
import {getPlayerArr, checkStatEmpty} from "../utils";
import {useStore} from "vuex";
export default {
name: "FlashChart",
props: {
stats: {
type: Object,
required: true
}
},
setup(props) {
const teamArr = (stats) => {
let arr = []
for (let i = 0; i < stats.length; i++) {
arr.push(truncate(checkStatEmpty(stats[i].player.name), 15))
}
setup() {
const store = useStore()
const multiKills = ['2k', '3k', '4k', '5k']
arr.reverse()
return arr
}
const multiKillArr = (stats) => {
const multiKillArr = (stats, team) => {
let arr = []
for (let i = 0; i < stats.length; i++) {
for (let i = (team - 1) * 5; i < team * 5; i++) {
for (let j = 0; j < multiKills.length; j++) {
if (j === 0)
arr.push([i, j, checkStatEmpty(stats[i].multi_kills.duo)])
arr.push([i % 5, j, checkStatEmpty(stats[i].multi_kills.duo)])
if (j === 1)
arr.push([i, j, checkStatEmpty(stats[i].multi_kills.triple)])
arr.push([i % 5, j, checkStatEmpty(stats[i].multi_kills.triple)])
if (j === 2)
arr.push([i, j, checkStatEmpty(stats[i].multi_kills.quad)])
arr.push([i % 5, j, checkStatEmpty(stats[i].multi_kills.quad)])
if (j === 3)
arr.push([i, j, checkStatEmpty(stats[i].multi_kills.pent)])
arr.push([i % 5, j, checkStatEmpty(stats[i].multi_kills.pent)])
}
}
return arr
}
const getMax = (stats) => {
const getMax = (stats, team) => {
let max = 0
for (let i = 0; i < stats.length; i++) {
for (let i = (team - 1) * 5; i < team * 5; i++) {
if (stats[i].multi_kills.duo > max)
max = stats[i].multi_kills.duo
if (stats[i].multi_kills.triple > max)
@@ -63,41 +59,17 @@ export default {
return max
}
const checkStatEmpty = (stat) => {
if (stat)
return stat
}
const truncate = (str, len, ending) => {
if (len == null)
len = 100
if (ending == null)
ending = '..'
if (str.length > len)
return str.substring(0, len - ending.length) + ending
else
return str
}
const multiKills = ['2k', '3k', '4k', '5k']
const player = teamArr(props.stats)
const data = multiKillArr(props.stats)
const max = getMax(props.stats)
const optionGen = (player, data) => {
const optionGen = (team) => {
return {
tooltip: {
position: 'top',
},
tooltip: {},
grid: {
height: '50%',
top: '10%'
height: '65%',
top: '0%',
bottom: '10%'
},
xAxis: {
type: 'category',
data: player,
data: getPlayerArr(store.state.matchDetails.stats, team, true),
splitArea: {
show: true
},
@@ -119,11 +91,11 @@ export default {
},
visualMap: {
min: 0,
max: max,
max: getMax(store.state.matchDetails.stats, team),
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%',
bottom: '5%',
textStyle: {
color: 'white'
}
@@ -131,7 +103,7 @@ export default {
series: [
{
type: 'heatmap',
data: data,
data: multiKillArr(store.state.matchDetails.stats, team),
label: {
fontSize: 14,
show: true
@@ -156,14 +128,12 @@ export default {
CanvasRenderer
]);
let myChart1 = echarts.init(document.getElementById('multi-kills-chart-1'), {}, {width: 500, height: 500});
let myChart2 = echarts.init(document.getElementById('multi-kills-chart-2'), {}, {width: 500, height: 500});
let myChart = echarts.init(document.getElementById('multi-kills-chart'), {}, {width: 1000, height: 600});
let option = optionGen(player, data)
myChart.setOption(option);
myChart1.setOption(optionGen(1));
myChart2.setOption(optionGen(2));
})
return {props}
}
}
</script>
@@ -174,12 +144,8 @@ export default {
align-items: center;
h4 {
margin-top: 1rem;
margin-bottom: -40px;
}
#multi-kills-chart {
margin: 0;
margin-top: 7px;
color: cornflowerblue;
}
}
</style>

81
src/components/ScoreTeam.vue
View File

@@ -1,9 +1,16 @@
<template>
<div class="scoreboard" :class="'team-' + props.team_id">
<table>
<caption v-if="props.rounds === 16" :class="props.score === 9 ? 'text-success' : props.score === 8 ? 'text-warning' : 'text-danger'">{{props.score}}</caption>
<caption v-if="props.rounds === 30" :class="props.score === 16 ? 'text-success' : props.score === 15 ? 'text-warning' : 'text-danger'">{{props.score}}</caption>
<thead>
<div class="scoreboard">
<table v-for="(score, team_id) in store.state.matchDetails.score" :key="team_id + 1"
:class="'team-' + (team_id + 1)">
<caption v-if="store.state.matchDetails.max_rounds === 16"
:class="score === 9 ? 'text-success' : score === 8 ? 'text-warning' : 'text-danger'">
{{ score }}
</caption>
<caption v-if="store.state.matchDetails.max_rounds === 30"
:class="score === 16 ? 'text-success' : score === 15 ? 'text-warning' : 'text-danger'">
{{ score }}
</caption>
<thead v-if="team_id === 0">
<tr>
<th class="player__avatar"></th>
<th class="player__name"></th>
@@ -13,19 +20,22 @@
<th class="player__deaths">D</th>
<th class="player__diff cursor__help" title="Kill death difference">+/-</th>
<th class="player__kd">K/D</th>
<th class="player__adr cursor__help" title="Average damage per round" v-if="props.parsed">ADR</th>
<th v-if="store.state.matchDetails.parsed" class="player__adr cursor__help" title="Average damage per round">
ADR
</th>
<th class="player__hs cursor__help" title="Percentage of kills with a headshot">HS%</th>
<th class="player__rating cursor__help" title="Estimated HLTV Rating 1.0">Rating</th>
<th class="player__mvp cursor__help" title="Most valuable player">MVP</th>
<th class="player__score">Score</th>
</tr>
</thead>
<tbody v-for="player in props.stats" :key="player.player.steamid64">
<tr v-if="player.team_id === props.team_id" class="player">
<ScoreTeamPlayer
:steamid64="player.player.steamid64"
<tbody>
<tr v-for="player in store.state.matchDetails.stats" v-show="player.team_id === team_id + 1" :key="player.player.steamid64"
class="player">
<ScoreTeamPlayer v-if="player.team_id === team_id + 1"
:assists="player.assists"
:avatar="player.player.avatar"
:color="player.color"
:deaths="player.deaths"
:dmg="player.dmg?.enemy"
:hs="player.headshot"
@@ -37,59 +47,30 @@
:mk_triple="player.multi_kills?.triple"
:mvp="player.mvp"
:name="player.player.name"
:parsed="store.state.matchDetails.parsed"
:player_score="player.score"
:rank="player.rank?.old"
:rounds_played="props.rounds_played"
:color="player.color"
:rounds_played="store.state.matchDetails.score.reduce((a, b) => a + b)"
:steamid64="player.player.steamid64"
:tracked="player.player.tracked"
:parsed="props.parsed"
/>
</tr>
<tr v-if="team_id === 0" class="hr"></tr>
</tbody>
</table>
</div>
<hr v-if="props.team_id === 1">
</template>
<script>
import ScoreTeamPlayer from '@/components/ScoreTeamPlayer.vue'
import {useStore} from "vuex";
export default {
name: 'ScoreTeam',
components: {ScoreTeamPlayer},
props: {
stats: {
type: Object,
required: true
},
rounds_played: {
type: Number,
required: true,
default: 0
},
team_id: {
type: Number,
required: true,
default: 1
},
score: {
type: Number,
required: true,
default: 0
},
rounds: {
type: Number,
required: true,
default: 0
},
parsed: {
type: Boolean,
required: true,
default: false
}
},
setup(props) {
return {props}
setup() {
const store = useStore()
return {store}
}
}
</script>
@@ -108,7 +89,6 @@ table {
text-align: center;
margin-top: 120px;
margin-bottom: -100px;
//background: black;
caption {
color: white;
@@ -130,5 +110,10 @@ table {
.cursor__help {
cursor: help;
}
.hr {
height: 20px;;
border-bottom: 1px solid white;
}
}
</style>

2
src/components/ScoreTeamPlayer.vue
View File

@@ -48,7 +48,7 @@
</template>
<script>
import {GetHLTV_1, GoToPlayer, DisplayRank} from "../utils";
import {DisplayRank, GetHLTV_1, GoToPlayer} from "../utils";
export default {
name: 'ScoreTeamPlayer',

48
src/router/index.js
View File

@@ -1,32 +1,68 @@
import {createRouter, createWebHistory} from 'vue-router'
function lazyLoad(view) {
function lazyLoadView(view) {
return () => import(`@/views/${view}.vue`)
}
function lazyLoadComponent(view) {
return () => import(`@/components/${view}.vue`)
}
const routes = [
{
path: '/',
name: 'Home',
component: lazyLoad('Home')
component: lazyLoadView('Home')
},
{
path: '/player/:id',
name: 'Player',
component: lazyLoad('Player'),
component: lazyLoadView('Player'),
props: true
},
{
path: '/match/:match_id',
name: 'Match',
component: lazyLoad('Match'),
component: lazyLoadView('Match'),
props: true,
alias: ['/match/:match_id/flashes', '/match/:match_id/utility', '/match/:match_id/damage', '/match/:match_id/details']
children: [
{
path: '',
alias: '/match/:match_id',
components: {
score: lazyLoadComponent('ScoreTeam')
}
},
{
path: 'details',
components: {
score: lazyLoadComponent('MultiKillsChart')
}
},
{
path: 'flashes',
components: {
score: lazyLoadComponent('FlashChart')
}
},
{
path: 'utility',
components: {
score: lazyLoadComponent('UtilityChart')
}
},
{
path: 'damage',
components: {
score: lazyLoadComponent('DamageChart')
}
}
]
},
{
path: '/explore',
name: 'Explore',
component: lazyLoad('Explore'),
component: lazyLoadView('Explore'),
props: true
},
{

1
src/store/index.js
View File

@@ -4,6 +4,7 @@ export default createStore({
state: {
id64: '',
vanityUrl: '',
matchDetails: {}
},
mutations: {
},

2
src/utils/ApiRequests.js
View File

@@ -35,7 +35,7 @@ export const TrackMe = async (id64, authcode, sharecode) => {
try {
const res = await axios
.post(`${process.env.VUE_APP_API_URL}/player/trackme`, `id=${id64}&authcode=${authcode}&sharecode=${sharecode}`)
.post(`${API_URL}/player/trackme`, `id=${id64}&authcode=${authcode}&sharecode=${sharecode}`)
if (res.status === 202) {
status = res.status

6
src/utils/Utils.js
View File

@@ -31,13 +31,13 @@ export const checkStatEmpty = (stat) => {
return 0
}
export const getPlayerArr = (stats, team) => {
export const getPlayerArr = (stats, team, color) => {
let arr = []
for (let i = (team - 1) * 5; i < team * 5; i++) {
arr.push({
value: truncate(stats[i].player.name, 15),
value: truncate(stats[i].player.name, 12),
textStyle: {
color: 'white'
color: color ? getComputedStyle(document.documentElement).getPropertyValue(`--csgo-${stats[i].color}`) : 'white'
}
})
}

185
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])
if (!route.fullPath.match('details' || 'flashes' || 'damage')) {
GoToLink(`/match/${props.match_id}`)
}
}, 200)
})
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>