Restruct heading

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>

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>

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>

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

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>
-            </section>
-          </div>
-          <section
-            v-if="!isMobile"
-            id="info"
-            class="text-text p-10 grid grid-cols-3 gap-5 justify-items-center"
+              <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 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"
+                    class="text-text-primary text-3xl font-extrabold font-mono sm:col-span-3 gap-6"
                   >
                     玩家感想
                   </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 class="text-xl text-center">"很好玩很像益智遊戲"</h1>
+                  <h1 class="text-xl text-center">
                     "我從來不知道自由軟體的存在，謝謝你們。"
                   </h1>
-            <h1 class="text-text p-3" style="font-size: 2.5vh">
+                  <h1 class="text-xl text-center">
                     "還蠻好玩的，讓程式變好玩"
                   </h1>
-            <h1 class="text-text p-3" style="font-size: 2.5vh">
+                  <h1 class="text-xl text-center">
                     "以前不喜歡電腦課現在覺得喜歡一點點"
                   </h1>
-            <h1 class="text-text p-3" style="font-size: 2.5vh">
+                  <h1 class="text-xl text-center">
                     "程式真的對新手很友善，讓我學到了很多東西"
                   </h1>
-            <h1 class="text-text p-3" style="font-size: 2.5vh">
+                  <h1 class="text-xl text-center">
                     "感覺做得很好很簡明易懂關卡設計很用心"
                   </h1>
-            <h1 class="text-text p-3" style="font-size: 2.5vh">
+                  <h1 class="text-xl text-center">
                     "這個體驗我覺得非常有趣，可以體驗到沒辦法體驗的程式，學長也都熱心指導，非常感謝學長的用心的講解，希望以後還可以再體驗這種活動"
                   </h1>
-            <h1 class="text-text p-3" style="font-size: 2.5vh">
+                  <h1 class="text-xl text-center">
                     "以前我覺得寫程式很難不過現在覺得很有趣"
                   </h1>
-            <h1 class="text-text p-3" style="font-size: 2.5vh">
+                  <h1 class="text-xl text-center">
                     "以前覺得寫程式是我生活中碰不到而且很難的項目。但通過這堂課之後，覺得寫程式不再那麼難以親近"
                   </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>
+          </div>
           <section
             id="contact"
             class="text-text mt-10 flex flex-col items-center"

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

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 />