From 80d6f2b85f71e56e24f75b652f4075b21f5004da Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Tue, 22 Aug 2023 00:33:51 +0200
Subject: [PATCH] =?UTF-8?q?t=C5=82umaczenie=20PL/EN=20(wip,=20cz.2)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/app/Footer.vue                 |  10 +-
 src/components/sections/LogoSection.vue       |  51 ++++++-
 src/components/sections/TrainImageSection.vue |  43 +++---
 src/components/tabs/NumberGeneratorTab.vue    |  22 +--
 src/components/tabs/StockGeneratorTab.vue     |  38 +++---
 src/components/tabs/StockListTab.vue          |  67 +++++----
 src/components/tabs/WikiListTab.vue           |  57 ++++----
 src/constants/numberGeneratorData.json        |  14 +-
 src/i18n.ts                                   |   8 ++
 src/locales/en.json                           | 127 +++++++++++++++++-
 src/locales/pl.json                           |  88 +++++++-----
 src/main.ts                                   |   6 +-
 12 files changed, 361 insertions(+), 170 deletions(-)

diff --git a/src/components/app/Footer.vue b/src/components/app/Footer.vue
index 44d802d..1d908cb 100644
--- a/src/components/app/Footer.vue
+++ b/src/components/app/Footer.vue
@@ -1,19 +1,15 @@
 <template>
   <footer>
     <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"
-        >
+      <template #tos>
+        <a style="color: #ccc" :href="$t('footer.tos-href')" 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
+      {{ $t('footer.version-check', { version: store.stockData.version }) }}
     </div>
 
     <div>
diff --git a/src/components/sections/LogoSection.vue b/src/components/sections/LogoSection.vue
index a78766d..5e2b33b 100644
--- a/src/components/sections/LogoSection.vue
+++ b/src/components/sections/LogoSection.vue
@@ -1,36 +1,75 @@
 <template>
-  <section class="logo-section" @click="navigate">
-    <img src="/images/logo.svg" alt="logo pojazdownik" />
+  <section class="logo-section">
+    <img src="/images/logo.svg" alt="logo pojazdownik" @click="navigate" />
+
+    <div class="actions">
+      <button
+        class="btn btn--text"
+        v-for="action in localeActions"
+        :data-selected="$i18n.locale == action.locale"
+        @click="chooseLocale(action.locale)"
+      >
+        {{ action.name }}
+      </button>
+    </div>
   </section>
 </template>
 
 <script lang="ts">
 export default {
-  setup() {
-    return {};
+  data() {
+    return {
+      localeActions: [
+        {
+          name: 'POLSKI',
+          locale: 'pl',
+        },
+        {
+          name: 'ENGLISH',
+          locale: 'en',
+        },
+      ],
+    };
   },
-
   methods: {
     navigate() {
       window.location.pathname = '';
     },
+
+    chooseLocale(locale: string) {
+      this.$i18n.locale = locale;
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
+@import '../../styles/global.scss';
+
 .logo-section {
   grid-row: 1;
   grid-column: 1;
   margin-bottom: 1.5em;
 
   display: flex;
-  justify-content: center;
   align-items: center;
+  flex-direction: column;
+  gap: 0.5em;
 
   cursor: pointer;
 }
 
+.actions {
+  display: flex;
+  gap: 0.5em;
+
+  button[data-selected='true'] {
+    font-weight: bold;
+    color: $accentColor;
+    text-decoration: underline;
+  }
+}
+
 img {
   max-width: 25em;
   width: 100%;
diff --git a/src/components/sections/TrainImageSection.vue b/src/components/sections/TrainImageSection.vue
index cf5452c..b612dc3 100644
--- a/src/components/sections/TrainImageSection.vue
+++ b/src/components/sections/TrainImageSection.vue
@@ -1,14 +1,14 @@
 <template>
   <section class="train-image-section">
     <div class="train-image__wrapper">
-      <div class="train-image__content" :class="{'supporter': store.chosenVehicle?.supportersOnly}">
+      <div class="train-image__content" :class="{ supporter: store.chosenVehicle?.supportersOnly }">
         <transition name="img-message-anim">
           <div class="empty-message" v-if="store.imageLoading && store.chosenVehicle?.imageSrc">
-            ŁADOWANIE OBRAZU...
+            {{ $t('preview.loading') }}
           </div>
         </transition>
 
-        <div class="no-img" v-if="!store.chosenVehicle">PODGLĄD WYBRANEGO POJAZDU</div>
+        <div class="no-img" v-if="!store.chosenVehicle">{{ $t('preview.title') }}</div>
 
         <img
           v-if="store.chosenVehicle"
@@ -23,11 +23,11 @@
 
       <div class="train-image__info" v-if="store.chosenVehicle">
         <b class="text--accent">{{ store.chosenVehicle.type }}</b> &bull;
-        <b style="color: #ccc">{{
-          vehicleTypes[
-            isLocomotive(store.chosenVehicle) ? store.chosenVehicle.power : store.chosenVehicle.useType || 'loco-e'
-          ]
-        }}</b>
+        <b style="color: #ccc">
+          {{
+            $t(`preview.${isLocomotive(store.chosenVehicle) ? store.chosenVehicle.power : store.chosenVehicle.useType}`)
+          }}
+        </b>
 
         <div style="color: #ccc">
           <div>
@@ -35,21 +35,23 @@
             {{ store.chosenVehicle.maxSpeed }} km/h
           </div>
 
-          <div v-if="isLocomotive(store.chosenVehicle)">Typ kabiny: {{ store.chosenVehicle.cabinType }}</div>
+          <div v-if="isLocomotive(store.chosenVehicle)">
+            {{ $t('preview.cabin') }} {{ store.chosenVehicle.cabinType }}
+          </div>
 
           <div v-else>
             {{
-              store.chosenVehicle.useType == 'car-cargo'
-                ? store.stockData?.usage[store.chosenVehicle.constructionType]
-                : 'Typ konstrukcji: ' + store.chosenVehicle.constructionType
+              store.chosenVehicle.useType == 'car-cargo' // ? store.stockData?.usage[store.chosenVehicle.constructionType]
+                ? $t(`usage.${store.chosenVehicle.constructionType}`)
+                : `${$t('preview.construction')} ${store.chosenVehicle.constructionType}`
             }}
           </div>
 
-          <b style="color: salmon;" v-if="store.chosenVehicle.supportersOnly">* TYLKO DLA SPONSORÓW</b>
+          <b style="color: salmon" v-if="store.chosenVehicle.supportersOnly">{{ $t('preview.sponsor-only') }}</b>
         </div>
       </div>
 
-      <div class="train-image__info" v-else>Wybierz pojazd lub wagon, aby zobaczyć jego podgląd powyżej</div>
+      <div class="train-image__info" v-else>{{ $t('preview.desc') }}</div>
     </div>
   </section>
 </template>
@@ -70,19 +72,6 @@ export default defineComponent({
     };
   },
 
-  data() {
-    return {
-      vehicleTypes: {
-        'loco-e': 'ELEKTROWÓZ',
-        'loco-s': 'SPALINOWÓZ',
-        'loco-ezt': 'EZT',
-        'loco-szt': 'SZT',
-        'car-passenger': 'WAGON PASAŻERSKI',
-        'car-cargo': 'WAGON TOWAROWY',
-      } as { [key: string]: string },
-    };
-  },
-
   watch: {
     chosenVehicle(vehicle: Vehicle, prevVehicle: Vehicle) {
       if (vehicle && vehicle.type != prevVehicle?.type) {
diff --git a/src/components/tabs/NumberGeneratorTab.vue b/src/components/tabs/NumberGeneratorTab.vue
index 142ca97..3fc4f19 100644
--- a/src/components/tabs/NumberGeneratorTab.vue
+++ b/src/components/tabs/NumberGeneratorTab.vue
@@ -1,45 +1,45 @@
 <template>
   <div class="number-generator tab">
     <div class="tab_header">
-      <h2>GENERATOR NUMERU POCIĄGU</h2>
+      <h2>{{ $t('numgen.title') }}</h2>
     </div>
 
     <div class="tab_content">
       <div class="options">
         <select v-model="beginRegionName" @change="randomizeTrainNumber()">
-          <option :value="null" disabled>Początkowy obszar konstrukcyjny</option>
+          <option :value="null" disabled>{{ $t('numgen.start-region') }}</option>
           <option v-for="(_, name) in genData.regionNumbers" :value="name">{{ name }}</option>
         </select>
 
         <select v-model="endRegionName" @change="randomizeTrainNumber()">
-          <option :value="null" disabled>Końcowy obszar konstrukcyjny</option>
+          <option :value="null" disabled>{{ $t('numgen.end-region') }}</option>
           <option v-for="(_, name) in genData.regionNumbers" :value="name">{{ name }}</option>
         </select>
 
         <select v-model="categoryRules" @change="randomizeTrainNumber()">
-          <option :value="null" disabled>Kategoria pociągu</option>
-          <option v-for="(rules, category) in genData.categories" :value="rules">{{ category }}</option>
+          <option :value="null" disabled>{{ $t('numgen.train-category') }}</option>
+          <option v-for="(rules, category) in genData.categories" :value="rules">{{ $t(`numgen.categories.${category}`) }}</option>
         </select>
       </div>
 
       <div class="generated-number" @click="copyNumber">
         <span v-if="trainNumber">
-          Wygenerowany numer pociągu: <b class="text--accent">{{ trainNumber }}</b>
+          {{ $t('numgen.number-info') }} <b class="text--accent">{{ trainNumber }}</b>
         </span>
-        <span v-else>Wybierz kategorię oraz obszary konstrukcyjne (opcjonalnie)</span>
+        <span v-else>{{ $t('numgen.warning') }}</span>
       </div>
 
       <div class="tab_links">
-        <a href="https://wiki.td2.info.pl/index.php?title=Zasady_numeracji_poci%C4%85g%C3%B3w" target="_blank">
-          > Szczegółowe zasady numeracji (wikipedia TD2)
+        <a :href="$t('numgen.td2-wiki-link')" target="_blank">
+          {{ $t('numgen.td2-wiki') }}
         </a>
       </div>
 
       <hr />
 
       <div class="tab_actions">
-        <button class="btn" @click="randomizeTrainNumber(true)">LOSUJ OBSZARY</button>
-        <button class="btn" @click="randomizeTrainNumber(false)">LOSUJ NUMER</button>
+        <button class="btn" @click="randomizeTrainNumber(true)">{{ $t('numgen.action-random-region') }}</button>
+        <button class="btn" @click="randomizeTrainNumber(false)">{{ $t('numgen.action-random-number') }}</button>
       </div>
     </div>
   </div>
diff --git a/src/components/tabs/StockGeneratorTab.vue b/src/components/tabs/StockGeneratorTab.vue
index 673a835..cc0d360 100644
--- a/src/components/tabs/StockGeneratorTab.vue
+++ b/src/components/tabs/StockGeneratorTab.vue
@@ -1,62 +1,61 @@
 <template>
   <div class="stock-generator tab">
     <div class="tab_header">
-      <h2>GENERATOR SKŁADU TOWAROWEGO</h2>
+      <h2>{{ $t('stockgen.title') }}</h2>
     </div>
 
     <div class="tab_content">
       <div>
-        <h2>WŁAŚCIWOŚCI SKŁADU</h2>
+        <h2>{{ $t('stockgen.properties-title') }}</h2>
 
         <b class="text--accent">
-          &lArr; Dodaj lokomotywę na pierwsze miejsce listy, aby uwzględnić ją przy losowaniu składu!
+          {{ $t('stockgen.properties-desc') }}
         </b>
 
         <div class="tab_attributes">
           <label>
-            Maksymalna masa (t)
+            {{ $t('stockgen.input-mass') }}
             <input type="number" v-model="maxMass" step="100" max="4000" min="0" />
           </label>
 
           <label>
-            Maks. długość (m)
+            {{ $t('stockgen.input-length') }}
             <input type="number" v-model="maxLength" step="25" max="650" min="0" />
           </label>
 
           <label>
-            Maks. liczba wagonów
+            {{ $t('stockgen.input-carcount') }}
             <input type="number" v-model="maxCarCount" step="1" max="60" min="1" />
           </label>
         </div>
       </div>
 
       <div>
-        <h2>ŁADUNEK</h2>
-        <b>Wybierz ładunki, którymi chcesz wypełnić dostępne wagony:</b>
+        <h2>{{ $t('stockgen.cargo-title') }}</h2>
+        <b>{{ $t('stockgen.cargo-desc') }}</b>
       </div>
 
       <div class="generator_cargo">
         <button
           class="btn"
-          :data-chosen="chosenCargoTypes.includes(k.toString())"
-          v-for="(v, k) in store.stockData?.generator.cargo"
-          @click="toggleCargoChosen(k.toString(), v)"
+          :data-chosen="chosenCargoTypes.includes(cargoName.toString())"
+          v-for="(cargoArray, cargoName) in store.stockData?.generator.cargo"
+          @click="toggleCargoChosen(cargoName.toString(), cargoArray)"
         >
-          {{ k }}
+          {{ $t(`cargo.${cargoName}`) }}
         </button>
       </div>
 
       <div>
-        <h2>WAGONY Z WYBRANYMI ŁADUNKAMI</h2>
+        <h2>{{ $t('stockgen.chosen-title') }}</h2>
 
         <div class="generator_warning">
           <span v-if="computedChosenCarTypes.size == 0">
-            Wybierz co najmniej jeden ładunek, aby zobaczyć wagony, które go posiadają!
+            {{ $t('stockgen.chosen-empty-warning') }}
           </span>
 
           <span v-else>
-            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).
+            {{ $t('stockgen.chosen-warning') }}
           </span>
         </div>
       </div>
@@ -80,14 +79,15 @@
 
       <div class="tab_actions">
         <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock()">
-          WYGENERUJ
+          {{ $t('stockgen.action-generate') }}
         </button>
+
         <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock(true)">
-          WYGENERUJ PRÓŻNE WAGONY
+          {{ $t('stockgen.action-generate-empty') }}
         </button>
 
         <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="resetChosenCargo">
-          ZRESETUJ ŁADUNKI
+          {{ $t('stockgen.action-reset') }}
         </button>
       </div>
     </div>
diff --git a/src/components/tabs/StockListTab.vue b/src/components/tabs/StockListTab.vue
index 97f162b..7971cc9 100644
--- a/src/components/tabs/StockListTab.vue
+++ b/src/components/tabs/StockListTab.vue
@@ -1,8 +1,12 @@
 <template>
   <section class="stock-list-tab">
     <div class="stock_controls" :data-disabled="store.chosenStockListIndex == -1">
-      <b class="no">
-        POJAZD NR <span class="text--accent">{{ store.chosenStockListIndex + 1 }}</span> &nbsp;
+      <b v-if="store.chosenStockListIndex >= 0">
+        {{ $t('stocklist.vehicle-no') }} <span class="text--accent">{{ store.chosenStockListIndex + 1 }}</span> &nbsp;
+      </b>
+
+      <b v-else>
+        {{ $t('stocklist.no-vehicle-chosen') }}
       </b>
 
       <button
@@ -11,7 +15,7 @@
         @click="moveUpStock(store.chosenStockListIndex)"
       >
         <img :src="getIconURL('higher')" alt="move up vehicle" />
-        PRZENIEŚ WYŻEJ
+        {{ $t('stocklist.action-move-up') }}
       </button>
 
       <button
@@ -20,7 +24,7 @@
         @click="moveDownStock(store.chosenStockListIndex)"
       >
         <img :src="getIconURL('lower')" alt="move down vehicle" />
-        PRZENIEŚ NIŻEJ
+        {{ $t('stocklist.action-move-down') }}
       </button>
 
       <button
@@ -29,7 +33,7 @@
         @click="removeStock(store.chosenStockListIndex)"
       >
         <img :src="getIconURL('remove')" alt="remove vehicle" />
-        USUŃ
+        {{ $t('stocklist.action-remove') }}
       </button>
     </div>
 
@@ -37,7 +41,7 @@
       <label class="file-label">
         <div class="btn btn--image">
           <img src="/images/icon-upload.svg" alt="" />
-          WCZYTAJ
+          {{ $t('stocklist.action-upload') }}
         </div>
 
         <input type="file" @change="uploadStock" ref="conFile" accept=".con,.txt" />
@@ -45,22 +49,22 @@
 
       <button class="btn btn--image" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="downloadStock">
         <img src="/images/icon-download.svg" alt="download icon" />
-        POBIERZ
+        {{ $t('stocklist.action-download') }}
       </button>
 
       <button class="btn btn--image" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="copyToClipboard">
         <img src="/images/icon-copy.svg" alt="copy icon" />
-        SKOPIUJ
+        {{ $t('stocklist.action-copy') }}
       </button>
 
       <button class="btn btn--image" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="resetStock">
         <img src="/images/icon-reset.svg" alt="reset icon" />
-        ZRESETUJ
+        {{ $t('stocklist.action-reset') }}
       </button>
 
       <button class="btn btn--image" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="shuffleCars">
         <img src="/images/icon-shuffle.svg" alt="shuffle icon" />
-        PRZETASUJ
+        {{ $t('stocklist.action-shuffle') }}
       </button>
     </div>
 
@@ -74,11 +78,12 @@
       </b>
 
       <span>
-        Masa: <span class="text--accent">{{ store.totalMass }}t</span> (dopuszczalna:
-        <span class="text--accent">{{ store.acceptableMass ? store.acceptableMass + 't' : '-' }}</span
-        >) - Długość:
+        {{ $t('stocklist.mass') }} <span class="text--accent">{{ store.totalMass }}t</span> ({{
+          $t('stocklist.mass-accepted')
+        }}: <span class="text--accent">{{ store.acceptableMass ? store.acceptableMass + 't' : '-' }}</span
+        >) - {{ $t('stocklist.length') }}:
         <span class="text--accent">{{ store.totalLength }}m</span>
-        - vMax: <span class="text--accent">{{ store.maxStockSpeed }} km/h</span>
+        - {{ $t('stocklist.vmax') }}: <span class="text--accent">{{ store.maxStockSpeed }} km/h</span>
       </span>
     </div>
 
@@ -89,34 +94,38 @@
           v-model="store.isColdStart"
           :disabled="!locoSupportsColdStart(store.stockList[0]?.constructionType || '')"
         />
-        Zimny start lokomotywy czołowej (tylko elektrowozy typów 303E i 203E)
+        {{ $t('stocklist.coldstart-info') }}
       </label>
     </div>
 
     <div class="stock_warnings" v-if="stockHasWarnings">
-      <div class="warning" v-if="locoNotSuitable">
-        Lokomotywy EP07 i EP08 są przeznaczone jedynie do ruchu pasażerskiego!
-      </div>
+      <div class="warning" v-if="locoNotSuitable">(!) {{ $t('stocklist.warning-not-suitable') }}</div>
 
       <div class="warning" v-if="trainTooLong && store.isTrainPassenger">
-        Maksymalna długość składów pasażerskich nie może przekraczać 350m!
+        (!) {{ $t('stocklist.warning-passenger-too-long') }}
       </div>
 
       <div class="warning" v-if="trainTooLong && !store.isTrainPassenger">
-        Maksymalna długość składów innych niż pasażerskie nie może przekraczać 650m!
+        (!) {{ $t('stocklist.warning-freight-too-long') }}
       </div>
 
       <div class="warning" v-if="trainTooHeavy">
-        Ten skład jest za ciężki! Sprawdź
-        <a
-          target="_blank"
-          href="https://docs.google.com/spreadsheets/d/1bFXUsHsAu4youmNz-46Q1HslZaaoklvfoBDS553TnNk/edit"
-        >
-          dopuszczalne masy składów
-        </a>
+        (!)
+        <i18n-t keypath="stocklist.warning-too-heavy">
+          <template #href>
+            <a
+              target="_blank"
+              href="https://docs.google.com/spreadsheets/d/1bFXUsHsAu4youmNz-46Q1HslZaaoklvfoBDS553TnNk/edit"
+            >
+              {{ $t('stocklist.acceptable-mass-docs') }}
+            </a>
+          </template>
+        </i18n-t>
       </div>
 
-      <div class="warning" v-if="tooManyLocomotives">Ten skład posiada za dużo pojazdów trakcyjnych!</div>
+      <div class="warning" v-if="tooManyLocomotives">
+        {{ $t('stocklist.warning-too-many-locos') }}
+      </div>
     </div>
 
     <StockThumbnails :onListItemClick="onListItemClick" />
@@ -124,7 +133,7 @@
     <!-- Stock list -->
     <ul ref="stock_list">
       <li v-if="stockIsEmpty" class="list-empty">
-        <div class="stock-info">Lista pojazdów jest pusta!</div>
+        <div class="stock-info">{{ $t('stocklist.list-empty') }}</div>
       </li>
 
       <TransitionGroup name="stock-list-anim">
diff --git a/src/components/tabs/WikiListTab.vue b/src/components/tabs/WikiListTab.vue
index 25354ff..993e32c 100644
--- a/src/components/tabs/WikiListTab.vue
+++ b/src/components/tabs/WikiListTab.vue
@@ -1,18 +1,22 @@
 <template>
   <section class="wiki-list tab">
     <div class="tab_header">
-      <h2>LISTA DOSTĘPNYCH POJAZDÓW</h2>
+      <h2>{{ $t('wiki.title') }}</h2>
     </div>
 
     <div class="tab_content">
       <div class="actions-panel">
         <div class="actions-panel_vehicles">
-          <button class="btn btn--choice" @click="changeWikiMode('locomotives')">POJ. TRAKCYJNE</button>
-          <button class="btn btn--choice" @click="changeWikiMode('carWagons')">WAGONY</button>
+          <button class="btn btn--choice" @click="changeWikiMode('locomotives')">
+            {{ $t('wiki.action-vehicles') }}
+          </button>
+          <button class="btn btn--choice" @click="changeWikiMode('carWagons')">
+            {{ $t('wiki.action-carriages') }}
+          </button>
         </div>
 
         <div class="actions-panel_search">
-          <input type="text" placeholder="Wyszukaj pojazd..." v-model="searchedVehicleTypeName" />
+          <input type="text" :placeholder="$t('wiki.search')" v-model="searchedVehicleTypeName" />
         </div>
       </div>
 
@@ -21,7 +25,7 @@
           <thead>
             <tr>
               <th v-for="header in wikiMode == 'locomotives' ? locoHeaders : carHeaders" @click="toggleSorter(header)">
-                {{ header.name }}
+                {{ $t(`wiki.header.${header.id}`) }}
 
                 <span v-if="currentModeSorter.id == header.id">
                   {{ currentModeSorter.direction == 1 ? `&uArr;` : `&dArr;` }}
@@ -47,7 +51,7 @@
               </td>
 
               <td>{{ loco.type }}</td>
-              <td>{{ vehicleTypes[loco.power] }}</td>
+              <td>{{ $t(`wiki.${loco.power}`) }}</td>
               <td>{{ loco.constructionType }}</td>
               <td>{{ locoSupportsColdStart(loco.constructionType) ? `&check;` : '&cross;' }}</td>
               <td>{{ loco.length }}m</td>
@@ -108,39 +112,31 @@ type SorterID =
   | 'coldStart';
 
 interface WikiHeader {
-  name: string;
   id: SorterID;
   sortable: boolean;
 }
 
 const locoHeaders: WikiHeader[] = [
-  { name: 'Zdjęcie', id: 'image', sortable: false },
-  { name: 'Nazwa', id: 'type', sortable: true },
-  { name: 'Rodzaj', id: 'power', sortable: true },
-  { name: 'Konstrukcja', id: 'constructionType', sortable: true },
-  { name: 'Zimny start', id: 'coldStart', sortable: true },
-  { name: 'Długość', id: 'length', sortable: true },
-  { name: 'Masa', id: 'mass', sortable: true },
-  { name: 'Prędkość', id: 'maxSpeed', sortable: true },
+  { id: 'image', sortable: false },
+  { id: 'type', sortable: true },
+  { id: 'power', sortable: true },
+  { id: 'constructionType', sortable: true },
+  { id: 'coldStart', sortable: true },
+  { id: 'length', sortable: true },
+  { id: 'mass', sortable: true },
+  { id: 'maxSpeed', sortable: true },
 ];
 
 const carHeaders: WikiHeader[] = [
-  { name: 'Zdjęcie', id: 'image', sortable: false },
-  { name: 'Nazwa', id: 'type', sortable: true },
-  { name: 'Konstrukcja', id: 'constructionType', sortable: true },
-  { name: 'Długość', id: 'length', sortable: true },
-  { name: 'Masa', id: 'mass', sortable: true },
-  { name: 'Prędkość', id: 'maxSpeed', sortable: true },
-  { name: 'Ładunki', id: 'cargoCount', sortable: true },
+  { id: 'image', sortable: false },
+  { id: 'type', sortable: true },
+  { id: 'constructionType', sortable: true },
+  { id: 'length', sortable: true },
+  { id: 'mass', sortable: true },
+  { id: 'maxSpeed', sortable: true },
+  { id: 'cargoCount', sortable: true },
 ];
 
-const vehicleTypes: { [key: string]: string } = {
-  'loco-ezt': 'EZT',
-  'loco-szt': 'SZT',
-  'loco-s': 'Spalinowóz',
-  'loco-e': 'Elektrowóz',
-};
-
 export default defineComponent({
   mixins: [stockPreviewMixin, stockMixin],
 
@@ -149,7 +145,6 @@ export default defineComponent({
       store: useStore(),
       locoHeaders,
       carHeaders,
-      vehicleTypes,
 
       locosScrollTop: 0,
       carsScrollTop: 0,
@@ -348,7 +343,7 @@ export default defineComponent({
     align-items: stretch;
     flex-direction: column;
   }
-  
+
   .actions-panel_vehicles {
     display: grid;
     grid-template-columns: 1fr 1fr;
diff --git a/src/constants/numberGeneratorData.json b/src/constants/numberGeneratorData.json
index ad6cd4c..b000f07 100644
--- a/src/constants/numberGeneratorData.json
+++ b/src/constants/numberGeneratorData.json
@@ -26,13 +26,13 @@
     "Rezerwa": [89, 92, 98]
   },
   "categories": {
-    "ekspres krajowy (EI)": "2:00-99:2",
-    "(między)wojewódzki pośpieszny (MP/RP)": "2:050-169:3",
-    "wojewódzki osobowy (RO)": "2:200-999:3",
-    "próżny \"służbowy\" (PW)": "2:6;3:0-899:3",
-    "towarowy do przewozów masowych (TM)": "2:4;3:0-899:3",
-    "towarowy do obsługi stacji (TK)": "2:3;3:0-899:3",
-    "lokomotywa luzem (LT)": "2:5;3:0-899:3"
+    "EI": "2:00-99:2",
+    "MP/RP": "2:050-169:3",
+    "RO": "2:200-999:3",
+    "PW": "2:6;3:0-899:3",
+    "TM": "2:4;3:0-899:3",
+    "TK": "2:3;3:0-899:3",
+    "LT": "2:5;3:0-899:3"
   }
 }
 
diff --git a/src/i18n.ts b/src/i18n.ts
index 2c60054..2b976de 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -1,5 +1,6 @@
 import localePL from './locales/pl.json';
 import localeEN from './locales/en.json';
+import { I18n } from 'vue-i18n';
 
 export type LocaleMessageSchema = typeof localePL;
 type LocaleKey = 'en' | 'pl';
@@ -8,3 +9,10 @@ export const locales: { [key in LocaleKey]: LocaleMessageSchema } = {
   en: localeEN,
   pl: localePL,
 };
+
+export async function fetchBackendTranslations(i18n: I18n) {
+  const localeData = await (await fetch(`https://spythere.github.io/api/td2/data/locales.json`)).json();
+
+  i18n.global.mergeLocaleMessage('pl', localeData.pl);
+  i18n.global.mergeLocaleMessage('en', localeData.en);
+}
diff --git a/src/locales/en.json b/src/locales/en.json
index 65008ef..7a61f6c 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,5 +1,130 @@
 {
   "app": {
-    "title": "Rolling stock editor"
+    "title": "ROLLING STOCK EDITOR"
+  },
+  "footer": {
+    "disclaimer": "This site has only an informational intent. The author does not carry responsibility for creating trains not allowed by {tos}!",
+    "tos": "Train Driver 2 simulator rules",
+    "tos-href": "https://docs.google.com/document/d/1UAAPUtN0d_RoS4RgOzEzllJZJhA0VcizzCzKW4QylbY/edit#heading=h.1ldcvhomwjp9",
+    "version-check": "Site is complete for version {version} of Train Driver 2 simulator"
+  },
+  "inputs": {
+    "title": "CHOOSE A VEHICLE",
+    "input-vehicle": "Choose a traction unit",
+    "input-carwagon": "Choose a carriage",
+    "cargo-title": "Cargo (only selected freight cars)",
+    "no-cargo-available": "no cargo available",
+    "cargo-empty": "empty",
+    "loco-e": "ELECTR.",
+    "loco-s": "DIESEL",
+    "loco-ezt": "EMU",
+    "loco-szt": "DMU",
+    "car-passenger": "PASSENGER",
+    "car-cargo": "FREIGHT",
+    "action-add": "ADD NEW",
+    "action-swap": "SWAP WITH",
+    "real-stock": "REAL POLISH STOCK"
+  },
+  "preview": {
+    "title": "RAILWAY VEHICLE PREVIEW",
+    "loading": "IMAGE LOADING...",
+    "desc": "Choose a railway vehicle above to see its preview",
+    "sponsor-only": "* SPONSORS ONLY",
+    "loco-e": "ELECTRIC LOCO",
+    "loco-s": "DIESEL LOCO",
+    "loco-ezt": "ELECTRIC M.U.",
+    "loco-szt": "DIESEL M.U.",
+    "car-passenger": "PASSENGER CARRIAGE",
+    "car-cargo": "FREIGHT CAR",
+    "cabin": "Cabin type:",
+    "construction": "Construction type:"
+  },
+  "topbar": {
+    "stock-list": "STOCK",
+    "wiki-list": "VEHICLES",
+    "number-generator": "NUMBER GEN.",
+    "stock-generator": "STOCK GEN."
+  },
+  "stocklist": {
+    "vehicle-no": "VEHICLE NO.",
+    "no-vehicle-chosen": "NO VEHICLE CHOSEN",
+    "action-move-up": "MOVE UP",
+    "action-move-down": "MOVE DOWN",
+    "action-remove": "REMOVE",
+    "action-upload": "LOAD",
+    "action-download": "DOWNLOAD",
+    "action-copy": "COPY",
+    "action-reset": "RESET",
+    "action-shuffle": "SHUFFLE",
+    "mass": "Mass",
+    "mass-accepted": "accepted",
+    "length": "Length",
+    "vmax": "vMax",
+    "coldstart-info": "Cold start heading locomotive (only locos 303E & 203E type)",
+    "list-empty": "Stock list is empty!",
+    "warning-not-suitable": "EP07 & EP08 type locomotives are designed for passenger traffic only!",
+    "warning-passenger-too-long": "Maximum length of a passenger train may not be greater than 350m!",
+    "warning-freight-too-long": "Maximum length of a freight train may not be greater than 650m!",
+    "warning-too-many-locos": "This train has too many traction units!",
+    "warning-too-heavy": "This train is too heavy! Check {href}",
+    "acceptable-mass-docs": "acceptable rolling stock masses (PL)"
+  },
+  "stockgen": {
+    "title": "FREIGHT TRAIN GENERATOR",
+    "properties-title": "ROLLING STOCK PROPERTIES",
+    "properties-desc": "⇐ Add a locomotive in the first place of the stock list to include it in a drawing!",
+    "input-mass": "Max. mass (t)",
+    "input-length": "Max. length (m)",
+    "input-carcount": "Max. car count",
+    "cargo-title": "CARGO",
+    "cargo-desc": "Choose cargo you want to fill available cars with:",
+    "chosen-title": "CARS WITH CHOSEN CARGO",
+    "chosen-empty-warning": "Choose at least one cargo type to see available cars!",
+    "chosen-warning": "Cars containing chosen cargo are shown below. Hover over a type to see a preview of the car. Click it to include/exclude it from a drawing (only highlighted types will be included).",
+    "action-generate": "GENERATE",
+    "action-generate-empty": "GENERATE EMPTY",
+    "action-reset": "RESET CARGO"
+  },
+  "numgen": {
+    "title": "TRAIN NUMBER GENERATOR",
+    "start-region": "Beginning construction region",
+    "end-region": "Terminating construction region",
+    "train-category": "Train category",
+    "number-info": "Generated train number:",
+    "warning": "Choose category and construction regions (optionally)",
+    "td2-wiki": "> Polish rules of train numbering (TD2 wiki)",
+    "td2-wiki-link": "https://wiki.td2.info.pl/index.php?title=Zasady_numeracji_poci%C4%85g%C3%B3w/en",
+    "action-random-region": "DRAW REGIONS",
+    "action-random-number": "DRAW A NUMBER",
+    "categories": {
+      "EI": "domestic express (EI)",
+      "MP/RP": "(inter)voivodeship bullet (MP/RP)",
+      "RO": "regional passenger (RO)",
+      "PW": "empty passenger (PW)",
+      "TM": "mass transport freight (TM)",
+      "TK": "non-mass transport freight (TK)",
+      "LT": "locomotive alone (LT)"
+    }
+  },
+  "wiki": {
+    "title": "LIST OF AVAILABLE VEHICLES",
+    "action-vehicles": "TRACTION UNITS",
+    "action-carriages": "CARRIAGES",
+    "search": "Search for a vehicle...",
+    "header": {
+      "image": "Image",
+      "type": "Name",
+      "power": "Type",
+      "constructionType": "Construction",
+      "coldStart": "Cold start",
+      "length": "Length",
+      "mass": "Mass",
+      "maxSpeed": "Speed",
+      "cargoCount": "Cargo count"
+    },
+    "loco-ezt": "EMU",
+    "loco-szt": "DMU",
+    "loco-s": "Diesel locomotive",
+    "loco-e": "Electric locomotive"
   }
 }
diff --git a/src/locales/pl.json b/src/locales/pl.json
index 4ebdf50..b22f480 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -3,12 +3,13 @@
     "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}!",
+    "disclaimer": "Ta strona ma charakter informacyjny. Autor nie ponosi odpowiedzialności za tworzenie pociągów niezgodnych z {tos}!",
     "tos": "regulaminem symulatora Train Driver 2",
+    "tos-href": "https://docs.google.com/document/d/1UAAPUtN0d_RoS4RgOzEzllJZJhA0VcizzCzKW4QylbY/edit",
     "version-check": "Strona jest kompletna dla wersji {version} symulatora TD2"
   },
   "inputs": {
-    "title": "WYBIERZ POJAZDY / WAGONY",
+    "title": "WYBIERZ POJAZD SZYNOWY",
     "input-vehicle": "Wybierz pojazd trakcyjny",
     "input-carwagon": "Wybierz wagon",
     "cargo-title": "Ładunek (tylko wybrane towarowe)",
@@ -26,13 +27,17 @@
   },
   "preview": {
     "title": "PODGLĄD WYBRANEGO POJAZDU",
+    "loading": "ŁADOWANIE OBRAZU...",
     "desc": "Wybierz pojazd lub wagon, aby zobaczyć jego podgląd powyżej",
+    "sponsor-only": "* TYLKO DLA SPONSORÓW",
     "loco-e": "ELEKTROWÓZ",
     "loco-s": "SPALINOWÓZ",
     "loco-ezt": "EZT",
     "loco-szt": "SZT",
     "car-passenger": "WAGON PASAŻERSKI",
-    "car-cargo": "WAGON TOWAROWY"
+    "car-cargo": "WAGON TOWAROWY",
+    "cabin": "Typ kabiny:",
+    "construction": "Typ konstrukcji:"
   },
   "topbar": {
     "stock-list": "SKŁAD",
@@ -42,6 +47,7 @@
   },
   "stocklist": {
     "vehicle-no": "POJAZD NR",
+    "no-vehicle-chosen": "NIE WYBRANO POJAZDU",
     "action-move-up": "PRZENIEŚ WYŻEJ",
     "action-move-down": "PRZENIEŚ NIŻEJ",
     "action-remove": "USUŃ",
@@ -51,11 +57,17 @@
     "action-reset": "ZRESETUJ",
     "action-shuffle": "PRZETASUJ",
     "mass": "Masa",
-    "mass-accepted": "Masa dopuszczalna",
+    "mass-accepted": "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!"
+    "list-empty": "Lista pojazdów jest pusta!",
+    "warning-not-suitable": "Lokomotywy EP07 i EP08 są przeznaczone jedynie do ruchu pasażerskiego!",
+    "warning-passenger-too-long": "Maksymalna długość składów pasażerskich nie może przekraczać 350m!",
+    "warning-freight-too-long": "Maksymalna długość składów innych niż pasażerskie nie może przekraczać 650m!",
+    "warning-too-many-locos": "Ten skład posiada za dużo pojazdów trakcyjnych!",
+    "warning-too-heavy": "Ten skład jest za ciężki! Sprawdź {href}",
+    "acceptable-mass-docs": "dopuszczalne masy składów"
   },
   "stockgen": {
     "title": "GENERATOR SKŁADU TOWAROWEGO",
@@ -73,30 +85,46 @@
     "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"
+  "numgen": {
+    "title": "GENERATOR NUMERU POCIĄGU",
+    "start-region": "Początkowy obszar konstrukcyjny",
+    "end-region": "Końcowy obszar konstrukcyjny",
+    "train-category": "Kategoria pociągu",
+    "number-info": "Wygenerowany numer pociągu:",
+    "warning": "Wybierz kategorię oraz obszary konstrukcyjne (opcjonalnie)",
+    "td2-wiki": "> Szczegółowe zasady numeracji (wikipedia TD2)",
+    "td2-wiki-link": "https://wiki.td2.info.pl/index.php?title=Zasady_numeracji_poci%C4%85g%C3%B3w",
+    "action-random-region": "LOSUJ OBSZARY",
+    "action-random-number": "LOSUJ NUMER",
+    "categories": {
+      "EI": "ekspres krajowy (EI)",
+      "MP/RP": "(między)wojewódzki pośpieszny (MP/RP)",
+      "RO": "wojewódzki osobowy (RO)",
+      "PW": "próżny \"służbowy\" (PW)",
+      "TM": "towarowy do przewozów masowych (TM)",
+      "TK": "towarowy do obsługi stacji (TK)",
+      "LT": "lokomotywa luzem (LT)"
+    }
+  },
+  "wiki": {
+    "title": "LISTA DOSTĘPNYCH POJAZDÓW",
+    "action-vehicles": "POJ. TRAKCYJNE",
+    "action-carriages": "WAGONY",
+    "search": "Wyszukaj pojazd...",
+    "header": {
+      "image": "Zdjęcie",
+      "type": "Nazwa",
+      "power": "Rodzaj",
+      "constructionType": "Konstrukcja",
+      "coldStart": "Zimny start",
+      "length": "Długość",
+      "mass": "Masa",
+      "maxSpeed": "Prędkość",
+      "cargoCount": "Ładunki"
+    },
+    "loco-ezt": "EZT",
+    "loco-szt": "SZT",
+    "loco-s": "Spalinowóz",
+    "loco-e": "Elektrowóz"
   }
 }
diff --git a/src/main.ts b/src/main.ts
index 8522fb8..ca06d8f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,18 +4,20 @@ import { registerSW } from 'virtual:pwa-register';
 import { createI18n } from 'vue-i18n';
 
 import App from './App.vue';
-import { LocaleMessageSchema, locales } from './i18n';
+import { LocaleMessageSchema, fetchBackendTranslations, locales } from './i18n';
 
 const pinia = createPinia();
 
 const i18n = createI18n<[LocaleMessageSchema], 'en' | 'pl'>({
-  locale: 'pl',
+  locale: 'en',
   fallbackLocale: 'pl',
   legacy: false,
   globalInjection: true,
   messages: locales,
 });
 
+fetchBackendTranslations(i18n);
+
 registerSW({
   immediate: true,
 });