feat(i18n): add localized content for quest map

app/src/components/QuestIntro.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { useToast } from 'vue-toastification'
 import { ref, defineProps, onMounted } from 'vue'
 import MarkdownText from './MarkdownText.vue'
 import { trpc } from '../utils/trpc'
 
+const { t } = useI18n()
+
 const props = defineProps({
   questTitle: {
     type: String,
@@ -36,7 +39,7 @@ const handleQuests = (id: string) => {
   if (questUnlocked) {
     router.push({ name: 'game', params: { questId: id } })
   } else {
-    toast.warning('你還沒完成前一個關卡!')
+    toast.warning(t('quest.locked'))
   }
 }
 const handleColour = () => {
@@ -61,7 +64,6 @@ onMounted(async () => {
       <span class="close text-text content-between" @click="closeModal"
         >&times;</span
       >
-
       <h2
         id="QuestTitle"
         class="text-2xl text-text mb-5 w-full inline-flex justify-center"
@@ -82,8 +84,9 @@ onMounted(async () => {
         @click="handleQuests(questId)"
         :style="{ backgroundColor: questColor, color: questTextColor }"
         class="inline-flex justify-center rounded-lg text-base font-black py-3 mt-5 w-full text-lg"
-        >開始冒險</a
       >
+        {{ t('quest.start') }}
+      </a>
     </div>
   </div>
 </template>

app/src/components/QuestMap.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import { ref, onMounted, watch, computed } from 'vue'
 import { useToast } from 'vue-toastification'
 import { DAG } from '../../../packages/utils'
@@ -6,6 +7,7 @@ import { trpc } from '../utils/trpc'
 import useUserProfile from '../store/userProfile'
 import QuestIntro from './QuestIntro.vue'
 
+const { t } = useI18n()
 const store = useUserProfile()
 const toast = useToast()
 
@@ -151,7 +153,7 @@ const edgeStyle = computed(() => {
         class="p-10 absolute w-fit z-2 font-mono flex flax-wrap text-xl"
         style="width: 30%; height: 6%; font-size: 3vh; color: #00ff00"
       >
-        踏上你的Linux冒險之旅吧！
+        {{ t('quest_map.intro') }}
       </h1>
       <svg
         :width="svgWidth"

app/src/i18n/locales/en.json

@@ -74,5 +74,13 @@
     "sign_out": "Sign Out",
     "sign_out_failed": "Sign Out Failed",
     "load_user_profile_failed": "Failed to Load User Profile"
+  },
+  "quest_map": {
+    "title": "Quest Map",
+    "intro": "Embark on your Linux adventure!"
+  },
+  "quest": {
+    "start": "Start Adventure",
+    "locked": "Quest not unlocked"
   }
 }

app/src/i18n/locales/zh-TW.json

@@ -74,5 +74,13 @@
     "sign_out": "登出",
     "sign_out_failed": "登出失敗",
     "load_user_profile_failed": "無法讀取使用者資料"
+  },
+  "quest_map": {
+    "title": "關卡地圖",
+    "intro": "踏上你的Linux冒險之旅吧！"
+  },
+  "quest": {
+    "start": "開始冒險",
+    "locked": "關卡尚未解鎖"
   }
 }

app/src/views/QuestMapPage.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import QuestMap from '../components/QuestMap.vue'
 import HeaderPart from '../components/header/HeaderPart.vue'
 import GameHeaderComponents from '../components/header/GameHeaderComponents.vue'
+
+const { t } = useI18n()
 </script>
 
 <template>
   <div class="w-fit">
     <HeaderPart
-      title="關卡地圖"
+      :title="t('quest_map.title')"
       :headerComponent="GameHeaderComponents"
       class="z-50"
     />