Issue#206 Fix missing translations and header on the ChooseUsername and CompleteModal page (#214)

app/src/components/game/CompleteModal.vue

@@ -32,7 +32,7 @@ const backtoMap = async () => {
   try {
     router.push({ name: 'map' })
   } catch (err) {
-    toast.error('無法讀取地圖')
+    toast.error(t('quest_map.load_quest_map_failed'))
     console.error(err)
   }
 }
@@ -52,7 +52,7 @@ setTimeout(() => {
         id="QuestCompleted"
         class="text-2xl text-text mb-5 w-full inline-flex justify-center"
       >
-        關卡完成！
+        {{ t('game.quest_completed') }}
       </h2>
       <div class="z-10 right-1/2 top-1/2" @animationend="defineComponent">
         <Vue3Lottie
@@ -61,16 +61,18 @@ setTimeout(() => {
           :width="200"
         />
       </div>
-      <p class="text-base text-text text-center">恭喜你完成這一關！</p>
       <p class="text-base text-text text-center">
-        接下來回到地圖，迎接新的挑戰吧！
+        {{ t('game.quest_completed_desc_1') }}
+      </p>
+      <p class="text-base text-text text-center">
+        {{ t('game.quest_completed_desc_2') }}
       </p>
       <a
         id="BacktoMap"
         target="_blank"
         @click="backtoMap"
         class="inline-flex justify-center rounded-lg text-base font-black py-2 mt-3 bg-text-primary w-full"
-        >回到地圖</a
+        >{{ t('game.back_to_map') }}</a
       >
     </div>
     <div style="position: relative; height: 100vh; overflow: auto">

app/src/i18n/locales/en.json

@@ -103,6 +103,10 @@
     "cheatsheets": "Cheat Sheets",
     "reset_to_apply_language": "Reset quest to apply language changes",
     "reset_failed": "Reset failed",
-    "language_unavailable": "This quest does not support the selected language, please choose another language"
+    "language_unavailable": "This quest does not support the selected language, please choose another language",
+    "quest_completed": "Quest Completed",
+    "quest_completed_desc_1": "Congratulations! You have completed this quest!",
+    "quest_completed_desc_2": "Return to the map to face new challenges!",
+    "back_to_map": "Back to Map"
   }
 }

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

@@ -103,6 +103,10 @@
     "cheatsheets": "指令列表",
     "reset_to_apply_language": "重置關卡以套用語言變更",
     "reset_failed": "重置失敗",
-    "language_unavailable": "此關卡不支援所選語言，請選擇其他語言"
+    "language_unavailable": "此關卡不支援所選語言，請選擇其他語言",
+    "quest_completed": "關卡完成",
+    "quest_completed_desc_1": "恭喜你完成了這個關卡！",
+    "quest_completed_desc_2": "回到地圖，迎接新的挑戰吧！",
+    "back_to_map": "回到地圖"
   }
 }

app/src/views/ChooseUsernamePage.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import { isValidUsername } from '../../../packages/utils'
 import AuthForm from '../components/AuthForm.vue'
-import Background from '../components/DynamicBackground.vue'
+import DynamicBackground from '../components/DynamicBackground.vue'
+import HeaderPart from '../components/header/HeaderPart.vue'
 import { TooManyRequestsError, ValidationError } from '../utils/errors'
 import { checkUsername, chooseUsername } from '../utils/auth'
 
+const { t } = useI18n()
+
 async function check({
   username,
   error,
@@ -15,21 +19,21 @@ async function check({
 }) {
   if (username) {
     if (!isValidUsername(username)) {
-      error('無效的帳號名稱')
+      error(t('authform_error.invalid_username'))
       return
     }
     try {
       await checkUsername(username)
     } catch (err) {
       if (err instanceof TooManyRequestsError) {
-        error('太多請求，兩分鐘後再試一次。')
+        error(t('authform_error.too_many_requests'))
         return
       }
       if (err instanceof ValidationError) {
         error(err.message)
         return
       }
-      error('出了點問題，請再試一次。')
+      error(t('authform_error.auth_failed'))
     }
   }
 }
@@ -49,7 +53,7 @@ async function handleSubmit({
     success()
   } catch (err: any) {
     if (err instanceof TooManyRequestsError) {
-      error('太多請求，兩分鐘後再試一次。')
+      error(t('authform_error.too_many_requests'))
       return
     }
     if (err instanceof ValidationError) {
@@ -63,10 +67,11 @@ async function handleSubmit({
 
 <template>
   <div class="w-screen h-screen">
-    <Background class="w-full h-full" />
+    <DynamicBackground 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">
         <AuthForm
           @onSubmit="handleSubmit"