feature: tłumaczenie PL/EN (wip)

src/components/app/Footer.vue

@@ -1,15 +1,16 @@
 <template>
   <footer>
-    <div class="text--grayed">
-      Ta strona ma charakter informacyjny. Autor nie ponosi odpowiedzialności za tworzenie pociągów niezgodnych z
-      <a
-        style="color: #ccc"
-        href="https://docs.google.com/document/d/1UAAPUtN0d_RoS4RgOzEzllJZJhA0VcizzCzKW4QylbY/edit"
-        target="_blank"
-      >
-        regulaminem symulatora Train Driver 2</a
-      >!
-    </div>
+    <i18n-t keypath="footer.disclaimer" tag="div" class="text--grayed">
+      <template #href>
+        <a
+          style="color: #ccc"
+          href="https://docs.google.com/document/d/1UAAPUtN0d_RoS4RgOzEzllJZJhA0VcizzCzKW4QylbY/edit"
+          target="_blank"
+        >
+          {{ $t('footer.tos') }}
+        </a>
+      </template>
+    </i18n-t>
 
     <div class="text--grayed" v-if="store.stockData">
       Strona jest kompletna dla wersji {{ store.stockData.version }} symulatora TD2

src/components/sections/InputsSection.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="inputs-section">
     <div class="input_container">
-      <h2 class="input_header">WYBIERZ POJAZDY / WAGONY</h2>
+      <h2 class="input_header">{{ $t('inputs.title') }}</h2>
 
       <div class="input_list type">
         <div class="vehicle-types locos">
@@ -11,7 +11,7 @@
             :data-selected="locoType.id == store.chosenLocoPower"
             @click="selectLocoType(locoType.id)"
           >
-            {{ locoType.value }}
+            {{ $t(`inputs.${locoType.id}`) }}
           </button>
         </div>
 
@@ -23,7 +23,7 @@
           @keydown.enter.prevent="addOrSwitchVehicle"
           @keydown.backspace="removeVehicle"
         >
-          <option :value="null" disabled>Wybierz pojazd trakcyjny</option>
+          <option :value="null" disabled>{{ $t('inputs.input-vehicle') }}</option>
           <option v-for="loco in locoOptions" :value="loco" :key="loco.type">
             {{ loco.type }}<b v-if="loco.supportersOnly">*</b>
           </option>
@@ -38,7 +38,7 @@
             :data-selected="carType.id == store.chosenCarUseType"
             @click="selectCarWagonType(carType.id)"
           >
-            {{ carType.value }}
+            {{ $t(`inputs.${carType.id}`) }}
           </button>
         </div>
 
@@ -50,7 +50,7 @@
           @keydown.enter.prevent="addOrSwitchVehicle"
           @keydown.backspace="removeVehicle"
         >
-          <option :value="null" disabled>Wybierz wagon</option>
+          <option :value="null" disabled>{{ $t('inputs.input-carwagon') }}</option>
 
           <option v-for="car in carOptions" :value="car" :key="car.type">
             {{ car.type }}<b v-if="car.supportersOnly">*</b>
@@ -59,7 +59,7 @@
       </div>
 
       <div class="input_list cargo">
-        <label for="cargo-select">Ładunek (tylko wybrane towarowe)</label>
+        <label for="cargo-select">{{ $t('inputs.cargo-title') }}</label>
         <select
           id="cargo-select"
           :disabled="
@@ -75,8 +75,10 @@
           @keydown.enter.prevent="addOrSwitchVehicle"
           @keydown.backspace="removeVehicle"
         >
-          <option :value="null" v-if="!store.chosenCar || !store.chosenCar.loadable">brak dostępnych ładunków</option>
-          <option :value="null" v-else>próżny</option>
+          <option :value="null" v-if="!store.chosenCar || !store.chosenCar.loadable">
+            {{ $t('inputs.no-cargo-available') }}
+          </option>
+          <option :value="null" v-else>{{ $t('inputs.cargo-empty') }}</option>
 
           <option v-for="cargo in store.chosenCar?.cargoList" :value="cargo" :key="cargo.id">
             {{ cargo.id }}
@@ -85,20 +87,24 @@
       </div>
 
       <div class="input_actions">
-        <button class="btn" @click="addVehicle(store.chosenVehicle, store.chosenCargo)">DODAJ NOWY</button>
+        <button class="btn" @click="addVehicle(store.chosenVehicle, store.chosenCargo)">
+          {{ $t('inputs.action-add') }}
+        </button>
         <button
           class="btn"
           @click="switchVehicles"
           :disabled="store.chosenStockListIndex == -1"
           :data-disabled="store.chosenStockListIndex == -1"
         >
-          ZAMIEŃ ZA
+          {{ $t('inputs.action-swap') }}
           <b class="text--accent">
             {{ store.chosenStockListIndex == -1 ? '' : `${store.chosenStockListIndex + 1}.` }}
           </b>
         </button>
 
-        <button class="btn" @click="store.isRealStockListCardOpen = true"><b>REALNE ZESTAWIENIA</b></button>
+        <button class="btn" @click="store.isRealStockListCardOpen = true">
+          <b>{{ $t('inputs.real-stock') }}</b>
+        </button>
       </div>
     </div>
   </section>
@@ -112,12 +118,6 @@ import { useStore } from '../../store';
 import stockPreviewMixin from '../../mixins/stockPreviewMixin';
 import stockMixin from '../../mixins/stockMixin';
 
-interface ILocoType {
-  id: string;
-  value: string;
-  desc: string;
-}
-
 export default defineComponent({
   mixins: [imageMixin, stockPreviewMixin, stockMixin],
 
@@ -125,35 +125,29 @@ export default defineComponent({
     locomotiveTypeList: [
       {
         id: 'loco-e',
-        value: 'ELEKTR',
         desc: 'ELEKTRYCZNE',
       },
       {
         id: 'loco-s',
-        value: 'SPAL',
         desc: 'SPALINOWE',
       },
       {
         id: 'loco-ezt',
-        value: 'EZT',
         desc: 'ELEKTR. ZESPOŁY TRAKCYJNE',
       },
       {
         id: 'loco-szt',
-        value: 'SZT',
         desc: 'SPAL. ZESPOŁY TRAKCYJNE',
       },
-    ] as ILocoType[],
+    ],
 
     carTypeList: [
       {
         id: 'car-passenger',
-        value: 'PAS',
         desc: 'PASAŻERSKIE',
       },
       {
         id: 'car-cargo',
-        value: 'TOW',
         desc: 'TOWAROWE',
       },
     ],

src/components/sections/StockSection.vue

@@ -4,11 +4,11 @@
       <button
         class="btn"
         ref="sectionButtonRefs"
-        v-for="(id, name, i) in sectionModes"
+        v-for="(id, i) in sectionModes"
         @click="chooseSection(id)"
         :data-selected="store.stockSectionMode == id"
       >
-        <span class="text--accent">{{ i + 1 }}.</span> {{ name }}
+        <span class="text--accent">{{ i + 1 }}.</span> {{ $t(`topbar.${id}`) }}
         <span v-if="id == 'stock-list'">({{ store.stockList.length }})</span>
       </button>
     </div>
@@ -34,19 +34,7 @@ const sectionButtonRefs = ref([]);
 const store = useStore();
 type SectionMode = typeof store.stockSectionMode;
 
-const sectionModes: { [key: string]: SectionMode } = {
-  SKŁAD: 'stock-list',
-  POJAZDY: 'wiki-list',
-  'GNR NUMERU': 'number-generator',
-  'GNR SKŁADU': 'stock-generator',
-};
-
-const sectionKeyIndexes: { [key: number]: SectionMode } = {
-  1: 'stock-list',
-  2: 'wiki-list',
-  3: 'number-generator',
-  4: 'stock-generator',
-};
+const sectionModes: SectionMode[] = ['stock-list', 'wiki-list', 'number-generator', 'stock-generator'];
 
 onMounted(() => {
   window.addEventListener('keydown', (e) => {
@@ -54,7 +42,7 @@ onMounted(() => {
 
     if (/[1234]/.test(e.key)) {
       const keyNum = Number(e.key);
-      store.stockSectionMode = sectionKeyIndexes[keyNum];
+      store.stockSectionMode = sectionModes[keyNum - 1];
       (sectionButtonRefs.value[keyNum - 1] as HTMLButtonElement).focus();
     }
   });

src/i18n.ts

@@ -0,0 +1,10 @@
+import localePL from './locales/pl.json';
+import localeEN from './locales/en.json';
+
+export type LocaleMessageSchema = typeof localePL;
+type LocaleKey = 'en' | 'pl';
+
+export const locales: { [key in LocaleKey]: LocaleMessageSchema } = {
+  en: localeEN,
+  pl: localePL,
+};

src/locales/en.json

@@ -0,0 +1,5 @@
+{
+  "app": {
+    "title": "Rolling stock editor"
+  }
+}

src/locales/pl.json

@@ -0,0 +1,102 @@
+{
+  "app": {
+    "title": "EDYTOR SKŁADÓW ONLINE"
+  },
+  "footer": {
+    "disclaimer": "Ta strona ma charakter informacyjny. Autor nie ponosi odpowiedzialności za tworzenie pociągów niezgodnych z {href}!",
+    "tos": "regulaminem symulatora Train Driver 2",
+    "version-check": "Strona jest kompletna dla wersji {version} symulatora TD2"
+  },
+  "inputs": {
+    "title": "WYBIERZ POJAZDY / WAGONY",
+    "input-vehicle": "Wybierz pojazd trakcyjny",
+    "input-carwagon": "Wybierz wagon",
+    "cargo-title": "Ładunek (tylko wybrane towarowe)",
+    "no-cargo-available": "brak dostępnych ładunków",
+    "cargo-empty": "próżny",
+    "loco-e": "ELEKTR.",
+    "loco-s": "SPAL.",
+    "loco-ezt": "EZT",
+    "loco-szt": "SZT",
+    "car-passenger": "PASAŻERSKIE",
+    "car-cargo": "TOWAROWE",
+    "action-add": "DODAJ NOWY",
+    "action-swap": "ZAMIEŃ ZA",
+    "real-stock": "REALNE ZESTAWIENIA"
+  },
+  "preview": {
+    "title": "PODGLĄD WYBRANEGO POJAZDU",
+    "desc": "Wybierz pojazd lub wagon, aby zobaczyć jego podgląd powyżej",
+    "loco-e": "ELEKTROWÓZ",
+    "loco-s": "SPALINOWÓZ",
+    "loco-ezt": "EZT",
+    "loco-szt": "SZT",
+    "car-passenger": "WAGON PASAŻERSKI",
+    "car-cargo": "WAGON TOWAROWY"
+  },
+  "topbar": {
+    "stock-list": "SKŁAD",
+    "wiki-list": "POJAZDY",
+    "number-generator": "GNR NUMERU",
+    "stock-generator": "GNR SKŁADU"
+  },
+  "stocklist": {
+    "vehicle-no": "POJAZD NR",
+    "action-move-up": "PRZENIEŚ WYŻEJ",
+    "action-move-down": "PRZENIEŚ NIŻEJ",
+    "action-remove": "USUŃ",
+    "action-upload": "WCZYTAJ",
+    "action-download": "POBIERZ",
+    "action-copy": "SKOPIUJ",
+    "action-reset": "ZRESETUJ",
+    "action-shuffle": "PRZETASUJ",
+    "mass": "Masa",
+    "mass-accepted": "Masa dopuszczalna",
+    "length": "Długość",
+    "vmax": "vMax",
+    "coldstart-info": "Zimny start lokomotywy czołowej (tylko elektrowozy typów 303E i 203E)",
+    "list-empty-warning": "Lista pojazdów jest pusta!"
+  },
+  "stockgen": {
+    "title": "GENERATOR SKŁADU TOWAROWEGO",
+    "properties-title": "WŁAŚCIWOŚCI SKŁADU",
+    "properties-desc": "⇐ Dodaj lokomotywę na pierwsze miejsce listy, aby uwzględnić ją przy losowaniu składu!",
+    "input-mass": "Maksymalna masa (t)",
+    "input-length": "Maks. długość (m)",
+    "input-carcount": "Maks. liczba wagonów",
+    "cargo-title": "ŁADUNEK",
+    "cargo-desc": "Wybierz ładunki, którymi chcesz wypełnić dostępne wagony:",
+    "chosen-title": "WAGONY Z WYBRANYMI ŁADUNKAMI",
+    "chosen-empty-warning": "Wybierz co najmniej jeden ładunek, aby zobaczyć wagony, które go posiadają!",
+    "chosen-warning": "Wagony posiadające wybrane ładunki. Najedź na nazwę, aby zobaczyć podgląd wagonu. Kliknij, aby wyłączyć z losowania (tylko podświetlone nazwy będą uwzględnione).",
+    "action-generate": "WYGENERUJ",
+    "action-generate-empty": "WYGENERUJ PRÓŻNE WAGONY",
+    "action-reset": "ZRESETUJ ŁADUNKI"
+  },
+  "cargo": {
+    "kontenery": "kontenery",
+    "chłodnia": "chłodnia",
+    "drobnica": "drobnica",
+    "węgiel": "węgiel",
+    "ruda": "ruda",
+    "piasek": "piasek",
+    "kreda": "kreda",
+    "kamień": "kamień",
+    "złom": "złom",
+    "paliwo": "paliwo",
+    "melasa": "melasa",
+    "żwir": "żwir",
+    "koła": "koła",
+    "drewno": "drewno",
+    "szyny": "szyny",
+    "kable": "kable",
+    "kruszywo": "kruszywo",
+    "techniczne": "techniczne",
+    "poczta": "poczta",
+    "cement": "cement",
+    "wapno": "wapno",
+    "soda": "soda",
+    "pszenica": "pszenica",
+    "kukurydza": "kukurydza"
+  }
+}

src/main.ts

@@ -1,14 +1,24 @@
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import { registerSW } from 'virtual:pwa-register';
+import { createI18n } from 'vue-i18n';
 
 import App from './App.vue';
+import { LocaleMessageSchema, locales } from './i18n';
 
 const pinia = createPinia();
 
-const updateSW = registerSW({
+const i18n = createI18n<[LocaleMessageSchema], 'en' | 'pl'>({
+  locale: 'pl',
+  fallbackLocale: 'pl',
+  legacy: false,
+  globalInjection: true,
+  messages: locales,
+});
+
+registerSW({
   immediate: true,
 });
 
-createApp(App).use(pinia).mount('#app');
+createApp(App).use(pinia).use(i18n).mount('#app');