fix: localization fixes

src/components/Onboarding.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ComputedRef, computed, onMounted, ref } from 'vue';
+import { ComputedRef, computed, ref } from 'vue';
 import Button from 'primevue/button';
 import Carousel from 'primevue/carousel';
 import Dialog from 'primevue/dialog';
@@ -27,7 +27,7 @@ interface Datum {
 
 const game = computed(() => prf.current?.meta.game);
 
-const processText = (s: string) => {
+const processText = computed(() => (s: string) => {
     // Why do I have to do this
     s = s
         .split('\n')
@@ -39,14 +39,14 @@ const processText = (s: string) => {
         if (readable !== null) {
             return s.replace(
                 '%TESTMENU%',
-                `${readable} or a button on the back of the controller`
+                `${readable} ${t('onboarding.or')} ${t('onboarding.backButton')}`
             );
         }
     }
-    return s.replace('%TESTMENU%', 'a button on the back of the controller');
-};
+    return s.replace('%TESTMENU%', t('onboarding.backButton'));
+});
 
-const loadPage = (title: string, messages?: object) => {
+const loadPage = computed(() => (title: string, messages?: object) => {
     return {
         text: t(`onboarding.${title}`, {
             endlink: '</a>',
@@ -56,19 +56,44 @@ const loadPage = (title: string, messages?: object) => {
         }),
         image: `help-${title}.png`,
     };
-};
-
-let systemProcessing: Datum;
-let standardOngeki: Datum;
-let standardChunithm: Datum;
-let lever: Datum;
-let server: Datum;
-let finaleOngeki: Datum;
-let finaleChunithm: Datum;
+});
 
 const data: ComputedRef<Datum[]> = computed(() => {
     const res = [];
 
+    const [standard, systemProcessing, lever, server, finale] = [
+        loadPage.value('standard', {
+            bigblack: '<div class="p-2 mt-1 mb-1 bg-black text-white">',
+            endbig: '</div>',
+        }),
+        loadPage.value('ongeki-system-processing'),
+        loadPage.value('ongeki-lever'),
+        loadPage.value('chunithm-server', {
+            link: '<a href="https://gitea.tendokyu.moe/Dniel97/SEGAguide/wiki/FAQ#game-is-stuck-at-checking-distribution-server" target="_blank">',
+        }),
+        loadPage.value('finale', {
+            segaguide:
+                '<a href="https://gitea.tendokyu.moe/Dniel97/SEGAguide/wiki/FAQ" target="_blank">',
+            twotorial: '<a href="https://two-torial.xyz/" target="_blank">',
+        }),
+    ];
+    const standardOngeki = {
+        ...standard,
+        image: '/help-standard-ongeki.png',
+    };
+    const standardChunithm = {
+        ...standard,
+        image: '/help-standard-chunithm.png',
+    };
+    const finaleOngeki = {
+        ...finale,
+        image: '/help-finale-ongeki.png',
+    };
+    const finaleChunithm = {
+        ...finale,
+        image: '/help-finale-chunithm.png',
+    };
+
     switch (prf.current?.meta.game) {
         case 'ongeki':
             res.push(systemProcessing);
@@ -92,48 +117,14 @@ const context = ref({
     index: 0,
 });
 
-onMounted(async () => {
-    [standardOngeki, systemProcessing, lever, server, finaleOngeki] =
-        await Promise.all([
-            loadPage('standard', {
-                bigblack: '<div class="p-2 mt-1 mb-1 bg-black text-white">',
-                endbig: '</div>',
-            }),
-            loadPage('ongeki-system-processing'),
-            loadPage('ongeki-lever'),
-            loadPage('chunithm-server', {
-                link: '<a href="https://gitea.tendokyu.moe/Dniel97/SEGAguide/wiki/FAQ#game-is-stuck-at-checking-distribution-server" target="_blank">',
-            }),
-            loadPage('finale', {
-                segaguide:
-                    '<a href="https://gitea.tendokyu.moe/Dniel97/SEGAguide/wiki/FAQ" target="_blank">',
-                twotorial: '<a href="https://two-torial.xyz/" target="_blank">',
-            }),
-        ]);
-    standardOngeki = {
-        ...standardOngeki,
-        image: '/help-standard-ongeki.png',
-    };
-    standardChunithm = {
-        ...standardOngeki,
-        image: '/help-standard-chunithm.png',
-    };
-    finaleOngeki = {
-        ...finaleOngeki,
-        image: '/help-finale-ongeki.png',
-    };
-    finaleChunithm = {
-        ...finaleOngeki,
-        image: '/help-finale-chunithm.png',
-    };
-});
-
 const exitLabel = computed(() => {
     return props.firstTime === true &&
         context.value.index < data.value.length - 1
-        ? 'Skip'
-        : 'Close';
+        ? t('skip')
+        : t('close');
 });
+
+const page = ref(0);
 </script>
 
 <template>
@@ -147,14 +138,15 @@ const exitLabel = computed(() => {
                 : `${game ? prettyPrint(game) : '<game>'} help`
         "
         :style="{ width: '760px', scale: client.scaleValue }"
-        v-on:show="() => (context.index = 0)"
+        v-on:show="() => ((context.index = 0), (page = 0))"
     >
         <Carousel
             :value="data"
             :num-visible="1"
             :num-scroll="1"
             :context="context"
-            v-on:update:page="(p) => (context.index = p)"
+            :page="page"
+            v-on:update:page="(p) => ((context.index = p), (page = p))"
         >
             <template #item="slotProps">
                 <div class="md-container markdown">
@@ -178,8 +170,8 @@ const exitLabel = computed(() => {
             <Button
                 v-if="context.index < data.length - 1"
                 class="m-auto mr-4"
-                label="Next"
-                @click="() => (context.index += 1)"
+                :label="t('next')"
+                @click="() => (page += 1)"
             />
             <Button
                 class="m-auto"