update .vue

app/src/components/AuthForm.vue

@@ -114,10 +114,7 @@ const handleChange = () => {
             :icon="['fab', 'google']"
             class="text-text-secondary px-3 text-lg"
           />
-          <span class="font-medium">
+          <span class="font-medium"> 以 Google 繼續 </span>
-            <!-- Continue with Google -->
-            以 Google 繼續
-          </span>
         </a>
         <a
           id="GitHubLogin"
@@ -129,32 +126,17 @@ const handleChange = () => {
             :icon="['fab', 'github']"
             class="text-text-secondary px-3 text-lg"
           />
-          <span class="font-medium">
+          <span class="font-medium"> 以 GitHub 繼續 </span>
-            <!-- Continue with GitHub -->
-            以 GitHub 繼續
-          </span>
         </a>
         <p
           id="or"
           class="text-text-secondary flex justify-center mt-3"
           v-if="type === 'login' || type === 'register'"
         >
-          <!-- or -->
           或
         </p>
       </div>
       <div class="mb-6">
-        <!-- <input
-          type="text"
-          id="username"
-          ref="usernameInput"
-          class="my-4 bg-bg-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-bg-secondary"
-          :placeholder="type === 'login' ? 'Email / Username' : 'Username'"
-          v-model="username"
-          required
-          @input="handleChange()"
-          autocomplete="username"
-        /> -->
         <input
           type="text"
           id="username"
@@ -176,17 +158,6 @@ const handleChange = () => {
         </label>
       </div>
       <div class="mb-6" v-if="type === 'register'">
-        <!-- <input
-          type="email"
-          id="email"
-          ref="emailInput"
-          class="my-4 bg-bg-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-bg-secondary"
-          placeholder="Email"
-          v-model="email"
-          required
-          @input="handleChange()"
-          autocomplete="email"
-        /> -->
         <input
           type="email"
           id="email"
@@ -200,15 +171,6 @@ const handleChange = () => {
         />
       </div>
       <div class="mb-6" v-if="type === 'login' || type === 'register'">
-        <!-- <input
-          type="password"
-          id="password"
-          class="my-4 bg-bg-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-bg-secondary"
-          placeholder="Password"
-          v-model="password"
-          required
-          @input="handleChange()"
-        /> -->
         <input
           type="password"
           id="password"
@@ -231,43 +193,29 @@ const handleChange = () => {
         class="inline-flex justify-center rounded-lg font-black py-2 bg-text-primary text-bg w-full"
         type="submit"
       >
-        <span v-if="type === 'login'">
+        <span v-if="type === 'login'"> 登入 </span>
-          <!-- Log In -->
+        <span v-else> 註冊 </span>
-          登入
-        </span>
-        <span v-else>
-          <!-- Sign Up -->
-          註冊
-        </span>
       </button>
 
       <p id="SwitchLoginRegister" class="text-text flex justify-center mt-3">
         <span id="CheckRegistered" v-if="type === 'register'">
-          <!-- Already have an account? -->
           已經有帳號了嗎？
           <RouterLink
             id="SwitchtoLogin"
             class="text-text-primary font-bold"
             to="/login"
           >
-            <u>
+            <u> 登入 </u>
-              <!-- Log in -->
-              登入
-            </u>
           </RouterLink></span
         >
         <span id="CheckRegistered" v-else-if="type === 'login'">
-          <!-- Don't have an account? -->
           還沒有帳號嗎？
           <RouterLink
             id="SwitchtoRegister"
             class="text-text-primary font-bold"
             to="/register"
           >
-            <u>
+            <u> 註冊 </u>
-              <!-- Sign up -->
-              註冊
-            </u>
           </RouterLink></span
         >
       </p>

app/src/components/CommandlistPart.vue

@@ -1,13 +1,7 @@
 <template>
   <font-awesome-icon :icon="['fas', 'list']" class="text-text-primary p-1" />
-  <h1 id="CommandBook" class="inline text-text-primary font-xl">
+  <h1 id="CommandBook" class="inline text-text-primary font-xl">指令之書</h1>
-    <!-- Command Cheatsheets -->
-    指令之書
-  </h1>
   <div id="cheatsheets">
-    <p class="text-text-secondary">
+    <p class="text-text-secondary">--指令列表--</p>
-      <!-- --Command List-- -->
-      -- --指令列表-- --
-    </p>
   </div>
 </template>

app/src/components/CompleteModal.vue

@@ -47,7 +47,6 @@ setTimeout(() => {
         id="QuestCompleted"
         class="text-2xl text-text mb-5 w-full inline-flex justify-center"
       >
-        <!-- Quest Completed! -->
         關卡完成！
       </h2>
       <div class="z-10 right-1/2 top-1/2" @animationend="defineComponent">

app/src/components/ControlPalette.vue

@@ -13,7 +13,6 @@ const continuePlay = async () => {
   try {
     router.push({ name: 'map' })
   } catch (err) {
-    // useToast().error('Failed to load map')
     useToast().error('無法讀取地圖')
     console.error(err)
   }
@@ -28,10 +27,7 @@ const continuePlay = async () => {
           :icon="['fas', 'file-invoice']"
           class="text-text-primary"
         />
-        <p class="text-text-primary inline ml-1">
+        <p class="text-text-primary inline ml-1">問卷</p>
-          <!-- Survey -->
-          問卷
-        </p>
       </a>
     </button>
     <button disabled id="solution" class="bg-bg-disabled rounded-lg p-2">
@@ -39,20 +35,14 @@ const continuePlay = async () => {
         :icon="['far', 'circle-question']"
         class="text-text-disabled"
       />
-      <p class="text-text-disabled inline ml-1">
+      <p class="text-text-disabled inline ml-1">解答</p>
-        <!-- Solution -->
-        解答
-      </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"
       />
-      <p class="text-text-primary inline ml-1">
+      <p class="text-text-primary inline ml-1">重來</p>
-        <!-- Reset -->
-        重來
-      </p>
     </button>
     <button
       id="continue"
@@ -63,10 +53,7 @@ const continuePlay = async () => {
         :icon="['far', 'circle-right']"
         class="text-text-primary"
       />
-      <p class="text-text-primary inline ml-1">
+      <p class="text-text-primary inline ml-1">繼續</p>
-        <!-- Continue -->
-        繼續
-      </p>
     </button>
   </section>
 </template>

app/src/components/GameHeaderPart.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)
   }
@@ -38,7 +37,6 @@ onMounted(async () => {
   try {
     await loadUserProfile()
   } catch (err) {
-    // toast.error('Failed to load user profile')
     toast.error('無法讀取使用者資料')
   }
 })

app/src/components/QuestMap.vue

@@ -156,7 +156,6 @@ function initChart(option: any) {
     if (unlocked) {
       router.push({ name: 'game', params: { questId: id } })
     } else {
-      // toast.warning('You have not completed the previous quest yet!')
       toast.warning('你還沒完成前一個關卡!')
     }
   })
@@ -181,7 +180,6 @@ onMounted(async () => {
       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"
     >
-      <!-- Get through your linux journey! -->
       踏上你的Linux冒險之旅吧！
     </h1>
     <div class="flex flex-wrap absolute w-full h-full z-1">

app/src/components/QuestPart.vue

@@ -29,10 +29,7 @@ const tasks = computed(() => {
           :content="sessionStore.quest.instruction"
         />
         <br />
-        <p id="tasks" class="text-text">
+        <p id="tasks" class="text-text">任務：</p>
-          <!-- Tasks: -->
-          任務：
-        </p>
         <ul v-if="sessionStore.session">
           <li v-for="task in tasks" :key="task.id">
             <MarkdownText :class="task.class" :content="task.content" />

app/src/components/TerminalPart.vue

@@ -13,10 +13,7 @@ onMounted(() => {
 
 <template>
   <font-awesome-icon :icon="['fas', 'terminal']" class="text-text p-1" />
-  <button id="Terminal" class="text-text h-[5%]">
+  <button id="Terminal" class="text-text h-[5%]">終端機</button>
-    <!-- Terminal -->
-    終端機
-  </button>
   <div
     id="terminal"
     ref="terminal"

app/src/views/ChooseUsernamePage.vue

@@ -8,7 +8,6 @@ import { checkUsername, chooseUsername } from '../utils/auth'
 async function check({ username, error }: { username: string; error: any }) {
   if (username) {
     if (!isValidUsername(username)) {
-      // error('Invalid username.')
       error('無效的帳號名稱')
       return
     }
@@ -16,7 +15,6 @@ async function check({ username, error }: { username: string; error: any }) {
       await checkUsername(username)
     } catch (err) {
       if (err instanceof TooManyRequestsError) {
-        // error('Too many requests. Try again in 2 minutes.')
         error('太多請求，兩分鐘後再試一次。')
         return
       }
@@ -24,7 +22,6 @@ async function check({ username, error }: { username: string; error: any }) {
         error(err.message)
         return
       }
-      // error('Something went wrong. Please try again later.')
       error('出了點問題，請再試一次。')
     }
   }
@@ -44,7 +41,6 @@ async function handleSubmit({
     success()
   } catch (err: any) {
     if (err instanceof TooManyRequestsError) {
-      // error('Too many requests. Try again in 2 minutes.')
       error('太多請求，兩分鐘後再試一次。')
       return
     }

app/src/views/GamePage.vue

@@ -30,14 +30,10 @@ onMounted(async () => {
     await init(props.questId)
   } catch (err: any) {
     if (err instanceof LoadQuestError) {
-      // toast.error(`Failed to load quest: ${err.questId}. Please check the URL.`)
       toast.error(`無法讀取關卡: ${err.questId}，請確認網頁連結。`)
       return
     }
     if (err instanceof LoadSessionError) {
-      // toast.error(
-      //   `Failed to create session for quest: ${err.questId}. Please re-login and try again.`
-      // )
       toast.error(`無法建立工作階段: ${err.questId}，請重新登入再試一次。`)
       return
     }

app/src/views/LeaderboardPage.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { Ref, ref, onMounted } from 'vue'
 import { useToast } from 'vue-toastification'
 import DynamicBackground from '../components/DynamicBackground.vue'
 import GameHeaderPart from '../components/GameHeaderPart.vue'
 import api from '../utils/api'
 
-const leaderboard = ref([])
+const leaderboard: Ref<any> = ref([])
 
 const toast = useToast()
 async function getLeaderboard() {

app/src/views/LoginPage.vue

@@ -25,22 +25,18 @@ const handleLogin = async ({
     if (isSuccess) success()
   } catch (err) {
     if (err instanceof TooManyRequestsError) {
-      // error('Too many requests. Try again in 2 minutes.')
       error('太多請求，兩分鐘後再試一次。')
       return
     }
     if (err instanceof UnauthorizedError) {
-      // error('Wrong username or password.')
       error('錯誤的帳號名稱或密碼。')
       return
     }
     if (err instanceof ValidationError) {
-      // error('Invalid username or password.')
       error('無效的帳號名稱或密碼。')
       return
     }
     console.error(err)
-    // error('Something went wrong.')
     error('出了點問題。')
   }
 }

app/src/views/QuestMapPage.vue

@@ -6,13 +6,6 @@ import GameHeaderPart from '../components/GameHeaderPart.vue'
 <template>
   <div class="h-[6vh] w-full">
     <GameHeaderPart title="關卡地圖" />
-    <!-- <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>
   <div class="flex flex-col justify-center items-center w-full h-[94vh]">
     <QuestMap />

app/src/views/RegisterPage.vue

@@ -29,12 +29,10 @@ function handleRegister({
     .then(success)
     .catch((err) => {
       if (err instanceof TooManyRequestsError) {
-        // error('Too many requests. Try again in 2 minutes.')
         error('太多請求，兩分鐘後再試一次。')
         return
       }
       if (err instanceof UnauthorizedError) {
-        // error('Invalid username or password.')
         error('無效的帳號名稱或密碼。')
         return
       }
@@ -43,7 +41,6 @@ function handleRegister({
         return
       }
       console.error(err)
-      // error('Something went wrong.')
       error('出了點問題。')
     })
 }
@@ -60,19 +57,14 @@ async function check({
   error: any
 }) {
   if (username && !isValidUsername(username)) {
-    // error('Invalid username.')
     error('無效的帳號名稱')
     return
   }
   if (email && !validator.isEmail(email)) {
-    // error('Invalid email.')
     error('無效的電子郵件')
     return
   }
   if (password && !validator.isStrongPassword(password, passwordPolicy)) {
-    // error(
-    //   'Your password must be 8+ characters with at least one number, one upper and one lower case letter.'
-    // )
     error('密碼必須超過8個字元，至少包含一個數字、一個大寫及一個小寫。')
     return
   }
@@ -84,12 +76,10 @@ async function check({
       return
     }
     if (err instanceof TooManyRequestsError) {
-      // error('Too many requests. Try again in 2 minutes.')
       error('太多請求，兩分鐘後再試一次。')
       return
     }
     console.error(err)
-    // error('Something went wrong.')
     error('出了點問題。')
   }
 }