i18n-ised ui variables

README.md

@@ -28,8 +28,12 @@ The newest at the moment of me writing this (December 13th 2025) are the (visual
   - B - B
   - C - C
 - [ ] i18n - pl, en, de, ua (not all questions are available in ua, api handle)
-  - UI i18n
+  - [ ] UI i18n
-  - db: examstore add language field, api handle languages
+    - [x] pl
+    - [ ] en
+    - [ ] de
+    - [ ] ua
+  - [ ] db: examstore add language field, api handle languages
 - [ ] db: (revise) script for processing, (revise and) share appropriate files
 - [ ] clean up js code in exam.vue and result.vue (currently a little bit of a mess)
 

categories.ts

@@ -12,33 +12,3 @@ export default [
   'D1',
   'PT',
 ];
-
-export const opis = [
-  'motocykle bez ograniczeń mocy',
-  '⭐ samochody osobowe do 3,5 t',
-  'pojazdy ciężarowe powyżej 3,5 t',
-  'autobusy',
-  'ciągniki rolnicze i pojazdy wolnobieżne',
-  'motorowery i lekkie czterokołowce',
-  'motocykle do 125 cm³ i 11 kW',
-  'motocykle do 35 kW',
-  'czterokołowce (np. quady)',
-  'pojazdy od 3,5 t do 7,5 t',
-  'autobusy do 16 pasażerów',
-  'tramwaje',
-];
-
-export const wiek = [
-  '(24 lata; lub 20 lat jeśli masz kat. A2 min. 2 lata)',
-  '(18 lat)',
-  '(21 lat; lub 18 lat z kwalifikacją wstępną)',
-  '(24 lata; lub 21 lat z kwalifikacją wstępną)',
-  '(16 lat)',
-  '(14 lat)',
-  '(16 lat)',
-  '(18 lat)',
-  '(16 lat)',
-  '(18 lat)',
-  '(21 lat; lub 18 lat z kwalifikacją wstępną)',
-  '(21 lat)',
-];

components/EndModal.vue

@@ -18,8 +18,8 @@ watchEffect(() => {
     class="flex justify-center items-center backdrop-blur-sm modal"
   >
     <div class="flex flex-col p-3 bg-base rounded-md gap-3 modal-box min-w-fit">
-      <h1 class="text-[1.5rem]">Koniec egzaminu</h1>
+      <h1 class="text-[1.5rem]">{{ $t('examEnd') }}</h1>
-      <div class="*:inline">Czy na pewno chcesz zakończyć egzamin?</div>
+      <div class="*:inline">{{ $t('doYouReallyWantToEndExam') }}</div>
       <div class="flex flex-row gap-2 justify-around">
         <div class="btn btn-lg btn-success" @click="emit('endExam')">Tak</div>
         <div class="btn btn-lg btn-error" @click="endModal?.close()">Nie</div>

components/LoadingScreen.vue

@@ -3,6 +3,6 @@
     class="flex min-h-dvh justify-center items-center text-5xl flex-col gap-10"
   >
     <span class="loading loading-spinner loading-xl scale-[2.5] block" />
-    <span class="block">Ładowanie</span>
+    <span class="block">{{ $t('loading') }}</span>
   </div>
 </template>

components/MediaBox.vue

@@ -64,8 +64,8 @@ function onVideoLoad() {
     >
       <source :src="joinURL(cdnUrl, media.name + '.mp4')" type="video/mp4" />
     </video>
-    <span v-else class="text-5xl font-bold flex items-center justify-center"
+    <span v-else class="text-5xl font-bold flex items-center justify-center">{{
-      >Pytanie bez wizualizacji</span
+      $t('questionWithoutVisual')
-    >
+    }}</span>
   </div>
 </template>

components/ResultModal.vue

@@ -17,18 +17,24 @@ defineEmits(['again', 'home']);
       <h1 class="text-[1.5rem]">
         <slot name="title" />
       </h1>
-      <div class="*:inline">Kategoria: <slot name="category" /></div>
+      <div class="*:inline">
-      <div class="*:inline">Punkty: <slot name="points" /> / 74</div>
+        {{ $t('categoryWord') }}: <slot name="category" />
-      <div class="*:inline">Wynik: <slot name="resultTrueFalse" /></div>
+      </div>
+      <div class="*:inline">
+        {{ $t('points') }}: <slot name="points" /> / 74
+      </div>
+      <div class="*:inline">
+        {{ $t('result') }}: <slot name="resultTrueFalse" />
+      </div>
       <div class="flex flex-row gap-2">
         <div class="btn btn-soft" @click="$emit('home')">
-          Wróć na stronę główną
+          {{ $t('goBackToHomePage') }}
         </div>
         <div class="btn btn-outline" @click="$emit('again')">
-          Rozpocznij jeszcze raz
+          {{ $t('startAgain') }}
         </div>
         <button class="btn btn-neutral" @click="myModal?.close()">
-          Przejrzyj odpowiedzi
+          {{ $t('viewAnswers') }}
         </button>
       </div>
     </div>

components/bar/Top.vue

@@ -23,19 +23,19 @@ const timeRemainingFriendly = computed(() => {
     class="flex flex-none flex-row gap-4 *:flex *:items-center *:gap-3 border-b p-4 border-base-300 bg-base-100"
   >
     <div>
-      <span class="block">Wartość punktowa</span>
+      <span class="block">{{ $t('pointValue') }}</span>
       <div class="info-little-box">
         {{ points }}
       </div>
     </div>
     <div>
-      <span class="block">Aktualna kategoria</span>
+      <span class="block">{{ $t('currentCategory') }}</span>
       <div class="info-little-box">
         {{ category }}
       </div>
     </div>
     <div v-if="typeof timeRemaining !== 'undefined'">
-      <span class="block">Czas do końca egzaminu</span>
+      <span class="block">{{ $t('timeToExamEnd') }}</span>
       <div class="info-little-box w-20 text-center">
         {{ timeRemainingFriendly }}
       </div>

components/bar/right/Exam.vue

@@ -54,21 +54,25 @@ onKeyStroke(['X', 'x'], () => {
       class="btn btn-warning btn-xl"
       @click="tryEndExam()"
     >
-      Zakończ egzamin
+      {{ $t('endExam') }}
     </button>
 
     <div class="flex flex-row gap-6 *:flex-1 w-full">
       <CurrentQuestionCount
         :class="now === 'basic' ? 'font-semibold' : 'opacity-45'"
       >
-        <template #title> Pytania podstawowe </template>
+        <template #title>
+          {{ $t('basicQuestions') }}
+        </template>
         <template #count> {{ countBasic + 1 }} / 20 </template>
       </CurrentQuestionCount>
 
       <CurrentQuestionCount
         :class="now === 'advanced' ? 'font-semibold' : 'opacity-45'"
       >
-        <template #title> Pytania specjalistyczne </template>
+        <template #title>
+          {{ $t('advancedQuestions') }}
+        </template>
         <template #count> {{ countAdvanced + 1 }} / 12 </template>
       </CurrentQuestionCount>
     </div>
@@ -77,14 +81,16 @@ onKeyStroke(['X', 'x'], () => {
       v-if="phase == 'set-basic'"
       class="text-center text-xl flex flex-col gap-2"
     >
-      <span>Czas na zapoznanie się z pytaniem</span>
+      <span>
+        {{ $t('timeToGetAcquaintedWithTheQuestion') }}
+      </span>
       <div class="flex flex-row items-stretch gap-2">
         <div
           ref="start-button"
           class="btn btn-primary"
           @click="emit('nextTime')"
         >
-          START
+          {{ $t('startBtn') }}
         </div>
         <div class="h-full flex-1 relative">
           <progress
@@ -93,14 +99,16 @@ onKeyStroke(['X', 'x'], () => {
             max="20"
           ></progress>
           <span class="block set-translate z-10 text-black text-2xl">
-            {{ time >= 0 ? time : 0 }}s
+            {{ time >= 0 ? time : 0 }} {{ $t('second') }}
           </span>
         </div>
       </div>
     </div>
 
     <div v-else class="text-center text-xl flex flex-col gap-2">
-      <span>Czas na udzielenie odpowiedzi</span>
+      <span>
+        {{ $t('timeForAnswer') }}
+      </span>
       <div class="h-9 relative">
         <progress
           class="progress progress-warning w-full h-full"
@@ -108,46 +116,23 @@ onKeyStroke(['X', 'x'], () => {
           :max="phase == 'start-basic' ? 15 : 45"
         ></progress>
         <span class="block set-translate z-10 text-black text-2xl">
-          {{ time >= 0 ? time : 0 }}s
+          {{ time >= 0 ? time : 0 }} {{ $t('second') }}
         </span>
       </div>
     </div>
 
     <div class="flex-1">
-      <span class="text-xl">Skróty klawiszowe</span>
+      <span class="text-xl">
+        {{ $t('keybinds') }}
+      </span>
       <table class="table table-sm">
         <tbody>
-          <tr>
+          <tr
-            <td>S</td>
+            v-for="key in ['S', 'D', 'X', 'T / Y', 'N', 'A', 'B', 'C']"
-            <td>niebieski przycisk start</td>
+            :key="`keybind${key}`"
-          </tr>
+          >
-          <tr>
+            <td>{{ key }}</td>
-            <td>D</td>
+            <td>{{ $t(`bindedKeys.${key}`) }}</td>
-            <td>następne pytanie</td>
-          </tr>
-          <tr>
-            <td>X</td>
-            <td>zakończ egzamin</td>
-          </tr>
-          <tr>
-            <td>T / Y</td>
-            <td>Tak</td>
-          </tr>
-          <tr>
-            <td>N</td>
-            <td>Nie</td>
-          </tr>
-          <tr>
-            <td>A</td>
-            <td>A</td>
-          </tr>
-          <tr>
-            <td>B</td>
-            <td>B</td>
-          </tr>
-          <tr>
-            <td>C</td>
-            <td>C</td>
           </tr>
         </tbody>
       </table>
@@ -159,7 +144,7 @@ onKeyStroke(['X', 'x'], () => {
       :disabled="ending || setBasic"
       @click="emit('nextQuestion')"
     >
-      Następne pytanie
+      {{ $t('nextQuestion') }}
     </button>
   </div>
 </template>

components/bar/right/Result.vue

@@ -21,11 +21,11 @@ const emit = defineEmits<{
     class="flex flex-col items-stretch p-4 gap-6 border-l border-base-300 bg-base-100"
   >
     <div class="btn btn-warning btn-xl" @click="$emit('home')">
-      Wróć na stronę główną
+      {{ $t('goBackToHomePage') }}
     </div>
 
     <button class="btn btn-info btn-lg" @click="emit('changeNow', 'basic')">
-      Pytania podstawowe
+      {{ $t('basicQuestions') }}
     </button>
 
     <div
@@ -55,7 +55,7 @@ const emit = defineEmits<{
     </div>
 
     <button class="btn btn-info btn-lg" @click="emit('changeNow', 'advanced')">
-      Pytania specjalistyczne
+      {{ $t('advancedQuestions') }}
     </button>
 
     <div
@@ -84,11 +84,15 @@ const emit = defineEmits<{
       />
     </div>
     <div class="flex-1">
-      <div class="*:inline">Punkty: <slot name="points" /> / 74</div>
+      <div class="*:inline">
-      <div class="*:inline">Wynik: <slot name="resultTrueFalse" /></div>
+        {{ $t('points') }}: <slot name="points" /> / 74
+      </div>
+      <div class="*:inline">
+        {{ $t('result') }}: <slot name="resultTrueFalse" />
+      </div>
     </div>
     <div class="btn btn-warning btn-xl" @click="$emit('again')">
-      Rozpocznij jeszcze raz
+      {{ $t('startAgain') }}
     </div>
   </div>
 </template>

i18n/locales/de.json

@@ -1,15 +1,73 @@
 {
-  "mainTitle": "die testenrn",
+  "mainTitle": "Test na prawo jazdy",
-  "categoryDescriptionA": "motocykle bez ograniczeń mocy",
+  "loading": "Ładowanie",
-  "categoryDescriptionB": "⭐ samochody osobowe do 3,5 t",
+  "keybinds": "Skróty klawiszowe",
-  "categoryDescriptionC": "pojazdy ciężarowe powyżej 3,5 t",
+  "bindedKeys": {
-  "categoryDescriptionD": "autobusy",
+    "S": "niebieski przycisk start",
-  "categoryDescriptionT": "ciągniki rolnicze i pojazdy wolnobieżne",
+    "D": "następne pytanie",
-  "categoryDescriptionAM": "motorowery i lekkie czterokołowce",
+    "X": "zakończ egzamin",
-  "categoryDescriptionA1": "motocykle do 125 cm³ i 11 kW",
+    "T / Y": "Tak",
-  "categoryDescriptionA2": "motocykle do 35 kW",
+    "N": "Nie",
-  "categoryDescriptionB1": "czterokołowce (np. quady)",
+    "A": "A",
-  "categoryDescriptionC1": "pojazdy od 3,5 t do 7,5 t",
+    "B": "B",
-  "categoryDescriptionD1": "autobusy do 16 pasażerów",
+    "C": "C"
-  "categoryDescriptionPT": "tramwaje"
+  },
+  "endExam": "Zakończ egzamin",
+  "examEnd": "Koniec egzaminu",
+  "basicQuestions": "Pytania podstawowe",
+  "advancedQuestions": "Pytania specjalistyczne",
+  "timeToGetAcquaintedWithTheQuestion": "Czas na zapoznanie się z pytaniem",
+  "timeForAnswer": "Czas na udzielenie odpowiedzi",
+  "startBtn": "START",
+  "second": "s",
+  "nextQuestion": "Następne pytanie",
+  "goBackToHomePage": "Wróć na stronę główną",
+  "points": "Punkty",
+  "pointValue": "Wartość punktowa",
+  "currentCategory": "Aktualna kategoria",
+  "timeToExamEnd": "Czas do końca egzaminu",
+  "result": "Wynik",
+  "startAgain": "Rozpocznij jeszcze raz",
+  "viewAnswers": "Przejrzyj odpowiedzi",
+  "doYouReallyWantToEndExam": "Czy na pewno chcesz zakończyć egzamin?",
+  "questionWithoutVisual": "Pytanie bez wizualizacji",
+  "categoryWord": "Kategoria",
+  "anAnomalyHasOccured": "Nastąpiła anomalia",
+  "redirectFrom": "Przekierowanie z",
+  "end": "Koniec",
+  "question": "Pytanie",
+  "anAPIErrorOccured": "Wystąpił błąd z API",
+  "positive": "pozytywny",
+  "negative": "negatywny",
+  "theoreticalExam": "Egzamin teorytyczny",
+  "category": {
+    "description": {
+      "A": "motocykle bez ograniczeń mocy",
+      "B": "⭐ samochody osobowe do 3,5 t",
+      "C": "pojazdy ciężarowe powyżej 3,5 t",
+      "D": "autobusy",
+      "T": "ciągniki rolnicze i pojazdy wolnobieżne",
+      "AM": "motorowery i lekkie czterokołowce",
+      "A1": "motocykle do 125 cm³ i 11 kW",
+      "A2": "motocykle do 35 kW",
+      "B1": "czterokołowce (np. quady)",
+      "C1": "pojazdy od 3,5 t do 7,5 t",
+      "D1": "autobusy do 16 pasażerów",
+      "PT": "tramwaje"
+    },
+    "age": {
+      "A": "(24 lata; lub 20 lat jeśli masz kat. A2 min. 2 lata)",
+      "B": "(18 lat)",
+      "C": "(21 lat; lub 18 lat z kwalifikacją wstępną)",
+      "D": "(24 lata; lub 21 lat z kwalifikacją wstępną)",
+      "T": "(16 lat)",
+      "AM": "(14 lat)",
+      "A1": "(16 lat)",
+      "A2": "(18 lat)",
+      "B1": "(16 lat)",
+      "C1": "(18 lat)",
+      "D1": "(21 lat; lub 18 lat z kwalifikacją wstępną)",
+      "PT": "(21 lat)"
+    }
+  }
 }

i18n/locales/en.json

@@ -1,15 +1,73 @@
 {
-  "mainTitle": "Test for exam drievrsdy",
+  "mainTitle": "Test na prawo jazdy",
-  "categoryDescriptionA": "motocykle bez ograniczeń mocy",
+  "loading": "Ładowanie",
-  "categoryDescriptionB": "⭐ samochody osobowe do 3,5 t",
+  "keybinds": "Skróty klawiszowe",
-  "categoryDescriptionC": "pojazdy ciężarowe powyżej 3,5 t",
+  "bindedKeys": {
-  "categoryDescriptionD": "autobusy",
+    "S": "niebieski przycisk start",
-  "categoryDescriptionT": "ciągniki rolnicze i pojazdy wolnobieżne",
+    "D": "następne pytanie",
-  "categoryDescriptionAM": "motorowery i lekkie czterokołowce",
+    "X": "zakończ egzamin",
-  "categoryDescriptionA1": "motocykle do 125 cm³ i 11 kW",
+    "T / Y": "Tak",
-  "categoryDescriptionA2": "motocykle do 35 kW",
+    "N": "Nie",
-  "categoryDescriptionB1": "czterokołowce (np. quady)",
+    "A": "A",
-  "categoryDescriptionC1": "pojazdy od 3,5 t do 7,5 t",
+    "B": "B",
-  "categoryDescriptionD1": "autobusy do 16 pasażerów",
+    "C": "C"
-  "categoryDescriptionPT": "tramwaje"
+  },
+  "endExam": "Zakończ egzamin",
+  "examEnd": "Koniec egzaminu",
+  "basicQuestions": "Pytania podstawowe",
+  "advancedQuestions": "Pytania specjalistyczne",
+  "timeToGetAcquaintedWithTheQuestion": "Czas na zapoznanie się z pytaniem",
+  "timeForAnswer": "Czas na udzielenie odpowiedzi",
+  "startBtn": "START",
+  "second": "s",
+  "nextQuestion": "Następne pytanie",
+  "goBackToHomePage": "Wróć na stronę główną",
+  "points": "Punkty",
+  "pointValue": "Wartość punktowa",
+  "currentCategory": "Aktualna kategoria",
+  "timeToExamEnd": "Czas do końca egzaminu",
+  "result": "Wynik",
+  "startAgain": "Rozpocznij jeszcze raz",
+  "viewAnswers": "Przejrzyj odpowiedzi",
+  "doYouReallyWantToEndExam": "Czy na pewno chcesz zakończyć egzamin?",
+  "questionWithoutVisual": "Pytanie bez wizualizacji",
+  "categoryWord": "Kategoria",
+  "anAnomalyHasOccured": "Nastąpiła anomalia",
+  "redirectFrom": "Przekierowanie z",
+  "end": "Koniec",
+  "question": "Pytanie",
+  "anAPIErrorOccured": "Wystąpił błąd z API",
+  "positive": "pozytywny",
+  "negative": "negatywny",
+  "theoreticalExam": "Egzamin teorytyczny",
+  "category": {
+    "description": {
+      "A": "motocykle bez ograniczeń mocy",
+      "B": "⭐ samochody osobowe do 3,5 t",
+      "C": "pojazdy ciężarowe powyżej 3,5 t",
+      "D": "autobusy",
+      "T": "ciągniki rolnicze i pojazdy wolnobieżne",
+      "AM": "motorowery i lekkie czterokołowce",
+      "A1": "motocykle do 125 cm³ i 11 kW",
+      "A2": "motocykle do 35 kW",
+      "B1": "czterokołowce (np. quady)",
+      "C1": "pojazdy od 3,5 t do 7,5 t",
+      "D1": "autobusy do 16 pasażerów",
+      "PT": "tramwaje"
+    },
+    "age": {
+      "A": "(24 lata; lub 20 lat jeśli masz kat. A2 min. 2 lata)",
+      "B": "(18 lat)",
+      "C": "(21 lat; lub 18 lat z kwalifikacją wstępną)",
+      "D": "(24 lata; lub 21 lat z kwalifikacją wstępną)",
+      "T": "(16 lat)",
+      "AM": "(14 lat)",
+      "A1": "(16 lat)",
+      "A2": "(18 lat)",
+      "B1": "(16 lat)",
+      "C1": "(18 lat)",
+      "D1": "(21 lat; lub 18 lat z kwalifikacją wstępną)",
+      "PT": "(21 lat)"
+    }
+  }
 }

i18n/locales/pl.json

@@ -28,6 +28,18 @@
   "timeToExamEnd": "Czas do końca egzaminu",
   "result": "Wynik",
   "startAgain": "Rozpocznij jeszcze raz",
+  "viewAnswers": "Przejrzyj odpowiedzi",
+  "doYouReallyWantToEndExam": "Czy na pewno chcesz zakończyć egzamin?",
+  "questionWithoutVisual": "Pytanie bez wizualizacji",
+  "categoryWord": "Kategoria",
+  "anAnomalyHasOccured": "Nastąpiła anomalia",
+  "redirectFrom": "Przekierowanie z",
+  "end": "Koniec",
+  "question": "Pytanie",
+  "anAPIErrorOccured": "Wystąpił błąd z API",
+  "positive": "pozytywny",
+  "negative": "negatywny",
+  "theoreticalExam": "Egzamin teorytyczny",
   "category": {
     "description": {
       "A": "motocykle bez ograniczeń mocy",

i18n/locales/ua.json

@@ -1,16 +1,73 @@
 {
-  "mainTitle": "ykrainska mova test",
+  "mainTitle": "Test na prawo jazdy",
-  "categoryDescriptionA": "motocykle bez ograniczeń mocy",
+  "loading": "Ładowanie",
-  "categoryDescriptionB": "⭐ samochody osobowe do 3,5 t",
+  "keybinds": "Skróty klawiszowe",
-  "categoryDescriptionC": "pojazdy ciężarowe powyżej 3,5 t",
+  "bindedKeys": {
-  "categoryDescriptionD": "autobusy",
+    "S": "niebieski przycisk start",
-  "categoryDescriptionT": "ciągniki rolnicze i pojazdy wolnobieżne",
+    "D": "następne pytanie",
-  "categoryDescriptionAM": "motorowery i lekkie czterokołowce",
+    "X": "zakończ egzamin",
-  "categoryDescriptionA1": "motocykle do 125 cm³ i 11 kW",
+    "T / Y": "Tak",
-  "categoryDescriptionA2": "motocykle do 35 kW",
+    "N": "Nie",
-  "categoryDescriptionB1": "czterokołowce (np. quady)",
+    "A": "A",
-  "categoryDescriptionC1": "pojazdy od 3,5 t do 7,5 t",
+    "B": "B",
-  "categoryDescriptionD1": "autobusy do 16 pasażerów",
+    "C": "C"
-  "categoryDescriptionPT": "tramwaje",
+  },
-  "second": "с"
+  "endExam": "Zakończ egzamin",
+  "examEnd": "Koniec egzaminu",
+  "basicQuestions": "Pytania podstawowe",
+  "advancedQuestions": "Pytania specjalistyczne",
+  "timeToGetAcquaintedWithTheQuestion": "Czas na zapoznanie się z pytaniem",
+  "timeForAnswer": "Czas na udzielenie odpowiedzi",
+  "startBtn": "START",
+  "second": "s",
+  "nextQuestion": "Następne pytanie",
+  "goBackToHomePage": "Wróć na stronę główną",
+  "points": "Punkty",
+  "pointValue": "Wartość punktowa",
+  "currentCategory": "Aktualna kategoria",
+  "timeToExamEnd": "Czas do końca egzaminu",
+  "result": "Wynik",
+  "startAgain": "Rozpocznij jeszcze raz",
+  "viewAnswers": "Przejrzyj odpowiedzi",
+  "doYouReallyWantToEndExam": "Czy na pewno chcesz zakończyć egzamin?",
+  "questionWithoutVisual": "Pytanie bez wizualizacji",
+  "categoryWord": "Kategoria",
+  "anAnomalyHasOccured": "Nastąpiła anomalia",
+  "redirectFrom": "Przekierowanie z",
+  "end": "Koniec",
+  "question": "Pytanie",
+  "anAPIErrorOccured": "Wystąpił błąd z API",
+  "positive": "pozytywny",
+  "negative": "negatywny",
+  "theoreticalExam": "Egzamin teorytyczny",
+  "category": {
+    "description": {
+      "A": "motocykle bez ograniczeń mocy",
+      "B": "⭐ samochody osobowe do 3,5 t",
+      "C": "pojazdy ciężarowe powyżej 3,5 t",
+      "D": "autobusy",
+      "T": "ciągniki rolnicze i pojazdy wolnobieżne",
+      "AM": "motorowery i lekkie czterokołowce",
+      "A1": "motocykle do 125 cm³ i 11 kW",
+      "A2": "motocykle do 35 kW",
+      "B1": "czterokołowce (np. quady)",
+      "C1": "pojazdy od 3,5 t do 7,5 t",
+      "D1": "autobusy do 16 pasażerów",
+      "PT": "tramwaje"
+    },
+    "age": {
+      "A": "(24 lata; lub 20 lat jeśli masz kat. A2 min. 2 lata)",
+      "B": "(18 lat)",
+      "C": "(21 lat; lub 18 lat z kwalifikacją wstępną)",
+      "D": "(24 lata; lub 21 lat z kwalifikacją wstępną)",
+      "T": "(16 lat)",
+      "AM": "(14 lat)",
+      "A1": "(16 lat)",
+      "A2": "(18 lat)",
+      "B1": "(16 lat)",
+      "C1": "(18 lat)",
+      "D1": "(21 lat; lub 18 lat z kwalifikacją wstępną)",
+      "PT": "(21 lat)"
+    }
+  }
 }

nuxt.config.ts

@@ -9,6 +9,7 @@ export default defineNuxtConfig({
     'pinia-plugin-persistedstate/nuxt',
     '@nuxt/eslint',
     '@nuxt/image',
+    '@nuxtjs/i18n',
   ],
   ssr: false,
   imports: {
@@ -35,6 +36,15 @@ export default defineNuxtConfig({
       },
     },
   },
+  i18n: {
+    locales: [
+      { code: 'pl', language: 'pl-PL', file: 'pl.json' },
+      { code: 'en', language: 'en-GB', file: 'en.json' },
+      { code: 'de', language: 'de-DE', file: 'de.json' },
+      { code: 'ua', language: 'uk-UK', file: 'ua.json' },
+    ],
+    defaultLocale: 'pl',
+  },
   image: {
     providers: {
       selfhost: {

package.json

@@ -17,6 +17,7 @@
     "@libsql/client": "^0.15.15",
     "@nuxt/fonts": "0.11.1",
     "@nuxt/image": "1.10.0",
+    "@nuxtjs/i18n": "10.2.1",
     "@nuxtjs/tailwindcss": "6.13.2",
     "@pinia/nuxt": "0.11.0",
     "@vueuse/core": "^14.1.0",
@@ -33,6 +34,7 @@
     "pinia-plugin-persistedstate": "^4.7.1",
     "ufo": "^1.6.1",
     "vue": "latest",
+    "vue-country-flag-next": "^2.3.2",
     "vue-router": "latest"
   },
   "packageManager": "pnpm@10.4.1+sha512.c753b6c3ad7afa13af388fa6d808035a008e30ea9993f58c6663e2bc5ff21679aa834db094987129aa4d488b86df57f7b634981b2f827cdcacc698cc0cfb88af",

pages/anomaly.vue

@@ -6,17 +6,20 @@ const advancedStore = useAdvancedStore();
 
 <template>
   <div class="flex flex-col gap-2 items-start m-2">
-    <h1 class="text-2xl">Nastąpiła anomalia</h1>
+    <h1 class="text-2xl">{{ $t('anAnomalyHasOccured') }}</h1>
     <br />
-    Przekierowanie z: {{ useRoute().redirectedFrom ?? '""' }} <br />
+    {{ $t('redirectFrom') }}: {{ useRoute().redirectedFrom ?? '""' }} <br />
-    Kategoria:
+    {{ $t('categoryWord') }}:
     {{ examStore.category != '' ? examStore.category : '""' }}
     <br />
-    Koniec: {{ examStore.end }} <br />
+    {{ $t('end') }}: {{ examStore.end }} <br />
-    Pytania podstawowe: <code class="text-xs">{{ basicStore.basic }}</code>
+    {{ $t('basicQuestions') }}:
+    <code class="text-xs">{{ basicStore.basic }}</code>
     <br />
-    Pytania specjalistyczne:
+    {{ $t('advancedQuestions') }}:
     <code class="text-xs">{{ advancedStore.advanced }}</code> <br />
-    <NuxtLink to="/" class="btn btn-primary"> Wróć na stronę główną </NuxtLink>
+    <NuxtLink to="/" class="btn btn-primary">
+      {{ $t('goBackToHomePage') }}
+    </NuxtLink>
   </div>
 </template>

pages/exam.vue

@@ -80,7 +80,7 @@ function clickNext() {
 
 onMounted(() => {
   useHead({
-    title: 'Pytanie 1/20',
+    title: `${$t('question')} 1/20`,
   });
   window.addEventListener('beforeunload', preventRefresh);
 
@@ -90,9 +90,9 @@ onMounted(() => {
 
   watchEffect(() => {
     if (now.value === 'basic')
-      useHead({ title: `Pytanie ${countBasic.value + 1}/20` });
+      useHead({ title: `${$t('question')} ${countBasic.value + 1}/20` });
     if (now.value === 'advanced')
-      useHead({ title: `Pytanie ${countAdvanced.value + 1}/12` });
+      useHead({ title: `${$t('question')} ${countAdvanced.value + 1}/12` });
   });
 
   watchEffect(() => {
@@ -257,7 +257,10 @@ const showEndModal = ref(false);
       </div>
     </div>
     <div v-else-if="statusBasic === 'error' || statusAdvanced === 'error'">
-      An API error occurred: {{ errorBasic }} {{ errorAdvanced }}
+      {{ $t('anAPIErrorOccured') }}:<br />
+      <code class="text-sm">{{ errorBasic }}</code>
+      <br />
+      <code class="text-sm">{{ errorAdvanced }}</code>
     </div>
     <LoadingScreen v-else />
     <EndModal

pages/index.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import categories, { opis, wiek } from '~/categories';
+import CountryFlag from 'vue-country-flag-next';
+import categories from '~/categories';
 
 onMounted(() => {
   useHead({
-    title: 'Test na prawo jazdy',
+    title: $t('mainTitle'),
   });
 });
 
+const { setLocale } = useI18n();
+
 const loading = ref(false);
 
 const examStore = useExamStore();
@@ -21,17 +24,37 @@ function setAndGo(category: string) {
     }
   }
 }
+
+const langSelect = ref(examStore.lang);
+
+function changeLanguage() {
+  examStore.setLang(langSelect.value);
+  setLocale(langSelect.value as 'pl' | 'en' | 'de' | 'ua');
+}
 </script>
 
 <template>
   <div>
     <div v-if="!loading" class="text-3xl m-2 flex flex-col gap-2">
-      <span>Test na prawo jazdy</span>
+      <span>{{ $t('mainTitle') }}</span>
+      <div class="flex gap-2">
+        <CountryFlag
+          class="block border border-1 border-black"
+          :country="langSelect != 'en' ? langSelect : 'gb'"
+          size="big"
+        />
+        <select v-model="langSelect" class="select" @change="changeLanguage">
+          <option value="pl">Polish (Polski)</option>
+          <option value="en">English</option>
+          <option value="de">German (Deutsch)</option>
+          <option value="ua">Ukrainian (Українська)</option>
+        </select>
+      </div>
       <div
         class="flex flex-col flex-wrap gap-2 items-start p-4 bg-slate-100 border-1 border-slate-500 rounded-xl w-fit"
       >
         <div
-          v-for="[index, category] of categories.entries()"
+          v-for="category in categories"
           :key="`btn-${category}`"
           class="flex flex-row gap-3 items-center"
         >
@@ -39,8 +62,8 @@ function setAndGo(category: string) {
             {{ category }}
           </button>
           <div class="flex flex-col text-sm">
-            <div>{{ opis[index] }}</div>
+            <div>{{ $t(`category.description.${category}`) }}</div>
-            <div>{{ wiek[index] }}</div>
+            <div>{{ $t(`category.age.${category}`) }}</div>
           </div>
         </div>
       </div>

pages/result.vue

@@ -23,7 +23,9 @@ advancedStore.advanced.forEach((answer) => {
   }
 });
 
-const resultTrueFalse = ref(points.value >= 68 ? 'pozytywny' : 'negatywny');
+const resultTrueFalse = ref(
+  points.value >= 68 ? $t('positive') : $t('negative'),
+);
 
 onMounted(() => {
   useHead({
@@ -105,7 +107,7 @@ async function home() {
     <LoadingScreen v-if="loading" />
     <div v-else>
       <ResultModal @again="again" @home="home">
-        <template #title>Egzamin teorytyczny</template>
+        <template #title>{{ $t('theoreticalExam') }}</template>
         <template #category>{{ examStore.category }}</template>
         <template #points>{{ points }}</template>
         <template #resultTrueFalse>{{ resultTrueFalse }} </template>

store/examStore.ts

@@ -30,6 +30,7 @@ export const useExamStore = defineStore('examStore', {
   state: () => ({
     category: '',
     end: false,
+    lang: 'pl',
   }),
   actions: {
     async setCategory(category: string) {
@@ -38,6 +39,9 @@ export const useExamStore = defineStore('examStore', {
     async setEnd(end: boolean) {
       this.end = end;
     },
+    async setLang(lang: string) {
+      this.lang = lang;
+    },
     async mildReset() {
       this.end = false;
       useBasicStore().set([]);