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

src/views/HomeView.vue

@@ -10,14 +10,14 @@
     >
       <div
         v-for="(player, id) in recentVisited"
-        :key="player.steamid64"
+        :key="player.steamId64"
         class="player-card"
         tabindex="0"
-        @keyup.enter="GoToPlayer(player.vanity_url || player.steamid64)"
+        @keyup.enter="GoToPlayer(player.vanityUrl || player.steamId64)"
       >
         <div
           class="p-2"
-          @click="GoToPlayer(player.vanity_url || player.steamid64)"
+          @click="GoToPlayer(player.vanityUrl || player.steamId64)"
         >
           <div class="col-md-4 m-auto">
             <img :alt="player.name" :src="player.avatar" />
@@ -103,63 +103,60 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import {
   GoToPlayer,
   SaveLastVisitedToLocalStorage,
+  setAppDivBackground,
+  setBgImgDisplay,
   setTitle,
-} from "/src/utils";
+} from "@/utils";
 import { onBeforeMount, ref } from "vue";
-import { useStore } from "vuex";
+import { usePlayerDetailsStore } from "@/stores/playerDetails";
 
-export default {
-  name: "HomeView",
-  setup() {
-    setTitle("Home");
-    const store = useStore();
+setTitle("Home");
 
-    const recentVisited = ref([]);
+const playerDetailsStore = usePlayerDetailsStore();
+const recentVisited = ref([]);
 
-    const loadRecentVisited = () => {
-      recentVisited.value = JSON.parse(localStorage.getItem("recent-visited"));
+const loadRecentVisited = () => {
+  const localString = localStorage.getItem("recent-visited");
+  if (typeof localString === "string")
+    recentVisited.value = JSON.parse(localString);
 
-      if (recentVisited.value !== null) {
-        if (window.innerWidth < 768) {
-          recentVisited.value = recentVisited.value.filter(
-            (i) => recentVisited.value.indexOf(i) < 6
-          );
-        }
-      }
-    };
-
-    const removeRecentVisited = (key) => {
-      if (recentVisited.value !== null) {
-        recentVisited.value.splice(key, 1);
-        recentVisited.value.reverse();
-
-        localStorage.clear();
-
-        if (recentVisited.value !== []) {
-          recentVisited.value.map((p) => {
-            SaveLastVisitedToLocalStorage(p);
-          });
-        }
-      }
-
-      loadRecentVisited();
-    };
-
-    onBeforeMount(() => {
-      loadRecentVisited();
-      store.commit("resetPlayerDetails");
-
-      document.getElementById("app").style.background = "none";
-      document.querySelector(".bg-img").style.display = "none";
-    });
-
-    return { recentVisited, GoToPlayer, removeRecentVisited };
-  },
+  if (recentVisited.value !== []) {
+    if (window.innerWidth < 768) {
+      recentVisited.value = recentVisited.value.filter(
+        (i) => recentVisited.value.indexOf(i) < 6
+      );
+    }
+  }
 };
+
+const removeRecentVisited = (key: number) => {
+  if (recentVisited.value !== []) {
+    recentVisited.value.splice(key, 1);
+    recentVisited.value.reverse();
+
+    localStorage.clear();
+
+    if (recentVisited.value !== []) {
+      recentVisited.value.map((p) => {
+        SaveLastVisitedToLocalStorage(p);
+      });
+    }
+  }
+
+  loadRecentVisited();
+};
+
+onBeforeMount(() => {
+  loadRecentVisited();
+  playerDetailsStore.$reset();
+
+  setAppDivBackground("none", HTMLDivElement);
+  setBgImgDisplay("none", HTMLImageElement);
+});
 </script>
 
 <style lang="scss" scoped>