reworked the sub-navigation on the Match-page

src/components/DamageChart.vue

@@ -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,37 +15,27 @@ 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: {
+  setup() {
-    stats: {
+    const store = useStore()
-      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
-    }
 
-    const enemyArr = (stats, team) => {
+    const dataArr = (stats, team, prop) => {
-      let arr = []
+      if (['team', 'enemy', 'self'].indexOf(prop) > -1) {
-      for (let i = (team - 1) * 5; i < team * 5; i++) {
+        let arr = []
-        arr.push({
+        for (let i = (team - 1) * 5; i < team * 5; i++) {
-          value: checkStatEmpty(stats[i].dmg.enemy),
+          arr.push({
-          itemStyle: {
+            value: checkStatEmpty(Function('return(function(stats, i){ return stats[i].dmg.' + prop + '})')()(stats, i)) * (prop === 'enemy' ? 1 : -1),
-            color: getComputedStyle(document.documentElement).getPropertyValue(`--csgo-${stats[i].color}`)
+            itemStyle: {
-          }
+              color: prop === 'enemy' ? getComputedStyle(document.documentElement).getPropertyValue(`--csgo-${stats[i].color}`) : 'firebrick'
-        })
+            }
+          })
+        }
+        arr.reverse()
+        return arr
       }
-      arr.reverse()
-      return arr
     }
 
     const optionGen = (stats, team) => {
@@ -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 option1 = optionGen(store.state.matchDetails.stats, 1)
-        let option2 = optionGen(props.stats, 2)
+        let option2 = optionGen(store.state.matchDetails.stats, 2)
 
         myChart1.setOption(option1);
         myChart2.setOption(option2);
       }
     })
-
-    return {props}
   }
 }
 </script>

src/components/FlashChart.vue

@@ -1,6 +1,6 @@
 <template>
-  <h4 class="text-center mt-3">Flash-Duration <small class="text-muted">(in s)</small></h4>
+  <h3 class="text-center col-12 mt-3">Flash-Duration <small class="text-muted">(in s)</small></h3>
-  <div v-if="props.stats" class="player-dmg d-xxl-flex">
+  <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: {
+  setup() {
-    stats: {
+    const store = useStore()
-      type: Object,
+
-      required: true
-    },
-  },
-  setup(props) {
     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>

src/components/MultiKillsChart.vue

@@ -1,7 +1,14 @@
 <template>
-  <div class="multi-kills-chart" v-if="props.stats">
+  <h3 class="text-center col-12 mt-3">Multi-Kills</h3>
-    <h4 class="text-center">Multi-Kills</h4>
+  <div class="player-dmg d-xxl-flex">
-    <div id="multi-kills-chart"></div>
+    <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: {
+  setup() {
-    stats: {
+    const store = useStore()
-      type: Object,
+    const multiKills = ['2k', '3k', '4k', '5k']
-      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))
-      }
 
-      arr.reverse()
+    const multiKillArr = (stats, team) => {
-      return arr
-    }
-
-    const multiKillArr = (stats) => {
       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) => {
+    const optionGen = (team) => {
-      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) => {
       return {
-        tooltip: {
+        tooltip: {},
-          position: 'top',
-        },
         grid: {
-          height: '50%',
+          height: '65%',
-          top: '10%'
+          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});
+        myChart1.setOption(optionGen(1));
-      let option = optionGen(player, data)
+        myChart2.setOption(optionGen(2));
-
-      myChart.setOption(option);
     })
-
-    return {props}
   }
 }
 </script>
@@ -174,12 +144,8 @@ export default {
   align-items: center;
 
   h4 {
-    margin-top: 1rem;
+    margin-top: 7px;
-    margin-bottom: -40px;
+    color: cornflowerblue;
-  }
-
-  #multi-kills-chart {
-    margin: 0;
   }
 }
 </style>

src/components/ScoreTeam.vue

@@ -1,9 +1,16 @@
 <template>
-  <div class="scoreboard" :class="'team-' + props.team_id">
+  <div class="scoreboard">
-    <table>
+    <table v-for="(score, team_id) in store.state.matchDetails.score" :key="team_id + 1"
-      <caption v-if="props.rounds === 16" :class="props.score === 9 ? 'text-success' : props.score === 8 ? 'text-warning' : 'text-danger'">{{props.score}}</caption>
+           :class="'team-' + (team_id + 1)">
-      <caption v-if="props.rounds === 30" :class="props.score === 16 ? 'text-success' : props.score === 15 ? 'text-warning' : 'text-danger'">{{props.score}}</caption>
+      <caption v-if="store.state.matchDetails.max_rounds === 16"
-      <thead>
+               :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,83 +20,57 @@
         <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">
+      <tbody>
-      <tr v-if="player.team_id === props.team_id" class="player">
+      <tr v-for="player in store.state.matchDetails.stats" v-show="player.team_id === team_id + 1" :key="player.player.steamid64"
-        <ScoreTeamPlayer
+          class="player">
-            :steamid64="player.player.steamid64"
+        <ScoreTeamPlayer v-if="player.team_id === team_id + 1"
-            :assists="player.assists"
+                         :assists="player.assists"
-            :avatar="player.player.avatar"
+                         :avatar="player.player.avatar"
-            :deaths="player.deaths"
+                         :color="player.color"
-            :dmg="player.dmg?.enemy"
+                         :deaths="player.deaths"
-            :hs="player.headshot"
+                         :dmg="player.dmg?.enemy"
-            :kdiff="player.kills - player.deaths"
+                         :hs="player.headshot"
-            :kills="player.kills"
+                         :kdiff="player.kills - player.deaths"
-            :mk_duo="player.multi_kills?.duo"
+                         :kills="player.kills"
-            :mk_pent="player.multi_kills?.pent"
+                         :mk_duo="player.multi_kills?.duo"
-            :mk_quad="player.multi_kills?.quad"
+                         :mk_pent="player.multi_kills?.pent"
-            :mk_triple="player.multi_kills?.triple"
+                         :mk_quad="player.multi_kills?.quad"
-            :mvp="player.mvp"
+                         :mk_triple="player.multi_kills?.triple"
-            :name="player.player.name"
+                         :mvp="player.mvp"
-            :player_score="player.score"
+                         :name="player.player.name"
-            :rank="player.rank?.old"
+                         :parsed="store.state.matchDetails.parsed"
-            :rounds_played="props.rounds_played"
+                         :player_score="player.score"
-            :color="player.color"
+                         :rank="player.rank?.old"
-            :tracked="player.player.tracked"
+                         :rounds_played="store.state.matchDetails.score.reduce((a, b) => a + b)"
-            :parsed="props.parsed"
+                         :steamid64="player.player.steamid64"
+                         :tracked="player.player.tracked"
         />
       </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: {
+  setup() {
-    stats: {
+    const store = useStore()
-      type: Object,
+    return {store}
-      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}
   }
 }
 </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>

src/components/ScoreTeamPlayer.vue

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

src/router/index.js

@@ -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
   },
   {

src/store/index.js

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

src/utils/ApiRequests.js

@@ -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

src/utils/HLTV.js

@@ -1,12 +1,12 @@
 export const GetHLTV_1 = (kills = 0, rounds, deaths = 0, k2 = 0, k3 = 0, k4 = 0, k5 = 0) => {
-    const k1 = kills - k2 - k3 - k4 - k5
+  const k1 = kills - k2 - k3 - k4 - k5
-    const Weight_KPR = 0.679  // weight kills per round
+  const Weight_KPR = 0.679  // weight kills per round
-    const Weight_SPR = 0.317  // weight survived rounds per round
+  const Weight_SPR = 0.317  // weight survived rounds per round
-    const Weight_RMK = 1.277  // weight value calculated from rounds with multiple kills (1k + 4*2k + 9*3k + 16*4k + 25*5k)
+  const Weight_RMK = 1.277  // weight value calculated from rounds with multiple kills (1k + 4*2k + 9*3k + 16*4k + 25*5k)
 
-    const KillRating = kills / rounds / Weight_KPR
+  const KillRating = kills / rounds / Weight_KPR
-    const SurvivalRating = (rounds - deaths) / rounds / Weight_SPR
+  const SurvivalRating = (rounds - deaths) / rounds / Weight_SPR
-    const RoundsWithMultipleKillsRating = (k1 + 4 * k2 + 9 * k3 + 16 * k4 + 25 * k5) / rounds / Weight_RMK
+  const RoundsWithMultipleKillsRating = (k1 + 4 * k2 + 9 * k3 + 16 * k4 + 25 * k5) / rounds / Weight_RMK
 
-    return ((KillRating + 0.7 * SurvivalRating + RoundsWithMultipleKillsRating) / 2.7).toFixed(2)
+  return ((KillRating + 0.7 * SurvivalRating + RoundsWithMultipleKillsRating) / 2.7).toFixed(2)
-}
+}

src/utils/Utils.js

@@ -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'
       }
     })
   }

src/views/Match.vue

@@ -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' : ''"
-        <li :class="!data.matchDetails.parsed ? 'disabled' : ''" :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
+            :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
-            class="list-item details"
+            class="list-item nav-item">
-            @click.prevent="data.matchDetails.parsed ? ActivateScoreInfo('details') : null">Details
+          <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' : ''"
+        <li :class="!data.matchDetails.parsed ? 'disabled' : ''"
-            class="list-item flashes"
+            :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
-            @click.prevent="data.matchDetails.parsed ? ActivateScoreInfo('flashes') : null">Flashes
+            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' : ''"
+        <li :class="!data.matchDetails.parsed ? 'disabled' : ''"
-            class="list-item utility"
+            :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
-            @click.prevent="data.matchDetails.parsed ? ActivateScoreInfo('utility') : null">Utility
+            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' : ''"
+<!--        <li :class="!data.matchDetails.parsed ? 'disabled' : ''"-->
-            class="list-item damage"
+<!--            :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"-->
-            @click.prevent="data.matchDetails.parsed ? ActivateScoreInfo('damage') : null">Damage
+<!--            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">
+    <router-view name="score"/>
-      <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>
   </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 {DisplayRank, FormatFullDate, GetHLTV_1, GoToLink, GoToPlayer, LoadImage} from "../utils";
-import router from "../router";
+import {useStore} from "vuex";
-
+import {useRoute} from 'vue-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'))
 
 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 (!route.fullPath.match('details' || 'flashes' || 'damage')) {
-        if (router.currentRoute.value.href.split('/')[3]) {
+        GoToLink(`/match/${props.match_id}`)
-          ActivateScoreInfo(router.currentRoute.value.href.split('/')[3])
+      }
-        }
-      }, 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 {
+  .nav-link {
-    padding: 10px 10px;
+    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>