tłumaczenie PL/EN (wip, cz.2)

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>

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>

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">

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;