Merge pull request #63 from Spythere/development

Update: new simulator's version vehicles & cargo data
chore(stock gen): separated military vehicles and new Nysa cars in stock generator
2026-05-03 05:18:10 +00:00 · 2026-04-19 01:37:16 +02:00 · 2026-04-19 01:32:09 +02:00 · 2026-04-19 01:26:20 +02:00 · 2026-04-19 01:23:27 +02:00 · 2026-04-06 00:53:15 +02:00
46 changed files with 1118 additions and 1179 deletions
@@ -0,0 +1,23 @@
 name: Build & Deploy to VPS
 on:
  push:
    branches:
      - main
 env:
  PROJECT_NAME: pojazdownik-td2
 jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:    
      - uses: actions/checkout@v3
      - name: Build the app
        run: yarn && yarn build
      - name: Setup SSH key for connection with the server
        run: |
            mkdir -p ~/.ssh
            echo "${{ secrets.VPS_SSH_PRIVATE_KEY }}" > ~/.ssh/id_rsa && chmod 600 ~/.ssh/id_rsa
      - name: Send new files
        run: rsync -avP -e "ssh -o StrictHostKeyChecking=no -i ~/.ssh/id_rsa -p 2022" ./dist/ ${{ secrets.VPS_USER }}@${{ secrets.VPS_HOST }}:/var/www/$PROJECT_NAME --delete
@@ -5,7 +5,7 @@ name: Deploy to Firebase Hosting on merge
 'on':
  push:
    branches:
-      - main
+      - main-old
 jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
@@ -1,55 +1,56 @@
 <!doctype html>
 <html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <title>Pojazdownik</title>
+<head>
-    <meta name="description" content="Edytor składów online dla symulatora Train Driver 2" />
+  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <link rel="icon" href="/favicon.ico" sizes="any" />
+  <title>Pojazdownik</title>
-    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+  <meta name="description" content="Edytor składów online dla symulatora Train Driver 2" />
    <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
    <link rel="manifest" href="/site.webmanifest" />
-    <meta name="msapplication-TileColor" content="#da532c" />
+  <link rel="icon" href="/favicon.ico" sizes="any" />
-    <meta name="theme-color" content="#111" />
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
  <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
  <link rel="manifest" href="/site.webmanifest" />
-     <!-- Static OpenGraph meta -->
+  <meta name="msapplication-TileColor" content="#da532c" />
-     <meta name="description" content="Edytor składów online dla symulatora Train Driver 2" />
+  <meta name="theme-color" content="#111" />
-     <meta property="og:url" content="https://pojazdownik-td2.web.app/" />
+
-     <meta property="og:type" content="website" />
+  <!-- Static OpenGraph meta -->
-     <meta property="og:title" content="Pojazdownik" />
+  <meta name="description" content="Edytor składów online dla symulatora Train Driver 2" />
-     <meta
+  <meta property="og:url" content="https://pojazdownik-td2.web.app/" />
-       property="og:description"
+  <meta property="og:type" content="website" />
-       content="Edytor składów online dla symulatora Train Driver 2"
+  <meta property="og:title" content="Pojazdownik" />
-     />
+  <meta property="og:description" content="Edytor składów online dla symulatora Train Driver 2" />
-     <meta
+  <meta property="og:image"
-       property="og:image"
+    content="https://raw.githubusercontent.com/Spythere/api/refs/heads/main/thumbnails/pojazdownik-banner.png" />
-       content="https://raw.githubusercontent.com/Spythere/api/refs/heads/main/thumbnails/pojazdownik-banner.png"
+  <meta property="og:image:width" content="1200" />
-     />
+  <meta property="og:image:height" content="630" />
-     <meta property="og:image:width" content="1200" />
+  <meta property="og:site_name" content="Pojazdownik" />
-     <meta property="og:image:height" content="630" />
+
-     <meta property="og:site_name" content="Pojazdownik" />
+  <meta name="twitter:card" content="summary_large_image" />
- 
+  <meta name="twitter:title" content="Pojazdownik" />
-     <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:description" content="Edytor składów online dla symulatora Train Driver 2" />
-     <meta name="twitter:title" content="Pojazdownik" />
+  <meta name="twitter:image"
-     <meta
+    content="https://raw.githubusercontent.com/Spythere/api/refs/heads/main/thumbnails/pojazdownik-banner.png" />
-       name="twitter:description"
+
-       content="Edytor składów online dla symulatora Train Driver 2"
+  <!-- Preload -->
-     />
+  <link rel="preload" href="/fonts/Lato-Bold.woff2" as="font" type="font/woff2" crossorigin />
-     <meta
+  <link rel="preload" href="/fonts/Lato-Regular.woff2" as="font" type="font/woff2" crossorigin />
-       name="twitter:image"
+
-       content="https://raw.githubusercontent.com/Spythere/api/refs/heads/main/thumbnails/pojazdownik-banner.png"
+  <link rel="preload" as="image" href="/logo-pl.svg" />
-     />
+  <link rel="preload" as="image" href="/logo-en.svg" />
-  </head>
+</head>
-  <body>
+
-    <noscript>
+<body>
-      <strong> We're sorry but Pojazdownik doesn't work properly without JavaScript enabled. Please enable it to continue. </strong>
+  <noscript>
-    </noscript>
+    <strong> We're sorry but Pojazdownik doesn't work properly without JavaScript enabled. Please enable it to continue.
-    <div id="app"></div>
+    </strong>
-    <script type="module" src="/src/main.ts"></script>
+  </noscript>
-  </body>
+  <div id="app"></div>
-</html>
+  <script type="module" src="/src/main.ts"></script>
 </body>
 </html>
@@ -1,6 +1,6 @@
 {
  "name": "pojazdownik",
-  "version": "1.9.2",
+  "version": "1.10.0",
  "private": true,
  "type": "module",
  "scripts": {
@@ -12,28 +12,27 @@
    "format": "prettier --write src/"
  },
  "dependencies": {
-    "axios": "^1.4.0",
+    "lucide-vue-next": "^0.576.0",
-    "lucide-vue-next": "^0.487.0",
+    "pinia": "^3.0.3",
    "pinia": "^2.0.17",
    "prettier": "^3.0.3",
    "vue": "^3.2.37",
-    "vue-i18n": "9.11.0",
+    "vue-i18n": "11.2.8",
-    "vue-router": "4"
+    "vue-router": "5.0.3"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.3.3",
-    "@types/node": "^22.13.9",
+    "@types/node": "^25.3.3",
-    "@vite-pwa/assets-generator": "^0.2.3",
+    "@vite-pwa/assets-generator": "^1.0.2",
-    "@vitejs/plugin-vue": "^5.0.3",
+    "@vitejs/plugin-vue": "^6.0.1",
-    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-prettier": "^10.2.0",
-    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/eslint-config-typescript": "^14.6.0",
-    "@vue/tsconfig": "^0.5.1",
+    "@vue/tsconfig": "^0.9.0",
-    "eslint": "^8.49.0",
+    "eslint": "^10.0.2",
-    "eslint-plugin-vue": "^9.17.0",
+    "eslint-plugin-vue": "^10.5.1",
    "sass": "^1.59.3",
    "typescript": "^5.0.2",
-    "vite": "^5.0.12",
+    "vite": "^7.1.12",
-    "vite-plugin-pwa": "^0.17.5",
+    "vite-plugin-pwa": "^1.1.0",
-    "vue-tsc": "^2.2.8"
+    "vue-tsc": "^3.1.3"
  }
 }
@@ -2,78 +2,85 @@
  <AppModals />
  <ImageFullscreenPreview v-if="store.vehiclePreviewSrc" />
  <transition name="slide-bottom-anim">
    <MigrationInfo v-if="store.isMigrationInfoOpen" />
  </transition>
  <router-view></router-view>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 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 { computed, onMounted, watchEffect } from 'vue';
 import { registerSW } from 'virtual:pwa-register';
 import MigrationInfo from './components/app/MigrationInfo.vue';
-export default defineComponent({
+const store = useStore();
  components: { ImageFullscreenPreview, AppContainerView, AppModals },
  data() {
    return { store: useStore() };
  },
-  created() {
+registerSW({
-    this.loadStockDataFromStorage();
+  immediate: true,
    this.store.setupAPIData();
  },
  computed: {
    currentStockString() {
      return this.store.stockString;
    },
  },
  watch: {
    currentStockString(val: string) {
      if (val != this.store.chosenStorageStockString) {
        this.store.chosenStorageStockName = '';
      }
    },
  },
  methods: {
    loadStockDataFromStorage() {
      const savedData = localStorage.getItem('savedStockData');
      if (!savedData) {
        localStorage.setItem('savedStockData', JSON.stringify({}));
        return;
      }
      try {
        this.store.storageStockData = JSON.parse(savedData);
      } catch (error) {
        console.error(
          'Wystąpił błąd podczas przetwarzania danych o składach z localStorage!',
          error
        );
      }
    },
  },
 });
 onMounted(() => {
  loadStockDataFromStorage();
  handleMigrationInfo();
  store.setupAPIData();
 });
 const currentStockString = computed(() => store.stockString);
 watchEffect(() => {
  if (currentStockString.value != store.chosenStorageStockString) {
    store.chosenStorageStockName = '';
  }
 });
 function handleMigrationInfo() {
  // Show only on old domain
  if (location.hostname !== 'pojazdownik-td2.web.app') return;
  const showInfo = localStorage.getItem('showMigrationInfo');
  // Do not show if already acknowledged
  if (showInfo === 'false') return;
  setTimeout(() => {
    store.isMigrationInfoOpen = true;
  }, 2000);
 }
 function loadStockDataFromStorage() {
  const savedData = localStorage.getItem('savedStockData');
  if (!savedData) {
    localStorage.setItem('savedStockData', JSON.stringify({}));
    return;
  }
  try {
    store.storageStockData = JSON.parse(savedData);
  } catch (error) {
    console.error('Wystąpił błąd podczas przetwarzania danych o składach z localStorage!', error);
  }
 }
 </script>
 <style lang="scss">
@use './styles/global';
@use './styles/responsive';
 /* APP */
 #app {
  margin: 0 auto;
-  color: global.$textColor;
+  color: var(--textColor);
  font-size: 1em;
  padding: 0;
-  @media screen and (max-width: global.$breakpointMd) {
+  @include responsive.midScreen {
    font-size: calc(0.7rem + 0.75vw);
  }
  @media screen and (orientation: landscape) and (max-width: global.$breakpointMd) {
    font-size: calc(0.75rem + 0.4vw);
  }
 }
 </style>
@@ -6,19 +6,9 @@
  </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { defineComponent } from 'vue';
 import { useStore } from '../../store';
 import RealStockCard from '../cards/RealStockCard.vue';
-export default defineComponent({
+const store = useStore();
  components: { RealStockCard },
  data() {
    return {
      store: useStore(),
    };
  },
 });
 </script>
 <style scoped></style>
@@ -1,12 +1,11 @@
 <template>
  <footer>
-    <i18n-t keypath="footer.disclaimer" tag="div" class="text--grayed">
+    <div>
-      <template #tos>
+      &copy;
-        <a style="color: #ccc" :href="$t('footer.tos-href')" target="_blank">
+      <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
-          {{ $t('footer.tos') }}
+      {{ new Date().getUTCFullYear() }} |
-        </a>
+      <a class="release-link" :href="githubReleaseHref" target="_blank">v{{ VERSION }}{{ !isOnProductionHost ? 'dev' : '' }}</a>
-      </template>
+    </div>
    </i18n-t>
    <div class="text--grayed" v-if="store.vehiclesData">
      {{
@@ -17,12 +16,6 @@
        })
      }}
    </div>
    <div>
      &copy;
      <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
      {{ new Date().getUTCFullYear() }} | v{{ VERSION }}{{ !isOnProductionHost ? 'dev' : '' }}
    </div>
  </footer>
 </template>
@@ -34,13 +27,17 @@ import { useStore } from '../../store';
 export default defineComponent({
  data() {
    return {
-      isOnProductionHost: location.hostname == 'pojazdownik-td2.web.app',
+      isOnProductionHost: location.hostname == 'pojazdownik-td2.web.app' || location.hostname == 'pojazdownik-td2.spythere.eu',
      VERSION: packageInfo.version,
      store: useStore(),
    };
  },
  computed: {
    githubReleaseHref() {
      return `https://github.com/Spythere/pojazdownik/releases/tag/${this.VERSION}`;
    },
    vehiclesCounters() {
      let counters = {
        all: 0,
@@ -66,6 +63,14 @@ export default defineComponent({
 <style lang="scss" scoped>
 footer {
  text-align: center;
-  padding: 1em 1em 0 1em;
+  padding: 0 0.5em 0.5em 0.5em;
 }
 .release-link {
  color: var(--accentColor);
  &:hover {
    color: white;
  }
 }
 </style>
@@ -20,29 +20,29 @@ export default defineComponent({
 </script>
 <style lang="scss" scoped>
@use '@/styles/responsive';
 main {
  display: grid;
  gap: 1em;
-  width: 100%;
+  width: 100vw;
-  max-width: 1350px;
+  max-width: 1600px;
-  grid-template-columns: 1fr 2fr;
+  grid-template-columns: minmax(380px, 1fr) 3fr;
-  grid-template-rows: auto 360px minmax(300px, 1fr);
+  grid-template-rows: auto 350px minmax(300px, 1fr);
  background-color: global.$bgColorDarker;
  border-radius: 1em;
-
+  overflow: hidden;
  min-height: 950px;
  padding: 1em;
 }
-@media screen and (max-width: global.$breakpointMd) {
+@include responsive.midScreen {
  main {
    display: flex;
    flex-direction: column;
    gap: 1em;
    height: auto;
  }
 }
 </style>
@@ -0,0 +1,59 @@
 <template>
  <div class="migrate-info">
    <div class="info-content">
      <i18n-t keypath="migrate-info.line-1" for="migrate-info" tag="div">
        <a href="https://pojazdownik-td2.spythere.eu/" target="_blank">{{ t('migrate-info.link') }}</a>
      </i18n-t>
      <button class="btn accept-btn" @click="onAcceptButtonClick">{{ t('migrate-info.accept-btn') }}</button>
    </div>
  </div>
 </template>
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 import { useStore } from '../../store';
 const store = useStore();
 const { t } = useI18n();
 function onAcceptButtonClick() {
  store.isMigrationInfoOpen = false;
  localStorage.setItem('showMigrationInfo', 'false');
 }
 </script>
 <style lang="scss" scoped>
 .migrate-info {
  position: fixed;
  z-index: 100;
  bottom: 0;
  left: 0;
  padding: 0.25em;
  text-align: center;
  width: 100%;
  background-color: var(--accentColor);
  color: black;
  font-weight: bold;
  font-size: 1.1em;
 }
 .info-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em;
 }
 a {
  color: black;
  text-decoration: underline;
  &:hover {
    color: black;
  }
 }
 </style>
@@ -220,6 +220,8 @@ export default defineComponent({
 </script>
 <style lang="scss" scoped>
@use '@/styles/responsive';
 .action-exit {
  display: flex;
  background-color: #333;
@@ -247,7 +249,7 @@ export default defineComponent({
  z-index: 100;
-  @media screen and (max-width: global.$breakpointSm) {
+  @include responsive.smallScreen {
    height: 80vh;
  }
 }
@@ -279,7 +281,7 @@ export default defineComponent({
    width: 35%;
  }
-  @media screen and (max-width: global.$breakpointSm) {
+  @include responsive.smallScreen {
    flex-wrap: wrap;
    input {
@@ -307,7 +309,7 @@ ul {
    padding: 0.1em;
    &[data-last-selected='true'] .stock-title {
-      border: 1px solid global.$accentColor;
+      border: 1px solid var(--accentColor);
    }
    .stock-title {
@@ -323,7 +325,7 @@ ul {
      background: #222;
    }
-    @media screen and (max-width: global.$breakpointSm) {
+    @include responsive.smallScreen {
      grid-template-columns: 1fr;
      // grid-template-rows: 1fr 1fr;
    }
@@ -224,6 +224,8 @@ export default defineComponent({
 </script>
 <style lang="scss" scoped>
@use '@/styles/responsive';
 .inputs-section {
  display: flex;
  justify-content: center;
@@ -242,7 +244,7 @@ button.btn--choice {
  padding: 0.3em 0.6em;
  &[data-selected='true'] {
-    background-color: global.$accentColor;
+    background-color: var(--accentColor);
    color: black;
  }
@@ -260,12 +262,12 @@ button.btn--choice {
    display: block;
    font-weight: bold;
-    color: global.$accentColor;
+    color: var(--accentColor);
    margin-bottom: 0.3em;
  }
  select:focus {
-    border-color: global.$accentColor;
+    border-color: var(--accentColor);
  }
 }
@@ -290,7 +292,7 @@ button.btn--choice {
  }
 }
-@media screen and (max-width: global.$breakpointMd) {
+@include responsive.midScreen {
  .inputs-section {
    justify-content: center;
    text-align: center;
@@ -58,7 +58,7 @@ export default {
  button[data-selected='true'] {
    font-weight: bold;
-    color: global.$accentColor;
+    color: var(--accentColor);
    text-decoration: underline;
  }
 }
@@ -1,17 +1,9 @@
 <template>
  <section class="tabs-section">
    <div class="tabs-modes">
-      <router-link
+      <router-link v-for="(route, i) in routes" :key="route.name" class="link-btn" :to="route.href" :style="{ 'grid-area': route.name }">
        v-for="(route, i) in routes"
        :key="route.name"
        class="link-btn"
        :to="route.href"
        :style="{ 'grid-area': route.name }"
      >
        <span class="text--accent">{{ i + 1 }}.</span> {{ $t(`topbar.${route.name}`) }}
-        <span class="text--grayed" v-if="route.name == 'stock'"
+        <span class="text--grayed" v-if="route.name == 'stock'">({{ store.stockList.length }})</span>
          >({{ store.stockList.length }})</span
        >
      </router-link>
    </div>
@@ -68,7 +60,9 @@ onMounted(() => {
 });
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
@use '@/styles/responsive';
 // Tab change animation
 .tab-change {
  &-enter-from,
@@ -84,6 +78,10 @@ onMounted(() => {
 // Section styles
 .tabs-section {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 1em;
  grid-row: 1 / 4;
  grid-column: 2;
@@ -93,19 +91,21 @@ onMounted(() => {
 .tabs-modes {
  display: grid;
  grid-template-areas:
    'stock stock wiki wiki storage storage'
    'numgen numgen numgen stockgen stockgen stockgen';
  grid-template-columns: repeat(6, 1fr);
  // grid-template-rows: 1fr 1fr;
  padding: 1px;
  gap: 0.5em;
  grid-template-areas: 'stock wiki storage numgen stockgen';
-  margin-bottom: 1em;
+  padding: 1px;
 }
-@media screen and (max-width: global.$breakpointSm) {
+@media only screen and (max-width: 1200px) {
  .tabs-modes {
    grid-template-areas:
      'stock stock wiki wiki storage storage'
      'numgen numgen numgen stockgen stockgen stockgen';
  }
 }
@include responsive.smallScreen {
  .tabs-modes {
    grid-template-areas:
      'stock wiki'
@@ -114,4 +114,10 @@ onMounted(() => {
    grid-template-columns: repeat(2, 1fr);
  }
 }
@include responsive.midScreen {
  .tabs-section {
    min-height: 100vh;
  }
 }
 </style>
@@ -5,10 +5,7 @@
        <img
          :src="getThumbnailURL(store.chosenVehicle.type, 'small')"
          :data-preview-available="isDataPreviewAvailable"
-          :data-sponsor-only="
+          :data-sponsor-only="store.chosenVehicle.sponsorOnlyTimestamp && store.chosenVehicle.sponsorOnlyTimestamp > Date.now()"
            store.chosenVehicle.sponsorOnlyTimestamp &&
            store.chosenVehicle.sponsorOnlyTimestamp > Date.now()
          "
          :data-team-only="store.chosenVehicle.teamOnly"
          @click="onImageClick"
          @keydown.enter="onImageClick"
@@ -21,23 +18,15 @@
      <div class="image-info">
        <b class="text--accent">{{ store.chosenVehicle.type }}</b> &bull;
        <b style="color: #ccc">
-          {{
+          {{ $t(`preview.${isTractionUnit(store.chosenVehicle) ? store.chosenVehicle.group : store.chosenVehicle.group}`) }}
            $t(
              `preview.${isTractionUnit(store.chosenVehicle) ? store.chosenVehicle.group : store.chosenVehicle.group}`
            )
          }}
        </b>
        <div style="color: #ccc">
          <div>
-            {{ store.chosenVehicle.length }}m |
+            {{ store.chosenVehicle.length }}m | {{ (store.chosenVehicle.weight / 1000).toFixed(1) }}t | {{ store.chosenVehicle.maxSpeed }} km/h
            {{ (store.chosenVehicle.weight / 1000).toFixed(1) }}t |
            {{ store.chosenVehicle.maxSpeed }} km/h
          </div>
-          <div v-if="isTractionUnit(store.chosenVehicle)">
+          <div v-if="isTractionUnit(store.chosenVehicle)">{{ $t('preview.cabin') }} {{ store.chosenVehicle.cabinType }}</div>
            {{ $t('preview.cabin') }} {{ store.chosenVehicle.cabinType }}
          </div>
          <div v-else>
            {{
@@ -47,18 +36,10 @@
            }}
          </div>
-          <b
+          <b v-if="store.chosenVehicle.sponsorOnlyTimestamp && store.chosenVehicle.sponsorOnlyTimestamp > Date.now()" class="sponsor-only">
            v-if="
              store.chosenVehicle.sponsorOnlyTimestamp &&
              store.chosenVehicle.sponsorOnlyTimestamp > Date.now()
            "
            class="sponsor-only"
          >
            {{
              $t('preview.sponsor-only', [
-                new Date(store.chosenVehicle.sponsorOnlyTimestamp).toLocaleDateString(
+                new Date(store.chosenVehicle.sponsorOnlyTimestamp).toLocaleDateString($i18n.locale == 'pl' ? 'pl-PL' : 'en-GB'),
                  $i18n.locale == 'pl' ? 'pl-PL' : 'en-GB'
                ),
              ])
            }}
          </b>
@@ -152,7 +133,7 @@ export default defineComponent({
 </script>
 <style lang="scss" scoped>
-
+@use '@/styles/responsive';
 .train-image-section {
  display: flex;
@@ -164,8 +145,8 @@ export default defineComponent({
  & > div {
    position: relative;
-    max-width: 100%;
+    width: 100%;
-    width: 380px;
+    max-width: 380px;
  }
 }
@@ -178,11 +159,11 @@ img {
  }
  &[data-sponsor-only='true'] {
-    border: 1px solid global.$sponsorColor;
+    border: 1px solid var(--accentColor);
  }
  &[data-team-only='true'] {
-    border: 1px solid global.$teamColor;
+    border: 1px solid var(--teamColor);
  }
 }
@@ -216,25 +197,25 @@ img {
  width: 100%;
  max-width: 380px;
-  background-color: global.$secondaryColor;
+  background-color: var(--secondaryColor);
  font-weight: bold;
 }
 .placeholder {
  height: 250px;
-  background-color: global.$bgColor;
+  background-color: var(--bgColor);
 }
 .sponsor-only {
-  color: global.$sponsorColor;
+  color: var(--accentColor);
 }
 .team-only {
-  color: global.$teamColor;
+  color: var(--teamColor);
 }
-@media screen and (max-width: global.$breakpointMd) {
+@include responsive.midScreen {
  .train-image-section {
    justify-content: center;
  }
@@ -1,5 +1,5 @@
 <template>
-  <div class="number-generator tab">
+  <div class="number-generator-tab">
    <div class="tab_header">
      <h2>{{ $t('numgen.title') }}</h2>
      <h3>{{ $t('numgen.subtitle') }}</h3>
@@ -224,7 +224,15 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
 </script>
 <style lang="scss" scoped>
-@use '../../styles/tab';
+@use '@/styles/tab';
@use '@/styles/responsive';
 .number-generator-tab {
  display: flex;
  flex-direction: column;
  gap: 1em;
  overflow: auto;
 }
 .category-select {
  select {
@@ -263,7 +271,7 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
  margin: 0.5em 0;
  padding: 0.5em;
-  background-color: global.$secondaryColor;
+  background-color: var(--secondaryColor);
 }
 .category-rules {
@@ -281,13 +289,13 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
  margin: 0.25em 0;
 }
-@media screen and (max-width: global.$breakpointMd) {
+@include responsive.midScreen {
-  .number-generator {
+  .number-generator-tab {
    min-height: 100vh;
  }
 }
-@media screen and (max-width: global.$breakpointSm) {
+@include responsive.smallScreen {
  .regions-select {
    flex-wrap: wrap;
  }
@@ -1,110 +1,96 @@
 <template>
-  <div class="stock-generator tab">
+  <div class="stock-generator-tab">
-    <div class="tab_content">
+    <div>
-      <div>
+      <h2>{{ $t('stockgen.properties-title') }}</h2>
        <h2>{{ $t('stockgen.properties-title') }}</h2>
-        <b class="text--accent">
+      <b class="text--accent">
-          {{ $t('stockgen.properties-desc') }}
+        {{ $t('stockgen.properties-desc') }}
-        </b>
+      </b>
-        <div class="inputs">
+      <div class="inputs">
-          <label>
+        <label>
-            <span>{{ $t('stockgen.input-mass') }}</span>
+          <span>{{ $t('stockgen.input-mass') }}</span>
-            <input type="number" v-model="maxTons" step="100" max="4000" min="0" />
+          <input type="number" v-model="maxTons" step="100" max="4000" min="0" />
-          </label>
+        </label>
-          <label>
+        <label>
-            <span>{{ $t('stockgen.input-length') }}</span>
+          <span>{{ $t('stockgen.input-length') }}</span>
-            <input type="number" v-model="maxLength" step="25" max="650" min="0" />
+          <input type="number" v-model="maxLength" step="25" max="650" min="0" />
-          </label>
+        </label>
-          <label>
+        <label>
-            <span>{{ $t('stockgen.input-carcount') }}</span>
+          <span>{{ $t('stockgen.input-carcount') }}</span>
-            <input type="number" v-model="maxCarCount" step="1" max="60" min="1" />
+          <input type="number" v-model="maxCarCount" step="1" max="60" min="1" />
-          </label>
+        </label>
-        </div>
+      </div>
-        <!-- <hr style="margin: 1em 0" /> -->
+      <!-- <hr style="margin: 1em 0" /> -->
-        <!-- <div class="generator_options">
+      <!-- <div class="generator_options">
          <Checkbox v-model="isCarGroupingEnabled">Grupuj wylosowane wagony (ustawia podobne wagony obok siebie w składzie)</Checkbox>
        </div>  -->
    </div>
    <div>
      <h2>{{ $t('stockgen.cargo-title') }}</h2>
      <b>{{ $t('stockgen.cargo-desc') }}</b>
    </div>
    <div class="generator_cargo">
      <button
        v-for="cargo in computedCargoData"
        :key="cargo.name"
        class="btn"
        :data-chosen="chosenCargoTypes.includes(cargo.name)"
        @click="toggleCargoChosen(cargo.name, cargo.cargoList)"
      >
        {{ $t(`cargo.${cargo.name}`) }}
      </button>
    </div>
    <div>
      <h2>{{ $t('stockgen.chosen-title') }}</h2>
      <div class="generator_warning">
        <span v-if="computedChosenCarTypes.size == 0">
          {{ $t('stockgen.chosen-empty-warning') }}
        </span>
        <span v-else>
          {{ $t('stockgen.chosen-warning') }}
        </span>
      </div>
    </div>
-      <div>
+    <div class="generator_vehicles" v-if="computedChosenCarTypes.size != 0">
-        <h2>{{ $t('stockgen.cargo-title') }}</h2>
+      <button
-        <b>{{ $t('stockgen.cargo-desc') }}</b>
+        :data-chosen="true"
-      </div>
+        :data-excluded="excludedCarTypes.includes(carType)"
        class="btn"
        v-for="carType in computedChosenCarTypes"
        :key="carType"
        @mouseover="onMouseHover(carType)"
        @mouseleave="onMouseLeave"
        @click="toggleCarExclusion(carType)"
      >
        {{ carType }}
      </button>
    </div>
-      <div class="generator_cargo">
+    <hr />
        <button
          v-for="cargo in computedCargoData"
          :key="cargo.name"
          class="btn"
          :data-chosen="chosenCargoTypes.includes(cargo.name)"
          @click="toggleCargoChosen(cargo.name, cargo.cargoList)"
        >
          {{ $t(`cargo.${cargo.name}`) }}
        </button>
      </div>
-      <div>
+    <div class="tab_actions">
-        <h2>{{ $t('stockgen.chosen-title') }}</h2>
+      <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock()">
        {{ $t('stockgen.action-generate') }}
      </button>
-        <div class="generator_warning">
+      <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock(true)">
-          <span v-if="computedChosenCarTypes.size == 0">
+        {{ $t('stockgen.action-generate-empty') }}
-            {{ $t('stockgen.chosen-empty-warning') }}
+      </button>
          </span>
-          <span v-else>
+      <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="resetChosenCargo">
-            {{ $t('stockgen.chosen-warning') }}
+        {{ $t('stockgen.action-reset') }}
-          </span>
+      </button>
        </div>
      </div>
      <div class="generator_vehicles" v-if="computedChosenCarTypes.size != 0">
        <button
          :data-chosen="true"
          :data-excluded="excludedCarTypes.includes(carType)"
          class="btn"
          v-for="carType in computedChosenCarTypes"
          :key="carType"
          @mouseover="onMouseHover(carType)"
          @mouseleave="onMouseLeave"
          @click="toggleCarExclusion(carType)"
        >
          {{ carType }}
        </button>
      </div>
      <hr />
      <div class="tab_actions">
        <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)"
        >
          {{ $t('stockgen.action-generate-empty') }}
        </button>
        <button
          class="btn"
          :data-disabled="computedChosenCarTypes.size == 0"
          @click="resetChosenCargo"
        >
          {{ $t('stockgen.action-reset') }}
        </button>
      </div>
    </div>
  </div>
 </template>
@@ -183,9 +169,7 @@ export default defineComponent({
      if (!this.isCarGroupingEnabled) return false;
      stockList.sort((s1, s2) => {
-        return (s1.vehicleRef.constructionType + s1.cargo?.id).localeCompare(
+        return (s1.vehicleRef.constructionType + s1.cargo?.id).localeCompare(s2.vehicleRef.constructionType + s2.cargo?.id);
          s2.vehicleRef.constructionType + s2.cargo?.id
        );
      });
    },
@@ -202,14 +186,11 @@ export default defineComponent({
              if (!cargoType || empty) cargoObjs.push(undefined);
              else if (cargoType == 'all') cargoObjs.push(...carWagonObjs[0]!.cargoTypes);
-              else
+              else cargoObjs.push(carWagonObjs[0]?.cargoTypes.find((cargo) => cargo.id == cargoType));
                cargoObjs.push(carWagonObjs[0]?.cargoTypes.find((cargo) => cargo.id == cargoType));
              carWagonObjs.forEach((cw) => {
                cargoObjs.forEach((cargoObj) => {
-                  const chosenStock = acc.find((a) =>
+                  const chosenStock = acc.find((a) => a.constructionType.includes(cw.constructionType));
                    a.constructionType.includes(cw.constructionType)
                  );
                  if (!chosenStock)
                    acc.push({
@@ -229,24 +210,15 @@ export default defineComponent({
      let bestGeneration: { stockList: IStock[]; value: number } = { stockList: [], value: 0 };
      for (let i = 0; i < 10; i++) {
-        this.store.stockList.splice(
+        this.store.stockList.splice(this.store.stockList.length > 0 && isTractionUnit(this.store.stockList[0].vehicleRef) ? 1 : 0);
          this.store.stockList.length > 0 && isTractionUnit(this.store.stockList[0].vehicleRef)
            ? 1
            : 0
        );
        let carCount = 0;
-        const maxWeight =
+        const maxWeight = this.store.acceptableWeight > 0 ? Math.min(this.store.acceptableWeight, this.maxTons * 1000) : this.maxTons * 1000;
          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 =
+          const randomStockType = generatedChosenStockList[~~(Math.random() * generatedChosenStockList.length)];
-            generatedChosenStockList[~~(Math.random() * generatedChosenStockList.length)];
+          const { carWagon, cargo } = randomStockType.carPool[~~(Math.random() * randomStockType.carPool.length)];
          const { carWagon, cargo } =
            randomStockType.carPool[~~(Math.random() * randomStockType.carPool.length)];
          if (
            this.store.totalWeight + (carWagon.weight + (cargo?.weight ?? 0)) > maxWeight ||
@@ -316,6 +288,14 @@ export default defineComponent({
 <style lang="scss" scoped>
@use '@/styles/tab';
 .stock-generator-tab {
  display: flex;
  flex-direction: column;
  gap: 1em;
  overflow: auto;
  padding: 0.5em;
 }
 h2 {
  margin-top: 0;
  margin-bottom: 0.5em;
@@ -335,8 +315,6 @@ h2 {
    text-transform: uppercase;
    font-weight: bold;
    background-color: global.$secondaryColor;
    &[data-excluded='true'] {
      background-color: gray;
      box-shadow: none;
@@ -349,7 +327,7 @@ h2 {
      padding: 5px;
      transform: translate(-8px, -50%);
-      background-color: global.$bgColor;
+      background-color: var(--bgColor);
      color: white;
    }
  }
@@ -390,7 +368,7 @@ h2 {
 }
 .generator_warning {
-  background-color: global.$accentColor;
+  background-color: var(--accentColor);
  padding: 0.5em;
  text-align: justify;
  font-weight: bold;
@@ -1,21 +1,19 @@
 <template>
  <section class="stock-list-tab">
-    <div class="tab_content">
+    <!-- Stock Actions -->
-      <!-- Stock Actions -->
+    <StockActions />
      <StockActions />
-      <!-- Stock Specs -->
+    <!-- Stock Specs -->
-      <StockSpecs />
+    <StockSpecs />
-      <!-- Stock Spawn Settings -->
+    <!-- Stock Spawn Settings -->
-      <StockSpawnSettings />
+    <StockSpawnSettings />
-      <!-- Stock Warnings -->
+    <!-- Stock Warnings -->
-      <StockWarnings />
+    <StockWarnings />
-      <!-- Stock List -->
+    <!-- Stock List -->
-      <StockList />
+    <StockList />
    </div>
  </section>
 </template>
@@ -42,7 +40,14 @@ export default defineComponent({
 </script>
 <style lang="scss" scoped>
-@use '@/styles/tab';
+@use '../../styles/tab';
 .stock-list-tab {
  display: grid;
  grid-template-rows: auto auto auto auto 1fr;
  gap: 0.5em;
  overflow: hidden;
 }
 .tab_content {
  display: flex;
@@ -1,57 +1,54 @@
 <template>
-  <section class="tab storage-tab">
+  <section class="storage-tab">
    <div class="tab_header">
      <h2>{{ $t('storage.title') }}</h2>
      <h3>{{ $t('storage.subtitle') }}</h3>
    </div>
    <div class="tab_content">
-      <div class="storage-list-wrapper">
+      <transition-group name="storage-list-anim" tag="ul" class="storage-list">
-        <transition-group name="storage-list-anim" tag="ul" class="storage-list">
+        <li v-for="storageEntry in storageStockDataList" :key="storageEntry.id">
-          <li v-for="storageEntry in storageStockDataList" :key="storageEntry.id">
+          <div class="storage-item-top">
-            <div class="storage-item-top">
+            <h3>
-              <h3>
+              {{ storageEntry.id }}
-                {{ storageEntry.id }}
+            </h3>
              </h3>
-              <div class="storage-item-top-actions">
+            <div class="storage-item-top-actions">
-                <button class="btn btn--icon" @click="chooseStorageStock(storageEntry.id)">
+              <button class="btn btn--icon" @click="chooseStorageStock(storageEntry.id)">
-                  <LogIn />
+                <LogIn />
-                </button>
+              </button>
-                <button class="btn btn--icon" @click="toggleStorageEntryExpand(storageEntry.id)">
+              <button class="btn btn--icon" @click="toggleStorageEntryExpand(storageEntry.id)">
-                  <ChevronDown v-if="!expandedEntries.includes(storageEntry.id)" />
+                <ChevronDown v-if="!expandedEntries.includes(storageEntry.id)" />
-                  <ChevronUp v-else />
+                <ChevronUp v-else />
-                </button>
+              </button>
-                <button class="btn btn--icon" @click="removeStockIndexFromStorage(storageEntry.id)">
+              <button class="btn btn--icon" @click="removeStockIndexFromStorage(storageEntry.id)">
-                  <Trash2 />
+                <Trash2 />
-                </button>
+              </button>
              </div>
            </div>
          </div>
-            <div class="storage-item-expandable" v-if="expandedEntries.includes(storageEntry.id)">
+          <div class="storage-item-expandable" v-if="expandedEntries.includes(storageEntry.id)">
-              <i>
+            <i>
-                {{ $t('storage.created-at') }}
+              {{ $t('storage.created-at') }}
-                {{ new Date(storageEntry.createdAt).toLocaleString($i18n.locale) }}</i
+              {{ new Date(storageEntry.createdAt).toLocaleString($i18n.locale) }}</i
-              >
+            >
-              <i v-if="storageEntry.updatedAt">
+            <i v-if="storageEntry.updatedAt">
-                &bull; {{ $t('storage.updated-at') }}
+              &bull; {{ $t('storage.updated-at') }} {{ new Date(storageEntry.updatedAt).toLocaleString($i18n.locale) }}</i
-                {{ new Date(storageEntry.updatedAt).toLocaleString($i18n.locale) }}</i
+            >
              >
-              <div style="margin-top: 0.5em">
+            <div style="margin-top: 0.5em">
-                <i>{{ $t('storage.stock-title') }} </i>
+              <i>{{ $t('storage.stock-title') }} </i>
-                {{ shortenStockString(storageEntry.stockString) }}
+              {{ shortenStockString(storageEntry.stockString) }}
              </div>
            </div>
-          </li>
+          </div>
        </li>
-          <li v-if="Object.keys(storageStockDataList).length == 0" class="storage-no-entries">
+        <li v-if="Object.keys(storageStockDataList).length == 0" class="storage-no-entries">
-            {{ $t('storage.no-entires') }}
+          {{ $t('storage.no-entires') }}
-          </li>
+        </li>
-        </transition-group>
+      </transition-group>
      </div>
    </div>
  </section>
 </template>
@@ -146,26 +143,31 @@ export default defineComponent({
 <style lang="scss" scoped>
@use '@/styles/tab';
 .storage-tab {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
 }
 .tab_actions {
  grid-template-columns: repeat(2, 1fr);
 }
-.storage-list-wrapper {
+.tab_content {
  position: relative;
  height: 730px;
  overflow: auto;
  margin-top: 1em;
  position: relative;
 }
 ul.storage-list {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin-top: 0.5em;
 }
 ul.storage-list > li {
  padding: 0.5em;
-  background-color: global.$secondaryColor;
+  background-color: var(--secondaryColor);
  &[data-current='true'] {
    background-color: #3b3b3b;
@@ -174,12 +176,14 @@ ul.storage-list > li {
 .storage-item-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
 }
 .storage-item-top > h3 {
-  width: 100%;
+  min-width: 350px;
  text-align: left;
  margin: 0;
 }
@@ -208,7 +212,7 @@ ul.storage-list > li {
  &-move,
  &-enter-active,
  &-leave-active {
-    transition: all 120ms ease-in-out;
+    transition: all 100ms ease-in-out;
  }
  &-enter-from {
@@ -1,97 +1,86 @@
 <template>
-  <section class="wiki-list tab">
+  <section class="wiki-list-tab">
-    <div class="tab_content">
+    <div class="actions">
-      <div class="actions">
+      <div class="action action-input">
-        <div class="action action-input">
+        <label for="search-vehicle">
-          <label for="search-vehicle">
+          {{ $t('wiki.labels.search-vehicle') }}
-            {{ $t('wiki.labels.search-vehicle') }}
+          <button class="reset-btn" @click="resetSearchInput">
-            <button class="reset-btn" @click="resetSearchInput">
+            <img src="/images/icon-exit.svg" alt="reset vehicle input icon" />
-              <img src="/images/icon-exit.svg" alt="reset vehicle input icon" />
+          </button>
-            </button>
+        </label>
-          </label>
+        <input
-          <input
+          type="text"
-            type="text"
+          id="search-vehicle"
-            id="search-vehicle"
+          name="search-vehicle"
-            name="search-vehicle"
+          :placeholder="$t('wiki.labels.search-vehicle-placeholder')"
-            :placeholder="$t('wiki.labels.search-vehicle-placeholder')"
+          v-model="searchedVehicleTypeName"
-            v-model="searchedVehicleTypeName"
+        />
          />
        </div>
        <div class="action action-select">
          <label for="filter-type">{{ $t('wiki.labels.vehicles') }}</label>
          <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>
        </div>
        <div class="action action-select">
          <label for="sorter-type">{{ $t('wiki.labels.sort-by') }}</label>
          <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>
        </div>
        <div class="action action-select">
          <label for="sorter-direction">{{ $t('wiki.labels.sort-direction') }}</label>
          <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>
        </div>
      </div>
-      <ul class="vehicles" ref="vehicles">
+      <div class="action action-select">
-        <li
+        <label for="filter-type">{{ $t('wiki.labels.vehicles') }}</label>
-          v-for="vehicle in computedVehicles"
+        <select name="filter-type" id="filter-type" v-model="filterType">
-          :key="vehicle.type"
+          <option v-for="filter in filters" :key="filter" :value="filter">
-          :data-preview="vehicle.type === store.chosenVehicle?.type"
+            {{ $t(`wiki.filters.${filter}`) }}
-          @click="previewVehicle(vehicle)"
+          </option>
-          @dblclick="addVehicle(vehicle)"
+        </select>
-          @keydown.enter="onVehicleSelect(vehicle)"
+      </div>
          tabindex="0"
        >
          <img
            loading="lazy"
            width="120"
            :src="getThumbnailURL(vehicle.type, 'small')"
            @error="onThumbnailImageError"
          />
-          <span>
+      <div class="action action-select">
-            <span
+        <label for="sorter-type">{{ $t('wiki.labels.sort-by') }}</label>
-              class="vehicle-name"
+        <select name="sorter-type" id="sorter-type" v-model="sorterType">
-              :class="{
+          <option v-for="sorter in sorters" :key="sorter" :value="sorter">
-                'sponsor-only':
+            {{ $t(`wiki.sort-by.${sorter}`) }}
-                  vehicle.sponsorOnlyTimestamp && vehicle.sponsorOnlyTimestamp > Date.now(),
+          </option>
-                'team-only': vehicle.teamOnly,
+        </select>
-              }"
+      </div>
            >
              <b>{{ vehicle.type.replace(/_/g, ' ') }}</b>
            </span>
-            <div class="vehicle-group">
+      <div class="action action-select">
-              {{ $t(`wiki.${vehicle.group}`) }} |
+        <label for="sorter-direction">{{ $t('wiki.labels.sort-direction') }}</label>
              {{ isTractionUnit(vehicle) ? vehicle.cabinType : vehicle.constructionType }}
            </div>
-            <div class="vehicle-props">
+        <select name="sorter-direction" id="sorter-direction" v-model="sorterDirection">
-              {{ vehicle.length }}m | {{ (vehicle.weight / 1000).toFixed(1) }}t |
+          <option value="asc">{{ $t('wiki.sort-direction.asc') }}</option>
-              {{ vehicle.maxSpeed }}km/h
+          <option value="desc">{{ $t('wiki.sort-direction.desc') }}</option>
-            </div>
+        </select>
          </span>
        </li>
      </ul>
      <div class="no-vehicles-warning" v-if="computedVehicles.length == 0">
        {{ $t('wiki.no-vehicles') }}
      </div>
    </div>
    <div class="no-vehicles-warning" v-if="computedVehicles.length == 0">
      {{ $t('wiki.no-vehicles') }}
    </div>
    <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')" @error="onThumbnailImageError" />
        <span>
          <span
            class="vehicle-name"
            :class="{
              'sponsor-only': vehicle.sponsorOnlyTimestamp && vehicle.sponsorOnlyTimestamp > Date.now(),
              'team-only': vehicle.teamOnly,
            }"
          >
            <b>{{ vehicle.type.replace(/_/g, ' ') }}</b>
          </span>
          <div class="vehicle-group">
            {{ $t(`wiki.${vehicle.group}`) }} |
            {{ isTractionUnit(vehicle) ? vehicle.cabinType : vehicle.constructionType }}
          </div>
          <div class="vehicle-props">{{ vehicle.length }}m | {{ (vehicle.weight / 1000).toFixed(1) }}t | {{ vehicle.maxSpeed }}km/h</div>
        </span>
      </li>
    </ul>
  </section>
 </template>
@@ -166,7 +155,7 @@ export default defineComponent({
    onThumbnailImageError(e: Event) {
      const el = e.target as HTMLImageElement;
-      
+
      if (el.src == '/images/no-vehicle-image.png') return;
      el.src = '/images/no-vehicle-image.png';
    },
@@ -181,11 +170,7 @@ export default defineComponent({
    },
    filterVehicles(v: IVehicle) {
-      if (
+      if (this.searchedVehicleTypeName != '' && !v.type.toLocaleLowerCase().includes(this.searchedVehicleTypeName.toLocaleLowerCase())) return false;
        this.searchedVehicleTypeName != '' &&
        !v.type.toLocaleLowerCase().includes(this.searchedVehicleTypeName.toLocaleLowerCase())
      )
        return false;
      switch (this.filterType) {
        case VehicleFilter.AllTractions:
@@ -245,6 +230,14 @@ export default defineComponent({
 <style lang="scss" scoped>
@use '@/styles/tab';
@use '@/styles/responsive';
 .wiki-list-tab {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.5em;
  overflow: hidden;
 }
 .actions {
  display: grid;
@@ -283,10 +276,7 @@ export default defineComponent({
  gap: 0.5em;
  overflow: auto;
-  max-height: 730px;
+  margin-top: 1em;
  margin-top: 0.75em;
  padding: 0.25em;
 }
 .vehicles > li {
@@ -296,7 +286,6 @@ export default defineComponent({
  background-color: #161c2e;
  padding: 0.5em;
  min-height: 75px;
  cursor: pointer;
  &[data-preview='true'] {
@@ -318,7 +307,7 @@ export default defineComponent({
 }
 .sponsor-only {
-  color: global.$sponsorColor;
+  color: var(--accentColor);
  &::after {
    content: '*';
@@ -326,7 +315,7 @@ export default defineComponent({
 }
 .team-only {
-  color: global.$teamColor;
+  color: var(--teamColor);
  &::after {
    content: '*';
@@ -339,11 +328,17 @@ export default defineComponent({
 .no-vehicles-warning {
  text-align: center;
  width: 100%;
  padding: 1em;
  background-color: #161c2e;
 }
-@media screen and (max-width: global.$breakpointSm) {
+@include responsive.midScreen {
  .vehicles {
    height: 100vh;
    min-height: 400px;
  }
  .actions-panel {
    align-items: stretch;
    flex-direction: column;
@@ -1,20 +1,12 @@
 <template>
  <div class="stock_actions">
    <div class="actions-top">
-      <button
+      <button class="btn btn--image" @click="clickFileInput" :data-button-tooltip="$t('stocklist.action-upload-file')">
        class="btn btn--image"
        @click="clickFileInput"
        :data-button-tooltip="$t('stocklist.action-upload-file')"
      >
        <input type="file" @change="uploadStockFromFile" ref="conFile" accept=".con,.txt" />
        <FolderUp :stroke-width="2.5" />
      </button>
-      <button
+      <button class="btn btn--image" @click="uploadStockFromClipboard" :data-button-tooltip="$t('stocklist.action-upload-clipboard')">
        class="btn btn--image"
        @click="uploadStockFromClipboard"
        :data-button-tooltip="$t('stocklist.action-upload-clipboard')"
      >
        <ClipboardPaste :stroke-width="2.5" />
      </button>
@@ -115,10 +107,11 @@ import { defineComponent } from 'vue';
 import { useStore } from '../../../store';
 import { isTractionUnit } from '../../../utils/vehicleUtils';
 import { useFileUtils } from '../../../utils/fileUtils';
 import stockMixin from '../../../mixins/stockMixin';
 import { useStockListUtils } from '../../../utils/stockListUtils';
 import { getCurrentStockFileName } from '../../../composables/file';
 import {
  Bookmark,
  ChevronDown,
@@ -157,12 +150,11 @@ export default defineComponent({
  }),
  setup() {
    const fileUtils = useFileUtils();
    const stockListUtils = useStockListUtils();
    return {
      fileUtils,
      stockListUtils,
      getCurrentStockFileName,
    };
  },
@@ -202,8 +194,7 @@ export default defineComponent({
        availableIndexes.splice(i, -1);
-        const randAvailableIndex =
+        const randAvailableIndex = availableIndexes[Math.floor(Math.random() * availableIndexes.length)];
          availableIndexes[Math.floor(Math.random() * availableIndexes.length)];
        const tempSwap = this.store.stockList[randAvailableIndex];
        this.store.stockList[randAvailableIndex] = this.store.stockList[i];
@@ -216,9 +207,7 @@ export default defineComponent({
      const isFirstTractionUnit = isTractionUnit(this.store.stockList[0].vehicleRef);
-      const sliceToSwap = isFirstTractionUnit
+      const sliceToSwap = isFirstTractionUnit ? this.store.stockList.slice(1) : this.store.stockList.slice();
        ? this.store.stockList.slice(1)
        : this.store.stockList.slice();
      sliceToSwap.reverse();
@@ -230,7 +219,7 @@ export default defineComponent({
    downloadStock() {
      if (this.store.stockList.length == 0) return alert(this.$t('stocklist.alert-empty'));
-      const defaultName = this.fileUtils.getCurrentStockFileName();
+      const defaultName = this.getCurrentStockFileName();
      const fileName = prompt(this.$t('stocklist.prompt-file'), defaultName);
      if (!fileName) return;
@@ -273,7 +262,7 @@ export default defineComponent({
    saveStockDataToStorage() {
      if (this.store.stockList.length == 0) return;
-      const defaultName = this.fileUtils.getCurrentStockFileName();
+      const defaultName = this.getCurrentStockFileName();
      const entryName = prompt(this.$t('stocklist.prompt-bookmark'), defaultName);
      if (!entryName) return;
@@ -307,6 +296,8 @@ export default defineComponent({
        const content = await navigator.clipboard.readText();
        this.loadStockFromString(content);
      } catch (error) {
        console.error(error);
        switch (error) {
          case 'stock-loading-error':
            alert(this.$t('stocklist.stock-loading-error'));
@@ -2,15 +2,16 @@
  <div class="list-wrapper">
    <StockThumbnails :onListItemClick="onListItemClick" />
-    <div v-if="stockIsEmpty" class="list-empty">
+    <ul>
      <div class="stock-info">{{ $t('stocklist.list-empty') }}</div>
    </div>
    <ul v-else>
      <transition-group name="stock-list-anim">
        <li v-if="stockIsEmpty" class="list-empty">
          {{ $t('stocklist.list-empty') }}
        </li>
        <li
          v-for="(stock, i) in store.stockList"
          :key="stock.id"
          class="stock-item"
          :class="{ loco: isTractionUnit(stock.vehicleRef) }"
          tabindex="0"
          @click="onListItemClick(i)"
@@ -20,13 +21,7 @@
          @keydown.backspace="stockListUtils.removeStock(i)"
          ref="itemRefs"
        >
-          <div
+          <div class="stock-info" @dragstart="onDragStart(i)" @drop="onDrop($event, i)" @dragover="allowDrop" draggable="true">
            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 }}.
@@ -34,17 +29,10 @@
            <span
              class="stock-info-type"
-              :data-sponsor-only="
+              :data-sponsor-only="stock.vehicleRef.sponsorOnlyTimestamp && stock.vehicleRef.sponsorOnlyTimestamp > Date.now()"
                stock.vehicleRef.sponsorOnlyTimestamp &&
                stock.vehicleRef.sponsorOnlyTimestamp > Date.now()
              "
              :data-team-only="stock.vehicleRef.teamOnly"
            >
-              {{
+              {{ isTractionUnit(stock.vehicleRef) ? stock.vehicleRef.type : getCarSpecFromType(stock.vehicleRef.type) }}
                isTractionUnit(stock.vehicleRef)
                  ? stock.vehicleRef.type
                  : getCarSpecFromType(stock.vehicleRef.type)
              }}
            </span>
            <span class="stock-info-cargo" v-if="stock.cargo">
@@ -53,9 +41,7 @@
            <span class="stock-info-length">{{ stock.vehicleRef.length }}m</span>
-            <span class="stock-info-mass">
+            <span class="stock-info-mass"> {{ ((stock.vehicleRef.weight + (stock.cargo?.weight ?? 0)) / 1000).toFixed(1) }}t </span>
              {{ ((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>
@@ -123,10 +109,7 @@ export default defineComponent({
      const stock = this.store.stockList[stockID];
      this.store.chosenStockListIndex =
-        this.store.chosenStockListIndex == stockID &&
+        this.store.chosenStockListIndex == stockID && this.store.chosenVehicle?.type == stock.vehicleRef.type ? -1 : stockID;
        this.store.chosenVehicle?.type == stock.vehicleRef.type
          ? -1
          : stockID;
      if (this.store.chosenStockListIndex == -1) {
        this.store.chosenVehicle = null;
@@ -154,27 +137,32 @@ export default defineComponent({
 </script>
 <style lang="scss" scoped>
@use '@/styles/responsive';
 .list-wrapper {
  display: grid;
  grid-template-rows: auto 1fr;
  position: relative;
  overflow: hidden;
 }
 .list-empty {
-  background-color: global.$secondaryColor;
+  background-color: var(--secondaryColor);
  border-radius: 0.5em;
  padding: 0.75em;
  font-weight: bold;
  width: 100%;
 }
 ul {
-  overflow-y: scroll;
+  overflow-y: auto;
  height: 500px;
 }
 ul > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
-  min-width: 500px;
+  white-space: nowrap;
  margin: 0.25em 0;
@@ -202,14 +190,14 @@ li > .stock-info {
 .stock-info-no,
 .stock-info-type {
-  background-color: global.$secondaryColor;
+  background-color: var(--secondaryColor);
  &[data-team-only='true'] {
-    color: global.$teamColor;
+    color: var(--teamColor);
  }
  &[data-sponsor-only='true'] {
-    color: global.$sponsorColor;
+    color: var(--accentColor);
  }
 }
@@ -218,7 +206,7 @@ li > .stock-info {
  text-align: right;
  &[data-selected='true'] {
-    color: global.$accentColor;
+    color: var(--accentColor);
  }
 }
@@ -253,9 +241,10 @@ li > .stock-info {
  }
 }
-@media screen and (max-width: global.$breakpointMd) {
+@include responsive.midScreen {
  ul {
-    min-height: auto;
+    height: 100vh;
    min-height: 400px;
  }
 }
 </style>
@@ -199,11 +199,11 @@ ul {
  }
  &[data-sponsor-only='true'] > b {
-    color: global.$sponsorColor;
+    color: var(--accentColor);
  }
  &[data-team-only='true'] > b {
-    color: global.$teamColor;
+    color: var(--teamColor);
  }
  img {
@@ -1,23 +1,31 @@
 <template>
  <div class="stock_warnings" v-if="hasAnyWarnings">
-    <div class="warning" v-if="locoNotSuitable">(!) {{ $t('stocklist.warning-not-suitable') }}</div>
+    <div class="warning" v-if="locoNotSuitable"><TriangleAlertIcon :size="20" :stroke-width="2" /> {{ $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">
      <TriangleAlertIcon :size="20" :stroke-width="2" /> {{ $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="lengthExceeded && !store.isTrainPassenger">
      <TriangleAlertIcon :size="20" :stroke-width="2" /> {{ $t('stocklist.warning-freight-too-long') }}
    </div>
    <div class="warning" v-if="teamOnlyVehicles.length > 0">
-      (!)
+      <TriangleAlertIcon :size="20" :stroke-width="2" />
      {{ $t('stocklist.warning-team-only-vehicle', [teamOnlyVehicles.map((v) => v.vehicleRef.type).join(', ')]) }}
    </div>
    <div class="warning" v-if="store.cargoWarnings.size > 0">
-      (!) <b>{{ $t('cargo-warnings.title') }}</b>
+      <TriangleAlertIcon :size="20" :stroke-width="2" /> <b>{{ $t('cargo-warnings.title') }}</b>
      {{ [...store.cargoWarnings].map((v) => $t(`cargo-warnings.${v}`)).join('; ') }}
    </div>
    <div class="warning" v-if="!isRearPRSM4">
      <TriangleAlertIcon :size="20" :stroke-width="2" /> {{ $t('stocklist.warning-prsm4-not-at-the-rear') }}
    </div>
    <div class="warning" v-if="weightExceeded">
-      (!)
+      <TriangleAlertIcon :size="20" :stroke-width="2" />
      <i18n-t keypath="stocklist.warning-too-heavy">
        <template #href>
          <a target="_blank" href="https://docs.google.com/spreadsheets/d/1BvTU-U7huIaEheov22TrhTtROUM4MwVfdbq03GVAEM8">
@@ -26,10 +34,6 @@
        </template>
      </i18n-t>
    </div>
    <!-- <div class="warning" v-if="locoCountExceeded">
          {{ $t('stocklist.warning-too-many-locos') }}
        </div> -->
  </div>
 </template>
@@ -37,8 +41,11 @@
 import { defineComponent } from 'vue';
 import { useStore } from '../../../store';
 import { isTractionUnit } from '../../../utils/vehicleUtils';
 import { TriangleAlertIcon } from 'lucide-vue-next';
 export default defineComponent({
  components: { TriangleAlertIcon },
  data: () => ({
    store: useStore(),
  }),
@@ -68,6 +75,14 @@ export default defineComponent({
        this.store.stockList.some((stock) => isTractionUnit(stock.vehicleRef) && stock.vehicleRef.type.startsWith('EP'))
      );
    },
    isRearPRSM4() {
      if (this.store.stockList.length <= 1) return true;
      const index = this.store.stockList.findIndex((stock) => stock.vehicleRef.type.startsWith('PRSM4'));
      return index != -1 ? index == this.store.stockList.length - 1 : true;
    },
  },
 });
 </script>
@@ -76,11 +91,15 @@ export default defineComponent({
 .warning {
  padding: 0.25em;
  margin: 0.25em 0;
-  background: global.$accentColor;
+  background: var(--accentColor);
  color: black;
  font-weight: bold;
  .lucide {
    vertical-align: text-bottom;
  }
  a {
    color: black;
    text-decoration: underline;
@@ -0,0 +1,51 @@
 import { useStore } from '../store';
 import { additionalCargoTypes } from '../utils/vehicleUtils';
 export function getCurrentStockFileName() {
  const store = useStore();
  let fileName = '';
  if (store.chosenStorageStockName.trim() != '') {
    return store.chosenStorageStockName;
  }
  const currentStockString = store.stockList.map((s) => s.vehicleRef.type).join(';');
  const currentRealComp = store.realCompositionList.find((rc) => rc.stockString == currentStockString);
  // Append real composition to the name if chosen
  if (currentRealComp != undefined) {
    fileName += `${currentRealComp.stockId} `;
  }
  // Append default props
  fileName += `${store.stockList[0].vehicleRef.type} ${(store.totalWeight / 1000).toFixed(1)}t; ${store.totalLength}m; vmax ${store.maxStockSpeed}`;
  return fileName;
 }
 // UNUSED - PARSES ADDITIONAL CARGO FOR INTERMODALS
 export function getStockStringOutput() {
  const store = useStore();
  const stockEntries = store.stockString.split(';');
  const parsedEntries = store.stockList.map((stockVehicle, i) => {
    if (stockVehicle.cargo && /412Z|627Z/.test(stockVehicle.vehicleRef.constructionType)) {
      const additionalCargo = additionalCargoTypes.find(
        (c) => c.groupType == stockVehicle.vehicleRef.constructionType && c.id == stockVehicle.cargo!.id
      );
      if (additionalCargo) {
        let cargoString = additionalCargo.cargoStringVariations[Math.floor(Math.random() * additionalCargo.cargoStringVariations.length)];
        return stockEntries[i].replace(stockVehicle.cargo.id, cargoString);
      }
    }
    return stockEntries[i];
  });
  return parsedEntries.join(';');
 }
@@ -1,198 +1,32 @@
 {
  "cargo": {
-    "kontenery": [
+    "containers": ["412Z:sc_20", "412Z:sc_40", "627Z:sc_20", "627Z:sc_40"],
-      "412Z:sc_20_red",
+    "food": ["412Z:tc_20_loaded", "627Z:tc_20_loaded"],
-      "412Z:sc_20_blue",
+    "food-empty": ["412Z:tc_20_empty", "627Z:tc_20_empty"],
-      "412Z:sc_20_green",
+    "intermodal": [
-      "412Z:sc_20_APL",
+      "627Z:sc_20",
-      "412Z:sc_20_CMA",
+      "627Z:sc_40",
-      "412Z:sc_20_Cosco",
+      "627Z:tc_20_empty",
-      "412Z:sc_20_Evr1",
+      "627Z:tc_20_loaded",
      "412Z:sc_20_Evr2",
      "412Z:sc_20_Finnlines",
      "412Z:sc_20_Hamburg",
      "412Z:sc_20_Hanjin",
      "412Z:sc_20_HapagLloyd",
      "412Z:sc_20_HMM",
      "412Z:sc_20_KLine",
      "412Z:sc_20_Maersk",
      "412Z:sc_20_ONE",
      "412Z:sc_20_OOCL",
      "412Z:sc_20_Schavemaker",
      "412Z:sc_20_TD2",
      "412Z:sc_20_Titan",
      "412Z:sc_20_Toll",
      "412Z:sc_40_red",
      "412Z:sc_40_blue",
      "412Z:sc_40_green",
      "412Z:sc_40_APL",
      "412Z:sc_40_CMA",
      "412Z:sc_40_Cosco",
      "412Z:sc_40_Evr1",
      "412Z:sc_40_Evr2",
      "412Z:sc_40_Finnlines",
      "412Z:sc_40_Hamburg",
      "412Z:sc_40_Hanjin",
      "412Z:sc_40_HapagLloyd",
      "412Z:sc_40_HMM",
      "412Z:sc_40_KLine",
      "412Z:sc_40_Maersk",
      "412Z:sc_40_ONE",
      "412Z:sc_40_OOCL",
      "412Z:sc_40_Schavemaker",
      "412Z:sc_40_TD2",
      "412Z:sc_40_Titan",
      "412Z:sc_40_Toll",
      "612Z:sc_20",
      "612Z:sc_20_red",
      "612Z:sc_20_blue",
      "612Z:sc_20_green",
      "612Z:sc_20_APL",
      "612Z:sc_20_CMA",
      "612Z:sc_20_Cosco",
      "612Z:sc_20_Evr1",
      "612Z:sc_20_Evr2",
      "612Z:sc_20_Finnlines",
      "612Z:sc_20_Hamburg",
      "612Z:sc_20_Hanjin",
      "612Z:sc_20_HapagLloyd",
      "612Z:sc_20_HMM",
      "612Z:sc_20_KLine",
      "612Z:sc_20_Maersk",
      "612Z:sc_20_ONE",
      "612Z:sc_20_OOCL",
      "612Z:sc_20_Schavemaker",
      "612Z:sc_20_TD2",
      "612Z:sc_20_Titan",
      "612Z:sc_20_Toll",
      "612Z:sc_40_red",
      "612Z:sc_40",
      "612Z:sc_40_blue",
      "612Z:sc_40_green",
      "612Z:sc_40_APL",
      "612Z:sc_40_CMA",
      "612Z:sc_40_Cosco",
      "612Z:sc_40_Evr1",
      "612Z:sc_40_Evr2",
      "612Z:sc_40_Finnlines",
      "612Z:sc_40_Hamburg",
      "612Z:sc_40_Hanjin",
      "612Z:sc_40_HapagLloyd",
      "612Z:sc_40_HMM",
      "612Z:sc_40_KLine",
      "612Z:sc_40_Maersk",
      "612Z:sc_40_ONE",
      "612Z:sc_40_OOCL",
      "612Z:sc_40_Schavemaker",
      "612Z:sc_40_TD2",
      "612Z:sc_40_Titan",
      "612Z:sc_40_Toll"
    ],
    "biomasa": [
      "412Z:wt_20_biomass",
      "412Z:wt_20_mix_black_green_biomass",
      "412Z:wt_20_mix_blue_biomass",
      "412Z:wt_20_mix_blue_CDC_white_biomass",
      "412Z:wt_20_mix_blue_white_biomass",
      "412Z:wt_20_mix_EPC_biomass",
      "412Z:wt_20_mix_green_biomass",
      "412Z:wt_20_black_biomass",
      "412Z:wt_20_blue_biomass",
      "412Z:wt_20_blue_gr_biomass",
      "412Z:wt_20_blue_gr_r_biomass",
      "412Z:wt_20_CDC_biomass",
      "412Z:wt_20_EPC_black_biomass",
      "412Z:wt_20_EPC_red_biomass",
      "412Z:wt_20_green_new_biomass",
      "412Z:wt_20_green_old_biomass",
      "412Z:wt_20_white_new_biomass",
      "412Z:wt_20_white_old_biomass",
      "412Z:wt_20_white_old_gr_biomass",
      "412Z:wt_20_white_old_gr_r_biomass",
      "627Z:wt_20_biomass",
      "627Z:wt_20_mix_black_green_biomass",
      "627Z:wt_20_mix_blue_biomass",
      "627Z:wt_20_mix_blue_CDC_white_biomass",
      "627Z:wt_20_mix_blue_white_biomass",
      "627Z:wt_20_mix_EPC_biomass",
      "627Z:wt_20_mix_green_biomass",
      "627Z:wt_20_black_biomass",
      "627Z:wt_20_blue_biomass",
      "627Z:wt_20_blue_gr_biomass",
      "627Z:wt_20_blue_gr_r_biomass",
      "627Z:wt_20_CDC_biomass",
      "627Z:wt_20_EPC_black_biomass",
      "627Z:wt_20_EPC_red_biomass",
      "627Z:wt_20_green_new_biomass",
      "627Z:wt_20_green_old_biomass",
      "627Z:wt_20_white_new_biomass",
      "627Z:wt_20_white_old_biomass",
      "627Z:wt_20_white_old_gr_biomass",
      "627Z:wt_20_white_old_gr_r_biomass"
    ],
    "biomasa-puste": [
      "412Z:wt_20_empty",
      "412Z:wt_20_mix_black_green_empty",
      "412Z:wt_20_mix_blue_empty",
      "412Z:wt_20_mix_blue_CDC_white_empty",
      "412Z:wt_20_mix_blue_white_empty",
      "412Z:wt_20_mix_EPC_empty",
      "412Z:wt_20_mix_green_empty",
      "412Z:wt_20_black_empty",
      "412Z:wt_20_blue_empty",
      "412Z:wt_20_blue_gr_empty",
      "412Z:wt_20_blue_gr_r_empty",
      "412Z:wt_20_CDC_empty",
      "412Z:wt_20_EPC_black_empty",
      "412Z:wt_20_EPC_red_empty",
      "412Z:wt_20_green_new_empty",
      "412Z:wt_20_green_old_empty",
      "412Z:wt_20_white_new_empty",
      "412Z:wt_20_white_old_empty",
      "412Z:wt_20_white_old_gr_empty",
      "412Z:wt_20_white_old_gr_r_empty",
      "627Z:wt_20_empty",
-      "627Z:wt_20_mix_black_green_empty",
+      "627Z:wt_20_biomass",
-      "627Z:wt_20_mix_blue_empty",
+      "412Z:sc_20",
-      "627Z:wt_20_mix_blue_CDC_white_empty",
+      "412Z:sc_40",
-      "627Z:wt_20_mix_blue_white_empty",
+      "412Z:tc_20_empty",
-      "627Z:wt_20_mix_EPC_empty",
+      "412Z:tc_20_loaded",
-      "627Z:wt_20_mix_green_empty",
+      "412Z:wt_20_empty",
-      "627Z:wt_20_black_empty",
+      "412Z:wt_20_biomass"
      "627Z:wt_20_blue_empty",
      "627Z:wt_20_blue_gr_empty",
      "627Z:wt_20_blue_gr_r_empty",
      "627Z:wt_20_CDC_empty",
      "627Z:wt_20_EPC_black_empty",
      "627Z:wt_20_EPC_red_empty",
      "627Z:wt_20_green_new_empty",
      "627Z:wt_20_green_old_empty",
      "627Z:wt_20_white_new_empty",
      "627Z:wt_20_white_old_empty",
      "627Z:wt_20_white_old_gr_empty",
      "627Z:wt_20_white_old_gr_r_empty"
    ],
-    "chłodnia": [
+    "biomass": ["412Z:wt_20_biomass", "627Z:wt_20_biomass"],
-      "202Lc:all"
+    "biomass-empty": [
      "412Z:wt_20_empty",
      "627Z:wt_20_empty"
    ],
-    "drobnica": [
+    "cold-storage": ["202Lc:all"],
-      "426S:all",
+    "loose-cargo": ["426S:all", "208Kf:all", "401Ka_PKP_Gags:all", "401Ka_PKPC_Gags:all"],
-      "208Kf:all",
+    "coal": ["412W:coal_01", "413S:coal_413S", "429W:coal_01", "401Zb:coal_02"],
-      "401Ka_PKP_Gags:all",
+    "ore": ["412W:ore_01", "401Zl:ore_35", "429W:ore_01"],
-      "401Ka_PKPC_Gags:all"
+    "sand": [
    ],
    "węgiel": [
      "412W:coal_01",
      "413S:coal_413S",
      "429W:coal_01",
      "401Zb:coal_02"
    ],
    "ruda": [
      "412W:ore_01",
      "401Zl:ore_35",
      "429W:ore_01"
    ],
    "piasek": [
      "412W:sand_01",
      "412W:sand_02",
      "413S:sand_413S",
@@ -200,113 +34,34 @@
      "429W:sand_01",
      "429W:sand_02",
      "401Zb:sand_03",
      "409Va:sand_409Va",
      "418Va:sand_418V",
      "418Vb:sand_418V"
    ],
-    "kreda": [
+    "chalk": ["413S:chalk_413S"],
-      "413S:chalk_413S"
+    "stone": ["412W:stone_01", "412W:stone_50", "401Zl:stone_25", "429W:stone_01", "401Zb:stone_02", "418Va:stone_418V", "418Vb:stone_418V"],
-    ],
+    "scrap": ["412W:scrap_01", "412W:scrap_02", "429W:scrap_01", "429W:scrap_02"],
-    "kamień": [
+    "fuel": ["29R_CTLL:all", "29R_PKP:all", "445Rb:all"],
-      "412W:stone_01",
+    "molasses": ["29R_PLPOL:all"],
-      "412W:stone_50",
+    "gravel": ["441V"],
-      "401Zl:stone_25",
+    "wheels": ["424Z:wheels_01"],
-      "429W:stone_01",
+    "wood": ["424Z:woods_01", "424Z:woods_02"],
-      "401Zb:stone_02",
+    "rails": ["424Z:rails_01"],
-      "418Va:stone_418V",
+    "cables": ["424Z:cables_01", "24Z:cables_Ks", "401Ze:cables_02"],
-      "418Vb:stone_418V"
+    "aggregate": ["59WS:all"],
-    ],
+    "technical": ["209c", "304Ca", "102a_PKPE", "401Ka_PKP_XGa:all"],
-    "złom": [
+    "mail": ["211K:all"],
-      "412W:scrap_01",
+    "concrete": ["408S:cement_4", "206S_CEMET:cement_3", "206S_SPEED:cement_3", "220S_CEMET:cement_3"],
-      "412W:scrap_02",
+    "lime": ["408S:lime_4", "206S_CEMET:lime_3", "206S_SPEED:lime_3", "220S_CEMET:lime_3"],
-      "429W:scrap_01",
+    "soda": ["408S:soda_4", "206S_CEMET:soda_3", "206S_SPEED:soda_3", "220S_CEMET:soda_3"],
-      "429W:scrap_02"
+    "wheat": ["206Sh_PKP_Ugpps:wheat_3", "206Sh_PKPC_Ugpps:wheat_3"],
-    ],
+    "corn": ["206Sh_PKP_Ugpps:corn_3", "206Sh_PKPC_Ugpps:corn_3"],
-    "paliwo": [
+    "fodder": ["206Sh_PKP_Ugpps:forage_3", "206Sh_PKPC_Ugpps:forage_3"],
-      "29R_CTLL:all",
+    "military": ["426Z:tank_01", "426Z:truck_01", "426Z:vehicles_01"],
-      "29R_PKP:all",
+    "vehicles_nysa": ["424Z:vehicles_nysa", "426Z:vehicles_02"],
-      "445Rb:all"
+    "carbide": ["421S:carbide_01"],
-    ],
+    "sensitive": ["425S:all", "421S:carbide_01"],
-    "melasa": [
+    "steel": ["401Ze:steel_01", "401Ze:steel_02"],
-      "29R_PLPOL:all"
+    "gas": ["WB117:all"]
    ],
    "żwir": [
      "441V"
    ],
    "koła": [
      "424Z:wheels_01"
    ],
    "drewno": [
      "424Z:woods_01",
      "424Z:woods_02"
    ],
    "szyny": [
      "424Z:rails_01"
    ],
    "kable": [
      "424Z:cables_01",
      "24Z:cables_Ks",
      "401Ze:cables_02"
    ],
    "kruszywo": [
      "59WS:all"
    ],
    "techniczne": [
      "209c",
      "304Ca",
      "102a_PKPE",
      "401Ka_PKP_XGa:all"
    ],
    "poczta": [
      "211K:all"
    ],
    "cement": [
      "408S:cement_4",
      "206S_CEMET:cement_3",
      "206S_SPEED:cement_3",
      "220S_CEMET:cement_3"
    ],
    "wapno": [
      "408S:lime_4",
      "206S_CEMET:lime_3",
      "206S_SPEED:lime_3",
      "220S_CEMET:lime_3"
    ],
    "soda": [
      "408S:soda_4",
      "206S_CEMET:soda_3",
      "206S_SPEED:soda_3",
      "220S_CEMET:soda_3"
    ],
    "pszenica": [
      "206Sh_PKP_Ugpps:wheat_3",
      "206Sh_PKPC_Ugpps:wheat_3"
    ],
    "kukurydza": [
      "206Sh_PKP_Ugpps:corn_3",
      "206Sh_PKPC_Ugpps:corn_3"
    ],
    "pasza": [
      "206Sh_PKP_Ugpps:forage_3",
      "206Sh_PKPC_Ugpps:forage_3"
    ],
    "pojazdy": [
      "426Z:tank_01",
      "426Z:truck_01",
      "426Z:vehicles_01"
    ],
    "karbid": [
      "421S:carbide_01"
    ],
    "wrażliwe": [
      "425S:all",
      "421S:carbide_01"
    ],
    "stal": [
      "401Ze:steel_01",
      "401Ze:steel_02"
    ],
    "gaz": [
      "WB117:all"
    ]
  }
-}
+}
@@ -1,10 +1,23 @@
-import axios from 'axios';
+export class HttpClient {
  constructor(private readonly baseURL: string) {}
-const http = axios.create({
+  async get<T>(url: string, params?: Record<string, any>): Promise<T> {
-  baseURL:
+    const absoluteURL = new URL(this.baseURL + '/' + url);
    import.meta.env.VITE_API_DEV === '1' && import.meta.env.DEV
      ? 'http://localhost:3001'
      : 'https://stacjownik.spythere.eu',
 });
-export default http;
+    if (params) {
      Object.keys(params).forEach((key) => {
        if (params[key] === undefined) return;
        absoluteURL.searchParams.append(key, params[key]);
      });
    }
    const data = await fetch(absoluteURL);
    if (!data.ok) {
      throw new Error(`Cannot fetch: ${absoluteURL}`);
    }
    return data.json();
  }
 }
@@ -84,6 +84,7 @@
    "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})",
    "warning-prsm4-not-at-the-rear": "PRSM4 welding car must be at the end of a train!",
    "acceptable-mass-docs": "acceptable rolling stock masses (PL)",
    "stock-loading-error": "An error occurred: cannot parse data from the file - make sure it's in a proper format!",
    "stock-clipboard-error": "An error occurred: cannot read data from the clipboard - make sure the site has been granted right permissions for this action!"
@@ -135,7 +136,7 @@
    "categories": {
      "EI": "EI - domestic express",
      "EC": "EC - international express",
-      "EN": "EN - domestic night express",
+      "EN": "EN - international night express",
      "MP": "MP - intervoivodeship bullet",
      "MO": "MO - intervoivodeship regio",
      "MM": "MM - international bullet",
@@ -220,38 +221,42 @@
    "stock-title": "Rolling stock:"
  },
  "cargo": {
-    "kontenery": "containers",
+    "containers": "containers",
-    "biomasa": "biomass",
+    "food": "food tanks",
-    "biomasa-puste": "biomass (empty)",
+    "food-empty": "food tanks (empty)",
-    "chłodnia": "refrigerator",
+    "biomass": "biomass",
-    "drobnica": "loose cargo",
+    "biomass-empty": "biomass (empty)",
-    "węgiel": "coal",
+    "cold-storage": "cold storage",
-    "ruda": "ore",
+    "loose-cargo": "loose cargo",
-    "piasek": "sand",
+    "coal": "coal",
-    "kreda": "chalk",
+    "ore": "ore",
-    "kamień": "stone",
+    "sand": "sand",
-    "złom": "scrap",
+    "chalk": "chalk",
-    "paliwo": "fuel",
+    "stone": "stone",
-    "melasa": "molasses",
+    "scrap": "scrap",
-    "żwir": "gravel",
+    "fuel": "fuel",
-    "koła": "wheels",
+    "molasses": "molasses",
-    "drewno": "wood",
+    "gravel": "gravel",
-    "szyny": "rails",
+    "wheels": "wheels",
-    "kable": "cables",
+    "wood": "wood",
-    "kruszywo": "aggregate",
+    "rails": "rails",
-    "techniczne": "technical",
+    "cables": "cables",
-    "poczta": "mail",
+    "aggregate": "aggregate",
-    "cement": "concrete",
+    "technical": "technical",
-    "wapno": "lime",
+    "mail": "mail",
    "concrete": "concrete",
    "lime": "lime",
    "soda": "soda",
-    "pszenica": "wheat",
+    "wheat": "wheat",
-    "kukurydza": "corn",
+    "corn": "corn",
-    "pasza": "fodder",
+    "fodder": "fodder",
-    "karbid": "carbide",
+    "carbide": "carbide",
-    "pojazdy": "vehicles",
+    "vehicles_nysa": "vehicles (nysa)",
-    "wrażliwe": "sensitive",
+    "military": "vehicles (military)",
-    "stal": "steel",
+    "sensitive": "sensitive",
-    "gaz": "gas"
+    "steel": "steel",
    "gas": "gas",
    "intermodal": "intermodalne"
  },
  "usage": {
    "Gor89": "passenger carriage",
@@ -303,6 +308,7 @@
    "401Ze_PKESA": "concrete panels, cable reels, steel",
    "401Zl": "heavy loose cargo",
    "408S": "cement, lime, fly ash, slag",
    "409Va": "loose cargo (sand)",
    "412W": "loose cargo, coal",
    "412Z": "containers",
    "413S": "coal, chalk, sand",
@@ -312,6 +318,7 @@
    "426Z": "solid cargo, vehicles",
    "426S": "loose cargo",
    "429W": "weatherproof cargo (coal, ore)",
    "411V": "loose cargo (track ballast)",
    "441V": "hard coal, gravel",
    "627Z": "containers",
    "WB117": "gas, gas mixtures",
@@ -324,15 +331,25 @@
    "418Vb_PKPC": "loose cargo (sand, stone)",
    "418Vb_WIEBE": "loose cargo (sand, stone)",
    "418Vb_ZOS": "loose cargo (sand, stone)",
-    "418Vb_ZUE": "loose cargo (sand, stone)"
+    "418Vb_ZUE": "loose cargo (sand, stone)",
    "PRSM4": "rail welding car",
    "Luban_XH_short": "short residential car",
    "Luban_XH_long": "long residential car",
    "Luban_XH_workshop": "workshop car",
    "EDK80": "railway crane car"
  },
  "cargo-warnings": {
    "title": "Rolling stock containing extra cargo warnings:",
    "warning_wt_20_pn": "PN: exceeded gauge (Innofreight - C45)",
    "warning_un1965_twr": "TWR: LPG (UN 1965)",
    "warning_un1965_tn": "TN: LPG - empty tank (UN 1965)",
-    "warning_un1202_twr": "TWR: diesel fuel (UN 1202)",
+    "warning_un1202_tn": "TN: diesel fuel (UN 1202)",
-    "warning_un1202_tn": "TN: diesel fuel - empty tank (UN 1202)",
+    "warning_military_pn": "PN: military transport",
-    "warning_military_pn": "PN: military transport"
+    "warning_edk80_pn": "PN: railway crane EDK80"
  },
  "migrate-info": {
    "line-1": "Pojazdownik is being moved to a new domain - {0}! You can still use the current website, but it will no longer be updated and will be shut down in the nearest future!",
    "link": "https://pojazdownik-td2.spythere.eu/",
    "accept-btn": "ROGER THAT!"
  }
-}
+}
@@ -84,6 +84,7 @@
    "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})",
    "warning-prsm4-not-at-the-rear": "Zgrzewarka PRSM4 może znajdować się jedynie na końcu składu w przypadku jazdy pociągowej!",
    "acceptable-mass-docs": "dopuszczalne masy składów",
    "stock-loading-error": "Wystąpił błąd: nie można przetworzyć danych ze schowka! Upewnij się, że są one w poprawnym formacie!",
    "stock-clipboard-error": "Wystąpił błąd: nie można odczytać danych ze schowka! Upewnij się, że nadałeś uprawnienia stronie do tej akcji!"
@@ -135,7 +136,7 @@
    "categories": {
      "EI": "EI - ekspres krajowy",
      "EC": "EC - ekspres międzynarodowy",
-      "EN": "EN - ekspres krajowy nocny",
+      "EN": "EN - ekspres międzynarodowy nocny",
      "MP": "MP - międzywoj. pośpieszny",
      "RP": "RP - wojewódzki pośpieszny",
      "MO": "MO - międzywoj. osobowy",
@@ -220,38 +221,42 @@
    "stock-title": "Skład:"
  },
  "cargo": {
-    "kontenery": "kontenery",
+    "containers": "kontenery",
-    "biomasa": "biomasa",
+    "food": "żywność",
-    "biomasa-puste": "biomasa (puste)",
+    "food-empty": "żywność (puste)",
-    "chłodnia": "chłodnia",
+    "biomass": "biomasa",
-    "drobnica": "drobnica",
+    "biomass-empty": "biomasa (puste)",
-    "węgiel": "węgiel",
+    "cold-storage": "chłodnia",
-    "ruda": "ruda",
+    "loose-cargo": "drobnica",
-    "piasek": "piasek",
+    "coal": "węgiel",
-    "kreda": "kreda",
+    "ore": "ruda",
-    "kamień": "kamień",
+    "sand": "piasek",
-    "złom": "złom",
+    "chalk": "kreda",
-    "paliwo": "paliwo",
+    "stone": "kamień",
-    "melasa": "melasa",
+    "scrap": "złom",
-    "żwir": "żwir",
+    "fuel": "paliwo",
-    "koła": "koła",
+    "molasses": "melasa",
-    "drewno": "drewno",
+    "gravel": "żwir",
-    "szyny": "szyny",
+    "wheels": "koła",
-    "kable": "kable",
+    "wood": "drewno",
-    "kruszywo": "kruszywo",
+    "rails": "szyny",
-    "techniczne": "techniczne",
+    "cables": "kable",
-    "poczta": "poczta",
+    "aggregate": "kruszywo",
-    "cement": "cement",
+    "technical": "techniczne",
-    "wapno": "wapno",
+    "mail": "poczta",
    "concrete": "cement",
    "lime": "wapno",
    "soda": "soda",
-    "pszenica": "pszenica",
+    "wheat": "pszenica",
-    "kukurydza": "kukurydza",
+    "corn": "kukurydza",
-    "pasza": "pasza",
+    "fodder": "pasza",
-    "karbid": "karbid",
+    "carbide": "karbid",
-    "pojazdy": "pojazdy",
+    "vehicles_nysa": "pojazdy (nysa)",
-    "wrażliwe": "wrażliwe",
+    "military": "pojazdy (wojsko)",
-    "stal": "stal",
+    "sensitive": "wrażliwe",
-    "gaz": "gaz"
+    "steel": "stal",
    "gas": "gaz",
    "intermodal": "intermodalne"
  },
  "usage": {
    "Gor89": "wagon pasażerski",
@@ -302,6 +307,7 @@
    "401Ze_PKESA": "płyty betonowe, bębny kablowe, stal",
    "401Zl": "ładunki sypkie o dużej masie usypowej",
    "408S": "cement, wapno, popioły lotne, żużel",
    "409Va": "drobnica, ładunki sypkie (piasek)",
    "412W": "drobnica, kruszywo, węgiel",
    "412Z": "kontenery",
    "413S": "węgiel, kreda, piasek",
@@ -311,6 +317,7 @@
    "426S": "drobnica",
    "426Z": "ładunki skupione, pojazdy",
    "429W": "towary masowe odporne na warunki atmosferyczne (węgiel, ruda)",
    "411V": "drobnica, ładunki sypkie (podsypka do torów)",
    "441V": "węgiel kamienny, żwir",
    "627Z": "kontenery",
    "WB117": "gaz, mieszaniny gazów",
@@ -323,15 +330,25 @@
    "418Vb_PKPC": "drobnica, ładunki sypkie (piasek, kamień)",
    "418Vb_WIEBE": "drobnica, ładunki sypkie (piasek, kamień)",
    "418Vb_ZOS": "drobnica, ładunki sypkie (piasek, kamień)",
-    "418Vb_ZUE": "drobnica, ładunki sypkie (piasek, kamień)"
+    "418Vb_ZUE": "drobnica, ładunki sypkie (piasek, kamień)",
    "PRSM4": "zgrzewarka torowa",
    "Luban_XH_short": "krótki wagon mieszkalny",
    "Luban_XH_long": "długi wagon mieszkalny",
    "Luban_XH_workshop": "wagon warsztatowy",
    "EDK80": "żuraw kolejowy"
  },
  "cargo-warnings": {
    "title": "Skład z dodatkowymi uwagami przewozowymi:",
    "warning_wt_20_pn": "PN: przekroczona skrajnia (Innofreight - C45)",
    "warning_un1965_twr": "TWR: gazy węglowodorowe skroplone (UN 1965)",
    "warning_un1965_tn": "TN: gazy węglowodorowe skroplone - puste cysterny (UN 1965)",
-    "warning_un1202_twr": "TWR: olej napędowy (UN 1202)",
+    "warning_un1202_tn": "TN: olej napędowy (UN 1202)",
-    "warning_un1202_tn": "TN: olej napędowy - puste cysterny (UN 1202)",
+    "warning_military_pn": "PN: transport wojskowy",
-    "warning_military_pn": "PN: transport wojskowy"
+    "warning_edk80_pn": "PN: żuraw kolejowy EDK80"
  },
  "migrate-info": {
    "line-1": "Pojazdownik zostaje przeniesiony na nową domenę - {0}! Możesz korzystać z obecnej strony, jednak nie będzie ona otrzymywać już aktualizacji i w przyszłości zostanie wyłączona!",
    "link": "https://pojazdownik-td2.spythere.eu/",
    "accept-btn": "PRZYJĄŁEM!"
  }
-}
+}
@@ -1,16 +0,0 @@
 import http from '../http';
 import { API } from '../types/api.types';
 export class ApiManager {
  static async fetchActiveData() {
    try {
      const responseData = (await http.get<API.ActiveData>('/api/getActiveData')).data;
      return responseData;
    } catch (error) {
      console.error('Nie udało się pobrać zdalnej zawartości', error);
    }
    return null;
  }
 }
@@ -28,11 +28,7 @@ export default defineComponent({
      const stock = this.getStockObject(vehicle, cargo);
-      if (
+      if (isTractionUnit(stock.vehicleRef) && this.store.stockList.length > 0 && !isTractionUnit(this.store.stockList[0].vehicleRef))
        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);
    },
@@ -40,8 +36,7 @@ export default defineComponent({
    addLocomotive(loco: ILocomotive) {
      const stockObj = this.getStockObject(loco);
-      if (this.store.stockList.length > 0 && !isTractionUnit(this.store.stockList[0].vehicleRef))
+      if (this.store.stockList.length > 0 && !isTractionUnit(this.store.stockList[0].vehicleRef)) this.store.stockList.unshift(stockObj);
        this.store.stockList.unshift(stockObj);
      else this.store.stockList.push(stockObj);
    },
@@ -83,7 +78,20 @@ export default defineComponent({
          const [carType, cargo] = type.split(':');
          vehicle = this.store.carDataList.find((car) => car.type == carType) || null;
-          if (cargo) vehicleCargo = vehicle?.cargoTypes.find((c) => c.id == cargo) || null;
+          if (cargo) {
            vehicleCargo = vehicle?.cargoTypes.find((c) => c.id == cargo) || null;
            // UNUSED - ADDITIONAL INTERMODAL CARGO TEST
            // if (/412Z|627Z/.test(vehicle.constructionType)) {
            //   const additionalCargo = additionalCargoTypes.find(
            //     (c) => c.groupType == vehicle!.constructionType && c.cargoStringVariations.includes(cargo.join(':'))
            //   );
            //   if (additionalCargo) {
            //     cargo[0] = additionalCargo.id;
            //   }
            // }
          }
        }
        if (!vehicle && type) {
@@ -26,9 +26,11 @@ import {
  totalWeight,
 } from './utils/vehicleUtils';
 import http from './http';
 import realCompositionsJSON from './data/realCompositions.json';
 import { HttpClient } from './http';
 import { API } from './types/api.types';
 const baseURL = import.meta.env.VITE_API_DEV === '1' && import.meta.env.DEV ? 'http://localhost:3001' : 'https://stacjownik.spythere.eu';
 export const useStore = defineStore('store', {
  state: () => ({
@@ -52,6 +54,7 @@ export const useStore = defineStore('store', {
    vehiclePreviewSrc: '',
    isMigrationInfoOpen: false,
    isRandomizerCardOpen: false,
    isRealStockListCardOpen: false,
@@ -64,6 +67,8 @@ export const useStore = defineStore('store', {
    chosenStorageStockString: '',
    compatibleSimulatorVersion: '2025.1.1',
    httpClient: new HttpClient(baseURL),
  }),
  getters: {
@@ -124,8 +129,13 @@ export const useStore = defineStore('store', {
  actions: {
    async fetchVehiclesAPI() {
      try {
-        const vehiclesData = (await http.get<IVehiclesAPIResponse>('/api/getVehicles')).data;
+        const response = await this.httpClient.get<API.VehiclesData.Response>('api/getVehiclesData');
-        this.vehiclesData = vehiclesData;
+        this.vehiclesData = response.vehicles.map((v) => ({
          ...v,
          group: response.vehicleGroups.find((g) => g.id == v.vehicleGroupsId)!,
        }));
        console.log(response);
      } catch (error) {
        console.error(error);
      }
@@ -0,0 +1,19 @@
@font-face {
  font-family: 'Lato';
  src:
    url('/fonts/Lato-Bold.woff2') format('woff2'),
    url('/fonts/Lato-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
 }
@font-face {
  font-family: 'Lato';
  src:
    url('/fonts/Lato-Regular.woff2') format('woff2'),
    url('/fonts/Lato-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
 }
@@ -1,43 +1,15 @@
-$breakpointMd: 960px;
+@use 'fonts';
-$breakpointSm: 550px;
+@use 'responsive';
-$bgColor: #2b3552;
+:root {
-$bgColorDarker: #1f263b;
+  --bgColor: #2b3552;
-$textColor: #fff;
+  --bgColorDarker: #1f263b;
-$secondaryColor: #1b1b1b;
+  --textColor: #fff;
-$accentColor: #e4c428;
+  --secondaryColor: #1b1b1b;
  --accentColor: #e4c428;
-$sponsorColor: gold;
+  --sponsorColor: gold;
-$teamColor: #ff4848;
+  --teamColor: #ff4848;
@font-face {
  font-family: 'Lato';
  src:
    url('/fonts/Lato-Light.woff2') format('woff2'),
    url('/fonts/Lato-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
 }
@font-face {
  font-family: 'Lato';
  src:
    url('/fonts/Lato-Bold.woff2') format('woff2'),
    url('/fonts/Lato-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
 }
@font-face {
  font-family: 'Lato';
  src:
    url('/fonts/Lato-Regular.woff2') format('woff2'),
    url('/fonts/Lato-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
 }
 ::-webkit-scrollbar {
@@ -66,7 +38,7 @@ html {
  font-family: Lato, sans-serif;
-  background-color: $bgColor;
+  background-color: var(--bgColorDarker);
  overflow-x: hidden;
 }
@@ -81,15 +53,6 @@ a {
  text-decoration: none;
  transition: color 250ms;
  &:visited {
    color: white;
  }
  &:hover,
  &:focus {
    color: $accentColor;
  }
 }
 select,
@@ -114,11 +77,11 @@ button {
  color: white;
  &:hover {
-    color: $accentColor;
+    color: var(--accentColor);
  }
  &:focus-visible {
-    outline: 1px solid $accentColor;
+    outline: 1px solid var(--accentColor);
  }
 }
@@ -140,7 +103,7 @@ button {
    z-index: 100;
-    @media screen and (max-width: $breakpointSm) {
+    @include responsive.smallScreen {
      left: 50%;
      transform: translate(-50%, 3ex);
      text-align: center;
@@ -175,7 +138,7 @@ button {
  padding: 0.4em 0.75em;
  outline: none;
-  background-color: $secondaryColor;
+  background-color: var(--secondaryColor);
  border-radius: 8px;
  font-weight: bold;
@@ -184,25 +147,25 @@ button {
    background-color 150ms;
  &:hover {
-    color: $accentColor;
+    color: var(--accentColor);
  }
  &.btn--outline {
    background: none;
    font-weight: bold;
-    outline: 1px solid $accentColor;
+    outline: 1px solid var(--accentColor);
  }
  &:focus-visible {
-    color: $accentColor;
+    color: var(--accentColor);
    outline: 1px solid white;
  }
  &[data-chosen='true'] {
-    background-color: $accentColor;
+    background-color: var(--accentColor);
    color: black;
-    box-shadow: 0 0 5px 1px $accentColor;
+    box-shadow: 0 0 5px 1px var(--accentColor);
  }
  &[data-disabled='true'] {
@@ -250,13 +213,13 @@ button {
 }
 .link-btn.router-link-exact-active {
-  color: $accentColor;
+  color: var(--accentColor);
 }
 select,
 input[type='text'],
 input[type='number'] {
-  background: $bgColor;
+  background: var(--bgColor);
  border: 2px solid #aaa;
  outline: none;
@@ -267,7 +230,7 @@ input[type='number'] {
  font-size: 1em;
  &:focus-visible {
-    border-color: $accentColor;
+    border-color: var(--accentColor);
  }
  &::placeholder {
@@ -278,7 +241,7 @@ input[type='number'] {
 option {
  color: white;
  border: none;
-  background-color: $bgColor;
+  background-color: var(--bgColor);
 }
 ul {
@@ -289,7 +252,7 @@ ul {
 .text {
  &--accent {
-    color: $accentColor;
+    color: var(--accentColor);
  }
  &--grayed {
@@ -346,18 +309,18 @@ hr {
  }
  span:focus {
-    color: $accentColor;
+    color: var(--accentColor);
    outline: none;
  }
  label > input:checked + span {
-    color: $accentColor;
+    color: var(--accentColor);
-    border-color: $accentColor;
+    border-color: var(--accentColor);
  }
 }
 // Vue Transition anims
-.slide-top {
+.slide-top-anim {
  &-enter-from,
  &-leave-to {
    transform: translateY(-100%);
@@ -369,7 +332,19 @@ hr {
  }
 }
-.card-appear {
+.slide-bottom-anim {
  &-enter-from,
  &-leave-to {
    transform: translateY(100%);
  }
  &-enter-active,
  &-leave-active {
    transition: transform 100ms ease-in-out;
  }
 }
 .card-appear-anim {
  &-enter-from,
  &-leave-to {
    opacity: 0;
@@ -0,0 +1,20 @@
 $breakpointMd: 960px;
 $breakpointSm: 550px;
@mixin smallScreen() {
  @media only screen and (max-width: $breakpointSm) {
    @content;
  }
 }
@mixin midScreen() {
  @media only screen and (max-width: $breakpointMd) {
    @content;
  }
 }
@mixin midScreenLandscape() {
  @media only screen and (orientation: landscape) and (max-width: $breakpointMd) {
    @content;
  }
 }
@@ -1,13 +1,10 @@
@use 'global';
 .tab {
  height: 100%;
  margin-top: 1px;
  &_header {
    padding: 0.5em 1em;
-    background-color: global.$secondaryColor;
+    background-color: var(--secondaryColor);
    text-align: center;
    h2 {
@@ -28,7 +25,6 @@
  }
  &_content {
    margin-top: 1em;
    height: 100%;
  }
@@ -1,87 +1,52 @@
 import { IVehicleRestrictions } from './common.types';
 // API namespace
 export namespace API {
-  export interface ActiveData {
+  export namespace VehiclesData {
-    trains: Train[];
+    export interface VehicleObject {
-    activeSceneries: ActiveScenery[];
+      id: number;
      name: string;
      type: string;
      cabinName: string | null;
      restrictions: IVehicleRestrictions | null;
      vehicleGroupsId: number;
    }
    export interface VehicleGroupObject {
      id: number;
      name: string;
      speed: number;
      speedLoaded?: number;
      speedLoco?: number;
      length: number;
      weight: number;
      cargoTypes: VehicleCargo[] | null;
      locoProps: {
        coldStart: boolean;
        doubleManned: boolean;
      } | null;
      massSpeeds: VehicleGroupMassSpeeds | null;
    }
    export interface VehicleGroupMassSpeeds {
      passenger: Record<string, number> | null;
      cargo: Record<string, number> | null;
      none: number | null;
    }
    export interface VehicleCargo {
      id: string;
      weight: number;
    }
    export interface Data {
      vehicles: VehicleObject[];
      vehicleGroups: VehicleGroupObject[];
    }
    export type Response = Data;
  }
 }
 export interface ActiveScenery {
  dispatcherId: number;
  dispatcherName: string;
  dispatcherIsSupporter: boolean;
  stationName: string;
  stationHash: string;
  region: string;
  maxUsers: number;
  currentUsers: number;
  spawn: number;
  lastSeen: number;
  dispatcherExp: number;
  nameFromHeader: string;
  spawnString?: string;
  networkConnectionString: string;
  isOnline: number;
  dispatcherRate: number;
  dispatcherStatus: number;
 }
 export interface Train {
  id: string;
  trainNo: number;
  mass: number;
  speed: number;
  length: number;
  distance: number;
  stockString: string;
  driverName: string;
  driverId: number;
  driverIsSupporter: boolean;
  driverLevel: number;
  currentStationHash: string;
  currentStationName: string;
  signal: string;
  connectedTrack: string;
  online: number;
  lastSeen: number;
  region: string;
  isTimeout: boolean;
  timetable?: Timetable;
 }
 export interface Timetable {
  SKR: boolean;
  TWR: boolean;
  hasDangerousCargo: boolean;
  hasExtraDeliveries: boolean;
  warningNotes: string;
  category: string;
  stopList: TimetableStop[];
  route: string;
  timetableId: number;
  sceneries: string[];
  path: string;
 }
 export interface TimetableStop {
  stopName: string;
  stopNameRAW: string;
  stopType: string;
  stopDistance: number;
  pointId: string;
  comments?: (null | string)[];
  mainStop: boolean;
  arrivalLine?: string;
  arrivalTimestamp: number;
  arrivalRealTimestamp: number;
  arrivalDelay: number;
  departureLine?: string;
  departureTimestamp: number;
  departureRealTimestamp: number;
  departureDelay: number;
  beginsHere: boolean;
  terminatesHere: boolean;
  confirmed: number;
  stopped: number;
  stopTime?: number;
 }
@@ -74,7 +74,6 @@ export interface IVehicleData {
  cabinName: string | null;
  restrictions: IVehicleRestrictions | null;
  vehicleGroupsId: number;
  simulatorVersion: string;
  group: IVehicleGroup;
 }
@@ -1,27 +0,0 @@
 import { useStore } from '../store';
 export const useFileUtils = () => {
  const store = useStore();
  function getCurrentStockFileName() {
    let fileName = '';
    const currentStockString = store.stockList.map((s) => s.vehicleRef.type).join(';');
    const currentRealComp = store.realCompositionList.find(
      (rc) => rc.stockString == currentStockString
    );
    // Append real composition to the name if chosen
    if (currentRealComp != undefined) {
      fileName += `${currentRealComp.stockId} `;
    }
    // Append default props
    fileName += `${store.stockList[0].vehicleRef.type} ${(store.totalWeight / 1000).toFixed(1)}t; ${store.totalLength}m; vmax ${store.maxStockSpeed}`;
    return fileName;
  }
  return { getCurrentStockFileName };
 };
@@ -1,6 +1,57 @@
 import { ICarWagon, ILocomotive, IStock, IVehicleData, LocoGroupType, WagonGroupType } from '../types/common.types';
 import { MassLimitLocoType, calculateMassLimit, calculateSpeedLimit } from './vehicleLimitsUtils';
 // UNUSED - ADDITIONAL CARGO TYPES FOR INTERMODALS
 export const additionalCargoTypes = [
  {
    groupType: '627Z',
    id: '627Z_mix1_sctc_loaded',
    weight: 96500,
    cargoStringVariations: [
      'sc_20:tc_20_loaded:tc_20_loaded:tc_20_loaded',
      'tc_20_loaded:sc_20:tc_20_loaded:tc_20_loaded',
      'tc_20_loaded:tc_20_loaded:sc_20:tc_20_loaded',
      'tc_20_loaded:tc_20_loaded:tc_20_loaded:sc_20',
    ],
  },
  {
    groupType: '627Z',
    id: '627Z_mix2_sctc_loaded',
    weight: 87000,
    cargoStringVariations: [
      'sc_20:tc_20_loaded:tc_20_loaded:sc_20',
      'sc_20:tc_20_loaded:sc_20:tc_20_loaded',
      'sc_20:sc_20:tc_20_loaded:tc_20_loaded',
      'tc_20_loaded:tc_20_loaded:sc_20:sc_20',
      'tc_20_loaded:sc_20:tc_20_loaded:sc_20',
      'tc_20_loaded:sc_20:sc_20:tc_20_loaded',
    ],
  },
  {
    groupType: '627Z',
    id: '627Z_mix3_sctc_loaded',
    weight: 77500,
    cargoStringVariations: [
      'sc_20:sc_20:sc_20:tc_20_loaded',
      'sc_20:sc_20:tc_20_loaded:sc_20',
      'sc_20:tc_20_loaded:sc_20:sc_20',
      'tc_20_loaded:sc_20:sc_20:sc_20',
    ],
  },
  {
    groupType: '412Z',
    id: '412Z_mix1_sctc_loaded',
    weight: 43500,
    cargoStringVariations: ['sc_20:tc_20_loaded:tc_20_loaded'],
  },
  {
    groupType: '412Z',
    id: '412Z_mix1_sctc_empty',
    weight: 37735,
    cargoStringVariations: ['sc_20:tc_20_empty:sc_20'],
  },
 ];
 export function isTractionUnit(vehicle: ILocomotive | ICarWagon): vehicle is ILocomotive {
  return (vehicle as ILocomotive).cabinType !== undefined;
 }
@@ -42,12 +93,26 @@ export function carDataList(vehiclesData: IVehicleData[] | undefined) {
  return vehiclesData.reduce<ICarWagon[]>((acc, data) => {
    if (data.cabinName !== null) return acc;
    const cargoTypes = data.group.cargoTypes || [];
    // UNUSED - ADDITIONAL CARGO TYPES FOR INTERMODALS
    // if (/412Z|627Z/.test(data.group.name)) {
    //   cargoTypes.push(
    //     ...additionalCargoTypes
    //       .filter((c) => c.groupType == data.group.name)
    //       .map((c) => ({
    //         id: c.id,
    //         weight: c.weight,
    //       }))
    //   );
    // }
    acc.push({
      group: data.type as WagonGroupType,
      type: data.name,
      constructionType: data.group.name,
      loadable: data.group.cargoTypes !== null && data.group.cargoTypes.length > 0,
-      cargoTypes: data.group?.cargoTypes ?? [],
+      cargoTypes,
      sponsorOnlyTimestamp: data.restrictions?.sponsorOnly ?? 0,
      teamOnly: data.restrictions?.teamOnly ?? false,
@@ -106,12 +171,13 @@ export function getCargoWarnings(stockList: IStock[]) {
  let warnings: Set<string> = new Set();
  stockList.forEach((stockVehicle) => {
-    if (stockVehicle.vehicleRef.group == 'wagon-freight') {
+    if (stockVehicle.vehicleRef.group != 'wagon-freight') return;
-      if (stockVehicle.cargo && stockVehicle.cargo.id.startsWith('wt_20')) warnings.add('warning_wt_20_pn');
+
-      else if (stockVehicle.cargo && /^(tank|vehicles|truck)/.test(stockVehicle.cargo.id)) warnings.add('warning_military_pn');
+    if (stockVehicle.cargo && stockVehicle.cargo.id.startsWith('wt_20')) warnings.add('warning_wt_20_pn');
-      else if (stockVehicle.vehicleRef.type.startsWith('WB117')) warnings.add(stockVehicle.cargo ? 'warning_un1965_twr' : 'warning_un1965_tn');
+    else if (stockVehicle.vehicleRef.type.startsWith('WB117')) warnings.add(stockVehicle.cargo ? 'warning_un1965_twr' : 'warning_un1965_tn');
-      else if (stockVehicle.vehicleRef.type.startsWith('445Rb')) warnings.add(stockVehicle.cargo ? 'warning_un1202_twr' : 'warning_un1202_tn');
+    else if (stockVehicle.vehicleRef.type.startsWith('445Rb')) warnings.add('warning_un1202_tn');
-    }
+    else if (stockVehicle.vehicleRef.type.startsWith('EDK80')) warnings.add('warning_edk80_pn');
    else if (stockVehicle.cargo && /^(tank|vehicles_01|truck)/.test(stockVehicle.cargo.id)) warnings.add('warning_military_pn');
  });
  return warnings;
@@ -25,13 +25,22 @@ export default defineComponent({
 </script>
 <style lang="scss" scoped>
-.app-container {
+@use '../styles/responsive';
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
-  min-height: 100vh;
+.app-container {
-  padding: 0.5em;
+  display: grid;
  justify-content: center;
  grid-template-rows: minmax(900px, 1fr) auto;
  gap: 0.5em;
  height: 100vh;
 }
@include responsive.midScreen {
  .app-container {
    height: auto;
    min-height: 100vh;
  }
 }
 </style>
@@ -10,7 +10,7 @@ export default defineConfig({
  preview: { port: 4138 },
  css: {
    preprocessorOptions: {
-      scss: { additionalData: `@use '@/styles/global';`, silenceDeprecations: ['legacy-js-api'] },
+      scss: { silenceDeprecations: ['legacy-js-api'] },
    },
  },
  resolve: {
@@ -23,13 +23,11 @@ export default defineConfig({
    VitePWA({
      registerType: 'autoUpdate',
      includeAssets: ['/images/*.{png,svg,jpg}', '/fonts/*.{woff,woff2,ttf}'],
      devOptions: { suppressWarnings: true, enabled: true },
      workbox: {
        cleanupOutdatedCaches: true,
-        globPatterns: ['**/*.{js,css,html,jpg,png,svg,img,woff,woff2}'],
+        globPatterns: ['**/*.{js,css,html,ico,woff,woff2,ttf}', '**/*.{png,jpg,jpeg,svg,webp,gif}'],
        runtimeCaching: [
          {
Author	SHA1	Message	Date
Spythere	7b04389716	Merge pull request #63 from Spythere/development Update: new simulator's version vehicles & cargo data	2026-04-19 01:37:16 +02:00
Spythere	3ff19ba722	chore(stock gen): separated military vehicles and new Nysa cars in stock generator	2026-04-19 01:32:09 +02:00
Spythere	8011f3b053	hotfix(vehicles): changed detected cargo IDs for military transport warning	2026-04-19 01:26:20 +02:00
Spythere	6bfcd0f8e0	chore(locales): changed usage naming for EDK80	2026-04-19 01:23:27 +02:00
Spythere	06b3286206	Merge pull request #62 from Spythere/development v1.10.0	2026-04-06 00:53:15 +02:00
Spythere	64236aa59a	chore(locales): minor usage improvements	2026-04-06 00:45:48 +02:00
Spythere	4afff41230	chore(footer): added github release link to footer's app version	2026-04-06 00:45:48 +02:00
Spythere	8b6e38d18c	chore(generator): added new intermodal cargo to generator pool	2026-04-05 13:23:27 +02:00
Spythere	c245747e2b	fix(wiki): moved warning about no vehicles above list	2026-04-04 23:25:28 +02:00
Spythere	a86ba561ea	refactor(api): changed fetching data from the new api endpoint	2026-04-04 21:13:43 +02:00
Spythere	a37c9916b5	chore(generator): removed additional cargo for intermodals; added new vehicle api types	2026-04-04 21:04:51 +02:00
Spythere	97ce0febec	chore(generator): added new stock generator options (intermodal)	2026-04-01 23:37:24 +02:00
Spythere	5220eeb236	chore(stock): added supporting internal cargo for generating 627Z & 412Z mixed containers	2026-04-01 23:04:44 +02:00
Spythere	80a694dd23	refactor: moved file utils to composable mixin	2026-04-01 18:20:03 +02:00
Spythere	72290b6098	refactor: replaced axios with native fetch API	2026-04-01 18:08:04 +02:00
Spythere	03f496ab08	chore(file): selecting chosen storage stock name as file name when it's available	2026-03-29 14:55:23 +02:00
Spythere	be4d99d1c7	chore(vehicles): added new cargo warning for EDK80 wagon	2026-03-29 14:42:37 +02:00
Spythere	f328f5028b	chore(generator): added new stock generator options; improved locales	2026-03-29 14:29:19 +02:00
Spythere	52eacbf827	chore(app): responsiveness adjustments	2026-03-28 17:56:32 +01:00
Spythere	53d53738f4	bump(version): v1.10.0	2026-03-28 14:41:54 +01:00
Spythere	3f6afa5d4c	fix(footer): incorrect padding	2026-03-28 14:41:28 +01:00
Spythere	8392e2fa29	refactor(app): refreshed app's look&feel, improved responsiveness, viewport width and elements' alignment	2026-03-28 14:40:15 +01:00
Spythere	9e0e2b0225	Merge pull request #61 from Spythere/development Usage locales update	2026-03-27 14:23:27 +01:00
Spythere	d762cb0536	chore(locales): added EDK80 usage	2026-03-27 14:19:01 +01:00
Spythere	def6190cc1	chore(locales): added EDK80 usage	2026-03-27 14:18:48 +01:00
Spythere	4f7c3caa73	Merge pull request #60 from Spythere/development Usage locales hotfix	2026-03-17 22:50:32 +01:00
Spythere	01d3d3657f	hotfix(locales): added usage text for 411V car wagons	2026-03-17 22:48:17 +01:00
Spythere	b83b6092da	Merge pull request #59 from Spythere/development Hotfix: too big font size for landscape viewport	2026-03-07 21:29:21 +01:00
Spythere	b3098210ab	fix(responsive): wrong attribute for mid screen landscape responsiveness	2026-03-07 21:28:49 +01:00
Spythere	b64f98c834	fix(app): to big font size for mid screen landscape responsiveness	2026-03-07 21:22:13 +01:00
Spythere	d619918c63	Merge pull request #57 from Spythere/development Migration info bar	2026-03-07 19:06:48 +01:00
Spythere	586f02df0a	chore(footer): updated production host indicator to a new domain	2026-03-07 18:51:21 +01:00
Spythere	7f9caa5100	chore(migration): added hiding migration info bar after clicking accept button	2026-03-07 18:47:46 +01:00
Spythere	95b8247029	Merge pull request #56 from Spythere/development Fix: missing locale keys	2026-03-07 01:00:57 +01:00
Spythere	70c5ec8d2e	fix(locales): missing locale keys	2026-03-07 00:58:54 +01:00
Spythere	977a8adaec	Merge pull request #55 from Spythere/development Migration to new domain	2026-03-07 00:56:02 +01:00
Spythere	cc6215860f	chore(workflows): updated pushing changes to new and old branches	2026-03-07 00:54:45 +01:00
Spythere	37c8b6f084	chore(app): added migration info bar	2026-03-06 23:46:47 +01:00
Spythere	0a65bf6c55	fix: button style	2026-03-06 23:46:16 +01:00
Spythere	22b8509ebe	refactor(styles): separated fonts and responsiveness to scss files; made global reference only once	2026-03-03 02:29:27 +01:00
Spythere	8698a53caf	chore(workflows): changed sending files method to VPS	2025-12-15 13:30:45 +01:00
Spythere	dcfd3f7c4e	Merge pull request #54 from Spythere/development Updated GitHub workflow for deploying files to dedicated VPS	2025-12-04 00:38:58 +01:00
Spythere	c98458b75e	chore: added workflow for deploying to dedicated VPS	2025-12-04 00:38:08 +01:00
Spythere	0e2e267b71	Merge pull request #53 from Spythere/development Added Lubań wagons usage	2025-11-18 13:44:35 +01:00
Spythere	0a3274b5b1	chore: added Lubań wagons usage	2025-11-18 13:42:07 +01:00
Spythere	4c6c3edcf5	Merge pull request #52 from Spythere/development Added 409Va for sand cargo in stock generator	2025-11-13 22:33:37 +01:00
Spythere	72665f8b50	chore: added 409Va sand cargo to generator	2025-11-13 22:28:13 +01:00
Spythere	9bb0bcb735	Merge pull request #51 from Spythere/development v1.9.3	2025-11-05 14:51:56 +01:00
Spythere	56dc42b58e	fix: logic for checking if PRSM4 is at the end	2025-11-05 01:33:29 +01:00
Spythere	3a17f7485f	chore: warning icon style for stock warnings	2025-11-05 01:28:36 +01:00
Spythere	39b58d6e7c	chore: added immediate SW reload	2025-11-05 01:05:20 +01:00
Spythere	bd70e0f071	chore: added detecting whether PRSM4 is at the end of a rolling stock	2025-11-04 01:03:23 +01:00
Spythere	32594e2f67	bump: v1.9.3	2025-11-04 00:46:49 +01:00
Spythere	05dbf33b4f	chore: added preloading images & fonts	2025-11-03 23:09:47 +01:00
Spythere	4022d2ea2f	chore: packages upgrade	2025-11-03 22:59:02 +01:00
Spythere	85fec2f348	Merge branch 'development' into packages-upgrade	2025-11-03 22:57:52 +01:00
Spythere	85f91a59cd	Merge pull request #50 from Spythere/development Updated usage description for a new wagon in the simulator	2025-10-31 20:18:08 +01:00
Spythere	857c176a38	chore: updated usage desc for new wagon	2025-10-31 20:16:17 +01:00
Spythere	7d0070820c	Merge pull request #49 from Spythere/development fix: cargo warnings	2025-06-27 15:46:03 +02:00
Spythere	bd1de41764	fix: cargo warnings	2025-06-27 15:40:50 +02:00
Spythere	0799bfd838	Merge pull request #48 from Spythere/development fix: missing translations	2025-06-04 01:10:36 +02:00
Spythere	730275ea7c	fix: missing translations	2025-06-04 01:10:10 +02:00
Spythere	a0c578b31b	Merge pull request #47 from Spythere/development hotfix: generator 627Z typo	2025-06-04 01:07:06 +02:00
Spythere	d21aec63d0	hotfix: generator 627Z typo	2025-06-04 01:06:46 +02:00
Spythere	80c5194735	Merge pull request #46 from Spythere/development hotfix: EN category desc typo	2025-06-02 00:43:27 +02:00
Spythere	93bbedf189	hotfix: EN category desc typo	2025-06-02 00:42:55 +02:00