updated MatchView.vue

src/views/MatchView.vue

@@ -294,7 +294,7 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import {
   onBeforeMount,
   onBeforeUnmount,
@@ -305,7 +305,6 @@ import {
 } from "vue";
 import {
   closeNav,
-  CreatePlayersArray,
   DisplayRank,
   errorHandling,
   FixMapName,
@@ -315,27 +314,41 @@ import {
   GoToLink,
   LoadImage,
   ProcessName,
-} from "/src/utils";
+  setAppDivBackground,
-import { useStore } from "vuex";
+  setBgImgDisplay,
+} from "@/utils";
 import { useRoute } from "vue-router";
-import { DateTime } from "luxon/build/es6/luxon";
+import { DateTime } from "luxon";
-import { FOOTER_HEIGHT, NAV_HEIGHT } from "/src/constants";
+import { FOOTER_HEIGHT, NAV_HEIGHT } from "@/constants";
+import { useInfoStateStore } from "@/stores/infoState";
+import { useMatchDetailsStore } from "@/stores/matchDetails";
+import type { Match, MatchStats } from "@/types";
+import { usePlayersArrStore } from "@/stores/playersArr";
 
-export default {
-  name: "MatchView",
-  props: ["match_id"],
-  setup(props) {
-    const store = useStore();
 const route = useRoute();
 const pHeight = ref(0);
-
 const matchIdPattern = /^\d{19}$/;
 
+const infoStateStore = useInfoStateStore();
+const matchDetailsStore = useMatchDetailsStore();
+const playersArrStore = usePlayersArrStore();
+
+// Props
+const props = defineProps<{
+  match_id: string;
+}>();
+
 // Refs
-    const data = reactive({
+interface dataI {
+  player_id: string;
+  matchDetails?: Match;
+  stats?: MatchStats[];
+  score: number[];
+  team1Avg: number;
+  team2Avg: number;
+}
+const data: dataI = reactive({
   player_id: "",
-      matchDetails: {},
-      stats: [],
   score: [0],
   team1Avg: 0,
   team2Avg: 0,
@@ -343,8 +356,7 @@ export default {
 
 const getWindowHeight = () => {
   const navHeight = document.getElementsByTagName("nav")[0].clientHeight;
-      const footerHeight =
+  const footerHeight = document.getElementsByTagName("footer")[0].clientHeight;
-        document.getElementsByTagName("footer")[0].clientHeight;
 
   // 70 = nav-height | 108.5 = footer-height
   return window.innerHeight - navHeight - footerHeight;
@@ -355,8 +367,9 @@ export default {
 // Functions
 const GetMatch = async () => {
   if (matchIdPattern.test(props.match_id)) {
-        const res = await GetMatchDetails(store, props.match_id);
+    const [res, info] = await GetMatchDetails(props.match_id);
 
+    if (info.message !== "") infoStateStore.addInfo(info);
     if (res !== null) {
       if (res.map)
         document.title = `${FixMapName(res.map)} ► ${res.score[0]} : ${
@@ -366,16 +379,13 @@ export default {
         )} | csgoWTF`;
       else document.title = `Match-Details | csgoWTF`;
 
-          store.commit({
+      matchDetailsStore.matchDetails = res;
-            type: "changeMatchDetails",
-            data: res,
-          });
 
       checkRoute();
-          data.matchDetails = store.state.matchDetails;
+      data.matchDetails = matchDetailsStore.matchDetails;
 
-          data.matchDetails.stats.forEach((p) => {
+      data.matchDetails.stats?.forEach((p) => {
-            p.player.name = ProcessName(p.player.name);
+        p.player!.name = ProcessName(p.player?.name || "");
       });
 
       data.stats = data.matchDetails.stats;
@@ -387,8 +397,8 @@ export default {
         Math.floor(
           getTeamAvgRank(1).reduce((a, b) => {
             if (a !== 0 && b !== 0) pCount++;
-                return a + b;
+            return (a ? a : 0) + (b ? b : 0);
-              })
+          }) || 0
         ) / pCount;
 
       pCount = 1;
@@ -396,20 +406,15 @@ export default {
         Math.floor(
           getTeamAvgRank(2).reduce((a, b) => {
             if (a !== 0 && b !== 0) pCount++;
-                return a + b;
+            return (a ? a : 0) + (b ? b : 0);
-              })
+          }) || 0
         ) / pCount;
 
       LoadImage(data.matchDetails.map ? data.matchDetails.map : "random");
 
-          store.commit({
+      playersArrStore.playersArr = data.stats;
-            type: "changePlayersArr",
-            data: CreatePlayersArray(data.stats),
-          });
-
-          // console.log(data.matchDetails)
     } else {
-          document.querySelector(".bg-img").style.display = "none";
+      setBgImgDisplay("none", HTMLImageElement);
     }
   } else {
     errorHandling(404);
@@ -433,41 +438,41 @@ export default {
   }
 };
 
-    const getTeamAvgRank = (team) => {
+const getTeamAvgRank = (team: number) => {
   let arr = [];
   for (let i = (team - 1) * 5; i < team * 5; i++) {
-        arr.push(
+    const player = data.stats !== undefined ? data.stats[i] : undefined;
-          data.matchDetails.stats[i].rank?.old !== undefined
+    if (player !== undefined)
-            ? data.matchDetails.stats[i].rank?.old
+      arr.push(player?.rank?.old ? player?.rank?.old : 0);
-            : 0
-        );
   }
   return arr;
 };
 
 const handleDownloadMenu = () => {
-      const downloadGroup = document.getElementById("downloadGroup");
+  const downloadGroup = document.getElementById(
-      const menuBtn = document.getElementById("downloadMenuBtn");
+    "downloadGroup"
-      let opacity = window
+  ) as HTMLDivElement;
-        .getComputedStyle(menuBtn)
+  const menuBtn = document.getElementById("downloadMenuBtn") as HTMLElement;
-        .getPropertyValue("opacity");
+  let opacity = window.getComputedStyle(menuBtn).getPropertyValue("opacity");
+  let tmpOpacity = parseFloat(opacity);
 
   function show() {
-        if (opacity < 1) {
+    if (tmpOpacity < 1) {
-          opacity = opacity + 0.1;
+      tmpOpacity = tmpOpacity + 0.1;
-          downloadGroup.style.opacity = opacity;
+      downloadGroup.style.opacity = tmpOpacity.toString();
     } else {
       clearInterval(0);
     }
   }
 
   function hide() {
-        if (opacity > 0) {
+    if (tmpOpacity > 0) {
-          opacity = opacity - 0.1;
+      tmpOpacity = tmpOpacity - 0.1;
       menuBtn.style.opacity = opacity;
     } else {
       menuBtn.style.display = "none";
-          downloadGroup.style.opacity = 0;
+      tmpOpacity = 0;
+      downloadGroup.style.opacity = tmpOpacity.toString();
       downloadGroup.style.display = "block";
       setInterval(show, 35);
     }
@@ -485,7 +490,7 @@ export default {
 });
 
 onBeforeUnmount(() => {
-      store.commit("resetMatchDetails");
+  matchDetailsStore.$reset();
 });
 
 onMounted(() => {
@@ -493,17 +498,17 @@ export default {
   const navHeight = 42;
 
   const height =
-        window.innerHeight -
+    window.innerHeight - NAV_HEIGHT - FOOTER_HEIGHT - headHeight - navHeight;
-        NAV_HEIGHT -
+  const scoreWrapper = document.getElementById(
-        FOOTER_HEIGHT -
+    "scoreWrapper"
-        headHeight -
+  ) as HTMLDivElement;
-        navHeight;
-      const scoreWrapper = document.getElementById("scoreWrapper");
   scoreWrapper.style.minHeight = height + "px";
 
-      document.getElementById("app").style.background =
+  setAppDivBackground(
-        "linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.85) 30%, rgba(0, 0, 0, 0.85) 70%, rgba(0, 0, 0, .6) 100%)";
+    "linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.85) 30%, rgba(0, 0, 0, 0.85) 70%, rgba(0, 0, 0, .6) 100%)",
-      document.querySelector(".bg-img").style.display = "initial";
+    HTMLDivElement
+  );
+  setBgImgDisplay("initial", HTMLImageElement);
 });
 
 window.onresize = () => {
@@ -513,20 +518,6 @@ export default {
 document.addEventListener("click", () => {
   closeNav("matchNav");
 });
-
-    return {
-      data,
-      DisplayRank,
-      FormatFullDate,
-      FormatDuration,
-      FixMapName,
-      route,
-      pHeight,
-      handleDownloadMenu,
-      getTeamAvgRank,
-    };
-  },
-};
 </script>
 
 <style lang="scss" scoped>