Merge pull request #27 from Spythere/development

1.8.6
bump(version): 1.8.6
2026-05-03 05:18:10 +00:00 · 2024-05-13 16:12:46 +02:00 · 2024-05-13 15:58:39 +02:00 · 2024-05-13 15:57:49 +02:00 · 2024-05-13 15:52:06 +02:00 · 2024-05-13 15:51:48 +02:00
49 changed files with 1477 additions and 1358 deletions
@@ -1,18 +1,13 @@
 /* eslint-env node */
-require('@rushstack/eslint-patch/modern-module-resolution')
+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'
-  ],
+  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/eslint-config-typescript', '@vue/eslint-config-prettier/skip-formatting'],
  rules: {
-    'vue/multi-word-component-names': 'off'
+    'vue/multi-word-component-names': 'off',
  },
  parserOptions: {
-    ecmaVersion: 'latest'
-  }
-}
+    ecmaVersion: 'latest',
+  },
+};
@@ -0,0 +1,17 @@
+on:
+  release:
+    types: [published]
+
+jobs:
+  github-releases-to-discord:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Github Releases To Discord
+        uses: SethCohen/github-releases-to-discord@v1.13.1
+        with:
+          webhook_url: ${{ secrets.WEBHOOK_URL }}
+          color: "15844367"
+          footer_title: "Changelog - Pojazdownik"
+          footer_timestamp: true
@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "printWidth": 100
+}
@@ -1,7 +1,7 @@
 {
  "hosting": {
    "public": "dist",
-    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+    "ignore": [],
    "rewrites": [
      {
        "source": "**",
@@ -9,4 +9,4 @@
      }
    ]
  }
-}
+}
@@ -1,18 +1,18 @@
 {
  "name": "pojazdownik",
-  "version": "1.7.4",
+  "version": "1.8.4",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "pojazdownik",
-      "version": "1.7.4",
+      "version": "1.8.4",
      "dependencies": {
        "axios": "^1.4.0",
        "pinia": "^2.0.17",
        "prettier": "^3.0.3",
        "vue": "^3.2.37",
-        "vue-i18n": "9"
+        "vue-i18n": "9.11.0"
      },
      "devDependencies": {
        "@rushstack/eslint-patch": "^1.3.3",
@@ -2028,13 +2028,12 @@
      "license": "BSD-3-Clause"
    },
    "node_modules/@intlify/core-base": {
-      "version": "9.9.1",
-      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.9.1.tgz",
-      "integrity": "sha512-qsV15dg7jNX2faBRyKMgZS8UcFJViWEUPLdzZ9UR0kQZpFVeIpc0AG7ZOfeP7pX2T9SQ5jSiorq/tii9nkkafA==",
-      "license": "MIT",
+      "version": "9.11.0",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.11.0.tgz",
+      "integrity": "sha512-cveOqAstjLZIiyatcP/HrzrQ87cZI8ScPQna3yvoM8zjcjcIRK1MRvmxUNlPdg0rTNJMZw7rixPVM58O5aHVPA==",
      "dependencies": {
-        "@intlify/message-compiler": "9.9.1",
-        "@intlify/shared": "9.9.1"
+        "@intlify/message-compiler": "9.11.0",
+        "@intlify/shared": "9.11.0"
      },
      "engines": {
        "node": ">= 16"
@@ -2044,12 +2043,11 @@
      }
    },
    "node_modules/@intlify/message-compiler": {
-      "version": "9.9.1",
-      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.9.1.tgz",
-      "integrity": "sha512-zTvP6X6HeumHOXuAE1CMMsV6tTX+opKMOxO1OHTCg5N5Sm/F7d8o2jdT6W6L5oHUsJ/vvkGefHIs7Q3hfowmsA==",
-      "license": "MIT",
+      "version": "9.11.0",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.11.0.tgz",
+      "integrity": "sha512-x31Gl7cscnoI4UUY1yaIy8e7vVMVW1VVlTXZz4SIHKqoSEUkfmgqK8NAx1e7RcoHEbICR7uyCbud0ZL1s4OGXQ==",
      "dependencies": {
-        "@intlify/shared": "9.9.1",
+        "@intlify/shared": "9.11.0",
        "source-map-js": "^1.0.2"
      },
      "engines": {
@@ -2060,10 +2058,9 @@
      }
    },
    "node_modules/@intlify/shared": {
-      "version": "9.9.1",
-      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.9.1.tgz",
-      "integrity": "sha512-b3Pta1nwkz5rGq434v0psHwEwHGy1pYCttfcM22IE//K9owbpkEvFptx9VcuRAxjQdrO2If249cmDDjBu5wMDA==",
-      "license": "MIT",
+      "version": "9.11.0",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.11.0.tgz",
+      "integrity": "sha512-KHSNgi7sRjmSm7aD8QH8WFt9VfKaekJuJ473opbJlkGY3EDnDUU8ikIhG8PbasQbgNvbY3m3tWNGqk2omIdwMA==",
      "engines": {
        "node": ">= 16"
      },
@@ -7624,13 +7621,12 @@
      }
    },
    "node_modules/vue-i18n": {
-      "version": "9.9.1",
-      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.9.1.tgz",
-      "integrity": "sha512-xyQ4VspLdNSPTKBFBPWa1tvtj+9HuockZwgFeD2OhxxXuC2CWeNvV4seu2o9+vbQOyQbhAM5Ez56oxUrrnTWdw==",
-      "license": "MIT",
+      "version": "9.11.0",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.11.0.tgz",
+      "integrity": "sha512-vU4gY6lu8Pdfs9BgKGiDAJmFDf88cceR47KcSB0VW4xJzUrXR/7qwqM7A8dQ2nedhoIDxoOm5Ro4pFd2KvJqbA==",
      "dependencies": {
-        "@intlify/core-base": "9.9.1",
-        "@intlify/shared": "9.9.1",
+        "@intlify/core-base": "9.11.0",
+        "@intlify/shared": "9.11.0",
        "@vue/devtools-api": "^6.5.0"
      },
      "engines": {
@@ -1,6 +1,6 @@
 {
  "name": "pojazdownik",
-  "version": "1.8.1",
+  "version": "1.8.6",
  "private": true,
  "type": "module",
  "scripts": {
@@ -16,7 +16,7 @@
    "pinia": "^2.0.17",
    "prettier": "^3.0.3",
    "vue": "^3.2.37",
-    "vue-i18n": "9"
+    "vue-i18n": "9.11.0"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.3.3",
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
@@ -5,28 +5,29 @@
 </template>

 <script lang="ts">
-import { defineComponent } from "vue";
-import { useStore } from "./store";
-import ImageFullscreenPreview from "./components/utils/ImageFullscreenPreview.vue";
-import AppContainerView from "./views/AppContainerView.vue";
-import AppModals from "./components/app/AppModals.vue";
+import { defineComponent } from 'vue';
+import { useStore } from './store';
+import ImageFullscreenPreview from './components/utils/ImageFullscreenPreview.vue';
+import AppContainerView from './views/AppContainerView.vue';
+import AppModals from './components/app/AppModals.vue';

 export default defineComponent({
+  components: { ImageFullscreenPreview, AppContainerView, AppModals },
  data() {
    return {
      store: useStore(),
    };
  },
+
  async created() {
-    this.store.fetchStockInfoData();
    this.store.handleRouting();
+    this.store.setupAPIData();
  },
-  components: { ImageFullscreenPreview, AppContainerView, AppModals },
 });
 </script>

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

 /* APP */
 #app {
@@ -7,9 +7,9 @@
 </template>

 <script lang="ts">
-import { defineComponent } from "vue";
-import { useStore } from "../../store";
-import RealStockCard from "../cards/RealStockCard.vue";
+import { defineComponent } from 'vue';
+import { useStore } from '../../store';
+import RealStockCard from '../cards/RealStockCard.vue';

 export default defineComponent({
  components: { RealStockCard },
@@ -3,35 +3,32 @@
    <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") }}
+          {{ $t('footer.tos') }}
        </a>
      </template>
    </i18n-t>

-    <div class="text--grayed" v-if="store.stockData">
-      {{ $t("footer.version-check", { version: store.stockData.version }) }}
+    <div class="text--grayed" v-if="store.vehiclesData">
+      {{ $t('footer.version-check', { version: store.vehiclesData.simulatorVersion }) }}
    </div>

    <div>
      &copy;
-      <a href="https://td2.info.pl/profile/?u=20777" target="_blank"
-        >Spythere</a
-      >
-      {{ new Date().getUTCFullYear() }} | v{{ VERSION
-      }}{{ !isOnProductionHost ? "dev" : "" }}
+      <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";
+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",
+      isOnProductionHost: location.hostname == 'pojazdownik-td2.web.app',
      VERSION: packageInfo.version,
      store: useStore(),
    };
@@ -8,11 +8,11 @@
 </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";
+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 },
@@ -20,7 +20,7 @@ export default defineComponent({
 </script>

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

 main {
  display: grid;
@@ -35,6 +35,8 @@ main {
  background-color: darken($color: $bgColor, $amount: 5);
  border-radius: 1em;

+  min-height: 950px;
+
  padding: 1em;
 }

@@ -42,8 +44,7 @@ main {
  main {
    display: flex;
    flex-direction: column;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
+    gap: 1em;
  }
 }
 </style>
@@ -1,24 +1,16 @@
 <template>
-  <div
-    class="real-stock-card g-card"
-    @keydown.esc="store.isRealStockListCardOpen = false"
-  >
+  <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="card_nav">
        <div class="top-pane">
          <h1>
-            {{ $t("realstock.title") }}
-            <a href="https://td2.info.pl/profile/?u=17708" target="_blank"
-              >Railtrains997</a
-            >
+            {{ $t('realstock.title') }}
+            <a href="https://td2.info.pl/profile/?u=17708" target="_blank">Railtrains997</a>
          </h1>
-          <button
-            class="btn exit-btn"
-            @click="store.isRealStockListCardOpen = false"
-          >
-            &Cross;
+          <button class="btn action-exit" @click="store.isRealStockListCardOpen = false">
+            <img src="/images/icon-exit.svg" alt="" />
          </button>
        </div>

@@ -31,7 +23,7 @@

          <datalist id="readyStockDataList">
            <option
-              v-for="stock in store.readyStockList"
+              v-for="stock in store.realCompositionList"
              :value="stock.stockId"
              :key="stock.name"
            >
@@ -55,32 +47,23 @@
            </option>
          </datalist>

-          <button class="btn" @click="resetStockFilters">
-            {{ $t("realstock.action-reset") }}
+          <button class="btn action-reset" @click="resetStockFilters">
+            {{ $t('realstock.action-reset') }}
          </button>
        </div>
      </div>

      <ul class="card_list" ref="list" @scroll="onListScroll">
-        <li
-          v-for="rStock in computedReadyStockList"
-          :key="rStock.stockId"
-          :data-last-selected="store.chosenRealStockName === rStock.stockId"
-        >
+        <li v-for="rStock in computedReadyStockList" :key="rStock.stockId">
+          <!-- :data-last-selected="store.ch === rStock.stockId" -->
          <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
-            >
+            <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>

@@ -111,24 +94,19 @@
 </template>

 <script lang="ts">
-import { defineComponent } from "vue";
+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";
+import { IRealComposition, VehicleGroupType } from '../../types';

-interface ResponseJSONData {
-  [key: string]: string;
-}
+function getVehicleType(stockType: string): VehicleGroupType {
+  if (/^E/.test(stockType)) return 'loco-electric';
+  if (/^S/.test(stockType)) return 'loco-diesel';

-function getVehicleType(stockType: string) {
-  if (/^E/.test(stockType)) return "loco-e";
-  if (/^S/.test(stockType)) return "loco-s";
-
-  return "car-passenger";
+  return 'wagon-passenger';
 }

 export default defineComponent({
@@ -136,55 +114,51 @@ export default defineComponent({

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

-  async mounted() {
+  mounted() {
    this.mountObserver();
-    this.fetchStockListData();
  },

  activated() {
-    (this.$refs["focus"] as HTMLElement).focus();
+    (this.$refs['focus'] as HTMLElement).focus();

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

  computed: {
-    computedReadyStockList() {
-      if (this.searchedReadyStockName == null) return this.store.readyStockList;
-
-      return this.store.readyStockList
+    computedReadyStockList(): IRealComposition[] {
+      return this.store.realCompositionList
        .filter(
-          (rs) =>
-            rs.stockId
+          (rc) =>
+            rc.stockId
              .toLocaleLowerCase()
              .includes(this.searchedReadyStockName.toLocaleLowerCase()) &&
-            rs.stockString
+            rc.stockString
              .toLocaleLowerCase()
-              .includes(this.searchedReadyStockString.toLocaleLowerCase()),
+              .includes(this.searchedReadyStockString.toLocaleLowerCase())
        )
        .filter((_, i) => i <= this.visibleIndexesTo);
    },

    computedAvailableStockTypes() {
-      return this.store.readyStockList
+      return this.store.realCompositionList
        .reduce((acc, rs) => {
-          rs.stockString.split(";").forEach((s) => {
+          rs.stockString.split(';').forEach((s) => {
            if (!acc.includes(s)) acc.push(s);
          });

@@ -198,7 +172,7 @@ export default defineComponent({
    computedReadyStockList(curr, prev) {
      if (curr.length < prev.length) {
        this.visibleIndexesTo = 20;
-        (this.$refs["list"] as HTMLElement).scrollTo({
+        (this.$refs['list'] as HTMLElement).scrollTo({
          top: 0,
        });
      }
@@ -206,41 +180,12 @@ export default defineComponent({
  },

  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);
+      this.observer.observe(this.$refs['bottom'] as HTMLElement);
    },

    getImageUrl(name: string) {
@@ -248,11 +193,11 @@ export default defineComponent({
    },

    resetStockFilters() {
-      this.searchedReadyStockName = "";
-      this.searchedReadyStockString = "";
+      this.searchedReadyStockName = '';
+      this.searchedReadyStockString = '';
    },

-    chooseStock(stockItem: IReadyStockItem) {
+    chooseStock(stockItem: IRealComposition) {
      this.loadStockFromString(stockItem.stockString);
      this.lastSelectedStockId = stockItem.stockId;
      this.store.isRealStockListCardOpen = false;
@@ -261,7 +206,7 @@ export default defineComponent({
    onStockItemError(e: Event, stockType: string) {
      const imageEl = e.target as HTMLImageElement;
      imageEl.src = `images/${getVehicleType(stockType)}-unknown.png`;
-      imageEl.style.opacity = "1";
+      imageEl.style.opacity = '1';
    },

    onListScroll(e: Event) {
@@ -275,15 +220,17 @@ export default defineComponent({
 </script>

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

-.exit-btn {
-  font-size: 1.2em;
-  margin: 0.25em 0;
+.action-exit {
+  display: flex;
+  background-color: #333;
+  border-radius: 0.25em;
+  padding: 0.5em;
 }

-.btn {
-  background-color: #444;
+.action-reset {
+  background-color: #333;
 }

 .card_content {
@@ -361,7 +308,7 @@ ul {
    gap: 1rem;
    padding: 0.1em;

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

@@ -1,18 +1,20 @@
 <template>
  <label>
-    <input type="checkbox" v-model="model" />
+    <input type="checkbox" :data-disabled="disabled" :disabled="disabled" v-model="model" />
    <div><slot /></div>
  </label>
 </template>

 <script lang="ts" setup>
 const model = defineModel();
+
+defineProps({
+  disabled: Boolean,
+});
 </script>

 <style lang="scss" scoped>
 label {
-  cursor: pointer;
-
  text-transform: uppercase;
  transition: color 200ms;
 }
@@ -20,6 +22,7 @@ label {
 div {
  padding: 0.25em 0.5em;
  color: white;
+  cursor: pointer;

  background-color: #222;
  border-radius: 0.25em;
@@ -27,7 +30,7 @@ div {
  user-select: none;

  &::before {
-    content: "\2716";
+    content: '\2716';
    margin-right: 0.5em;
    color: #aaa;
  }
@@ -51,7 +54,18 @@ input {

    &::before {
      color: palegreen;
-      content: "\2714";
+      content: '\2714';
+    }
+  }
+
+  &:disabled {
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+
+    + div {
+      opacity: 0.55;
+      cursor: auto;
    }
  }
 }
@@ -9,7 +9,7 @@
            v-for="locoType in locomotiveTypeList"
            :key="locoType.id"
            class="btn btn--choice"
-            :data-selected="locoType.id == store.chosenLocoPower"
+            :data-selected="locoType.id == store.chosenLocoGroup"
            @click="selectLocoType(locoType.id)"
          >
            {{ $t(`inputs.${locoType.id}`) }}
@@ -27,7 +27,10 @@
          <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>
+          <option v-for="loco in locoOptions" :value="loco" :key="loco.type">
+            {{ loco.type
+            }}<b v-if="loco.sponsorOnlyTimestamp && loco.sponsorOnlyTimestamp > Date.now()">*</b>
+          </option>
        </select>
      </div>

@@ -37,7 +40,7 @@
            v-for="carType in carTypeList"
            :key="carType.id"
            class="btn btn--choice"
-            :data-selected="carType.id == store.chosenCarUseType"
+            :data-selected="carType.id == store.chosenCarGroup"
            @click="selectCarWagonType(carType.id)"
          >
            {{ $t(`inputs.${carType.id}`) }}
@@ -56,7 +59,10 @@
            {{ $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>
+          <option v-for="car in carOptions" :value="car" :key="car.type">
+            {{ car.type
+            }}<b v-if="car.sponsorOnlyTimestamp && car.sponsorOnlyTimestamp > Date.now()">*</b>
+          </option>
        </select>
      </div>

@@ -65,7 +71,9 @@
        <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.group == 'wagon-passenger') ||
+            !store.chosenCar
          "
          data-select="cargo"
          data-ignore-outside="1"
@@ -78,6 +86,7 @@
          <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?.cargoTypes" :value="cargo" :key="cargo.id">
@@ -90,7 +99,12 @@
        <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">
+        <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}.` }}
@@ -112,6 +126,7 @@ import imageMixin from '../../mixins/imageMixin';
 import { useStore } from '../../store';
 import stockPreviewMixin from '../../mixins/stockPreviewMixin';
 import stockMixin from '../../mixins/stockMixin';
+import { LocoGroupType, WagonGroupType } from '../../types';

 export default defineComponent({
  mixins: [imageMixin, stockPreviewMixin, stockMixin],
@@ -120,33 +135,33 @@ export default defineComponent({
    store: useStore(),
    locomotiveTypeList: [
      {
-        id: 'loco-e',
+        id: 'loco-electric',
        desc: 'ELEKTRYCZNE',
      },
      {
-        id: 'loco-s',
+        id: 'loco-diesel',
        desc: 'SPALINOWE',
      },
      {
-        id: 'loco-ezt',
+        id: 'unit-electric',
        desc: 'ELEKTR. ZESPOŁY TRAKCYJNE',
      },
      {
-        id: 'loco-szt',
+        id: 'unit-diesel',
        desc: 'SPAL. ZESPOŁY TRAKCYJNE',
      },
-    ],
+    ] as { id: LocoGroupType; desc: string }[],

    carTypeList: [
      {
-        id: 'car-passenger',
+        id: 'wagon-passenger',
        desc: 'PASAŻERSKIE',
      },
      {
-        id: 'car-cargo',
+        id: 'wagon-freight',
        desc: 'TOWAROWE',
      },
-    ],
+    ] as { id: WagonGroupType; desc: string }[],
  }),

  computed: {
@@ -154,14 +169,14 @@ export default defineComponent({
      return this.store.locoDataList
        .slice()
        .sort((a, b) => (a.type > b.type ? 1 : -1))
-        .filter((loco) => loco.power == this.store.chosenLocoPower);
+        .filter((loco) => loco.group == this.store.chosenLocoGroup);
    },

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

@@ -173,17 +188,15 @@ export default defineComponent({
    addOrSwitchVehicle() {
      if (!this.store.chosenVehicle) return;

-      if (this.store.chosenStockListIndex == -1) this.addVehicle(this.store.chosenVehicle, this.store.chosenCargo);
+      if (this.store.chosenStockListIndex == -1)
+        this.addVehicle(this.store.chosenVehicle, this.store.chosenCargo);
      else this.switchVehicles();
    },

    removeVehicle() {
      if (this.store.stockList.length == 0) return;

-      const lastStock = this.store.stockList.slice(-1)[0];
-
-      if (lastStock.count > 1) lastStock.count--;
-      else this.store.stockList.splice(-1);
+      this.store.stockList.splice(-1);
    },

    switchVehicles() {
@@ -197,14 +210,14 @@ export default defineComponent({
      this.store.stockList[this.store.chosenStockListIndex] = stockObject;
    },

-    selectLocoType(locoTypeId: string) {
-      this.store.chosenLocoPower = locoTypeId;
+    selectLocoType(locoGroupType: LocoGroupType) {
+      this.store.chosenLocoGroup = locoGroupType;
      this.store.chosenVehicle = this.locoOptions[0];
      this.store.chosenLoco = this.locoOptions[0];
    },

-    selectCarWagonType(carWagonTypeId: string) {
-      this.store.chosenCarUseType = carWagonTypeId;
+    selectCarWagonType(wagonGroupType: WagonGroupType) {
+      this.store.chosenCarGroup = wagonGroupType;
      this.store.chosenVehicle = this.carOptions[0];
      this.store.chosenCar = this.carOptions[0];
      this.store.chosenCargo = null;
@@ -216,7 +229,10 @@ export default defineComponent({

        this.store.chosenVehicle = type == 'loco' ? this.store.chosenLoco : this.store.chosenCar;

-        this.store.chosenCargo = this.store.chosenCar?.cargoTypes.find((cargo) => cargo.id == this.store.chosenCargo?.id) || null;
+        this.store.chosenCargo =
+          this.store.chosenCar?.cargoTypes.find(
+            (cargo) => cargo.id == this.store.chosenCargo?.id
+          ) || null;
      });
    },
  },
@@ -1,10 +1,6 @@
 <template>
  <section class="logo-section">
-    <img
-      :src="`/logo-${$i18n.locale}.svg`"
-      alt="logo pojazdownik"
-      @click="navigate"
-    />
+    <img :src="`/logo-${$i18n.locale}.svg`" alt="logo pojazdownik" @click="navigate" />

    <div class="actions">
      <button
@@ -26,36 +22,35 @@ export default {
    return {
      localeActions: [
        {
-          name: "POLSKI",
-          locale: "pl",
+          name: 'POLSKI',
+          locale: 'pl',
        },
        {
-          name: "ENGLISH",
-          locale: "en",
+          name: 'ENGLISH',
+          locale: 'en',
        },
      ],
    };
  },
  methods: {
    navigate() {
-      window.location.pathname = "";
+      window.location.pathname = '';
    },

    chooseLocale(locale: string) {
      this.$i18n.locale = locale;
-      window.localStorage.setItem("locale", locale);
+      window.localStorage.setItem('locale', locale);
    },
  },
 };
 </script>

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

 .logo-section {
  grid-row: 1;
  grid-column: 1;
-  margin-bottom: 1.5em;

  display: flex;
  align-items: center;
@@ -69,7 +64,7 @@ export default {
  display: flex;
  gap: 0.5em;

-  button[data-selected="true"] {
+  button[data-selected='true'] {
    font-weight: bold;
    color: $accentColor;
    text-decoration: underline;
@@ -23,12 +23,12 @@
 </template>

 <script lang="ts" setup>
-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";
+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([]);

@@ -36,36 +36,37 @@ const store = useStore();
 type SectionMode = typeof store.stockSectionMode;

 const sectionModes: SectionMode[] = [
-  "stock-list",
-  "wiki-list",
-  "number-generator",
-  "stock-generator",
+  'stock-list',
+  'wiki-list',
+  'number-generator',
+  'stock-generator',
 ];

 onMounted(() => {
-  window.addEventListener("keydown", (e) => {
+  window.addEventListener('keydown', (e) => {
    if (e.target instanceof HTMLInputElement) return;

-    if (/[1234]/.test(e.key)) {
+    if (/^[1234]$/.test(e.key)) {
      const keyNum = Number(e.key);
+
      store.stockSectionMode = sectionModes[keyNum - 1];
-      (sectionButtonRefs.value[keyNum - 1] as HTMLButtonElement).focus();
+      (sectionButtonRefs.value[keyNum - 1] as HTMLButtonElement)?.focus();
    }
  });
 });

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

-    case "wiki-list":
+    case 'wiki-list':
      return WikiListTab;

-    case "stock-generator":
+    case 'stock-generator':
      return StockGeneratorTab;

-    case "number-generator":
+    case 'number-generator':
      return NumberGeneratorTab;

    default:
@@ -79,7 +80,7 @@ function chooseSection(sectionId: SectionMode) {
 </script>

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

 // Tab change animation
 .tab-change {
@@ -121,14 +122,14 @@ function chooseSection(sectionId: SectionMode) {
      left: 50%;
      transform: translateX(-50%);

-      content: "";
+      content: '';
      width: 0;
      height: 2px;
      transition: all 100ms;
      background-color: $accentColor;
    }

-    &[data-selected="true"]::after {
+    &[data-selected='true']::after {
      width: 100%;
    }
  }
@@ -1,52 +1,81 @@
 <template>
  <section class="train-image-section">
-    <div class="train-image__content" :class="{ sponsor: store.chosenVehicle?.isSponsorsOnly }">
+    <div v-if="store.chosenVehicle">
      <img
-        tabindex="0"
-        :src="store.chosenVehicle ? getThumbnailURL(store.chosenVehicle.type, 'small') : '/images/placeholder.jpg'"
+        :src="getThumbnailURL(store.chosenVehicle.type, 'small')"
+        :data-preview-active="store.chosenVehicle !== null"
+        :data-sponsor-only="
+          store.chosenVehicle.sponsorOnlyTimestamp &&
+          store.chosenVehicle.sponsorOnlyTimestamp > Date.now()
+        "
+        :data-team-only="store.chosenVehicle.teamOnly"
        @click="onImageClick"
        @keydown.enter="onImageClick"
        @error="onImageError"
-        type="image/jpeg"
+        tabindex="0"
      />
-    </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.weight / 1000).toFixed(1) }}t | {{ store.chosenVehicle.maxSpeed }} km/h</div>
-
-        <div v-if="isLocomotive(store.chosenVehicle)">{{ $t('preview.cabin') }} {{ store.chosenVehicle.cabinType }}</div>
-
-        <div v-else>
+      <div class="image-info">
+        <b class="text--accent">{{ store.chosenVehicle.type }}</b> &bull;
+        <b style="color: #ccc">
          {{
-            store.chosenVehicle.useType == 'car-cargo'
-              ? $t(`usage.${store.chosenVehicle.constructionType}`)
-              : `${$t('preview.construction')} ${store.chosenVehicle.constructionType}`
+            $t(
+              `preview.${isTractionUnit(store.chosenVehicle) ? store.chosenVehicle.group : store.chosenVehicle.group}`
+            )
          }}
-        </div>
+        </b>

-        <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 style="color: #ccc">
+          <div>
+            {{ store.chosenVehicle.length }}m |
+            {{ (store.chosenVehicle.weight / 1000).toFixed(1) }}t |
+            {{ store.chosenVehicle.maxSpeed }} km/h
+          </div>
+
+          <div v-if="isTractionUnit(store.chosenVehicle)">
+            {{ $t('preview.cabin') }} {{ store.chosenVehicle.cabinType }}
+          </div>
+
+          <div v-else>
+            {{
+              store.chosenVehicle.group == 'wagon-freight'
+                ? $t(`usage.${store.chosenVehicle.constructionType}`)
+                : `${$t('preview.construction')} ${store.chosenVehicle.constructionType}`
+            }}
+          </div>
+
+          <b
+            v-if="
+              store.chosenVehicle.sponsorOnlyTimestamp &&
+              store.chosenVehicle.sponsorOnlyTimestamp > Date.now()
+            "
+            class="sponsor-only"
+          >
+            {{
+              $t('preview.sponsor-only', [
+                new Date(store.chosenVehicle.sponsorOnlyTimestamp).toLocaleDateString(
+                  $i18n.locale == 'pl' ? 'pl-PL' : 'en-GB'
+                ),
+              ])
+            }}
+          </b>
+
+          <b v-if="store.chosenVehicle.teamOnly" class="team-only">{{ $t('preview.team-only') }}</b>
+        </div>
      </div>
    </div>

-    <div class="train-image__info" v-else>{{ $t('preview.desc') }}</div>
+    <div v-else>
+      <img src="/images/placeholder.jpg" alt="placeholder image" />
+      <div class="image-info">{{ $t('preview.desc') }}</div>
+    </div>
  </section>
 </template>

 <script lang="ts">
 import { computed, defineComponent } from 'vue';
 import { useStore } from '../../store';
-import { isLocomotive } from '../../utils/vehicleUtils';
-import { ILocomotive, Vehicle } from '../../types';
+import { isTractionUnit } from '../../utils/vehicleUtils';
 import imageMixin from '../../mixins/imageMixin';

 export default defineComponent({
@@ -67,18 +96,8 @@ export default defineComponent({
    };
  },

-  watch: {
-    chosenVehicle(vehicle: Vehicle, prevVehicle: Vehicle) {
-      if (vehicle && vehicle.type != prevVehicle?.type) {
-        this.store.imageLoading = true;
-      }
-    },
-  },
-
  methods: {
-    onImageLoad() {
-      this.store.imageLoading = false;
-    },
+    isTractionUnit,

    onImageError(e: Event) {
      const el = e.target as HTMLImageElement;
@@ -87,10 +106,6 @@ export default defineComponent({
      el.src = '/images/placeholder.jpg';
    },

-    isLocomotive(vehicle: Vehicle): vehicle is ILocomotive {
-      return isLocomotive(vehicle);
-    },
-
    onImageClick(e: Event) {
      const target = e.target as HTMLElement;

@@ -106,41 +121,57 @@ export default defineComponent({
 </script>

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

 .train-image-section {
  display: flex;
  flex-direction: column;
+  align-items: center;
  text-align: center;

-  grid-row: 3;
-  grid-column: 1;
+  min-height: 250px;

-  margin-top: 1em;
-  height: 22em;
-}
-
-.train-image {
-  &__content {
-    &.sponsor img {
-      border: 1px solid salmon;
-    }
-
-    img {
-      max-width: 380px;
-      width: 100%;
-      height: 100%;
-      border: 1px solid white;
-
-      cursor: zoom-in;
-    }
+  & > div {
+    max-width: 100%;
+    width: 380px;
  }
 }

-.train-image__info {
+img {
+  width: 100%;
+
+  &[data-preview-active='true'] {
+    border: 1px solid white;
+    cursor: zoom-in;
+  }
+
+  &[data-sponsor-only='true'] {
+    border: 1px solid $sponsorColor;
+  }
+
+  &[data-team-only='true'] {
+    border: 1px solid $teamColor;
+  }
+}
+
+.placeholder {
+  height: 250px;
+
+  background-color: $bgColor;
+}
+
+.sponsor-only {
+  color: $sponsorColor;
+}
+
+.team-only {
+  color: $teamColor;
+}
+
+.image-info {
  font-size: 1.1em;
  padding: 0.5em;
-  margin: 0.5em auto;
+  // margin: 0.5em auto;
  line-height: 1.35;

  width: 100%;
@@ -150,19 +181,6 @@ export default defineComponent({
  font-weight: bold;
 }

-// Transition animations
-.img-message-anim {
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-  }
-
-  &-enter-active,
-  &-leave-active {
-    transition: opacity 75ms ease-in 100ms;
-  }
-}
-
@media screen and (max-width: $breakpointMd) {
  .train-image-section {
    justify-content: center;
@@ -1,140 +1,107 @@
 <template>
  <div class="number-generator tab">
    <div class="tab_header">
-      <h2>{{ $t("numgen.title") }}</h2>
-      <h3>{{ $t("numgen.subtitle") }}</h3>
+      <h2>{{ $t('numgen.title') }}</h2>
+      <h3>{{ $t('numgen.subtitle') }}</h3>
    </div>

    <div class="tab_content">
-      <div class="category-select">
-        <label for="category"> {{ $t("numgen.train-category") }}</label>
-        <select
-          id="category"
-          v-model="chosenCategory"
-          @change="randomizeTrainNumber()"
-        >
-          <option :value="null" disabled>
-            {{ $t("numgen.train-category") }}
-          </option>
-          <option
-            v-for="(_, category) in genData.categoriesRules"
-            :key="category"
-            :value="category"
-          >
-            {{ $t(`numgen.categories.${category}`) }}
-          </option>
-        </select>
-      </div>
-
-      <div class="regions-select">
-        <div>
-          <label for="begin-region"> {{ $t("numgen.start-region") }}</label>
-          <select
-            id="begin-region"
-            v-model="beginRegionName"
-            @change="randomizeTrainNumber()"
-          >
+      <div class="inputs">
+        <label>
+          <span>{{ $t('numgen.train-category') }}</span>
+          <select v-model="chosenCategory" @change="randomizeTrainNumber()">
            <option :value="null" disabled>
-              {{ $t("numgen.start-region") }}
+              {{ $t('numgen.train-category') }}
            </option>
            <option
-              v-for="(_, name) in genData.regionNumbers"
-              :key="name"
-              :value="name"
+              v-for="(_, category) in genData.categoriesRules"
+              :key="category"
+              :value="category"
            >
+              {{ $t(`numgen.categories.${category}`) }}
+            </option>
+          </select>
+        </label>
+
+        <label>
+          <span>{{ $t('numgen.start-region') }}</span>
+          <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>
-        </div>
+        </label>

-        <div>
-          <label for="end-region"> {{ $t("numgen.end-region") }}</label>
-          <select
-            id="end-region"
-            v-model="endRegionName"
-            @change="randomizeTrainNumber()"
-          >
+        <label>
+          <span> {{ $t('numgen.end-region') }}</span>
+          <select v-model="endRegionName" @change="randomizeTrainNumber()">
            <option :value="null" disabled>
-              {{ $t("numgen.end-region") }}
+              {{ $t('numgen.end-region') }}
            </option>
-            <option
-              v-for="(_, name) in genData.regionNumbers"
-              :key="name"
-              :value="name"
-            >
+            <option v-for="(_, name) in genData.regionNumbers" :key="name" :value="name">
              {{ name }}
            </option>
          </select>
-        </div>
+        </label>
      </div>

      <div class="generated-number" @click="copyNumber">
        <span v-if="trainNumber">
-          {{ $t("numgen.number-info") }}
+          {{ $t('numgen.number-info') }}
          <b class="text--accent">{{ trainNumber }}</b>
        </span>
-        <span v-else>{{ $t("numgen.warning") }}</span>
+        <span v-else>{{ $t('numgen.warning') }}</span>
      </div>

-      <div
-        class="category-rules"
-        v-if="chosenCategory && categoryRules && trainNumber"
-      >
+      <div class="category-rules" v-if="chosenCategory && categoryRules && trainNumber">
        <!-- First & second digit (the same regions)  -->
-        <div
-          v-if="
-            beginRegionName && endRegionName && beginRegionName == endRegionName
-          "
-        >
-          <b>{{ $t("numgen.rules.two-first-digits") }}</b>
-          {{ $t("numgen.rules.from-pool") }}
-          <b class="text--accent">{{
-            genData.sameRegions[beginRegionName].join(", ")
-          }}</b>
-          {{ $t("numgen.rules.for-region") }} {{ beginRegionName }}
+        <div v-if="beginRegionName && endRegionName && beginRegionName == endRegionName">
+          <b>{{ $t('numgen.rules.two-first-digits') }}</b>
+          {{ $t('numgen.rules.from-pool') }}
+          <b class="text--accent">{{ genData.sameRegions[beginRegionName].join(', ') }}</b>
+          {{ $t('numgen.rules.for-region') }} {{ beginRegionName }}
        </div>

        <!-- First & second digit (different regions)  -->
        <div v-else>
          <div>
            <b>
-              {{ $t("numgen.rules.first-digit") }}
+              {{ $t('numgen.rules.first-digit') }}
              <span class="text--accent">{{ trainNumber[0] }}</span>
            </b>
-            {{ $t("numgen.rules.for-region-begin") }} {{ beginRegionName }}
+            {{ $t('numgen.rules.for-region-begin') }} {{ beginRegionName }}
          </div>

          <div>
            <b>
-              {{ $t("numgen.rules.second-digit") }}
+              {{ $t('numgen.rules.second-digit') }}
              <span class="text--accent">{{ trainNumber[1] }} </span>
            </b>
-            {{ $t("numgen.rules.for-region-end") }} {{ endRegionName }}
+            {{ $t('numgen.rules.for-region-end') }} {{ endRegionName }}
          </div>
        </div>

        <!-- Third digit (non-passenger only) -->
        <div v-if="categoryRules[0] != null">
          <b>
-            {{ $t("numgen.rules.third-digit") }}
+            {{ $t('numgen.rules.third-digit') }}
            <span class="text--accent">{{ categoryRules[0] }}</span>
          </b>
-          {{ $t("numgen.rules.for-category") }} {{ chosenCategory }}
+          {{ $t('numgen.rules.for-category') }} {{ chosenCategory }}
        </div>

        <!-- Last digits  -->
        <div>
          <b>
            {{
-              $t(
-                `numgen.rules.${categoryRules[1]?.length == 3 ? "three" : "two"}-last-digits`,
-              )
+              $t(`numgen.rules.${categoryRules[1]?.length == 3 ? 'three' : 'two'}-last-digits`)
            }}</b
          >
-          {{ $t("numgen.rules.from-range") }}
-          <b class="text--accent"
-            >{{ categoryRules[1] }}-{{ categoryRules[2] }}</b
-          >
+          {{ $t('numgen.rules.from-range') }}
+          <b class="text--accent">{{ categoryRules[1] }}-{{ categoryRules[2] }}</b>
        </div>
      </div>

@@ -142,7 +109,7 @@

      <div class="tab_links">
        <a :href="$t('numgen.td2-wiki-link')" target="_blank">
-          {{ $t("numgen.td2-wiki") }}
+          {{ $t('numgen.td2-wiki') }}
        </a>
      </div>

@@ -150,15 +117,15 @@

      <div class="tab_actions">
        <button class="btn" @click="randomizeTrainNumber(true)">
-          {{ $t("numgen.action-random-region") }}
+          {{ $t('numgen.action-random-region') }}
        </button>

        <button class="btn" @click="randomizeCategory">
-          {{ $t("numgen.action-random-category") }}
+          {{ $t('numgen.action-random-category') }}
        </button>

        <button class="btn" @click="randomizeTrainNumber(false)">
-          {{ $t("numgen.action-random-number") }}
+          {{ $t('numgen.action-random-number') }}
        </button>
      </div>
    </div>
@@ -166,11 +133,11 @@
 </template>

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

-import genData from "../../constants/numberGeneratorData.json";
-import { computed } from "vue";
+import genData from '../../constants/numberGeneratorData.json';
+import { computed } from 'vue';

 const i18n = useI18n();
 type RegionName = keyof typeof genData.regionNumbers;
@@ -185,7 +152,7 @@ const trainNumber = ref(null) as Ref<string | null>;
 const copyNumber = () => {
  if (trainNumber.value) {
    navigator.clipboard.writeText(trainNumber.value);
-    alert(i18n.t("numgen.alert"));
+    alert(i18n.t('numgen.alert'));
  }
 };

@@ -208,16 +175,12 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
  const regionKeys = Object.keys(genData.regionNumbers);

  if (beginRegionName.value == null || randomizeRegions)
-    beginRegionName.value = regionKeys[
-      (regionKeys.length * Math.random()) << 0
-    ] as RegionName;
+    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;
+    endRegionName.value = regionKeys[(regionKeys.length * Math.random()) << 0] as RegionName;

-  let number = "";
+  let number = '';

  // Two first numbers (begin & end regions)
  if (beginRegionName.value == endRegionName.value) {
@@ -239,22 +202,20 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
  }

  // Choose default category if it's not chosen
-  if (chosenCategory.value == null) chosenCategory.value = "EI";
+  if (chosenCategory.value == null) chosenCategory.value = 'EI';

  // Get category rules
  const [thirdNumber, minRange, maxRange] = categoryRules.value!;

  // Third number
-  number += thirdNumber ?? "";
+  number += thirdNumber ?? '';

  // Remaining numbers
  const rangeNums = minRange!.length;
  const randRange = Math.floor(
-    Math.random() * (Number(maxRange) - Number(minRange)) + Number(minRange),
+    Math.random() * (Number(maxRange) - Number(minRange)) + Number(minRange)
  ).toString();
-  const leadingZeros = new Array(Math.abs(randRange.length - rangeNums))
-    .fill("0")
-    .join("");
+  const leadingZeros = new Array(Math.abs(randRange.length - rangeNums)).fill('0').join('');

  number += `${leadingZeros}${randRange}`;

@@ -263,14 +224,8 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
 </script>

 <style lang="scss" scoped>
-@import "../../styles/tab.scss";
-@import "../../styles/global.scss";
-
-label {
-  display: block;
-  font-weight: bold;
-  margin-bottom: 0.5em;
-}
+@import '../../styles/tab.scss';
+@import '../../styles/global.scss';

 .category-select {
  select {
@@ -281,23 +236,22 @@ label {
  margin-bottom: 1em;
 }

-.regions-select {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.inputs {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
+
+  flex-wrap: wrap;
  gap: 0.5em;
+}

-  div {
-    width: 100%;
-  }
+.inputs > label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;

-  select {
-    width: 100%;
-  }
-
-  label {
-    display: block;
-    margin-bottom: 0.5em;
+  span {
+    color: #ccc;
+    font-weight: bold;
  }
 }

@@ -12,19 +12,19 @@
          {{ $t('stockgen.properties-desc') }}
        </b>

-        <div class="tab_attributes">
+        <div class="inputs">
          <label>
-            {{ $t('stockgen.input-mass') }}
+            <span>{{ $t('stockgen.input-mass') }}</span>
            <input type="number" v-model="maxTons" step="100" max="4000" min="0" />
          </label>

          <label>
-            {{ $t('stockgen.input-length') }}
+            <span>{{ $t('stockgen.input-length') }}</span>
            <input type="number" v-model="maxLength" step="25" max="650" min="0" />
          </label>

          <label>
-            {{ $t('stockgen.input-carcount') }}
+            <span>{{ $t('stockgen.input-carcount') }}</span>
            <input type="number" v-model="maxCarCount" step="1" max="60" min="1" />
          </label>
        </div>
@@ -85,15 +85,27 @@
      <hr />

      <div class="tab_actions">
-        <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock()">
+        <button
+          class="btn"
+          :data-disabled="computedChosenCarTypes.size == 0"
+          @click="generateStock()"
+        >
          {{ $t('stockgen.action-generate') }}
        </button>

-        <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock(true)">
+        <button
+          class="btn"
+          :data-disabled="computedChosenCarTypes.size == 0"
+          @click="generateStock(true)"
+        >
          {{ $t('stockgen.action-generate-empty') }}
        </button>

-        <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="resetChosenCargo">
+        <button
+          class="btn"
+          :data-disabled="computedChosenCarTypes.size == 0"
+          @click="resetChosenCargo"
+        >
          {{ $t('stockgen.action-reset') }}
        </button>
      </div>
@@ -107,11 +119,11 @@ import { useStore } from '../../store';

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

 export default defineComponent({
  name: 'stock-generator',
-  mixins: [stockMixin, warningsMixin],
+  mixins: [stockMixin],

  data() {
    return {
@@ -138,9 +150,9 @@ export default defineComponent({
    },

    computedCargoData() {
-      if (!this.store.stockData?.generator.cargo) return [];
+      if (!this.store.vehiclesData?.generator.cargo) return [];

-      const cargoGeneratorData = this.store.stockData.generator.cargo;
+      const cargoGeneratorData = this.store.vehiclesData.generator.cargo;

      return Object.keys(cargoGeneratorData)
        .sort((v1, v2) => this.$t(`cargo.${v1}`).localeCompare(this.$t(`cargo.${v2}`)))
@@ -175,14 +187,16 @@ export default defineComponent({
      if (!this.isCarGroupingEnabled) return false;

      stockList.sort((s1, s2) => {
-        return (s1.constructionType + s1.cargo?.id).localeCompare(s2.constructionType + s2.cargo?.id);
+        return (s1.vehicleRef.constructionType + s1.cargo?.id).localeCompare(
+          s2.vehicleRef.constructionType + s2.cargo?.id
+        );
      });
    },

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

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

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

                  if (!chosenStock)
                    acc.push({
@@ -222,15 +239,24 @@ export default defineComponent({
      };

      for (let i = 0; i < 10; i++) {
-        this.store.stockList.splice(this.store.stockList[0]?.isLoco ? 1 : 0);
+        this.store.stockList.splice(
+          this.store.stockList.length > 0 && isTractionUnit(this.store.stockList[0].vehicleRef)
+            ? 1
+            : 0
+        );

        let carCount = 0;
-        const maxWeight = this.store.acceptableWeight > 0 ? Math.min(this.store.acceptableWeight, this.maxTons * 1000) : this.maxTons * 1000;
+        const maxWeight =
+          this.store.acceptableWeight > 0
+            ? Math.min(this.store.acceptableWeight, this.maxTons * 1000)
+            : this.maxTons * 1000;

        // eslint-disable-next-line no-constant-condition
        while (true) {
-          const randomStockType = generatedChosenStockList[~~(Math.random() * generatedChosenStockList.length)];
-          const { carWagon, cargo } = randomStockType.carPool[~~(Math.random() * randomStockType.carPool.length)];
+          const randomStockType =
+            generatedChosenStockList[~~(Math.random() * generatedChosenStockList.length)];
+          const { carWagon, cargo } =
+            randomStockType.carPool[~~(Math.random() * randomStockType.carPool.length)];

          if (
            this.store.totalWeight + (carWagon.weight + (cargo?.weight ?? 0)) > maxWeight ||
@@ -268,7 +294,7 @@ export default defineComponent({
      this.store.chosenLoco = null;
      this.store.chosenCargo = null;

-      if (c) this.store.chosenCarUseType = c?.useType;
+      if (c) this.store.chosenCarGroup = c?.group;
    },

    toggleCargoChosen(cargoType: string, vehicles: string[]) {
@@ -347,6 +373,28 @@ h2 {
  gap: 1em;
 }

+.inputs {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
+
+  flex-wrap: wrap;
+  gap: 0.5em;
+}
+
+.inputs > label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+
+  span {
+    color: #ccc;
+  }
+
+  input[type='text'] {
+    background-color: white;
+  }
+}
+
 .generator_options {
  display: flex;
  flex-direction: column;
@@ -4,145 +4,226 @@
      <h2>{{ $t('stocklist.title') }}</h2>
    </div>

-    <div class="stock_actions">
-      <button class="btn btn--image" @click="clickFileInput">
-        <input type="file" @change="uploadStock" ref="conFile" accept=".con,.txt" />
-        <img src="/images/icon-upload.svg" alt="upload icon" />
-        {{ $t('stocklist.action-upload') }}
-      </button>
+    <div class="tab_content">
+      <div class="stock_actions">
+        <button class="btn btn--image" @click="clickFileInput">
+          <input type="file" @change="uploadStock" ref="conFile" accept=".con,.txt" />
+          <img src="/images/icon-upload.svg" alt="upload icon" />
+          {{ $t('stocklist.action-upload') }}
+        </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 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">
-      <button class="btn btn--image" :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 btn--image" :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 btn--image" :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">
-      <b class="real-stock-info" v-if="store.chosenRealStock">
-        <span class="text--accent">
-          <img :src="getIconURL(store.chosenRealStock.type)" :alt="store.chosenRealStock.type" />
-          {{ store.chosenRealStock.number }} {{ store.chosenRealStock.name }}
-        </span>
-        |
-      </b>
-
-      <span>
-        {{ $t('stocklist.mass') }}
-        <span class="text--accent">{{ (store.totalWeight / 1000).toFixed(1) }}t</span> ({{ $t('stocklist.mass-accepted') }}:
-        <span class="text--accent">{{ store.acceptableWeight ? `${~~(store.acceptableWeight / 1000)}t` : '-' }}</span
-        >) - {{ $t('stocklist.length') }}:
-        <span class="text--accent">{{ store.totalLength }}m</span>
-        - {{ $t('stocklist.vmax') }}:
-        <span class="text--accent">{{ store.maxStockSpeed }} km/h</span>
-      </span>
-    </div>
-
-    <div class="stock_spawn-settings">
-      <Checkbox v-if="store.stockSupportsColdStart" v-model="store.isColdStart">
-        {{ $t('stocklist.coldstart-info') }}
-      </Checkbox>
-
-      <Checkbox v-if="store.stockSupportsDoubleManning" v-model="store.isDoubleManned">
-        {{ $t('stocklist.doublemanning-info') }}
-      </Checkbox>
-    </div>
-
-    <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">{{ $t('stocklist.list-empty') }}</div>
-      </li>
-
-      <TransitionGroup name="stock-list-anim" v-else>
-        <li
-          v-for="(stock, i) in store.stockList"
-          :key="stock.id"
-          :class="{ loco: stock.isLoco }"
-          tabindex="0"
-          @click="onListItemClick(i)"
-          @keydown.enter="onListItemClick(i)"
-          @keydown.w="moveUpStock(i)"
-          @keydown.s="moveDownStock(i)"
-          @keydown.backspace="removeStock(i)"
-          ref="itemRefs"
+        <button
+          class="btn btn--image"
+          :data-disabled="stockIsEmpty"
+          :disabled="stockIsEmpty"
+          @click="downloadStock"
        >
-          <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>
+          <img src="/images/icon-download.svg" alt="download icon" />
+          {{ $t('stocklist.action-download') }}
+        </button>

-            <span class="stock-info__type" :class="{ sponsor: stock.isSponsorsOnly }">
-              {{ stock.isLoco ? stock.type : getCarSpecFromType(stock.type) }}
-            </span>
+        <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>

-            <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.weight + (stock.cargo?.weight ?? 0)) / 1000).toFixed(1) }}t</span>
-            <span class="stock-info__speed">{{ stock.maxSpeed }}km/h</span>
-          </div>
-        </li>
-      </TransitionGroup>
-    </ul>
+        <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">
+        <button
+          class="btn btn--image"
+          :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 btn--image"
+          :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 btn--image"
+          :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">
+        <b class="real-stock-info" v-if="chosenRealComposition">
+          <span class="text--accent">
+            <img :src="getIconURL(chosenRealComposition.type)" :alt="chosenRealComposition.type" />
+            {{ chosenRealComposition.number }} {{ chosenRealComposition.name }}
+          </span>
+          |
+        </b>
+
+        <span>
+          {{ $t('stocklist.mass') }}
+          <span class="text--accent">{{ (store.totalWeight / 1000).toFixed(1) }}t</span>
+          ({{ $t('stocklist.mass-accepted') }}:
+          <span class="text--accent">{{
+            store.acceptableWeight ? `${~~(store.acceptableWeight / 1000)}t` : '-'
+          }}</span
+          >) - {{ $t('stocklist.length') }}:
+          <span class="text--accent">{{ store.totalLength }}m</span>
+          - {{ $t('stocklist.vmax') }}
+          <span tabindex="0" :data-tooltip="$t('stocklist.disclaimer')">(?)</span>:
+          <span class="text--accent">{{ store.maxStockSpeed }} km/h</span>
+        </span>
+      </div>
+
+      <div></div>
+
+      <div class="stock_spawn-settings">
+        <Checkbox :disabled="!store.stockSupportsColdStart" v-model="store.isColdStart">
+          {{ $t('stocklist.coldstart-info') }}
+        </Checkbox>
+
+        <Checkbox :disabled="!store.stockSupportsDoubleManning" v-model="store.isDoubleManned">
+          {{ $t('stocklist.doublemanning-info') }}
+        </Checkbox>
+      </div>
+
+      <div class="stock_warnings" v-if="hasAnyWarnings">
+        <div class="warning" v-if="locoNotSuitable">
+          (!) {{ $t('stocklist.warning-not-suitable') }}
+        </div>
+
+        <div class="warning" v-if="lengthExceeded && store.isTrainPassenger">
+          (!) {{ $t('stocklist.warning-passenger-too-long') }}
+        </div>
+
+        <div class="warning" v-if="lengthExceeded && !store.isTrainPassenger">
+          (!) {{ $t('stocklist.warning-freight-too-long') }}
+        </div>
+
+        <div class="warning" v-if="teamOnlyVehicles.length > 0">
+          (!)
+          {{
+            $t('stocklist.warning-team-only-vehicle', [
+              teamOnlyVehicles.map((v) => v.vehicleRef.type).join(', '),
+            ])
+          }}
+        </div>
+
+        <div class="warning" v-if="weightExceeded">
+          (!)
+          <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="locoCountExceeded">
+          {{ $t('stocklist.warning-too-many-locos') }}
+        </div>
+      </div>
+
+      <StockThumbnails :onListItemClick="onListItemClick" />
+
+      <!-- Stock list -->
+      <div class="list-wrapper">
+        <div v-if="stockIsEmpty" class="list-empty">
+          <div class="stock-info">{{ $t('stocklist.list-empty') }}</div>
+        </div>
+
+        <ul v-else>
+          <transition-group name="stock-list-anim">
+            <li
+              v-for="(stock, i) in store.stockList"
+              :key="stock.id"
+              :class="{ loco: isTractionUnit(stock.vehicleRef) }"
+              tabindex="0"
+              @click="onListItemClick(i)"
+              @keydown.enter="onListItemClick(i)"
+              @keydown.w="moveUpStock(i)"
+              @keydown.s="moveDownStock(i)"
+              @keydown.backspace="removeStock(i)"
+              ref="itemRefs"
+            >
+              <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"
+                  :data-sponsor-only="
+                    stock.vehicleRef.sponsorOnlyTimestamp &&
+                    stock.vehicleRef.sponsorOnlyTimestamp > Date.now()
+                  "
+                  :data-team-only="stock.vehicleRef.teamOnly"
+                >
+                  {{
+                    isTractionUnit(stock.vehicleRef)
+                      ? stock.vehicleRef.type
+                      : getCarSpecFromType(stock.vehicleRef.type)
+                  }}
+                </span>
+
+                <span class="stock-info-cargo" v-if="stock.cargo">
+                  {{ stock.cargo.id }}
+                </span>
+
+                <span class="stock-info-length">{{ stock.vehicleRef.length }}m</span>
+
+                <span class="stock-info-mass">
+                  {{ ((stock.vehicleRef.weight + (stock.cargo?.weight ?? 0)) / 1000).toFixed(1) }}t
+                </span>
+                <span class="stock-info-speed">{{ stock.vehicleRef.maxSpeed }}km/h</span>
+              </div>
+            </li>
+          </transition-group>
+        </ul>
+      </div>
+    </div>
  </section>
 </template>

@@ -151,18 +232,18 @@ import { defineComponent } from 'vue';

 import { useStore } from '../../store';

-import warningsMixin from '../../mixins/warningsMixin';
 import imageMixin from '../../mixins/imageMixin';
 import stockPreviewMixin from '../../mixins/stockPreviewMixin';
 import StockThumbnails from '../utils/StockThumbnails.vue';
 import stockMixin from '../../mixins/stockMixin';
 import Checkbox from '../common/Checkbox.vue';
+import { isTractionUnit } from '../../utils/vehicleUtils';

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

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

  setup() {
    const store = useStore();
@@ -180,15 +261,25 @@ export default defineComponent({
  }),

  computed: {
+    chosenRealComposition() {
+      const currentStockString = this.store.stockList.map((s) => s.vehicleRef.type).join(';');
+
+      return this.store.realCompositionList.find((rc) => rc.stockString == currentStockString);
+    },
+
    stockString() {
      if (this.store.stockList.length == 0) return '';

      const includeColdStart = this.store.isColdStart && this.store.stockSupportsColdStart;
-      const includeDoubleManned = this.store.isDoubleManned && this.store.stockSupportsDoubleManning;
+      const includeDoubleManned =
+        this.store.isDoubleManned && this.store.stockSupportsDoubleManning;

      return this.store.stockList
        .map((stock, i) => {
-          let stockTypeStr = stock.isLoco || !stock.cargo ? stock.type : `${stock.type}:${stock.cargo.id}`;
+          let stockTypeStr =
+            isTractionUnit(stock.vehicleRef) || !stock.cargo
+              ? stock.vehicleRef.type
+              : `${stock.vehicleRef.type}:${stock.cargo.id}`;

          if (i == 0 && (includeColdStart || includeDoubleManned))
            return `${stockTypeStr},${includeColdStart ? 'c' : ''}${includeDoubleManned ? 'd' : ''}`;
@@ -203,15 +294,60 @@ export default defineComponent({
    },

    chosenStockVehicle() {
-      return this.store.chosenStockListIndex == -1 ? undefined : this.store.stockList[this.store.chosenStockListIndex];
+      return this.store.chosenStockListIndex == -1
+        ? undefined
+        : this.store.stockList[this.store.chosenStockListIndex];
    },

-    stockHasWarnings() {
-      return this.tooManyLocomotives || this.trainTooHeavy || this.trainTooLong || this.locoNotSuitable;
+    lengthExceeded() {
+      return (
+        (this.store.totalLength > 350 && this.store.isTrainPassenger) ||
+        (this.store.totalLength > 650 && !this.store.isTrainPassenger)
+      );
+    },
+
+    weightExceeded() {
+      return this.store.acceptableWeight && this.store.totalWeight > this.store.acceptableWeight;
+    },
+
+    locoNotSuitable() {
+      return (
+        !this.store.isTrainPassenger &&
+        this.store.stockList.length > 1 &&
+        !this.store.stockList.every((stock) => isTractionUnit(stock.vehicleRef)) &&
+        this.store.stockList.some(
+          (stock) => isTractionUnit(stock.vehicleRef) && stock.vehicleRef.type.startsWith('EP')
+        )
+      );
+    },
+
+    locoCountExceeded() {
+      return (
+        this.store.stockList.reduce((acc, stock) => {
+          if (isTractionUnit(stock.vehicleRef)) acc += 1;
+          return acc;
+        }, 0) > 2
+      );
+    },
+
+    teamOnlyVehicles() {
+      return this.store.stockList.filter((stock) => stock.vehicleRef.teamOnly);
+    },
+
+    hasAnyWarnings() {
+      return (
+        this.locoCountExceeded ||
+        this.weightExceeded ||
+        this.lengthExceeded ||
+        this.locoNotSuitable ||
+        this.teamOnlyVehicles
+      );
    },
  },

  methods: {
+    isTractionUnit,
+
    copyToClipboard() {
      navigator.clipboard.writeText(this.stockString);

@@ -227,7 +363,11 @@ export default defineComponent({
    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.vehicleRef.type
+          ? -1
+          : stockID;

      if (this.store.chosenStockListIndex == -1) {
        this.store.chosenVehicle = null;
@@ -256,20 +396,6 @@ export default defineComponent({
      this.store.chosenStockListIndex = -1;
    },

-    addStock(index: number) {
-      if (index == -1) return;
-
-      this.store.stockList[index].count++;
-    },
-
-    subStock(index: number) {
-      if (index == -1) return;
-
-      if (this.store.stockList[index].count < 2) return;
-
-      this.store.stockList[index].count--;
-    },
-
    removeStock(index: number) {
      if (index == -1) return;

@@ -303,7 +429,7 @@ export default defineComponent({

    shuffleCars() {
      const availableIndexes = this.store.stockList.reduce((acc, stock, i) => {
-        if (!stock.isLoco) acc.push(i);
+        if (!isTractionUnit(stock.vehicleRef)) acc.push(i);

        return acc;
      }, [] as number[]);
@@ -313,7 +439,8 @@ export default defineComponent({

        availableIndexes.splice(i, -1);

-        const randAvailableIndex = availableIndexes[Math.floor(Math.random() * availableIndexes.length)];
+        const randAvailableIndex =
+          availableIndexes[Math.floor(Math.random() * availableIndexes.length)];
        const tempSwap = this.store.stockList[randAvailableIndex];

        this.store.stockList[randAvailableIndex] = this.store.stockList[i];
@@ -324,7 +451,7 @@ export default defineComponent({
    downloadStock() {
      if (this.store.stockList.length == 0) return alert(this.$t('stocklist.alert-empty'));

-      const defaultName = `${this.store.chosenRealStockName || this.store.stockList[0].type} ${(this.store.totalWeight / 1000).toFixed(1)}t; ${
+      const defaultName = `${this.chosenRealComposition ? this.chosenRealComposition.stockId + ' ' : ''}${this.store.stockList[0].vehicleRef.type} ${(this.store.totalWeight / 1000).toFixed(1)}t; ${
        this.store.totalLength
      }m; vmax ${this.store.maxStockSpeed}`;

@@ -362,7 +489,7 @@ export default defineComponent({
        this.loadStockFromString(stockString);
      };

-      reader.onerror = (err) => console.log(err);
+      reader.onerror = (err) => console.error(err);

      inputEl.value = '';
    },
@@ -397,7 +524,7 @@ export default defineComponent({
@import '../../styles/global';
@import '../../styles/tab.scss';

-.stock-list-tab {
+.tab_content {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
@@ -405,6 +532,7 @@ export default defineComponent({

 .warning {
  padding: 0.25em;
+  margin: 0.25em 0;
  background: $accentColor;
  color: black;

@@ -467,10 +595,20 @@ export default defineComponent({
  }
 }

-ul {
+.list-wrapper {
  position: relative;
-  overflow: auto;
-  max-height: 500px;
+}
+
+.list-empty {
+  background-color: $secondaryColor;
+  border-radius: 0.5em;
+  padding: 0.75em;
+  font-weight: bold;
+}
+
+ul {
+  overflow-y: scroll;
+  height: 500px;
 }

 ul > li {
@@ -487,16 +625,11 @@ ul > li {
  &:focus-visible {
    outline: 1px solid white;
  }
-
-  &.list-empty {
-    background-color: $secondaryColor;
-    border-radius: 0.5em;
-    padding: 0.75em;
-  }
 }

 li > .stock-info {
  display: flex;
+  gap: 0.25em;

  color: white;
  font-weight: 700;
@@ -505,46 +638,39 @@ li > .stock-info {

  & > span {
    padding: 0.5em;
-    margin-right: 0.25em;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
  }
 }

-.sponsor {
-  color: salmon;
+.stock-info-no,
+.stock-info-type {
+  background-color: $secondaryColor;
+
+  &[data-team-only='true'] {
+    color: $teamColor;
+  }
+
+  &[data-sponsor-only='true'] {
+    color: $sponsorColor;
+  }
 }

-.stock-info {
-  &__no,
-  &__type {
-    background-color: $secondaryColor;
-  }
+.stock-info-no {
+  min-width: 3.5em;
+  text-align: right;

-  &__count {
-    background-color: #e04e3e;
+  &[data-selected='true'] {
+    color: $accentColor;
  }
+}

-  &__no {
-    min-width: 3.5em;
-    text-align: right;
+.stock-info-cargo {
+  background-color: #333;
+}

-    &[data-selected='true'] {
-      color: $accentColor;
-    }
-  }
-
-  &__cargo {
-    background-color: #333;
-  }
-
-  &__length,
-  &__mass,
-  &__speed {
-    background-color: #555;
-  }
+.stock-info-length,
+.stock-info-mass,
+.stock-info-speed {
+  background-color: #555;
 }

 .stock-list-anim {
@@ -5,81 +5,80 @@
    </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">
+        <label>
+          <span>{{ $t('wiki.labels.search-vehicle') }}</span>
+          <input
+            type="text"
+            :placeholder="$t('wiki.labels.search-vehicle-placeholder')"
+            v-model="searchedVehicleTypeName"
+          />
+        </label>

-        <div class="actions-panel_search">
-          <input type="text" :placeholder="$t('wiki.search')" v-model="searchedVehicleTypeName" />
-        </div>
+        <label>
+          <span>{{ $t('wiki.labels.vehicles') }}</span>
+          <select name="filter-type" id="filter-type" v-model="filterType">
+            <option v-for="filter in filters" :key="filter" :value="filter">
+              {{ $t(`wiki.filters.${filter}`) }}
+            </option>
+          </select>
+        </label>
+
+        <label>
+          <span>{{ $t('wiki.labels.sort-by') }}</span>
+          <select name="sorter-type" id="sorter-type" v-model="sorterType">
+            <option v-for="sorter in sorters" :key="sorter" :value="sorter">
+              {{ $t(`wiki.sort-by.${sorter}`) }}
+            </option>
+          </select>
+        </label>
+
+        <label>
+          <span>{{ $t('wiki.labels.sort-direction') }}</span>
+
+          <select name="sorter-direction" id="sorter-direction" v-model="sorterDirection">
+            <option value="asc">{{ $t('wiki.sort-direction.asc') }}</option>
+            <option value="desc">{{ $t('wiki.sort-direction.desc') }}</option>
+          </select>
+        </label>
      </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}`) }}
+      <ul class="vehicles" ref="vehicles">
+        <li
+          v-for="vehicle in computedVehicles"
+          :key="vehicle.type"
+          :data-preview="vehicle.type === store.chosenVehicle?.type"
+          @click="previewVehicle(vehicle)"
+          @dblclick="addVehicle(vehicle)"
+          @keydown.enter="onVehicleSelect(vehicle)"
+          tabindex="0"
+        >
+          <img loading="lazy" width="120" :src="getThumbnailURL(vehicle.type, 'small')" />

-                <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)"
+          <span>
+            <span
+              class="vehicle-name"
+              :class="{
+                'sponsor-only':
+                  vehicle.sponsorOnlyTimestamp && vehicle.sponsorOnlyTimestamp > Date.now(),
+                'team-only': vehicle.teamOnly,
+              }"
            >
-              <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>
+              <b>{{ vehicle.type.replace(/_/g, ' ') }}</b>
+            </span>

-              <td :data-sponsoronly="vehicle.isSponsorsOnly">
-                {{ vehicle.type }}
-              </td>
+            <div class="vehicle-group">
+              {{ $t(`wiki.${vehicle.group}`) }} |
+              {{ isTractionUnit(vehicle) ? vehicle.cabinType : vehicle.constructionType }}
+            </div>

-              <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.weight / 1000).toFixed(1) }}t</td>
-              <td>{{ vehicle.maxSpeed }}km/h</td>
-
-              <td v-if="currentFilterMode == 'carriages'">
-                {{ !isLocomotive(vehicle) ? vehicle.cargoTypes.length : '---' }}
-              </td>
-              <td v-if="currentFilterMode == 'tractions'">
-                {{ isLocomotive(vehicle) ? (vehicle.coldStart ? `&check;` : '&cross;') : '---' }}
-              </td>
-            </tr>
-          </tbody>
-
-          <span ref="table-bottom"></span>
-        </table>
-      </div>
+            <div class="vehicle-props">
+              {{ vehicle.length }}m | {{ (vehicle.weight / 1000).toFixed(1) }}t |
+              {{ vehicle.maxSpeed }}km/h
+            </div>
+          </span>
+        </li>
+      </ul>
    </div>
  </section>
 </template>
@@ -88,35 +87,18 @@
 import { defineComponent } from 'vue';
 import { useStore } from '../../store';
 import stockPreviewMixin from '../../mixins/stockPreviewMixin';
-import { Vehicle } from '../../types';
-import { isLocomotive } from '../../utils/vehicleUtils';
+import { IVehicle } from '../../types';
+import { isTractionUnit } from '../../utils/vehicleUtils';
 import stockMixin from '../../mixins/stockMixin';
 import imageMixin from '../../mixins/imageMixin';

-type SorterID = 'type' | 'constructionType' | 'image' | 'length' | 'weight' | 'maxSpeed' | 'cargoCount' | 'group' | 'coldStart';
+const sorters = ['type', 'group', 'length', 'weight', 'maxSpeed'] as const;
+const filters = ['vehicles-all', 'vehicles-traction', 'vehicles-wagon'] as const;

-interface IWikiHeader {
-  id: SorterID;
-  sortable: boolean;
-  for: 'all' | 'carriages' | 'tractions';
-}
+type SorterType = (typeof sorters)[number];
+type SorterDirection = 'asc' | 'desc';

-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: 'weight', sortable: true, for: 'all' },
-  { id: 'maxSpeed', sortable: true, for: 'all' },
-  { id: 'coldStart', sortable: true, for: 'tractions' },
-  { id: 'cargoCount', sortable: true, for: 'carriages' },
-];
+type FilterType = (typeof filters)[number];

 export default defineComponent({
  mixins: [stockPreviewMixin, stockMixin, imageMixin],
@@ -124,105 +106,104 @@ export default defineComponent({
  data() {
    return {
      store: useStore(),
-      headers,
+      observer: null as IntersectionObserver | null,

-      scrollTop: 0,
+      sorters: sorters,
+      filters: filters,

      searchedVehicleTypeName: '',

-      currentSorter: {
-        id: 'type' as SorterID,
-        direction: 1,
-      },
+      sorterType: 'type' as SorterType,
+      sorterDirection: 'asc' as SorterDirection,

-      currentFilterMode: 'all' as 'all' | 'tractions' | 'carriages',
+      filterType: 'vehicles-all' as FilterType,
+
+      lastScrollTop: 0,
    };
  },

-  activated() {
-    const tableWrapperRef = this.$refs['table-wrapper'] as HTMLElement;
+  deactivated() {
+    this.lastScrollTop = (this.$refs['vehicles'] as HTMLUListElement)?.scrollTop || 0;
+  },

-    tableWrapperRef.scrollTo({
-      top: this.scrollTop,
-    });
+  activated() {
+    (this.$refs['vehicles'] as HTMLUListElement)?.scrollTo({ top: this.lastScrollTop });
+  },
+
+  watch: {
+    computedVehicles() {
+      const vehiclesRef = this.$refs['vehicles'] as HTMLElement;
+
+      vehiclesRef.scrollTo({
+        top: 0,
+      });
+    },
  },

  methods: {
-    isLocomotive,
+    isTractionUnit,

-    toggleFilter(name: typeof this.currentFilterMode) {
-      this.currentFilterMode = this.currentFilterMode == name ? 'all' : name;
+    onVehicleSelect(vehicle: IVehicle) {
+      if (this.store.chosenVehicle?.type === vehicle.type) this.addVehicle(vehicle);
+      this.previewVehicle(vehicle);
    },

-    toggleSorter(header: IWikiHeader) {
-      if (!header.sortable) return;
+    filterVehicles(v: IVehicle) {
+      if (this.searchedVehicleTypeName)
+        return v.type
+          .toLocaleLowerCase()
+          .includes(this.searchedVehicleTypeName.toLocaleLowerCase());

-      if (header.id == this.currentSorter.id) this.currentSorter.direction *= -1;
-      this.currentSorter.id = header.id;
+      switch (this.filterType) {
+        case 'vehicles-all':
+          return true;
+        case 'vehicles-traction':
+          return isTractionUnit(v);
+        case 'vehicles-wagon':
+          return !isTractionUnit(v);
+
+        default:
+          return false;
+      }
    },

-    sortTableRows(row1: IWikiRow, row2: IWikiRow) {
-      if (!row1.show) return 0;
+    sortVehicles(v1: IVehicle, v2: IVehicle) {
+      const direction = this.sorterDirection == 'asc' ? 1 : -1;

-      const { id, direction } = this.currentSorter;
-
-      switch (id) {
+      switch (this.sorterType) {
        case 'type':
-        case 'constructionType':
        case 'group':
-          return direction == 1 ? row1.vehicle[id].localeCompare(row2.vehicle[id]) : row2.vehicle[id].localeCompare(row1.vehicle[id]);
+          return direction * v1[this.sorterType].localeCompare(v2[this.sorterType]);

        case 'weight':
        case 'length':
        case 'maxSpeed':
-          return Math.sign(row1.vehicle[id] - row2.vehicle[id]) * direction;
+          return Math.sign(v1[this.sorterType] - v2[this.sorterType]) * direction;

-        case 'cargoCount':
-          return (
-            (!isLocomotive(row1.vehicle) ? Math.sign(row1.vehicle.cargoTypes.length || -1) : -1) -
-            (!isLocomotive(row2.vehicle) ? (row2.vehicle.cargoTypes.length || -1) * direction : -1)
-          );
+        // case 'cargoCount':
+        //   return (
+        //     Math.sign(
+        //       (!isTractionUnit(v1) ? v1.cargoTypes.length || -1 : -1) -
+        //         (!isTractionUnit(row2.vehicle) ? row2.vehicle.cargoTypes.length || -1 : -1)
+        //     ) * direction
+        //   );

-        case 'coldStart':
-          return (
-            ((isLocomotive(row1.vehicle) && row1.vehicle.coldStart ? 1 : -1) - (isLocomotive(row2.vehicle) && row2.vehicle.coldStart ? 1 : -1)) *
-            direction
-          );
+        // case 'coldStart':
+        //   return (
+        //     ((isTractionUnit(v1) && v1.coldStart ? 1 : -1) -
+        //       (isTractionUnit(row2.vehicle) && row2.vehicle.coldStart ? 1 : -1)) *
+        //     direction
+        //   );

        default:
-          break;
+          return v1.type.localeCompare(v2.type) * direction;
      }
-
-      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';
+    computedVehicles() {
+      return this.store.vehicleDataList.filter(this.filterVehicles).sort(this.sortVehicles);
    },
  },
 });
@@ -231,91 +212,84 @@ export default defineComponent({
 <style lang="scss" scoped>
@import '../../styles/tab.scss';

-.actions-panel {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+.actions {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));

  flex-wrap: wrap;
  gap: 0.5em;
-
-  margin: 0.5em 0;
 }

-.actions-panel_vehicles {
+.actions > label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+
+  span {
+    color: #ccc;
+  }
+}
+
+.vehicles {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 0.5em;
+  overflow: auto;
+
+  max-height: 730px;
+
+  margin-top: 0.75em;
+  padding: 0.25em;
+}
+
+.vehicles > li {
  display: flex;
  gap: 0.5em;
-}

-.actions-panel_search {
-  input {
-    width: auto;
+  background-color: #161c2e;
+  padding: 0.5em;
+
+  min-height: 75px;
+  cursor: pointer;
+
+  &[data-preview='true'] {
+    background-color: #435288;
+  }
+
+  & > span {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    overflow: hidden;
  }
 }

-.table-wrapper {
-  overflow: auto;
-  height: 750px;
-  max-height: 95vh;
+.vehicle-name {
+  overflow: hidden;
+  text-wrap: nowrap;
+  text-overflow: ellipsis;
 }

-.wiki-list table {
-  border-collapse: collapse;
-  width: 100%;
+.sponsor-only {
+  color: $sponsorColor;

-  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;
-    padding: 0.25em;
-
-    &[data-sponsoronly='true'] {
-      color: salmon;
-    }
+  &::after {
+    content: '*';
  }
 }

-@media screen and (max-width: $breakpointMd) {
-  .wiki-list table {
-    th {
-      min-width: 100px;
-    }
+.team-only {
+  color: $teamColor;

-    img {
-      max-width: 100px;
-    }
+  &::after {
+    content: '*';
  }
 }

+.vehicle-props {
+  color: #ccc;
+}
+
@media screen and (max-width: $breakpointSm) {
  .actions-panel {
    align-items: stretch;
@@ -10,8 +10,8 @@
 </template>

 <script lang="ts">
-import { defineComponent } from "vue";
-import { useStore } from "../../store";
+import { defineComponent } from 'vue';
+import { useStore } from '../../store';

 export default defineComponent({
  data() {
@@ -5,7 +5,10 @@
      v-for="(stock, stockIndex) in store.stockList"
      :key="stockIndex"
      :data-selected="store.chosenStockListIndex == stockIndex"
-      :data-sponsor="stock.isSponsorsOnly"
+      :data-sponsor-only="
+        stock.vehicleRef.sponsorOnlyTimestamp && stock.vehicleRef.sponsorOnlyTimestamp > Date.now()
+      "
+      :data-team-only="stock.vehicleRef.teamOnly"
      draggable="true"
      @dragstart="onDragStart(stockIndex)"
      @drop="onDrop($event, stockIndex)"
@@ -13,14 +16,14 @@
      @click="onListItemClick(stockIndex)"
    >
      <b>
-        {{ stock.type }}
+        {{ stock.vehicleRef.type }}
      </b>

      <img
        draggable="false"
-        :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stock.type}.png`"
-        :alt="stock.type"
-        :title="stock.type"
+        :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stock.vehicleRef.type}.png`"
+        :alt="stock.vehicleRef.type"
+        :title="stock.vehicleRef.type"
        @error="stockImageError($event, stock)"
      />
    </div>
@@ -28,22 +31,22 @@
 </template>

 <script setup lang="ts">
-import { Ref, computed, nextTick, ref, watch } from "vue";
-import { useStore } from "../../store";
-import { IStock } from "../../types";
+import { Ref, computed, nextTick, ref, watch } from 'vue';
+import { useStore } from '../../store';
+import { IStock } from '../../types';

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

 const thumbnailsRef = ref() as Ref<HTMLElement>;
 const draggedIndex = ref(-1);

 const onListItemClick = (index: number) => {
-  emit("listItemClick", index);
+  emit('listItemClick', index);
 };

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

 watch(
@@ -55,12 +58,12 @@ watch(
      (thumbnailsRef.value as HTMLElement)
        .querySelector(`div:nth-child(${index + 1})`)
        ?.scrollIntoView({
-          block: "nearest",
-          inline: "start",
-          behavior: "smooth",
+          block: 'nearest',
+          inline: 'start',
+          behavior: 'smooth',
        });
    });
-  },
+  }
 );

 // Dragging images
@@ -71,9 +74,7 @@ const onDragStart = (vehicleIndex: number) => {
 const onDrop = (e: DragEvent, vehicleIndex: number) => {
  e.preventDefault();

-  let targetEl = thumbnailsRef.value.querySelector(
-    `div:nth-child(${vehicleIndex + 1})`,
-  );
+  let targetEl = thumbnailsRef.value.querySelector(`div:nth-child(${vehicleIndex + 1})`);

  if (!targetEl && draggedIndex.value != -1) return;

@@ -90,10 +91,13 @@ const allowDrop = (e: DragEvent) => {
 </script>

 <style lang="scss" scoped>
+@import '../../styles/global.scss';
+
 .stock-thumbnails {
  display: flex;
  overflow: auto;
  background-color: #353a57;
+  min-height: 100px;
 }

 .thumbnail-item {
@@ -114,7 +118,7 @@ const allowDrop = (e: DragEvent) => {
  -moz-user-select: none;
  -webkit-user-select: none;

-  &[data-selected="true"] {
+  &[data-selected='true'] {
    background-color: rebeccapurple;
  }

@@ -123,8 +127,12 @@ const allowDrop = (e: DragEvent) => {
    margin: 0 1em;
  }

-  &[data-sponsor="true"] > b {
-    color: salmon;
+  &[data-sponsor-only='true'] > b {
+    color: $sponsorColor;
+  }
+
+  &[data-team-only='true'] > b {
+    color: $teamColor;
  }

  img {
@@ -12,7 +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 (1)": [10, 11, 19, 91, 93, 97, 99],
    "Lublin (2)": [20, 22, 29],
@@ -26,6 +27,8 @@
  },
  "categoriesRules": {
    "EI": [null, "00", "99"],
+    "EC": [null, "001", "049"],
+    "EN": [null, "001", "049"],
    "MP": [null, "050", "169"],
    "RO": [null, "200", "999"],
    "RP": [null, "050", "169"],
@@ -1,9 +0,0 @@
-export const enum EVehicleUseType {
-  LOCO_ELECTRICAL = "loco-e",
-  LOCO_DIESEL = "loco-s",
-  EMU = "loco-ezt",
-  DMU = "loco-szt",
-
-  CAR_PASSENGER = "car-passenger",
-  CAR_CARGO = "car-cargo",
-}
@@ -1,10 +1,10 @@
-import axios from "axios";
+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",
+    import.meta.env.VITE_API_DEV === '1' && import.meta.env.DEV
+      ? 'http://localhost:3001'
+      : 'https://stacjownik.spythere.eu',
 });

 export default http;
@@ -1,10 +1,9 @@
-import localePL from "./locales/pl.json";
-import localeEN from "./locales/en.json";
-import { createI18n } from "vue-i18n";
-import http from "./http";
+import localePL from './locales/pl.json';
+import localeEN from './locales/en.json';
+import { createI18n } from 'vue-i18n';

 type LocaleMessageSchema = typeof localePL;
-type LocaleKey = "en" | "pl";
+type LocaleKey = 'en' | 'pl';

 const locales: { [key in LocaleKey]: LocaleMessageSchema } = {
  en: localeEN,
@@ -12,24 +11,14 @@ const locales: { [key in LocaleKey]: LocaleMessageSchema } = {
 };

 const locale =
-  window.localStorage.getItem("locale") ||
-  (/^pl\b/.test(navigator.language) ? "pl" : "en");
+  window.localStorage.getItem('locale') || (/^pl\b/.test(navigator.language) ? 'pl' : 'en');

-const i18n = createI18n<[LocaleMessageSchema], "en" | "pl">({
+const i18n = createI18n<[LocaleMessageSchema], 'en' | 'pl'>({
  locale,
-  fallbackLocale: "pl",
+  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;
@@ -15,12 +15,12 @@
    "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",
+    "loco-electric": "ELECTR.",
+    "loco-diesel": "DIESEL",
+    "unit-electric": "EMU",
+    "unit-diesel": "DMU",
+    "wagon-passenger": "PASSENGER",
+    "wagon-freight": "FREIGHT",
    "action-add": "ADD NEW",
    "action-swap": "SWAP WITH",
    "real-stock": "POLISH TRAIN COMPOSITIONS"
@@ -30,12 +30,13 @@
    "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",
+    "team-only": "* TD2 TEAM ONLY",
+    "loco-electric": "ELECTRIC LOCO",
+    "loco-diesel": "DIESEL LOCO",
+    "unit-electric": "ELECTRIC M.U.",
+    "unit-diesel": "DIESEL M.U.",
+    "wagon-passenger": "PASSENGER CARRIAGE",
+    "wagon-freight": "FREIGHT CARRIAGE",
    "cabin": "Cabin type:",
    "construction": "Construction type:"
  },
@@ -47,6 +48,7 @@
  },
  "stocklist": {
    "title": "STOCK EDITOR",
+    "disclaimer": "Theorethical value based on vehicles maximum speed in the current composition. It may be inaccurate in relation to the correct operational speed in certain configurations.",
    "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):",
@@ -67,11 +69,13 @@
    "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-not-suitable": "EP series 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}",
+    "warning-team-only-vehicle": "There's at least one vehicle available only for TD2 team members in your stock composition! ({0})",
    "acceptable-mass-docs": "acceptable rolling stock masses (PL)"
  },
  "stockgen": {
@@ -144,7 +148,7 @@
      "TD": "TD - domestic freight (intermodal)",
      "TM": "TM - domestic freight (cargo)",
      "TN": "TN - domestic freight (no cargo)",
-      "TK": "TK - freight (stations & sidings service)",
+      "TK": "TK - freight (stations & sidings)",
      "TS": "TS - empty freight test drive",

      "LT": "LT - locomotive only",
@@ -158,26 +162,37 @@
  },
  "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",
-      "weight": "Mass",
-      "maxSpeed": "Speed",
-      "cargoCount": "Cargo count"
+    "labels": {
+      "vehicles": "Vehicles",
+      "sort-by": "Sort by",
+      "sort-direction": "Sort direction",
+      "search-vehicle": "Find a vehicle",
+      "search-vehicle-placeholder": "Input a vehicle name"
    },
-    "loco-ezt": "EMU",
-    "loco-szt": "DMU",
-    "loco-s": "Diesel locomotive",
-    "loco-e": "Electric locomotive",
-    "car-passenger": "Passenger carriage",
-    "car-cargo": "Frieght carriage"
+    "filters": {
+      "vehicles-all": "all",
+      "vehicles-traction": "traction units",
+      "vehicles-wagon": "wagons"
+    },
+    "sort-by": {
+      "type": "name",
+      "group": "type group",
+      "length": "length",
+      "weight": "mass",
+      "maxSpeed": "speed",
+      "coldStart": "cold start",
+      "cargoCount": "cargo count"
+    },
+    "sort-direction": {
+      "asc": "ascending",
+      "desc": "descending"
+    },
+    "unit-electric": "EMU",
+    "unit-diesel": "DMU",
+    "loco-diesel": "Diesel locomotive",
+    "loco-electric": "Electric locomotive",
+    "wagon-passenger": "Passenger carriage",
+    "wagon-freight": "Frieght carriage"
  },
  "realstock": {
    "title": "POLISH TRAIN COMPOSITIONS by",
@@ -9,18 +9,18 @@
    "version-check": "Strona jest kompletna dla wersji {version} symulatora TD2"
  },
  "inputs": {
-    "title": "WYBIERZ POJAZD SZYNOWY",
+    "title": "WYBIERZ POJAZD",
    "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",
+    "loco-electric": "ELEKTR.",
+    "loco-diesel": "SPAL.",
+    "unit-electric": "EZT",
+    "unit-diesel": "SZT",
+    "wagon-passenger": "PASAŻERSKIE",
+    "wagon-freight": "TOWAROWE",
    "action-add": "DODAJ NOWY",
    "action-swap": "ZAMIEŃ ZA",
    "real-stock": "REALNE ZESTAWIENIA"
@@ -30,12 +30,13 @@
    "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",
+    "team-only": "* TYLKO DLA ZESPOŁU TD2",
+    "loco-electric": "ELEKTROWÓZ",
+    "loco-diesel": "SPALINOWÓZ",
+    "unit-electric": "EZT",
+    "unit-diesel": "SZT",
+    "wagon-passenger": "WAGON PASAŻERSKI",
+    "wagon-freight": "WAGON TOWAROWY",
    "cabin": "Typ kabiny:",
    "construction": "Typ konstrukcji:"
  },
@@ -47,6 +48,7 @@
  },
  "stocklist": {
    "title": "EDYTOR SKŁADU",
+    "disclaimer": "Wartość poglądowa wzorowana na prędkościach maksymalnych poszczególnych pojazdów w zestawieniu. Może nie zgadzać się z prawdziwymi prędkościami eksploatacyjnymi w konkretnych konfiguracjach.",
    "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):",
@@ -67,11 +69,13 @@
    "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-not-suitable": "Lokomotywy serii EP 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}",
+    "warning-team-only-vehicle": "W zestawieniu znajduje się co najmniej jeden pojazd dostępny tylko dla członków zespołu TD2! ({0})",
    "acceptable-mass-docs": "dopuszczalne masy składów"
  },
  "stockgen": {
@@ -94,8 +98,8 @@
    "title": "GENERATOR NUMERU POCIĄGU",
    "subtitle": "Generuje realny numer pociągu na podstawie instrukcji Ir-11",
    "alert": "Numer został skopiowany do twojego schowka!",
-    "start-region": "Początkowy obszar konstrukcyjny",
-    "end-region": "Końcowy obszar konstrukcyjny",
+    "start-region": "Obszar początkowy",
+    "end-region": "Obszar końcowy",
    "train-category": "Kategoria pociągu",
    "number-info": "Wygenerowany numer pociągu:",
    "warning": "Wybierz kategorię oraz (opcjonalnie) obszary konstrukcyjne",
@@ -125,17 +129,17 @@
      "EC": "EC - ekspres międzynarodowy",
      "EN": "EN - ekspres krajowy nocny",

-      "MP": "MP - międzywojewódzki pośpieszny",
+      "MP": "MP - międzywoj. pośpieszny",
      "RP": "RP - wojewódzki pośpieszny",
-      "MO": "MO - międzywojewódzki osobowy",
+      "MO": "MO - międzywoj. osobowy",
      "RO": "RO - wojewódzki osobowy",

-      "MM": "MM - międzynarodowy pośpieszny",
-      "MH": "MH - międzywoj. pośpieszny nocny / hotelowy",
-      "RM": "RM - wojewódzki osobowy międzynarodowy",
-      "RA": "RA - wojewódzki osobowy algomeracyjny",
+      "MM": "MM - międzynar. pośpieszny",
+      "MH": "MH - międzywoj. pośpieszny hotelowy",
+      "RM": "RM - woj. osobowy międzynarodowy",
+      "RA": "RA - woj. osobowy algomeracyjny",

-      "PW": "PW - pasażerski próżny (\"służbowy\")",
+      "PW": "PW - pasażerski próżny - służbowy",
      "PX": "PX - pasażerski próżny próbny",

      "TC": "TC - towarowy międzynarodowy intermodalny",
@@ -144,7 +148,7 @@
      "TD": "TD - towarowy krajowy intermodalny",
      "TM": "TM - towarowy krajowy masowy",
      "TN": "TN - towarowy krajowy niemasowy",
-      "TK": "TK - towarowy do obsługi stacji i bocznic",
+      "TK": "TK - towarowy (stacje i bocznice)",
      "TS": "TS - towarowy próżny próbny",

      "LT": "LT - lokomotywa luzem",
@@ -158,26 +162,37 @@
  },
  "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ść",
-      "weight": "Masa",
-      "maxSpeed": "Prędkość",
-      "cargoCount": "Ładunki"
+    "labels": {
+      "vehicles": "Pojazdy",
+      "sort-by": "Sortuj wg",
+      "sort-direction": "Kierunek sortowania",
+      "search-vehicle": "Wyszukaj pojazd",
+      "search-vehicle-placeholder": "Wpisz nazwę pojazdu"
    },
-    "loco-ezt": "EZT",
-    "loco-szt": "SZT",
-    "loco-s": "Spalinowóz",
-    "loco-e": "Elektrowóz",
-    "car-passenger": "Wagon pasażerski",
-    "car-cargo": "Wagon towarowy"
+    "filters": {
+      "vehicles-all": "wszystkie",
+      "vehicles-traction": "trakcyjne",
+      "vehicles-wagon": "wagony"
+    },
+    "sort-by": {
+      "type": "nazwa",
+      "group": "rodzaj",
+      "length": "długość",
+      "weight": "masa",
+      "maxSpeed": "prędkość",
+      "coldStart": "zimny start",
+      "cargoCount": "ładunki"
+    },
+    "sort-direction": {
+      "asc": "rosnąco",
+      "desc": "malejąco"
+    },
+    "loco-diesel": "Spalinowóz",
+    "loco-electric": "Elektrowóz",
+    "unit-electric": "EZT",
+    "unit-diesel": "SZT",
+    "wagon-passenger": "Wagon pasażerski",
+    "wagon-freight": "Wagon towarowy"
  },
  "realstock": {
    "title": "ZESTAWIENIA REALNE by",
@@ -1,8 +1,8 @@
-import { createApp } from "vue";
-import { createPinia } from "pinia";
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';

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

-createApp(App).use(pinia).use(i18n).mount("#app");
+createApp(App).use(pinia).use(i18n).mount('#app');
@@ -1,17 +1,13 @@
-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`;
+    getThumbnailURL(vehicleType: string, size: 'small' | 'large') {
+      return `https://static.spythere.eu/images/${vehicleType}--${size == 'small' ? 300 : 800}px.jpg`;
    },
  },
 });
@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue';
 import { useStore } from '../store';
-import { ICarWagon, ILocomotive, IStock, ICargo, Vehicle } from '../types';
-import { isLocomotive } from '../utils/vehicleUtils';
+import { ICarWagon, ILocomotive, IStock, ICargo, IVehicle } from '../types';
+import { isTractionUnit } from '../utils/vehicleUtils';

 export default defineComponent({
  setup() {
@@ -15,39 +15,33 @@ export default defineComponent({
      return `${Math.random().toString(36).slice(5)}`;
    },

-    getStockObject(vehicle: Vehicle, cargo?: ICargo | null, count = 1): IStock {
-      const isLoco = isLocomotive(vehicle);
-
+    getStockObject(vehicle: IVehicle, cargo?: ICargo | null): IStock {
      return {
        id: this.getStockId(),
-        type: vehicle.type,
-        length: vehicle.length,
-        weight: vehicle.weight,
-        maxSpeed: vehicle.maxSpeed,
-        isLoco,
-        cargo: !isLoco && vehicle.loadable && cargo ? cargo : undefined,
-        count,
-        imgSrc: vehicle.imageSrc,
-        useType: isLoco ? vehicle.power : vehicle.useType,
-        isSponsorsOnly: vehicle.isSponsorsOnly,
-        constructionType: vehicle.constructionType,
-        sponsorsOnlyTimestamp: vehicle.sponsorsOnlyTimestamp,
+        vehicleRef: vehicle,
+        cargo: !isTractionUnit(vehicle) && vehicle.loadable && cargo ? cargo : undefined,
      };
    },

-    addVehicle(vehicle: Vehicle | null, cargo?: ICargo | null) {
+    addVehicle(vehicle: IVehicle | null, cargo?: ICargo | null) {
      if (!vehicle) return;

      const stock = this.getStockObject(vehicle, cargo);

-      if (stock.isLoco && !this.store.stockList[0]?.isLoco) this.store.stockList.unshift(stock);
+      if (
+        isTractionUnit(stock.vehicleRef) &&
+        this.store.stockList.length > 0 &&
+        !isTractionUnit(this.store.stockList[0].vehicleRef)
+      )
+        this.store.stockList.unshift(stock);
      else this.store.stockList.push(stock);
    },

    addLocomotive(loco: ILocomotive) {
      const stockObj = this.getStockObject(loco);

-      if (this.store.stockList.length > 0 && !this.store.stockList[0].isLoco) this.store.stockList.unshift(stockObj);
+      if (this.store.stockList.length > 0 && !isTractionUnit(this.store.stockList[0].vehicleRef))
+        this.store.stockList.unshift(stockObj);
      else this.store.stockList.push(stockObj);
    },

@@ -70,12 +64,14 @@ export default defineComponent({
      this.store.swapVehicles = false;

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

-        const isLoco = /^(EU|EP|ET|SM|EN|2EN|SN)/.test(type);
+        const isTractionUnit = /^([a-zA-Z\d]{0,}-\d{0,})/.test(type);

-        if (isLoco) {
+        console.log(type, isTractionUnit);
+
+        if (isTractionUnit) {
          const [locoType, spawnProps] = type.split(',');
          vehicle = this.store.locoDataList.find((loco) => loco.type == locoType) || null;

@@ -91,7 +87,7 @@ export default defineComponent({
          if (cargo) vehicleCargo = vehicle?.cargoTypes.find((c) => c.id == cargo) || null;
        }

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

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

 export default defineComponent({
  setup() {
@@ -14,40 +14,37 @@ export default defineComponent({

  methods: {
    previewStock(stock: IStock) {
-      if (this.store.chosenVehicle?.imageSrc != stock.imgSrc) this.store.imageLoading = true;
+      const vehicleRef = stock.vehicleRef;

-      if (stock.isLoco) {
-        const chosenLoco = this.store.locoDataList.find((v) => v.type == stock.type) || null;
-        this.store.chosenVehicle = chosenLoco;
-        this.store.chosenLoco = chosenLoco;
+      this.store.chosenVehicle = vehicleRef;
+
+      if (isTractionUnit(vehicleRef)) {
+        this.store.chosenLoco = vehicleRef;
        this.store.chosenCargo = null;
-        this.store.chosenLocoPower = stock.useType;
+        this.store.chosenLocoGroup = vehicleRef.group as LocoGroupType;
      } else {
-        const chosenCar = this.store.carDataList.find((v) => v.type == stock.type) || null;
-        this.store.chosenVehicle = chosenCar;
-        this.store.chosenCar = chosenCar;
-
+        this.store.chosenCar = vehicleRef;
        this.store.chosenCargo = stock.cargo || null;
-        this.store.chosenCarUseType = stock.useType;
+        this.store.chosenCarGroup = vehicleRef.group as WagonGroupType;
      }
    },

    previewLocomotive(loco: ILocomotive) {
      this.store.chosenLoco = loco;
      this.store.chosenVehicle = loco;
-      this.store.chosenLocoPower = loco.power;
+      this.store.chosenLocoGroup = loco.group;
    },

    previewCarWagon(carWagon: ICarWagon) {
      this.store.chosenCar = carWagon;
-      this.store.chosenCarUseType = carWagon.useType;
+      this.store.chosenCarGroup = carWagon.group;
      this.store.chosenVehicle = carWagon;

      this.store.chosenCargo = null;
    },

-    previewVehicle(vehicle: Vehicle) {
-      if (isLocomotive(vehicle)) this.previewLocomotive(vehicle);
+    previewVehicle(vehicle: IVehicle) {
+      if (isTractionUnit(vehicle)) this.previewLocomotive(vehicle);
      else this.previewCarWagon(vehicle);
    },

@@ -1,39 +0,0 @@
-import { defineComponent } from 'vue';
-import { useStore } from '../store';
-
-export default defineComponent({
-  setup() {
-    const store = useStore();
-
-    return {
-      store,
-    };
-  },
-  computed: {
-    trainTooLong() {
-      return (this.store.totalLength > 350 && this.store.isTrainPassenger) || (this.store.totalLength > 650 && !this.store.isTrainPassenger);
-    },
-
-    trainTooHeavy() {
-      return this.store.acceptableWeight && this.store.totalWeight > this.store.acceptableWeight;
-    },
-
-    locoNotSuitable() {
-      return (
-        !this.store.isTrainPassenger &&
-        this.store.stockList.length > 1 &&
-        !this.store.stockList.every((stock) => stock.isLoco) &&
-        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
-      );
-    },
-  },
-});
@@ -1,91 +1,147 @@
-import { IStockData, IStore } from './types';
+import {
+  IVehiclesData,
+  ICarWagon,
+  ILocomotive,
+  ICargo,
+  IVehicle,
+  IStock,
+  IRealComposition,
+  LocoGroupType,
+  WagonGroupType,
+} from './types';
 import { defineStore } from 'pinia';
 import {
-  acceptableMass as acceptableWeight,
+  acceptableWeight,
  carDataList,
-  chosenRealStock,
+  isTractionUnit,
  isTrainPassenger,
  locoDataList,
  maxStockSpeed,
  totalLength,
  totalWeight,
 } from './utils/vehicleUtils';
+
+import i18n from './i18n-setup';
 import http from './http';

 export const useStore = defineStore({
  id: 'store',
-  state: () =>
-    ({
-      chosenCar: null,
-      chosenLoco: null,
-      chosenCargo: null,
-      chosenVehicle: null,
+  state: () => ({
+    chosenCar: null as ICarWagon | null,
+    chosenLoco: null as ILocomotive | null,
+    chosenCargo: null as ICargo | null,
+    chosenVehicle: null as IVehicle | null,

-      isColdStart: false,
-      isDoubleManned: false,
+    isColdStart: false,
+    isDoubleManned: false,

-      showSupporter: false,
-      imageLoading: false,
+    chosenLocoGroup: 'loco-electric' as LocoGroupType,
+    chosenCarGroup: 'wagon-passenger' as WagonGroupType,

-      chosenLocoPower: 'loco-e',
-      chosenCarUseType: 'car-passenger',
+    stockList: [] as IStock[],
+    cargoOptions: [] as any[][],

-      stockList: [],
-      cargoOptions: [],
+    swapVehicles: false,

-      readyStockList: [],
+    chosenStockListIndex: -1,

-      swapVehicles: false,
+    vehiclePreviewSrc: '',

-      chosenStockListIndex: -1,
-      chosenRealStockName: undefined,
+    stockSectionMode: 'stock-list',

-      vehiclePreviewSrc: '',
+    isRandomizerCardOpen: false,
+    isRealStockListCardOpen: false,

-      stockSectionMode: 'stock-list',
+    vehiclesData: undefined as IVehiclesData | undefined,

-      isRandomizerCardOpen: false,
-      isRealStockListCardOpen: false,
-
-      stockData: undefined,
-
-      lastFocusedElement: null,
-    }) as IStore,
+    lastFocusedElement: null as HTMLElement | null,
+  }),

  getters: {
-    locoDataList: (state) => locoDataList(state),
-    carDataList: (state) => carDataList(state),
-    vehicleDataList: (state) => [...locoDataList(state), ...carDataList(state)],
-    totalWeight: (state) => totalWeight(state),
-    totalLength: (state) => totalLength(state),
-    maxStockSpeed: (state) => maxStockSpeed(state),
-    isTrainPassenger: (state) => isTrainPassenger(state),
-    chosenRealStock: (state) => chosenRealStock(state),
-    acceptableWeight: (state) => acceptableWeight(state),
+    locoDataList: (state) => locoDataList(state.vehiclesData),
+    carDataList: (state) => carDataList(state.vehiclesData),
+    vehicleDataList: (state) => [
+      ...locoDataList(state.vehiclesData),
+      ...carDataList(state.vehiclesData),
+    ],
+    totalWeight: (state) => totalWeight(state.stockList),
+    totalLength: (state) => totalLength(state.stockList),
+    maxStockSpeed: (state) => maxStockSpeed(state.stockList),
+    isTrainPassenger: (state) => isTrainPassenger(state.stockList),
+    acceptableWeight: (state) => acceptableWeight(state.stockList),
+
+    realCompositionList: (state) => {
+      if (!state.vehiclesData) return [];
+
+      return Object.keys(state.vehiclesData.realCompositions).reduce<IRealComposition[]>(
+        (acc, key) => {
+          const [type, number, ...name] = key.split(' ');
+
+          const obj = {
+            number: number.replace(/_/g, '/'),
+            name: name.join(' '),
+            stockString: state.vehiclesData!.realCompositions[key],
+            type,
+          };
+
+          acc.push({
+            stockId: `${obj.type} ${obj.number} ${obj.name}`,
+            ...obj,
+          });
+
+          return acc;
+        },
+        []
+      );
+    },

    stockSupportsColdStart: (state) => {
      if (state.stockList.length == 0) return false;
-      if (!state.stockList[0].isLoco) return false;
+      if (!isTractionUnit(state.stockList[0].vehicleRef)) return false;

      const headingLoco = state.stockList[0];

-      return state.stockData?.props.find((stock) => stock.type == headingLoco.constructionType)?.coldStart ?? false;
+      return (
+        state.vehiclesData?.vehicleProps.find(
+          (stock) => stock.type == headingLoco.vehicleRef.constructionType
+        )?.coldStart ?? false
+      );
    },

    stockSupportsDoubleManning: (state) => {
      if (state.stockList.length == 0) return false;
-      if (!state.stockList[0].isLoco) return false;
+      if (!isTractionUnit(state.stockList[0].vehicleRef)) return false;

      const headingLoco = state.stockList[0];

-      return state.stockData?.props.find((stock) => stock.type == headingLoco.constructionType)?.doubleManned ?? false;
+      return (
+        state.vehiclesData?.vehicleProps.find(
+          (stock) => stock.type == headingLoco.vehicleRef.constructionType
+        )?.doubleManned ?? false
+      );
    },
  },

  actions: {
-    async fetchStockInfoData() {
-      const stockData = (await http.get<IStockData>('td2/data/stockInfo.json')).data;
-      this.stockData = stockData;
+    async fetchVehiclesAPI() {
+      try {
+        const vehiclesData = (await http.get<IVehiclesData>('/vehicles')).data;
+        this.vehiclesData = vehiclesData;
+      } catch (error) {
+        console.error(error);
+      }
+    },
+
+    async setupAPIData() {
+      await this.fetchVehiclesAPI();
+      this.mergeBackendTranslations();
+    },
+
+    async mergeBackendTranslations() {
+      if (!this.vehiclesData) return;
+
+      i18n.global.mergeLocaleMessage('pl', this.vehiclesData.vehicleLocales.pl);
+      i18n.global.mergeLocaleMessage('en', this.vehiclesData.vehicleLocales.en);
    },

    handleRouting() {
@@ -6,31 +6,34 @@ $textColor: #fff;
 $secondaryColor: #1b1b1b;
 $accentColor: #e4c428;

+$sponsorColor: gold;
+$teamColor: #ff4848;
+
@font-face {
-  font-family: "Lato";
+  font-family: 'Lato';
  src:
-    url("/fonts/Lato-Light.woff2") format("woff2"),
-    url("/fonts/Lato-Light.woff") format("woff");
+    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";
+  font-family: 'Lato';
  src:
-    url("/fonts/Lato-Bold.woff2") format("woff2"),
-    url("/fonts/Lato-Bold.woff") format("woff");
+    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";
+  font-family: 'Lato';
  src:
-    url("/fonts/Lato-Regular.woff2") format("woff2"),
-    url("/fonts/Lato-Regular.woff") format("woff");
+    url('/fonts/Lato-Regular.woff2') format('woff2'),
+    url('/fonts/Lato-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
@@ -114,6 +117,23 @@ button {
  }
 }

+[data-tooltip]:hover::after,
+[data-tooltip]:focus::after {
+  position: absolute;
+  transform: translateX(10px);
+
+  content: attr(data-tooltip);
+  color: white;
+  background: black;
+  padding: 0.5em;
+  max-width: 300px;
+  z-index: 100;
+}
+
+[data-tooltip] {
+  cursor: pointer;
+}
+
 .btn {
  padding: 0.4em 0.75em;

@@ -141,14 +161,14 @@ button {
    outline: 1px solid white;
  }

-  &[data-chosen="true"] {
+  &[data-chosen='true'] {
    background-color: $accentColor;
    color: black;

    box-shadow: 0 0 5px 1px $accentColor;
  }

-  &[data-disabled="true"] {
+  &[data-disabled='true'] {
    user-select: none;
    pointer-events: none;
    -moz-user-select: none;
@@ -183,19 +203,18 @@ button {
 }

 select,
-input[type="text"],
-input[type="number"] {
+input[type='text'],
+input[type='number'] {
  background: $bgColor;
  border: 2px solid #aaa;
  outline: none;

  padding: 0.25em 0.35em;
+  height: 100%;

  color: white;
  font-size: 1em;

-  width: 18em;
-
  &:focus-visible {
    border-color: $accentColor;
  }
@@ -1,4 +1,4 @@
-@import "./global.scss";
+@import './global.scss';

 .tab {
  height: 100%;
@@ -1,50 +1,17 @@
-export type Vehicle = ILocomotive | ICarWagon;
+export type IVehicle = ILocomotive | ICarWagon;
 export type StockSectionMode = 'STOCK_LIST' | 'STOCK_GENERATOR';

-export interface IStore {
-  chosenCar: ICarWagon | null;
-  chosenLoco: ILocomotive | null;
-  chosenCargo: ICargo | null;
-  chosenVehicle: Vehicle | null;
+export type LocoGroupType = 'loco-electric' | 'loco-diesel' | 'unit-electric' | 'unit-diesel';
+export type WagonGroupType = 'wagon-passenger' | 'wagon-freight';
+export type VehicleGroupType = LocoGroupType | WagonGroupType;
+export type RestrictionType = 'sponsorOnly' | 'teamOnly';

-  isColdStart: boolean;
-  isDoubleManned: boolean;
-
-  showSupporter: boolean;
-  imageLoading: boolean;
-
-  chosenLocoPower: string;
-  chosenCarUseType: string;
-
-  stockList: IStock[];
-  readyStockList: IReadyStockItem[];
-  cargoOptions: any[][];
-
-  chosenStockListIndex: number;
-  chosenRealStockName?: string;
-
-  swapVehicles: boolean;
-  vehiclePreviewSrc: string;
-
-  isRandomizerCardOpen: boolean;
-  isRealStockListCardOpen: boolean;
-
-  stockSectionMode: 'stock-list' | 'stock-generator' | 'number-generator' | 'wiki-list';
-  stockData?: IStockData;
-
-  lastFocusedElement: HTMLElement | null;
-}
-
-export type TLocoGroup = 'loco-e' | 'loco-s' | 'loco-ezt' | 'loco-szt';
-export type TCarWagonGroup = 'car-passenger' | 'car-cargo';
-
-export interface IStockProps {
+export interface IVehicleProps {
  type: string;
+  speed: number;
  length: number;
-  // mass: number;
  weight: number;
-  // cargo?: string | null;
-  cargoTypes: ICargo[] | null;
+  cargoTypes?: ICargo[];
  coldStart?: boolean;
  doubleManned?: boolean;
 }
@@ -54,77 +21,67 @@ export interface ICargo {
  weight: number;
 }

-export interface IStockData {
-  version: string;
+export interface IVehiclesData {
+  simulatorVersion: string;

  generator: {
-    passenger: any;
    cargo: {
      [key: string]: string[];
    };
  };

-  info: {
-    '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][];
+  vehicleList: any[][];
+
+  vehicleProps: IVehicleProps[];
+
+  vehicleLocales: {
+    pl: {
+      cargo: Record<string, string>;
+      usage: Record<string, string>;
+    };
+    en: {
+      cargo: Record<string, string>;
+      usage: Record<string, string>;
+    };
  };

-  props: IStockProps[];
+  realCompositions: Record<string, string>;
 }

 export interface ILocomotive {
  type: string;
-  power: TLocoGroup;
-  group: TLocoGroup;
+  group: LocoGroupType;
  constructionType: string;
  cabinType: string;
  maxSpeed: number;
-  isSponsorsOnly: boolean;
-  sponsorsOnlyTimestamp: number;
-  imageSrc: string;
  weight: number;
  length: number;
  coldStart: boolean;
  doubleManned: boolean;
+  sponsorOnlyTimestamp: number;
+  teamOnly: boolean;
 }

 export interface ICarWagon {
  type: string;
-  useType: TCarWagonGroup;
-  group: TCarWagonGroup;
+  group: WagonGroupType;
  constructionType: string;
  loadable: boolean;
-  isSponsorsOnly: boolean;
-  sponsorsOnlyTimestamp: number;
  maxSpeed: number;
-  imageSrc: string;
  weight: number;
  length: number;
  cargoTypes: ICargo[];
+  sponsorOnlyTimestamp: number;
+  teamOnly: boolean;
 }

 export interface IStock {
  id: string;
-  type: string;
-  useType: string;
-  constructionType: string;
-  length: number;
-  // mass: number;
-  weight: number;
-  maxSpeed: number;
+  vehicleRef: IVehicle;
  cargo?: ICargo;
-  isLoco: boolean;
-  isSponsorsOnly: boolean;
-  sponsorsOnlyTimestamp: number;
-  count: number;
-  imgSrc?: string;
 }

-export interface IReadyStockItem {
+export interface IRealComposition {
  stockId: string;
  stockString: string;
  type: string;
@@ -4,7 +4,12 @@ import massLimits from '../constants/massLimits.json';
 export type SpeedLimitLocoType = keyof typeof speedLimits;
 export type MassLimitLocoType = keyof typeof massLimits;

-export function calculateSpeedLimit(locoType: SpeedLimitLocoType, stockTotalWeight: number, stockCount: number, isTrainPassenger: boolean) {
+export function calculateSpeedLimit(
+  locoType: SpeedLimitLocoType,
+  stockTotalWeight: number,
+  stockCount: number,
+  isTrainPassenger: boolean
+) {
  if (speedLimits[locoType] === undefined) return 0;

  if (stockCount == 1) return speedLimits[locoType]['none'];
@@ -15,7 +20,8 @@ export function calculateSpeedLimit(locoType: SpeedLimitLocoType, stockTotalWeig
  if (!speedTable) return undefined;

  let speedLimit = 0;
-  for (const mass in speedTable) if (stockTotalWeight > Number(mass)) speedLimit = (speedTable as any)[mass];
+  for (const mass in speedTable)
+    if (stockTotalWeight > Number(mass)) speedLimit = (speedTable as any)[mass];

  return speedLimit;
 }
@@ -1,139 +1,146 @@
-import { EVehicleUseType } from '../enums/EVehicleUseType';
-import { ICarWagon, ILocomotive, IStore, TCarWagonGroup, TLocoGroup } from '../types';
-import { MassLimitLocoType, SpeedLimitLocoType, calculateMassLimit, calculateSpeedLimit } from './vehicleLimitsUtils';
+import {
+  ICarWagon,
+  ILocomotive,
+  IStock,
+  IVehiclesData,
+  LocoGroupType,
+  WagonGroupType,
+} from '../types';
+import {
+  MassLimitLocoType,
+  SpeedLimitLocoType,
+  calculateMassLimit,
+  calculateSpeedLimit,
+} from './vehicleLimitsUtils';

-export function isLocomotive(vehicle: ILocomotive | ICarWagon): vehicle is ILocomotive {
-  return (vehicle as ILocomotive).power !== undefined;
+export function isTractionUnit(vehicle: ILocomotive | ICarWagon): vehicle is ILocomotive {
+  return (vehicle as ILocomotive).cabinType !== undefined;
 }

-export function locoDataList(state: IStore) {
-  if (!state.stockData) return [];
+export function locoDataList(vehiclesData: IVehiclesData | undefined) {
+  if (!vehiclesData) return [];

-  const stockData = state.stockData;
+  return vehiclesData.vehicleList.reduce<ILocomotive[]>((acc, vehicleInfoArray) => {
+    // check if data array has 5 elements (locos & units only)
+    if (vehicleInfoArray.length != 5) return acc;

-  return Object.keys(stockData.info).reduce((acc, vehiclePower) => {
-    if (!vehiclePower.startsWith('loco')) return acc;
+    const [type, constructionType, cabinType, group, restrictions] = vehicleInfoArray;
+    const locoProps = vehiclesData.vehicleProps.find((prop) => constructionType == prop.type);

-    const locoVehiclesData = stockData.info[vehiclePower as TLocoGroup];
+    if (!locoProps) {
+      console.warn('Brak atrybutów dla pojazdu:', type);
+      return acc;
+    }

-    locoVehiclesData.forEach((loco) => {
-      if (state.showSupporter && !loco[4]) return;
+    acc.push({
+      group: group as LocoGroupType,

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

-      acc.push({
-        power: vehiclePower as TLocoGroup,
-        group: vehiclePower as TLocoGroup,
-        type,
-        constructionType,
-        cabinType,
-        maxSpeed: Number(maxSpeed),
-        isSponsorsOnly: Number(sponsorsTimestamp) > Date.now(),
-        sponsorsOnlyTimestamp: Number(sponsorsTimestamp),
-        imageSrc: '',
+      sponsorOnlyTimestamp: restrictions?.sponsorOnly ?? 0,
+      teamOnly: restrictions?.teamOnly ?? false,

-        length: locoProps?.length && type.startsWith('2EN') ? locoProps.length * 2 : locoProps?.length ?? 0,
-        weight: locoProps?.weight && type.startsWith('2EN') ? 253000 : locoProps?.weight ?? 0,
+      maxSpeed: locoProps.speed,
+      length: locoProps.length,
+      weight: locoProps.weight,

-        coldStart: locoProps?.coldStart ?? false,
-        doubleManned: locoProps?.doubleManned ?? false,
-      });
+      coldStart: locoProps.coldStart ?? false,
+      doubleManned: locoProps.doubleManned ?? false,
    });

    return acc;
-  }, [] as ILocomotive[]);
+  }, []);
 }

-export function carDataList(state: IStore) {
-  if (!state.stockData) return [];
+export function carDataList(vehiclesData: IVehiclesData | undefined) {
+  if (!vehiclesData) return [];

-  const stockData = state.stockData;
+  return vehiclesData.vehicleList.reduce<ICarWagon[]>((acc, vehicleInfoArray) => {
+    // check if data array has 4 elements (wagons only)
+    if (vehicleInfoArray.length != 4) return acc;

-  return Object.keys(stockData.info).reduce((acc, vehicleUseType) => {
-    if (!vehicleUseType.startsWith('car')) return acc;
+    const [type, constructionType, group, restrictions] = vehicleInfoArray;
+    const wagonProps = vehiclesData.vehicleProps.find((prop) => constructionType == prop.type);

-    const carVehiclesData = stockData.info[vehicleUseType as TCarWagonGroup];
+    if (!wagonProps) {
+      console.warn('Brak atrybutów dla pojazdu:', type);
+      return acc;
+    }

-    carVehiclesData.forEach((car) => {
-      const [type, constructionType, loadable, sponsorsOnlyTimestamp, maxSpeed] = car;
+    acc.push({
+      group: group as WagonGroupType,
+      type,
+      constructionType,
+      loadable: wagonProps.cargoTypes ? wagonProps.cargoTypes.length > 0 : false,
+      cargoTypes: wagonProps?.cargoTypes ?? [],

-      if (state.showSupporter && Number(sponsorsOnlyTimestamp) <= Date.now()) return;
+      sponsorOnlyTimestamp: restrictions?.sponsorOnly ?? 0,
+      teamOnly: restrictions?.teamOnly ?? false,

-      const carPropsData = stockData.props.find((v) => type.toString().startsWith(v.type));
-
-      acc.push({
-        useType: vehicleUseType as TCarWagonGroup,
-        group: vehicleUseType as TCarWagonGroup,
-        type,
-        constructionType,
-        loadable,
-        isSponsorsOnly: Number(sponsorsOnlyTimestamp) > Date.now(),
-        sponsorsOnlyTimestamp: Number(sponsorsOnlyTimestamp),
-        maxSpeed: Number(maxSpeed),
-        imageSrc: '',
-        cargoTypes: carPropsData?.cargoTypes ?? [],
-
-        weight: carPropsData?.weight || 0,
-        length: carPropsData?.length || 0,
-      });
+      maxSpeed: wagonProps.speed,
+      weight: wagonProps?.weight || 0,
+      length: wagonProps?.length || 0,
    });

    return acc;
-  }, [] as ICarWagon[]);
+  }, []);
 }

-export function totalWeight(state: IStore) {
-  return state.stockList.reduce((acc, stock) => acc + (stock.weight + (stock.cargo?.weight ?? 0)) * stock.count, 0);
+export function totalWeight(stockList: IStock[]) {
+  return stockList.reduce(
+    (acc, stock) => acc + (stock.vehicleRef.weight + (stock.cargo?.weight ?? 0)),
+    0
+  );
 }

-export function totalLength(state: IStore) {
-  return state.stockList.reduce((acc, stock) => acc + stock.length * stock.count, 0);
+export function totalLength(stockList: IStock[]) {
+  return stockList.reduce((acc, stock) => acc + stock.vehicleRef.length, 0);
 }

-export function maxStockSpeed(state: IStore) {
-  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;
+export function maxStockSpeed(stockList: IStock[]) {
+  const stockSpeedLimit = stockList.reduce(
+    (acc, stock) => (stock.vehicleRef.maxSpeed < acc || acc == 0 ? stock.vehicleRef.maxSpeed : acc),
+    0
+  );
+  const headingLoco =
+    stockList[0] && isTractionUnit(stockList[0].vehicleRef) ? stockList[0] : undefined;

  if (!headingLoco) return stockSpeedLimit;

-  const locoType = headingLoco.type.split('-')[0];
+  const locoType = headingLoco.vehicleRef.type.split('-')[0];

  if (/^(EN|2EN|SN)/.test(locoType)) return stockSpeedLimit;

-  const speedLimitByMass = calculateSpeedLimit(locoType as SpeedLimitLocoType, totalWeight(state), state.stockList.length, isTrainPassenger(state));
+  const speedLimitByMass = calculateSpeedLimit(
+    locoType as SpeedLimitLocoType,
+    totalWeight(stockList),
+    stockList.length,
+    isTrainPassenger(stockList)
+  );

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

-export function acceptableMass(state: IStore) {
-  if (state.stockList.length == 0 || !state.stockList[0].isLoco) return 0;
+export function acceptableWeight(stockList: IStock[]) {
+  if (stockList.length == 0 || !isTractionUnit(stockList[0].vehicleRef)) return 0;

-  const activeLocomotiveType = state.stockList[0].type.split('-')[0];
+  const activeLocomotiveType = stockList[0].vehicleRef.type.split('-')[0];

-  const locoMassLimit = calculateMassLimit(activeLocomotiveType as MassLimitLocoType, isTrainPassenger(state));
+  const locoMassLimit = calculateMassLimit(
+    activeLocomotiveType as MassLimitLocoType,
+    isTrainPassenger(stockList)
+  );

  return locoMassLimit;
 }

-export function isTrainPassenger(state: IStore) {
-  if (state.stockList.length == 0) return false;
-  if (state.stockList.every((stock) => stock.isLoco)) return false;
+export function isTrainPassenger(stockList: IStock[]) {
+  if (stockList.length == 0) return false;
+  if (stockList.every((stock) => isTractionUnit(stock.vehicleRef))) return false;

-  return state.stockList.filter((stock) => !stock.isLoco).every((stock) => stock.useType === EVehicleUseType.CAR_PASSENGER);
-}
-
-export function chosenRealStock(state: IStore) {
-  const currentStockString = state.stockList
-    .reduce((acc, stock) => {
-      for (let i = 0; i < stock.count; i++) acc.push(stock.type);
-      return acc;
-    }, [] as string[])
-    .join(';');
-
-  const realStockObj = state.readyStockList.find((readyStock) => readyStock.stockString == currentStockString);
-
-  state.chosenRealStockName = realStockObj?.stockId ?? undefined;
-
-  return realStockObj;
+  return stockList
+    .filter((stock) => !isTractionUnit(stock.vehicleRef))
+    .every((stock) => stock.vehicleRef.group === 'wagon-passenger');
 }
@@ -6,11 +6,11 @@
 </template>

 <script lang="ts">
-import { defineComponent } from "vue";
-import { useStore } from "../store";
+import { defineComponent } from 'vue';
+import { useStore } from '../store';

-import MainContainer from "../components/app/MainContainer.vue";
-import FooterVue from "../components/app/Footer.vue";
+import MainContainer from '../components/app/MainContainer.vue';
+import FooterVue from '../components/app/Footer.vue';

 export default defineComponent({
  components: {
@@ -1,7 +1,7 @@
 /// <reference types="vite/client" />

-declare module "*.vue" {
-  import type { DefineComponent } from "vue";
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
  const component: DefineComponent<{}, {}, any>;
  export default component;
 }
@@ -6,13 +6,15 @@ import { VitePWA } from 'vite-plugin-pwa';
 // https://vitejs.dev/config/
 export default defineConfig({
  server: {
-    port: 2137,
+    port: 2138,
  },
  plugins: [
    vue(),
    VitePWA({
      registerType: 'autoUpdate',

+      includeAssets: ['/images/*.{png,svg,jpg}', '/fonts/*.{woff,woff2,ttf}'],
+
      devOptions: {
        suppressWarnings: true,
        enabled: true,
@@ -23,8 +25,8 @@ export default defineConfig({

        runtimeCaching: [
          {
-            urlPattern: /^https:\/\/rj.td2.info.pl\/dist\/img\/thumbnails\/.*/i,
-            handler: 'NetworkFirst',
+            urlPattern: new RegExp('^https://rj.td2.info.pl/dist/img/thumbnails/*', 'i'),
+            handler: 'CacheFirst',
            options: {
              cacheName: 'swdr-images-cache',
              expiration: {
@@ -32,22 +34,16 @@ export default defineConfig({
                maxAgeSeconds: 60 * 60 * 24, // <== 1 day
              },
              cacheableResponse: {
-                statuses: [0, 200, 404],
+                statuses: [200],
              },
            },
          },
+
          {
-            urlPattern: /^https:\/\/spythere.github.io\/api\/td2\/.*/i,
+            urlPattern: new RegExp('^https://stacjownik.spythere.eu/vehicles', 'i'),
            handler: 'NetworkFirst',
            options: {
-              cacheName: 'spythere-api-cache',
-              expiration: {
-                maxEntries: 150,
-                maxAgeSeconds: 60 * 60 * 24, // <== 1 day
-              },
-              cacheableResponse: {
-                statuses: [0, 200],
-              },
+              cacheName: 'vehicles-cache',
            },
          },
        ],
Author	SHA1	Message	Date
Spythere	76670ceb29	Merge pull request #27 from Spythere/development 1.8.6	2024-05-13 16:12:46 +02:00
Spythere	4cdd8ea06a	bump(version): 1.8.6	2024-05-13 15:58:39 +02:00
Spythere	454ae138f7	chore: config fix	2024-05-13 15:57:49 +02:00
Spythere	640c5e262b	chore: stock upload fix	2024-05-13 15:52:06 +02:00
Spythere	7416d7d59f	chore: pwa caching fixes	2024-05-13 15:51:48 +02:00
Spythere	ca1255b37e	Merge pull request #26 from Spythere/development 1.8.5 (hotfix)	2024-04-16 20:32:43 +02:00
Spythere	de0a8520f3	fix(workflows): color prop	2024-04-16 20:31:42 +02:00
Spythere	e51919896f	Merge pull request #25 from Spythere/development 1.8.5	2024-04-16 20:16:17 +02:00
Spythere	f9cd9a2a33	chore(wiki): preserving scroll state	2024-04-16 20:06:23 +02:00
Spythere	897d6d0c36	chore(stock): stock tab design	2024-04-16 19:54:51 +02:00
Spythere	b241b60657	chore(numgen): EC/EN categories added	2024-04-16 19:37:09 +02:00
Spythere	1f1bef1cc9	chore(numgen): changed select responsiveness	2024-04-16 00:42:58 +02:00
Spythere	05f8a0ca68	fix(locales): sort casing	2024-04-16 00:28:56 +02:00
Spythere	541572e415	refactor: stock & vehicle typings	2024-04-15 18:32:19 +02:00
Spythere	61c7f15fcf	chore(wiki): changed inputs order	2024-04-15 16:41:27 +02:00
Spythere	1da1645c51	chore(preview): cleanup	2024-04-15 16:40:19 +02:00
Spythere	8dc670b631	chore(preview): adjustments in image loading & fallback	2024-04-15 16:39:46 +02:00
Spythere	3424f9a952	chore(pwa): image caching changes	2024-04-15 16:36:30 +02:00
Spythere	4079426506	chore(workflows): added release discord webhook notification	2024-04-15 15:11:03 +02:00
Spythere	35f2a5ca09	chore(wiki): design improvements	2024-04-14 22:08:32 +02:00
Spythere	b840a6cd46	fix(stock): keydown number bug	2024-04-14 21:45:51 +02:00
Spythere	1aca0f7ed1	fix(wiki): crashing input regex	2024-04-14 21:33:57 +02:00
Spythere	b009bc03e8	bump(version): 1.8.5	2024-04-14 00:13:16 +02:00
Spythere	baa39a5a99	chore: wiki list tab revamp	2024-04-14 00:13:01 +02:00
Spythere	99cbde3828	chore: config port change	2024-04-14 00:12:47 +02:00
Spythere	e72b73ccf0	fix: global styles fix	2024-04-14 00:09:52 +02:00
Spythere	75e34d9f75	chore(wiki): change table to grid layout - wip	2024-04-13 19:26:52 +02:00
Spythere	13aa1acc54	Merge pull request #24 from Spythere/development Wersja 1.8.4	2024-04-10 16:32:03 +02:00
Spythere	966181c977	fix: wiki list table height	2024-04-10 16:25:11 +02:00
Spythere	06eb4bc607	fix: button bg color	2024-04-10 16:18:32 +02:00
Spythere	c07a16d245	fix: main container responsiveness	2024-04-10 16:12:08 +02:00
Spythere	7e67e34526	chore: wiki list tab sizing	2024-04-10 15:35:51 +02:00
Spythere	6cfc535dec	chore: packages update	2024-04-09 16:32:23 +02:00
Spythere	d072692db7	chore: pwa vehicles cache	2024-04-09 14:47:56 +02:00
Spythere	6255efd98d	fix: http url	2024-04-08 23:44:37 +02:00
Spythere	9c59c30f12	chore(api): url changes	2024-04-08 23:40:24 +02:00
Spythere	31302cc053	chorse: changed api data to stored locally	2024-04-08 22:20:18 +02:00
Spythere	26fd0c67e4	feat: team & sponsor restrictions added	2024-04-07 22:00:09 +02:00
Spythere	d98ec94a66	chore: service worker changes, got rid of excessive console logs	2024-04-07 18:54:03 +02:00
Spythere	28485cc28c	real stock card exit btn; hotfixes	2024-04-06 16:19:04 +02:00
Spythere	b14c7a9502	cargo count sorting fix	2024-04-06 16:08:05 +02:00
Spythere	90e78e5ac5	wiki list lazy load (intersection obs.)	2024-04-06 15:45:39 +02:00
Spythere	27f02e2c2b	api & naming changes	2024-04-06 14:54:54 +02:00
Spythere	421ae1db6b	Merge pull request #23 from Spythere/development Wersja 1.8.3.1	2024-04-03 21:53:48 +02:00
Spythere	90824dc0e5	hotfix	2024-04-03 21:51:24 +02:00
Spythere	583c2887e9	Merge pull request #22 from Spythere/development Wersja 1.8.3	2024-04-03 21:47:55 +02:00
Spythere	f915094775	speed disclaimer	2024-04-03 21:43:37 +02:00
Spythere	d5e735b59e	caching	2024-03-27 16:21:56 +01:00
Spythere	43a724bf13	cleanup	2024-03-27 16:13:33 +01:00
Spythere	337425d21c	eslint & prettier update; api fetching from static server	2024-03-27 16:10:53 +01:00
Spythere	9ff9341851	Merge pull request #21 from Spythere/development Wersja 1.8.2	2024-03-08 16:55:16 +01:00
Spythere	f9276f6c71	bump: 1.8.2	2024-03-08 16:54:30 +01:00
Spythere	f4f9a4729f	poprawki cachowania	2024-03-08 16:54:08 +01:00
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>`