fix type problems

app/src/components/header/GameHeaderComponents.vue

@@ -31,6 +31,7 @@ onMounted(async () => {
     await loadUserProfile()
   } catch (err) {
     toast.error('無法讀取使用者資料')
+    console.error(err)
   }
 })
 </script>
@@ -105,98 +106,3 @@ onMounted(async () => {
     <span class="text-text sm:hidden px-2">Sign Out</span>
   </button>
 </template>
-<script setup>
-import { onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import { useToast } from 'vue-toastification'
-import { logout } from '../utils/auth'
-import { bugReportUrl, surveyUrl } from '../config'
-import { reset } from '../store/session'
-import userProfileStore, {
-  loadUserProfile,
-  resetUserProfile,
-} from '../store/userProfile'
-
-const router = useRouter()
-
-const toast = useToast()
-
-const handleLogout = async () => {
-  try {
-    await logout()
-    resetUserProfile()
-    reset()
-    router.push({ name: 'login' })
-  } catch (err) {
-    // toast.error('Failed to logout')
-    toast.error('登出失敗')
-    console.error(err)
-  }
-}
-
-onMounted(async () => {
-  try {
-    await loadUserProfile()
-  } catch (err) {
-    // toast.error('Failed to load user profile')
-    toast.error('無法讀取使用者資料')
-  }
-})
-</script>
-<template>
-  <!-- <button id="warning" class="flex items-center h-5 w-5">
-          <font-awesome-icon
-            :icon="['fas', 'triangle-exclamation']"
-            class="text-text-primary h-full w-full"
-          />
-        </button>
-        <button id="setting" class="flex items-center h-5 w-5">
-          <font-awesome-icon
-            :icon="['fas', 'gear']"
-            class="text-text-primary h-full w-full"
-          />
-        </button>
-        <button id="fullscreen" class="flex items-center h-5 w-5">
-          <font-awesome-icon
-            :icon="['fas', 'expand']"
-            class="text-text-primary h-full w-full"
-          />
-        </button> -->
-  <p
-    id="UsernameText"
-    class="text-text inline-block whitespace-nowrap"
-    style="font-size: 2vh"
-  >
-    {{ userProfileStore.username }}
-  </p>
-  <a title="Survey" :href="surveyUrl" target="_blank" class="h-5 w-5">
-    <font-awesome-icon
-      :icon="['fas', 'file-invoice']"
-      class="text-text-primary h-full w-full"
-    />
-  </a>
-  <RouterLink title="LeaderBoard" to="/leaderboard" class="h-5 w-5">
-    <font-awesome-icon
-      :icon="['fas', 'trophy']"
-      class="text-text-primary h-full w-full"
-    />
-  </RouterLink>
-  <RouterLink title="Map" to="/map" class="h-5 w-5">
-    <font-awesome-icon
-      :icon="['fas', 'map']"
-      class="text-text-primary h-full w-full"
-    />
-  </RouterLink>
-  <a title="Bug Report" :href="bugReportUrl" target="_blank" class="h-5 w-5">
-    <font-awesome-icon
-      :icon="['fas', 'bug']"
-      class="text-text-primary h-full w-full"
-    />
-  </a>
-  <button title="Sign Out" @click="handleLogout" class="h-5 w-5">
-    <font-awesome-icon
-      :icon="['fas', 'arrow-right-from-bracket']"
-      class="text-text-primary h-full w-full"
-    />
-  </button>
-</template>

app/src/components/header/LandingHeaderComponents.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { bugReportUrl } from '../../config'
 
-const scrollToSection = (sectionId) => {
+const scrollToSection = (sectionId: string) => {
   const section = document.getElementById(sectionId)
   if (section) {
-    const container = document.querySelector('.overflow-y-auto') // Replace '.overflow-y-auto' with the appropriate class or selector for your container
+    const container = document.querySelector('.overflow-y-auto') as HTMLElement // Replace '.overflow-y-auto' with the appropriate class or selector for your container
     if (container) {
       container.scrollTo({
         top: section.offsetTop - container.offsetTop,
@@ -60,66 +60,3 @@ const scrollToSection = (sectionId) => {
     <font-awesome-icon :icon="['fas', 'bug']" class="text-text-primary" />
   </a>
 </template>
-<script setup>
-const scrollToSection = (sectionId) => {
-  const section = document.getElementById(sectionId)
-  if (section) {
-    const container = document.querySelector('.overflow-y-auto') // Replace '.overflow-y-auto' with the appropriate class or selector for your container
-    if (container) {
-      container.scrollTo({
-        top: section.offsetTop - container.offsetTop,
-        behavior: 'smooth', // Add smooth scrolling behavior if desired
-      })
-    }
-  }
-}
-</script>
-<template>
-  <button
-    id="Intro"
-    class="text-text inline-block font-bold whitespace-nowrap pt-1"
-    @click="scrollToSection('intro')"
-    style="font-size: 2vh"
-  >
-    前言
-  </button>
-  <button
-    id="Feature"
-    class="text-text inline-block font-bold whitespace-nowrap pt-1"
-    @click="scrollToSection('feature')"
-    style="font-size: 2vh"
-  >
-    特色</button
-  ><button
-    id="Info"
-    class="text-text inline-block font-bold whitespace-nowrap pt-1"
-    @click="scrollToSection('about')"
-    style="font-size: 2vh"
-  >
-    關於
-  </button>
-
-  <button
-    id="Contact"
-    class="text-text inline-block font-bold whitespace-nowrap pt-1"
-    @click="scrollToSection('contact')"
-    style="font-size: 2vh"
-  >
-    聯絡我們
-  </button>
-  <RouterLink
-    title="Sign In"
-    id="SignIn"
-    to="/register"
-    class="text-text inline-block font-bold whitespace-nowrap pt-1"
-    style="font-size: 2vh"
-  >
-    登入
-  </RouterLink>
-  <a title="Bug Report" :href="bugReportUrl" target="_blank" class="h-5 w-5">
-    <font-awesome-icon
-      :icon="['fas', 'bug']"
-      class="text-text-primary h-full w-full"
-    />
-  </a>
-</template>

app/src/views/LeaderboardPage.vue

@@ -37,7 +37,7 @@ onMounted(async () => {
       class="w-screen h-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
     >
       <div class="w-full">
-        <HeaderPart :title="排行榜" :headerComponent="GameHeaderComponents" />
+        <HeaderPart title="排行榜" :headerComponent="GameHeaderComponents" />
       </div>
       <div class="w-fit h-[94vh] m-3">
         <div

app/src/views/QuestMapPage.vue

@@ -7,7 +7,7 @@ import GameHeaderComponents from '../components/header/GameHeaderComponents.vue'
 <template>
   <div class="w-fit">
     <HeaderPart
-      :title="關卡地圖"
+      title="關卡地圖"
       :headerComponent="GameHeaderComponents"
       class="z-50"
     />