reworked the sub-navigation on the Match-page

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>