chore: add i18n

polylan_submitter/src/OpusMagnum.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { useTitle } from "@vueuse/core";
 import PuzzleCard from "@/components/PuzzleCard.vue";
 import SubmissionForm from "@/components/SubmissionForm.vue";
 import AdminPanel from "@/components/AdminPanel.vue";
@@ -26,6 +28,9 @@ const props = defineProps<{
 provideEventPath(props.eventPath);
 apiService.setEventPath(props.eventPath);
 
+const { t } = useI18n();
+useTitle(computed(() => t("opusMagnum.pageTitle")));
+
 const puzzlesStore = usePuzzlesStore();
 const submissionsStore = useSubmissionsStore();
 
@@ -147,20 +152,20 @@ const goHome = () => {
       <div class="container min-w-3/4 mx-auto w-full flex items-center gap-4">
         <button @click="goHome" class="btn btn-primary btn-sm">
           <i class="mdi mdi-arrow-left"></i>
-          Back
+          {{ t("common.back") }}
         </button>
-        <h1 class="text-xl font-bold">Opus Magnum Puzzle Submitter</h1>
+        <h1 class="text-xl font-bold">{{ t("opusMagnum.header") }}</h1>
         <div class="flex-1"></div>
         <div class="flex items-center gap-4">
           <div v-if="userInfo?.is_authenticated" class="flex items-center gap-2">
             <div class="text-sm">
               <span class="font-medium">{{ userInfo.username }}</span>
-              <span v-if="userInfo.is_superuser" class="badge badge-warning badge-xs ml-1">Admin</span>
+              <span v-if="userInfo.is_superuser" class="badge badge-warning badge-xs ml-1">{{ t("common.admin") }}</span>
             </div>
           </div>
-          <div v-else class="text-sm text-base-content/70">Not logged in</div>
-          <a href="/api/docs" class="btn btn-xs">API docs</a>
-          <a href="/admin" class="btn btn-xs btn-warning">Admin panel</a>
+          <div v-else class="text-sm text-base-content/70">{{ t("common.notLoggedIn") }}</div>
+          <a href="/api/docs" class="btn btn-xs">{{ t("common.apiDocs") }}</a>
+          <a href="/admin" class="btn btn-xs btn-warning">{{ t("common.adminPanel") }}</a>
         </div>
       </div>
     </div>
@@ -172,7 +177,7 @@ const goHome = () => {
         <div class="text-center">
           <p class="mb-6 text-base-content/70">
             <span class="loading loading-spinner loading-lg"></span>
-            Auto reload page in {{ remaining }} seconds ...
+            {{ t("opusMagnum.autoReload", { seconds: remaining }) }}
           </p>
         </div>
       </div>
@@ -180,7 +185,7 @@ const goHome = () => {
       <div v-if="isLoading" class="flex justify-center items-center min-h-[400px]">
         <div class="text-center">
           <span class="loading loading-spinner loading-lg"></span>
-          <p class="mt-4 text-base-content/70">Loading puzzles...</p>
+          <p class="mt-4 text-base-content/70">{{ t("opusMagnum.loadingPuzzles") }}</p>
         </div>
       </div>
 
@@ -188,12 +193,12 @@ const goHome = () => {
       <div v-else-if="error" class="alert alert-error max-w-2xl mx-auto">
         <i class="mdi mdi-alert-circle text-xl"></i>
         <div>
-          <h3 class="font-bold">Error Loading Data</h3>
+          <h3 class="font-bold">{{ t("opusMagnum.errorLoadingData") }}</h3>
           <div class="text-sm">{{ error }}</div>
         </div>
         <button @click="reloadPage" class="btn btn-sm btn-outline">
           <i class="mdi mdi-refresh mr-1"></i>
-          Retry
+          {{ t("common.retry") }}
         </button>
       </div>
 
@@ -220,14 +225,14 @@ const goHome = () => {
                 <div class="flex flex-wrap gap-4 mt-4">
                   <button @click="openSubmissionModal" class="btn btn-primary" :disabled="isTournamentClosed">
                     <i class="mdi mdi-plus mr-2"></i>
-                    Submit Solution
+                    {{ t("common.submitSolution") }}
                   </button>
                 </div>
                 <div v-if="isTournamentClosed" class="alert alert-warning mt-4">
                   <i class="mdi mdi-alert-circle text-xl"></i>
                   <div>
-                    <h3 class="font-bold">Tournament Closed</h3>
-                    <div class="text-sm">This tournament is no longer accepting new submissions.</div>
+                    <h3 class="font-bold">{{ t("opusMagnum.tournamentClosed") }}</h3>
+                    <div class="text-sm">{{ t("opusMagnum.tournamentClosedMessage") }}</div>
                   </div>
                 </div>
               </div>
@@ -250,9 +255,9 @@ const goHome = () => {
           <!-- Empty State -->
           <div v-if="puzzlesStore.puzzles.length === 0" class="text-center py-12">
             <div class="text-6xl mb-4">🧩</div>
-            <h3 class="text-xl font-bold mb-2">No Puzzles Available</h3>
+            <h3 class="text-xl font-bold mb-2">{{ t("opusMagnum.noPuzzlesTitle") }}</h3>
             <p class="text-base-content/70">
-              Check back later for new puzzle collections!
+              {{ t("opusMagnum.noPuzzlesMessage") }}
             </p>
           </div>
         </template>
@@ -263,7 +268,7 @@ const goHome = () => {
     <div v-if="isSubmissionModalOpen" class="modal modal-open">
       <div class="modal-box max-w-6xl">
         <div class="flex justify-between items-center mb-4">
-          <h3 class="font-bold text-lg">Submit Solution</h3>
+          <h3 class="font-bold text-lg">{{ t("common.submitSolution") }}</h3>
           <button @click="closeSubmissionModal" class="btn btn-sm btn-circle btn-ghost">
             <i class="mdi mdi-close"></i>
           </button>