refactored to match api-changes + added multi-kill-chart

src/components/DamageChart.vue

@@ -71,11 +71,11 @@ export default {
       let arr = []
       if (team === 1) {
         for (let i = 0; i < 5; i++) {
-          arr.push(-checkStatEmpty(stats[i].extended.dmg.team))
+          arr.push(-checkStatEmpty(stats[i].dmg.team))
         }
       } else {
         for (let i = 5; i < stats.length; i++) {
-          arr.push(-checkStatEmpty(stats[i].extended.dmg.team))
+          arr.push(-checkStatEmpty(stats[i].dmg.team))
         }
       }
       arr.reverse()
@@ -87,18 +87,18 @@ export default {
       if (team === 1) {
         for (let i = 0; i < 5; i++) {
           arr.push({
-            value: checkStatEmpty(stats[i].extended.dmg.enemy),
+            value: checkStatEmpty(stats[i].dmg.enemy),
             itemStyle: {
-              color: getComputedStyle(document.documentElement).getPropertyValue(`--csgo-${stats[i].extended.color}`)
+              color: getComputedStyle(document.documentElement).getPropertyValue(`--csgo-${stats[i].color}`)
             }
           })
         }
       } else {
         for (let i = 5; i < stats.length; i++) {
           arr.push({
-            value: checkStatEmpty(stats[i].extended.dmg.enemy),
+            value: checkStatEmpty(stats[i].dmg.enemy),
             itemStyle: {
-              color: getComputedStyle(document.documentElement).getPropertyValue(`--csgo-${stats[i].extended.color}`)
+              color: getComputedStyle(document.documentElement).getPropertyValue(`--csgo-${stats[i].color}`)
             }
           })
         }

src/components/MultiKillsChart.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="multi-kills-chart">
+    <h4 class="text-center">Multi-Kills</h4>
+    <div id="multi-kills-chart"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts/core';
+import {GridComponent, TooltipComponent, VisualMapComponent} from 'echarts/components';
+import {HeatmapChart} from 'echarts/charts';
+import {CanvasRenderer} from 'echarts/renderers';
+import {onMounted} from "vue";
+
+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))
+      }
+
+      arr.reverse()
+      return arr
+    }
+
+    const multiKillArr = (stats) => {
+      let arr = []
+      for (let i = 0; i < stats.length; i++) {
+        for (let j = 0; j < multiKills.length; j++) {
+          if (j === 0)
+            arr.push([i, j, checkStatEmpty(stats[i].multi_kills.duo)])
+          if (j === 1)
+            arr.push([i, j, checkStatEmpty(stats[i].multi_kills.triple)])
+          if (j === 2)
+            arr.push([i, j, checkStatEmpty(stats[i].multi_kills.quad)])
+          if (j === 3)
+            arr.push([i, j, checkStatEmpty(stats[i].multi_kills.pent)])
+        }
+      }
+      return arr
+    }
+
+    const getMax = (stats) => {
+      let max = 0
+      for (let i = 0; i < stats.length; i++) {
+        if (stats[i].multi_kills.duo > max)
+          max = stats[i].multi_kills.duo
+        if (stats[i].multi_kills.triple > max)
+          max = stats[i].multi_kills.triple
+        if (stats[i].multi_kills.quad > max)
+          max = stats[i].multi_kills.quad
+        if (stats[i].multi_kills.pent > max)
+          max = stats[i].multi_kills.pent
+      }
+      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) => {
+      return {
+        tooltip: {
+          position: 'top'
+        },
+        grid: {
+          height: '50%',
+          top: '10%'
+        },
+        xAxis: {
+          type: 'category',
+          data: player,
+          splitArea: {
+            show: true
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: 'white',
+            rotate: 50
+          }
+        },
+        yAxis: {
+          type: 'category',
+          data: multiKills,
+          splitArea: {
+            show: true
+          },
+          axisLabel: {
+            color: 'white'
+          }
+        },
+        visualMap: {
+          min: 0,
+          max: max,
+          calculable: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '15%',
+          textStyle: {
+            color: 'white'
+          }
+        },
+        series: [
+          {
+            name: 'Mutlki-Kill',
+            type: 'heatmap',
+            data: data,
+            label: {
+              fontSize: 14,
+              show: true
+            },
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      }
+    }
+
+    onMounted(() => {
+      echarts.use([
+        TooltipComponent,
+        GridComponent,
+        VisualMapComponent,
+        HeatmapChart,
+        CanvasRenderer
+      ]);
+
+
+      let myChart = echarts.init(document.getElementById('multi-kills-chart'), {}, {width: 1000, height: 600});
+      let option = optionGen(player, data)
+
+      myChart.setOption(option);
+    })
+
+    return {props}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.multi-kills-chart {
+  flex-direction: column;
+  align-items: center;
+
+  h4 {
+    margin-top: 1rem;
+    margin-bottom: -40px;
+  }
+
+  #multi-kills-chart {
+    margin: 0;
+  }
+}
+</style>

src/components/ScoreTeam.vue

@@ -27,20 +27,20 @@
             :assists="player.assists"
             :avatar="player.player.avatar"
             :deaths="player.deaths"
-            :dmg="player.extended?.dmg?.enemy"
+            :dmg="player.dmg?.enemy"
             :hs="player.headshot"
             :kdiff="player.kills - player.deaths"
             :kills="player.kills"
-            :mk_duo="player.extended?.multi_kills?.duo"
+            :mk_duo="player.multi_kills?.duo"
-            :mk_pent="player.extended?.multi_kills?.pent"
+            :mk_pent="player.multi_kills?.pent"
-            :mk_quad="player.extended?.multi_kills?.quad"
+            :mk_quad="player.multi_kills?.quad"
-            :mk_triple="player.extended?.multi_kills?.triple"
+            :mk_triple="player.multi_kills?.triple"
             :mvp="player.mvp"
             :name="player.player.name"
             :player_score="player.score"
-            :rank="player.extended?.rank?.old"
+            :rank="player.rank?.old"
             :rounds_played="props.rounds_played"
-            :color="player.extended?.color"
+            :color="player.color"
             :tracked="player.player.tracked"
             :parsed="props.parsed"
         />

src/components/UtilityChartTotal.vue

@@ -34,7 +34,7 @@ export default {
     const seriesArr = (stats) => {
       let arr = []
       for (let i = 0; i < stats.length; i++) {
-        const sum = checkStatEmpty(stats[i].extended.dmg.ud.flames) + checkStatEmpty(stats[i].extended.dmg.ud.flash) + checkStatEmpty(stats[i].extended.dmg.ud.he) + checkStatEmpty(stats[i].extended.dmg.ud.smoke)
+        const sum = checkStatEmpty(stats[i].dmg.ud.flames) + checkStatEmpty(stats[i].dmg.ud.flash) + checkStatEmpty(stats[i].dmg.ud.he) + checkStatEmpty(stats[i].dmg.ud.smoke)
 
         if (sum !== 0) {
           arr.push({

src/router/index.js

@@ -1,4 +1,4 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import {createRouter, createWebHistory} from 'vue-router'
 
 function lazyLoad(view) {
   return () => import(`@/views/${view}.vue`)
@@ -21,7 +21,7 @@ const routes = [
     name: 'Match',
     component: lazyLoad('Match'),
     props: true,
-    alias: ['/match/:match_id/flashes', '/match/:match_id/utility', '/match/:match_id/damage']
+    alias: ['/match/:match_id/flashes', '/match/:match_id/utility', '/match/:match_id/damage', '/match/:match_id/details']
   },
   {
     path: '/explore',

src/views/Match.vue

@@ -36,14 +36,21 @@
     <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' : ''" class="list-item flashes"
+        <li :class="!data.matchDetails.parsed ? 'disabled' : ''" :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
-            @click.prevent="data.matchDetails.parsed ? ActivateScoreInfo('flashes') : null" :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''">Flashes
+            class="list-item details"
+            @click.prevent="data.matchDetails.parsed ? ActivateScoreInfo('details') : null">Details
         </li>
-        <li :class="!data.matchDetails.parsed ? 'disabled' : ''" class="list-item utility"
+        <li :class="!data.matchDetails.parsed ? 'disabled' : ''" :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
-            @click.prevent="data.matchDetails.parsed ? ActivateScoreInfo('utility') : null" :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''">Utility
+            class="list-item flashes"
+            @click.prevent="data.matchDetails.parsed ? ActivateScoreInfo('flashes') : null">Flashes
         </li>
-        <li :class="!data.matchDetails.parsed ? 'disabled' : ''" class="list-item damage"
+        <li :class="!data.matchDetails.parsed ? 'disabled' : ''" :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
-            @click.prevent="data.matchDetails.parsed ? ActivateScoreInfo('damage') : null" :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''">Damage
+            class="list-item utility"
+            @click.prevent="data.matchDetails.parsed ? ActivateScoreInfo('utility') : null">Utility
+        </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>
       </ul>
     </div>
@@ -51,24 +58,24 @@
   <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]"
+          :score="data.score[0]" :stats="data.stats" :team_id="1"/>
-          :stats="data.stats" :team_id="1" :parsed="data.matchDetails.parsed" />
       <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]"
+          :score="data.score[1]" :stats="data.stats" :team_id="2"/>
-          :stats="data.stats" :team_id="2" :parsed="data.matchDetails.parsed" />
     </div>
 
     <div id="flashes">
       <FlashChart v-for="(player, id) in data.stats" :id="id"
                   :key="player.player.steamid64"
                   :avatar="player.player.avatar"
-                  :duration="player.extended.flash.duration"
+                  :duration="player.flash.duration"
                   :name="player.player.name"
-                  :total="player.extended.flash.total"
+                  :total="player.flash.total"
       />
     </div>
 
@@ -78,12 +85,16 @@
                     :key="player.player.steamid64"
                     :avatar="player.player.avatar"
                     :name="player.player.name"
-                    :ud="player.extended.dmg.ud"
+                    :ud="player.dmg.ud"
       />
     </div>
 
     <div id="damage">
-      <DamageChart :stats="data.stats" />
+      <DamageChart :stats="data.stats"/>
+    </div>
+
+    <div id="details">
+      <MultiKillsChart :stats="data.stats"/>
     </div>
   </div>
 </template>
@@ -99,6 +110,7 @@ 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',
@@ -108,7 +120,8 @@ export default {
     FlashChart,
     UtilityChart,
     UtilityChartTotal,
-    DamageChart
+    DamageChart,
+    MultiKillsChart
   },
   setup(props) {
     // Refs
@@ -144,8 +157,8 @@ export default {
       let fullRank = 0
 
       data.stats?.map(player => {
-        if (player.extended?.rank?.old) {
+        if (player.rank?.old) {
-          fullRank += player.extended?.rank?.old
+          fullRank += player.rank?.old
           count += 1
         }
       })
@@ -168,7 +181,7 @@ export default {
       newNavItem.classList.add('active')
       newItem.classList.add('active')
 
-      if (id === 'flashes' || id === 'utility' || id === 'damage') {
+      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}`)
@@ -240,7 +253,7 @@ export default {
       rgba(0, 0, 0, .6) 100%
   );
 
-  #scoreboard, #flashes, #utility, #damage {
+  #scoreboard, #flashes, #utility, #damage, #details {
     display: none;
     flex-direction: column;
     align-items: center;
@@ -249,7 +262,8 @@ export default {
   #scoreboard.active,
   #flashes.active,
   #utility.active,
-  #damage.active {
+  #damage.active,
+  #details.active {
     display: flex;
   }
 }

src/views/Player.vue

@@ -122,7 +122,7 @@
           <tbody>
           <tr v-for="match in data.matches"
               :key="match.match_id"
-              :class="GetWinLoss(match.match_result, match.stats[0].team_id)"
+              :class="GetWinLoss(match.match_result, match.stats.team_id)"
               class="match"
               @click="GoToMatch(match.match_id)">
             <td class="td-map text-center">
@@ -135,9 +135,9 @@
             </td>
             <td class="td-rank text-center">
               <img
-                  :alt="DisplayRank(match.stats[0].extended?.rank?.new)[1]"
+                  :alt="DisplayRank(match.stats.rank?.new)[1]"
-                  :src="DisplayRank(match.stats[0].extended?.rank?.new)[0]"
+                  :src="DisplayRank(match.stats.rank?.new)[0]"
-                  :title="DisplayRank(match.stats[0].extended?.rank?.new)[1]"
+                  :title="DisplayRank(match.stats.rank?.new)[1]"
                   class="rank-icon">
             </td>
             <td class="td-length text-center">
@@ -145,43 +145,43 @@
                  title="Long match"></i>
               <i v-if="match.max_rounds === 16" class="far fa-circle text-muted" title="Short match"></i>
             </td>
-            <td :class="match.stats[0].team_id === match.match_result ? 'text-success' : !match.match_result ? 'text-warning' : 'text-danger'"
+            <td :class="match.stats.team_id === match.match_result ? 'text-success' : !match.match_result ? 'text-warning' : 'text-danger'"
                 class="td-score text-center fw-bold">
               {{ match.score[0] }} - {{ match.score[1] }}
             </td>
             <td class="td-kills text-center">
-              {{ match.stats[0].kills ? match.stats[0].kills : "0" }}
+              {{ match.stats.kills ? match.stats.kills : "0" }}
             </td>
             <td class="td-assists text-center">
-              {{ match.stats[0].assists ? match.stats[0].assists : "0" }}
+              {{ match.stats.assists ? match.stats.assists : "0" }}
             </td>
             <td class="td-deaths text-center">
-              {{ match.stats[0].deaths ? match.stats[0].deaths : "0" }}
+              {{ match.stats.deaths ? match.stats.deaths : "0" }}
             </td>
-            <td :class="(match.stats[0].kills ? match.stats[0].kills : 0) - (match.stats[0].deaths ? match.stats[0].deaths : 0) >= 0 ? 'text-success' : 'text-danger'"
+            <td :class="(match.stats.kills ? match.stats.kills : 0) - (match.stats.deaths ? match.stats.deaths : 0) >= 0 ? 'text-success' : 'text-danger'"
                 class="td-plus text-center">
               {{
-                (match.stats[0].kills ? match.stats[0].kills : 0) - (match.stats[0].deaths ? match.stats[0].deaths : 0)
+                (match.stats.kills ? match.stats.kills : 0) - (match.stats.deaths ? match.stats.deaths : 0)
               }}
             </td>
             <td :class="GetHLTV_1(
-                      match.stats[0].kills,
+                      match.stats.kills,
                       match.score[0] + match.score[1],
-                      match.stats[0].deaths,
+                      match.stats.deaths,
-                      match.stats[0].extended?.multi_kills?.duo,
+                      match.stats.multi_kills?.duo,
-                      match.stats[0].extended?.multi_kills?.triple,
+                      match.stats.multi_kills?.triple,
-                      match.stats[0].extended?.multi_kills?.quad,
+                      match.stats.multi_kills?.quad,
-                      match.stats[0].extended?.multi_kills?.pent) >= 1 ? 'text-success' : 'text-warning'"
+                      match.stats.multi_kills?.pent) >= 1 ? 'text-success' : 'text-warning'"
                 class="td-hltv text-center fw-bold">
               {{
                 GetHLTV_1(
-                    match.stats[0].kills,
+                    match.stats.kills,
                     match.score[0] + match.score[1],
-                    match.stats[0].deaths,
+                    match.stats.deaths,
-                    match.stats[0].extended?.multi_kills?.duo,
+                    match.stats.multi_kills?.duo,
-                    match.stats[0].extended?.multi_kills?.triple,
+                    match.stats.multi_kills?.triple,
-                    match.stats[0].extended?.multi_kills?.quad,
+                    match.stats.multi_kills?.quad,
-                    match.stats[0].extended?.multi_kills?.pent)
+                    match.stats.multi_kills?.pent)
               }}
             </td>
             <td :title="FormatFullDuration(match.duration)" class="td-duration text-center">
@@ -270,6 +270,8 @@ export default {
           document.title = `${data.playerDetails.name} | csgoWTF`
 
           console.log(data.playerDetails)
+        } else {
+          GoToLink('/')
         }
       } else {
         GoToLink('/')
@@ -279,13 +281,15 @@ export default {
     const TrackPlayer = async () => {
       [data.statusErrorCode, data.statusError] = await TrackMe(data.playerDetails.steamid64, data.userData.authcode, data.userData.sharecode)
 
-      // setTimeout(() => {
+      setTimeout(() => {
         if (data.statusErrorCode === 202) {
           data.statusErrorCode = 0
           data.statusError = ''
           data.tracked = true
         }
-      // }, 2000)
+
+        window.location.reload()
+      }, 2000)
     }
 
     onMounted(() => {