updated PlayerView.vue to use <script setup lang="ts">

src/views/PlayerView.vue

@@ -1,14 +1,17 @@
 <template>
   <div :style="{ minHeight: pHeight + 'px' }" class="wrapper">
     <div class="container-lg">
-      <div v-if="store.state.playerDetails.name">
+      <div v-if="playerDetailsStore.playerDetails.name">
         <div class="card mb-3 bg-transparent border-0">
           <div class="row g-0">
             <div class="img-container col-md-2 pt-3">
               <img
                 :class="data.tracked ? 'tracked' : ''"
                 :src="
-                  constructAvatarUrl(store.state.playerDetails.avatar, 'full')
+                  constructAvatarUrl(
+                    playerDetailsStore.playerDetails.avatar,
+                    'full'
+                  )
                 "
                 :title="data.tracked ? 'Tracked' : ''"
                 alt="Player avatar"
@@ -27,7 +30,7 @@
                     class="text-decoration-none text-white"
                     target="_blank"
                     title="Open steam profile"
-                    >{{ store.state.playerDetails.name }}
+                    >{{ playerDetailsStore.playerDetails.name }}
                     <i class="fa fa-steam"></i>
                   </a>
                 </h3>
@@ -71,24 +74,24 @@
                 </table>
                 <div class="badges">
                   <img
-                    v-if="store.state.playerDetails.vac"
+                    v-if="playerDetailsStore.playerDetails.vac"
                     :title="
                       'VAC-Ban: ' +
                       FormatVacDate(
-                        store.state.playerDetails.vac_date,
+                        playerDetailsStore.playerDetails.vacDate,
-                        store.state.matchDetails.date
+                        matchDetailsStore.matchDetails.date
                       )
                     "
                     alt="Vac banned"
                     src="/images/icons/vac_banned.svg"
                   />
                   <img
-                    v-if="store.state.playerDetails.game_ban"
+                    v-if="playerDetailsStore.playerDetails.gameBan"
                     :title="
                       'Game-Ban: ' +
                       FormatVacDate(
-                        store.state.playerDetails.game_ban_date,
+                        playerDetailsStore.playerDetails.gameBanDate,
-                        store.state.matchDetails.date
+                        matchDetailsStore.matchDetails.date
                       )
                     "
                     alt="Game banned"
@@ -176,15 +179,15 @@
         <div class="match-container d-flex">
           <div class="matches">
             <MatchesTable
-              v-if="store.state.playerDetails.matches"
+              v-if="playerDetailsStore.playerDetails.matches"
-              :matches="store.state.playerDetails.matches"
+              :matches="playerDetailsStore.playerDetails.matches"
               color-front
             />
             <h5 v-else>Track yourself to see your matches</h5>
           </div>
 
           <div
-            v-if="store.state.playerDetails.matches"
+            v-if="playerDetailsStore.playerDetails.matches"
             class="side-info-container"
           >
             <PlayerSideInfo :player_meta="data.playerMeta" />
@@ -193,7 +196,7 @@
         <div class="load-more col-lg-9 col-md-12 text-center">
           <button
             v-if="data.match_stats.total !== data.matches.length"
-            :key="scrollToPos(store.state.scroll_state)"
+            :key="scrollToPos(scrollStateStore.scrollState)"
             class="btn border-2 btn-outline-info"
             @click="setMoreMatches"
           >
@@ -212,7 +215,7 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import {
   onBeforeMount,
   onBeforeUnmount,
@@ -221,287 +224,293 @@ import {
   ref,
   watch,
 } from "vue";
-import { useStore } from "vuex";
+import type { LSPlayer } from "@/utils";
 import {
   constructAvatarUrl,
-  DisplayRank,
-  FixMapName,
   FormatVacDate,
   GetPlayerMeta,
   GetUser,
-  GetWinLoss,
-  GoToPlayer,
   LoadImage,
   LoadMoreMatches,
   MatchNotParsedTime,
   ProcessName,
   SaveLastVisitedToLocalStorage,
   scrollToPos,
+  setAppDivBackground,
+  setBgImgDisplay,
   setTitle,
   TrackMe,
-} from "/src/utils";
+} from "@/utils";
-import { FOOTER_HEIGHT, NAV_HEIGHT } from "/src/constants";
+import { FOOTER_HEIGHT, NAV_HEIGHT } from "@/constants";
-import MatchesTable from "/src/components/MatchesTable";
+import MatchesTable from "@/components/MatchesTable.vue";
-import router from "/src/router";
+import router from "@/router";
-import PlayerSideInfo from "/src/components/PlayerSideInfo";
+import PlayerSideInfo from "@/components/PlayerSideInfo.vue";
 import { StatusCodes as STATUS } from "http-status-codes";
+import { usePlayerDetailsStore } from "@/stores/playerDetails";
+import type { LocalStoragePlayer, Match, PlayerMeta } from "@/types";
+import { useSearchParamsStore } from "@/stores/searchParams";
+import { useInfoStateStore } from "@/stores/infoState";
+import { useScrollStateStore } from "@/stores/scrollState";
+import { useMatchDetailsStore } from "@/stores/matchDetails";
 
-export default {
+// Variables
-  name: "PlayerView",
+const pHeight = ref(0);
-  components: { PlayerSideInfo, MatchesTable },
+const displayCounter = 3;
-  props: ["id"],
-  setup(props) {
-    // Variables
-    const store = useStore();
-    const pHeight = ref(0);
-    const displayCounter = 3;
 
-    const data = reactive({
+const data = reactive({
-      userData: {
+  userData: {
-        authcode: "",
+    authcode: "",
-        sharecode: "",
+    sharecode: "",
-      },
+  },
-      tracked: false,
+  tracked: false,
-      matches: [],
+  matches: [] as Match[],
-      match_stats: {
+  match_stats: {
-        loss: 0,
+    loss: 0,
-        win: 0,
+    win: 0,
-        tie: 0,
+    tie: 0,
-        total: 0,
+    total: 0,
-      },
+  },
-      playerMeta: {},
+  playerMeta: {} as PlayerMeta,
+});
+
+const props = defineProps<{
+  id: string;
+}>();
+
+const playerDetailsStore = usePlayerDetailsStore();
+const matchDetailsStore = useMatchDetailsStore();
+const searchParamsStore = useSearchParamsStore();
+const scrollStateStore = useScrollStateStore();
+const infoStateStore = useInfoStateStore();
+
+const getWindowHeight = () => {
+  const navHeight = document.getElementsByTagName("nav")[0].clientHeight;
+  const footerHeight = document.getElementsByTagName("footer")[0].clientHeight;
+
+  // 70 = nav-height | 108.5 = footer-height
+  return window.innerHeight - navHeight - footerHeight;
+};
+
+pHeight.value = getWindowHeight();
+
+onBeforeMount(() => {
+  if (Object.entries(playerDetailsStore.playerDetails).length === 0) {
+    GetPlayer();
+  } else {
+    // console.log(store.state.playerDetails)
+    SetPlayerData();
+  }
+});
+
+const SetPlayerData = async () => {
+  data.tracked = playerDetailsStore.playerDetails.tracked;
+  if (playerDetailsStore.playerDetails.matches)
+    data.matches = playerDetailsStore.playerDetails.matches;
+  if (playerDetailsStore.playerDetails.matchStats) {
+    data.match_stats.loss =
+      playerDetailsStore.playerDetails.matchStats.loss || 0;
+    data.match_stats.win = playerDetailsStore.playerDetails.matchStats.win || 0;
+    data.match_stats.tie = playerDetailsStore.playerDetails.matchStats.tie || 0;
+    data.match_stats.total =
+      data.match_stats.loss + data.match_stats.win + data.match_stats.tie;
+  }
+
+  searchParamsStore.id64 = playerDetailsStore.playerDetails.steamid64;
+  searchParamsStore.vanity_url =
+    playerDetailsStore.playerDetails.vanityUrl || "";
+
+  if (playerDetailsStore.playerDetails.matches) {
+    if (data.matches[0].map) {
+      await LoadImage(data.matches[0].map);
+    } else if (
+      !data.matches[0].map &&
+      MatchNotParsedTime(data.matches[0].date) &&
+      data.matches[1].map
+    ) {
+      await LoadImage(data.matches[1].map);
+    } else {
+      await LoadImage("random");
+    }
+  } else {
+    await LoadImage("random");
+  }
+
+  setAppDivBackground("rgba(0, 0, 0, 0.7)", HTMLDivElement);
+  setBgImgDisplay("initial", HTMLImageElement);
+
+  const localPlayer = reactive<LocalStoragePlayer>({
+    steamId64: "",
+    vanityUrl: "",
+    name: "",
+    avatar: "",
+  });
+
+  localPlayer.steamId64 = playerDetailsStore.playerDetails.steamid64;
+  localPlayer.vanityUrl = playerDetailsStore.playerDetails.vanity_url || "";
+  localPlayer.name = playerDetailsStore.playerDetails.name || "";
+  localPlayer.avatar = constructAvatarUrl(
+    playerDetailsStore.playerDetails.avatar || "",
+    "medium"
+  );
+  SaveLastVisitedToLocalStorage(localPlayer);
+
+  setTitle(playerDetailsStore.playerDetails.name || "");
+};
+
+const GetPlayer = async (reset = false) => {
+  if (props.id) {
+    const [resData, info] = await GetUser(props.id);
+
+    if (info.message !== "") infoStateStore.addInfo(info);
+
+    if (resData !== null) {
+      if (
+        resData.steamid64 !== playerDetailsStore.playerDetails.steamid64 ||
+        reset
+      ) {
+        resData.name = ProcessName(resData.name);
+
+        playerDetailsStore.$reset();
+        playerDetailsStore.playerDetails = resData;
+      }
+
+      await SetPlayerData();
+    }
+  }
+};
+
+const setMoreMatches = async () => {
+  const [res, info] = await LoadMoreMatches(
+    playerDetailsStore.playerDetails.steamid64,
+    data.matches[data.matches.length - 1].date
+  );
+
+  if (info.message !== "") infoStateStore.addInfo(info);
+  if (res !== null) await res.matches?.forEach((e) => data.matches.push(e));
+
+  scrollToPos(window.scrollY);
+
+  // console.log(store.state.playerDetails)
+};
+
+const RefreshData = async () => {
+  const refreshButton = document.querySelector(
+    ".refresh-btn .fa"
+  ) as HTMLElement;
+  refreshButton.classList.add("fa-spin");
+  refreshButton.classList.add("fa-fw");
+  refreshButton.classList.remove("fa-refresh");
+  refreshButton.classList.add("fa-spinner");
+  scrollToPos(0);
+
+  await GetPlayer(true).then(() => {
+    setTimeout(() => {
+      refreshButton.classList.remove("fa-spin");
+      refreshButton.classList.remove("fa-fw");
+      refreshButton.classList.add("fa-refresh");
+      refreshButton.classList.remove("fa-spinner");
+    }, 2000);
+  });
+
+  const [resData, info] = await GetPlayerMeta(props.id, displayCounter);
+
+  if (info.message !== "") infoStateStore.addInfo(info);
+  if (resData !== null) {
+    data.playerMeta = resData;
+  } else {
+    data.playerMeta = {} as PlayerMeta;
+  }
+};
+
+const TrackPlayer = async () => {
+  let message = "";
+
+  if (data.matches.length === 0) {
+    if (data.userData.sharecode === "") {
+      message = "Sharecode is missing";
+    }
+    if (data.userData.authcode === "") {
+      message = "Authcode is missing";
+    }
+  } else {
+    if (data.userData.authcode === "") {
+      message = "Authcode is missing";
+    }
+  }
+
+  if (message !== "") {
+    infoStateStore.addInfo({
+      statusCode: STATUS.IM_A_TEAPOT,
+      message: message,
+      type: "error",
     });
-
+  } else {
-    const getWindowHeight = () => {
+    const info = await TrackMe(
-      const navHeight = document.getElementsByTagName("nav")[0].clientHeight;
+      playerDetailsStore.playerDetails.steamid64,
-      const footerHeight =
+      data.userData.authcode,
-        document.getElementsByTagName("footer")[0].clientHeight;
+      data.userData.sharecode
-
-      // 70 = nav-height | 108.5 = footer-height
-      return window.innerHeight - navHeight - footerHeight;
-    };
-
-    pHeight.value = getWindowHeight();
-
-    onBeforeMount(() => {
-      if (Object.entries(store.state.playerDetails).length === 0) {
-        GetPlayer();
-      } else {
-        // console.log(store.state.playerDetails)
-        SetPlayerData();
-      }
-    });
-
-    const SetPlayerData = async () => {
-      data.tracked = store.state.playerDetails.tracked;
-      if (store.state.playerDetails.matches)
-        data.matches = store.state.playerDetails.matches;
-      if (store.state.playerDetails.match_stats) {
-        data.match_stats.loss = store.state.playerDetails.match_stats.loss || 0;
-        data.match_stats.win = store.state.playerDetails.match_stats.win || 0;
-        data.match_stats.tie = store.state.playerDetails.match_stats.tie || 0;
-        data.match_stats.total =
-          data.match_stats.loss + data.match_stats.win + data.match_stats.tie;
-      }
-
-      store.commit({
-        type: "changeId64",
-        id: store.state.playerDetails.steamid64,
-      });
-      store.commit({
-        type: "changeVanityUrl",
-        id: store.state.playerDetails.vanity_url || "",
-      });
-
-      if (store.state.playerDetails.matches) {
-        if (data.matches[0].map) {
-          await LoadImage(data.matches[0].map);
-        } else if (
-          !data.matches[0].map &&
-          MatchNotParsedTime(data.matches[0].date) &&
-          data.matches[1].map
-        ) {
-          await LoadImage(data.matches[1].map);
-        } else {
-          await LoadImage("random");
-        }
-      } else {
-        await LoadImage("random");
-      }
-
-      document.querySelector(".bg-img").style.display = "initial";
-      document.getElementById("app").style.background = "rgba(0, 0, 0, .7)";
-
-      let player = {
-        steamid64: store.state.playerDetails.steamid64,
-        vanity_url: store.state.playerDetails.vanity_url || "",
-        name: store.state.playerDetails.name,
-        avatar: constructAvatarUrl(store.state.playerDetails.avatar, "medium"),
-      };
-      SaveLastVisitedToLocalStorage(player);
-
-      setTitle(store.state.playerDetails.name);
-    };
-
-    const GetPlayer = async (reset = false) => {
-      if (props.id) {
-        const resData = await GetUser(store, props.id);
-
-        if (resData !== null) {
-          if (
-            resData.steamid64 !== store.state.playerDetails.steamid64 ||
-            reset
-          ) {
-            resData.name = ProcessName(resData.name);
-
-            store.commit("resetPlayerDetails");
-            store.commit({
-              type: "changePlayerDetails",
-              data: resData,
-            });
-          }
-
-          await SetPlayerData();
-        }
-      }
-    };
-
-    const setMoreMatches = async () => {
-      const res = await LoadMoreMatches(
-        store,
-        store.state.playerDetails.steamid64,
-        data.matches[data.matches.length - 1].date
-      );
-
-      if (res !== null) await res.matches.forEach((e) => data.matches.push(e));
-
-      scrollToPos(window.scrollY);
-
-      // console.log(store.state.playerDetails)
-    };
-
-    const RefreshData = async () => {
-      const refreshButton = document.querySelector(".refresh-btn .fa");
-      refreshButton.classList.add("fa-spin");
-      refreshButton.classList.add("fa-fw");
-      refreshButton.classList.remove("fa-refresh");
-      refreshButton.classList.add("fa-spinner");
-      scrollToPos(0);
-
-      await GetPlayer(true).then(() => {
-        setTimeout(() => {
-          refreshButton.classList.remove("fa-spin");
-          refreshButton.classList.remove("fa-fw");
-          refreshButton.classList.add("fa-refresh");
-          refreshButton.classList.remove("fa-spinner");
-        }, 2000);
-      });
-
-      data.playerMeta = await GetPlayerMeta(store, props.id, displayCounter);
-      if (data.playerMeta === null) data.playerMeta = {};
-    };
-
-    const TrackPlayer = async () => {
-      let message = "";
-
-      if (data.matches.length === 0) {
-        if (data.userData.sharecode === "") {
-          message = "Sharecode is missing";
-        }
-        if (data.userData.authcode === "") {
-          message = "Authcode is missing";
-        }
-      } else {
-        if (data.userData.authcode === "") {
-          message = "Authcode is missing";
-        }
-      }
-
-      if (message !== "") {
-        store.commit({
-          type: "changeInfoState",
-          data: {
-            statuscode: STATUS.IM_A_TEAPOT,
-            message: message,
-            type: "error",
-          },
-        });
-      } else {
-        const res = await TrackMe(
-          store,
-          store.state.playerDetails.steamid64,
-          data.userData.authcode,
-          data.userData.sharecode
-        );
-
-        if (res !== null && res === STATUS.ACCEPTED) {
-          location.reload();
-        }
-      }
-    };
-
-    watch(
-      () => props.id,
-      async () => {
-        await GetPlayer();
-        data.playerMeta = await GetPlayerMeta(store, props.id, displayCounter);
-        if (data.playerMeta === null) data.playerMeta = {};
-      }
     );
 
-    // watch(() => data.playerMeta, () => {
+    if (info.message !== "") {
-    //   console.log(data.playerMeta)
+      infoStateStore.addInfo(info);
-    // })
+    } else if (info.statusCode === STATUS.ACCEPTED) {
+      location.reload();
+    }
+  }
+};
 
-    onMounted(async () => {
+watch(
-      const height = window.innerHeight - NAV_HEIGHT - FOOTER_HEIGHT;
+  () => props.id,
-      const wrapper = document.querySelector(".wrapper");
+  async () => {
-      wrapper.style.minHeight = height + "px";
+    await GetPlayer();
+    const [res, info] = await GetPlayerMeta(props.id, displayCounter);
 
-      await GetPlayer();
+    if (info.message !== "") infoStateStore.addInfo(info);
+    if (res !== null) {
+      data.playerMeta = res;
+    } else {
+      data.playerMeta = {} as PlayerMeta;
+    }
+  }
+);
 
-      data.playerMeta = await GetPlayerMeta(store, props.id, displayCounter);
+// watch(() => data.playerMeta, () => {
-      if (data.playerMeta === null) data.playerMeta = {};
+//   console.log(data.playerMeta)
+// })
 
-      scrollToPos(store.state.scroll_state);
+onMounted(async () => {
+  const height = window.innerHeight - NAV_HEIGHT - FOOTER_HEIGHT;
+  const wrapper = document.querySelector(".wrapper") as HTMLDivElement;
+  wrapper.style.minHeight = height + "px";
 
-      // console.log(store.state.playerDetails)
+  await GetPlayer();
-    });
 
-    onBeforeUnmount(() => {
+  const [res, info] = await GetPlayerMeta(props.id, displayCounter);
-      store.commit("changeScrollState", window.scrollY);
+  if (info.message !== "") infoStateStore.addInfo(info);
+  if (res !== null) {
+    data.playerMeta = res;
+  } else {
+    data.playerMeta = {} as PlayerMeta;
+  }
 
-      router.beforeEach((to, from, next) => {
+  scrollToPos(scrollStateStore.scrollState);
-        if (to.fullPath.match("/player/") && from.fullPath.match("/player/")) {
-          store.commit("changeScrollState", 0);
-        }
-        next();
-      });
-    });
 
-    window.onresize = () => {
+  // console.log(store.state.playerDetails)
-      pHeight.value = getWindowHeight();
+});
-    };
 
-    return {
+onBeforeUnmount(() => {
-      data,
+  scrollStateStore.scrollState = window.scrollY;
-      store,
+
-      pHeight,
+  router.beforeEach((to, from, next) => {
-      props,
+    if (to.fullPath.match("/player/") && from.fullPath.match("/player/")) {
-      TrackPlayer,
+      scrollStateStore.$reset();
-      RefreshData,
+    }
-      TrackMe,
+    next();
-      GetWinLoss,
+  });
-      DisplayRank,
+});
-      constructAvatarUrl,
+
-      FormatVacDate,
+window.onresize = () => {
-      FixMapName,
+  pHeight.value = getWindowHeight();
-      GoToPlayer,
-      MatchNotParsedTime,
-      scrollToPos,
-      setMoreMatches,
-    };
-  },
 };
 </script>