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,218 +314,210 @@ 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 {
+const route = useRoute();
-  name: "MatchView",
+const pHeight = ref(0);
-  props: ["match_id"],
+const matchIdPattern = /^\d{19}$/;
-  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();
 
-    // Refs
+// Props
-    const data = reactive({
+const props = defineProps<{
-      player_id: "",
+  match_id: string;
-      matchDetails: {},
+}>();
-      stats: [],
-      score: [0],
-      team1Avg: 0,
-      team2Avg: 0,
-    });
 
-    const getWindowHeight = () => {
+// Refs
-      const navHeight = document.getElementsByTagName("nav")[0].clientHeight;
+interface dataI {
-      const footerHeight =
+  player_id: string;
-        document.getElementsByTagName("footer")[0].clientHeight;
+  matchDetails?: Match;
+  stats?: MatchStats[];
+  score: number[];
+  team1Avg: number;
+  team2Avg: number;
+}
+const data: dataI = reactive({
+  player_id: "",
+  score: [0],
+  team1Avg: 0,
+  team2Avg: 0,
+});
 
-      // 70 = nav-height | 108.5 = footer-height
+const getWindowHeight = () => {
-      return window.innerHeight - navHeight - footerHeight;
+  const navHeight = document.getElementsByTagName("nav")[0].clientHeight;
-    };
+  const footerHeight = document.getElementsByTagName("footer")[0].clientHeight;
 
-    pHeight.value = getWindowHeight();
+  // 70 = nav-height | 108.5 = footer-height
-
+  return window.innerHeight - navHeight - footerHeight;
-    // Functions
-    const GetMatch = async () => {
-      if (matchIdPattern.test(props.match_id)) {
-        const res = await GetMatchDetails(store, props.match_id);
-
-        if (res !== null) {
-          if (res.map)
-            document.title = `${FixMapName(res.map)} ► ${res.score[0]} : ${
-              res.score[1]
-            } ◄ ${DateTime.fromSeconds(res.date).toLocaleString(
-              DateTime.DATETIME_SHORT
-            )} | csgoWTF`;
-          else document.title = `Match-Details | csgoWTF`;
-
-          store.commit({
-            type: "changeMatchDetails",
-            data: res,
-          });
-
-          checkRoute();
-          data.matchDetails = store.state.matchDetails;
-
-          data.matchDetails.stats.forEach((p) => {
-            p.player.name = ProcessName(p.player.name);
-          });
-
-          data.stats = data.matchDetails.stats;
-          data.score = data.matchDetails.score;
-
-          // Set avg team ranks
-          let pCount = 1;
-          data.team1Avg =
-            Math.floor(
-              getTeamAvgRank(1).reduce((a, b) => {
-                if (a !== 0 && b !== 0) pCount++;
-                return a + b;
-              })
-            ) / pCount;
-
-          pCount = 1;
-          data.team2Avg =
-            Math.floor(
-              getTeamAvgRank(2).reduce((a, b) => {
-                if (a !== 0 && b !== 0) pCount++;
-                return a + b;
-              })
-            ) / pCount;
-
-          LoadImage(data.matchDetails.map ? data.matchDetails.map : "random");
-
-          store.commit({
-            type: "changePlayersArr",
-            data: CreatePlayersArray(data.stats),
-          });
-
-          // console.log(data.matchDetails)
-        } else {
-          document.querySelector(".bg-img").style.display = "none";
-        }
-      } else {
-        errorHandling(404);
-      }
-    };
-
-    const checkRoute = () => {
-      if (route.fullPath.split("/")[3]) {
-        const sub = route.fullPath.split("/")[3];
-        if (matchIdPattern.test(props.match_id)) {
-          GoToLink(`/match/${props.match_id}/${sub}`);
-        } else {
-          errorHandling(404);
-        }
-      } else {
-        if (matchIdPattern.test(props.match_id))
-          GoToLink(`/match/${props.match_id}`);
-        else {
-          errorHandling(404);
-        }
-      }
-    };
-
-    const getTeamAvgRank = (team) => {
-      let arr = [];
-      for (let i = (team - 1) * 5; i < team * 5; i++) {
-        arr.push(
-          data.matchDetails.stats[i].rank?.old !== undefined
-            ? data.matchDetails.stats[i].rank?.old
-            : 0
-        );
-      }
-      return arr;
-    };
-
-    const handleDownloadMenu = () => {
-      const downloadGroup = document.getElementById("downloadGroup");
-      const menuBtn = document.getElementById("downloadMenuBtn");
-      let opacity = window
-        .getComputedStyle(menuBtn)
-        .getPropertyValue("opacity");
-
-      function show() {
-        if (opacity < 1) {
-          opacity = opacity + 0.1;
-          downloadGroup.style.opacity = opacity;
-        } else {
-          clearInterval(0);
-        }
-      }
-
-      function hide() {
-        if (opacity > 0) {
-          opacity = opacity - 0.1;
-          menuBtn.style.opacity = opacity;
-        } else {
-          menuBtn.style.display = "none";
-          downloadGroup.style.opacity = 0;
-          downloadGroup.style.display = "block";
-          setInterval(show, 35);
-        }
-      }
-
-      setInterval(hide, 35);
-    };
-
-    // Watchers
-    watch(() => props.match_id, GetMatch);
-
-    // Run on create
-    onBeforeMount(() => {
-      GetMatch();
-    });
-
-    onBeforeUnmount(() => {
-      store.commit("resetMatchDetails");
-    });
-
-    onMounted(() => {
-      const headHeight = 230;
-      const navHeight = 42;
-
-      const height =
-        window.innerHeight -
-        NAV_HEIGHT -
-        FOOTER_HEIGHT -
-        headHeight -
-        navHeight;
-      const scoreWrapper = document.getElementById("scoreWrapper");
-      scoreWrapper.style.minHeight = height + "px";
-
-      document.getElementById("app").style.background =
-        "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";
-    });
-
-    window.onresize = () => {
-      pHeight.value = getWindowHeight();
-    };
-
-    document.addEventListener("click", () => {
-      closeNav("matchNav");
-    });
-
-    return {
-      data,
-      DisplayRank,
-      FormatFullDate,
-      FormatDuration,
-      FixMapName,
-      route,
-      pHeight,
-      handleDownloadMenu,
-      getTeamAvgRank,
-    };
-  },
 };
+
+pHeight.value = getWindowHeight();
+
+// Functions
+const GetMatch = async () => {
+  if (matchIdPattern.test(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]} : ${
+          res.score[1]
+        } ◄ ${DateTime.fromSeconds(res.date).toLocaleString(
+          DateTime.DATETIME_SHORT
+        )} | csgoWTF`;
+      else document.title = `Match-Details | csgoWTF`;
+
+      matchDetailsStore.matchDetails = res;
+
+      checkRoute();
+      data.matchDetails = matchDetailsStore.matchDetails;
+
+      data.matchDetails.stats?.forEach((p) => {
+        p.player!.name = ProcessName(p.player?.name || "");
+      });
+
+      data.stats = data.matchDetails.stats;
+      data.score = data.matchDetails.score;
+
+      // Set avg team ranks
+      let pCount = 1;
+      data.team1Avg =
+        Math.floor(
+          getTeamAvgRank(1).reduce((a, b) => {
+            if (a !== 0 && b !== 0) pCount++;
+            return (a ? a : 0) + (b ? b : 0);
+          }) || 0
+        ) / pCount;
+
+      pCount = 1;
+      data.team2Avg =
+        Math.floor(
+          getTeamAvgRank(2).reduce((a, b) => {
+            if (a !== 0 && b !== 0) pCount++;
+            return (a ? a : 0) + (b ? b : 0);
+          }) || 0
+        ) / pCount;
+
+      LoadImage(data.matchDetails.map ? data.matchDetails.map : "random");
+
+      playersArrStore.playersArr = data.stats;
+    } else {
+      setBgImgDisplay("none", HTMLImageElement);
+    }
+  } else {
+    errorHandling(404);
+  }
+};
+
+const checkRoute = () => {
+  if (route.fullPath.split("/")[3]) {
+    const sub = route.fullPath.split("/")[3];
+    if (matchIdPattern.test(props.match_id)) {
+      GoToLink(`/match/${props.match_id}/${sub}`);
+    } else {
+      errorHandling(404);
+    }
+  } else {
+    if (matchIdPattern.test(props.match_id))
+      GoToLink(`/match/${props.match_id}`);
+    else {
+      errorHandling(404);
+    }
+  }
+};
+
+const getTeamAvgRank = (team: number) => {
+  let arr = [];
+  for (let i = (team - 1) * 5; i < team * 5; i++) {
+    const player = data.stats !== undefined ? data.stats[i] : undefined;
+    if (player !== undefined)
+      arr.push(player?.rank?.old ? player?.rank?.old : 0);
+  }
+  return arr;
+};
+
+const handleDownloadMenu = () => {
+  const downloadGroup = document.getElementById(
+    "downloadGroup"
+  ) as HTMLDivElement;
+  const menuBtn = document.getElementById("downloadMenuBtn") as HTMLElement;
+  let opacity = window.getComputedStyle(menuBtn).getPropertyValue("opacity");
+  let tmpOpacity = parseFloat(opacity);
+
+  function show() {
+    if (tmpOpacity < 1) {
+      tmpOpacity = tmpOpacity + 0.1;
+      downloadGroup.style.opacity = tmpOpacity.toString();
+    } else {
+      clearInterval(0);
+    }
+  }
+
+  function hide() {
+    if (tmpOpacity > 0) {
+      tmpOpacity = tmpOpacity - 0.1;
+      menuBtn.style.opacity = opacity;
+    } else {
+      menuBtn.style.display = "none";
+      tmpOpacity = 0;
+      downloadGroup.style.opacity = tmpOpacity.toString();
+      downloadGroup.style.display = "block";
+      setInterval(show, 35);
+    }
+  }
+
+  setInterval(hide, 35);
+};
+
+// Watchers
+watch(() => props.match_id, GetMatch);
+
+// Run on create
+onBeforeMount(() => {
+  GetMatch();
+});
+
+onBeforeUnmount(() => {
+  matchDetailsStore.$reset();
+});
+
+onMounted(() => {
+  const headHeight = 230;
+  const navHeight = 42;
+
+  const height =
+    window.innerHeight - NAV_HEIGHT - FOOTER_HEIGHT - headHeight - navHeight;
+  const scoreWrapper = document.getElementById(
+    "scoreWrapper"
+  ) as HTMLDivElement;
+  scoreWrapper.style.minHeight = height + "px";
+
+  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%)",
+    HTMLDivElement
+  );
+  setBgImgDisplay("initial", HTMLImageElement);
+});
+
+window.onresize = () => {
+  pHeight.value = getWindowHeight();
+};
+
+document.addEventListener("click", () => {
+  closeNav("matchNav");
+});
 </script>
 
 <style lang="scss" scoped>