feature: multip map stats / round history bar (#298)

Author: lukepolo

components/match/LineupClutches.vue

@@ -5,7 +5,7 @@ import PlayerDisplay from "../PlayerDisplay.vue";
 
 <template>
   <div
-    v-for="match_map in match.match_maps"
+    v-for="match_map in filteredMatchMaps"
     :key="match_map.id"
     class="bg-muted/30 p-6 rounded-lg mb-8"
   >
@@ -98,6 +98,10 @@ export default {
       required: true,
       type: Object,
     },
+    selectedMapId: {
+      type: String as () => string | null,
+      default: null,
+    },
   },
   methods: {
     getClutches(member: { steam_id: string }) {
@@ -133,6 +137,14 @@ export default {
     },
   },
   computed: {
+    filteredMatchMaps() {
+      if (!this.selectedMapId) {
+        return this.match.match_maps;
+      }
+      return this.match.match_maps.filter(
+        (match_map: any) => match_map.id === this.selectedMapId,
+      );
+    },
     clutches() {
       const lineup1 = this.lineup1.lineup_players;
       const lineup2 = this.lineup2.lineup_players;

components/match/LineupOpeningDuelRow.vue

@@ -26,12 +26,24 @@ export default {
       required: true,
       type: Object,
     },
+    selectedMapId: {
+      type: String as () => string | null,
+      default: null,
+    },
   },
   computed: {
+    filteredMatchMaps() {
+      if (!this.selectedMapId) {
+        return this.match.match_maps;
+      }
+      return this.match.match_maps.filter(
+        (match_map: any) => match_map.id === this.selectedMapId,
+      );
+    },
     attempts() {
       let attempts = 0;
 
-      for (const match_map of this.match.match_maps) {
+      for (const match_map of this.filteredMatchMaps) {
         for (const round of match_map.rounds) {
           const firstKill = round.kills.find((kill: any) => {
             return (
@@ -57,7 +69,7 @@ export default {
     success() {
       let success = 0;
 
-      for (const match_map of this.match.match_maps) {
+      for (const match_map of this.filteredMatchMaps) {
         for (const round of match_map.rounds) {
           const firstKill = round.kills.find((kill: any) => {
             return (

components/match/LineupOpeningDuels.vue

@@ -21,6 +21,7 @@ import LineupOpeningDuelRow from "~/components/match/LineupOpeningDuelRow.vue";
         :member="member"
         :lineup="lineup"
         :match="match"
+        :selected-map-id="selectedMapId"
         v-for="member of lineup.lineup_players"
       ></lineup-opening-duel-row>
     </TableBody>
@@ -38,6 +39,10 @@ export default {
       required: true,
       type: Object,
     },
+    selectedMapId: {
+      type: String as () => string | null,
+      default: null,
+    },
   },
 };
 </script>