From 29602785cda80d837d854bd179313e2a0f0b6fd9 Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Fri, 1 Mar 2024 23:14:22 +0800
Subject: [PATCH 01/26] rwd player opinions

---
 app/src/views/LandingPage.vue | 172 +++++++++++++++++++++++++++-------
 1 file changed, 138 insertions(+), 34 deletions(-)

diff --git a/app/src/views/LandingPage.vue b/app/src/views/LandingPage.vue
index f6d93a0..ddb7d69 100644
--- a/app/src/views/LandingPage.vue
+++ b/app/src/views/LandingPage.vue
@@ -228,42 +228,146 @@ const scrollToSection = (sectionId: string) => {
                   鈦坦敏捷開發特別獎 第二名
                 </h1>
               </div>
-
-              <!-- <h1
-                class="text-text-primary p-5 font-extrabold font-mono col-span-3 gap-3"
-                style="font-size: 3.5vh"
-              >
-                玩家感想
-              </h1>
-              <h1 class="text-text p-3" style="font-size: 2.5vh">
-                "很好玩很像益智遊戲"
-              </h1>
-              <h1 class="text-text p-3" style="font-size: 2.5vh">
-                "我從來不知道自由軟體的存在，謝謝你們。"
-              </h1>
-              <h1 class="text-text p-3" style="font-size: 2.5vh">
-                "還蠻好玩的，讓程式變好玩"
-              </h1>
-              <h1 class="text-text p-3" style="font-size: 2.5vh">
-                "以前不喜歡電腦課現在覺得喜歡一點點"
-              </h1>
-              <h1 class="text-text p-3" style="font-size: 2.5vh">
-                "程式真的對新手很友善，讓我學到了很多東西"
-              </h1>
-              <h1 class="text-text p-3" style="font-size: 2.5vh">
-                "感覺做得很好很簡明易懂關卡設計很用心"
-              </h1>
-              <h1 class="text-text p-3" style="font-size: 2.5vh">
-                "這個體驗我覺得非常有趣，可以體驗到沒辦法體驗的程式，學長也都熱心指導，非常感謝學長的用心的講解，希望以後還可以再體驗這種活動"
-              </h1>
-              <h1 class="text-text p-3" style="font-size: 2.5vh">
-                "以前我覺得寫程式很難不過現在覺得很有趣"
-              </h1>
-              <h1 class="text-text p-3" style="font-size: 2.5vh">
-                "以前覺得寫程式是我生活中碰不到而且很難的項目。但通過這堂課之後，覺得寫程式不再那麼難以親近"
-              </h1> -->
             </section>
           </div>
+          <section
+            v-if="!isMobile"
+            id="info"
+            class="text-text p-10 grid grid-cols-3 gap-5 justify-items-center"
+          >
+            <h1
+              class="text-text-primary p-5 font-extrabold font-mono col-span-3"
+              style="font-size: 3.5vh"
+            >
+              團隊介紹
+            </h1>
+            <h1 class="text-text p-3 col-span-3" style="font-size: 2.5vh">
+              國立臺北科技大學 智慧自動化工程科 第二屆 Linux Odyssey
+              互動式終端機教學網站
+            </h1>
+            <h1 class="text-text p-3 col-span-3" style="font-size: 2.5vh">
+              Indieveloper
+            </h1>
+            <div class="p-3 col-span-3">
+              <div class="grid grid-cols-4 gap-3 justify-items-center">
+                <h1 class="font-bold" style="font-size: 2.5vh">wancat 林貓</h1>
+                <h1 class="font-bold" style="font-size: 2.5vh">Neil</h1>
+                <h1 class="font-bold" style="font-size: 2.5vh">A.H.</h1>
+                <h1 class="font-bold" style="font-size: 2.5vh">Ray Gur</h1>
+              </div>
+            </div>
+            <h1
+              class="text-text-primary p-5 font-extrabold font-mono col-span-3"
+              style="font-size: 3.5vh"
+            >
+              得獎肯定
+            </h1>
+            <h1 class="text-text p-3 col-span-3" style="font-size: 2.5vh">
+              大專校院資訊應用服務創新競賽 鈦坦敏捷開發特別獎 第二名
+            </h1>
+
+            <h1
+              class="text-text-primary p-5 font-extrabold font-mono col-span-3 gap-3"
+              style="font-size: 3.5vh"
+            >
+              玩家感想
+            </h1>
+            <h1 class="text-text p-3" style="font-size: 2.5vh">
+              "很好玩很像益智遊戲"
+            </h1>
+            <h1 class="text-text p-3" style="font-size: 2.5vh">
+              "我從來不知道自由軟體的存在，謝謝你們。"
+            </h1>
+            <h1 class="text-text p-3" style="font-size: 2.5vh">
+              "還蠻好玩的，讓程式變好玩"
+            </h1>
+            <h1 class="text-text p-3" style="font-size: 2.5vh">
+              "以前不喜歡電腦課現在覺得喜歡一點點"
+            </h1>
+            <h1 class="text-text p-3" style="font-size: 2.5vh">
+              "程式真的對新手很友善，讓我學到了很多東西"
+            </h1>
+            <h1 class="text-text p-3" style="font-size: 2.5vh">
+              "感覺做得很好很簡明易懂關卡設計很用心"
+            </h1>
+            <h1 class="text-text p-3" style="font-size: 2.5vh">
+              "這個體驗我覺得非常有趣，可以體驗到沒辦法體驗的程式，學長也都熱心指導，非常感謝學長的用心的講解，希望以後還可以再體驗這種活動"
+            </h1>
+            <h1 class="text-text p-3" style="font-size: 2.5vh">
+              "以前我覺得寫程式很難不過現在覺得很有趣"
+            </h1>
+            <h1 class="text-text p-3" style="font-size: 2.5vh">
+              "以前覺得寫程式是我生活中碰不到而且很難的項目。但通過這堂課之後，覺得寫程式不再那麼難以親近"
+            </h1>
+          </section>
+          <section
+            v-if="isMobile"
+            id="info"
+            class="text-text p-10 grid grid-cols-1 gap-5 justify-items-center"
+          >
+            <h1
+              class="text-text-primary p-5 font-extrabold font-mono"
+              style="font-size: 3.5vh"
+            >
+              團隊介紹
+            </h1>
+            <h1 class="text-text p-3" style="font-size: 2.5vh">
+              國立臺北科技大學 智慧自動化工程科 第二屆 Linux Odyssey
+              互動式終端機教學網站
+            </h1>
+            <h1 class="text-text p-3" style="font-size: 2.5vh">Indieveloper</h1>
+            <div class="p-3">
+              <div class="grid grid-cols-4 gap-3 justify-items-center">
+                <h1 class="font-bold" style="font-size: 2.5vh">wancat 林貓</h1>
+                <h1 class="font-bold" style="font-size: 2.5vh">Neil</h1>
+                <h1 class="font-bold" style="font-size: 2.5vh">A.H.</h1>
+                <h1 class="font-bold" style="font-size: 2.5vh">Ray Gur</h1>
+              </div>
+            </div>
+            <h1
+              class="text-text-primary p-5 font-extrabold font-mono"
+              style="font-size: 3.5vh"
+            >
+              得獎肯定
+            </h1>
+            <h1 class="text-text p-3" style="font-size: 2.5vh">
+              大專校院資訊應用服務創新競賽 鈦坦敏捷開發特別獎 第二名
+            </h1>
+
+            <h1
+              class="text-text-primary p-5 font-extrabold font-mono gap-3"
+              style="font-size: 3.5vh"
+            >
+              玩家感想
+            </h1>
+            <h1 class="text-text p-3" style="font-size: 2.5vh">
+              "很好玩很像益智遊戲"
+            </h1>
+            <h1 class="text-text p-3" style="font-size: 2.5vh">
+              "我從來不知道自由軟體的存在，謝謝你們。"
+            </h1>
+            <h1 class="text-text p-3" style="font-size: 2.5vh">
+              "還蠻好玩的，讓程式變好玩"
+            </h1>
+            <h1 class="text-text p-3" style="font-size: 2.5vh">
+              "以前不喜歡電腦課現在覺得喜歡一點點"
+            </h1>
+            <h1 class="text-text p-3" style="font-size: 2.5vh">
+              "程式真的對新手很友善，讓我學到了很多東西"
+            </h1>
+            <h1 class="text-text p-3" style="font-size: 2.5vh">
+              "感覺做得很好很簡明易懂關卡設計很用心"
+            </h1>
+            <h1 class="text-text p-3" style="font-size: 2.5vh">
+              "這個體驗我覺得非常有趣，可以體驗到沒辦法體驗的程式，學長也都熱心指導，非常感謝學長的用心的講解，希望以後還可以再體驗這種活動"
+            </h1>
+            <h1 class="text-text p-3" style="font-size: 2.5vh">
+              "以前我覺得寫程式很難不過現在覺得很有趣"
+            </h1>
+            <h1 class="text-text p-3" style="font-size: 2.5vh">
+              "以前覺得寫程式是我生活中碰不到而且很難的項目。但通過這堂課之後，覺得寫程式不再那麼難以親近"
+            </h1>
+          </section>
           <section
             id="contact"
             class="text-text mt-10 flex flex-col items-center"

From 9a4f9b958aa23c3c8c63d87a5de4a60738fa49fc Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Tue, 5 Mar 2024 23:00:13 +0800
Subject: [PATCH 02/26] Restruct heading

---
 app/src/components/GameHeaderComponents.vue   |  95 +++++++
 app/src/components/HeaderPart.vue             |  41 +++
 .../components/LandingHeaderComponents.vue    |  63 +++++
 app/src/views/GamePage.vue                    |   8 +-
 app/src/views/LandingPage.vue                 | 260 +++---------------
 app/src/views/LeaderboardPage.vue             |   5 +-
 app/src/views/QuestMapPage.vue                |   5 +-
 7 files changed, 251 insertions(+), 226 deletions(-)
 create mode 100644 app/src/components/GameHeaderComponents.vue
 create mode 100644 app/src/components/HeaderPart.vue
 create mode 100644 app/src/components/LandingHeaderComponents.vue

diff --git a/app/src/components/GameHeaderComponents.vue b/app/src/components/GameHeaderComponents.vue
new file mode 100644
index 0000000..7cc0898
--- /dev/null
+++ b/app/src/components/GameHeaderComponents.vue
@@ -0,0 +1,95 @@
+<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>
diff --git a/app/src/components/HeaderPart.vue b/app/src/components/HeaderPart.vue
new file mode 100644
index 0000000..13c54cf
--- /dev/null
+++ b/app/src/components/HeaderPart.vue
@@ -0,0 +1,41 @@
+<script setup>
+import { defineProps } from 'vue'
+
+defineProps({
+  title: {
+    type: String,
+    required: false,
+  },
+  headerComponent: {
+    type: Object,
+    required: true,
+  },
+})
+</script>
+<template>
+  <div
+    id="header"
+    class="w-full h-[6vh] px-5 flex flex-row items-center justify-between bg-bg-secondary"
+  >
+    <div class="flex flex-row items-center gap-3">
+      <img src="../img/icon_totem.svg" class="h-8 justify-self-start" />
+      <button
+        id="GameTitle"
+        class="text-text-primary inline-block font-bold whitespace-nowrap pt-1"
+        style="font-size: 2vh"
+      >
+        Linux Odyssey
+      </button>
+      <p
+        id="QuestTitle"
+        class="text-text inline-block font-bold whitespace-nowrap"
+        style="font-size: 2vh"
+      >
+        {{ title }}
+      </p>
+    </div>
+    <div class="h-full w-full flex gap-3 items-center justify-end">
+      <component :is="headerComponent" />
+    </div>
+  </div>
+</template>
diff --git a/app/src/components/LandingHeaderComponents.vue b/app/src/components/LandingHeaderComponents.vue
new file mode 100644
index 0000000..146b209
--- /dev/null
+++ b/app/src/components/LandingHeaderComponents.vue
@@ -0,0 +1,63 @@
+<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>
diff --git a/app/src/views/GamePage.vue b/app/src/views/GamePage.vue
index 8a4a047..591df48 100644
--- a/app/src/views/GamePage.vue
+++ b/app/src/views/GamePage.vue
@@ -2,7 +2,8 @@
 import { computed, onMounted } from 'vue'
 import { useToast } from 'vue-toastification'
 import sessionStore, { init } from '../store/session'
-import GameHeaderPart from '../components/GameHeaderPart.vue'
+import HeaderPart from '../components/HeaderPart.vue'
+import GameHeaderComponents from '../components/GameHeaderComponents.vue'
 // import CommandlistPart from '../components/CommandlistPart.vue'
 import HintPart from '../components/HintPart.vue'
 import QuestPart from '../components/QuestPart.vue'
@@ -46,7 +47,10 @@ onMounted(async () => {
 <template>
   <!-- game header -->
   <div class="h-[6vh] w-full">
-    <GameHeaderPart :title="sessionStore.quest?.title" />
+    <HeaderPart
+      :title="sessionStore.quest?.title"
+      :headerComponent="GameHeaderComponents"
+    />
   </div>
   <!-- current status indicator -->
   <input
diff --git a/app/src/views/LandingPage.vue b/app/src/views/LandingPage.vue
index ddb7d69..c20cfb7 100644
--- a/app/src/views/LandingPage.vue
+++ b/app/src/views/LandingPage.vue
@@ -1,95 +1,17 @@
 <script setup lang="ts">
 import ContactButton from '../components/ContactButton.vue'
 import DynamicBackground from '../components/DynamicBackground.vue'
-import { bugReportUrl, facebookUrl, githubUrl } from '../config'
+import LandingHeaderComponents from '../components/LandingHeaderComponents.vue'
+import HeaderPart from '../components/HeaderPart.vue'
 
-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
-    if (container) {
-      container.scrollTo({
-        top: section.offsetTop,
-        behavior: 'smooth', // Add smooth scrolling behavior if desired
-      })
-    }
-  }
-}
+import { facebookUrl, githubUrl } from '../config'
 </script>
 <template>
   <div class="w-screen h-screen bg-scroll bg-bg">
     <DynamicBackground class="w-full h-full" />
     <div class="h-screen w-screen absolute top-0 left-0">
       <!-- game header -->
-      <div
-        class="w-full h-[6vh] px-5 flex flex-row items-center justify-between bg-bg-secondary"
-      >
-        <div class="flex flex-row items-center gap-3">
-          <img src="../img/icon_totem.svg" class="h-8 justify-self-start" />
-          <button
-            id="GameTitle"
-            class="text-text-primary inline-block font-bold whitespace-nowrap pt-1"
-            style="font-size: 2vh"
-          >
-            Linux Odyssey
-          </button>
-        </div>
-        <div class="flex flex-row items-center gap-3">
-          <button
-            id="Intro"
-            class="text-text inline-block font-bold whitespace-nowrap pt-1"
-            @click="scrollToSection('intro')"
-            style="font-size: 2vh"
-          >
-            Intro
-          </button>
-          <button
-            id="Feature"
-            class="text-text inline-block font-bold whitespace-nowrap pt-1"
-            @click="scrollToSection('feature')"
-            style="font-size: 2vh"
-          >
-            Feature</button
-          ><button
-            id="Info"
-            class="text-text inline-block font-bold whitespace-nowrap pt-1"
-            @click="scrollToSection('about')"
-            style="font-size: 2vh"
-          >
-            About
-          </button>
-
-          <button
-            id="Contact"
-            class="text-text inline-block font-bold whitespace-nowrap pt-1"
-            @click="scrollToSection('contact')"
-            style="font-size: 2vh"
-          >
-            Contact Us
-          </button>
-          <RouterLink
-            title="Sign In"
-            id="SignIn"
-            to="/register"
-            class="text-text inline-block font-bold whitespace-nowrap pt-1"
-            style="font-size: 2vh"
-          >
-            Sign In
-          </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>
-        </div>
-      </div>
-
+      <HeaderPart :headerComponent="LandingHeaderComponents" />
       <!-- main content -->
       <main class="w-full h-[94vh] overflow-y-auto">
         <div class="w-full flex flex-col items-center">
@@ -228,146 +150,44 @@ const scrollToSection = (sectionId: string) => {
                   鈦坦敏捷開發特別獎 第二名
                 </h1>
               </div>
+              <div class="container mx-auto">
+                <div
+                  class="justify-items-center grid grid-cols-1 sm:grid-cols-3 gap-5"
+                >
+                  <h1
+                    class="text-text-primary text-3xl font-extrabold font-mono sm:col-span-3 gap-6"
+                  >
+                    玩家感想
+                  </h1>
+                  <h1 class="text-xl text-center">"很好玩很像益智遊戲"</h1>
+                  <h1 class="text-xl text-center">
+                    "我從來不知道自由軟體的存在，謝謝你們。"
+                  </h1>
+                  <h1 class="text-xl text-center">
+                    "還蠻好玩的，讓程式變好玩"
+                  </h1>
+                  <h1 class="text-xl text-center">
+                    "以前不喜歡電腦課現在覺得喜歡一點點"
+                  </h1>
+                  <h1 class="text-xl text-center">
+                    "程式真的對新手很友善，讓我學到了很多東西"
+                  </h1>
+                  <h1 class="text-xl text-center">
+                    "感覺做得很好很簡明易懂關卡設計很用心"
+                  </h1>
+                  <h1 class="text-xl text-center">
+                    "這個體驗我覺得非常有趣，可以體驗到沒辦法體驗的程式，學長也都熱心指導，非常感謝學長的用心的講解，希望以後還可以再體驗這種活動"
+                  </h1>
+                  <h1 class="text-xl text-center">
+                    "以前我覺得寫程式很難不過現在覺得很有趣"
+                  </h1>
+                  <h1 class="text-xl text-center">
+                    "以前覺得寫程式是我生活中碰不到而且很難的項目。但通過這堂課之後，覺得寫程式不再那麼難以親近"
+                  </h1>
+                </div>
+              </div>
             </section>
           </div>
-          <section
-            v-if="!isMobile"
-            id="info"
-            class="text-text p-10 grid grid-cols-3 gap-5 justify-items-center"
-          >
-            <h1
-              class="text-text-primary p-5 font-extrabold font-mono col-span-3"
-              style="font-size: 3.5vh"
-            >
-              團隊介紹
-            </h1>
-            <h1 class="text-text p-3 col-span-3" style="font-size: 2.5vh">
-              國立臺北科技大學 智慧自動化工程科 第二屆 Linux Odyssey
-              互動式終端機教學網站
-            </h1>
-            <h1 class="text-text p-3 col-span-3" style="font-size: 2.5vh">
-              Indieveloper
-            </h1>
-            <div class="p-3 col-span-3">
-              <div class="grid grid-cols-4 gap-3 justify-items-center">
-                <h1 class="font-bold" style="font-size: 2.5vh">wancat 林貓</h1>
-                <h1 class="font-bold" style="font-size: 2.5vh">Neil</h1>
-                <h1 class="font-bold" style="font-size: 2.5vh">A.H.</h1>
-                <h1 class="font-bold" style="font-size: 2.5vh">Ray Gur</h1>
-              </div>
-            </div>
-            <h1
-              class="text-text-primary p-5 font-extrabold font-mono col-span-3"
-              style="font-size: 3.5vh"
-            >
-              得獎肯定
-            </h1>
-            <h1 class="text-text p-3 col-span-3" style="font-size: 2.5vh">
-              大專校院資訊應用服務創新競賽 鈦坦敏捷開發特別獎 第二名
-            </h1>
-
-            <h1
-              class="text-text-primary p-5 font-extrabold font-mono col-span-3 gap-3"
-              style="font-size: 3.5vh"
-            >
-              玩家感想
-            </h1>
-            <h1 class="text-text p-3" style="font-size: 2.5vh">
-              "很好玩很像益智遊戲"
-            </h1>
-            <h1 class="text-text p-3" style="font-size: 2.5vh">
-              "我從來不知道自由軟體的存在，謝謝你們。"
-            </h1>
-            <h1 class="text-text p-3" style="font-size: 2.5vh">
-              "還蠻好玩的，讓程式變好玩"
-            </h1>
-            <h1 class="text-text p-3" style="font-size: 2.5vh">
-              "以前不喜歡電腦課現在覺得喜歡一點點"
-            </h1>
-            <h1 class="text-text p-3" style="font-size: 2.5vh">
-              "程式真的對新手很友善，讓我學到了很多東西"
-            </h1>
-            <h1 class="text-text p-3" style="font-size: 2.5vh">
-              "感覺做得很好很簡明易懂關卡設計很用心"
-            </h1>
-            <h1 class="text-text p-3" style="font-size: 2.5vh">
-              "這個體驗我覺得非常有趣，可以體驗到沒辦法體驗的程式，學長也都熱心指導，非常感謝學長的用心的講解，希望以後還可以再體驗這種活動"
-            </h1>
-            <h1 class="text-text p-3" style="font-size: 2.5vh">
-              "以前我覺得寫程式很難不過現在覺得很有趣"
-            </h1>
-            <h1 class="text-text p-3" style="font-size: 2.5vh">
-              "以前覺得寫程式是我生活中碰不到而且很難的項目。但通過這堂課之後，覺得寫程式不再那麼難以親近"
-            </h1>
-          </section>
-          <section
-            v-if="isMobile"
-            id="info"
-            class="text-text p-10 grid grid-cols-1 gap-5 justify-items-center"
-          >
-            <h1
-              class="text-text-primary p-5 font-extrabold font-mono"
-              style="font-size: 3.5vh"
-            >
-              團隊介紹
-            </h1>
-            <h1 class="text-text p-3" style="font-size: 2.5vh">
-              國立臺北科技大學 智慧自動化工程科 第二屆 Linux Odyssey
-              互動式終端機教學網站
-            </h1>
-            <h1 class="text-text p-3" style="font-size: 2.5vh">Indieveloper</h1>
-            <div class="p-3">
-              <div class="grid grid-cols-4 gap-3 justify-items-center">
-                <h1 class="font-bold" style="font-size: 2.5vh">wancat 林貓</h1>
-                <h1 class="font-bold" style="font-size: 2.5vh">Neil</h1>
-                <h1 class="font-bold" style="font-size: 2.5vh">A.H.</h1>
-                <h1 class="font-bold" style="font-size: 2.5vh">Ray Gur</h1>
-              </div>
-            </div>
-            <h1
-              class="text-text-primary p-5 font-extrabold font-mono"
-              style="font-size: 3.5vh"
-            >
-              得獎肯定
-            </h1>
-            <h1 class="text-text p-3" style="font-size: 2.5vh">
-              大專校院資訊應用服務創新競賽 鈦坦敏捷開發特別獎 第二名
-            </h1>
-
-            <h1
-              class="text-text-primary p-5 font-extrabold font-mono gap-3"
-              style="font-size: 3.5vh"
-            >
-              玩家感想
-            </h1>
-            <h1 class="text-text p-3" style="font-size: 2.5vh">
-              "很好玩很像益智遊戲"
-            </h1>
-            <h1 class="text-text p-3" style="font-size: 2.5vh">
-              "我從來不知道自由軟體的存在，謝謝你們。"
-            </h1>
-            <h1 class="text-text p-3" style="font-size: 2.5vh">
-              "還蠻好玩的，讓程式變好玩"
-            </h1>
-            <h1 class="text-text p-3" style="font-size: 2.5vh">
-              "以前不喜歡電腦課現在覺得喜歡一點點"
-            </h1>
-            <h1 class="text-text p-3" style="font-size: 2.5vh">
-              "程式真的對新手很友善，讓我學到了很多東西"
-            </h1>
-            <h1 class="text-text p-3" style="font-size: 2.5vh">
-              "感覺做得很好很簡明易懂關卡設計很用心"
-            </h1>
-            <h1 class="text-text p-3" style="font-size: 2.5vh">
-              "這個體驗我覺得非常有趣，可以體驗到沒辦法體驗的程式，學長也都熱心指導，非常感謝學長的用心的講解，希望以後還可以再體驗這種活動"
-            </h1>
-            <h1 class="text-text p-3" style="font-size: 2.5vh">
-              "以前我覺得寫程式很難不過現在覺得很有趣"
-            </h1>
-            <h1 class="text-text p-3" style="font-size: 2.5vh">
-              "以前覺得寫程式是我生活中碰不到而且很難的項目。但通過這堂課之後，覺得寫程式不再那麼難以親近"
-            </h1>
-          </section>
           <section
             id="contact"
             class="text-text mt-10 flex flex-col items-center"
diff --git a/app/src/views/LeaderboardPage.vue b/app/src/views/LeaderboardPage.vue
index b3bb207..5a8b00a 100644
--- a/app/src/views/LeaderboardPage.vue
+++ b/app/src/views/LeaderboardPage.vue
@@ -2,7 +2,8 @@
 import { ref, onMounted } from 'vue'
 import { useToast } from 'vue-toastification'
 import DynamicBackground from '../components/DynamicBackground.vue'
-import GameHeaderPart from '../components/GameHeaderPart.vue'
+import HeaderPart from '../components/HeaderPart.vue'
+import GameHeaderComponents from '../components/GameHeaderComponents.vue'
 import api from '../utils/api'
 
 const leaderboard = ref<
@@ -36,7 +37,7 @@ onMounted(async () => {
       class="w-screen h-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
     >
       <div class="h-[6vh] w-full">
-        <GameHeaderPart title="排行榜" />
+        <HeaderPart :title="排行榜" :headerComponent="GameHeaderComponents" />
       </div>
       <div class="w-fit h-[94vh] m-3">
         <div
diff --git a/app/src/views/QuestMapPage.vue b/app/src/views/QuestMapPage.vue
index 7d4dae4..527523d 100644
--- a/app/src/views/QuestMapPage.vue
+++ b/app/src/views/QuestMapPage.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import QuestMap from '../components/QuestMap.vue'
-import GameHeaderPart from '../components/GameHeaderPart.vue'
+import HeaderPart from '../components/HeaderPart.vue'
+import GameHeaderComponents from '../components/GameHeaderComponents.vue'
 </script>
 
 <template>
   <div class="h-[6vh] w-full">
-    <GameHeaderPart title="關卡地圖" />
+    <HeaderPart :title="關卡地圖" :headerComponent="GameHeaderComponents" />
   </div>
   <div class="flex flex-col justify-center items-center w-full h-[94vh]">
     <QuestMap />

From b5e49547eaa58f24bcbdc946c4e8ce59898ed9b2 Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Tue, 5 Mar 2024 19:43:29 +0800
Subject: [PATCH 03/26] categorise components

---
 .../components/{ => game}/CommandlistPart.vue    |  0
 app/src/components/{ => game}/CompleteModal.vue  |  0
 app/src/components/{ => game}/ControlPalette.vue |  0
 app/src/components/{ => game}/HintPart.vue       |  0
 app/src/components/{ => game}/QuestPart.vue      |  0
 app/src/components/{ => game}/TerminalPart.vue   |  0
 app/src/components/{ => game}/TreeChart.vue      |  0
 .../components/{ => game}/VisualizationPart.vue  |  0
 .../{ => header}/GameHeaderComponents.vue        |  0
 app/src/components/{ => header}/HeaderPart.vue   |  0
 .../{ => header}/LandingHeaderComponents.vue     |  0
 app/src/views/GamePage.vue                       | 16 ++++++++--------
 app/src/views/LandingPage.vue                    |  4 ++--
 app/src/views/QuestMapPage.vue                   |  4 ++--
 14 files changed, 12 insertions(+), 12 deletions(-)
 rename app/src/components/{ => game}/CommandlistPart.vue (100%)
 rename app/src/components/{ => game}/CompleteModal.vue (100%)
 rename app/src/components/{ => game}/ControlPalette.vue (100%)
 rename app/src/components/{ => game}/HintPart.vue (100%)
 rename app/src/components/{ => game}/QuestPart.vue (100%)
 rename app/src/components/{ => game}/TerminalPart.vue (100%)
 rename app/src/components/{ => game}/TreeChart.vue (100%)
 rename app/src/components/{ => game}/VisualizationPart.vue (100%)
 rename app/src/components/{ => header}/GameHeaderComponents.vue (100%)
 rename app/src/components/{ => header}/HeaderPart.vue (100%)
 rename app/src/components/{ => header}/LandingHeaderComponents.vue (100%)

diff --git a/app/src/components/CommandlistPart.vue b/app/src/components/game/CommandlistPart.vue
similarity index 100%
rename from app/src/components/CommandlistPart.vue
rename to app/src/components/game/CommandlistPart.vue
diff --git a/app/src/components/CompleteModal.vue b/app/src/components/game/CompleteModal.vue
similarity index 100%
rename from app/src/components/CompleteModal.vue
rename to app/src/components/game/CompleteModal.vue
diff --git a/app/src/components/ControlPalette.vue b/app/src/components/game/ControlPalette.vue
similarity index 100%
rename from app/src/components/ControlPalette.vue
rename to app/src/components/game/ControlPalette.vue
diff --git a/app/src/components/HintPart.vue b/app/src/components/game/HintPart.vue
similarity index 100%
rename from app/src/components/HintPart.vue
rename to app/src/components/game/HintPart.vue
diff --git a/app/src/components/QuestPart.vue b/app/src/components/game/QuestPart.vue
similarity index 100%
rename from app/src/components/QuestPart.vue
rename to app/src/components/game/QuestPart.vue
diff --git a/app/src/components/TerminalPart.vue b/app/src/components/game/TerminalPart.vue
similarity index 100%
rename from app/src/components/TerminalPart.vue
rename to app/src/components/game/TerminalPart.vue
diff --git a/app/src/components/TreeChart.vue b/app/src/components/game/TreeChart.vue
similarity index 100%
rename from app/src/components/TreeChart.vue
rename to app/src/components/game/TreeChart.vue
diff --git a/app/src/components/VisualizationPart.vue b/app/src/components/game/VisualizationPart.vue
similarity index 100%
rename from app/src/components/VisualizationPart.vue
rename to app/src/components/game/VisualizationPart.vue
diff --git a/app/src/components/GameHeaderComponents.vue b/app/src/components/header/GameHeaderComponents.vue
similarity index 100%
rename from app/src/components/GameHeaderComponents.vue
rename to app/src/components/header/GameHeaderComponents.vue
diff --git a/app/src/components/HeaderPart.vue b/app/src/components/header/HeaderPart.vue
similarity index 100%
rename from app/src/components/HeaderPart.vue
rename to app/src/components/header/HeaderPart.vue
diff --git a/app/src/components/LandingHeaderComponents.vue b/app/src/components/header/LandingHeaderComponents.vue
similarity index 100%
rename from app/src/components/LandingHeaderComponents.vue
rename to app/src/components/header/LandingHeaderComponents.vue
diff --git a/app/src/views/GamePage.vue b/app/src/views/GamePage.vue
index 591df48..6fd5614 100644
--- a/app/src/views/GamePage.vue
+++ b/app/src/views/GamePage.vue
@@ -2,15 +2,15 @@
 import { computed, onMounted } from 'vue'
 import { useToast } from 'vue-toastification'
 import sessionStore, { init } from '../store/session'
-import HeaderPart from '../components/HeaderPart.vue'
-import GameHeaderComponents from '../components/GameHeaderComponents.vue'
+import HeaderPart from '../components/header/HeaderPart.vue'
+import GameHeaderComponents from '../components/header/GameHeaderComponents.vue'
 // import CommandlistPart from '../components/CommandlistPart.vue'
-import HintPart from '../components/HintPart.vue'
-import QuestPart from '../components/QuestPart.vue'
-import TerminalPart from '../components/TerminalPart.vue'
-import VisualizationPart from '../components/VisualizationPart.vue'
-import ControlPalette from '../components/ControlPalette.vue'
-import CompleteModal from '../components/CompleteModal.vue'
+import HintPart from '../components/game/HintPart.vue'
+import QuestPart from '../components/game/QuestPart.vue'
+import TerminalPart from '../components/game/TerminalPart.vue'
+import VisualizationPart from '../components/game/VisualizationPart.vue'
+import ControlPalette from '../components/game/ControlPalette.vue'
+import CompleteModal from '../components/game/CompleteModal.vue'
 import { LoadQuestError, LoadSessionError } from '../utils/errors'
 
 const completed = computed(() => {
diff --git a/app/src/views/LandingPage.vue b/app/src/views/LandingPage.vue
index c20cfb7..e148dab 100644
--- a/app/src/views/LandingPage.vue
+++ b/app/src/views/LandingPage.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import ContactButton from '../components/ContactButton.vue'
 import DynamicBackground from '../components/DynamicBackground.vue'
-import LandingHeaderComponents from '../components/LandingHeaderComponents.vue'
-import HeaderPart from '../components/HeaderPart.vue'
+import LandingHeaderComponents from '../components/header/LandingHeaderComponents.vue'
+import HeaderPart from '../components/header/HeaderPart.vue'
 
 import { facebookUrl, githubUrl } from '../config'
 </script>
diff --git a/app/src/views/QuestMapPage.vue b/app/src/views/QuestMapPage.vue
index 527523d..c0497e9 100644
--- a/app/src/views/QuestMapPage.vue
+++ b/app/src/views/QuestMapPage.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import QuestMap from '../components/QuestMap.vue'
-import HeaderPart from '../components/HeaderPart.vue'
-import GameHeaderComponents from '../components/GameHeaderComponents.vue'
+import HeaderPart from '../components/header/HeaderPart.vue'
+import GameHeaderComponents from '../components/header/GameHeaderComponents.vue'
 </script>
 
 <template>

From ad29137b86ba5e174d554e2eb04aee8531e55b5e Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Tue, 5 Mar 2024 19:51:38 +0800
Subject: [PATCH 04/26] categorise components - change path

---
 app/src/components/game/CompleteModal.vue          | 2 +-
 app/src/components/game/ControlPalette.vue         | 4 ++--
 app/src/components/game/HintPart.vue               | 4 ++--
 app/src/components/game/QuestPart.vue              | 4 ++--
 app/src/components/game/TerminalPart.vue           | 2 +-
 app/src/components/game/TreeChart.vue              | 4 ++--
 app/src/components/header/GameHeaderComponents.vue | 8 ++++----
 app/src/views/LeaderboardPage.vue                  | 4 ++--
 8 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/app/src/components/game/CompleteModal.vue b/app/src/components/game/CompleteModal.vue
index 2d6430f..68a4ab0 100644
--- a/app/src/components/game/CompleteModal.vue
+++ b/app/src/components/game/CompleteModal.vue
@@ -4,7 +4,7 @@ import { useToast } from 'vue-toastification'
 import { ref } from 'vue'
 import { Vue3Lottie } from 'vue3-lottie'
 // import { surveyUrl } from '../config'
-import CompleteAnimation from '../img/complete-animation.json'
+import CompleteAnimation from '../../img/complete-animation.json'
 
 const showModal = ref(true) // Controls whether the modal is visible or not
 const router = useRouter()
diff --git a/app/src/components/game/ControlPalette.vue b/app/src/components/game/ControlPalette.vue
index 6186e28..5a4434a 100644
--- a/app/src/components/game/ControlPalette.vue
+++ b/app/src/components/game/ControlPalette.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
 import { useToast } from 'vue-toastification'
-import { createSession } from '../store/session'
-import { surveyUrl } from '../config'
+import { createSession } from '../../store/session'
+import { surveyUrl } from '../../config'
 
 const router = useRouter()
 const reset = async () => {
diff --git a/app/src/components/game/HintPart.vue b/app/src/components/game/HintPart.vue
index b7e3836..b4e889f 100644
--- a/app/src/components/game/HintPart.vue
+++ b/app/src/components/game/HintPart.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
-import sessionStore from '../store/session'
-import MarkdownText from './MarkdownText.vue'
+import sessionStore from '../../store/session'
+import MarkdownText from '../MarkdownText.vue'
 
 const current = ref(-1)
 watch(
diff --git a/app/src/components/game/QuestPart.vue b/app/src/components/game/QuestPart.vue
index 0e567be..98b366a 100644
--- a/app/src/components/game/QuestPart.vue
+++ b/app/src/components/game/QuestPart.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import MarkdownText from './MarkdownText.vue'
-import sessionStore from '../store/session'
+import MarkdownText from '../MarkdownText.vue'
+import sessionStore from '../../store/session'
 import { Task } from '../types'
 
 const tasks = computed(() => {
diff --git a/app/src/components/game/TerminalPart.vue b/app/src/components/game/TerminalPart.vue
index 0780a69..cb37600 100644
--- a/app/src/components/game/TerminalPart.vue
+++ b/app/src/components/game/TerminalPart.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import { useTerminal } from '../store/session'
+import { useTerminal } from '../../store/session'
 
 const terminal = ref<HTMLElement | null>(null)
 
diff --git a/app/src/components/game/TreeChart.vue b/app/src/components/game/TreeChart.vue
index aada966..19edbbb 100644
--- a/app/src/components/game/TreeChart.vue
+++ b/app/src/components/game/TreeChart.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import FileNode from './FileNode.vue'
-import sessionStore from '../store/session'
+import FileNode from '..FileNode.vue'
+import sessionStore from '../../store/session'
 </script>
 
 <template>
diff --git a/app/src/components/header/GameHeaderComponents.vue b/app/src/components/header/GameHeaderComponents.vue
index 7cc0898..71cfa02 100644
--- a/app/src/components/header/GameHeaderComponents.vue
+++ b/app/src/components/header/GameHeaderComponents.vue
@@ -2,13 +2,13 @@
 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 { logout } from '../../utils/auth'
+import { bugReportUrl, surveyUrl } from '../../config'
+import { reset } from '../../store/session'
 import userProfileStore, {
   loadUserProfile,
   resetUserProfile,
-} from '../store/userProfile'
+} from '../../store/userProfile'
 
 const router = useRouter()
 
diff --git a/app/src/views/LeaderboardPage.vue b/app/src/views/LeaderboardPage.vue
index 5a8b00a..88753c2 100644
--- a/app/src/views/LeaderboardPage.vue
+++ b/app/src/views/LeaderboardPage.vue
@@ -2,8 +2,8 @@
 import { ref, onMounted } from 'vue'
 import { useToast } from 'vue-toastification'
 import DynamicBackground from '../components/DynamicBackground.vue'
-import HeaderPart from '../components/HeaderPart.vue'
-import GameHeaderComponents from '../components/GameHeaderComponents.vue'
+import HeaderPart from '../components/header/HeaderPart.vue'
+import GameHeaderComponents from '../components/header/GameHeaderComponents.vue'
 import api from '../utils/api'
 
 const leaderboard = ref<

From 8c4a9ea871d15d540700291e0f9ebd1b9764df68 Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Tue, 5 Mar 2024 22:29:02 +0800
Subject: [PATCH 05/26] add header to login and register page, modified header
 class but not fit for all circumstances

---
 app/src/components/header/HeaderPart.vue        | 14 +++++++-------
 .../header/LandingHeaderComponents.vue          |  2 ++
 app/src/views/GamePage.vue                      |  4 ++--
 app/src/views/LandingPage.vue                   | 10 ++++++----
 app/src/views/LoginPage.vue                     |  6 ++++--
 app/src/views/QuestMapPage.vue                  | 17 ++++++++++++++---
 app/src/views/RegisterPage.vue                  |  9 +++++----
 7 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/app/src/components/header/HeaderPart.vue b/app/src/components/header/HeaderPart.vue
index 13c54cf..a1dc82a 100644
--- a/app/src/components/header/HeaderPart.vue
+++ b/app/src/components/header/HeaderPart.vue
@@ -8,24 +8,24 @@ defineProps({
   },
   headerComponent: {
     type: Object,
-    required: true,
+    required: false,
   },
 })
 </script>
 <template>
   <div
     id="header"
-    class="w-full h-[6vh] px-5 flex flex-row items-center justify-between bg-bg-secondary"
+    class="w-full top-0 px-5 fixed flex flex-row bg-bg-secondary justify-between items-center"
   >
     <div class="flex flex-row items-center gap-3">
-      <img src="../img/icon_totem.svg" class="h-8 justify-self-start" />
-      <button
-        id="GameTitle"
+      <img src="../../img/icon_totem.svg" class="h-8 justify-self-start" />
+      <RouterLink
+        to="/"
         class="text-text-primary inline-block font-bold whitespace-nowrap pt-1"
         style="font-size: 2vh"
       >
         Linux Odyssey
-      </button>
+      </RouterLink>
       <p
         id="QuestTitle"
         class="text-text inline-block font-bold whitespace-nowrap"
@@ -34,7 +34,7 @@ defineProps({
         {{ title }}
       </p>
     </div>
-    <div class="h-full w-full flex gap-3 items-center justify-end">
+    <div class="w-full flex gap-3 items-center justify-end">
       <component :is="headerComponent" />
     </div>
   </div>
diff --git a/app/src/components/header/LandingHeaderComponents.vue b/app/src/components/header/LandingHeaderComponents.vue
index 146b209..1d779dd 100644
--- a/app/src/components/header/LandingHeaderComponents.vue
+++ b/app/src/components/header/LandingHeaderComponents.vue
@@ -1,4 +1,6 @@
 <script setup>
+import { bugReportUrl } from '../../config'
+
 const scrollToSection = (sectionId) => {
   const section = document.getElementById(sectionId)
   if (section) {
diff --git a/app/src/views/GamePage.vue b/app/src/views/GamePage.vue
index 6fd5614..d0c9b4d 100644
--- a/app/src/views/GamePage.vue
+++ b/app/src/views/GamePage.vue
@@ -46,7 +46,7 @@ onMounted(async () => {
 
 <template>
   <!-- game header -->
-  <div class="h-[6vh] w-full">
+  <div class="w-full h-[5vh]">
     <HeaderPart
       :title="sessionStore.quest?.title"
       :headerComponent="GameHeaderComponents"
@@ -59,7 +59,7 @@ onMounted(async () => {
     :value="sessionStore.session.status"
   />
   <!-- main -->
-  <div id="main" class="h-[94vh] w-full flex p-3 space-x-3">
+  <div id="main" class="h-[95vh] w-full flex p-3 space-x-3">
     <!-- Topic and Command List -->
     <div class="bg-bg-secondary h-full w-1/4 rounded-lg">
       <section id="quest" class="h-full p-3 overflow-auto">
diff --git a/app/src/views/LandingPage.vue b/app/src/views/LandingPage.vue
index e148dab..3b98d6a 100644
--- a/app/src/views/LandingPage.vue
+++ b/app/src/views/LandingPage.vue
@@ -11,9 +11,9 @@ import { facebookUrl, githubUrl } from '../config'
     <DynamicBackground class="w-full h-full" />
     <div class="h-screen w-screen absolute top-0 left-0">
       <!-- game header -->
-      <HeaderPart :headerComponent="LandingHeaderComponents" />
+      <HeaderPart :headerComponent="LandingHeaderComponents" class="z-50" />
       <!-- main content -->
-      <main class="w-full h-[94vh] overflow-y-auto">
+      <main class="w-full h-full overflow-y-auto">
         <div class="w-full flex flex-col items-center">
           <div
             class="flex flex-col md:flex-row mt-10 justify-around gap-5 items-center my-10"
@@ -26,7 +26,6 @@ import { facebookUrl, githubUrl } from '../config'
               Odyssey
             </h1>
           </div>
-
           <!-- intro -->
           <div class="w-full md:w-2/3 px-5">
             <section
@@ -158,6 +157,7 @@ import { facebookUrl, githubUrl } from '../config'
                     class="text-text-primary text-3xl font-extrabold font-mono sm:col-span-3 gap-6"
                   >
                     玩家感想
+                    <!--可以做成翻頁卡牌一次一個-->
                   </h1>
                   <h1 class="text-xl text-center">"很好玩很像益智遊戲"</h1>
                   <h1 class="text-xl text-center">
@@ -195,7 +195,9 @@ import { facebookUrl, githubUrl } from '../config'
             <h1 class="text-text-primary font-extrabold font-mono text-3xl">
               聯絡我們
             </h1>
-            <div class="flex flex-row items-center justify-around mt-5 gap-5">
+            <div
+              class="flex flex-row items-center justify-around mt-5 gap-5 mb-5"
+            >
               <ContactButton
                 :url="facebookUrl"
                 :icons="['fab', 'facebook']"
diff --git a/app/src/views/LoginPage.vue b/app/src/views/LoginPage.vue
index 5a4e728..97f5a3e 100644
--- a/app/src/views/LoginPage.vue
+++ b/app/src/views/LoginPage.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import AuthForm from '../components/AuthForm.vue'
-import Background from '../components/DynamicBackground.vue'
+import DynamicBackground from '../components/DynamicBackground.vue'
+import HeaderPart from '../components/header/HeaderPart.vue'
 
 import {
   TooManyRequestsError,
@@ -45,10 +46,11 @@ const handleLogin = async ({
 
 <template>
   <div class="w-screen h-screen">
-    <Background class="w-full h-full" />
+    <DynamicBackground class="w-full h-full" />
     <div
       class="w-screen h-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
     >
+      <HeaderPart />
       <div class="w-fit">
         <AuthForm @onSubmit="handleLogin" type="login" />
       </div>
diff --git a/app/src/views/QuestMapPage.vue b/app/src/views/QuestMapPage.vue
index c0497e9..da63346 100644
--- a/app/src/views/QuestMapPage.vue
+++ b/app/src/views/QuestMapPage.vue
@@ -5,10 +5,21 @@ import GameHeaderComponents from '../components/header/GameHeaderComponents.vue'
 </script>
 
 <template>
-  <div class="h-[6vh] w-full">
-    <HeaderPart :title="關卡地圖" :headerComponent="GameHeaderComponents" />
+  <div class="w-fit h-[5vh]">
+    <HeaderPart
+      :title="關卡地圖"
+      :headerComponent="GameHeaderComponents"
+      class="z-50"
+    />
   </div>
-  <div class="flex flex-col justify-center items-center w-full h-[94vh]">
+  <!-- <p
+      class="text-text-primary absolute z-1 font-bold inline-block tracking-widest"
+      style="left: 1.2%; top: 1.5%; height: 100%; font-size: 2vh"
+    >
+      Quest Map
+      Unix編年史
+    </p> -->
+  <div class="flex flex-col justify-center items-center w-full h-[95vh]">
     <QuestMap />
   </div>
 </template>
diff --git a/app/src/views/RegisterPage.vue b/app/src/views/RegisterPage.vue
index b900988..befc86b 100644
--- a/app/src/views/RegisterPage.vue
+++ b/app/src/views/RegisterPage.vue
@@ -3,8 +3,8 @@ import validator from 'validator'
 import { isValidUsername } from '@linux-odyssey/utils'
 import { passwordPolicy } from '@linux-odyssey/constants'
 import AuthForm from '../components/AuthForm.vue'
-import Background from '../components/DynamicBackground.vue'
-
+import DynamicBackground from '../components/DynamicBackground.vue'
+import HeaderPart from '../components/header/HeaderPart.vue'
 import { checkUsername, register } from '../utils/auth'
 import {
   UnauthorizedError,
@@ -89,11 +89,12 @@ async function check({
 
 <template>
   <div class="w-screen h-screen">
-    <Background class="w-full h-full" />
+    <DynamicBackground class="w-full h-full" />
     <div
       class="h-screen w-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
     >
-      <div class="w-fit">
+      <HeaderPart />
+      <div class="w-fit h-[91vh]">
         <AuthForm
           @onSubmit="handleRegister"
           @onChange="check"

From 9bfc6614caf4d7acca7628cfe760c572790d8d48 Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Tue, 5 Mar 2024 23:54:02 +0800
Subject: [PATCH 06/26] hide some text when screen is small

---
 app/src/components/game/ControlPalette.vue | 20 +++++++------
 app/src/components/header/HeaderPart.vue   | 34 +++++++++++++++++++++-
 app/src/views/GamePage.vue                 |  2 +-
 3 files changed, 45 insertions(+), 11 deletions(-)

diff --git a/app/src/components/game/ControlPalette.vue b/app/src/components/game/ControlPalette.vue
index 5a4434a..bd2bbf7 100644
--- a/app/src/components/game/ControlPalette.vue
+++ b/app/src/components/game/ControlPalette.vue
@@ -20,29 +20,31 @@ const continuePlay = async () => {
 </script>
 
 <template>
-  <section class="h-[10%] p-3 grid grid-cols-4 gap-4 place-content-between">
+  <section
+    class="h-fit w-fit px-1 py-1 grid grid-cols-4 gap-2 place-content-between"
+  >
     <button id="survey" class="bg-bg-secondary rounded-lg p-2">
       <a title="Survey" :href="surveyUrl" target="_blank" class="h-5 w-5">
         <font-awesome-icon
           :icon="['fas', 'file-invoice']"
-          class="text-text-primary"
+          class="text-text-primary px-1"
         />
-        <p class="text-text-primary inline ml-1">問卷</p>
+        <p class="text-text-primary inline ml-1 hidden md:flex">問卷</p>
       </a>
     </button>
     <button disabled id="solution" class="bg-bg-disabled rounded-lg p-2">
       <font-awesome-icon
         :icon="['far', 'circle-question']"
-        class="text-text-disabled"
+        class="text-text-disabled px-1"
       />
-      <p class="text-text-disabled inline ml-1">解答</p>
+      <p class="text-text-disabled inline ml-1 hidden md:flex">解答</p>
     </button>
     <button id="reset" class="bg-bg-secondary rounded-lg p-2" @click="reset">
       <font-awesome-icon
         :icon="['fas', 'arrow-rotate-left']"
-        class="text-text-primary"
+        class="text-text-primary px-1"
       />
-      <p class="text-text-primary inline ml-1">重來</p>
+      <p class="text-text-primary inline ml-1 hidden md:flex">重來</p>
     </button>
     <button
       id="continue"
@@ -51,9 +53,9 @@ const continuePlay = async () => {
     >
       <font-awesome-icon
         :icon="['far', 'circle-right']"
-        class="text-text-primary"
+        class="text-text-primary px-1"
       />
-      <p class="text-text-primary inline ml-1">繼續</p>
+      <p class="text-text-primary inline ml-1 hidden md:flex">繼續</p>
     </button>
   </section>
 </template>
diff --git a/app/src/components/header/HeaderPart.vue b/app/src/components/header/HeaderPart.vue
index a1dc82a..5fcd412 100644
--- a/app/src/components/header/HeaderPart.vue
+++ b/app/src/components/header/HeaderPart.vue
@@ -11,6 +11,19 @@ defineProps({
     required: false,
   },
 })
+let showMenu = false
+const ToggleMenu = () => {
+  console.log(showMenu)
+  showMenu = true
+  console.log(showMenu)
+}
+const hideMenu = () => {
+  showMenu = false
+}
+const handleItemClick = (item) => {
+  console.log('Clicked:', item)
+  // Add your logic for handling item click here
+}
 </script>
 <template>
   <div
@@ -34,8 +47,27 @@ defineProps({
         {{ title }}
       </p>
     </div>
-    <div class="w-full flex gap-3 items-center justify-end">
+    <div class="w-full flex gap-3 items-center justify-end hidden sm:flex">
       <component :is="headerComponent" />
     </div>
+    <button class="flex items-center justify-end sm:hidden h-5 w-5">
+      <font-awesome-icon
+        :icon="['fas', 'bars']"
+        class="text-text-primary h-full w-full"
+        @click="ToggleMenu"
+      />
+    </button>
+  </div>
+  <div v-if="showMenu" class="bg-bg-primary w-full h-1/2 z-50">
+    <!-- Menu items -->
+    <ul>
+      <li
+        v-for="item in menuItems"
+        :key="item.id"
+        @click="handleItemClick(item)"
+      >
+        {{ item.name }}
+      </li>
+    </ul>
   </div>
 </template>
diff --git a/app/src/views/GamePage.vue b/app/src/views/GamePage.vue
index d0c9b4d..01b6469 100644
--- a/app/src/views/GamePage.vue
+++ b/app/src/views/GamePage.vue
@@ -71,7 +71,7 @@ onMounted(async () => {
       </section> -->
     </div>
     <!-- Terminal and Hint -->
-    <div class="bg-bg h-full w-1/2 rounded-lg">
+    <div class="bg-bg h-full rounded-lg w-1/2">
       <section id="hint" class="h-3/5">
         <HintPart />
       </section>

From f4fc6de4cc2125d50a362f17a9006a2f0c85f431 Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Tue, 12 Mar 2024 21:12:07 +0800
Subject: [PATCH 07/26] canceling [..vh]

---
 .../header/GameHeaderComponents.vue           | 19 +++++--------------
 .../header/LandingHeaderComponents.vue        | 15 ++++++---------
 app/src/views/GamePage.vue                    |  4 ++--
 app/src/views/LeaderboardPage.vue             |  2 +-
 app/src/views/QuestMapPage.vue                |  4 ++--
 app/src/views/RegisterPage.vue                |  2 +-
 6 files changed, 17 insertions(+), 29 deletions(-)

diff --git a/app/src/components/header/GameHeaderComponents.vue b/app/src/components/header/GameHeaderComponents.vue
index 71cfa02..f121f15 100644
--- a/app/src/components/header/GameHeaderComponents.vue
+++ b/app/src/components/header/GameHeaderComponents.vue
@@ -65,31 +65,22 @@ onMounted(async () => {
   <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"
+      class="text-text-primary"
     />
   </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"
-    />
+    <font-awesome-icon :icon="['fas', 'trophy']" class="text-text-primary" />
   </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"
-    />
+    <font-awesome-icon :icon="['fas', 'map']" class="text-text-primary" />
   </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"
-    />
+    <font-awesome-icon :icon="['fas', 'bug']" class="text-text-primary" />
   </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"
+      class="text-text-primary"
     />
   </button>
 </template>
diff --git a/app/src/components/header/LandingHeaderComponents.vue b/app/src/components/header/LandingHeaderComponents.vue
index 1d779dd..4151a7c 100644
--- a/app/src/components/header/LandingHeaderComponents.vue
+++ b/app/src/components/header/LandingHeaderComponents.vue
@@ -17,7 +17,7 @@ const scrollToSection = (sectionId) => {
 <template>
   <button
     id="Intro"
-    class="text-text inline-block font-bold whitespace-nowrap pt-1"
+    class="text-text inline-block font-bold whitespace-nowrap pt-1 hover:text-text-primary"
     @click="scrollToSection('intro')"
     style="font-size: 2vh"
   >
@@ -25,14 +25,14 @@ const scrollToSection = (sectionId) => {
   </button>
   <button
     id="Feature"
-    class="text-text inline-block font-bold whitespace-nowrap pt-1"
+    class="text-text inline-block font-bold whitespace-nowrap pt-1 hover:text-text-primary"
     @click="scrollToSection('feature')"
     style="font-size: 2vh"
   >
     特色</button
   ><button
     id="Info"
-    class="text-text inline-block font-bold whitespace-nowrap pt-1"
+    class="text-text inline-block font-bold whitespace-nowrap pt-1 hover:text-text-primary"
     @click="scrollToSection('about')"
     style="font-size: 2vh"
   >
@@ -41,7 +41,7 @@ const scrollToSection = (sectionId) => {
 
   <button
     id="Contact"
-    class="text-text inline-block font-bold whitespace-nowrap pt-1"
+    class="text-text inline-block font-bold whitespace-nowrap pt-1 hover:text-text-primary"
     @click="scrollToSection('contact')"
     style="font-size: 2vh"
   >
@@ -51,15 +51,12 @@ const scrollToSection = (sectionId) => {
     title="Sign In"
     id="SignIn"
     to="/register"
-    class="text-text inline-block font-bold whitespace-nowrap pt-1"
+    class="text-text inline-block font-bold whitespace-nowrap pt-1 hover:text-text-primary"
     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"
-    />
+    <font-awesome-icon :icon="['fas', 'bug']" class="text-text-primary" />
   </a>
 </template>
diff --git a/app/src/views/GamePage.vue b/app/src/views/GamePage.vue
index 01b6469..7325737 100644
--- a/app/src/views/GamePage.vue
+++ b/app/src/views/GamePage.vue
@@ -46,7 +46,7 @@ onMounted(async () => {
 
 <template>
   <!-- game header -->
-  <div class="w-full h-[5vh]">
+  <div class="w-full">
     <HeaderPart
       :title="sessionStore.quest?.title"
       :headerComponent="GameHeaderComponents"
@@ -59,7 +59,7 @@ onMounted(async () => {
     :value="sessionStore.session.status"
   />
   <!-- main -->
-  <div id="main" class="h-[95vh] w-full flex p-3 space-x-3">
+  <div id="main" class="h-full pt-10 w-full flex p-3 space-x-3">
     <!-- Topic and Command List -->
     <div class="bg-bg-secondary h-full w-1/4 rounded-lg">
       <section id="quest" class="h-full p-3 overflow-auto">
diff --git a/app/src/views/LeaderboardPage.vue b/app/src/views/LeaderboardPage.vue
index 88753c2..6225861 100644
--- a/app/src/views/LeaderboardPage.vue
+++ b/app/src/views/LeaderboardPage.vue
@@ -36,7 +36,7 @@ onMounted(async () => {
     <div
       class="w-screen h-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
     >
-      <div class="h-[6vh] w-full">
+      <div class="w-full">
         <HeaderPart :title="排行榜" :headerComponent="GameHeaderComponents" />
       </div>
       <div class="w-fit h-[94vh] m-3">
diff --git a/app/src/views/QuestMapPage.vue b/app/src/views/QuestMapPage.vue
index da63346..793c79b 100644
--- a/app/src/views/QuestMapPage.vue
+++ b/app/src/views/QuestMapPage.vue
@@ -5,7 +5,7 @@ import GameHeaderComponents from '../components/header/GameHeaderComponents.vue'
 </script>
 
 <template>
-  <div class="w-fit h-[5vh]">
+  <div class="w-fit">
     <HeaderPart
       :title="關卡地圖"
       :headerComponent="GameHeaderComponents"
@@ -19,7 +19,7 @@ import GameHeaderComponents from '../components/header/GameHeaderComponents.vue'
       Quest Map
       Unix編年史
     </p> -->
-  <div class="flex flex-col justify-center items-center w-full h-[95vh]">
+  <div class="flex flex-col justify-center items-center w-full h-full mt-8">
     <QuestMap />
   </div>
 </template>
diff --git a/app/src/views/RegisterPage.vue b/app/src/views/RegisterPage.vue
index befc86b..6fd0d67 100644
--- a/app/src/views/RegisterPage.vue
+++ b/app/src/views/RegisterPage.vue
@@ -94,7 +94,7 @@ async function check({
       class="h-screen w-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
     >
       <HeaderPart />
-      <div class="w-fit h-[91vh]">
+      <div class="w-fit mt-8">
         <AuthForm
           @onSubmit="handleRegister"
           @onChange="check"

From e37a23c34fbc792645d06769931246404afd7cdb Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Tue, 12 Mar 2024 21:15:51 +0800
Subject: [PATCH 08/26] mobile menu (but not justify end while bigger screen,
 still solving)

---
 app/src/components/header/HeaderPart.vue | 52 +++++++++---------------
 1 file changed, 19 insertions(+), 33 deletions(-)

diff --git a/app/src/components/header/HeaderPart.vue b/app/src/components/header/HeaderPart.vue
index 5fcd412..6107a8c 100644
--- a/app/src/components/header/HeaderPart.vue
+++ b/app/src/components/header/HeaderPart.vue
@@ -1,5 +1,5 @@
-<script setup>
-import { defineProps } from 'vue'
+<script setup lang="ts">
+import { defineProps, ref } from 'vue'
 
 defineProps({
   title: {
@@ -11,30 +11,20 @@ defineProps({
     required: false,
   },
 })
-let showMenu = false
-const ToggleMenu = () => {
-  console.log(showMenu)
-  showMenu = true
-  console.log(showMenu)
-}
-const hideMenu = () => {
-  showMenu = false
-}
-const handleItemClick = (item) => {
-  console.log('Clicked:', item)
-  // Add your logic for handling item click here
+const menuOpen = ref(false)
+const toggleMenu = () => {
+  menuOpen.value = !menuOpen.value
 }
 </script>
 <template>
   <div
-    id="header"
-    class="w-full top-0 px-5 fixed flex flex-row bg-bg-secondary justify-between items-center"
+    class="w-full top-0 px-5 fixed flex flex-row bg-bg-secondary justify-between items-center sm:justify-start"
   >
-    <div class="flex flex-row items-center gap-3">
+    <div class="flex flex-row items-center gap-3" :class="{ hidden: menuOpen }">
       <img src="../../img/icon_totem.svg" class="h-8 justify-self-start" />
       <RouterLink
         to="/"
-        class="text-text-primary inline-block font-bold whitespace-nowrap pt-1"
+        class="text-text-primary inline-block font-bold whitespace-nowrap pt-1 transition ease-in-out hover:scale-110 duration-300"
         style="font-size: 2vh"
       >
         Linux Odyssey
@@ -47,27 +37,23 @@ const handleItemClick = (item) => {
         {{ title }}
       </p>
     </div>
-    <div class="w-full flex gap-3 items-center justify-end hidden sm:flex">
+    <div
+      class="w-full flex flex-col gap-3 items-center justify-end sm:w-auto sm:flex-row sm:block sm:ml-6"
+      :class="{ hidden: !menuOpen }"
+    >
       <component :is="headerComponent" />
     </div>
-    <button class="flex items-center justify-end sm:hidden h-5 w-5">
+    <button
+      type="button"
+      class="flex items-center justify-end h-5 w-5 rounded-md sm:hidden"
+      aria-controls="mobile-menu"
+      aria-expanded="false"
+      @click="toggleMenu"
+    >
       <font-awesome-icon
         :icon="['fas', 'bars']"
         class="text-text-primary h-full w-full"
-        @click="ToggleMenu"
       />
     </button>
   </div>
-  <div v-if="showMenu" class="bg-bg-primary w-full h-1/2 z-50">
-    <!-- Menu items -->
-    <ul>
-      <li
-        v-for="item in menuItems"
-        :key="item.id"
-        @click="handleItemClick(item)"
-      >
-        {{ item.name }}
-      </li>
-    </ul>
-  </div>
 </template>

From 980d0497f4264eee7466217ed621ea1684f40e7c Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Tue, 19 Mar 2024 14:55:35 +0800
Subject: [PATCH 09/26] fix header justify end property

---
 .../header/GameHeaderComponents.vue           | 37 +++++++++++++++----
 app/src/components/header/HeaderPart.vue      |  6 +--
 2 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/app/src/components/header/GameHeaderComponents.vue b/app/src/components/header/GameHeaderComponents.vue
index f121f15..554f5a3 100644
--- a/app/src/components/header/GameHeaderComponents.vue
+++ b/app/src/components/header/GameHeaderComponents.vue
@@ -57,30 +57,53 @@ onMounted(async () => {
         </button> -->
   <p
     id="UsernameText"
-    class="text-text inline-block whitespace-nowrap"
+    class="text-text inline-block whitespace-nowrap px-1.5"
     style="font-size: 2vh"
   >
     {{ userProfileStore.username }}
   </p>
-  <a title="Survey" :href="surveyUrl" target="_blank" class="h-5 w-5">
+  <a
+    title="Survey"
+    :href="surveyUrl"
+    target="_blank"
+    class="md:h-5 md:w-5 px-1.5 w-auto"
+  >
     <font-awesome-icon
       :icon="['fas', 'file-invoice']"
-      class="text-text-primary"
+      class="text-text-primary inline"
     />
+    <span class="text-text sm:hidden px-2">Survey</span>
   </a>
-  <RouterLink title="LeaderBoard" to="/leaderboard" class="h-5 w-5">
+  <RouterLink
+    title="LeaderBoard"
+    to="/leaderboard"
+    class="md:h-5 md:w-5 px-1.5 w-auto"
+  >
     <font-awesome-icon :icon="['fas', 'trophy']" class="text-text-primary" />
+    <span class="text-text sm:hidden px-2">Leader Board</span>
   </RouterLink>
-  <RouterLink title="Map" to="/map" class="h-5 w-5">
+  <RouterLink title="Map" to="/map" class="md:h-5 md:w-5 px-1.5 w-auto">
     <font-awesome-icon :icon="['fas', 'map']" class="text-text-primary" />
+    <span class="text-text sm:hidden px-2">Map</span>
   </RouterLink>
-  <a title="Bug Report" :href="bugReportUrl" target="_blank" class="h-5 w-5">
+  <a
+    title="Bug Report"
+    :href="bugReportUrl"
+    target="_blank"
+    class="md:h-5 md:w-5 px-1.5 w-auto"
+  >
     <font-awesome-icon :icon="['fas', 'bug']" class="text-text-primary" />
+    <span class="text-text sm:hidden px-2">Bug Report</span>
   </a>
-  <button title="Sign Out" @click="handleLogout" class="h-5 w-5">
+  <button
+    title="Sign Out"
+    @click="handleLogout"
+    class="md:h-5 md:w-5 px-1.5 w-auto"
+  >
     <font-awesome-icon
       :icon="['fas', 'arrow-right-from-bracket']"
       class="text-text-primary"
     />
+    <span class="text-text sm:hidden px-2">Sign Out</span>
   </button>
 </template>
diff --git a/app/src/components/header/HeaderPart.vue b/app/src/components/header/HeaderPart.vue
index 6107a8c..c7528f2 100644
--- a/app/src/components/header/HeaderPart.vue
+++ b/app/src/components/header/HeaderPart.vue
@@ -18,7 +18,7 @@ const toggleMenu = () => {
 </script>
 <template>
   <div
-    class="w-full top-0 px-5 fixed flex flex-row bg-bg-secondary justify-between items-center sm:justify-start"
+    class="w-full top-0 px-5 fixed flex flex-row flex-wrap bg-bg-secondary justify-between items-center sm:justify-between"
   >
     <div class="flex flex-row items-center gap-3" :class="{ hidden: menuOpen }">
       <img src="../../img/icon_totem.svg" class="h-8 justify-self-start" />
@@ -38,14 +38,14 @@ const toggleMenu = () => {
       </p>
     </div>
     <div
-      class="w-full flex flex-col gap-3 items-center justify-end sm:w-auto sm:flex-row sm:block sm:ml-6"
+      class="w-full flex flex-col gap-3 items-center justify-end sm:w-auto sm:block sm:ml-6"
       :class="{ hidden: !menuOpen }"
     >
       <component :is="headerComponent" />
     </div>
     <button
       type="button"
-      class="flex items-center justify-end h-5 w-5 rounded-md sm:hidden"
+      class="flex items-center h-5 w-5 rounded-md sm:hidden"
       aria-controls="mobile-menu"
       aria-expanded="false"
       @click="toggleMenu"

From df980a7d56f618ca40fa2d8c7bbac6c3ee5d7d1f Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Sun, 31 Mar 2024 17:25:45 +0800
Subject: [PATCH 10/26] delete redundant code

---
 app/src/components/game/CommandlistPart.vue        |  2 +-
 app/src/components/game/CompleteModal.vue          | 12 ------------
 app/src/components/game/HintPart.vue               |  6 +-----
 app/src/components/header/GameHeaderComponents.vue |  1 -
 4 files changed, 2 insertions(+), 19 deletions(-)

diff --git a/app/src/components/game/CommandlistPart.vue b/app/src/components/game/CommandlistPart.vue
index b9828e3..82bb533 100644
--- a/app/src/components/game/CommandlistPart.vue
+++ b/app/src/components/game/CommandlistPart.vue
@@ -2,6 +2,6 @@
   <font-awesome-icon :icon="['fas', 'list']" class="text-text-primary p-1" />
   <h1 id="CommandBook" class="inline text-text-primary font-xl">指令之書</h1>
   <div id="cheatsheets">
-    <p class="text-text-secondary">--指令列表--</p>
+    <p class="text-text-secondary">-- --指令列表-- --</p>
   </div>
 </template>
diff --git a/app/src/components/game/CompleteModal.vue b/app/src/components/game/CompleteModal.vue
index 68a4ab0..6a6b5a8 100644
--- a/app/src/components/game/CompleteModal.vue
+++ b/app/src/components/game/CompleteModal.vue
@@ -26,7 +26,6 @@ const backtoMap = async () => {
   try {
     router.push({ name: 'map' })
   } catch (err) {
-    // useToast().error('Failed to load map')
     toast.error('無法讀取地圖')
     console.error(err)
   }
@@ -60,17 +59,6 @@ setTimeout(() => {
       <p class="text-base text-text text-center">
         接下來回到地圖，迎接新的挑戰吧！
       </p>
-      <!-- <p class="text-base text-text">
-        您已成功完成挑戰，真的非常感謝您的參與！<br />
-        如果您能撥冗填寫這份問卷，我們將不勝感激，這對我們非常重要！
-      </p> -->
-      <!-- <a
-        id="SurveyButton"
-        :href="surveyUrl"
-        target="_blank"
-        class="inline-flex justify-center rounded-lg text-base font-black py-2 mt-3 bg-text-primary w-full"
-        >填寫問卷</a
-      > -->
       <a
         id="BacktoMap"
         target="_blank"
diff --git a/app/src/components/game/HintPart.vue b/app/src/components/game/HintPart.vue
index b4e889f..864ac7f 100644
--- a/app/src/components/game/HintPart.vue
+++ b/app/src/components/game/HintPart.vue
@@ -27,16 +27,12 @@ const right = () => {
 
 <template>
   <div class="h-full flex flex-col">
-    <!-- Hint Header -->
     <div class="flex items-center p-2 h-10">
       <font-awesome-icon
         :icon="['far', 'lightbulb']"
         class="text-yellow-200 p-2 content-center"
       />
-      <h1 class="inline text-text w-1/2 font-xl p-2 m-1">
-        <!-- Hint -->
-        提示
-      </h1>
+      <h1 class="inline text-text w-1/2 font-xl p-2 m-1">提示</h1>
       <div v-if="current !== -1" class="flex w-full justify-end items-end">
         <button
           class="p-2 m-1 w-1/8"
diff --git a/app/src/components/header/GameHeaderComponents.vue b/app/src/components/header/GameHeaderComponents.vue
index 554f5a3..d15bc12 100644
--- a/app/src/components/header/GameHeaderComponents.vue
+++ b/app/src/components/header/GameHeaderComponents.vue
@@ -21,7 +21,6 @@ const handleLogout = async () => {
     reset()
     router.push({ name: 'login' })
   } catch (err) {
-    // toast.error('Failed to logout')
     toast.error('登出失敗')
     console.error(err)
   }

From aa903fbacf8e02dcc8814a142008115a5a3228e0 Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Sun, 31 Mar 2024 17:36:55 +0800
Subject: [PATCH 11/26] fix file position

---
 app/src/components/game/QuestPart.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/components/game/QuestPart.vue b/app/src/components/game/QuestPart.vue
index 98b366a..b199f9d 100644
--- a/app/src/components/game/QuestPart.vue
+++ b/app/src/components/game/QuestPart.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import MarkdownText from '../MarkdownText.vue'
 import sessionStore from '../../store/session'
-import { Task } from '../types'
+import { Task } from '../../types'
 
 const tasks = computed(() => {
   return sessionStore.session.tasks.map((task: Task) => {

From 1e31cf3be5062f79b41de2db06a63ea7a44b2382 Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Sun, 31 Mar 2024 17:56:09 +0800
Subject: [PATCH 12/26] fix file locations and transfer to ts

---
 app/src/components/game/TreeChart.vue                |  2 +-
 app/src/components/header/GameHeaderComponents.vue   |  3 +--
 .../components/header/LandingHeaderComponents.vue    | 12 ++++++------
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/app/src/components/game/TreeChart.vue b/app/src/components/game/TreeChart.vue
index 19edbbb..0c85c6d 100644
--- a/app/src/components/game/TreeChart.vue
+++ b/app/src/components/game/TreeChart.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import FileNode from '..FileNode.vue'
+import FileNode from '../FileNode.vue'
 import sessionStore from '../../store/session'
 </script>
 
diff --git a/app/src/components/header/GameHeaderComponents.vue b/app/src/components/header/GameHeaderComponents.vue
index d15bc12..9f63d12 100644
--- a/app/src/components/header/GameHeaderComponents.vue
+++ b/app/src/components/header/GameHeaderComponents.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useToast } from 'vue-toastification'
@@ -30,7 +30,6 @@ onMounted(async () => {
   try {
     await loadUserProfile()
   } catch (err) {
-    // toast.error('Failed to load user profile')
     toast.error('無法讀取使用者資料')
   }
 })
diff --git a/app/src/components/header/LandingHeaderComponents.vue b/app/src/components/header/LandingHeaderComponents.vue
index 4151a7c..e29002f 100644
--- a/app/src/components/header/LandingHeaderComponents.vue
+++ b/app/src/components/header/LandingHeaderComponents.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { bugReportUrl } from '../../config'
 
 const scrollToSection = (sectionId) => {
@@ -17,7 +17,7 @@ const scrollToSection = (sectionId) => {
 <template>
   <button
     id="Intro"
-    class="text-text inline-block font-bold whitespace-nowrap pt-1 hover:text-text-primary"
+    class="text-text inline-block font-bold whitespace-nowrap pt-1 px-2 hover:text-text-primary"
     @click="scrollToSection('intro')"
     style="font-size: 2vh"
   >
@@ -25,14 +25,14 @@ const scrollToSection = (sectionId) => {
   </button>
   <button
     id="Feature"
-    class="text-text inline-block font-bold whitespace-nowrap pt-1 hover:text-text-primary"
+    class="text-text inline-block font-bold whitespace-nowrap pt-1 px-2 hover:text-text-primary"
     @click="scrollToSection('feature')"
     style="font-size: 2vh"
   >
     特色</button
   ><button
     id="Info"
-    class="text-text inline-block font-bold whitespace-nowrap pt-1 hover:text-text-primary"
+    class="text-text inline-block font-bold whitespace-nowrap pt-1 px-2 hover:text-text-primary"
     @click="scrollToSection('about')"
     style="font-size: 2vh"
   >
@@ -41,7 +41,7 @@ const scrollToSection = (sectionId) => {
 
   <button
     id="Contact"
-    class="text-text inline-block font-bold whitespace-nowrap pt-1 hover:text-text-primary"
+    class="text-text inline-block font-bold whitespace-nowrap pt-1 px-2 hover:text-text-primary"
     @click="scrollToSection('contact')"
     style="font-size: 2vh"
   >
@@ -51,7 +51,7 @@ const scrollToSection = (sectionId) => {
     title="Sign In"
     id="SignIn"
     to="/register"
-    class="text-text inline-block font-bold whitespace-nowrap pt-1 hover:text-text-primary"
+    class="text-text inline-block font-bold whitespace-nowrap pt-1 px-2 hover:text-text-primary"
     style="font-size: 2vh"
   >
     登入

From 7806852cab64b123294aca35f9aad0eea8a90e18 Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Fri, 5 Apr 2024 21:54:39 +0800
Subject: [PATCH 13/26] fix hint display problems

---
 app/src/components/game/HintPart.vue | 4 +++-
 app/src/types.ts                     | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/src/components/game/HintPart.vue b/app/src/components/game/HintPart.vue
index 864ac7f..0adefce 100644
--- a/app/src/components/game/HintPart.vue
+++ b/app/src/components/game/HintPart.vue
@@ -65,7 +65,8 @@ const right = () => {
       <ul>
         <li
           v-for="response in sessionStore.session.responses[current]"
-          :key="response.type"
+          :key="response"
+          id="content"
           class="text-text font-xl whitespace-pre-wrap"
         >
           <div v-for="content in response.content" :key="content">
@@ -75,6 +76,7 @@ const right = () => {
         <li
           v-for="hint in sessionStore.session.hints[current]"
           :key="hint"
+          id="hint-text"
           class="text-text-primary font-xl whitespace-pre-wrap"
         >
           <MarkdownText :content="hint" />
diff --git a/app/src/types.ts b/app/src/types.ts
index e814aea..e19eb19 100644
--- a/app/src/types.ts
+++ b/app/src/types.ts
@@ -10,9 +10,9 @@ export interface Task {
 
 export interface StageResponse {
   status: string
-  hints: string[]
+  hints: string
   tasks: Task[]
-  responses: IResponse[]
+  responses: IResponse
 }
 
 export interface Session {

From 092cf284dd6293f5353f0fae54d442e46a76649e Mon Sep 17 00:00:00 2001
From: wancat <wancat@wancat.cc>
Date: Fri, 5 Apr 2024 22:03:49 +0800
Subject: [PATCH 14/26] fix: session store type

---
 app/src/components/game/HintPart.vue | 2 +-
 app/src/types.ts                     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/src/components/game/HintPart.vue b/app/src/components/game/HintPart.vue
index 0adefce..ce0d3e0 100644
--- a/app/src/components/game/HintPart.vue
+++ b/app/src/components/game/HintPart.vue
@@ -65,7 +65,7 @@ const right = () => {
       <ul>
         <li
           v-for="response in sessionStore.session.responses[current]"
-          :key="response"
+          :key="response.type"
           id="content"
           class="text-text font-xl whitespace-pre-wrap"
         >
diff --git a/app/src/types.ts b/app/src/types.ts
index e19eb19..e814aea 100644
--- a/app/src/types.ts
+++ b/app/src/types.ts
@@ -10,9 +10,9 @@ export interface Task {
 
 export interface StageResponse {
   status: string
-  hints: string
+  hints: string[]
   tasks: Task[]
-  responses: IResponse
+  responses: IResponse[]
 }
 
 export interface Session {

From 385c6bc1100421744034ae2e88f25cc73d08115d Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Fri, 5 Apr 2024 22:09:06 +0800
Subject: [PATCH 15/26] delete testing id

---
 app/src/components/game/HintPart.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/src/components/game/HintPart.vue b/app/src/components/game/HintPart.vue
index ce0d3e0..864ac7f 100644
--- a/app/src/components/game/HintPart.vue
+++ b/app/src/components/game/HintPart.vue
@@ -66,7 +66,6 @@ const right = () => {
         <li
           v-for="response in sessionStore.session.responses[current]"
           :key="response.type"
-          id="content"
           class="text-text font-xl whitespace-pre-wrap"
         >
           <div v-for="content in response.content" :key="content">
@@ -76,7 +75,6 @@ const right = () => {
         <li
           v-for="hint in sessionStore.session.hints[current]"
           :key="hint"
-          id="hint-text"
           class="text-text-primary font-xl whitespace-pre-wrap"
         >
           <MarkdownText :content="hint" />

From 8e7b5f2552bb0fe2f01e7f19fa3a8461e3a6917e Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Fri, 5 Apr 2024 22:59:44 +0800
Subject: [PATCH 16/26] modify menu position while open

---
 app/src/components/header/HeaderPart.vue | 26 +++++++++++++-----------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/app/src/components/header/HeaderPart.vue b/app/src/components/header/HeaderPart.vue
index c7528f2..5648bd8 100644
--- a/app/src/components/header/HeaderPart.vue
+++ b/app/src/components/header/HeaderPart.vue
@@ -43,17 +43,19 @@ const toggleMenu = () => {
     >
       <component :is="headerComponent" />
     </div>
-    <button
-      type="button"
-      class="flex items-center h-5 w-5 rounded-md sm:hidden"
-      aria-controls="mobile-menu"
-      aria-expanded="false"
-      @click="toggleMenu"
-    >
-      <font-awesome-icon
-        :icon="['fas', 'bars']"
-        class="text-text-primary h-full w-full"
-      />
-    </button>
+    <div :class="{ 'w-full flex justify-end pb-3': menuOpen }">
+      <button
+        type="button"
+        class="flex items-center h-5 w-5 rounded-md sm:hidden"
+        aria-controls="mobile-menu"
+        aria-expanded="false"
+        @click="toggleMenu"
+      >
+        <font-awesome-icon
+          :icon="['fas', 'bars']"
+          class="text-text-primary h-full w-full"
+        />
+      </button>
+    </div>
   </div>
 </template>

From cd2ec6df7578a5242edca78b3855ebc96ee87138 Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Fri, 5 Apr 2024 21:54:39 +0800
Subject: [PATCH 17/26] fix hint display problems

---
 app/src/types.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/src/types.ts b/app/src/types.ts
index e814aea..e19eb19 100644
--- a/app/src/types.ts
+++ b/app/src/types.ts
@@ -10,9 +10,9 @@ export interface Task {
 
 export interface StageResponse {
   status: string
-  hints: string[]
+  hints: string
   tasks: Task[]
-  responses: IResponse[]
+  responses: IResponse
 }
 
 export interface Session {

From 9f690548cf6d73faf2c64ee6f4d28cad3ecf3e07 Mon Sep 17 00:00:00 2001
From: wancat <wancat@wancat.cc>
Date: Fri, 5 Apr 2024 22:03:49 +0800
Subject: [PATCH 18/26] fix: session store type

---
 app/src/types.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/src/types.ts b/app/src/types.ts
index e19eb19..e814aea 100644
--- a/app/src/types.ts
+++ b/app/src/types.ts
@@ -10,9 +10,9 @@ export interface Task {
 
 export interface StageResponse {
   status: string
-  hints: string
+  hints: string[]
   tasks: Task[]
-  responses: IResponse
+  responses: IResponse[]
 }
 
 export interface Session {

From 3e3ac58c6be2a33d55e2c93a3ebce2f6d0580c2c Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Tue, 5 Mar 2024 23:00:13 +0800
Subject: [PATCH 19/26] Restruct heading

---
 app/src/components/GameHeaderComponents.vue   | 95 +++++++++++++++++++
 app/src/components/HeaderPart.vue             | 41 ++++++++
 .../components/LandingHeaderComponents.vue    | 63 ++++++++++++
 3 files changed, 199 insertions(+)
 create mode 100644 app/src/components/GameHeaderComponents.vue
 create mode 100644 app/src/components/HeaderPart.vue
 create mode 100644 app/src/components/LandingHeaderComponents.vue

diff --git a/app/src/components/GameHeaderComponents.vue b/app/src/components/GameHeaderComponents.vue
new file mode 100644
index 0000000..7cc0898
--- /dev/null
+++ b/app/src/components/GameHeaderComponents.vue
@@ -0,0 +1,95 @@
+<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>
diff --git a/app/src/components/HeaderPart.vue b/app/src/components/HeaderPart.vue
new file mode 100644
index 0000000..13c54cf
--- /dev/null
+++ b/app/src/components/HeaderPart.vue
@@ -0,0 +1,41 @@
+<script setup>
+import { defineProps } from 'vue'
+
+defineProps({
+  title: {
+    type: String,
+    required: false,
+  },
+  headerComponent: {
+    type: Object,
+    required: true,
+  },
+})
+</script>
+<template>
+  <div
+    id="header"
+    class="w-full h-[6vh] px-5 flex flex-row items-center justify-between bg-bg-secondary"
+  >
+    <div class="flex flex-row items-center gap-3">
+      <img src="../img/icon_totem.svg" class="h-8 justify-self-start" />
+      <button
+        id="GameTitle"
+        class="text-text-primary inline-block font-bold whitespace-nowrap pt-1"
+        style="font-size: 2vh"
+      >
+        Linux Odyssey
+      </button>
+      <p
+        id="QuestTitle"
+        class="text-text inline-block font-bold whitespace-nowrap"
+        style="font-size: 2vh"
+      >
+        {{ title }}
+      </p>
+    </div>
+    <div class="h-full w-full flex gap-3 items-center justify-end">
+      <component :is="headerComponent" />
+    </div>
+  </div>
+</template>
diff --git a/app/src/components/LandingHeaderComponents.vue b/app/src/components/LandingHeaderComponents.vue
new file mode 100644
index 0000000..146b209
--- /dev/null
+++ b/app/src/components/LandingHeaderComponents.vue
@@ -0,0 +1,63 @@
+<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>

From 0e96e30b96f368d7f0bc07abe075adeb97a9eb25 Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Tue, 5 Mar 2024 19:43:29 +0800
Subject: [PATCH 20/26] categorise components

---
 app/src/components/GameHeaderComponents.vue   | 95 -------------------
 app/src/components/HeaderPart.vue             | 41 --------
 .../components/LandingHeaderComponents.vue    | 63 ------------
 .../header/GameHeaderComponents.vue           | 95 +++++++++++++++++++
 app/src/components/header/HeaderPart.vue      | 41 ++++++++
 .../header/LandingHeaderComponents.vue        | 63 ++++++++++++
 6 files changed, 199 insertions(+), 199 deletions(-)
 delete mode 100644 app/src/components/GameHeaderComponents.vue
 delete mode 100644 app/src/components/HeaderPart.vue
 delete mode 100644 app/src/components/LandingHeaderComponents.vue

diff --git a/app/src/components/GameHeaderComponents.vue b/app/src/components/GameHeaderComponents.vue
deleted file mode 100644
index 7cc0898..0000000
--- a/app/src/components/GameHeaderComponents.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<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>
diff --git a/app/src/components/HeaderPart.vue b/app/src/components/HeaderPart.vue
deleted file mode 100644
index 13c54cf..0000000
--- a/app/src/components/HeaderPart.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script setup>
-import { defineProps } from 'vue'
-
-defineProps({
-  title: {
-    type: String,
-    required: false,
-  },
-  headerComponent: {
-    type: Object,
-    required: true,
-  },
-})
-</script>
-<template>
-  <div
-    id="header"
-    class="w-full h-[6vh] px-5 flex flex-row items-center justify-between bg-bg-secondary"
-  >
-    <div class="flex flex-row items-center gap-3">
-      <img src="../img/icon_totem.svg" class="h-8 justify-self-start" />
-      <button
-        id="GameTitle"
-        class="text-text-primary inline-block font-bold whitespace-nowrap pt-1"
-        style="font-size: 2vh"
-      >
-        Linux Odyssey
-      </button>
-      <p
-        id="QuestTitle"
-        class="text-text inline-block font-bold whitespace-nowrap"
-        style="font-size: 2vh"
-      >
-        {{ title }}
-      </p>
-    </div>
-    <div class="h-full w-full flex gap-3 items-center justify-end">
-      <component :is="headerComponent" />
-    </div>
-  </div>
-</template>
diff --git a/app/src/components/LandingHeaderComponents.vue b/app/src/components/LandingHeaderComponents.vue
deleted file mode 100644
index 146b209..0000000
--- a/app/src/components/LandingHeaderComponents.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<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>
diff --git a/app/src/components/header/GameHeaderComponents.vue b/app/src/components/header/GameHeaderComponents.vue
index 9f63d12..4e84e55 100644
--- a/app/src/components/header/GameHeaderComponents.vue
+++ b/app/src/components/header/GameHeaderComponents.vue
@@ -105,3 +105,98 @@ 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>
diff --git a/app/src/components/header/HeaderPart.vue b/app/src/components/header/HeaderPart.vue
index 5648bd8..0630f51 100644
--- a/app/src/components/header/HeaderPart.vue
+++ b/app/src/components/header/HeaderPart.vue
@@ -59,3 +59,44 @@ const toggleMenu = () => {
     </div>
   </div>
 </template>
+<script setup>
+import { defineProps } from 'vue'
+
+defineProps({
+  title: {
+    type: String,
+    required: false,
+  },
+  headerComponent: {
+    type: Object,
+    required: true,
+  },
+})
+</script>
+<template>
+  <div
+    id="header"
+    class="w-full h-[6vh] px-5 flex flex-row items-center justify-between bg-bg-secondary"
+  >
+    <div class="flex flex-row items-center gap-3">
+      <img src="../img/icon_totem.svg" class="h-8 justify-self-start" />
+      <button
+        id="GameTitle"
+        class="text-text-primary inline-block font-bold whitespace-nowrap pt-1"
+        style="font-size: 2vh"
+      >
+        Linux Odyssey
+      </button>
+      <p
+        id="QuestTitle"
+        class="text-text inline-block font-bold whitespace-nowrap"
+        style="font-size: 2vh"
+      >
+        {{ title }}
+      </p>
+    </div>
+    <div class="h-full w-full flex gap-3 items-center justify-end">
+      <component :is="headerComponent" />
+    </div>
+  </div>
+</template>
diff --git a/app/src/components/header/LandingHeaderComponents.vue b/app/src/components/header/LandingHeaderComponents.vue
index e29002f..9331cc7 100644
--- a/app/src/components/header/LandingHeaderComponents.vue
+++ b/app/src/components/header/LandingHeaderComponents.vue
@@ -60,3 +60,66 @@ 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>

From b4af2d46d3694fa27b343055448c25b6c9de804b Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Fri, 5 Apr 2024 21:54:39 +0800
Subject: [PATCH 21/26] fix hint display problems

---
 app/src/components/game/HintPart.vue | 4 +++-
 app/src/types.ts                     | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/src/components/game/HintPart.vue b/app/src/components/game/HintPart.vue
index 864ac7f..0adefce 100644
--- a/app/src/components/game/HintPart.vue
+++ b/app/src/components/game/HintPart.vue
@@ -65,7 +65,8 @@ const right = () => {
       <ul>
         <li
           v-for="response in sessionStore.session.responses[current]"
-          :key="response.type"
+          :key="response"
+          id="content"
           class="text-text font-xl whitespace-pre-wrap"
         >
           <div v-for="content in response.content" :key="content">
@@ -75,6 +76,7 @@ const right = () => {
         <li
           v-for="hint in sessionStore.session.hints[current]"
           :key="hint"
+          id="hint-text"
           class="text-text-primary font-xl whitespace-pre-wrap"
         >
           <MarkdownText :content="hint" />
diff --git a/app/src/types.ts b/app/src/types.ts
index e814aea..e19eb19 100644
--- a/app/src/types.ts
+++ b/app/src/types.ts
@@ -10,9 +10,9 @@ export interface Task {
 
 export interface StageResponse {
   status: string
-  hints: string[]
+  hints: string
   tasks: Task[]
-  responses: IResponse[]
+  responses: IResponse
 }
 
 export interface Session {

From 3b470ed95288178f29792266253df639b9313e94 Mon Sep 17 00:00:00 2001
From: wancat <wancat@wancat.cc>
Date: Fri, 5 Apr 2024 22:03:49 +0800
Subject: [PATCH 22/26] fix: session store type

---
 app/src/components/game/HintPart.vue | 2 +-
 app/src/types.ts                     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/src/components/game/HintPart.vue b/app/src/components/game/HintPart.vue
index 0adefce..ce0d3e0 100644
--- a/app/src/components/game/HintPart.vue
+++ b/app/src/components/game/HintPart.vue
@@ -65,7 +65,7 @@ const right = () => {
       <ul>
         <li
           v-for="response in sessionStore.session.responses[current]"
-          :key="response"
+          :key="response.type"
           id="content"
           class="text-text font-xl whitespace-pre-wrap"
         >
diff --git a/app/src/types.ts b/app/src/types.ts
index e19eb19..e814aea 100644
--- a/app/src/types.ts
+++ b/app/src/types.ts
@@ -10,9 +10,9 @@ export interface Task {
 
 export interface StageResponse {
   status: string
-  hints: string
+  hints: string[]
   tasks: Task[]
-  responses: IResponse
+  responses: IResponse[]
 }
 
 export interface Session {

From 453bfb7f1e386c96f545726d56f65cf3d9b07aa6 Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Sat, 6 Apr 2024 21:50:14 +0800
Subject: [PATCH 23/26] delete redundant code

---
 app/src/components/header/HeaderPart.vue | 41 ------------------------
 1 file changed, 41 deletions(-)

diff --git a/app/src/components/header/HeaderPart.vue b/app/src/components/header/HeaderPart.vue
index 0630f51..5648bd8 100644
--- a/app/src/components/header/HeaderPart.vue
+++ b/app/src/components/header/HeaderPart.vue
@@ -59,44 +59,3 @@ const toggleMenu = () => {
     </div>
   </div>
 </template>
-<script setup>
-import { defineProps } from 'vue'
-
-defineProps({
-  title: {
-    type: String,
-    required: false,
-  },
-  headerComponent: {
-    type: Object,
-    required: true,
-  },
-})
-</script>
-<template>
-  <div
-    id="header"
-    class="w-full h-[6vh] px-5 flex flex-row items-center justify-between bg-bg-secondary"
-  >
-    <div class="flex flex-row items-center gap-3">
-      <img src="../img/icon_totem.svg" class="h-8 justify-self-start" />
-      <button
-        id="GameTitle"
-        class="text-text-primary inline-block font-bold whitespace-nowrap pt-1"
-        style="font-size: 2vh"
-      >
-        Linux Odyssey
-      </button>
-      <p
-        id="QuestTitle"
-        class="text-text inline-block font-bold whitespace-nowrap"
-        style="font-size: 2vh"
-      >
-        {{ title }}
-      </p>
-    </div>
-    <div class="h-full w-full flex gap-3 items-center justify-end">
-      <component :is="headerComponent" />
-    </div>
-  </div>
-</template>

From bdf757c2d4a242da8df87f560a58d18bc60727f2 Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Sun, 7 Apr 2024 20:40:44 +0800
Subject: [PATCH 24/26] fix: header components in the middle

---
 app/src/components/header/HeaderPart.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/src/components/header/HeaderPart.vue b/app/src/components/header/HeaderPart.vue
index 5648bd8..34a4e9f 100644
--- a/app/src/components/header/HeaderPart.vue
+++ b/app/src/components/header/HeaderPart.vue
@@ -12,6 +12,7 @@ defineProps({
   },
 })
 const menuOpen = ref(false)
+const windowWidth = window.innerWidth < 768
 const toggleMenu = () => {
   menuOpen.value = !menuOpen.value
 }
@@ -38,12 +39,15 @@ const toggleMenu = () => {
       </p>
     </div>
     <div
-      class="w-full flex flex-col gap-3 items-center justify-end sm:w-auto sm:block sm:ml-6"
+      class="w-full flex flex-col items-center justify-end sm:w-auto sm:block sm:ml-6"
       :class="{ hidden: !menuOpen }"
     >
       <component :is="headerComponent" />
     </div>
-    <div :class="{ 'w-full flex justify-end pb-3': menuOpen }">
+    <div
+      v-if="windowWidth"
+      :class="{ 'w-full flex justify-end pb-3': menuOpen }"
+    >
       <button
         type="button"
         class="flex items-center h-5 w-5 rounded-md sm:hidden"

From 5f99f42f5fe2f196683717a5fac3c7223b04fb55 Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Sun, 7 Apr 2024 20:41:17 +0800
Subject: [PATCH 25/26] fix type problems

---
 .../header/GameHeaderComponents.vue           | 96 +------------------
 .../header/LandingHeaderComponents.vue        | 67 +------------
 app/src/views/LeaderboardPage.vue             |  2 +-
 app/src/views/QuestMapPage.vue                |  2 +-
 4 files changed, 5 insertions(+), 162 deletions(-)

diff --git a/app/src/components/header/GameHeaderComponents.vue b/app/src/components/header/GameHeaderComponents.vue
index 4e84e55..e69e758 100644
--- a/app/src/components/header/GameHeaderComponents.vue
+++ b/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>
diff --git a/app/src/components/header/LandingHeaderComponents.vue b/app/src/components/header/LandingHeaderComponents.vue
index 9331cc7..f933b4c 100644
--- a/app/src/components/header/LandingHeaderComponents.vue
+++ b/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>
diff --git a/app/src/views/LeaderboardPage.vue b/app/src/views/LeaderboardPage.vue
index 6225861..13479d0 100644
--- a/app/src/views/LeaderboardPage.vue
+++ b/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
diff --git a/app/src/views/QuestMapPage.vue b/app/src/views/QuestMapPage.vue
index 793c79b..ee910e8 100644
--- a/app/src/views/QuestMapPage.vue
+++ b/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"
     />

From d8392ec3f64f1dbaafe62eebc3215603a2c6a4b3 Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Sun, 7 Apr 2024 23:44:41 +0800
Subject: [PATCH 26/26] delete redundant code

---
 app/src/components/game/HintPart.vue | 2 --
 app/src/views/QuestMapPage.vue       | 9 +--------
 2 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/app/src/components/game/HintPart.vue b/app/src/components/game/HintPart.vue
index ce0d3e0..864ac7f 100644
--- a/app/src/components/game/HintPart.vue
+++ b/app/src/components/game/HintPart.vue
@@ -66,7 +66,6 @@ const right = () => {
         <li
           v-for="response in sessionStore.session.responses[current]"
           :key="response.type"
-          id="content"
           class="text-text font-xl whitespace-pre-wrap"
         >
           <div v-for="content in response.content" :key="content">
@@ -76,7 +75,6 @@ const right = () => {
         <li
           v-for="hint in sessionStore.session.hints[current]"
           :key="hint"
-          id="hint-text"
           class="text-text-primary font-xl whitespace-pre-wrap"
         >
           <MarkdownText :content="hint" />
diff --git a/app/src/views/QuestMapPage.vue b/app/src/views/QuestMapPage.vue
index ee910e8..cadced9 100644
--- a/app/src/views/QuestMapPage.vue
+++ b/app/src/views/QuestMapPage.vue
@@ -12,14 +12,7 @@ import GameHeaderComponents from '../components/header/GameHeaderComponents.vue'
       class="z-50"
     />
   </div>
-  <!-- <p
-      class="text-text-primary absolute z-1 font-bold inline-block tracking-widest"
-      style="left: 1.2%; top: 1.5%; height: 100%; font-size: 2vh"
-    >
-      Quest Map
-      Unix編年史
-    </p> -->
-  <div class="flex flex-col justify-center items-center w-full h-full mt-8">
+  <div class="flex flex-col justify-center items-center w-full h-[94vh]">
     <QuestMap />
   </div>
 </template>