feat(i18n): add localized content for leaderboard

app/src/i18n/locales/en.json

@@ -82,5 +82,12 @@
   "quest": {
     "start": "Start Adventure",
     "locked": "Quest not unlocked"
+  },
+  "leaderboard": {
+    "title": "Leaderboard",
+    "username": "Username",
+    "score": "Score",
+    "completed_quests": "Completed Quests",
+    "load_leaderboard_failed": "Failed to Load Leaderboard"
   }
 }

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

@@ -82,5 +82,12 @@
   "quest": {
     "start": "開始冒險",
     "locked": "關卡尚未解鎖"
+  },
+  "leaderboard": {
+    "title": "排行榜",
+    "username": "使用者名稱",
+    "score": "分數",
+    "completed_quests": "完成關卡",
+    "load_leaderboard_failed": "無法讀取排行榜"
   }
 }

app/src/views/LeaderboardPage.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import { ref, onMounted } from 'vue'
 import { useToast } from 'vue-toastification'
 import DynamicBackground from '../components/DynamicBackground.vue'
@@ -6,6 +7,8 @@ import HeaderPart from '../components/header/HeaderPart.vue'
 import GameHeaderComponents from '../components/header/GameHeaderComponents.vue'
 import api from '../utils/api'
 
+const { t } = useI18n()
+
 const leaderboard = ref<
   {
     username: string
@@ -21,7 +24,7 @@ async function getLeaderboard() {
     leaderboard.value = res.data
   } catch (err: any) {
     console.error(err)
-    toast.error('讀取排行榜失敗')
+    toast.error(t('leaderboard.load_leaderboard_failed'))
   }
 }
 
@@ -37,22 +40,33 @@ 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="t('leaderboard.title')"
+          :headerComponent="GameHeaderComponents"
+        />
       </div>
       <div class="w-fit h-[94vh] m-3">
         <div
           class="h-full bg-bg border-8 border-bg-primary flex flex-col items-center rounded-3xl p-10"
         >
-          <h1 class="text-text-primary text-3xl mb-5">排行榜</h1>
+          <h1 class="text-text-primary text-3xl mb-5">
+            {{ t('leaderboard.title') }}
+          </h1>
           <div class="max-h-300 overflow-auto">
             <table class="w-full text-sm text-left text-text">
               <thead
                 class="text-xs text-text-secondary uppercase bg-bg-secondary"
               >
                 <tr>
-                  <th scope="col" class="px-6 py-3">使用者名稱</th>
+                  <th scope="col" class="px-6 py-3">
-                  <th scope="col" class="px-6 py-3">分數</th>
+                    {{ t('leaderboard.username') }}
-                  <th scope="col" class="px-6 py-3">完成關卡</th>
+                  </th>
+                  <th scope="col" class="px-6 py-3">
+                    {{ t('leaderboard.score') }}
+                  </th>
+                  <th scope="col" class="px-6 py-3">
+                    {{ t('leaderboard.completed_quests') }}
+                  </th>
                 </tr>
               </thead>
               <tbody>