feature: tłumaczenie PL/EN (wip)

package.json

@@ -9,7 +9,8 @@
   },
   "dependencies": {
     "pinia": "^2.0.17",
-    "vue": "^3.2.37"
+    "vue": "^3.2.37",
+    "vue-i18n": "9"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.1.0",

src/components/app/Footer.vue

@@ -1,15 +1,16 @@
 <template>
   <footer>
-    <div class="text--grayed">
+    <i18n-t keypath="footer.disclaimer" tag="div" class="text--grayed">
-      Ta strona ma charakter informacyjny. Autor nie ponosi odpowiedzialności za tworzenie pociągów niezgodnych z
+      <template #href>
-      <a
+        <a
-        style="color: #ccc"
+          style="color: #ccc"
-        href="https://docs.google.com/document/d/1UAAPUtN0d_RoS4RgOzEzllJZJhA0VcizzCzKW4QylbY/edit"
+          href="https://docs.google.com/document/d/1UAAPUtN0d_RoS4RgOzEzllJZJhA0VcizzCzKW4QylbY/edit"
-        target="_blank"
+          target="_blank"
-      >
+        >
-        regulaminem symulatora Train Driver 2</a
+          {{ $t('footer.tos') }}
-      >!
+        </a>
-    </div>
+      </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-if="!store.chosenCar || !store.chosenCar.loadable">
-          <option :value="null" v-else>próżny</option>
+            {{ $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 } = {
+const sectionModes: SectionMode[] = ['stock-list', 'wiki-list', 'number-generator', 'stock-generator'];
-  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',
-};
 
 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');
 

yarn.lock

@@ -1019,6 +1019,44 @@
   resolved "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.15.tgz"
   integrity sha512-DjDa9ywLUUmjhV2Y9wUTIF+1XsmuFGvZoCmOWkli1XcNAh5t25cc7fgsCx4Zi/Uurep3TTLyDiKATgGEg61pkA==
 
+"@intlify/core-base@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-9.2.2.tgz#5353369b05cc9fe35cab95fe20afeb8a4481f939"
+  integrity sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==
+  dependencies:
+    "@intlify/devtools-if" "9.2.2"
+    "@intlify/message-compiler" "9.2.2"
+    "@intlify/shared" "9.2.2"
+    "@intlify/vue-devtools" "9.2.2"
+
+"@intlify/devtools-if@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/@intlify/devtools-if/-/devtools-if-9.2.2.tgz#b13d9ac4b4e2fe6d2e7daa556517a8061fe8bd39"
+  integrity sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==
+  dependencies:
+    "@intlify/shared" "9.2.2"
+
+"@intlify/message-compiler@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.2.2.tgz#e42ab6939b8ae5b3d21faf6a44045667a18bba1c"
+  integrity sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==
+  dependencies:
+    "@intlify/shared" "9.2.2"
+    source-map "0.6.1"
+
+"@intlify/shared@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.2.2.tgz#5011be9ca2b4ab86f8660739286e2707f9abb4a5"
+  integrity sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==
+
+"@intlify/vue-devtools@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/@intlify/vue-devtools/-/vue-devtools-9.2.2.tgz#b95701556daf7ebb3a2d45aa3ae9e6415aed8317"
+  integrity sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==
+  dependencies:
+    "@intlify/core-base" "9.2.2"
+    "@intlify/shared" "9.2.2"
+
 "@jridgewell/gen-mapping@^0.1.0":
   version "0.1.1"
   resolved "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz"
@@ -2511,7 +2549,7 @@ source-map-support@~0.5.20:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
-source-map@^0.6.0, source-map@^0.6.1:
+source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1:
   version "0.6.1"
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@@ -2742,6 +2780,16 @@ vue-demi@*:
   resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.5.tgz"
   integrity sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw==
 
+vue-i18n@9:
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.2.2.tgz#aeb49d9424923c77e0d6441e3f21dafcecd0e666"
+  integrity sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==
+  dependencies:
+    "@intlify/core-base" "9.2.2"
+    "@intlify/shared" "9.2.2"
+    "@intlify/vue-devtools" "9.2.2"
+    "@vue/devtools-api" "^6.2.1"
+
 vue-template-compiler@^2.7.14:
   version "2.7.14"
   resolved "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz"