Merge pull request #17 - Wersja 1.7.2

Wersja 1.7.2
bump: 1.7.2
2026-05-03 05:18:10 +00:00 · 2023-11-07 17:43:34 +01:00 · 2023-11-06 21:20:22 +01:00 · 2023-11-06 21:20:07 +01:00 · 2023-11-06 21:08:01 +01:00 · 2023-11-06 20:20:00 +01:00
79 changed files with 16422 additions and 12992 deletions
@@ -0,0 +1,18 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier/skip-formatting'
+  ],
+  rules: {
+    'vue/multi-word-component-names': 'off'
+  },
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}
@@ -1,20 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    node: true,
-  },
-  extends: [
-    "plugin:vue/vue3-essential",
-    "eslint:recommended",
-    "@vue/typescript/recommended",
-    "@vue/prettier",
-    "@vue/prettier/@typescript-eslint",
-  ],
-  parserOptions: {
-    ecmaVersion: 2020,
-  },
-  rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
-  },
-};
@@ -6,6 +6,7 @@ node_modules
 # local env files
 .env.local
 .env.*.local
+.env

 # Log files
 npm-debug.log*
@@ -21,4 +22,10 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
-node_modules
+node_modules
+
+# Dev files
+stockInfoDev.json
+
+# Lock files
+yarn.lock
@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"],
-};
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
  <head>
    <meta charset="utf-8" />
@@ -8,22 +8,20 @@
    <title>Pojazdownik</title>
    <meta name="description" content="Edytor pociągów online do symulatora Train Driver 2" />

-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-    <link rel="manifest" href="/site.webmanifest" />
+    <link rel="icon" href="/favicon.ico" sizes="any" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+    <link rel="manifest" href="/site.webmanifest" />
+
    <meta name="msapplication-TileColor" content="#da532c" />
-    <meta name="theme-color" content="#e4c428" />
+    <meta name="theme-color" content="#111" />
  </head>
  <body>
    <noscript>
-      <strong>
-        We're sorry but Pojazdownik doesn't work properly without JavaScript enabled. Please enable it to continue.
-      </strong>
+      <strong> We're sorry but Pojazdownik doesn't work properly without JavaScript enabled. Please enable it to continue. </strong>
    </noscript>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
 </html>
-
@@ -1,22 +1,35 @@
-{
-  "name": "pojazdownik",
-  "version": "1.3.1",
-  "private": true,
-  "scripts": {
-    "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
-    "preview": "yarn build && vite preview --port 4174"
-  },
-  "dependencies": {
-    "pinia": "^2.0.17",
-    "vue": "^3.2.37"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^3.2.0",
-    "sass": "^1.55.0",
-    "typescript": "^4.8.4",
-    "vite": "^3.2.1",
-    "vite-plugin-pwa": "^0.13.3",
-    "vue-tsc": "^1.0.9"
-  }
-}
+{
+  "name": "pojazdownik",
+  "version": "1.7.2",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "yarn build && vite preview --port 4174",
+    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "format": "prettier --write src/"
+  },
+  "dependencies": {
+    "axios": "^1.4.0",
+    "pinia": "^2.0.17",
+    "prettier": "^3.0.3",
+    "vue": "^3.2.37",
+    "vue-i18n": "9"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.3.3",
+    "@vite-pwa/assets-generator": "^0.0.10",
+    "@vitejs/plugin-vue": "^4.1.0",
+    "@vue/eslint-config-prettier": "^8.0.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/tsconfig": "^0.4.0",
+    "eslint": "^8.49.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "sass": "^1.59.3",
+    "typescript": "^5.0.2",
+    "vite": "^4.2.1",
+    "vite-plugin-pwa": "^0.16.5",
+    "vue-tsc": "^1.2.0"
+  }
+}
@@ -0,0 +1,24 @@
+<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_102_63" fill="white">
+<path d="M0 250C0 111.929 111.929 6.10352e-05 250 6.10352e-05C388.071 6.10352e-05 500 111.929 500 250C500 388.071 388.071 500 250 500C111.929 500 0 388.071 0 250Z"/>
+</mask>
+<path d="M0 250C0 111.929 111.929 6.10352e-05 250 6.10352e-05C388.071 6.10352e-05 500 111.929 500 250C500 388.071 388.071 500 250 500C111.929 500 0 388.071 0 250Z" fill="#242424"/>
+<path d="M0 222.821C0 84.7503 111.929 -27.1785 250 -27.1785C388.071 -27.1785 500 84.7503 500 222.821V250C500 126.939 388.071 27.1787 250 27.1787C111.929 27.1787 0 126.939 0 250V222.821ZM500 277.179C500 415.25 388.071 527.179 250 527.179C111.929 527.179 0 415.25 0 277.179V250C0 373.061 111.929 472.821 250 472.821C388.071 472.821 500 373.061 500 250V277.179ZM0 500V6.10352e-05V500ZM500 6.10352e-05V500V6.10352e-05Z" fill="#FFD600" mask="url(#path-1-inside-1_102_63)"/>
+<path d="M210.369 301.604C210.369 301.604 210.369 341.807 210.369 364.846C210.369 387.885 202.798 417.491 171.591 417.491C140.385 417.491 132.813 417.491 132.813 417.491L132.812 78.125L250.754 78.125C274.312 78.125 294.504 80.9665 311.331 86.6494C328.311 92.1788 342.232 99.8585 353.093 109.689C364.107 119.519 372.214 131.115 377.415 144.478C382.616 157.84 385.217 172.278 385.217 187.791C385.217 204.533 382.54 219.892 377.186 233.869C371.832 247.846 363.648 259.827 352.634 269.81C341.62 279.794 327.623 287.627 310.643 293.31C293.816 298.839 273.853 301.604 250.754 301.604L210.369 301.604ZM210.369 242.854L250.754 242.854C270.946 242.854 285.479 238.016 294.351 228.34C303.224 218.663 307.66 205.147 307.66 187.791C307.66 180.111 306.512 173.123 304.218 166.825C301.923 160.528 298.405 155.152 293.663 150.698C289.074 146.09 283.184 142.558 275.995 140.1C268.958 137.643 260.544 136.414 250.754 136.414L210.369 136.414L210.369 242.854Z" fill="url(#paint0_linear_102_63)"/>
+<path d="M239.215 301.604C239.215 301.604 239.215 341.807 239.215 364.846C239.215 387.885 231.643 417.491 200.437 417.491C169.231 417.491 161.659 417.491 161.659 417.491L161.658 78.125L279.6 78.125C303.158 78.125 323.35 80.9665 340.177 86.6494C357.157 92.1788 371.077 99.8585 381.938 109.689C392.952 119.519 401.06 131.115 406.261 144.478C411.462 157.84 414.062 172.278 414.062 187.791C414.062 204.533 411.385 219.892 406.031 233.869C400.677 247.846 392.493 259.827 381.479 269.81C370.465 279.794 356.468 287.627 339.488 293.31C322.662 298.839 302.699 301.604 279.6 301.604L239.215 301.604ZM239.215 242.854L279.6 242.854C299.792 242.854 314.325 238.016 323.197 228.34C332.069 218.663 336.505 205.147 336.505 187.791C336.505 180.111 335.358 173.123 333.064 166.825C330.769 160.528 327.251 155.152 322.509 150.698C317.919 146.09 312.03 142.558 304.84 140.1C297.804 137.643 289.39 136.414 279.6 136.414L239.215 136.414L239.215 242.854Z" fill="url(#paint1_linear_102_63)"/>
+<path d="M210.685 301.604C210.685 301.604 210.685 341.807 210.685 364.846C210.685 387.885 203.082 417.491 171.749 417.491C140.416 417.491 132.813 417.491 132.813 417.491L132.812 78.125L251.233 78.125C274.887 78.125 295.161 80.9665 312.057 86.6494C329.105 92.1788 343.083 99.8585 353.988 109.689C365.046 119.519 373.187 131.115 378.409 144.478C383.631 157.84 386.242 172.278 386.242 187.791C386.242 204.533 383.555 219.892 378.179 233.869C372.803 247.846 364.586 259.827 353.527 269.81C342.468 279.794 328.414 287.627 311.365 293.31C294.47 298.839 274.426 301.604 251.233 301.604L210.685 301.604ZM210.685 242.854L251.233 242.854C271.508 242.854 286.099 238.016 295.008 228.34C303.916 218.663 308.37 205.147 308.37 187.791C308.37 180.111 307.218 173.123 304.914 166.825C302.611 160.528 299.078 155.152 294.316 150.698C289.709 146.09 283.795 142.558 276.576 140.1C269.511 137.643 261.063 136.414 251.233 136.414L210.685 136.414L210.685 242.854Z" fill="url(#paint2_radial_102_63)"/>
+<defs>
+<linearGradient id="paint0_linear_102_63" x1="259.015" y1="78.125" x2="259.015" y2="417.491" gradientUnits="userSpaceOnUse">
+<stop offset="0.135417" stop-color="#FFD600"/>
+<stop offset="1"/>
+</linearGradient>
+<linearGradient id="paint1_linear_102_63" x1="287.86" y1="78.125" x2="287.86" y2="417.491" gradientUnits="userSpaceOnUse">
+<stop offset="0.135417" stop-color="#FFD600"/>
+<stop offset="1"/>
+</linearGradient>
+<radialGradient id="paint2_radial_102_63" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(259.527 247.808) rotate(0.36307) scale(345.948 325.206)">
+<stop offset="0.484375" stop-color="white"/>
+<stop offset="1"/>
+</radialGradient>
+</defs>
+</svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" fill="white" width="48"><path d="M314.696-195.478q-32.507 0-55.862-23.356-23.356-23.355-23.356-55.862v-549.826q0-32.74 23.356-56.262 23.355-23.522 55.862-23.522h429.826q32.74 0 56.262 23.522t23.522 56.262v549.826q0 32.507-23.522 55.862-23.522 23.356-56.262 23.356H314.696Zm0-79.218h429.826v-549.826H314.696v549.826ZM175.478-55.694q-32.74 0-56.262-23.522t-23.522-56.262v-629.044h79.784v629.044h509.044v79.784H175.478Zm139.218-219.002v-549.826 549.826Z"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" fill="white" width="48"><path d="M480-318.087 266.651-531.436l57.131-56.001 116.609 116.609v-343.868h79.218v343.868l116.609-116.609 57.131 56.001L480-318.087ZM225.087-145.869q-32.507 0-55.862-23.356-23.356-23.355-23.356-55.862v-143h79.218v143h509.826v-143h79.783v143q0 32.478-23.521 55.848-23.522 23.37-56.262 23.37H225.087Z"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" fill="white" width="48"><path d="M451-107.304q-128.652-10.565-216.892-105.522-88.239-94.956-88.239-225.609 0-78.13 35.5-147.543 35.5-69.413 99.5-114.674l56.566 56.565q-52.609 32.435-82.478 87.957-29.87 55.521-29.87 117.695 0 98.305 64.587 169.609T451-187.087v79.783Zm60 0v-79.783q98.304-11.435 161.609-82.239 63.304-70.804 63.304-169.109 0-103.913-70.978-177.434-70.978-73.522-174.891-76.913h-21.696l62.261 62.826-47.522 47.522-152.783-152.784 152.783-153.349 47.522 47.522-68.479 68.479h22.261q138.522 0 234.914 98.022 96.391 98.022 96.391 236.109 0 130.653-88.022 225.609Q639.652-117.869 511-107.304Z"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" fill="white" width="48"><path d="M575.913-143.782v-72.436h115.956l-173.26-172.825 51.043-51.479 175.261 172.695v-117.391h73v241.436h-242Zm-382.783 2.826L142.652-193l551.217-551.782H575.913v-72.436h242v241.436h-73v-116.391L193.13-140.956Zm198.479-378.522L142.652-768l51.478-52.044 250.088 248.522-52.609 52.044Z"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" fill="white" width="48"><path d="M440.391-318.087v-343.868L323.782-544.782l-57.131-56.566L480-814.696l213.349 213.348-57.131 56.566-116.609-117.173v343.868h-79.218ZM225.087-145.869q-32.507 0-55.862-23.356-23.356-23.355-23.356-55.862v-143h79.218v143h509.826v-143h79.783v143q0 32.478-23.521 55.848-23.522 23.37-56.262 23.37H225.087Z"/></svg>
@@ -5,15 +5,26 @@
  "description": "Generator składów online dla symulatora Train Driver 2",
  "icons": [
    {
-      "src": "/android-chrome-192x192.png",
+      "src": "pwa-64x64.png",
+      "sizes": "64x64",
+      "type": "image/png"
+    },
+    {
+      "src": "pwa-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
-      "src": "/android-chrome-512x512.png",
+      "src": "pwa-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
-      "purpose": "any maskable"
+      "purpose": "any"
+    },
+    {
+      "src": "maskable-icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
    }
  ],
  "theme_color": "#2c3149",
@@ -5,19 +5,29 @@
  "description": "Generator składów online dla symulatora Train Driver 2",
  "icons": [
    {
-      "src": "/android-chrome-192x192.png",
+      "src": "pwa-64x64.png",
+      "sizes": "64x64",
+      "type": "image/png"
+    },
+    {
+      "src": "pwa-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
-      "src": "/android-chrome-512x512.png",
+      "src": "pwa-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
-      "purpose": "any maskable"
+      "purpose": "any"
+    },
+    {
+      "src": "maskable-icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
    }
  ],
  "theme_color": "#2c3149",
  "background_color": "#2c3149",
  "display": "standalone"
 }
-
@@ -1,94 +1,32 @@
 <template>
-  <div class="image-preview" v-if="store.vehiclePreviewSrc != ''" @click="() => (store.vehiclePreviewSrc = '')">
-    <img :src="store.vehiclePreviewSrc" alt="preview" />
-  </div>
-
-  <div class="g-card-dimmer" v-if="store.isRandomizerCardOpen" @click="store.isRandomizerCardOpen = false"></div>
-  <div class="g-card-dimmer" v-if="store.isRealStockListCardOpen" @click="store.isRealStockListCardOpen = false"></div>
-
-  <keep-alive>
-    <transition name="card-appear">
-      <RealStockCard />
-    </transition>
-  </keep-alive>
-
-  <div class="app_container">
-    <main>
-      <LogoSection />
-
-      <InputsSection />
-
-      <TrainImageSection />
-
-      <StockSection />
-    </main>
-
-    <footer>
-      <div class="text--grayed" style="margin-bottom: 0.25em">
-        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>
-      <div class="text--grayed" style="margin-bottom: 0.25em">Strona jest kompletna dla wersji 2022.2.2 symulatora TD2</div>
-      &copy;
-      <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
-      {{ new Date().getUTCFullYear() }} | v{{ VERSION }}
-    </footer>
-  </div>
+  <AppModals />
+  <ImageFullscreenPreview v-if="store.vehiclePreviewSrc" />
+  <AppContainerView />
 </template>

 <script lang="ts">
-import packageInfo from '.././package.json';
-
 import { defineComponent } from 'vue';
-
-import InputsSection from './components/sections/InputsSection.vue';
-
 import { useStore } from './store';
-import TrainImageSection from './components/sections/TrainImageSection.vue';
-import LogoSection from './components/sections/LogoSection.vue';
-import RealStockCard from './components/cards/RealStockCard.vue';
-import StockSection from './components/sections/StockSection.vue';
+import ImageFullscreenPreview from './components/utils/ImageFullscreenPreview.vue';
+import AppContainerView from './views/AppContainerView.vue';
+import AppModals from './components/app/AppModals.vue';

 export default defineComponent({
-  components: {
-    StockSection,
-    InputsSection,
-    TrainImageSection,
-    LogoSection,
-    RealStockCard,
+  data() {
+    return {
+      store: useStore(),
+    };
  },
-
-  data: () => ({
-    VERSION: packageInfo.version,
-    store: useStore(),
-  }),
-
  async created() {
-    const stockData = await (
-      await fetch(`https://spythere.github.io/api/td2/data/stockInfo.json?t=${Math.floor(Date.now() / 60000)}`)
-    ).json();
-
-    this.store.stockData = stockData;
+    this.store.fetchStockInfoData();
+    this.store.handleRouting();
  },
+  components: { ImageFullscreenPreview, AppContainerView, AppModals },
 });
 </script>

 <style lang="scss">
-@import './styles/global';
-
-.app_container {
-  min-height: 100vh;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
+@import './styles/global.scss';

 /* APP */
 #app {
@@ -97,85 +35,13 @@ export default defineComponent({
  color: $textColor;
  font-size: 1em;
  padding: 1em 0.5em;
-}

-/* HEADER SECTION */
-
-h2 {
-  margin: 0;
-  margin-bottom: 0.5em;
-
-  color: $accentColor;
-  font-weight: 700;
-  font-size: 1.2em;
-}
-
-.header-bottom {
-  margin: 0;
-  font-size: 1.5em;
-
-  color: #d1d1d1;
-}
-
-.image-preview {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 99;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  width: 100%;
-  height: 100%;
-
-  background: rgba(black, 0.85);
-
-  img {
-    width: 90%;
-    max-width: 800px;
-  }
-}
-
-/* MAIN SECTION */
-
-main {
-  display: grid;
-  gap: 1em 3em;
-
-  width: 100%;
-  max-width: 1300px;
-  min-height: 75vh;
-
-  grid-template-columns: 1fr 2fr;
-  grid-template-rows: auto 360px minmax(400px, 1fr);
-
-  // padding: 0 1em;
-  margin-bottom: 2em;
-}
-
-/* FOOTER SECTION */
-
-footer {
-  margin-top: auto;
-  text-align: center;
-  padding: 0 1em;
-}
-
-/* MOBILE VIEWS */
-
-@media screen and (max-width: $breakpointMd) {
-  #app {
+  @media screen and (max-width: $breakpointMd) {
    font-size: calc(0.7rem + 0.75vw);
  }

-  main {
-    display: flex;
-    flex-direction: column;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
+  @media screen and (orientation: landscape) and (max-width: $breakpointMd) {
+    font-size: calc(0.75rem + 0.4vw);
  }
 }
 </style>
-
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <keep-alive>
+      <RealStockCard v-if="store.isRealStockListCardOpen" />
+    </keep-alive>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { useStore } from "../../store";
+import RealStockCard from "../cards/RealStockCard.vue";
+
+export default defineComponent({
+  components: { RealStockCard },
+  data() {
+    return {
+      store: useStore(),
+    };
+  },
+});
+</script>
+
+<style scoped></style>
@@ -0,0 +1,52 @@
+<template>
+  <footer>
+    <i18n-t keypath="footer.disclaimer" tag="div" class="text--grayed">
+      <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">
+      {{ $t("footer.version-check", { version: store.stockData.version }) }}
+    </div>
+
+    <div>
+      &copy;
+      <a href="https://td2.info.pl/profile/?u=20777" target="_blank"
+        >Spythere</a
+      >
+      {{ new Date().getUTCFullYear() }} | v{{ VERSION
+      }}{{ !isOnProductionHost ? "dev" : "" }}
+    </div>
+  </footer>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import packageInfo from "../../../package.json";
+import { useStore } from "../../store";
+
+export default defineComponent({
+  data() {
+    return {
+      isOnProductionHost: location.hostname == "pojazdownik-td2.web.app",
+      VERSION: packageInfo.version,
+      store: useStore(),
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+footer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+
+  text-align: center;
+  padding: 1em 1em 0 1em;
+  margin-top: auto;
+}
+</style>
@@ -0,0 +1,45 @@
+<template>
+  <main>
+    <LogoSection />
+    <InputsSection />
+    <TrainImageSection />
+    <StockSection />
+  </main>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import LogoSection from "../sections/LogoSection.vue";
+import InputsSection from "../sections/InputsSection.vue";
+import TrainImageSection from "../sections/TrainImageSection.vue";
+import StockSection from "../sections/StockSection.vue";
+
+export default defineComponent({
+  components: { LogoSection, InputsSection, TrainImageSection, StockSection },
+});
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/global.scss";
+
+main {
+  display: grid;
+  gap: 1em;
+
+  width: 100%;
+  max-width: 1300px;
+  min-height: 75vh;
+
+  grid-template-columns: 1fr 2fr;
+  grid-template-rows: auto 360px minmax(400px, 1fr);
+}
+
+@media screen and (max-width: $breakpointMd) {
+  main {
+    display: flex;
+    flex-direction: column;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+  }
+}
+</style>
@@ -1,234 +1,425 @@
 <template>
-  <div class="real-stock-card g-card" v-if="store.isRealStockListCardOpen">
+  <div
+    class="real-stock-card g-card"
+    @keydown.esc="store.isRealStockListCardOpen = false"
+  >
    <div class="g-card_bg" @click="store.isRealStockListCardOpen = false"></div>

    <div class="card_content">
-      <div class="top-sticky">
-        <button class="btn btn--text exit-btn" @click="store.isRealStockListCardOpen = false">&lt; POWRÓT</button>
-
-        <div class="header">
+      <div class="card_nav">
+        <div class="top-pane">
          <h1>
-            REALNE ZESTAWIENIA
-            <div>by <a href="https://td2.info.pl/profile/?u=17708" target="_blank">Railtrains997</a></div>
+            {{ $t("realstock.title") }}
+            <a href="https://td2.info.pl/profile/?u=17708" target="_blank"
+              >Railtrains997</a
+            >
          </h1>
-          <p>
-            Pełne informacje o zestawieniach dostępne na stronie
-            <a href="http://bocznica.eu/files/archiwum/2021r_2021-11-04.html" target="_blank">bocznica.eu</a> (stan na
-            listopad 2021r.)
-          </p>
+          <button
+            class="btn exit-btn"
+            @click="store.isRealStockListCardOpen = false"
+          >
+            &Cross;
+          </button>
+        </div>

-          <input type="text" tabindex="0" v-model="searchedReadyStockName" placeholder="Szukaj zestawienia..." />
+        <div class="filters" ref="focus" tabindex="0">
+          <input
+            list="readyStockDataList"
+            v-model="searchedReadyStockName"
+            :placeholder="$t('realstock.search-name')"
+          />
+
+          <datalist id="readyStockDataList">
+            <option
+              v-for="stock in store.readyStockList"
+              :value="stock.stockId"
+              :key="stock.name"
+            >
+              {{ stock.stockId }}
+            </option>
+          </datalist>
+
+          <input
+            list="readyStockStringList"
+            v-model="searchedReadyStockString"
+            :placeholder="$t('realstock.search-stock')"
+          />
+
+          <datalist id="readyStockStringList">
+            <option
+              v-for="stockType in computedAvailableStockTypes"
+              :value="stockType"
+              :key="stockType"
+            >
+              {{ stockType }}
+            </option>
+          </datalist>
+
+          <button class="btn" @click="resetStockFilters">
+            {{ $t("realstock.action-reset") }}
+          </button>
        </div>
      </div>

-      <ul v-if="responseStatus == 'loaded'">
+      <ul class="card_list" ref="list" @scroll="onListScroll">
        <li
-          v-for="(stock, key) in computedReadyStockList"
-          :key="key"
-          tabindex="0"
-          @click="choseStock(stock.name, stock.type, stock.number, stock.stockString)"
-          @keydown.enter="choseStock(stock.name, stock.type, stock.number, stock.stockString)"
+          v-for="rStock in computedReadyStockList"
+          :key="rStock.stockId"
+          :data-last-selected="store.chosenRealStockName === rStock.stockId"
        >
-          <img :src="getIconURL(stock.type)" :alt="stock.type" />
+          <div
+            class="stock-title"
+            tabindex="0"
+            @click="chooseStock(rStock)"
+            @keydown.enter="chooseStock(rStock)"
+          >
+            <img
+              class="stock-icon"
+              :src="getIconURL(rStock.type)"
+              :alt="rStock.type"
+            />
+            <b class="text--accent" style="margin-left: 5px">
+              {{ rStock.name }}</b
+            >
+            <div>{{ rStock.number }}</div>
+          </div>

-          <b class="text--accent"> {{ stock.name }}</b>
-          <div>{{ stock.number }}</div>
+          <div class="stock-thumbnails" ref="thumbnailsRef">
+            <div
+              class="thumbnail-item"
+              v-for="stockType in rStock.stockString.split(';')"
+              :key="stockType"
+            >
+              <div class="thumbnail-container">
+                <div>{{ stockType }}</div>
+                <img
+                  :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockType}.png`"
+                  :title="stockType"
+                  style="opacity: 0"
+                  @error="(e) => onStockItemError(e, stockType)"
+                  @load="(e) => ((e.target as HTMLElement).style.opacity = '1')"
+                />
+              </div>
+            </div>
+          </div>
        </li>
+
+        <div class="bottom" ref="bottom"></div>
      </ul>
    </div>
  </div>
 </template>

 <script lang="ts">
-import { defineComponent } from 'vue';
-import { Vehicle, IReadyStockList } from '../../types';
+import { defineComponent } from "vue";

-import { useStore } from '../../store';
-import imageMixin from '../../mixins/imageMixin';
-import stockMixin from '../../mixins/stockMixin';
+import { useStore } from "../../store";
+import imageMixin from "../../mixins/imageMixin";
+import stockMixin from "../../mixins/stockMixin";
+
+import { IReadyStockItem } from "../../types";
+import http from "../../http";

 interface ResponseJSONData {
  [key: string]: string;
 }

+function getVehicleType(stockType: string) {
+  if (/^E/.test(stockType)) return "loco-e";
+  if (/^S/.test(stockType)) return "loco-s";
+
+  return "car-passenger";
+}
+
 export default defineComponent({
  mixins: [imageMixin, stockMixin],

-  setup() {
-    return {
-      store: useStore(),
-    };
+  data: () => ({
+    store: useStore(),
+    responseStatus: "loading",
+    isMobile:
+      "ontouchstart" in document.documentElement &&
+      navigator.userAgent.match(/Mobi/)
+        ? true
+        : false,
+    observer: null as IntersectionObserver | null,
+    searchedReadyStockName: "",
+    searchedReadyStockString: "",
+    visibleIndexesTo: 0,
+    lastSelectedStockId: null as string | null,
+    scrollTop: 0,
+  }),
+
+  async mounted() {
+    this.mountObserver();
+    this.fetchStockListData();
  },

-  data: () => ({
-    responseStatus: 'loading',
-    isMobile: 'ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/) ? true : false,
+  activated() {
+    (this.$refs["focus"] as HTMLElement).focus();

-    searchedReadyStockName: '',
-  }),
+    (this.$refs["list"] as HTMLElement).scrollTo({
+      top: this.scrollTop,
+      behavior: "auto",
+    });
+  },

  computed: {
    computedReadyStockList() {
      if (this.searchedReadyStockName == null) return this.store.readyStockList;

-      let filtered: IReadyStockList = {};
+      return this.store.readyStockList
+        .filter(
+          (rs) =>
+            rs.stockId
+              .toLocaleLowerCase()
+              .includes(this.searchedReadyStockName.toLocaleLowerCase()) &&
+            rs.stockString
+              .toLocaleLowerCase()
+              .includes(this.searchedReadyStockString.toLocaleLowerCase()),
+        )
+        .filter((_, i) => i <= this.visibleIndexesTo);
+    },

-      for (let key in this.store.readyStockList) {
-        if (key.toLocaleLowerCase().includes(this.searchedReadyStockName.toLocaleLowerCase()))
-          filtered[key] = this.store.readyStockList[key];
+    computedAvailableStockTypes() {
+      return this.store.readyStockList
+        .reduce((acc, rs) => {
+          rs.stockString.split(";").forEach((s) => {
+            if (!acc.includes(s)) acc.push(s);
+          });
+
+          return acc;
+        }, [] as string[])
+        .sort((a, b) => (a > b ? 1 : -1));
+    },
+  },
+
+  watch: {
+    computedReadyStockList(curr, prev) {
+      if (curr.length < prev.length) {
+        this.visibleIndexesTo = 20;
+        (this.$refs["list"] as HTMLElement).scrollTo({
+          top: 0,
+        });
      }
-
-      return filtered;
    },
  },

  methods: {
+    async fetchStockListData() {
+      const readyStockJSONData = (
+        await http.get<ResponseJSONData>("td2/data/readyStock.json")
+      ).data;
+
+      if (!readyStockJSONData) {
+        this.responseStatus = "error";
+        return;
+      }
+
+      for (let stockKey in readyStockJSONData) {
+        const [type, number, ...name] = stockKey.split(" ");
+
+        const obj = {
+          number: number.replace(/_/g, "/"),
+          name: name.join(" "),
+          stockString: readyStockJSONData[stockKey],
+          type,
+        };
+
+        this.store.readyStockList.push({
+          ...obj,
+          stockId: `${obj.type} ${obj.number} ${obj.name}`,
+        });
+      }
+
+      this.responseStatus = "loaded";
+    },
+
+    mountObserver() {
+      this.observer = new IntersectionObserver((entries) => {
+        if (entries[0].intersectionRatio > 0) this.visibleIndexesTo += 20;
+      });
+
+      this.observer.observe(this.$refs["bottom"] as HTMLElement);
+    },
+
    getImageUrl(name: string) {
      return new URL(`./dir/${name}.png`, import.meta.url).href;
    },

-    choseStock(name: string, type: string, number: string, stockString: string) {
-      this.loadStockFromString(stockString);
+    resetStockFilters() {
+      this.searchedReadyStockName = "";
+      this.searchedReadyStockString = "";
+    },
+
+    chooseStock(stockItem: IReadyStockItem) {
+      this.loadStockFromString(stockItem.stockString);
+      this.lastSelectedStockId = stockItem.stockId;
      this.store.isRealStockListCardOpen = false;
    },
-  },

-  async mounted() {
-    const readyStockJSONData: ResponseJSONData = await (
-      await fetch(`https://spythere.github.io/api/td2/data/readyStock.json?t=${Math.floor(Date.now() / 60000)}`)
-    ).json();
+    onStockItemError(e: Event, stockType: string) {
+      const imageEl = e.target as HTMLImageElement;
+      imageEl.src = `images/${getVehicleType(stockType)}-unknown.png`;
+      imageEl.style.opacity = "1";
+    },

-    if (!readyStockJSONData) {
-      this.responseStatus = 'error';
-      return;
-    }
+    onListScroll(e: Event) {
+      const listElement = e.target as HTMLElement;
+      const scrollTop = listElement.scrollTop;

-    for (let stockKey in readyStockJSONData) {
-      const splittedKey = stockKey.split(' ');
-
-      let name = '';
-      for (let i = 2; i < splittedKey.length; i++) {
-        name += ' ' + splittedKey[i];
-      }
-
-      this.store.readyStockList[stockKey] = {
-        type: splittedKey[0],
-        number: splittedKey[1].replace(/_/g, '/'),
-        name,
-        stockString: readyStockJSONData[stockKey],
-      };
-    }
-
-    this.responseStatus = 'loaded';
+      this.scrollTop = scrollTop;
+    },
  },
 });
 </script>

 <style lang="scss" scoped>
-@import '../../styles/global.scss';
+@import "../../styles/global.scss";

 .exit-btn {
  font-size: 1.2em;
-  margin: 0.5em 0;
+  margin: 0.25em 0;
 }

-input {
-  width: 100%;
-  max-width: 250px;
-
-  &::placeholder {
-    font-size: 0.9em;
-    text-align: center;
-  }
+.btn {
+  background-color: #444;
 }

 .card_content {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  gap: 0.5em;
+
  background-color: #1c1c1c;
  border-radius: 1em;

-  height: 85vh;
+  height: 95vh;
  max-width: 1000px;
  width: 90vw;

  padding: 0 1em;

-  overflow-y: auto;
  z-index: 100;

-  .top-sticky {
-    position: sticky;
-    top: 0;
-    background: #1c1c1c;
+  @media screen and (max-width: $breakpointSm) {
+    height: 80vh;
+  }
+}
+
+.top-pane {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5em;
+
+  h1 {
+    color: #aaa;
+  }
+}
+
+.top-sticky {
+  position: sticky;
+  top: 0;
+  background: #1c1c1c;
+}
+
+.filters {
+  display: flex;
+  gap: 0.5em;
+
+  padding: 0.5em 0;
+
+  input {
+    width: 35%;
  }

-  .header {
-    padding-bottom: 1.5em;
-    padding-top: 0.5em;
+  @media screen and (max-width: $breakpointSm) {
+    flex-wrap: wrap;

-    text-align: center;
-    font-size: 1.3em;
-
-    h1 {
-      line-height: 0.9em;
-      margin: 0.5em 0;
-
-      div {
-        font-size: 0.65em;
-        color: #ccc;
-      }
+    input {
+      width: 100%;
    }

-    p {
-      margin: 1em 0;
-      color: #999;
-      font-size: 0.95em;
+    .btn {
+      width: 100%;
    }
  }
+}

-  ul {
+ul {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+
+  overflow: auto;
+
+  li {
    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 1em;
-
-    @media screen and (max-width: 700px) {
-      grid-template-columns: repeat(3, 1fr);
-    }
-
-    @media screen and (max-width: 550px) {
-      grid-template-columns: repeat(2, 1fr);
-    }
-
-    @media screen and (max-width: 400px) {
-      grid-template-columns: repeat(1, 1fr);
-    }
-
-    margin-bottom: 1em;
-  }
-
-  ul li {
-    padding: 0.5em;
-
-    cursor: pointer;
-
+    grid-template-columns: 1fr 2fr;
    background: #2b2b2b;
+    gap: 1rem;
+    padding: 0.1em;

-    img {
-      height: 0.85em;
+    &[data-last-selected="true"] .stock-title {
+      border: 1px solid $accentColor;
    }

-    span {
-      color: #999;
-      font-weight: bold;
+    .stock-title {
+      cursor: pointer;
+      padding: 0.5em;
+    }
+
+    .stock-icon {
+      height: 0.85em;
    }

    &:hover {
      background: #222;
    }

-    &:focus {
-      outline: 1px solid white;
+    @media screen and (max-width: $breakpointSm) {
+      grid-template-columns: 1fr;
+      // grid-template-rows: 1fr 1fr;
    }
  }
 }
-</style>

+.stock-thumbnails {
+  display: flex;
+  align-items: flex-end;
+
+  width: 100%;
+
+  overflow: auto;
+  padding: 0.5em;
+}
+
+.thumbnail-item {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  height: 100%;
+
+  div {
+    font-size: 0.9em;
+    text-align: center;
+  }
+
+  img {
+    max-width: 250px;
+    max-height: 50px;
+  }
+
+  & > .thumbnail-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+  }
+}
+
+.bottom {
+  padding: 1em;
+}
+</style>
@@ -1,17 +1,18 @@
 <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">
          <button
            v-for="locoType in locomotiveTypeList"
+            :key="locoType.id"
            class="btn btn--choice"
            :data-selected="locoType.id == store.chosenLocoPower"
            @click="selectLocoType(locoType.id)"
          >
-            {{ locoType.value }}
+            {{ $t(`inputs.${locoType.id}`) }}
          </button>
        </div>

@@ -23,10 +24,10 @@
          @keydown.enter.prevent="addOrSwitchVehicle"
          @keydown.backspace="removeVehicle"
        >
-          <option :value="null" disabled>Wybierz pojazd trakcyjny</option>
-          <option v-for="loco in locoOptions" :value="loco" :key="loco.type">
-            {{ loco.type }}<b v-if="loco.supportersOnly">*</b>
+          <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.isSponsorsOnly">*</b></option>
        </select>
      </div>

@@ -34,11 +35,12 @@
        <div class="vehicle-types carwagons">
          <button
            v-for="carType in carTypeList"
+            :key="carType.id"
            class="btn btn--choice"
            :data-selected="carType.id == store.chosenCarUseType"
            @click="selectCarWagonType(carType.id)"
          >
-            {{ carType.value }}
+            {{ $t(`inputs.${carType.id}`) }}
          </button>
        </div>

@@ -50,22 +52,20 @@
          @keydown.enter.prevent="addOrSwitchVehicle"
          @keydown.backspace="removeVehicle"
        >
-          <option :value="null" disabled>Wybierz wagon</option>
-
-          <option v-for="car in carOptions" :value="car" :key="car.type">
-            {{ car.type }}<b v-if="car.supportersOnly">*</b>
+          <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.isSponsorsOnly">*</b></option>
        </select>
      </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="
-            (store.chosenCar && !store.chosenCar.loadable) ||
-            (store.chosenCar && store.chosenCar.useType == 'car-passenger') ||
-            !store.chosenCar
+            (store.chosenCar && !store.chosenCar.loadable) || (store.chosenCar && store.chosenCar.useType == 'car-passenger') || !store.chosenCar
          "
          data-select="cargo"
          data-ignore-outside="1"
@@ -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,19 @@
      </div>

      <div class="input_actions">
-        <button class="btn" @click="addVehicle(store.chosenVehicle, store.chosenCargo)">DODAJ NOWY</button>
-        <button
-          class="btn"
-          @click="switchVehicles"
-          :disabled="store.chosenStockListIndex == -1"
-          :data-disabled="store.chosenStockListIndex == -1"
-        >
-          ZAMIEŃ ZA
+        <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">
+          {{ $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>
@@ -107,66 +108,61 @@
 <script lang="ts">
 import { defineComponent } from 'vue';

-import { IStock } from '../../types';
 import imageMixin from '../../mixins/imageMixin';
 import { useStore } from '../../store';
-import { isLocomotive } from '../../utils/vehicleUtils';
 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],

  data: () => ({
+    store: useStore(),
    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',
      },
    ],
  }),

-  setup() {
-    const store = useStore();
+  computed: {
+    locoOptions() {
+      return this.store.locoDataList
+        .slice()
+        .sort((a, b) => (a.type > b.type ? 1 : -1))
+        .filter((loco) => loco.power == this.store.chosenLocoPower);
+    },

-    return {
-      store,
-    };
+    carOptions() {
+      return this.store.carDataList
+        .slice()
+        .sort((a, b) => (a.type > b.type ? 1 : -1))
+        .filter((car) => car.useType == this.store.chosenCarUseType);
+    },
  },

  methods: {
@@ -197,22 +193,31 @@ export default defineComponent({

      if (!vehicle) return;

-      const stockObj: IStock = {
-        id: `${Date.now()}`,
-        useType: isLocomotive(vehicle) ? vehicle.power : vehicle.useType,
-        type: vehicle.type,
-        length: vehicle.length,
-        mass: vehicle.mass,
-        maxSpeed: vehicle.maxSpeed,
-        isLoco: isLocomotive(vehicle),
-        cargo:
-          !isLocomotive(vehicle) && vehicle.loadable && this.store.chosenCargo ? this.store.chosenCargo : undefined,
-        count: 1,
-        imgSrc: vehicle.imageSrc,
-        supportersOnly: vehicle.supportersOnly,
-      };
+      const stockObject = this.getStockObject(vehicle, this.store.chosenCargo);
+      this.store.stockList[this.store.chosenStockListIndex] = stockObject;
+    },

-      this.store.stockList[this.store.chosenStockListIndex] = stockObj;
+    selectLocoType(locoTypeId: string) {
+      this.store.chosenLocoPower = locoTypeId;
+      this.store.chosenVehicle = this.locoOptions[0];
+      this.store.chosenLoco = this.locoOptions[0];
+    },
+
+    selectCarWagonType(carWagonTypeId: string) {
+      this.store.chosenCarUseType = carWagonTypeId;
+      this.store.chosenVehicle = this.carOptions[0];
+      this.store.chosenCar = this.carOptions[0];
+      this.store.chosenCargo = null;
+    },
+
+    previewVehicleByType(type: 'loco' | 'car' | 'cargo') {
+      this.$nextTick(() => {
+        if (!this.store.chosenLoco && !this.store.chosenCar) return;
+
+        this.store.chosenVehicle = type == 'loco' ? this.store.chosenLoco : this.store.chosenCar;
+
+        this.store.chosenCargo = this.store.chosenCar?.cargoList.find((cargo) => cargo.id == this.store.chosenCargo?.id) || null;
+      });
    },
  },
 });
@@ -229,6 +234,11 @@ export default defineComponent({
  grid-column: 1;
 }

+.input_container {
+  width: 100%;
+  max-width: 380px;
+}
+
 .input_header {
  margin-bottom: 1em;
 }
@@ -248,6 +258,10 @@ button.btn--choice {
 .input_list {
  margin: 0.5em 0;

+  select {
+    width: 100%;
+  }
+
  label {
    display: block;

@@ -289,4 +303,3 @@ button.btn--choice {
  }
 }
 </style>
-
@@ -1,31 +1,83 @@
 <template>
  <section class="logo-section">
-    <img src="/images/logo.svg" alt="logo pojazdownik" />
+    <img
+      :src="`/logo-${$i18n.locale}.svg`"
+      alt="logo pojazdownik"
+      @click="navigate"
+    />
+
+    <div class="actions">
+      <button
+        v-for="action in localeActions"
+        :key="action.name"
+        class="btn btn--text"
+        :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;
+      window.localStorage.setItem("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%;    
+  width: 100%;
 }
 </style>
-
@@ -2,44 +2,61 @@
  <section class="stock-section">
    <div class="section_modes">
      <button
+        v-for="(id, i) in sectionModes"
+        :key="id"
        class="btn"
-        v-for="(id, name) in sectionModes"
+        ref="sectionButtonRefs"
        @click="chooseSection(id)"
        :data-selected="store.stockSectionMode == id"
      >
-        {{ name }}
+        <span class="text--accent">{{ i + 1 }}.</span> {{ $t(`topbar.${id}`) }}
+        <span v-if="id == 'stock-list'">({{ store.stockList.length }})</span>
      </button>
    </div>

    <transition name="tab-change" mode="out-in">
      <keep-alive>
-        <component :is="chosenSectionComponent" :key="chosenSectionComponent"></component>
+        <component :is="chosenSectionComponent"></component>
      </keep-alive>
    </transition>
  </section>
 </template>

 <script lang="ts" setup>
-import { computed, KeepAlive } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useStore } from '../../store';
 import StockListTab from '../tabs/StockListTab.vue';
 import StockGeneratorTab from '../tabs/StockGeneratorTab.vue';
 import NumberGeneratorTab from '../tabs/NumberGeneratorTab.vue';
+import WikiListTab from '../tabs/WikiListTab.vue';
+
+const sectionButtonRefs = ref([]);

 const store = useStore();
 type SectionMode = typeof store.stockSectionMode;

-const sectionModes: { [key: string]: SectionMode } = {
-  SKŁAD: 'stock-list',
-  'GNR NUMERU': 'number-generator',
-  'GNR SKŁADU': 'stock-generator',
-};
+const sectionModes: SectionMode[] = ['stock-list', 'wiki-list', 'number-generator', 'stock-generator'];
+
+onMounted(() => {
+  window.addEventListener('keydown', (e) => {
+    if (e.target instanceof HTMLInputElement) return;
+
+    if (/[1234]/.test(e.key)) {
+      const keyNum = Number(e.key);
+      store.stockSectionMode = sectionModes[keyNum - 1];
+      (sectionButtonRefs.value[keyNum - 1] as HTMLButtonElement).focus();
+    }
+  });
+});

 const chosenSectionComponent = computed(() => {
  switch (store.stockSectionMode) {
    case 'stock-list':
      return StockListTab;

+    case 'wiki-list':
+      return WikiListTab;
+
    case 'stock-generator':
      return StockGeneratorTab;

@@ -83,10 +100,11 @@ function chooseSection(sectionId: SectionMode) {

 .section_modes {
  display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(4, 1fr);
+
  gap: 0.5em;

-  margin-bottom: 0.5em;
+  margin-bottom: 1em;

  button {
    position: relative;
@@ -110,5 +128,10 @@ function chooseSection(sectionId: SectionMode) {
    }
  }
 }
-</style>

+@media screen and (max-width: 650px) {
+  .section_modes {
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  }
+}
+</style>
@@ -1,56 +1,44 @@
 <template>
  <section class="train-image-section">
-    <div class="train-image__wrapper">
-      <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...
-          </div>
-        </transition>
-
-        <div class="no-img" v-if="!store.chosenVehicle">PODGLĄD WYBRANEGO POJAZDU</div>
-
-        <img
-          v-if="store.chosenVehicle"
-          :src="`https://spythere.github.io/api/td2/images/${store.chosenVehicle.type}--300px.jpg`"
-          :alt="store.chosenVehicle.type"
-          @load="onImageLoad"
-          @click="onImageClick"
-        />
-
-        <!-- <div class="empty-message" v-if="store.chosenVehicle && !store.chosenVehicle.imageSrc">Ten pojazd nie ma jeszcze podglądu!</div> -->
-      </div>
-
-      <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>
-
-        <div style="color: #ccc">
-          <div>
-            {{ store.chosenVehicle.length }}m | {{ store.chosenVehicle.mass }}t |
-            {{ store.chosenVehicle.maxSpeed }} km/h
-          </div>
-
-          <div v-if="isLocomotive(store.chosenVehicle)">Typ kabiny: {{ store.chosenVehicle.cabinType }}</div>
-
-          <div v-else>
-            {{
-              store.chosenVehicle.useType == 'car-cargo'
-                ? store.stockData?.usage[store.chosenVehicle.constructionType]
-                : 'Typ konstrukcji: ' + store.chosenVehicle.constructionType
-            }}
-          </div>
-
-          <b style="color: salmon;" v-if="store.chosenVehicle.supportersOnly">* TYLKO DLA SPONSORÓW</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__content" :class="{ sponsor: store.chosenVehicle?.isSponsorsOnly }">
+      <img
+        tabindex="0"
+        :src="store.chosenVehicle ? getThumbnailURL(store.chosenVehicle.type, 'small') : '/images/placeholder.jpg'"
+        @click="onImageClick"
+        @keydown.enter="onImageClick"
+        @error="onImageError"
+        type="image/jpeg"
+      />
    </div>
+
+    <div class="train-image__info" v-if="store.chosenVehicle">
+      <b class="text--accent">{{ store.chosenVehicle.type }}</b> &bull;
+      <b style="color: #ccc">
+        {{ $t(`preview.${isLocomotive(store.chosenVehicle) ? store.chosenVehicle.power : store.chosenVehicle.useType}`) }}
+      </b>
+
+      <div style="color: #ccc">
+        <div>{{ store.chosenVehicle.length }}m | {{ store.chosenVehicle.mass }}t | {{ store.chosenVehicle.maxSpeed }} km/h</div>
+
+        <div v-if="isLocomotive(store.chosenVehicle)">{{ $t('preview.cabin') }} {{ store.chosenVehicle.cabinType }}</div>
+
+        <div v-else>
+          {{
+            store.chosenVehicle.useType == 'car-cargo'
+              ? $t(`usage.${store.chosenVehicle.constructionType}`)
+              : `${$t('preview.construction')} ${store.chosenVehicle.constructionType}`
+          }}
+        </div>
+
+        <b style="color: salmon" v-if="store.chosenVehicle.isSponsorsOnly">{{
+          $t('preview.sponsor-only', [
+            new Date(store.chosenVehicle.sponsorsOnlyTimestamp).toLocaleDateString($i18n.locale == 'pl' ? 'pl-PL' : 'en-GB'),
+          ])
+        }}</b>
+      </div>
+    </div>
+
+    <div class="train-image__info" v-else>{{ $t('preview.desc') }}</div>
  </section>
 </template>

@@ -59,8 +47,17 @@ import { computed, defineComponent } from 'vue';
 import { useStore } from '../../store';
 import { isLocomotive } from '../../utils/vehicleUtils';
 import { ILocomotive, Vehicle } from '../../types';
+import imageMixin from '../../mixins/imageMixin';

 export default defineComponent({
+  mixins: [imageMixin],
+
+  data() {
+    return {
+      noImageAvailable: false,
+    };
+  },
+
  setup() {
    const store = useStore();

@@ -70,19 +67,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) {
@@ -96,16 +80,26 @@ export default defineComponent({
      this.store.imageLoading = false;
    },

+    onImageError(e: Event) {
+      const el = e.target as HTMLImageElement;
+      if (el.src == '/images/placeholder.jpg') return;
+
+      el.src = '/images/placeholder.jpg';
+    },
+
    isLocomotive(vehicle: Vehicle): vehicle is ILocomotive {
      return isLocomotive(vehicle);
    },

-    onImageClick() {
+    onImageClick(e: Event) {
+      const target = e.target as HTMLElement;
+
      const chosenVehicle = this.store.chosenVehicle;

      if (!chosenVehicle) return;

-      this.store.vehiclePreviewSrc = `https://spythere.github.io/api/td2/images/${chosenVehicle.type}--800px.jpg`;
+      this.store.lastFocusedElement = target;
+      this.store.vehiclePreviewSrc = this.getThumbnailURL(chosenVehicle.type, 'large');
    },
  },
 });
@@ -115,66 +109,45 @@ export default defineComponent({
@import '../../styles/global.scss';

 .train-image-section {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+
  grid-row: 3;
  grid-column: 1;

-  margin-top: 2em;
+  margin-top: 1em;
  height: 22em;
 }

 .train-image {
-  &__wrapper {
-    text-align: center;
-  }
-
  &__content {
-    border: 1px solid white;
-    position: relative;
-    overflow: hidden;
-
-    max-width: 22em;
-    height: 13em;
-    margin: 0 auto;
-
-    &.supporter {
+    &.sponsor img {
      border: 1px solid salmon;
    }

    img {
+      max-width: 380px;
      width: 100%;
      height: 100%;
+      border: 1px solid white;

-      cursor: pointer;
-    }
-
-    .empty-message,
-    .no-img {
-      position: absolute;
-      left: 0;
-      bottom: 0;
-
-      padding: 0.3em 0;
-      width: 100%;
-    }
-
-    .empty-message {
-      background: rgba(#000, 0.75);
+      cursor: zoom-in;
    }
  }
 }

 .train-image__info {
-  margin: 1em 0;
  font-size: 1.1em;
-  padding: 0 1em;
+  padding: 0.5em;
+  margin: 0.5em auto;
+  line-height: 1.35;

-  b {
-    font-size: 1.1em;
-  }
+  width: 100%;
+  max-width: 380px;

-  div {
-    margin: 0.25em 0;
-  }
+  background-color: $secondaryColor;
+  font-weight: bold;
 }

 // Transition animations
@@ -196,4 +169,3 @@ export default defineComponent({
  }
 }
 </style>
-
@@ -1,85 +1,176 @@
 <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 v-for="(_, name) in genData.regionNumbers" :value="name">{{ name }}</option>
+        <select v-model="chosenCategory" @change="randomizeTrainNumber()">
+          <option :value="null" disabled>
+            {{ $t("numgen.train-category") }}
+          </option>
+          <option
+            v-for="(_, category) in genData.categories"
+            :key="category"
+            :value="category"
+          >
+            {{ $t(`numgen.categories.${category}`) }}
+          </option>
        </select>

-        <select v-model="endRegionName" @change="randomizeTrainNumber">
-          <option :value="null" disabled>Końcowy obszar konstrukcyjny</option>
-          <option v-for="(_, name) in genData.regionNumbers" :value="name">{{ name }}</option>
+        <select v-model="beginRegionName" @change="randomizeTrainNumber()">
+          <option :value="null" disabled>
+            {{ $t("numgen.start-region") }}
+          </option>
+          <option
+            v-for="(_, name) in genData.regionNumbers"
+            :key="name"
+            :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>
+        <select v-model="endRegionName" @change="randomizeTrainNumber()">
+          <option :value="null" disabled>{{ $t("numgen.end-region") }}</option>
+          <option
+            v-for="(_, name) in genData.regionNumbers"
+            :key="name"
+            :value="name"
+          >
+            {{ name }}
+          </option>
        </select>
      </div>

-      <div class="generated-number">
-        <span v-if="trainNumber">Wygenerowany numer pociągu: <b class="text--accent">{{ trainNumber }}</b></span>
-        <span v-else>Wybierz obszary konstrukcyjne i kategorię!</span>
+      <div class="generated-number" @click="copyNumber">
+        <span v-if="trainNumber">
+          {{ $t("numgen.number-info") }}
+          <b class="text--accent">{{ trainNumber }}</b>
+        </span>
+        <span v-else>{{ $t("numgen.warning") }}</span>
      </div>

-      <hr>
-      
+      <!-- <div v-if="chosenCategory">
+        Current numbering rules: {{ $t(`numgen.rules.${chosenCategory}`) }};
+
+        <span v-if="beginRegionName && endRegionName">
+          <span v-if="beginRegionName == endRegionName">
+            pierwsze dwie cyfry:
+            {{ genData.sameRegions[beginRegionName].join(', ') }}
+            (numer w obrębie obszaru {{ beginRegionName }})
+          </span>
+
+          <span v-else>
+            pierwsza cyfra: {{ genData.regionNumbers[beginRegionName] }}; druga cyfra:
+            {{ genData.regionNumbers[endRegionName] }}
+          </span>
+        </span>
+      </div> -->
+
+      <div class="tab_links">
+        <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">PRZELOSUJ</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>
 </template>

 <script setup lang="ts">
-import { Ref, ref } from 'vue';
+import { Ref, ref } from "vue";
+import { useI18n } from "vue-i18n";

-import genData from '../../constants/numberGeneratorData.json';
+import genData from "../../constants/numberGeneratorData.json";

+const i18n = useI18n();
 type RegionName = keyof typeof genData.regionNumbers;
+type Category = keyof typeof genData.categories;

 const beginRegionName = ref(null) as Ref<RegionName | null>;
 const endRegionName = ref(null) as Ref<RegionName | null>;
-const categoryRules = ref(null) as Ref<string | null>;
+const chosenCategory = ref(null) as Ref<Category | null>;

 const trainNumber = ref(null) as Ref<string | null>;

-const randomizeTrainNumber = () => {
-  if (beginRegionName.value == null || endRegionName.value == null || categoryRules.value == null) return '';
+const copyNumber = () => {
+  if (trainNumber.value) {
+    navigator.clipboard.writeText(trainNumber.value);
+    alert(i18n.t("numgen.alert"));
+  }
+};

-  let number = '';
+const randomizeTrainNumber = (randomizeRegions = false) => {
+  // if (categoryRules.value == null) return;
+
+  const regionKeys = Object.keys(genData.regionNumbers);
+
+  if (beginRegionName.value == null || randomizeRegions)
+    beginRegionName.value = regionKeys[
+      (regionKeys.length * Math.random()) << 0
+    ] as RegionName;
+
+  if (endRegionName.value == null || randomizeRegions)
+    endRegionName.value = regionKeys[
+      (regionKeys.length * Math.random()) << 0
+    ] as RegionName;
+
+  let number = "";

  if (beginRegionName.value == endRegionName.value) {
-    const sameRegionsNumbers = genData.sameRegions[beginRegionName.value];
-    const randRegionNumber = sameRegionsNumbers[Math.floor(Math.random() * sameRegionsNumbers.length)];
+    const sameRegionsNumbers = genData.sameRegions[beginRegionName.value!];
+    const randRegionNumber =
+      sameRegionsNumbers[Math.floor(Math.random() * sameRegionsNumbers.length)];
    number += randRegionNumber.toString();
  } else {
-    const beginRegionNumber = genData.regionNumbers[beginRegionName.value];
-    const endRegionNumber = genData.regionNumbers[endRegionName.value];
+    const beginRegionNumber = genData.regionNumbers[beginRegionName.value!];
+    const endRegionNumber = genData.regionNumbers[endRegionName.value!];

    number += `${beginRegionNumber}${endRegionNumber}`;
  }

-  const rulesArray = categoryRules.value.split(';').map((r) => ({
-    index: r.split(':')[0],
-    rule: r.split(':')[1],
-    nums: Number(r.split(':')[2] || '1'),
-  }));
+  // Do not roll the rest of number again if only randomize regions and category rules are already selected
+  if (randomizeRegions && chosenCategory.value != null) {
+    trainNumber.value = number + trainNumber.value?.substring(2);
+    return;
+  }
+
+  if (chosenCategory.value == null) chosenCategory.value = "EI";
+
+  const rulesArray = genData.categories[chosenCategory.value]
+    .split(";")
+    .map((r) => ({
+      index: r.split(":")[0],
+      rule: r.split(":")[1],
+      nums: Number(r.split(":")[2] || "1"),
+    }));

  rulesArray.forEach((r) => {
-    const range = r.rule.split('-');
+    const range = r.rule.split("-");

    if (range.length == 1) number += r.rule;
    else {
      const [minRange, maxRange] = range;
-      const randRange = Math.floor(Math.random() * (Number(maxRange) - Number(minRange)) + Number(minRange)).toString();
+      const randRange = Math.floor(
+        Math.random() * (Number(maxRange) - Number(minRange)) +
+          Number(minRange),
+      ).toString();

-      number += new Array(Math.abs(randRange.length - r.nums)).fill('0').join('') + randRange;
+      number +=
+        new Array(Math.abs(randRange.length - r.nums)).fill("0").join("") +
+        randRange;
    }
  });

@@ -88,22 +179,25 @@ const randomizeTrainNumber = () => {
 </script>

 <style lang="scss" scoped>
-@import '../../styles/tab.scss';
-@import '../../styles/global.scss';
+@import "../../styles/tab.scss";
+@import "../../styles/global.scss";

 .options {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0.5em;

  select {
-    width: calc(50% - 0.5em);
+    width: 100%;
  }
 }

 .generated-number {
  font-size: 1.3em;
  font-weight: bold;
+  text-align: center;
+
+  cursor: pointer;

  margin: 0.5em 0;
  padding: 0.5em;
@@ -111,11 +205,13 @@ const randomizeTrainNumber = () => {
 }

 .tab_actions {
-  margin-top: 0.5em;
+  grid-template-columns: 1fr 1fr;
+  margin: 0.5em 0;
+}

-  button {
-    grid-column: 3;
-  }
+.tab_links {
+  display: flex;
+  justify-content: flex-end;
 }

@media screen and (max-width: $breakpointMd) {
@@ -130,4 +226,3 @@ const randomizeTrainNumber = () => {
  }
 }
 </style>
-
@@ -1,62 +1,62 @@
 <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
+          v-for="cargo in computedCargoData"
+          :key="cargo.name"
          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(cargo.name)"
+          @click="toggleCargoChosen(cargo.name, cargo.cargoList)"
        >
-          {{ k }}
+          {{ $t(`cargo.${cargo.name}`) }}
        </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 +80,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>
@@ -99,7 +100,7 @@ import { defineComponent } from 'vue';
 import { useStore } from '../../store';

 import stockMixin from '../../mixins/stockMixin';
-import { ICargo, ICarWagon } from '../../types';
+import { ICargo, ICarWagon, IStock } from '../../types';
 import warningsMixin from '../../mixins/warningsMixin';

 export default defineComponent({
@@ -126,7 +127,20 @@ export default defineComponent({

  computed: {
    computedChosenCarTypes() {
-      return new Set<string>(this.chosenCarTypes.sort((c1, c2) => (c1 > c2 ? 1 : -1)));
+      return new Set<string>(this.chosenCarTypes.slice().sort((c1, c2) => (c1 > c2 ? 1 : -1)));
+    },
+
+    computedCargoData() {
+      if (!this.store.stockData?.generator.cargo) return [];
+
+      const cargoGeneratorData = this.store.stockData.generator.cargo;
+
+      return Object.keys(cargoGeneratorData)
+        .sort((v1, v2) => this.$t(`cargo.${v1}`).localeCompare(this.$t(`cargo.${v2}`)))
+        .map((v) => ({
+          name: v,
+          cargoList: cargoGeneratorData[v],
+        }));
    },
  },

@@ -150,51 +164,80 @@ export default defineComponent({
    },

    generateStock(empty = false) {
-      const generatedChosenStockList = this.chosenCargoTypes.reduce((acc, type) => {
-        this.store.stockData?.generator.cargo[type]
-          .filter((c) => !this.excludedCarTypes.includes(c.split(':')[0]))
-          .forEach((c) => {
-            const [type, cargoType] = c.split(':');
+      const generatedChosenStockList = this.chosenCargoTypes.reduce(
+        (acc, type) => {
+          this.store.stockData?.generator.cargo[type]
+            .filter((c) => !this.excludedCarTypes.includes(c.split(':')[0]))
+            .forEach((c) => {
+              const [type, cargoType] = c.split(':');

-            const carWagonObjs = this.store.carDataList.filter((cw) => cw.type.startsWith(type));
-            const cargoObjs = [] as (ICargo | undefined)[];
+              const carWagonObjs = this.store.carDataList.filter((cw) => cw.type.startsWith(type));
+              const cargoObjs = [] as (ICargo | undefined)[];

-            if (!cargoType || empty) cargoObjs.push(undefined);
-            else if (cargoType == 'all') cargoObjs.push(...carWagonObjs[0]?.cargoList);
-            else cargoObjs.push(carWagonObjs[0]?.cargoList.find((cargo) => cargo.id == cargoType));
+              if (!cargoType || empty) cargoObjs.push(undefined);
+              else if (cargoType == 'all') cargoObjs.push(...carWagonObjs[0]!.cargoList);
+              else cargoObjs.push(carWagonObjs[0]?.cargoList.find((cargo) => cargo.id == cargoType));

-            carWagonObjs.forEach((cw) => {
-              cargoObjs.forEach((cargoObj) => {
-                const chosenStock = acc.find((a) => a.constructionType.includes(cw.constructionType));
+              carWagonObjs.forEach((cw) => {
+                cargoObjs.forEach((cargoObj) => {
+                  const chosenStock = acc.find((a) => a.constructionType.includes(cw.constructionType));

-                if (!chosenStock)
-                  acc.push({
-                    constructionType: cw.constructionType,
-                    carPool: [{ carWagon: cw, cargo: cargoObj }],
-                  });
-                else chosenStock.carPool.push({ carWagon: cw, cargo: cargoObj });
+                  if (!chosenStock)
+                    acc.push({
+                      constructionType: cw.constructionType,
+                      carPool: [{ carWagon: cw, cargo: cargoObj }],
+                    });
+                  else chosenStock.carPool.push({ carWagon: cw, cargo: cargoObj });
+                });
              });
            });
-          });

-        return acc;
-      }, [] as { constructionType: string; carPool: { carWagon: ICarWagon; cargo?: ICargo }[] }[]);
+          return acc;
+        },
+        [] as {
+          constructionType: string;
+          carPool: { carWagon: ICarWagon; cargo?: ICargo }[];
+        }[]
+      );

-      const headingLoco = this.store.stockList[0]?.isLoco ? this.store.stockList[0] : undefined;
+      let bestGeneration: { stockList: IStock[]; value: number } = {
+        stockList: [],
+        value: 0,
+      };

-      this.store.stockList.length = headingLoco ? 1 : 0;
-      const maxMass = this.store.acceptableMass || this.maxMass;
+      for (let i = 0; i < 10; i++) {
+        const headingLoco = this.store.stockList[0]?.isLoco ? this.store.stockList[0] : undefined;
+        this.store.stockList.length = headingLoco ? 1 : 0;

-      new Array(this.maxCarCount).fill(0).forEach(() => {
-        const randomStockType = generatedChosenStockList[~~(Math.random() * generatedChosenStockList.length)];
-        const { carWagon, cargo } = randomStockType.carPool[~~(Math.random() * randomStockType.carPool.length)];
+        const maxMass = this.store.acceptableMass > 0 ? Math.min(this.store.acceptableMass, this.maxMass) : this.maxMass;

-        if (this.store.totalMass + (cargo?.totalMass || carWagon.mass) > maxMass) return;
-        if (this.store.totalLength + carWagon.length > this.maxLength) return;
+        let exceeded = false;

-        this.addCarWagon(carWagon, cargo);
-      });
+        while (!exceeded) {
+          const randomStockType = generatedChosenStockList[~~(Math.random() * generatedChosenStockList.length)];
+          const { carWagon, cargo } = randomStockType.carPool[~~(Math.random() * randomStockType.carPool.length)];

+          if (
+            this.store.totalMass + (cargo?.totalMass || carWagon.mass) > maxMass ||
+            this.store.totalLength + carWagon.length > this.maxLength ||
+            this.store.stockList.length > this.maxCarCount
+          ) {
+            exceeded = true;
+            break;
+          }
+
+          this.addCarWagon(carWagon, cargo);
+        }
+
+        const currentGenerationValue = this.store.totalLength + this.store.totalMass + this.store.stockList.length;
+
+        if (bestGeneration.value < currentGenerationValue) {
+          bestGeneration.stockList = this.store.stockList;
+          bestGeneration.value = currentGenerationValue;
+        }
+      }
+
+      this.store.stockList = bestGeneration.stockList;
      this.store.stockSectionMode = 'stock-list';
    },

@@ -244,7 +287,7 @@ export default defineComponent({
 .generator_vehicles {
  display: grid;
  gap: 0.5em;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));

  button {
    position: relative;
@@ -256,13 +299,6 @@ export default defineComponent({

    background-color: $secondaryColor;

-    &[data-chosen='true'] {
-      background-color: $accentColor;
-      color: black;
-
-      box-shadow: 0 0 5px 1px $accentColor;
-    }
-
    &[data-excluded='true'] {
      background-color: gray;
      box-shadow: none;
@@ -294,12 +330,4 @@ export default defineComponent({
  font-weight: bold;
  color: black;
 }
-
-@media only screen and (max-width: 470px) {
-  .generator_cargo,
-  .generator_vehicles {
-    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-  }
-}
 </style>
-
@@ -1,53 +1,62 @@
 <template>
-  <section class="stock-list">
-    <div class="stock_controls" :data-disabled="store.chosenStockListIndex == -1">
-      <b class="no">
-        POJAZD NR <span class="text--accent">{{ store.chosenStockListIndex + 1 }}</span> &nbsp;
-      </b>
-
-      <button
-        class="btn"
-        :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
-        @click="moveUpStock(store.chosenStockListIndex)"
-      >
-        <img :src="getIconURL('higher')" alt="move up vehicle" />
-        PRZENIEŚ WYŻEJ
-      </button>
-
-      <button
-        class="btn"
-        :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
-        @click="moveDownStock(store.chosenStockListIndex)"
-      >
-        <img :src="getIconURL('lower')" alt="move down vehicle" />
-        PRZENIEŚ NIŻEJ
-      </button>
-
-      <button
-        class="btn"
-        :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
-        @click="removeStock(store.chosenStockListIndex)"
-      >
-        <img :src="getIconURL('remove')" alt="remove vehicle" />
-        USUŃ
-      </button>
+  <section class="stock-list-tab">
+    <div class="tab_header">
+      <h2>{{ $t('stocklist.title') }}</h2>
    </div>

    <div class="stock_actions">
-      <label class="file-label">
-        <div class="btn">WCZYTAJ</div>
+      <button class="btn btn--image" @click="clickFileInput">
        <input type="file" @change="uploadStock" ref="conFile" accept=".con,.txt" />
-      </label>
-
-      <button class="btn" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="downloadStock">POBIERZ</button>
-
-      <button class="btn" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="copyToClipboard">
-        SKOPIUJ
+        <img src="/images/icon-upload.svg" alt="upload icon" />
+        {{ $t('stocklist.action-upload') }}
      </button>

-      <button class="btn" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="resetStock">ZRESETUJ</button>
+      <button class="btn btn--image" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="downloadStock">
+        <img src="/images/icon-download.svg" alt="download icon" />
+        {{ $t('stocklist.action-download') }}
+      </button>

-      <button class="btn" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="shuffleCars">PRZETASUJ</button>
+      <button class="btn btn--image" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="copyToClipboard">
+        <img src="/images/icon-copy.svg" alt="copy icon" />
+        {{ $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" />
+        {{ $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" />
+        {{ $t('stocklist.action-shuffle') }}
+      </button>
+    </div>
+
+    <div class="stock_controls" :data-disabled="store.chosenStockListIndex == -1">
+      <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 class="btn" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" @click="moveUpStock(store.chosenStockListIndex)">
+        <img :src="getIconURL('higher')" alt="move up vehicle" />
+        {{ $t('stocklist.action-move-up') }}
+      </button>
+
+      <button class="btn" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" @click="moveDownStock(store.chosenStockListIndex)">
+        <img :src="getIconURL('lower')" alt="move down vehicle" />
+        {{ $t('stocklist.action-move-down') }}
+      </button>
+
+      <button class="btn" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" @click="removeStock(store.chosenStockListIndex)">
+        <img :src="getIconURL('remove')" alt="remove vehicle" />
+        {{ $t('stocklist.action-remove') }}
+      </button>
    </div>

    <div class="stock_specs">
@@ -60,46 +69,57 @@
      </b>

      <span>
-        Masa: <span class="text--accent">{{ store.totalMass }}t</span> (dopuszczalna:
+        {{ $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
-        >) - Długość:
+        >) - {{ $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>

-    <div class="stock_warnings">
-      <div class="warning" v-if="locoNotSuitable">
-        Lokomotywy EP07 i EP08 są przeznaczone jedynie do ruchu pasażerskiego!
-      </div>
+    <div class="stock_spawn-settings">
+      <label v-if="store.stockSupportsColdStart" :data-checked="store.isColdStart">
+        <input type="checkbox" v-model="store.isColdStart" />
+        {{ $t('stocklist.coldstart-info') }}
+      </label>

-      <div class="warning" v-if="trainTooLong && store.isTrainPassenger">
-        Maksymalna długość składów pasażerskich nie może przekraczać 350m!
-      </div>
-
-      <div class="warning" v-if="trainTooLong && !store.isTrainPassenger">
-        Maksymalna długość składów innych niż pasażerskie nie może przekraczać 650m!
-      </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>
-      </div>
-
-      <div class="warning" v-if="tooManyLocomotives">Ten skład posiada za dużo pojazdów trakcyjnych!</div>
+      <label v-if="store.stockSupportsDoubleManning" :data-checked="store.isDoubleManned">
+        <input type="checkbox" v-model="store.isDoubleManned" />
+        {{ $t('stocklist.doublemanning-info') }}
+      </label>
    </div>

-    <StockThumbnails :onListItemClick="onListItemClick" :onStockImageError="stockImageError" />
+    <div class="stock_warnings" v-if="stockHasWarnings">
+      <div class="warning" v-if="locoNotSuitable">(!) {{ $t('stocklist.warning-not-suitable') }}</div>
+
+      <div class="warning" v-if="trainTooLong && store.isTrainPassenger">(!) {{ $t('stocklist.warning-passenger-too-long') }}</div>
+
+      <div class="warning" v-if="trainTooLong && !store.isTrainPassenger">(!) {{ $t('stocklist.warning-freight-too-long') }}</div>
+
+      <div class="warning" v-if="trainTooHeavy">
+        (!)
+        <i18n-t keypath="stocklist.warning-too-heavy">
+          <template #href>
+            <a target="_blank" href="https://docs.google.com/spreadsheets/d/1KVa5vn2d8XGkXQFwbavVudwKqUQxbLOucHWs2VYqAUE">
+              {{ $t('stocklist.acceptable-mass-docs') }}
+            </a>
+          </template>
+        </i18n-t>
+      </div>
+
+      <div class="warning" v-if="tooManyLocomotives">
+        {{ $t('stocklist.warning-too-many-locos') }}
+      </div>
+    </div>
+
+    <StockThumbnails :onListItemClick="onListItemClick" />

    <!-- 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">
@@ -115,23 +135,19 @@
          @keydown.backspace="removeStock(i)"
          ref="itemRefs"
        >
-          <div
-            class="stock-info"
-            @dragstart="onDragStart(i)"
-            @drop="onDrop($event, i)"
-            @dragover="allowDrop"
-            draggable="true"
-          >
+          <div class="stock-info" @dragstart="onDragStart(i)" @drop="onDrop($event, i)" @dragover="allowDrop" draggable="true">
            <span class="stock-info__no" :data-selected="i == store.chosenStockListIndex">
              <span v-if="i == store.chosenStockListIndex">&bull;&nbsp;</span>
              {{ i + 1 }}.
            </span>

-            <span class="stock-info__type" :class="{ supporter: stock.supportersOnly }">
+            <span class="stock-info__type" :class="{ sponsor: stock.isSponsorsOnly }">
              {{ stock.isLoco ? stock.type : getCarSpecFromType(stock.type) }}
            </span>

-            <span class="stock-info__cargo" v-if="stock.cargo"> {{ stock.cargo.id }} </span>
+            <span class="stock-info__cargo" v-if="stock.cargo">
+              {{ stock.cargo.id }}
+            </span>
            <span class="stock-info__length"> {{ stock.length }}m </span>
            <span class="stock-info__mass">{{ stock.cargo ? stock.cargo.totalMass : stock.mass }}t </span>
            <span class="stock-info__speed"> {{ stock.maxSpeed }}km/h </span>
@@ -144,19 +160,18 @@

 <script lang="ts">
 import { defineComponent } from 'vue';
-import TrainImage from '../sections/TrainImageSection.vue';

 import { useStore } from '../../store';
+
 import warningsMixin from '../../mixins/warningsMixin';
 import imageMixin from '../../mixins/imageMixin';
 import stockPreviewMixin from '../../mixins/stockPreviewMixin';
-import { IStock } from '../../types';
 import StockThumbnails from '../utils/StockThumbnails.vue';
 import stockMixin from '../../mixins/stockMixin';

 export default defineComponent({
  name: 'stock-list',
-  components: { TrainImage, StockThumbnails },
+  components: { StockThumbnails },

  mixins: [warningsMixin, imageMixin, stockMixin, stockPreviewMixin],

@@ -170,20 +185,26 @@ export default defineComponent({

  data: () => ({
    imageOffsetY: 0,
-
    draggedVehicleID: -1,
+
+    stockActions: [{}],
  }),

  computed: {
    stockString() {
+      if (this.store.stockList.length == 0) return '';
+
+      const includeColdStart = this.store.isColdStart && this.store.stockSupportsColdStart;
+      const includeDoubleManned = this.store.isDoubleManned && this.store.stockSupportsDoubleManning;
+
      return this.store.stockList
-        .map((stock) => {
-          let s = stock.isLoco || !stock.cargo ? stock.type : `${stock.type}:${stock.cargo.id}`;
+        .map((stock, i) => {
+          let stockTypeStr = stock.isLoco || !stock.cargo ? stock.type : `${stock.type}:${stock.cargo.id}`;

-          let final = s;
-          for (let i = 0; i < stock.count - 1; i++) final += `;${s}`;
+          if (i == 0 && (includeColdStart || includeDoubleManned))
+            return `${stockTypeStr},${includeColdStart ? 'c' : ''}${includeDoubleManned ? 'd' : ''}`;

-          return final;
+          return stockTypeStr;
        })
        .join(';');
    },
@@ -195,35 +216,29 @@ export default defineComponent({
    chosenStockVehicle() {
      return this.store.chosenStockListIndex == -1 ? undefined : this.store.stockList[this.store.chosenStockListIndex];
    },
-  },

-  methods: {
    stockHasWarnings() {
      return this.tooManyLocomotives || this.trainTooHeavy || this.trainTooLong || this.locoNotSuitable;
    },
+  },

-    stockImageError(e: Event, stock: IStock): void {
-      (e.target as HTMLImageElement).src = `images/${stock.useType}-unknown.png`;
-    },
-
+  methods: {
    copyToClipboard() {
-      // if (this.stockHasWarnings()) {
-      //   alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
-      //   return;
-      // }
-
      navigator.clipboard.writeText(this.stockString);

      setTimeout(() => {
-        alert('Pociąg został skopiowany do schowka!');
+        alert(this.$t('stocklist.alert-copied'));
      }, 20);
    },

+    clickFileInput() {
+      (this.$refs['conFile'] as HTMLInputElement).click();
+    },
+
    onListItemClick(stockID: number) {
      const stock = this.store.stockList[stockID];

-      this.store.chosenStockListIndex =
-        this.store.chosenStockListIndex == stockID && this.store.chosenVehicle?.type == stock.type ? -1 : stockID;
+      this.store.chosenStockListIndex = this.store.chosenStockListIndex == stockID && this.store.chosenVehicle?.type == stock.type ? -1 : stockID;

      if (this.store.chosenStockListIndex == -1) {
        this.store.chosenVehicle = null;
@@ -318,19 +333,13 @@ export default defineComponent({
    },

    downloadStock() {
-      if (this.store.stockList.length == 0) return alert('Lista pojazdów jest pusta!');
+      if (this.store.stockList.length == 0) return alert(this.$t('stocklist.alert-empty'));

-      // if (this.stockHasWarnings())
-      //   return alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
+      const defaultName = `${this.store.chosenRealStockName || this.store.stockList[0].type} ${this.store.totalMass}t; ${
+        this.store.totalLength
+      }m; vmax ${this.store.maxStockSpeed}`;

-      const defaultName = `${this.store.chosenRealStockName || this.store.stockList[0].type} ${
-        this.store.totalMass
-      }t; ${this.store.totalLength}m; vmax ${this.store.maxStockSpeed}`;
-
-      const fileName = prompt(
-        'Nazwij plik, a następnie pobierz do folderu Presets (Dokumenty/TTSK/TrainDriver2):',
-        defaultName
-      );
+      const fileName = prompt(this.$t('stocklist.prompt-file'), defaultName);

      if (!fileName) return;

@@ -397,6 +406,12 @@ export default defineComponent({

 <style lang="scss" scoped>
@import '../../styles/global';
+@import '../../styles/tab.scss';
+
+.stock-list-tab {
+  display: grid;
+  grid-gap: 0.5em;
+}

 .warning {
  padding: 0.25em;
@@ -420,7 +435,6 @@ export default defineComponent({
  flex-wrap: wrap;

  padding: 0.5em;
-  margin-bottom: 1em;

  background-color: #353a57;

@@ -453,16 +467,54 @@ export default defineComponent({
 .stock_actions {
  display: grid;
  gap: 0.5em;
-  margin-bottom: 1em;

-  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

-  label.file-label {
-    text-align: center;
-    cursor: pointer;
+  button {
+    width: 100%;

    input {
-      display: none;
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+  }
+}
+
+.stock_spawn-settings {
+  display: flex;
+  gap: 0.5em;
+
+  label > input {
+    position: absolute;
+    clip: rect(1px, 1px, 1px, 1px);
+    padding: 0;
+    border: 0;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+  }
+
+  label {
+    padding: 0.25em 0.5em;
+    border-radius: 0.25em;
+    background-color: #222;
+    color: #aaa;
+    cursor: pointer;
+
+    text-transform: uppercase;
+    transition: color 200ms;
+
+    &::before {
+      content: '\2716';
+    }
+  }
+
+  label[data-checked='true'] {
+    color: palegreen;
+
+    &::before {
+      content: '\2714';
    }
  }
 }
@@ -475,9 +527,7 @@ export default defineComponent({

 ul {
  position: relative;
-
  overflow: auto;
-
  height: 500px;
 }

@@ -521,11 +571,7 @@ li > .stock-info {
  }
 }

-.stock_warnings {
-  margin: 0.5em 0;
-}
-
-.supporter {
+.sponsor {
  color: salmon;
 }

@@ -586,4 +632,3 @@ li > .stock-info {
  }
 }
 </style>
-
@@ -0,0 +1,327 @@
+<template>
+  <section class="wiki-list tab">
+    <div class="tab_header">
+      <h2>{{ $t('wiki.title') }}</h2>
+    </div>
+
+    <div class="tab_content">
+      <div class="actions-panel">
+        <div class="actions-panel_vehicles">
+          <button class="btn" :data-chosen="currentFilterMode == 'tractions'" @click="toggleFilter('tractions')">
+            {{ $t('wiki.action-vehicles') }}
+          </button>
+          <button class="btn" :data-chosen="currentFilterMode == 'carriages'" @click="toggleFilter('carriages')">
+            {{ $t('wiki.action-carriages') }}
+          </button>
+        </div>
+
+        <div class="actions-panel_search">
+          <input type="text" :placeholder="$t('wiki.search')" v-model="searchedVehicleTypeName" />
+        </div>
+      </div>
+
+      <div class="table-wrapper" ref="table-wrapper">
+        <table>
+          <thead>
+            <tr>
+              <th v-for="header in visibleHeaders" @click="toggleSorter(header)" :key="header.id">
+                {{ $t(`wiki.header.${header.id}`) }}
+
+                <span v-if="currentSorter.id == header.id">
+                  {{ currentSorter.direction == 1 ? `&uArr;` : `&dArr;` }}
+                </span>
+              </th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr
+              v-for="{ vehicle, show } in computedTableData"
+              tabindex="0"
+              v-show="show"
+              :key="vehicle.type"
+              @click="previewVehicle(vehicle)"
+              @keydown.enter="previewVehicle(vehicle)"
+              @dblclick="addVehicle(vehicle)"
+            >
+              <td style="width: 120px">
+                <img
+                  width="120"
+                  :src="getThumbnailURL(vehicle.type, 'small')"
+                  :alt="`${vehicle.type}`"
+                  loading="lazy"
+                  @error="(e) => ((e.target as HTMLElement).style.display = 'none')"
+                />
+              </td>
+
+              <td :data-sponsoronly="vehicle.isSponsorsOnly">{{ vehicle.type }}</td>
+
+              <td v-if="isLocomotive(vehicle)">{{ $t(`wiki.${vehicle.power}`) }}</td>
+              <td v-else>{{ $t(`wiki.${vehicle.useType}`) }}</td>
+
+              <td>{{ vehicle.constructionType }}</td>
+              <td>{{ vehicle.length }}m</td>
+              <td>{{ vehicle.mass }}t</td>
+              <td>{{ vehicle.maxSpeed }}km/h</td>
+
+              <td v-if="currentFilterMode == 'carriages'">{{ !isLocomotive(vehicle) ? vehicle.cargoList.length : '---' }}</td>
+              <td v-if="currentFilterMode == 'tractions'">
+                {{ isLocomotive(vehicle) ? (vehicle.coldStart ? `&check;` : '&cross;') : '---' }}
+              </td>
+            </tr>
+          </tbody>
+
+          <span ref="table-bottom"></span>
+        </table>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../../store';
+import stockPreviewMixin from '../../mixins/stockPreviewMixin';
+import { Vehicle } from '../../types';
+import { isLocomotive } from '../../utils/vehicleUtils';
+import stockMixin from '../../mixins/stockMixin';
+import imageMixin from '../../mixins/imageMixin';
+
+type SorterID = 'type' | 'constructionType' | 'image' | 'length' | 'mass' | 'maxSpeed' | 'cargoCount' | 'group' | 'coldStart';
+
+interface IWikiHeader {
+  id: SorterID;
+  sortable: boolean;
+  for: 'all' | 'carriages' | 'tractions';
+}
+
+interface IWikiRow {
+  vehicle: Vehicle;
+  show: boolean;
+}
+
+const headers: IWikiHeader[] = [
+  { id: 'image', sortable: false, for: 'all' },
+  { id: 'type', sortable: true, for: 'all' },
+  { id: 'group', sortable: true, for: 'all' },
+  { id: 'constructionType', sortable: true, for: 'all' },
+  { id: 'length', sortable: true, for: 'all' },
+  { id: 'mass', sortable: true, for: 'all' },
+  { id: 'maxSpeed', sortable: true, for: 'all' },
+  { id: 'coldStart', sortable: true, for: 'tractions' },
+  { id: 'cargoCount', sortable: true, for: 'carriages' },
+];
+
+export default defineComponent({
+  mixins: [stockPreviewMixin, stockMixin, imageMixin],
+
+  data() {
+    return {
+      store: useStore(),
+      headers,
+
+      scrollTop: 0,
+
+      searchedVehicleTypeName: '',
+
+      currentSorter: {
+        id: 'type' as SorterID,
+        direction: 1,
+      },
+
+      currentFilterMode: 'all' as 'all' | 'tractions' | 'carriages',
+    };
+  },
+
+  activated() {
+    const tableWrapperRef = this.$refs['table-wrapper'] as HTMLElement;
+
+    tableWrapperRef.scrollTo({
+      top: this.scrollTop,
+    });
+  },
+
+  methods: {
+    isLocomotive,
+
+    toggleFilter(name: typeof this.currentFilterMode) {
+      this.currentFilterMode = this.currentFilterMode == name ? 'all' : name;
+    },
+
+    toggleSorter(header: IWikiHeader) {
+      if (!header.sortable) return;
+
+      if (header.id == this.currentSorter.id) this.currentSorter.direction *= -1;
+      this.currentSorter.id = header.id;
+    },
+
+    sortTableRows(row1: IWikiRow, row2: IWikiRow) {
+      if (!row1.show) return 0;
+
+      const { id, direction } = this.currentSorter;
+
+      switch (id) {
+        case 'type':
+        case 'constructionType':
+        case 'group':
+          return direction == 1 ? row1.vehicle[id].localeCompare(row2.vehicle[id]) : row2.vehicle[id].localeCompare(row1.vehicle[id]);
+
+        case 'mass':
+        case 'length':
+        case 'maxSpeed':
+          return Math.sign(row1.vehicle[id] - row2.vehicle[id]) * direction;
+
+        case 'cargoCount':
+          return (
+            (!isLocomotive(row1.vehicle) ? Math.sign(row1.vehicle.cargoList.length || -1) : -1) -
+            (!isLocomotive(row2.vehicle) ? (row2.vehicle.cargoList.length || -1) * direction : -1)
+          );
+
+        case 'coldStart':
+          return (
+            ((isLocomotive(row1.vehicle) && row1.vehicle.coldStart ? 1 : -1) - (isLocomotive(row2.vehicle) && row2.vehicle.coldStart ? 1 : -1)) *
+            direction
+          );
+
+        default:
+          break;
+      }
+
+      return direction == 1 ? row1.vehicle.type.localeCompare(row2.vehicle.type) : row2.vehicle.type.localeCompare(row1.vehicle.type);
+    },
+  },
+
+  computed: {
+    computedTableData(): IWikiRow[] {
+      return this.store.vehicleDataList
+        .map((vehicle) => ({
+          vehicle,
+          show:
+            new RegExp(`${this.searchedVehicleTypeName.trim()}`, 'i').test(vehicle.type) &&
+            (this.currentFilterMode == 'all' ||
+              (this.currentFilterMode == 'tractions' && isLocomotive(vehicle)) ||
+              (this.currentFilterMode == 'carriages' && !isLocomotive(vehicle))),
+        }))
+        .sort((a, b) => this.sortTableRows(a, b));
+    },
+
+    visibleHeaders() {
+      const filtersActive = this.currentFilterMode;
+
+      return this.headers.filter((header) => header.for == 'all' || header.for == filtersActive);
+    },
+
+    areTractionVehiclesShown() {
+      return this.currentFilterMode == 'all' || this.currentFilterMode == 'tractions';
+    },
+
+    areCarriagesShown() {
+      return this.currentFilterMode == 'all' || this.currentFilterMode == 'carriages';
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/tab.scss';
+
+.actions-panel {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  flex-wrap: wrap;
+  gap: 0.5em;
+
+  margin: 0.5em 0;
+}
+
+.actions-panel_vehicles {
+  display: flex;
+  gap: 0.5em;
+}
+
+.actions-panel_search {
+  input {
+    width: auto;
+  }
+}
+
+.table-wrapper {
+  overflow: auto;
+  height: 750px;
+  max-height: 95vh;
+}
+
+.wiki-list table {
+  border-collapse: collapse;
+  width: 100%;
+
+  thead {
+    position: sticky;
+    top: 0;
+  }
+
+  th {
+    background-color: #111;
+    padding: 0.5em;
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+  }
+
+  tr {
+    cursor: pointer;
+    background-color: #333;
+
+    &:first-child {
+      min-width: 120px;
+    }
+
+    &:nth-child(odd) {
+      background-color: #444;
+    }
+
+    &:hover {
+      background-color: #666;
+    }
+  }
+
+  td {
+    text-align: center;
+    height: 70px;
+
+    &[data-sponsoronly='true'] {
+      color: salmon;
+    }
+  }
+}
+
+@media screen and (max-width: $breakpointMd) {
+  .wiki-list table {
+    th {
+      min-width: 100px;
+    }
+
+    img {
+      max-width: 100px;
+    }
+  }
+}
+
+@media screen and (max-width: $breakpointSm) {
+  .actions-panel {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .actions-panel_vehicles {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .actions-panel_search {
+    display: grid;
+  }
+}
+</style>
@@ -0,0 +1,52 @@
+<template>
+  <div
+    class="image-preview"
+    @click="store.vehiclePreviewSrc = ''"
+    @keydown.esc="store.vehiclePreviewSrc = ''"
+    tabindex="0"
+  >
+    <img :src="store.vehiclePreviewSrc" alt="preview" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { useStore } from "../../store";
+
+export default defineComponent({
+  data() {
+    return {
+      store: useStore(),
+    };
+  },
+
+  mounted() {
+    this.$el.focus();
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.image-preview {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 99;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 100%;
+  height: 100%;
+
+  background: rgba(black, 0.85);
+  cursor: zoom-out;
+
+  img {
+    max-width: 100%;
+    height: auto;
+    max-height: 100%;
+  }
+}
+</style>
@@ -1,28 +1,28 @@
 <template>
-  <div class="stock_thumbnails" ref="thumbnailsRef">
+  <div class="stock-thumbnails" ref="thumbnailsRef">
    <div
+      class="thumbnail-item"
      v-for="(stock, stockIndex) in store.stockList"
+      :key="stockIndex"
      :data-selected="store.chosenStockListIndex == stockIndex"
+      :data-sponsor="stock.isSponsorsOnly"
      draggable="true"
      @dragstart="onDragStart(stockIndex)"
      @drop="onDrop($event, stockIndex)"
      @dragover="allowDrop"
+      @click="onListItemClick(stockIndex)"
    >
-      <span @click="onListItemClick(stockIndex)" :key="stock.id">
-        <b :class="{ supporter: stock.supportersOnly }">
-          {{ stock.type }}
-        </b>
+      <b>
+        {{ stock.type }}
+      </b>

-        <span>
-          <img
-            draggable="false"
-            :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stock.type}.png`"
-            :alt="stock.type"
-            :title="stock.type"
-            @error="stockImageError($event, stock)"
-          />
-        </span>
-      </span>
+      <img
+        draggable="false"
+        :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stock.type}.png`"
+        :alt="stock.type"
+        :title="stock.type"
+        @error="stockImageError($event, stock)"
+      />
    </div>
  </div>
 </template>
@@ -33,7 +33,7 @@ import { useStore } from '../../store';
 import { IStock } from '../../types';

 const store = useStore();
-const emit = defineEmits(['listItemClick', 'stockImageError']);
+const emit = defineEmits(['listItemClick']);

 const thumbnailsRef = ref() as Ref<HTMLElement>;
 const draggedIndex = ref(-1);
@@ -43,7 +43,7 @@ const onListItemClick = (index: number) => {
 };

 const stockImageError = (e: Event, stock: IStock) => {
-  emit('stockImageError', e, stock);
+  (e.target as HTMLImageElement).src = `images/${stock.useType}-unknown.png`;
 };

 watch(
@@ -52,9 +52,11 @@ watch(
    if (index < 0) return;

    nextTick(() => {
-      (thumbnailsRef.value as HTMLElement)
-        .querySelector(`div:nth-child(${index + 1})`)
-        ?.scrollIntoView({ block: 'nearest', inline: 'start', behavior: 'smooth' });
+      (thumbnailsRef.value as HTMLElement).querySelector(`div:nth-child(${index + 1})`)?.scrollIntoView({
+        block: 'nearest',
+        inline: 'start',
+        behavior: 'smooth',
+      });
    });
  }
 );
@@ -84,45 +86,45 @@ const allowDrop = (e: DragEvent) => {
 </script>

 <style lang="scss" scoped>
-.stock_thumbnails {
+.stock-thumbnails {
  display: flex;
-  margin: 1em 0;
-
  overflow: auto;
-
  background-color: #353a57;
+}

-  > div {
-    display: flex;
-    align-items: flex-end;
-    cursor: pointer;
-    min-height: 100px;
+.thumbnail-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;

-    &[data-selected='true'] {
-      background-color: rebeccapurple;
-    }
+  flex-direction: column;
+  gap: 0.5em;

-    > span {
-      display: flex;
-      flex-direction: column;
-      gap: 0.5em;
-      padding: 0.5em 0;
+  padding-top: 0.5em;

-      text-align: center;
+  cursor: pointer;
+  min-height: 100px;
+  font-size: 0.85em;

-      font-size: 0.85em;
-      user-select: none;
-      -moz-user-select: none;
-    }
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+
+  &[data-selected='true'] {
+    background-color: rebeccapurple;
+  }
+
+  b {
+    color: #ccc;
+    margin: 0 1em;
+  }
+
+  &[data-sponsor='true'] > b {
+    color: salmon;
  }

  img {
    max-height: 60px;
  }
 }
-
-.supporter {
-  color: salmon;
-}
 </style>
-
@@ -0,0 +1,10 @@
+{
+  "EU06": [650, 2000],
+  "EU07": [650, 2000],
+  "EU07E": [650, 2000],
+  "EP07": [650, 650],
+  "EP08": [650, 650],
+  "EP09": [800, 800],
+  "ET41": [700, 4000],
+  "SM42": [2400, 2400]
+}
@@ -12,8 +12,8 @@
  },
  "sameRegions": {
    "Losowy": [
-      10, 11, 19, 91, 93, 97, 99, 20, 22, 29, 30, 33, 39, 40, 44, 49, 94, 50, 55, 59, 90, 95, 96, 66, 60, 69, 77, 70,
-      79, 88, 80, 89, 92, 98
+      10, 11, 19, 91, 93, 97, 99, 20, 22, 29, 30, 33, 39, 40, 44, 49, 94, 50,
+      55, 59, 90, 95, 96, 66, 60, 69, 77, 70, 79, 88, 80, 89, 92, 98
    ],
    "Warszawa": [10, 11, 19, 91, 93, 97, 99],
    "Lublin": [20, 22, 29],
@@ -26,14 +26,12 @@
    "Rezerwa": [89, 92, 98]
  },
  "categories": {
-    "ekspres krajowy (EI)": "2:00-99:2",
-    "międzywojewódzki pośpieszny (MP)": "2:050-169:3",
-    "wojewódzki pośpieszny (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"
  }
 }
-
@@ -7,6 +7,14 @@
      "2000": 70
    }
  },
+  "EU07E": {
+    "passenger": {
+      "650": 125
+    },
+    "cargo": {
+      "2000": 70
+    }
+  },
  "EP07": {
    "passenger": {
      "650": 125
@@ -19,6 +27,12 @@
    },
    "cargo": null
  },
+  "EP09": {
+    "passenger": {
+      "650": 160
+    },
+    "cargo": null
+  },
  "ET41": {
    "passenger": {
      "700": 125
@@ -50,4 +64,3 @@
    }
  }
 }
-
@@ -1,9 +1,9 @@
 export const enum EVehicleUseType {
-    LOCO_ELECTRICAL = 'loco-e',
-    LOCO_DIESEL = "loco-s",
-    EMU = "loco-ezt",
-    DMU = "loco-szt",
+  LOCO_ELECTRICAL = "loco-e",
+  LOCO_DIESEL = "loco-s",
+  EMU = "loco-ezt",
+  DMU = "loco-szt",

-    CAR_PASSENGER = "car-passenger",
-    CAR_CARGO = "car-cargo"
-}
+  CAR_PASSENGER = "car-passenger",
+  CAR_CARGO = "car-cargo",
+}
@@ -0,0 +1,10 @@
+import axios from "axios";
+
+const http = axios.create({
+  baseURL:
+    import.meta.env.VITE_API_DEV === "1" && import.meta.env.DEV
+      ? "http://localhost:5500"
+      : "https://spythere.github.io/api",
+});
+
+export default http;
@@ -0,0 +1,35 @@
+import localePL from "./locales/pl.json";
+import localeEN from "./locales/en.json";
+import { createI18n } from "vue-i18n";
+import http from "./http";
+
+type LocaleMessageSchema = typeof localePL;
+type LocaleKey = "en" | "pl";
+
+const locales: { [key in LocaleKey]: LocaleMessageSchema } = {
+  en: localeEN,
+  pl: localePL,
+};
+
+const locale =
+  window.localStorage.getItem("locale") ||
+  (/^pl\b/.test(navigator.language) ? "pl" : "en");
+
+const i18n = createI18n<[LocaleMessageSchema], "en" | "pl">({
+  locale,
+  fallbackLocale: "pl",
+  legacy: false,
+  globalInjection: true,
+  messages: locales,
+});
+
+async function fetchBackendTranslations() {
+  const localeData = (await http.get(`td2/data/locales.json`)).data;
+
+  i18n.global.mergeLocaleMessage("pl", localeData.pl);
+  i18n.global.mergeLocaleMessage("en", localeData.en);
+}
+
+fetchBackendTranslations();
+
+export default i18n;
@@ -0,0 +1,153 @@
+{
+  "app": {
+    "title": "ROLLING STOCK EDITOR"
+  },
+  "footer": {
+    "disclaimer": "This site has only an informational intent. The author does not carry any responsibility for creating trains against {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": "POLISH TRAIN COMPOSITIONS"
+  },
+  "preview": {
+    "title": "RAILWAY VEHICLE PREVIEW",
+    "loading": "IMAGE LOADING...",
+    "desc": "Choose a railway vehicle above to see its preview",
+    "sponsor-only": "* SPONSORS ONLY UNTIL {0}",
+    "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 CARRIAGE",
+    "cabin": "Cabin type:",
+    "construction": "Construction type:"
+  },
+  "topbar": {
+    "stock-list": "STOCK",
+    "wiki-list": "VEHICLES",
+    "number-generator": "NUMBER GEN.",
+    "stock-generator": "STOCK GEN."
+  },
+  "stocklist": {
+    "title": "STOCK EDITOR",
+    "alert-copied": "The rolling stock has been copied to your clipboard!",
+    "alert-empty": "Lista pojazdów jest pusta!",
+    "prompt-file": "Name a file and download it to the Presets folder (Documents/TTSK/TrainDriver2):",
+    "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": "Locomotive cold start",
+    "doublemanning-info": "Double manning",
+    "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",
+    "alert": "The number has been copied to your clipboard!",
+    "start-region": "Beginning construction region",
+    "end-region": "Terminating construction region",
+    "train-category": "Train category",
+    "number-info": "Generated train number:",
+    "warning": "Choose category and (optionally) construction regions",
+    "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)"
+    },
+    "rules": {
+      "EI": "4 digits - ends within the range of 00-99",
+      "MP/RP": "5 digits - ends within the range of 050-169",
+      "RO": "5 digits - ends within the range of 200-999",
+      "PW": "6 digits - '6' on the 3rd place; ends within the range of 000-899",
+      "TM": "6 digits - '4' on the 3rd place; ends within the range of 000-899",
+      "TK": "6 digits - '3' on the 3rd place; ends within the range of 000-899",
+      "LT": "6 digits - '5' on the 3rd place; ends within the range of 000-899"
+    }
+  },
+  "wiki": {
+    "title": "LIST OF AVAILABLE VEHICLES",
+    "action-vehicles": "TRACTION UNITS",
+    "action-carriages": "CARRIAGES",
+    "search": "Search for a vehicle...",
+    "header": {
+      "image": "Image",
+      "type": "Name",
+      "group": "Type group",
+      "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",
+    "car-passenger": "Passenger carriage",
+    "car-cargo": "Frieght carriage"
+  },
+  "realstock": {
+    "title": "POLISH TRAIN COMPOSITIONS by",
+    "search-name": "Search by name",
+    "search-stock": "Search by vehicles",
+    "action-reset": "RESET"
+  }
+}
@@ -0,0 +1,153 @@
+{
+  "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 {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 POJAZD SZYNOWY",
+    "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",
+    "loading": "ŁADOWANIE OBRAZU...",
+    "desc": "Wybierz pojazd lub wagon, aby zobaczyć jego podgląd powyżej",
+    "sponsor-only": "* TYLKO DLA SPONSORÓW DO {0}",
+    "loco-e": "ELEKTROWÓZ",
+    "loco-s": "SPALINOWÓZ",
+    "loco-ezt": "EZT",
+    "loco-szt": "SZT",
+    "car-passenger": "WAGON PASAŻERSKI",
+    "car-cargo": "WAGON TOWAROWY",
+    "cabin": "Typ kabiny:",
+    "construction": "Typ konstrukcji:"
+  },
+  "topbar": {
+    "stock-list": "SKŁAD",
+    "wiki-list": "POJAZDY",
+    "number-generator": "GNR NUMERU",
+    "stock-generator": "GNR SKŁADU"
+  },
+  "stocklist": {
+    "title": "EDYTOR SKŁADU",
+    "alert-copied": "Skład został skopiowany do twojego schowka!",
+    "alert-empty": "Lista pojazdów jest pusta!",
+    "prompt-file": "Nazwij plik, a następnie pobierz do folderu Presets (Dokumenty/TTSK/TrainDriver2):",
+    "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Ń",
+    "action-upload": "WCZYTAJ",
+    "action-download": "POBIERZ",
+    "action-copy": "SKOPIUJ",
+    "action-reset": "ZRESETUJ",
+    "action-shuffle": "PRZETASUJ",
+    "mass": "Masa",
+    "mass-accepted": "dopuszczalna",
+    "length": "Długość",
+    "vmax": "vMax",
+    "coldstart-info": "Zimny start",
+    "doublemanning-info": "Podwójna obsada",
+    "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",
+    "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"
+  },
+  "numgen": {
+    "title": "GENERATOR NUMERU POCIĄGU",
+    "alert": "Numer został skopiowany do twojego schowka!",
+    "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 (opcjonalnie) obszary konstrukcyjne",
+    "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)"
+    },
+    "rules": {
+      "EI": "4 cyfry - końcówka z przedziału 00-99",
+      "MP/RP": "5 cyfr - końcówka z przedziału 050-169",
+      "RO": "5 cyfr - końcówka z przedziału 200-999",
+      "PW": "6 cyfr - '6' na 3. miejscu; końcówka z przedziału 000-899",
+      "TM": "6 cyfr - '4' na 3. miejscu; końcówka z przedziału 000-899",
+      "TK": "6 cyfr - '3' na 3. miejscu; końcówka z przedziału 000-899",
+      "LT": "6 cyfr - '5' na 3. miejscu; końcówka z przedziału 000-899"
+    }
+  },
+  "wiki": {
+    "title": "LISTA DOSTĘPNYCH POJAZDÓW",
+    "action-vehicles": "POJ. TRAKCYJNE",
+    "action-carriages": "WAGONY",
+    "search": "Wyszukaj pojazd...",
+    "header": {
+      "image": "Zdjęcie",
+      "type": "Nazwa",
+      "group": "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",
+    "car-passenger": "Wagon pasażerski",
+    "car-cargo": "Wagon towarowy"
+  },
+  "realstock": {
+    "title": "ZESTAWIENIA REALNE by",
+    "search-name": "Szukaj po nazwie",
+    "search-stock": "Szukaj po pojazdach",
+    "action-reset": "RESETUJ"
+  }
+}
@@ -1,14 +1,8 @@
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
-import { registerSW } from 'virtual:pwa-register';

 import App from './App.vue';
-
+import i18n from './i18n-setup';
 const pinia = createPinia();

-const updateSW = registerSW({
-  immediate: true,
-});
-
-createApp(App).use(pinia).mount('#app');
-
+createApp(App).use(pinia).use(i18n).mount('#app');
@@ -1,9 +1,17 @@
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";

 export default defineComponent({
  methods: {
-    getIconURL(name: string, ext = 'svg'): string {
+    getIconURL(name: string, ext = "svg"): string {
      return `/images/icon-${name}.${ext}`;
    },
+
+    getThumbnailURL(vehicleType: string, size: "small" | "large") {
+      return `${
+        import.meta.env.VITE_API_DEV === "1"
+          ? "http://localhost:5500"
+          : "https://spythere.github.io/api"
+      }/td2/images/${vehicleType}--${size == "small" ? 300 : 800}px.jpg`;
+    },
  },
 });
@@ -29,7 +29,9 @@ export default defineComponent({
        count,
        imgSrc: vehicle.imageSrc,
        useType: isLoco ? vehicle.power : vehicle.useType,
-        supportersOnly: vehicle.supportersOnly,
+        isSponsorsOnly: vehicle.isSponsorsOnly,
+        constructionType: vehicle.constructionType,
+        sponsorsOnlyTimestamp: vehicle.sponsorsOnlyTimestamp,
      };
    },

@@ -43,13 +45,6 @@ export default defineComponent({
    },

    addLocomotive(loco: ILocomotive) {
-      // const previousStock =
-      //   this.store.stockList.length > 0 ? this.store.stockList[this.store.stockList.length - 1] : null;
-      // if (previousStock && previousStock.type == loco.type) {
-      //   this.store.stockList[this.store.stockList.length - 1].count++;
-      //   return;
-      // }
-
      const stockObj = this.getStockObject(loco);

      if (this.store.stockList.length > 0 && !this.store.stockList[0].isLoco) this.store.stockList.unshift(stockObj);
@@ -57,15 +52,6 @@ export default defineComponent({
    },

    addCarWagon(car: ICarWagon, cargo?: ICargo) {
-      // const previousStock =
-      //   this.store.stockList.length > 0 ? this.store.stockList[this.store.stockList.length - 1] : null;
-
-      // if (previousStock && previousStock.type == car.type && previousStock.cargo?.id == cargo?.id) {
-      //   this.store.stockList[this.store.stockList.length - 1].count++;
-
-      //   return;
-      // }
-
      const stockObj = this.getStockObject(car, cargo);

      this.store.stockList.push(stockObj);
@@ -83,13 +69,21 @@ export default defineComponent({

      this.store.swapVehicles = false;

-      stockArray.forEach((type) => {
+      stockArray.forEach((type, i) => {
        let vehicle: Vehicle | null = null;
        let vehicleCargo: ICargo | null = null;

-        if (/^(EU|EP|ET|SM|EN|2EN|SN)/.test(type)) {
-          const [locoType, coldStart] = type.split(',');
+        const isLoco = /^(EU|EP|ET|SM|EN|2EN|SN)/.test(type);
+
+        if (isLoco) {
+          const [locoType, spawnProps] = type.split(',');
          vehicle = this.store.locoDataList.find((loco) => loco.type == locoType) || null;
+
+          // Spawn settings
+          if (i == 0 && spawnProps) {
+            this.store.isColdStart = spawnProps.includes('c');
+            this.store.isDoubleManned = spawnProps.includes('d');
+          }
        } else {
          const [carType, cargo] = type.split(':');
          vehicle = this.store.carDataList.find((car) => car.type == carType) || null;
@@ -97,11 +91,10 @@ export default defineComponent({
          if (cargo) vehicleCargo = vehicle?.cargoList.find((c) => c.id == cargo) || null;
        }

-        if (!vehicle) console.log('Brak pojazdu:', type);
+        if (!vehicle) console.log('Brak pojazdu / rodzaj pojazdu źle wczytany:', type);

        this.addVehicle(vehicle, vehicleCargo);
      });
    },
  },
 });
-
@@ -1,6 +1,7 @@
 import { defineComponent } from 'vue';
 import { useStore } from '../store';
-import { IStock, Vehicle } from '../types';
+import { ICarWagon, ILocomotive, IStock, Vehicle } from '../types';
+import { isLocomotive } from '../utils/vehicleUtils';

 export default defineComponent({
  setup() {
@@ -9,46 +10,10 @@ export default defineComponent({
    };
  },

-  computed: {
-    locoOptions() {
-      return this.store.locoDataList
-        .sort((a, b) => (a.type > b.type ? 1 : -1))
-        .filter((loco) => loco.power == this.store.chosenLocoPower);
-    },
-
-    carOptions() {
-      return this.store.carDataList
-        .sort((a, b) => (a.type > b.type ? 1 : -1))
-        .filter((car) => car.useType == this.store.chosenCarUseType);
-    },
-  },
+  computed: {},

  methods: {
-    selectLocoType(locoTypeId: string) {
-      this.store.chosenLocoPower = locoTypeId;
-      this.store.chosenVehicle = this.locoOptions[0];
-      this.store.chosenLoco = this.locoOptions[0];
-    },
-
-    selectCarWagonType(carWagonTypeId: string) {
-      this.store.chosenCarUseType = carWagonTypeId;
-      this.store.chosenVehicle = this.carOptions[0];
-      this.store.chosenCar = this.carOptions[0];
-      this.store.chosenCargo = null;
-    },
-
-    previewVehicleByType(type: 'loco' | 'car' | 'cargo') {
-      this.$nextTick(() => {
-        if (!this.store.chosenLoco && !this.store.chosenCar) return;
-
-        this.store.chosenVehicle = type == 'loco' ? this.store.chosenLoco : this.store.chosenCar;
-
-        this.store.chosenCargo =
-          this.store.chosenCar?.cargoList.find((cargo) => cargo.id == this.store.chosenCargo?.id) || null;
-      });
-    },
-
-    previewStock(stock: IStock) {      
+    previewStock(stock: IStock) {
      if (this.store.chosenVehicle?.imageSrc != stock.imgSrc) this.store.imageLoading = true;

      if (stock.isLoco) {
@@ -67,14 +32,30 @@ export default defineComponent({
      }
    },

+    previewLocomotive(loco: ILocomotive) {
+      this.store.chosenLoco = loco;
+      this.store.chosenVehicle = loco;
+      this.store.chosenLocoPower = loco.power;
+    },
+
+    previewCarWagon(carWagon: ICarWagon) {
+      this.store.chosenCar = carWagon;
+      this.store.chosenCarUseType = carWagon.useType;
+      this.store.chosenVehicle = carWagon;
+
+      this.store.chosenCargo = null;
+    },
+
+    previewVehicle(vehicle: Vehicle) {
+      if (isLocomotive(vehicle)) this.previewLocomotive(vehicle);
+      else this.previewCarWagon(vehicle);
+    },
+
    resetPreview() {
-        this.store.chosenVehicle = null;
-        this.store.chosenCar = null;
-        this.store.chosenCargo = null;
-        this.store.chosenLoco = null;
-    }
+      this.store.chosenVehicle = null;
+      this.store.chosenCar = null;
+      this.store.chosenCargo = null;
+      this.store.chosenLoco = null;
+    },
  },
 });
-
-
-
@@ -1,5 +1,5 @@
-import { defineComponent } from 'vue';
-import { useStore } from '../store';
+import { defineComponent } from "vue";
+import { useStore } from "../store";

 export default defineComponent({
  setup() {
@@ -18,7 +18,10 @@ export default defineComponent({
    },

    trainTooHeavy() {
-      return this.store.acceptableMass && this.store.totalMass > this.store.acceptableMass;
+      return (
+        this.store.acceptableMass &&
+        this.store.totalMass > this.store.acceptableMass
+      );
    },

    locoNotSuitable() {
@@ -26,15 +29,19 @@ export default defineComponent({
        !this.store.isTrainPassenger &&
        this.store.stockList.length > 1 &&
        !this.store.stockList.every((stock) => stock.isLoco) &&
-        this.store.stockList.find((stock) => stock.isLoco && stock.type.startsWith('EP'))
+        this.store.stockList.some(
+          (stock) => stock.isLoco && stock.type.startsWith("EP"),
+        )
      );
    },

    tooManyLocomotives() {
-      return this.store.stockList.reduce((acc, stock) => {
-        if (stock.isLoco) acc += stock.count;
-        return acc;
-      }, 0) > 2;
+      return (
+        this.store.stockList.reduce((acc, stock) => {
+          if (stock.isLoco) acc += stock.count;
+          return acc;
+        }, 0) > 2
+      );
    },
  },
 });
@@ -1,4 +1,4 @@
-import { IStore } from './types';
+import { IStockData, IStore } from './types';
 import { defineStore } from 'pinia';
 import {
  acceptableMass,
@@ -10,6 +10,7 @@ import {
  totalLength,
  totalMass,
 } from './utils/vehicleUtils';
+import http from './http';

 export const useStore = defineStore({
  id: 'store',
@@ -20,6 +21,9 @@ export const useStore = defineStore({
      chosenCargo: null,
      chosenVehicle: null,

+      isColdStart: false,
+      isDoubleManned: false,
+
      showSupporter: false,
      imageLoading: false,

@@ -29,7 +33,7 @@ export const useStore = defineStore({
      stockList: [],
      cargoOptions: [],

-      readyStockList: {},
+      readyStockList: [],

      swapVehicles: false,

@@ -44,17 +48,60 @@ export const useStore = defineStore({
      isRealStockListCardOpen: false,

      stockData: undefined,
-    } as IStore),
+
+      lastFocusedElement: null,
+    }) as IStore,

  getters: {
    locoDataList: (state) => locoDataList(state),
    carDataList: (state) => carDataList(state),
+    vehicleDataList: (state) => [...locoDataList(state), ...carDataList(state)],
    totalMass: (state) => totalMass(state),
    totalLength: (state) => totalLength(state),
    maxStockSpeed: (state) => maxStockSpeed(state),
    isTrainPassenger: (state) => isTrainPassenger(state),
    chosenRealStock: (state) => chosenRealStock(state),
    acceptableMass: (state) => acceptableMass(state),
+
+    stockSupportsColdStart: (state) => {
+      if (state.stockList.length == 0) return false;
+      if (!state.stockList[0].isLoco) return false;
+
+      const headingLoco = state.stockList[0];
+
+      return state.stockData?.props.find((stock) => stock.type == headingLoco.constructionType)?.coldStart ?? false;
+    },
+
+    stockSupportsDoubleManning: (state) => {
+      if (state.stockList.length == 0) return false;
+      if (!state.stockList[0].isLoco) return false;
+
+      const headingLoco = state.stockList[0];
+
+      return state.stockData?.props.find((stock) => stock.type == headingLoco.constructionType)?.doubleManned ?? false;
+    },
+  },
+
+  actions: {
+    async fetchStockInfoData() {
+      const stockData = (await http.get<IStockData>('td2/data/stockInfo.json')).data;
+      this.stockData = stockData;
+    },
+
+    handleRouting() {
+      switch (window.location.pathname) {
+        case '/numgnr':
+          this.stockSectionMode = 'number-generator';
+          break;
+        case '/stockgnr':
+          this.stockSectionMode = 'stock-generator';
+          break;
+        case '/vehicles':
+          this.stockSectionMode = 'wiki-list';
+          break;
+        default:
+          break;
+      }
+    },
  },
 });
-
@@ -1,253 +1,305 @@
-@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');
-
-$breakpointMd: 960px;
-$breakpointSm: 550px;
-
-$bgColor: #2b3552;
-$textColor: #fff;
-$secondaryColor: #222;
-$accentColor: #e4c428;
-
-::-webkit-scrollbar {
-  width: 7px;
-  height: 7px;
-
-  &-track {
-    background: #222;
-    border-radius: 0.5rem;
-  }
-
-  &-thumb {
-    border-radius: 1rem;
-    background: #777;
-  }
-
-  &-corner {
-    background: #222;
-  }
-}
-
-body,
-html {
-  margin: 0;
-  padding: 0;
-
-  font-family: 'Lato', sans-serif;
-
-  background-color: $bgColor;
-  overflow-x: hidden;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-a {
-  color: white;
-  text-decoration: none;
-
-  &:visited {
-    color: white;
-  }
-
-  &:hover,
-  &:focus {
-    color: $accentColor;
-  }
-}
-
-select,
-option,
-input,
-button {
-  font-family: 'Lato', sans-serif;
-  font-size: 1em;
-}
-
-button {
-  border: none;
-  outline: none;
-  background: none;
-
-  padding: 0;
-  margin: 0;
-
-  cursor: pointer;
-
-  font-size: 1em;
-  color: white;
-
-  &:hover {
-    color: $accentColor;
-  }
-}
-
-.btn {
-  padding: 0.4em 0.75em;
-
-  outline: none;
-  background-color: #222;
-  border-radius: 8px;
-  font-weight: bold;
-
-  transition: all 250ms;
-
-  &:hover {
-    color: $accentColor;
-  }
-
-  &.btn--outline {
-    background: none;
-    font-weight: bold;
-    outline: 1px solid $accentColor;
-  }
-
-  &:focus-visible {
-    color: $accentColor;
-    outline: 1px solid white;
-  }
-
-  &[data-disabled='true'] {
-    user-select: none;
-    pointer-events: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-
-    opacity: 0.75;
-    background-color: #2b2b2b;
-  }
-
-  &--text {
-    font-weight: bold;
-    transition: all 250ms;
-    background: none;
-    padding: 0;
-
-    &:focus-visible {
-      outline: 1px solid white;
-    }
-  }
-}
-
-select,
-input {
-  background: none;
-  border: 2px solid white;
-  outline: none;
-
-  padding: 0.25em 0.35em;
-
-  color: white;
-  font-size: 1em;
-
-  width: 18em;
-
-  &:focus-visible {
-    border-color: $accentColor;
-  }
-
-  &::placeholder {
-    color: #aaa;
-  }
-}
-
-option {
-  color: black;
-  border: none;
-}
-
-ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.text {
-  &--accent {
-    color: $accentColor;
-  }
-
-  &--grayed {
-    color: #aaa;
-  }
-}
-
-.g-card {
-  position: fixed;
-  top: 0;
-  left: 0;
-
-  width: 100vw;
-  height: 100vh;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  z-index: 200;
-
-  &_bg {
-    position: fixed;
-    top: 0;
-    left: 0;
-
-    width: 100vw;
-    height: 100vh;
-
-    background-color: #000000aa;
-    z-index: 10;
-  }
-}
-
-.g-choice {
-  input {
-    display: none;
-  }
-
-  span {
-    padding: 0.25em 1em;
-    border-radius: 0.25em;
-    border: 2px solid white;
-    margin: 0.25em;
-    cursor: pointer;
-
-    transition: all 100ms ease;
-  }
-
-  span:focus {
-    color: $accentColor;
-    outline: none;
-  }
-
-  label > input:checked + span {
-    color: $accentColor;
-    border-color: $accentColor;
-  }
-}
-
-// Vue Transition anims
-.slide-top {
-  &-enter-from,
-  &-leave-to {
-    transform: translateY(-100%);
-  }
-
-  &-enter-active,
-  &-leave-active {
-    transition: transform 100ms ease-in-out;
-  }
-}
-
-.card-appear {
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-  }
-
-  &-enter-active,
-  &-leave-active {
-    transition: all 100ms ease-in-out;
-  }
-}
+$breakpointMd: 960px;
+$breakpointSm: 550px;
+
+$bgColor: #2b3552;
+$textColor: #fff;
+$secondaryColor: #222;
+$accentColor: #e4c428;
+
+@font-face {
+  font-family: 'Lato';
+  src:
+    url('/fonts/Lato-Light.woff2') format('woff2'),
+    url('/fonts/Lato-Light.woff') format('woff');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src:
+    url('/fonts/Lato-Bold.woff2') format('woff2'),
+    url('/fonts/Lato-Bold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src:
+    url('/fonts/Lato-Regular.woff2') format('woff2'),
+    url('/fonts/Lato-Regular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+::-webkit-scrollbar {
+  width: 7px;
+  height: 7px;
+
+  &-track {
+    background: #222;
+    border-radius: 0.5rem;
+  }
+
+  &-thumb {
+    border-radius: 1rem;
+    background: #777;
+  }
+
+  &-corner {
+    background: #222;
+  }
+}
+
+body,
+html {
+  margin: 0;
+  padding: 0;
+
+  font-family: Lato, sans-serif;
+
+  background-color: $bgColor;
+  overflow-x: hidden;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+a {
+  color: white;
+  text-decoration: none;
+
+  transition: color 250ms;
+
+  &:visited {
+    color: white;
+  }
+
+  &:hover,
+  &:focus {
+    color: $accentColor;
+  }
+}
+
+select,
+option,
+input,
+button {
+  font-family: Lato, sans-serif;
+  font-size: 1em;
+}
+
+button {
+  border: none;
+  outline: none;
+  background: none;
+
+  padding: 0;
+  margin: 0;
+
+  cursor: pointer;
+
+  font-size: 1em;
+  color: white;
+
+  &:hover {
+    color: $accentColor;
+  }
+}
+
+.btn {
+  padding: 0.4em 0.75em;
+
+  outline: none;
+  background-color: #222;
+  border-radius: 8px;
+  font-weight: bold;
+
+  transition:
+    color 150ms,
+    background-color 150ms;
+
+  &:hover {
+    color: $accentColor;
+  }
+
+  &.btn--outline {
+    background: none;
+    font-weight: bold;
+    outline: 1px solid $accentColor;
+  }
+
+  &:focus-visible {
+    color: $accentColor;
+    outline: 1px solid white;
+  }
+
+  &[data-chosen='true'] {
+    background-color: $accentColor;
+    color: black;
+
+    box-shadow: 0 0 5px 1px $accentColor;
+  }
+
+  &[data-disabled='true'] {
+    user-select: none;
+    pointer-events: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+
+    opacity: 0.75;
+    background-color: #2b2b2b;
+  }
+
+  &--image {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5em;
+
+    img {
+      width: 1.3em;
+      vertical-align: middle;
+    }
+  }
+
+  &--text {
+    font-weight: bold;
+    transition: all 250ms;
+    background: none;
+    padding: 0;
+
+    &:focus-visible {
+      outline: 1px solid white;
+    }
+  }
+}
+
+select,
+input[type='text'],
+input[type='number'] {
+  background: $bgColor;
+  border: 2px solid #aaa;
+  outline: none;
+
+  padding: 0.25em 0.35em;
+
+  color: white;
+  font-size: 1em;
+
+  width: 18em;
+
+  &:focus-visible {
+    border-color: $accentColor;
+  }
+
+  &::placeholder {
+    color: #aaa;
+  }
+}
+
+option {
+  color: white;
+  border: none;
+  background-color: $bgColor;
+}
+
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.text {
+  &--accent {
+    color: $accentColor;
+  }
+
+  &--grayed {
+    color: #aaa;
+  }
+}
+
+.g-card {
+  position: fixed;
+  top: 1em;
+  left: 0;
+
+  width: 100vw;
+  height: 100vh;
+
+  display: flex;
+  justify-content: center;
+
+  z-index: 200;
+
+  &_bg {
+    position: fixed;
+    top: 0;
+    left: 0;
+
+    width: 100vw;
+    height: 100vh;
+
+    background-color: #000000aa;
+    z-index: 10;
+  }
+}
+
+.g-choice {
+  input {
+    display: none;
+  }
+
+  span {
+    padding: 0.25em 1em;
+    border-radius: 0.25em;
+    border: 2px solid white;
+    margin: 0.25em;
+    cursor: pointer;
+
+    transition: all 100ms ease;
+  }
+
+  span:focus {
+    color: $accentColor;
+    outline: none;
+  }
+
+  label > input:checked + span {
+    color: $accentColor;
+    border-color: $accentColor;
+  }
+}
+
+// Vue Transition anims
+.slide-top {
+  &-enter-from,
+  &-leave-to {
+    transform: translateY(-100%);
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: transform 100ms ease-in-out;
+  }
+}
+
+.card-appear {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: all 100ms ease-in-out;
+  }
+}
@@ -1,4 +1,4 @@
-@import './global.scss';
+@import "./global.scss";

 .tab {
  height: 100%;
@@ -77,4 +77,3 @@ hr {
    }
  }
 }
-
@@ -5,9 +5,11 @@ export interface IStore {
  chosenCar: ICarWagon | null;
  chosenLoco: ILocomotive | null;
  chosenCargo: ICargo | null;
-
  chosenVehicle: Vehicle | null;

+  isColdStart: boolean;
+  isDoubleManned: boolean;
+
  showSupporter: boolean;
  imageLoading: boolean;

@@ -15,7 +17,7 @@ export interface IStore {
  chosenCarUseType: string;

  stockList: IStock[];
-  readyStockList: IReadyStockList;
+  readyStockList: IReadyStockItem[];
  cargoOptions: any[][];

  chosenStockListIndex: number;
@@ -27,61 +29,71 @@ export interface IStore {
  isRandomizerCardOpen: boolean;
  isRealStockListCardOpen: boolean;

-  stockSectionMode: 'stock-list' | 'stock-generator' | 'number-generator';
+  stockSectionMode: 'stock-list' | 'stock-generator' | 'number-generator' | 'wiki-list';
  stockData?: IStockData;
+
+  lastFocusedElement: HTMLElement | null;
 }

-export type TStockInfoKey = 'loco-e' | 'loco-s' | 'loco-ezt' | 'loco-szt' | 'car-passenger' | 'car-cargo';
+export type TLocoGroup = 'loco-e' | 'loco-s' | 'loco-ezt' | 'loco-szt';
+export type TCarWagonGroup = 'car-passenger' | 'car-cargo';

 export interface IStockProps {
  type: string;
  length: number;
  mass: number;
-  cargo: string;
+  cargo?: string | null;
+  coldStart?: boolean;
+  doubleManned?: boolean;
 }

 export interface IStockData {
+  version: string;
+
  generator: {
-    passenger: [];
+    passenger: any;
    cargo: {
      [key: string]: string[];
    };
  };

  info: {
-    'car-cargo': [string, string, boolean, boolean, string][];
-    'car-passenger': [string, string, boolean, boolean, string][];
-    'loco-e': [string, string, string, string, boolean][];
-    'loco-s': [string, string, string, string, boolean][];
-    'loco-szt': [string, string, string, string, boolean][];
-    'loco-ezt': [string, string, string, string, boolean][];
+    'car-cargo': [string, string, boolean, number | null, string][];
+    'car-passenger': [string, string, boolean, number | null, string][];
+    'loco-e': [string, string, string, string, number | null][];
+    'loco-s': [string, string, string, string, number | null][];
+    'loco-szt': [string, string, string, string, number | null][];
+    'loco-ezt': [string, string, string, string, number | null][];
  };

  props: IStockProps[];
-
-  usage: { [key: string]: string };
 }

 export interface ILocomotive {
  type: string;
-  power: string;
+  power: TLocoGroup;
+  group: TLocoGroup;
  constructionType: string;
  cabinType: string;
  maxSpeed: number;
-  supportersOnly: boolean;
+  isSponsorsOnly: boolean;
+  sponsorsOnlyTimestamp: number;
  imageSrc: string;

  mass: number;
  length: number;
+  coldStart: boolean;
+  doubleManned: boolean;
 }

 export interface ICarWagon {
-  //"203V_PKPC_Fll_01","203V",true,false,"100",img
  type: string;
-  useType: 'car-passenger' | 'car-cargo';
+  useType: TCarWagonGroup;
+  group: TCarWagonGroup;
  constructionType: string;
  loadable: boolean;
-  supportersOnly: boolean;
+  isSponsorsOnly: boolean;
+  sponsorsOnlyTimestamp: number;
  maxSpeed: number;
  imageSrc: string;

@@ -97,23 +109,24 @@ export interface ICargo {

 export interface IStock {
  id: string;
-  useType: string;
  type: string;
+  useType: string;
+  constructionType: string;
  length: number;
  mass: number;
  maxSpeed: number;
  cargo?: { id: string; totalMass: number };
  isLoco: boolean;
-  supportersOnly: boolean;
+  isSponsorsOnly: boolean;
+  sponsorsOnlyTimestamp: number;
  count: number;
  imgSrc?: string;
 }

-export interface IReadyStockList {
-  [key: string]: { stockString: string; type: string; number: string; name: string };
+export interface IReadyStockItem {
+  stockId: string;
+  stockString: string;
+  type: string;
+  number: string;
+  name: string;
 }
-
-
-
-
-
@@ -1,14 +0,0 @@
-import speedLimitTable from '../constants/speedLimits.json';
-export type LocoType = keyof typeof speedLimitTable;
-
-export const calculateSpeedLimit = (locoType: LocoType, stockMass: number, isTrainPassenger: boolean) => {
-  const speedTable = speedLimitTable[locoType][isTrainPassenger ? 'passenger' : 'cargo'];
-
-  if (!speedTable) return undefined;
-
-  let speedLimit = 0;
-  for (let mass in speedTable) if (stockMass > Number(mass)) speedLimit = (speedTable as any)[mass];
-
-  return speedLimit;
-};
-
@@ -0,0 +1,22 @@
+import speedLimits from '../constants/speedLimits.json';
+import massLimits from '../constants/massLimits.json';
+
+export type SpeedLimitLocoType = keyof typeof speedLimits;
+export type MassLimitLocoType = keyof typeof massLimits;
+
+export function calculateSpeedLimit(locoType: SpeedLimitLocoType, stockMass: number, isTrainPassenger: boolean) {
+  const speedTable = speedLimits[locoType][isTrainPassenger ? 'passenger' : 'cargo'];
+
+  if (!speedTable) return undefined;
+
+  let speedLimit = 0;
+  for (const mass in speedTable) if (stockMass > Number(mass)) speedLimit = (speedTable as any)[mass];
+
+  return speedLimit;
+}
+
+export function calculateMassLimit(locoType: MassLimitLocoType, isTrainPassenger: boolean) {
+  if(massLimits[locoType] === undefined) return 0;
+  
+  return massLimits[locoType][isTrainPassenger ? 0 : 1] || 0;
+}
@@ -1,6 +1,6 @@
 import { EVehicleUseType } from '../enums/EVehicleUseType';
-import { ICarWagon, ILocomotive, IStore, TStockInfoKey } from '../types';
-import { LocoType, calculateSpeedLimit } from './speedLimitUtils';
+import { ICarWagon, ILocomotive, IStore, TCarWagonGroup, TLocoGroup } from '../types';
+import { MassLimitLocoType, SpeedLimitLocoType, calculateMassLimit, calculateSpeedLimit } from './vehicleLimitsUtils';

 export function isLocomotive(vehicle: ILocomotive | ICarWagon): vehicle is ILocomotive {
  return (vehicle as ILocomotive).power !== undefined;
@@ -14,25 +14,30 @@ export function locoDataList(state: IStore) {
  return Object.keys(stockData.info).reduce((acc, vehiclePower) => {
    if (!vehiclePower.startsWith('loco')) return acc;

-    const locoVehiclesData = stockData.info[vehiclePower as 'loco-e' | 'loco-s' | 'loco-ezt' | 'loco-szt'];
+    const locoVehiclesData = stockData.info[vehiclePower as TLocoGroup];

    locoVehiclesData.forEach((loco) => {
      if (state.showSupporter && !loco[4]) return;

-      const [type, constructionType, cabinType, maxSpeed, supportersOnly] = loco;
+      const [type, constructionType, cabinType, maxSpeed, sponsorsTimestamp] = loco;
      const locoProps = stockData.props.find((prop) => constructionType == prop.type);

      acc.push({
-        power: vehiclePower,
+        power: vehiclePower as TLocoGroup,
+        group: vehiclePower as TLocoGroup,
        type,
        constructionType,
        cabinType,
        maxSpeed: Number(maxSpeed),
-        supportersOnly,
+        isSponsorsOnly: Number(sponsorsTimestamp) > Date.now(),
+        sponsorsOnlyTimestamp: Number(sponsorsTimestamp),
        imageSrc: '',

-        length: locoProps?.length && type.startsWith('2EN') ? locoProps.length * 2 : locoProps?.length || 0,
-        mass: locoProps?.mass && type.startsWith('2EN') ? 253 : locoProps?.mass || 0,
+        length: locoProps?.length && type.startsWith('2EN') ? locoProps.length * 2 : locoProps?.length ?? 0,
+        mass: locoProps?.mass && type.startsWith('2EN') ? 253 : locoProps?.mass ?? 0,
+
+        coldStart: locoProps?.coldStart ?? false,
+        doubleManned: locoProps?.doubleManned ?? false,
      });
    });

@@ -48,28 +53,30 @@ export function carDataList(state: IStore) {
  return Object.keys(stockData.info).reduce((acc, vehicleUseType) => {
    if (!vehicleUseType.startsWith('car')) return acc;

-    const carVehiclesData = stockData.info[vehicleUseType as 'car-passenger' | 'car-cargo'];
+    const carVehiclesData = stockData.info[vehicleUseType as TCarWagonGroup];

    carVehiclesData.forEach((car) => {
-      if (state.showSupporter && !car[3]) return;
+      const [type, constructionType, loadable, sponsorsOnlyTimestamp, maxSpeed] = car;

-      const carPropsData = stockData.props.find((v) => car[0].toString().startsWith(v.type));
+      if (state.showSupporter && Number(sponsorsOnlyTimestamp) <= Date.now()) return;
+
+      const carPropsData = stockData.props.find((v) => type.toString().startsWith(v.type));

      acc.push({
-        useType: vehicleUseType as 'car-passenger' | 'car-cargo',
-        type: car[0],
-        constructionType: car[1],
-        loadable: car[2],
-        supportersOnly: car[3],
-        maxSpeed: Number(car[4]),
+        useType: vehicleUseType as TCarWagonGroup,
+        group: vehicleUseType as TCarWagonGroup,
+        type,
+        constructionType,
+        loadable,
+        isSponsorsOnly: Number(sponsorsOnlyTimestamp) > Date.now(),
+        sponsorsOnlyTimestamp: Number(sponsorsOnlyTimestamp),
+        maxSpeed: Number(maxSpeed),
        imageSrc: '',
        cargoList:
-          !carPropsData || carPropsData.cargo === null
-            ? []
-            : carPropsData.cargo.split(';').map((cargo) => ({
-                id: cargo.split(':')[0],
-                totalMass: Number(cargo.split(':')[1]),
-              })),
+          carPropsData?.cargo?.split(';').map((cargo) => ({
+            id: cargo.split(':')[0],
+            totalMass: Number(cargo.split(':')[1]),
+          })) || [],

        mass: carPropsData?.mass || 0,
        length: carPropsData?.length || 0,
@@ -81,10 +88,7 @@ export function carDataList(state: IStore) {
 }

 export function totalMass(state: IStore) {
-  return ~~state.stockList.reduce(
-    (acc, stock) => acc + (stock.cargo ? stock.cargo.totalMass : stock.mass) * stock.count,
-    0
-  );
+  return ~~state.stockList.reduce((acc, stock) => acc + (stock.cargo ? stock.cargo.totalMass : stock.mass) * stock.count, 0);
 }

 export function totalLength(state: IStore) {
@@ -92,10 +96,7 @@ export function totalLength(state: IStore) {
 }

 export function maxStockSpeed(state: IStore) {
-  const stockSpeedLimit = state.stockList.reduce(
-    (acc, stock) => (stock.maxSpeed < acc || acc == 0 ? stock.maxSpeed : acc),
-    0
-  );
+  const stockSpeedLimit = state.stockList.reduce((acc, stock) => (stock.maxSpeed < acc || acc == 0 ? stock.maxSpeed : acc), 0);
  const headingLoco = state.stockList[0]?.isLoco ? state.stockList[0] : undefined;

  if (!headingLoco) return stockSpeedLimit;
@@ -106,42 +107,26 @@ export function maxStockSpeed(state: IStore) {

  const stockMass = totalMass(state);

-  const speedLimitByMass = calculateSpeedLimit(locoType as LocoType, stockMass, isTrainPassenger(state));
+  const speedLimitByMass = calculateSpeedLimit(locoType as SpeedLimitLocoType, stockMass, isTrainPassenger(state));

  return speedLimitByMass ? Math.min(stockSpeedLimit, speedLimitByMass) : stockSpeedLimit;
 }

 export function acceptableMass(state: IStore) {
  if (state.stockList.length == 0 || !state.stockList[0].isLoco) return 0;
-  const activeLocomotiveType = state.stockList[0].type;

-  if (/^SM/.test(activeLocomotiveType)) return 2400;
+  const activeLocomotiveType = state.stockList[0].type.split('-')[0];

-  // Elektryczne EU07 / EP07 / EP08 / ET41
+  const locoMassLimit = calculateMassLimit(activeLocomotiveType as MassLimitLocoType, isTrainPassenger(state));

-  // Pasażerski elektr.
-  if (isTrainPassenger(state)) {
-    if (/^(EU|EP)/.test(activeLocomotiveType)) return 650;
-    if (/^ET/.test(activeLocomotiveType)) return 700;
-
-    return 0;
-  }
-
-  // Towarowy / inny elektr.
-  if (/^EU/.test(activeLocomotiveType)) return 2000;
-  if (/^ET/.test(activeLocomotiveType)) return 4000;
-  if (/^EP/.test(activeLocomotiveType)) return 650;
-
-  return 0;
+  return locoMassLimit;
 }

 export function isTrainPassenger(state: IStore) {
  if (state.stockList.length == 0) return false;
  if (state.stockList.every((stock) => stock.isLoco)) return false;

-  return state.stockList
-    .filter((stock) => !stock.isLoco)
-    .every((stock) => stock.useType === EVehicleUseType.CAR_PASSENGER);
+  return state.stockList.filter((stock) => !stock.isLoco).every((stock) => stock.useType === EVehicleUseType.CAR_PASSENGER);
 }

 export function chosenRealStock(state: IStore) {
@@ -152,14 +137,9 @@ export function chosenRealStock(state: IStore) {
    }, [] as string[])
    .join(';');

-  const realStockObj = Object.values(state.readyStockList).find(
-    (readyStock) => readyStock.stockString == currentStockString
-  );
+  const realStockObj = state.readyStockList.find((readyStock) => readyStock.stockString == currentStockString);

-  state.chosenRealStockName = realStockObj
-    ? `${realStockObj.type} ${realStockObj.number} ${realStockObj.name}`
-    : undefined;
+  state.chosenRealStockName = realStockObj?.stockId ?? undefined;

  return realStockObj;
 }
-
@@ -0,0 +1,35 @@
+<template>
+  <div class="app-container">
+    <MainContainer />
+    <FooterVue />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { useStore } from "../store";
+
+import MainContainer from "../components/app/MainContainer.vue";
+import FooterVue from "../components/app/Footer.vue";
+
+export default defineComponent({
+  components: {
+    MainContainer,
+    FooterVue,
+  },
+
+  data: () => ({
+    store: useStore(),
+  }),
+});
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  min-height: 100vh;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+</style>
@@ -1,7 +1,7 @@
 /// <reference types="vite/client" />

-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
 }
@@ -5,33 +5,53 @@ import { VitePWA } from 'vite-plugin-pwa';

 // https://vitejs.dev/config/
 export default defineConfig({
+  server: {
+    port: 2137,
+  },
  plugins: [
    vue(),
    VitePWA({
      registerType: 'autoUpdate',
-      workbox: {
-        globPatterns: ['**/*.{js,css,html,png,svg,img}'],
-        // runtimeCaching: [
-        //   {
-        //     urlPattern: new RegExp(`^https://spythere.github.io/api\/.*`),
-        //     handler: 'NetworkFirst',
-        //     options: {
-        //       cacheName: 'github-api-cache',
-        //       expiration: {
-        //         maxEntries: 2,
-        //         maxAgeSeconds: 60 * 60 * 24 * 7, // <== 7 days
-        //       },
-        //       cacheableResponse: {
-        //         statuses: [0, 200],
-        //       },
-        //     },
-        //   },
-        // ],
-      },
+
      devOptions: {
+        suppressWarnings: true,
        enabled: true,
      },
+
+      workbox: {
+        globPatterns: ['**/*.{js,css,html,jpg,png,svg,img,woff,woff2}'],
+
+        runtimeCaching: [
+          {
+            urlPattern: /^https:\/\/rj.td2.info.pl\/dist\/img\/thumbnails\/.*/i,
+            handler: 'NetworkFirst',
+            options: {
+              cacheName: 'swdr-images-cache',
+              expiration: {
+                maxEntries: 50,
+                maxAgeSeconds: 60 * 60 * 24, // <== 1 day
+              },
+              cacheableResponse: {
+                statuses: [0, 200, 404],
+              },
+            },
+          },
+          {
+            urlPattern: /^https:\/\/spythere.github.io\/api\/td2\/.*/i,
+            handler: 'NetworkFirst',
+            options: {
+              cacheName: 'spythere-api-cache',
+              expiration: {
+                maxEntries: 150,
+                maxAgeSeconds: 60 * 60 * 24, // <== 1 day
+              },
+              cacheableResponse: {
+                statuses: [0, 200],
+              },
+            },
+          },
+        ],
+      },
    }),
  ],
 });
-
Author	SHA1	Message	Date
Spythere	86cb4cff4d	Merge pull request #17 - Wersja 1.7.2 Wersja 1.7.2	2023-11-07 17:43:34 +01:00
Spythere	0534848677	bump: 1.7.2	2023-11-06 21:20:22 +01:00
Spythere	c5d116e2db	added alphabetical cargo sort	2023-11-06 21:20:07 +01:00
Spythere	3dce5ec7c0	responsive font size	2023-11-06 21:08:01 +01:00
Spythere	956ff8afd7	stock thumbnail labels fix	2023-11-06 20:20:00 +01:00
Spythere	5b629833df	Merge pull request #16 - Wersja 1.7.1 Wersja 1.7.1	2023-10-31 23:05:43 +01:00
Spythere	b53201a7ff	hotfix	2023-10-31 23:02:58 +01:00
Spythere	f0ddd0e27f	custom checkboxes	2023-10-31 03:17:24 +01:00
Spythere	94bfba2c49	resolve fonts edit	2023-10-31 03:17:11 +01:00
Spythere	1e4541ef0d	spawn props checking on stock upload	2023-10-28 15:40:22 +02:00
Spythere	c25a55a7d9	added double manning checkbox & support	2023-10-28 15:33:09 +02:00
Spythere	bea3c59405	thumbnail placeholder fix	2023-10-28 14:12:21 +02:00
Spythere	8cd43adff3	acceptable masses & speeds update	2023-10-28 13:44:55 +02:00
Spythere	5ab1963117	lock files sync	2023-10-27 16:46:57 +02:00
Spythere	50d784a0de	1.7.1 bump	2023-10-27 16:43:39 +02:00
Spythere	f61135ce6b	packages bump; config	2023-10-27 16:39:54 +02:00
Spythere	5e43ece1aa	pwa optimize & fixes	2023-10-27 16:36:25 +02:00
Spythere	37e4149a34	Merge pull request #15 from Spythere/development Wersja 1.7.0	2023-10-26 21:43:46 +02:00
Spythere	e515203557	stockObject & static handling hotfixes	2023-10-26 21:37:33 +02:00
Spythere	0d79c71eba	1.7.0 bump	2023-10-26 21:36:00 +02:00
Spythere	2bbf9a8ac3	section improvements; hotfixes	2023-10-26 21:35:42 +02:00
Spythere	45b2bd01a2	enhanced wiki list	2023-10-26 00:55:13 +02:00
Spythere	665ffb9dce	lock: hotfix; bump 1.6.1	2023-10-24 23:31:45 +02:00
Spythere	1c2a93fbd5	format; linting; aktualizacja do 2023.2.1	2023-10-24 23:28:42 +02:00
Spythere	57ab6cc02d	gitignore	2023-08-25 20:29:17 +02:00
Spythere	aa62240d27	Merge do wersji 1.6.0	2023-08-24 01:29:45 +02:00
Spythere	a699c9851f	tłumaczenia; fix losowania generatora numeru	2023-08-24 00:01:19 +02:00
Spythere	d7c1f8c5b4	fix: tłumaczenia alertów	2023-08-23 23:04:04 +02:00
Spythere	c1c01c496a	poprawki w widoku składu; tłumaczenia	2023-08-23 22:54:17 +02:00
Spythere	a7f92d3ec5	feature: zapamiętywanie języka	2023-08-22 18:34:15 +02:00
Spythere	ae7be6d6f8	tłumaczenie PL/EN (cz.3)	2023-08-22 18:30:04 +02:00
Spythere	bf204d5e36	hotfix: pliki lock	2023-08-22 00:55:17 +02:00
Spythere	459876f5b4	bump: 1.6.0	2023-08-22 00:53:02 +02:00
Spythere	4a1a840c16	cleanup i18n; wykrywanie języka	2023-08-22 00:52:51 +02:00
Spythere	c0552e890c	hotfix: synchronizacja plików lock	2023-08-22 00:36:31 +02:00
Spythere	80d6f2b85f	tłumaczenie PL/EN (wip, cz.2)	2023-08-22 00:33:51 +02:00
Spythere	17882e3e6e	feature: tłumaczenie PL/EN (wip)	2023-08-21 03:19:37 +02:00
Spythere	4a03535b07	feature: ikony akcji	2023-08-19 13:13:00 +02:00
Spythere	0a76842e82	Merge do wersji 1.5.0	2023-07-21 01:05:31 +02:00
Spythere	0bc2ac1d15	poprawki wikilist	2023-07-19 13:44:28 +02:00
Spythere	428dd822a2	footer hotfix footer margin hotfix hotfixy footera	2023-07-19 13:39:34 +02:00
Spythere	d932ebfa50	poprawki responsywności	2023-07-14 01:52:36 +02:00
Spythere	cbe983f96c	support zimnego startu lokomotyw	2023-07-13 17:51:09 +02:00
Spythere	7362d4ffbd	ts hotfix	2023-07-13 14:37:46 +02:00
Spythere	17266248e3	keydown hotfix	2023-07-12 01:40:39 +02:00
Spythere	6cfea4c9b8	responsywność; domyślny tab	2023-07-12 01:22:45 +02:00
Spythere	cb561395ff	hotfixy komponentów	2023-07-12 01:20:22 +02:00
Spythere	dda67ad993	funkcjonalności listy pojazdów	2023-07-10 17:47:44 +02:00
Spythere	073288c8a9	enkapsulacja i uporządkowanie komponentów	2023-07-10 13:47:09 +02:00
Spythere	e532c9f2da	bump: 1.5.0	2023-07-06 22:15:35 +02:00
Spythere	1e92c64ae6	feature: tabela z pojazdami i wagonami	2023-07-06 22:14:40 +02:00
Spythere	407363221b	Merge do wersji 1.4.3	2023-07-05 00:07:55 +02:00
Spythere	4884b3af2c	hotfix import stockInfoDev	2023-07-05 00:05:04 +02:00
Spythere	31745cf4dd	hotfix speedLimits bug cd	2023-07-05 00:03:41 +02:00
Spythere	956f77cab5	hotfix speedLimits bug	2023-07-05 00:03:12 +02:00
Spythere	7c3eb12a31	pobieranie wersji z api	2023-07-04 23:58:25 +02:00
Spythere	5ba9e95547	środowisko dev	2023-07-04 23:44:06 +02:00
Spythere	79d5413638	bump: 1.4.3	2023-07-04 23:01:36 +02:00
Spythere	105aeddde1	env & dev suffix	2023-07-04 23:01:05 +02:00
Spythere	5c840a7525	Merge do wersji 1.4.2 Wersja 1.4.2	2023-06-11 17:17:21 +02:00
Spythere	1fa3d4c3a1	fix: efektywniejsze generowanie składu	2023-06-11 17:12:42 +02:00
Spythere	89ceb6ae7f	bump: 1.4.2	2023-06-11 16:38:49 +02:00
Spythere	445b799ff5	fix: generowanie składów	2023-06-11 16:38:38 +02:00
Spythere	8678e9393c	Merge do wersji 1.4.1 Wersja 1.4.1	2023-05-25 19:34:36 +02:00
Spythere	b9a8bacc78	bump: wersja 1.4.1	2023-05-25 19:30:12 +02:00
Spythere	885cb49f2f	feature: kopiowanie nr pociągu po kliknięciu	2023-05-25 19:29:51 +02:00
Spythere	6eb73ba743	feature: routing pomiędzy tabami	2023-05-25 19:27:01 +02:00
Spythere	fa610f6ee1	feature: losowanie obszarów konstr.	2023-05-25 19:06:42 +02:00
Spythere	eff1256265	fix: kategorie generatora nr	2023-05-25 15:31:25 +02:00
Spythere	97e7dc26cc	Wersja 1.4.0 Wersja 1.4.0	2023-04-11 01:20:17 +02:00
Spythere	17c0af5696	bump: wersja 1.4.0	2023-04-11 01:18:07 +02:00
Spythere	e4d8ec5e9f	realne zestawienia: filtry i responsywność	2023-04-10 17:03:19 +02:00
Spythere	4d48e88641	hotfix	2023-04-07 01:54:36 +02:00
Spythere	27f9403c2d	realne zestawienia: zapamiętywanie pozycji scrolla; ostatni wybrany pociąg	2023-04-07 01:34:38 +02:00
Spythere	678c40dd9b	modal realnych zestawień: przerobiono wygląd; poprawiono performance	2023-04-06 23:14:55 +02:00
Spythere	cc06d5cb0a	update: package.json	2023-03-23 22:36:22 +01:00
Spythere	419b01b53f	feature update: realne zestawienia	2023-03-23 22:23:15 +01:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" fill="white" width="48"><path d="M314.696-195.478q-32.507 0-55.862-23.356-23.356-23.355-23.356-55.862v-549.826q0-32.74 23.356-56.262 23.355-23.522 55.862-23.522h429.826q32.74 0 56.262 23.522t23.522 56.262v549.826q0 32.507-23.522 55.862-23.522 23.356-56.262 23.356H314.696Zm0-79.218h429.826v-549.826H314.696v549.826ZM175.478-55.694q-32.74 0-56.262-23.522t-23.522-56.262v-629.044h79.784v629.044h509.044v79.784H175.478Zm139.218-219.002v-549.826 549.826Z"/></svg>
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" fill="white" width="48"><path d="M480-318.087 266.651-531.436l57.131-56.001 116.609 116.609v-343.868h79.218v343.868l116.609-116.609 57.131 56.001L480-318.087ZM225.087-145.869q-32.507 0-55.862-23.356-23.356-23.355-23.356-55.862v-143h79.218v143h509.826v-143h79.783v143q0 32.478-23.521 55.848-23.522 23.37-56.262 23.37H225.087Z"/></svg>`