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

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>

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%;

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) {

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;