reworked the sub-navigation on the Match-page

2021-10-15 11:11:38 +02:00
parent a29f4b1f2a
commit 3e9d8c47e3
11 changed files with 244 additions and 332 deletions
--- a/src/components/DamageChart.vue
+++ b/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: {
-    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) => {
-      let arr = []
-      for (let i = (team - 1) * 5; i < team * 5; i++) {
-        arr.push({
-          value: checkStatEmpty(stats[i].dmg.enemy),
-          itemStyle: {
-            color: getComputedStyle(document.documentElement).getPropertyValue(`--csgo-${stats[i].color}`)
-          }
-        })
+    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(Function('return(function(stats, i){ return stats[i].dmg.' + prop + '})')()(stats, i)) * (prop === 'enemy' ? 1 : -1),
+            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 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>
--- a/src/components/FlashChart.vue
+++ b/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>
-  <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>
--- a/src/components/MultiKillsChart.vue
+++ b/src/components/MultiKillsChart.vue
@@ -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>
--- a/src/components/ScoreTeam.vue
+++ b/src/components/ScoreTeam.vue
@@ -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,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">
-      <tr v-if="player.team_id === props.team_id" class="player">
-        <ScoreTeamPlayer
-            :steamid64="player.player.steamid64"
-            :assists="player.assists"
-            :avatar="player.player.avatar"
-            :deaths="player.deaths"
-            :dmg="player.dmg?.enemy"
-            :hs="player.headshot"
-            :kdiff="player.kills - player.deaths"
-            :kills="player.kills"
-            :mk_duo="player.multi_kills?.duo"
-            :mk_pent="player.multi_kills?.pent"
-            :mk_quad="player.multi_kills?.quad"
-            :mk_triple="player.multi_kills?.triple"
-            :mvp="player.mvp"
-            :name="player.player.name"
-            :player_score="player.score"
-            :rank="player.rank?.old"
-            :rounds_played="props.rounds_played"
-            :color="player.color"
-            :tracked="player.player.tracked"
-            :parsed="props.parsed"
+      <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"
+                         :kdiff="player.kills - player.deaths"
+                         :kills="player.kills"
+                         :mk_duo="player.multi_kills?.duo"
+                         :mk_pent="player.multi_kills?.pent"
+                         :mk_quad="player.multi_kills?.quad"
+                         :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="store.state.matchDetails.score.reduce((a, b) => a + b)"
+                         :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: {
-    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>
--- a/src/components/ScoreTeamPlayer.vue
+++ b/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',