more match-info, parsed-icon on player-page, disabled score-nav-links for not-parsed demos

2021-10-12 02:43:20 +02:00
parent 76aba61361
commit a53c4a3c14
10 changed files with 487 additions and 78 deletions
--- a/.env
+++ b/.env
@@ -1 +0,0 @@
-VUE_APP_API_URL=http://localhost:8000
--- a/src/components/DamageChart.vue
+++ b/src/components/DamageChart.vue
@@ -0,0 +1,211 @@
+<template>
+  <div class="player-dmg">
+    <h4 class="text-center mt-3 mb-3">Team 1</h4>
+    <div id="dmg-chart-1"></div>
+    <hr>
+    <h4 class="text-center mt-3 mb-3">Team 2</h4>
+    <div id="dmg-chart-2"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts/core';
+import {GridComponent, LegendComponent, TooltipComponent} from 'echarts/components';
+import {BarChart} 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 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 playerArr = (stats, team) => {
+      let arr = []
+      if (team === 1) {
+        for (let i = 0; i < 5; i++) {
+          arr.push(truncate(stats[i].player.name, 10))
+        }
+      } else {
+        for (let i = 5; i < stats.length; i++) {
+          arr.push(truncate(stats[i].player.name, 10))
+        }
+      }
+      return arr
+    }
+
+    const teamArr = (stats, team) => {
+      let arr = []
+      if (team === 1) {
+        for (let i = 0; i < 5; i++) {
+          arr.push(-checkStatEmpty(stats[i].extended.dmg.team))
+        }
+      } else {
+        for (let i = 5; i < stats.length; i++) {
+          arr.push(-checkStatEmpty(stats[i].extended.dmg.team))
+        }
+      }
+      return arr
+    }
+
+    const enemyArr = (stats, team) => {
+      let arr = []
+      if (team === 1) {
+        for (let i = 0; i < 5; i++) {
+          arr.push(checkStatEmpty(stats[i].extended.dmg.enemy))
+        }
+      } else {
+        for (let i = 5; i < stats.length; i++) {
+          arr.push(checkStatEmpty(stats[i].extended.dmg.enemy))
+        }
+      }
+      return arr
+    }
+
+    const optionGen = (stats, team) => {
+      return {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          textStyle: {
+            color: 'white'
+          },
+          data: ['Enemy', 'Team']
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        yAxis: [
+          {
+            type: 'category',
+            axisTick: {
+              show: false
+            },
+            data: playerArr(stats, team)
+          }
+        ],
+        series: [
+          {
+            name: 'Team',
+            type: 'bar',
+            stack: 'Total',
+            color: 'firebrick',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: teamArr(stats, team)
+          },
+          {
+            name: 'Enemy',
+            type: 'bar',
+            stack: 'Total',
+            color: ['orange'],
+            label: {
+              show: true,
+              position: 'inside'
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: enemyArr(stats, team)
+          }
+        ]
+      }
+    }
+
+    onMounted(() => {
+      echarts.use([
+        TooltipComponent,
+        GridComponent,
+        LegendComponent,
+        BarChart,
+        CanvasRenderer
+      ]);
+
+      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)
+
+      myChart1.setOption(option1);
+      myChart2.setOption(option2);
+    })
+
+    return {props}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.player-dmg {
+  flex-direction: column;
+  align-items: center;
+
+  .heading {
+    display: flex;
+    margin-top: 10px;
+    margin-bottom: -30px;
+    //color: darkolivegreen;
+
+    .avatar {
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      margin-right: 20px;
+      color: #ff4343;
+    }
+
+    h4 {
+      margin-top: 7px;
+    }
+  }
+
+  p {
+    padding-top: 40px;
+    margin-bottom: -20px;
+  }
+}
+
+@for $i from 0 through 9 {
+  #dmg-chart-#{$i} {
+    margin: 0;
+  }
+}
+</style>
--- a/src/components/FlashChart.vue
+++ b/src/components/FlashChart.vue
@@ -54,7 +54,7 @@ export default {
        LabelLayout
      ]);

-      let myChart = echarts.init(document.getElementById(`flash-chart-${props.id}`));
+      let myChart = echarts.init(document.getElementById(`flash-chart-${props.id}`), {},{width: 600, height: 400});
      let option

      option = {
@@ -215,8 +215,6 @@ export default {

@for $i from 0 through 9 {
  #flash-chart-#{$i} {
-    width: 600px;
-    height: 400px;
    margin: 40px 40px -40px 40px;
  }
 }
--- a/src/components/ScoreTeam.vue
+++ b/src/components/ScoreTeam.vue
@@ -41,6 +41,7 @@
            :rank="player.extended?.rank?.old"
            :rounds_played="props.rounds_played"
            :color="player.extended?.color"
+            :tracked="player.player.tracked"
        />
      </tr>
      </tbody>
--- a/src/components/ScoreTeamPlayer.vue
+++ b/src/components/ScoreTeamPlayer.vue
@@ -3,6 +3,7 @@
    <img :src="props.avatar" alt="Player avatar" class="player__avatar" :class="'team-color-' + props.color">
  </td>
  <td class="player__name" @click="GoToPlayer(props.steamid64)">
+    <i class="far fa-dot-circle text-success tracked" v-if="props.tracked" title="Tracked user"></i>
    {{ props.name }}
    <i class="fas fa-link"></i>
  </td>
@@ -141,6 +142,11 @@ export default {
      type: String,
      required: true,
      default: ''
+    },
+    tracked: {
+      type: Boolean,
+      required: true,
+      default: false
    }
  },
  setup(props) {
@@ -187,6 +193,10 @@ export default {
  text-overflow: ellipsis;
  cursor: pointer;

+  .tracked {
+    font-size: .8rem;
+  }
+
  .fas {
    font-size: .5rem;
    vertical-align: top;
--- a/src/components/UtilityChart.vue
+++ b/src/components/UtilityChart.vue
@@ -1,13 +1,10 @@
 <template>
  <div :style="props.ud.flames || props.ud.flash || props.ud.he ? 'display: flex' : 'display: none'"
-       class="player-flash">
+       class="player-utility">
    <div class="heading">
      <img :src="props.avatar" alt="Player avatar" class="avatar">
      <h4>{{ props.name }}</h4>
    </div>
-    <p><span class="text-muted">Total UD:</span>
-      {{ (props.ud.flames ? props.ud.flames : 0) + (props.ud.flash ? props.ud.flash : 0) + (props.ud.he ? props.ud.he : 0) }}
-    </p>
    <div :id="'utility-chart-' + props.id"></div>
  </div>
 </template>
@@ -18,6 +15,7 @@ import {LegendComponent, TooltipComponent} from 'echarts/components';
 import {PieChart} from 'echarts/charts';
 import {LabelLayout} from 'echarts/features';
 import {CanvasRenderer} from 'echarts/renderers';
+import { TitleComponent } from 'echarts/components';
 import {onMounted} from "vue";

 export default {
@@ -50,10 +48,11 @@ export default {
        LegendComponent,
        PieChart,
        CanvasRenderer,
+        TitleComponent,
        LabelLayout
      ]);

-      let myChart = echarts.init(document.getElementById(`utility-chart-${props.id}`));
+      let myChart = echarts.init(document.getElementById(`utility-chart-${props.id}`), {}, {width: 500, height: 300});
      let option

      option = {
@@ -62,29 +61,7 @@ export default {
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
-          data: [
-            {
-              name: 'Flames',
-              textStyle: {
-                color: 'white',
-              },
-              itemStyle: {
-                color: '#FF4343FF'
-              }
-            },
-            {
-              name: 'Flash',
-              textStyle: {
-                color: 'white'
-              }
-            },
-            {
-              name: 'HE',
-              textStyle: {
-                color: 'white'
-              }
-            },
-          ]
+          show: false
        },
        series: [
          {
@@ -106,21 +83,42 @@ export default {
              show: false
            },
            data: [
-              {
+              (props.ud.flames ? {
                value: props.ud.flames ? props.ud.flames : null,
                name: 'Flames',
                itemStyle: {
                  color: '#FF4343FF'
                }
-              },
-              {
-                value: props.ud.flash ? props.ud.flash : null,
-                name: 'Flash',
-              },
-              {
+              } : {}),
+              (props.ud.he ? {
                value: props.ud.he ? props.ud.he : null,
                name: 'HE',
-              }
+                itemStyle: {
+                  color: '#62c265'
+                }
+              } : {})
+              ,
+              (props.ud.flash ? {
+                value: props.ud.flash ? props.ud.flash : null,
+                name: 'Flash',
+                itemStyle: {
+                  color: '#18cff3'
+                }
+              } : {}),
+              (props.ud.smoke ? {
+                value: props.ud.smoke ? props.ud.smoke : null,
+                name: 'Smoke',
+                itemStyle: {
+                  color: '#6e6b78'
+                }
+              } : {}),
+              (props.ud.decoy ? {
+                value: props.ud.decoy ? props.ud.decoy : null,
+                name: 'Decoy',
+                itemStyle: {
+                  color: '#e28428'
+                }
+              } : {})
            ]
          }
        ]
@@ -135,7 +133,7 @@ export default {
 </script>

 <style lang="scss" scoped>
-.player-flash {
+.player-utility {
  flex-direction: column;
  align-items: center;

@@ -165,9 +163,7 @@ export default {

@for $i from 0 through 9 {
  #utility-chart-#{$i} {
-    width: 500px;
-    height: 300px;
-    margin: 40px 40px -40px 40px;
+    margin: 0;
  }
 }
 </style>
--- a/src/components/UtilityChartTotal.vue
+++ b/src/components/UtilityChartTotal.vue
@@ -0,0 +1,141 @@
+<template>
+  <div class="utility-chart-total">
+    <div class="heading">
+      <h4>Total Utility Damage</h4>
+    </div>
+    <div id="utility-chart-total"></div>
+    <hr>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts/core';
+import {GridComponent, LegendComponent, TooltipComponent} from 'echarts/components';
+import {BarChart} 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 checkStatEmpty = (stat) => {
+      if (stat)
+        return stat
+      else
+        return 0
+    }
+
+    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)
+
+        if (sum !== 0) {
+          arr.push({
+            name: stats[i].player.name,
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [sum]
+          })
+        }
+      }
+
+      arr.sort((a, b) => parseFloat(b.data[0]) - parseFloat(a.data[0]))
+
+      return arr
+    }
+
+    onMounted(() => {
+      echarts.use([
+        TooltipComponent,
+        GridComponent,
+        LegendComponent,
+        BarChart,
+        CanvasRenderer
+      ]);
+
+      let myChart = echarts.init(document.getElementById('utility-chart-total'), {}, {width: 800, height: 200});
+      let option
+
+      option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow' // 'shadow' as default; can also be 'line'
+          }
+        },
+        // color: ['#143147', '#39546c', '#617a94', '#89a2bd', '#b3cce8', '#eac65c', '#bd9d2c', '#917501', '#685000', '#412c00'],
+        // color: ['#003470', '#005a9b', '#0982c7', '#4bace5', '#90d3fe', '#febf4a', '#d7931c', '#ac6a01', '#804400', '#572000'],
+        // color: ['#888F98', '#10121A', '#1B2732', '#5F7892', '#C3A235'],
+        legend: {
+          textStyle: {
+            color: 'white'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value'
+        },
+        yAxis: {
+          type: 'category',
+          data: ['Total']
+        },
+        aria: {
+          enabled: true,
+          show: true,
+          decal: {
+            show: true
+          }
+        },
+
+        series: seriesArr(props.stats)
+      };
+
+      myChart.setOption(option);
+    })
+
+    return {props}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.utility-chart-total {
+  .heading {
+    display: flex;
+    margin-top: 10px;
+    margin-bottom: -30px;
+
+    h4 {
+      margin: 7px auto 0;
+    }
+  }
+
+  p {
+    padding-top: 40px;
+    margin-bottom: -20px;
+  }
+}
+
+#utility-chart-total {
+  margin: 40px 0;
+}
+</style>
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -27,7 +27,7 @@ const routes = [
    name: 'Match',
    component: lazyLoad('Match'),
    props: true,
-    alias: ['/match/:match_id/flashes', '/match/:match_id/utility']
+    alias: ['/match/:match_id/flashes', '/match/:match_id/utility', '/match/:match_id/damage']
  },
  {
    path: '/explore',
--- a/src/views/Match.vue
+++ b/src/views/Match.vue
@@ -36,8 +36,15 @@
    <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="list-item flashes" @click.prevent="ActivateScoreInfo('flashes')">Flashes</li>
-        <li class="list-item utility" @click.prevent="ActivateScoreInfo('utility')">Utility</li>
+        <li :class="!data.matchDetails.parsed ? 'disabled' : ''" class="list-item flashes"
+            @click.prevent="data.matchDetails.parsed ? ActivateScoreInfo('flashes') : null">Flashes
+        </li>
+        <li :class="!data.matchDetails.parsed ? 'disabled' : ''" class="list-item utility"
+            @click.prevent="data.matchDetails.parsed ? ActivateScoreInfo('utility') : null">Utility
+        </li>
+        <li :class="!data.matchDetails.parsed ? 'disabled' : ''" class="list-item damage"
+            @click.prevent="data.matchDetails.parsed ? ActivateScoreInfo('damage') : null">Damage
+        </li>
      </ul>
    </div>
  </div>
@@ -56,8 +63,8 @@
    </div>

    <div id="flashes">
-      <FlashChart v-for="(player, id) in data.stats" :key="player.player.steamid64"
-                  :id="id"
+      <FlashChart v-for="(player, id) in data.stats" :id="id"
+                  :key="player.player.steamid64"
                  :avatar="player.player.avatar"
                  :duration="player.extended.flash.duration"
                  :name="player.player.name"
@@ -66,16 +73,17 @@
    </div>

    <div id="utility">
-      <UtilityChart v-for="(player, id) in data.stats" :key="player.player.steamid64"
-                  :id="id"
-                  :avatar="player.player.avatar"
+      <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.extended.dmg.ud"
+                    :ud="player.extended.dmg.ud"
      />
    </div>

    <div id="damage">
-      Damage
+      <DamageChart :stats="data.stats" />
    </div>
  </div>
 </template>
@@ -89,6 +97,8 @@ 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'))

 export default {
  name: 'Match',
@@ -97,6 +107,8 @@ export default {
    ScoreTeam,
    FlashChart,
    UtilityChart,
+    UtilityChartTotal,
+    DamageChart
  },
  setup(props) {
    // Refs
@@ -156,10 +168,10 @@ export default {
      newNavItem.classList.add('active')
      newItem.classList.add('active')

-      if (id === 'flashes' || id === 'utility'){
-        history.pushState({}, null, `/match/${data.matchDetails.match_id}/${id}`)
+      if (id === 'flashes' || id === 'utility' || id === 'damage') {
+        history.replaceState({}, null, `/match/${data.matchDetails.match_id}/${id}`)
      } else if (id === 'scoreboard') {
-        history.pushState({}, null, `/match/${data.matchDetails.match_id}`)
+        history.replaceState({}, null, `/match/${data.matchDetails.match_id}`)
      }
    }

@@ -173,11 +185,11 @@ export default {
    })

    onMounted(() => {
-      if (router.currentRoute.value.href.split('/')[3]) {
-        setTimeout(() => {
+      setTimeout(() => {
+        if (router.currentRoute.value.href.split('/')[3]) {
          ActivateScoreInfo(router.currentRoute.value.href.split('/')[3])
-        }, 500)
-      }
+        }
+      }, 200)
    })

    return {
@@ -266,5 +278,14 @@ export default {
  .active {
    background: var(--bs-info)
  }
+
+  .disabled {
+    color: #585858;
+
+    &:hover {
+      background: transparent;
+      cursor: default;
+    }
+  }
 }
 </style>
--- a/src/views/Player.vue
+++ b/src/views/Player.vue
@@ -1,5 +1,5 @@
 <template>
-  <img class="bg-img" src="" alt="">
+  <img alt="" class="bg-img" src="">
  <div class="wrapper">
    <div class="container">
      <div class="card mb-3 bg-transparent border-0">
@@ -102,7 +102,6 @@
            <th class="text-center assists" scope="col">A</th>
            <th class="text-center deaths" scope="col">D</th>
            <th class="text-center kdiff" scope="col" style="cursor: help" title="Kill-to-death ratio">+/-</th>
-            <th class="text-center adr" scope="col" style="cursor: help" title="Average damage per round">ADR</th>
            <th class="text-center hltv" scope="col" style="cursor: help" title="HLTV 1.0 Rating">Rating</th>
            <th class="text-center duration" scope="col">Duration</th>
            <th class="date" scope="col">Date</th>
@@ -115,8 +114,10 @@
              class="match"
              @click="GoToMatch(match.match_id)">
            <td class="td-map text-center">
+              <i v-if="match.parsed" class="far fa-chart-bar parsed" style="cursor: help"
+                 title="Demo has been parsed for additional data"></i>
              <img :alt="match.map ? match.map : 'Map not found'"
-                   :src="match.map !== '' ? require('@/images/map_icons/map_icon_' + match.map + '.svg') : require('../images/icons/image.svg')"
+                   :src="match.map !== '' ? require('@/images/map_icons/map_icon_' + match.map + '.svg') : require('../images/map_icons/map_icon_lobby_mapveto.svg')"
                   :title="match.map"
                   class="map-icon">
            </td>
@@ -151,11 +152,6 @@
                (match.stats[0].kills ? match.stats[0].kills : 0) - (match.stats[0].deaths ? match.stats[0].deaths : 0)
              }}
            </td>
-            <td class="td-adr text-center">
-              {{
-                Math.floor((match.stats[0].extended.dmg.enemy ? match.stats[0].extended.dmg.enemy : 0) / (match.score[0] + match.score[1]))
-              }}
-            </td>
            <td :class="GetHLTV_1(
                      match.stats[0].kills,
                      match.score[0] + match.score[1],
@@ -203,7 +199,8 @@ import {
  FormatFullDate,
  FormatFullDuration,
  GetHLTV_1,
-  GoToMatch, LoadImage,
+  GoToMatch,
+  LoadImage,
  SaveLastVisitedToLocalStorage
 } from "../utils";

@@ -392,6 +389,7 @@ export default {

 table {
  margin-bottom: 0;
+
  tr {
    th {
      line-height: 1;
@@ -415,9 +413,28 @@ table {
      vertical-align: middle;
    }

-    .td-map img {
-      width: 60px;
-      height: auto;
+    .map {
+      padding-left: 3rem;
+    }
+
+    .td-map {
+      position: relative;
+      padding-left: 3rem;
+      text-align: left !important;
+      width: 50px;
+
+      .parsed {
+        position: absolute;
+        left: 7px;
+        top: 27px;
+        color: var(--bs-warning);
+        font-size: 1.5rem;
+      }
+
+      img {
+        width: 60px;
+        height: auto;
+      }
    }

    .td-rank img {
@@ -471,9 +488,24 @@ table {
      width: 75px;
    }
  }
-  .td-map img {
-    width: 40px !important;
-    height: auto;
+  .map {
+    padding-left: 2.2rem !important;
+  }
+
+  .td-map {
+    position: relative;
+    padding-left: 2.2rem !important;
+    width: 35px !important;
+
+    .parsed {
+      position: absolute;
+      left: .3rem !important;
+    }
+
+    img {
+      width: 40px !important;
+      height: auto;
+    }
  }
  .td-rank img {
    width: 50px !important;
@@ -490,8 +522,8 @@ table {
    font-size: 1rem !important;
  }

-  .kills, .deaths, .assists, .kdiff, .adr, .duration, .hltv, .length,
-  .td-kills, .td-deaths, .td-assists, .td-plus, .td-adr, .td-duration, .td-hltv, .td-length {
+  .kills, .deaths, .assists, .kdiff, .duration, .hltv, .length,
+  .td-kills, .td-deaths, .td-assists, .td-plus, .td-duration, .td-hltv, .td-length {
    display: none;
  }
 }