#34 addressed some bugs occurring in the steam in-game browser

src/components/Details.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="details-site">
     <div class="multi-kills">
-      <h3 class="text-center">Multi-Kills</h3>
+      <h3 class="text-center mt-2">Multi-Kills</h3>
       <MultiKillsChart/>
     </div>
     <hr>
@@ -58,9 +58,5 @@ export default {
     width: 100%;
     border: 1px solid white;
   }
-
-  .multi-kills {
-    margin-top: 1rem;
-  }
 }
 </style>

src/components/EqValueGraph.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="economy">
-    <h3>Economy</h3>
+    <h3 class="text-center mt-2">Economy</h3>
     <div class="flexbreak"></div>
     <div id="economy-graph"></div>
   </div>
@@ -252,10 +252,11 @@ export default {
   justify-content: center;
   align-items: center;
 
-  margin: 1rem auto 3rem;
+  margin: 0 auto 3rem;
 
   h3 {
     margin-bottom: -1rem;
+    z-index: 2;
   }
 }
 

src/components/FlashChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="player-flash">
-    <h3>Flash-<span v-if="toggle === 'duration'">Duration</span><span v-if="toggle === 'total'">Count</span></h3>
+    <h3 class="text-center mt-2">Flash-<span v-if="toggle === 'duration'">Duration</span><span v-if="toggle === 'total'">Count</span></h3>
     <div class="flexbreak"></div>
     <div class="toggle-btn">
       <span class="fs-6 text-muted" @click="toggleShow">

src/components/ScoreTeam.vue

@@ -1,32 +1,63 @@
 <template>
   <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'">
-        <div v-if="team_id === 1" class="team-2">
-          <img src="../assets/images/icons/t_logo.svg" alt="T logo">
-          <img src="../assets/images/icons/ct_logo.svg" alt="CT logo">
+    <table>
+      <caption>
+        <div v-if="store.state.matchDetails.max_rounds === 16" id="short-match">
+          <div class="team-1">
+            <div class="score-text">
+              <span v-if="store.state.matchDetails.score[0] < 10"
+                    :style="store.state.matchDetails.score[0] < 10 ? 'margin-left: -10px;' : ''"
+                    class="hidden">0</span><span
+                :class="store.state.matchDetails.score[0] === 9 ? 'text-success' : store.state.matchDetails.score[0] === 8 ? 'text-warning' : 'text-danger'">{{
+                store.state.matchDetails.score[0]
+              }}</span>
+            </div>
+            <img alt="CT logo" src="../assets/images/icons/ct_logo.svg">
+            <img alt="T logo" src="../assets/images/icons/t_logo.svg">
+          </div>
+          <div class="team-2">
+            <div class="score-text">
+              <span v-if="store.state.matchDetails.score[1] < 10"
+                    :style="store.state.matchDetails.score[1] < 10 ? 'margin-left: -10px;' : ''"
+                    class="hidden">0</span><span
+                :class="store.state.matchDetails.score[1] === 9 ? 'text-success' : store.state.matchDetails.score[1] === 8 ? 'text-warning' : 'text-danger'">{{
+                store.state.matchDetails.score[1]
+              }}</span>
+            </div>
+            <img alt="T logo" src="../assets/images/icons/t_logo.svg">
+            <img alt="CT logo" src="../assets/images/icons/ct_logo.svg">
+          </div>
         </div>
-        <span v-if="score < 10" class="hidden" :style="score < 10 ? 'margin-left: -10px;' : ''">0</span>{{ score }}
-        <div v-if="team_id === 0" class="team-1">
-          <img src="../assets/images/icons/ct_logo.svg" alt="CT logo">
-          <img src="../assets/images/icons/t_logo.svg" alt="T logo">
+
+        <div v-if="store.state.matchDetails.max_rounds === 30 || !store.state.matchDetails.max_rounds" id="long-match">
+          <div class="team-1">
+            <div class="score-text">
+              <span v-if="store.state.matchDetails.score[0] < 10"
+                    :style="store.state.matchDetails.score[0] < 10 ? 'margin-left: -10px;' : ''"
+                    class="hidden">0</span><span
+                :class="store.state.matchDetails.score[0] === 16 ? 'text-success' : store.state.matchDetails.score[0] === 15 ? 'text-warning' : 'text-danger'">{{
+                store.state.matchDetails.score[0]
+              }}</span>
+            </div>
+            <img alt="CT logo" src="../assets/images/icons/ct_logo.svg">
+            <img alt="T logo" src="../assets/images/icons/t_logo.svg">
+          </div>
+          <div class="team-2">
+            <div class="score-text">
+              <span v-if="store.state.matchDetails.score[1] < 10"
+                    :style="store.state.matchDetails.score[1] < 10 ? 'margin-left: -10px;' : ''"
+                    class="hidden">0</span><span
+                :class="store.state.matchDetails.score[1] === 16 ? 'text-success' : store.state.matchDetails.score[1] === 15 ? 'text-warning' : 'text-danger'">{{
+                store.state.matchDetails.score[1]
+              }}</span>
+            </div>
+            <img alt="T logo" src="../assets/images/icons/t_logo.svg">
+            <img alt="CT logo" src="../assets/images/icons/ct_logo.svg">
+          </div>
         </div>
       </caption>
-      <caption v-if="store.state.matchDetails.max_rounds === 30 || !store.state.matchDetails.max_rounds"
-               :class="score === 16 ? 'text-success' : score === 15 ? 'text-warning' : 'text-danger'">
-        <div v-if="team_id === 1" class="team-2">
-          <img src="../assets/images/icons/t_logo.svg" alt="T logo">
-          <img src="../assets/images/icons/ct_logo.svg" alt="CT logo">
-        </div>
-        <span v-if="score < 10" class="hidden" :style="score < 10 ? 'margin-left: -10px;' : ''">0</span>{{ score }}
-        <div v-if="team_id === 0" class="team-1">
-          <img src="../assets/images/icons/ct_logo.svg" alt="CT logo">
-          <img src="../assets/images/icons/t_logo.svg" alt="T logo">
-        </div>
-      </caption>
-      <thead v-if="team_id === 0">
+
+      <thead>
       <tr>
         <th class="player__vac"></th>
         <th class="player__avatar"></th>
@@ -46,12 +77,12 @@
         <th class="player__score">Score</th>
       </tr>
       </thead>
+
       <tbody>
-      <tr v-for="player in store.state.matchDetails.stats" v-show="player.team_id === team_id + 1"
+      <tr v-for="player in teamStats(1)"
           :key="player.player.steamid64"
-          class="player">
-        <ScoreTeamPlayer v-if="player.team_id === team_id + 1"
-                         :assists="player.assists"
+          class="team-1">
+        <ScoreTeamPlayer :assists="player.assists"
                          :avatar="player.player.avatar"
                          :color="player.color"
                          :deaths="player.deaths"
@@ -69,8 +100,49 @@
                          :name="player.player.name"
                          :parsed="store.state.matchDetails.parsed"
                          :player_score="player.score"
-                         :rank_old="player.rank?.old"
                          :rank_new="player.rank?.new"
+                         :rank_old="player.rank?.old"
+                         :rounds_played="store.state.matchDetails.score.reduce((a, b) => a + b)"
+                         :steamid64="player.player.steamid64"
+                         :tracked="player.player.tracked"
+                         :vac="player.player.vac"
+                         :vac_date="player.player.vac_date"
+        />
+      </tr>
+
+      <tr class="hr_outer">
+        <td colspan="14"></td>
+      </tr>
+      <tr class="hr">
+        <td colspan="14"></td>
+      </tr>
+      <tr class="hr_outer">
+        <td colspan="14"></td>
+      </tr>
+
+      <tr v-for="player in teamStats(2)"
+          :key="player.player.steamid64"
+          class="team-2">
+        <ScoreTeamPlayer :assists="player.assists"
+                         :avatar="player.player.avatar"
+                         :color="player.color"
+                         :deaths="player.deaths"
+                         :dmg="player.dmg?.enemy"
+                         :game_ban="player.player.game_ban"
+                         :game_ban_date="player.player.game_ban_date"
+                         :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_new="player.rank?.new"
+                         :rank_old="player.rank?.old"
                          :rounds_played="store.state.matchDetails.score.reduce((a, b) => a + b)"
                          :steamid64="player.player.steamid64"
                          :tracked="player.player.tracked"
@@ -78,7 +150,6 @@
                          :vac_date="player.player.vac_date"
         />
       </tr>
-      <tr v-if="team_id === 0" class="hr"></tr>
       </tbody>
     </table>
   </div>
@@ -93,14 +164,33 @@ export default {
   components: {ScoreTeamPlayer},
   setup() {
     const store = useStore()
-    return {store}
+
+    const teamStats = (team) => {
+      let arr = []
+
+      if (team === 1) {
+        arr = []
+        for (let i = 0; i < 5; i++) {
+          arr.push(store.state.matchDetails.stats[i])
+        }
+      } else if (team === 2) {
+        arr = []
+        for (let i = 5; i < 10; i++) {
+          arr.push(store.state.matchDetails.stats[i])
+        }
+      }
+
+      return arr
+    }
+
+    return {store, teamStats}
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .scoreboard {
-  margin-bottom: 20px;
+  margin: 1rem 0;
 }
 
 hr {
@@ -110,17 +200,12 @@ hr {
 table {
   width: 900px;
   text-align: center;
-  margin-top: 100px;
-  margin-bottom: -80px;
 
   caption {
     position: relative;
     color: white;
-    font-size: 3rem;
     caption-side: top;
     padding: 0;
-    margin-left: -78px;
-    margin-bottom: -158px;
 
     z-index: 0;
 
@@ -129,37 +214,52 @@ table {
       user-select: none;
     }
 
-    .team-1 {
-      top: 95px;
-    }
-
-    .team-2 {
-      bottom: 120px;
+    .score-text {
+      position: relative;
     }
 
     .team-1,
     .team-2 {
       position: absolute;
-      left: 7px;
-      color: white;
-      font-size: 1rem;
+      font-size: 3rem;
       opacity: .8;
 
+      margin-left: -100px;
+
       img {
-        position: inherit;
+        position: absolute;
         width: 30px;
         height: 30px;
+        margin-top: 22px;
+        margin-left: 10px;
 
         &:first-child {
           z-index: 1;
         }
 
         &:last-child {
-          margin-left: 20px;
+          margin-left: 30px;
           z-index: 0 !important;
         }
       }
     }
+
+    .team-1 {
+      top: 85px;
+
+      .score-text {
+        margin-left: 5px;
+      }
+    }
+
+    .team-2 {
+      top: 180px;
+
+      .score-text {
+        top: 150px;
+        margin-left: 5px;
+      }
+    }
   }
 
   tbody {
@@ -167,7 +267,7 @@ table {
     z-index: 1;
   }
 
-  tr {
+  tr.team-1, tr.team-2 {
     height: 40px;
   }
 
@@ -176,13 +276,21 @@ table {
   }
 
   .hr {
-    height: 20px;;
-    border-bottom: 1px solid white;
+    td {
+      height: 1px;
+      padding: 0;
+      background: white;
+    }
+  }
+
+  .hr_outer {
+    height: 15px;
   }
 
   .player__vac {
     width: 20px;
   }
+
 }
 
 @media (max-width: 1200px) {
@@ -193,11 +301,10 @@ table {
 
 @media (max-width: 991px) {
   .scoreboard {
-    margin-left: 65px;
-    margin-top: -20px;
+    margin-left: -10px;
 
     caption {
-      margin-left: -60px;
+      display: none;
     }
   }
 }

src/views/Match.vue

@@ -4,7 +4,7 @@
   <div class="match-wrapper">
     <div class="head row m-auto text-center">
       <div class="map-score">
-        <div v-if="route.fullPath.split('/')[3] !== 'overview'" class="score-team-1">
+        <div class="score-team-1">
           <h1 :class="checkWin(1)" :style="data.score[0] < 10 ? 'padding-left: 20px;' : ''">{{ data.score[0] }}</h1>
           <div v-if="data.score[0]" class="team-1">
             <img alt="CT logo" src="../assets/images/icons/ct_logo.svg">
@@ -21,7 +21,7 @@
                class="map-icon" title="Map unknown"
           >
         </div>
-        <div v-if="route.fullPath.split('/')[3] !== 'overview'" class="score-team-2">
+        <div class="score-team-2">
           <h1 :class="checkWin(2)" :style="data.score[1] < 10 ? 'padding-left: 20px;' : ''">{{ data.score[1] }}</h1>
           <div v-if="data.score[1]" class="team-2">
             <img alt="T logo" src="../assets/images/icons/t_logo.svg">