update

app/src/components/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>

app/src/components/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()
@@ -26,6 +26,7 @@ const backtoMap = async () => {
   try {
     router.push({ name: 'map' })
   } catch (err) {
+    // useToast().error('Failed to load map')
     toast.error('無法讀取地圖')
     console.error(err)
   }
@@ -59,6 +60,17 @@ 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"

app/src/components/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 { createSession } from '../store/session'
-import { surveyUrl } from '../../config'
+import { surveyUrl } from '../config'
 
 const router = useRouter()
 const reset = async () => {
@@ -20,31 +20,29 @@ const continuePlay = async () => {
 </script>
 
 <template>
-  <section
+  <section class="h-[10%] p-3 grid grid-cols-4 gap-4 place-content-between">
-    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 px-1"
+          class="text-text-primary"
         />
-        <p class="text-text-primary inline ml-1 hidden md:flex">問卷</p>
+        <p class="text-text-primary inline ml-1">問卷</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 px-1"
+        class="text-text-disabled"
       />
-      <p class="text-text-disabled inline ml-1 hidden md:flex">解答</p>
+      <p class="text-text-disabled inline ml-1">解答</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 px-1"
+        class="text-text-primary"
       />
-      <p class="text-text-primary inline ml-1 hidden md:flex">重來</p>
+      <p class="text-text-primary inline ml-1">重來</p>
     </button>
     <button
       id="continue"
@@ -53,9 +51,9 @@ const continuePlay = async () => {
     >
       <font-awesome-icon
         :icon="['far', 'circle-right']"
-        class="text-text-primary px-1"
+        class="text-text-primary"
       />
-      <p class="text-text-primary inline ml-1 hidden md:flex">繼續</p>
+      <p class="text-text-primary inline ml-1">繼續</p>
     </button>
   </section>
 </template>

app/src/components/HintPart.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
-import sessionStore from '../../store/session'
+import sessionStore from '../store/session'
-import MarkdownText from '../MarkdownText.vue'
+import MarkdownText from './MarkdownText.vue'
 
 const current = ref(-1)
 watch(
@@ -27,12 +27,16 @@ 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">提示</h1>
+      <h1 class="inline text-text w-1/2 font-xl p-2 m-1">
+        <!-- Hint -->
+        提示
+      </h1>
       <div v-if="current !== -1" class="flex w-full justify-end items-end">
         <button
           class="p-2 m-1 w-1/8"

app/src/components/QuestMap.vue

@@ -177,7 +177,7 @@ onMounted(async () => {
       class="p-2 stroke-2 scale-y-120 justify-center items-center"
     />
     <h1
-      class="p-10 absolute w-fit z-2 font-mono flex flax-wrap text-xl"
+      class="p-4 absolute w-fit z-2 font-mono flex flax-wrap text-xl"
       style="width: 30%; height: 6%; font-size: 3vh; color: #00ff00"
     >
       踏上你的Linux冒險之旅吧！

app/src/components/QuestPart.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import MarkdownText from '../MarkdownText.vue'
+import MarkdownText from './MarkdownText.vue'
-import sessionStore from '../../store/session'
+import sessionStore from '../store/session'
-import { Task } from '../../types'
+import { Task } from '../types'
 
 const tasks = computed(() => {
   return sessionStore.session.tasks.map((task: Task) => {

app/src/components/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)
 

app/src/components/TreeChart.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import FileNode from '../FileNode.vue'
+import FileNode from './FileNode.vue'
-import sessionStore from '../../store/session'
+import sessionStore from '../store/session'
 </script>
 
 <template>

app/src/components/header/GameHeaderComponents.vue

@@ -1,108 +0,0 @@
-<script setup lang="ts">
-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('登出失敗')
-    console.error(err)
-  }
-}
-
-onMounted(async () => {
-  try {
-    await loadUserProfile()
-  } catch (err) {
-    toast.error('無法讀取使用者資料')
-    console.error(err)
-  }
-})
-</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 px-1.5"
-    style="font-size: 2vh"
-  >
-    {{ userProfileStore.username }}
-  </p>
-  <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 inline"
-    />
-    <span class="text-text sm:hidden px-2">Survey</span>
-  </a>
-  <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="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="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="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>

app/src/components/header/HeaderPart.vue

@@ -1,66 +0,0 @@
-<script setup lang="ts">
-import { defineProps, ref } from 'vue'
-
-defineProps({
-  title: {
-    type: String,
-    required: false,
-  },
-  headerComponent: {
-    type: Object,
-    required: false,
-  },
-})
-const menuOpen = ref(false)
-const windowWidth = window.innerWidth < 768
-const toggleMenu = () => {
-  menuOpen.value = !menuOpen.value
-}
-</script>
-<template>
-  <div
-    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" />
-      <RouterLink
-        to="/"
-        id="GameTitle"
-        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
-      </RouterLink>
-      <p
-        id="QuestTitle"
-        class="text-text inline-block font-bold whitespace-nowrap"
-        style="font-size: 2vh"
-      >
-        {{ title }}
-      </p>
-    </div>
-    <div
-      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
-      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"
-        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>

app/src/components/header/LandingHeaderComponents.vue

@@ -1,62 +0,0 @@
-<script setup lang="ts">
-import { bugReportUrl } from '../../config'
-
-const scrollToSection = (sectionId: string) => {
-  const section = document.getElementById(sectionId)
-  if (section) {
-    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,
-        behavior: 'smooth', // Add smooth scrolling behavior if desired
-      })
-    }
-  }
-}
-</script>
-<template>
-  <button
-    id="Intro"
-    class="text-text inline-block font-bold whitespace-nowrap pt-1 px-2 hover:text-text-primary"
-    @click="scrollToSection('intro')"
-    style="font-size: 2vh"
-  >
-    前言
-  </button>
-  <button
-    id="Feature"
-    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 px-2 hover:text-text-primary"
-    @click="scrollToSection('about')"
-    style="font-size: 2vh"
-  >
-    關於
-  </button>
-
-  <button
-    id="Contact"
-    class="text-text inline-block font-bold whitespace-nowrap pt-1 px-2 hover:text-text-primary"
-    @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 px-2 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" />
-  </a>
-</template>

app/src/views/GamePage.vue

@@ -2,15 +2,14 @@
 import { computed, onMounted } from 'vue'
 import { useToast } from 'vue-toastification'
 import sessionStore, { init } from '../store/session'
-import HeaderPart from '../components/header/HeaderPart.vue'
+import GameHeaderPart from '../components/GameHeaderPart.vue'
-import GameHeaderComponents from '../components/header/GameHeaderComponents.vue'
 // import CommandlistPart from '../components/CommandlistPart.vue'
-import HintPart from '../components/game/HintPart.vue'
+import HintPart from '../components/HintPart.vue'
-import QuestPart from '../components/game/QuestPart.vue'
+import QuestPart from '../components/QuestPart.vue'
-import TerminalPart from '../components/game/TerminalPart.vue'
+import TerminalPart from '../components/TerminalPart.vue'
-import VisualizationPart from '../components/game/VisualizationPart.vue'
+import VisualizationPart from '../components/VisualizationPart.vue'
-import ControlPalette from '../components/game/ControlPalette.vue'
+import ControlPalette from '../components/ControlPalette.vue'
-import CompleteModal from '../components/game/CompleteModal.vue'
+import CompleteModal from '../components/CompleteModal.vue'
 import { LoadQuestError, LoadSessionError } from '../utils/errors'
 
 const completed = computed(() => {
@@ -46,11 +45,8 @@ onMounted(async () => {
 
 <template>
   <!-- game header -->
-  <div class="w-full">
+  <div class="h-[6vh] w-full">
-    <HeaderPart
+    <GameHeaderPart :title="sessionStore.quest?.title" />
-      :title="sessionStore.quest?.title"
-      :headerComponent="GameHeaderComponents"
-    />
   </div>
   <!-- current status indicator -->
   <input
@@ -59,7 +55,7 @@ onMounted(async () => {
     :value="sessionStore.session.status"
   />
   <!-- main -->
-  <div id="main" class="h-full pt-10 w-full flex p-3 space-x-3">
+  <div id="main" class="h-[94vh] 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">
@@ -71,7 +67,7 @@ onMounted(async () => {
       </section> -->
     </div>
     <!-- Terminal and Hint -->
-    <div class="bg-bg h-full rounded-lg w-1/2">
+    <div class="bg-bg h-full w-1/2 rounded-lg">
       <section id="hint" class="h-3/5">
         <HintPart />
       </section>

app/src/views/LandingPage.vue

@@ -1,19 +1,97 @@
 <script setup lang="ts">
 import ContactButton from '../components/ContactButton.vue'
 import DynamicBackground from '../components/DynamicBackground.vue'
-import LandingHeaderComponents from '../components/header/LandingHeaderComponents.vue'
+import { bugReportUrl, facebookUrl, githubUrl } from '../config'
-import HeaderPart from '../components/header/HeaderPart.vue'
 
-import { facebookUrl, githubUrl } from '../config'
+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
+      })
+    }
+  }
+}
 </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 -->
-      <HeaderPart :headerComponent="LandingHeaderComponents" class="z-50" />
+      <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>
+
       <!-- main content -->
-      <main class="w-full h-full overflow-y-auto">
+      <main class="w-full h-[94vh] 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,6 +104,7 @@ import { facebookUrl, githubUrl } from '../config'
               Odyssey
             </h1>
           </div>
+
           <!-- intro -->
           <div class="w-full md:w-2/3 px-5">
             <section
@@ -149,43 +228,40 @@ import { facebookUrl, githubUrl } from '../config'
                   鈦坦敏捷開發特別獎 第二名
                 </h1>
               </div>
-              <div class="container mx-auto">
+
-                <div
+              <!-- <h1
-                  class="justify-items-center grid grid-cols-1 sm:grid-cols-3 gap-5"
+                class="text-text-primary p-5 font-extrabold font-mono col-span-3 gap-3"
-                >
+                style="font-size: 3.5vh"
-                  <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-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>
-                  <h1 class="text-xl text-center">
+              <h1 class="text-text p-3" style="font-size: 2.5vh">
                 "還蠻好玩的，讓程式變好玩"
               </h1>
-                  <h1 class="text-xl text-center">
+              <h1 class="text-text p-3" style="font-size: 2.5vh">
                 "以前不喜歡電腦課現在覺得喜歡一點點"
               </h1>
-                  <h1 class="text-xl text-center">
+              <h1 class="text-text p-3" style="font-size: 2.5vh">
                 "程式真的對新手很友善，讓我學到了很多東西"
               </h1>
-                  <h1 class="text-xl text-center">
+              <h1 class="text-text p-3" style="font-size: 2.5vh">
                 "感覺做得很好很簡明易懂關卡設計很用心"
               </h1>
-                  <h1 class="text-xl text-center">
+              <h1 class="text-text p-3" style="font-size: 2.5vh">
                 "這個體驗我覺得非常有趣，可以體驗到沒辦法體驗的程式，學長也都熱心指導，非常感謝學長的用心的講解，希望以後還可以再體驗這種活動"
               </h1>
-                  <h1 class="text-xl text-center">
+              <h1 class="text-text p-3" style="font-size: 2.5vh">
                 "以前我覺得寫程式很難不過現在覺得很有趣"
               </h1>
-                  <h1 class="text-xl text-center">
+              <h1 class="text-text p-3" style="font-size: 2.5vh">
                 "以前覺得寫程式是我生活中碰不到而且很難的項目。但通過這堂課之後，覺得寫程式不再那麼難以親近"
-                  </h1>
+              </h1> -->
-                </div>
-              </div>
             </section>
           </div>
           <section
@@ -195,9 +271,7 @@ import { facebookUrl, githubUrl } from '../config'
             <h1 class="text-text-primary font-extrabold font-mono text-3xl">
               聯絡我們
             </h1>
-            <div
+            <div class="flex flex-row items-center justify-around mt-5 gap-5">
-              class="flex flex-row items-center justify-around mt-5 gap-5 mb-5"
-            >
               <ContactButton
                 :url="facebookUrl"
                 :icons="['fab', 'facebook']"

app/src/views/LeaderboardPage.vue

@@ -2,8 +2,7 @@
 import { ref, onMounted } from 'vue'
 import { useToast } from 'vue-toastification'
 import DynamicBackground from '../components/DynamicBackground.vue'
-import HeaderPart from '../components/header/HeaderPart.vue'
+import GameHeaderPart from '../components/GameHeaderPart.vue'
-import GameHeaderComponents from '../components/header/GameHeaderComponents.vue'
 import api from '../utils/api'
 
 const leaderboard = ref<
@@ -36,8 +35,8 @@ onMounted(async () => {
     <div
       class="w-screen h-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
     >
-      <div class="w-full">
+      <div class="h-[6vh] w-full">
-        <HeaderPart title="排行榜" :headerComponent="GameHeaderComponents" />
+        <GameHeaderPart title="排行榜" />
       </div>
       <div class="w-fit h-[94vh] m-3">
         <div

app/src/views/LoginPage.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import AuthForm from '../components/AuthForm.vue'
-import DynamicBackground from '../components/DynamicBackground.vue'
+import Background from '../components/DynamicBackground.vue'
-import HeaderPart from '../components/header/HeaderPart.vue'
 
 import {
   TooManyRequestsError,
@@ -46,11 +45,10 @@ const handleLogin = async ({
 
 <template>
   <div class="w-screen h-screen">
-    <DynamicBackground class="w-full h-full" />
+    <Background 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>

app/src/views/QuestMapPage.vue

@@ -1,18 +1,13 @@
 <script setup lang="ts">
 import QuestMap from '../components/QuestMap.vue'
-import HeaderPart from '../components/header/HeaderPart.vue'
+import GameHeaderPart from '../components/GameHeaderPart.vue'
-import GameHeaderComponents from '../components/header/GameHeaderComponents.vue'
 </script>
 
 <template>
-  <div class="w-fit">
+  <div class="h-[6vh] w-full">
-    <HeaderPart
+    <GameHeaderPart title="關卡地圖" />
-      title="關卡地圖"
-      :headerComponent="GameHeaderComponents"
-      class="z-50"
-    />
   </div>
-  <div class="flex flex-col justify-center items-center w-full h-full pt-5">
+  <div class="flex flex-col justify-center items-center w-full h-[94vh]">
     <QuestMap />
   </div>
 </template>

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 DynamicBackground from '../components/DynamicBackground.vue'
+import Background from '../components/DynamicBackground.vue'
-import HeaderPart from '../components/header/HeaderPart.vue'
+
 import { checkUsername, register } from '../utils/auth'
 import {
   UnauthorizedError,
@@ -89,12 +89,11 @@ async function check({
 
 <template>
   <div class="w-screen h-screen">
-    <DynamicBackground class="w-full h-full" />
+    <Background class="w-full h-full" />
     <div
       class="h-screen w-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
     >
-      <HeaderPart />
+      <div class="w-fit">
-      <div class="w-fit mt-8">
         <AuthForm
           @onSubmit="handleRegister"
           @onChange="check"

quests/move/answer.sh

@@ -8,4 +8,5 @@ mv world.txt wow.txt
 ls
 mv notes docs
 ls
+echo hint
 mv docs/hello.txt hi.txt

quests/permission/Dockerfile

@@ -0,0 +1,3 @@
+FROM linuxodyssey/quest-base
+
+COPY home ${HOME}

quests/permission/game.yml

@@ -0,0 +1,278 @@
+title: 查看檔案存取權限
+instruction: |
+  在這個關卡中，你將會學到：
+  1. 用`ls -l`指令查看檔案的存取權限
+  2. 了解檔案存取權限的意義
+
+  準備好就輸入 `echo start` 開始吧！
+
+requirements:
+  - helloworld
+
+stages:
+  - id: start
+    task: 輸入 `echo start` 來開始
+    condition:
+      output:
+        - start
+    exceptions:
+      - condition:
+          command:
+            - ^echo$
+        responses:
+          - type: narrative
+            content:
+              - 你忘記輸入 `start` 了嗎？
+              - 請輸入 `echo start` 來開始
+      - catchAll: true
+        responses:
+          - type: narrative
+            content:
+              - 請輸入 `echo start` 來開始
+    responses:
+      - type: narrative
+        content: 現在我們要學習如何查看檔案的存取權限。
+          使用`ls -l`指令來查看不同檔案的存取權限吧！
+
+    hints:
+      - ➤  使用 `ls -l` 來查看檔案的存取權限
+
+  - id: ls-l
+    task: 查看檔案的存取權限
+    requirements:
+      - start
+    condition:
+      command:
+        - ls -l
+      pwd:
+        - /home/commander
+    responses:
+      - type: narrative
+        content:
+          - 你可以看到檔案的存取權限的左邊類似 `-rw-r--r--` 的字串。
+          - 這個字串由十個字元組成，第一個字元代表檔案的類型，後面九個字元分別代表檔案的存取權限。
+          - 第一個字元如果是 `-` 代表這是一個檔案，如果是 `d` 代表這是一個資料夾。
+          - 後面九個字元中以三個字元一組，分別代表檔案的擁有者、群組、以及其他人的存取權限。
+          - 每一組中的三個字元分別代表讀取（`r`）、寫入（`w`）、執行（`x`）的權限。
+          - 如果該欄位是 `-` 則表示沒有該權限。
+          - 例如 `-w-` 代表擁有寫入的權限，但沒有讀取和執行的權限；
+
+          - 現在試著查看 `file1` 、 `file2` 、 `file3` 的內容吧！
+          - 如果沒有權限將會顯示 `Permission denied` 的訊息。
+
+  - id: read-file1
+    task: 嘗試查看 `file1` 的內容
+    requirements:
+      - ls-l
+    condition:
+      pwd: /home/commander
+      command:
+        - cat file1
+
+  - id: read-file2
+    task: 嘗試查看 `file2` 的內容
+    requirements:
+      - ls-l
+    condition:
+      pwd: /home/commander
+      command:
+        - cat file2
+
+  - id: read-file3
+    task: 嘗試查看 `file3` 的內容
+    requirements:
+      - ls-l
+    condition:
+      pwd: /home/commander
+      command:
+        - cat file3
+
+  - id: read-files
+    requirements:
+      - read-file1
+      - read-file2
+      - read-file3
+    responses:
+      - type: narrative
+        content:
+          - 你已經試著查看 `file1` 、 `file2` 、 `file3` 的內容了！
+          - 現在請用 `echo [檔案名稱]` 回答現在有哪的檔案的讀取權限。
+
+  # {unfinished}
+
+  - id: cat-continue
+    task: 使用 `echo continue` 來繼續
+    requirements:
+      - cat-hello
+      - cat-world
+    condition:
+      command:
+        - echo
+    responses:
+      - type: narrative
+        content:
+          - 接下來我們要來學習複製檔案。
+          - '`cp` 這個指令，是 copy 的縮寫，就是複製的意思。'
+          - 我們可以用 `cp [來源檔案] [目的檔案]` 的方式來複製檔案。
+          - 請你使用 `cp` 來複製 `hello.txt` 到 `hello2.txt`。
+    hints:
+      - ➤  使用 `cp hello.txt hello2.txt` 來複製 `hello.txt` 到 `hello2.txt`
+
+  - id: cp-hello
+    task: 複製 `hello.txt` 到 `hello2.txt`
+    requirements:
+      - cat-continue
+    condition:
+      command:
+        - ^cp hello.txt hello2.txt$
+      files:
+        - path: hello2.txt
+          type: file
+    responses:
+      - type: narrative
+        content:
+          - 你成功複製 `hello.txt` 到 `hello2.txt` 了！
+          - 我們打開來確認一下 `hello2.txt` 的內容吧！
+    hints:
+      - ➤  使用 `cat hello2.txt` 來查看 `hello2.txt` 的內容
+
+  - id: cat-hello2
+    requirements:
+      - cp-hello
+    task: 查看 `hello2.txt` 的內容
+    condition:
+      command:
+        - ^cat hello2.txt$
+      output:
+        - Hello
+    responses:
+      - type: narrative
+        content:
+          - 你成功查看到 `hello2.txt` 的內容了！
+          - 正如我們所見，`hello2.txt` 的內容跟 `hello.txt` 一模一樣。
+          - 那我們再來試試看複製 `world.txt` 到 `world2.txt` 吧！
+    hints:
+      - ➤  使用 `cp world.txt world2.txt` 來複製 `world.txt` 到 `world2.txt`
+
+  - id: cp-world
+    requirements:
+      - cat-hello2
+    task: 複製 `world.txt` 到 `world2.txt`
+    condition:
+      command:
+        - ^cp world.txt world2.txt$
+      files:
+        - path: world2.txt
+          type: file
+    responses:
+      - type: narrative
+        content:
+          - 你成功複製 `world.txt` 到 `world2.txt` 了！
+          - 我們打開來確認一下 `world2.txt` 的內容吧！
+    hints:
+      - ➤  使用 `cat world2.txt` 來查看 `world2.txt` 的內容
+
+  - id: cat-world2
+    requirements:
+      - cp-world
+    task: 查看 `world2.txt` 的內容
+    condition:
+      command:
+        - ^cat world2.txt$
+      output:
+        - World
+    responses:
+      - type: narrative
+        content:
+          - 你成功查看到 `world2.txt` 的內容了！
+          - '`world2.txt` 的內容跟 `world.txt` 一模一樣。'
+          - 接下來我們要來學習如何複製資料夾。
+          - 現在目錄下有一個 `notes` 資料夾，裡面有一個 `note.txt` 的檔案。
+          - 我們要能整個資料夾包含裡面的檔案一起複製到 `notes2`。
+          - 跟複製單一檔案不一樣的是，複製資料夾時，我們要加上 `-r` 的選項（recursive）代表將資料夾中的所有檔案都一起複製。
+          - 在使用指令時，如果想要調整指令的行為，可以在指令後面加上選項。
+          - 選項的格式通常是 `-` 加上一個字母，例如 `-r`。
+          - 選項擺放的位置沒有特別的限制，通常會跟在指令的後面，置於檔案名稱的前面。
+          - 請你使用 `cp -r notes notes2` 來複製 `notes` 資料夾到 `notes2`。
+    hints:
+      - ➤  使用 `cp -r notes notes2` 來複製 `notes` 資料夾到 `notes2`
+      - ➤  記得要加上 `-r` 的選項來複製所有檔案
+
+  - id: cp-notes
+    requirements:
+      - cat-world2
+    task: 複製 `notes` 資料夾到 `notes2`
+    condition:
+      command:
+        - ^cp
+      files:
+        - path: notes2
+          type: directory
+        - path: notes2/note.txt
+          type: file
+    responses:
+      - type: narrative
+        content:
+          - 你成功複製 `notes` 資料夾到 `notes2` 了！
+          - 我們打開來確認一下 `notes2` 資料夾的內容吧！
+    hints:
+      - ➤  使用 `ls notes2` 來查看 `notes2` 資料夾的內容
+    exceptions:
+      - condition:
+          error:
+            - 'cp: omitting directory'
+        responses:
+          - type: narrative
+            content:
+              - 你忘記加上 `-r` 的參數了嗎？
+              - 請輸入 `cp -r notes notes2` 來複製 `notes` 資料夾到 `notes2`
+
+  - id: ls-notes2
+    requirements:
+      - cp-notes
+    task: 查看 `notes2` 資料夾的內容
+    condition:
+      command:
+        - ^ls notes2$
+      output:
+        - note.txt
+    responses:
+      - type: narrative
+        content:
+          - 你成功查看到 `notes2` 資料夾的內容了！
+          - 我們可以看到，整個 `notes` 資料夾包含裡面的檔案，都被複製到 `notes2` 資料夾了。
+          - 那麼最後我們要來試試看，如果複製一個檔案到已經存在的檔案會發生什麼事。
+    hints:
+      - ➤  使用 `cp hello.txt world.txt` 來複製 `hello.txt` 到 `world.txt`
+
+  - id: cp-overwrite
+    requirements:
+      - ls-notes2
+    task: 複製 `hello.txt` 到 `world.txt`
+    condition:
+      command:
+        - ^cp hello.txt world.txt$
+    responses:
+      - type: narrative
+        content:
+          - 你成功複製 `hello.txt` 到 `world.txt` 了！
+          - 我們打開來確認一下 `world.txt` 的內容吧！
+    hints:
+      - ➤  使用 `cat world.txt`
+
+  - id: END
+    requirements:
+      - cp-overwrite
+    task: 檢查 `world.txt` 的內容
+    condition:
+      command:
+        - ^cat world.txt$
+      output:
+        - Hello
+    responses:
+      - type: narrative
+        content:
+          - '`world.txt` 的內容變成 `Hello` 了！'
+          - 這是因為，當我們複製檔案時，如果目的檔案已經存在，那麼目的檔案的內容就會被覆蓋掉。
+          - 所以在複製檔案的時候，要特別注意目的檔案是否已經存在，否則可能會不小心把資料弄丟。
+          - 以上就是複製檔案的基本操作！

quests/permission/home/file1

@@ -0,0 +1 @@
+你有閱讀這個檔案的權限

quests/permission/home/file2

@@ -0,0 +1,3 @@
+#!/bin/sh
+
+echo 

quests/permission/home/file3

@@ -0,0 +1,3 @@
+#!/bin/sh
+
+echo 你有執行這個檔案的權限

quests/permission/zh.md

@@ -0,0 +1,12 @@
+# 關卡名稱
+
+## stage 名稱 {stage-id}
+
+> {speaker=角色名稱}
+> 對話內容
+
+### exception1
+content1
+
+### exception2
+content2

tests/cypress/e2e/UItests.cy.ts

@@ -5,7 +5,7 @@ export default function checkLoginUI() {
 describe('example helloworld app', () => {
   describe('Login tests', () => {
     beforeEach(() => {
-      cy.visit('/register')
+      cy.visit('/')
     })
     it('Check Login Page Elements-Register', () => {
       checkLoginUI()
@@ -83,11 +83,11 @@ describe('example helloworld app', () => {
       cy.get('#UsernameText')
         .should('contain', Cypress.env('defaultAccount'))
         .and('be.visible')
-      cy.findByRole('link', { name: 'Survey' }).should('be.visible')
-      cy.findByRole('link', { name: 'LeaderBoard' }).should('be.visible')
-      cy.findByRole('link', { name: 'Map' }).should('be.visible')
       cy.findByRole('link', { name: 'Bug Report' }).should('be.visible')
       cy.findByRole('button', { name: 'Sign Out' }).should('be.visible')
+      cy.findByRole('button', { name: 'Map' }).should('be.visible')
+      cy.findByRole('button', { name: 'LeaderBoard' }).should('be.visible')
+      cy.findByRole('link', { name: 'Survey' }).should('be.visible')
     })
     it('Check QuestInfo', () => {
       cy.get('#topic').should('contain', title)

tests/cypress/support/commands.ts

@@ -8,7 +8,7 @@ declare global {
   namespace Cypress {
     interface Chainable {
       LoginWithPassword(username: string, password: string): Chainable<string>
-      PrepareForGame(questId: string): Chainable<string>
+      PrepareForGame(): Chainable<void>
       InitTerminal(): Chainable<void>
       typeInCommand(command: string): Chainable<string>
       getQuestInfo(id: string): Chainable<JQuery<HTMLParagraphElement>>
@@ -38,8 +38,8 @@ Cypress.Commands.add('LoginWithPassword', (username, password) => {
   cy.get('#password').type(password)
   cy.get('#LogInOrSignUp').click()
 })
-Cypress.Commands.add('PrepareForGame', (questId: string) => {
+Cypress.Commands.add('PrepareForGame', (questId) => {
-  cy.visit('/login')
+  cy.visit('/')
   // make sure the login page is loaded
   cy.url().should('satisfy', (elements: string) => {
     const text = elements
@@ -143,9 +143,9 @@ Cypress.Commands.add('CompleteStageWithCommands', (stagename) => {
 })
 Cypress.Commands.add('CheckTextElement', (id, chText, enText) => {
   if (Cypress.env('isCHVersion')) {
-    cy.get(id, { timeout: 7000 }).should('contain', chText).and('be.visible')
+    cy.get(id, { timeout: 50000 }).should('contain', chText).and('be.visible')
   } else {
-    cy.get(id, { timeout: 7000 }).should('contain', enText).and('be.visible')
+    cy.get(id, { timeout: 50000 }).should('contain', enText).and('be.visible')
   }
 })
 Cypress.Commands.add('CheckPlaceholder', (id, chText, enText) => {

yarn.lock

@@ -7717,9 +7717,9 @@ tar-stream@^2.0.0:
     readable-stream "^3.1.1"
 
 tar@^6.1.11:
-  version "6.2.1"
+  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-6.2.1.tgz#717549c541bc3c2af15751bea94b1dd068d4b03a"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-6.2.0.tgz#b14ce49a79cb1cd23bc9b016302dea5474493f73"
-  integrity sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==
+  integrity sha512-/Wo7DcT0u5HUV486xg675HtjNd3BXZ6xDbzsCUZPt5iw8bTQ63bP0Raut3mvro9u+CUyq7YQd8Cx55fsZXxqLQ==
   dependencies:
     chownr "^2.0.0"
     fs-minipass "^2.0.0"