Merge pull request #51 from Spythere/development

v1.9.3

.github/workflows/deploy.yml

@@ -1,23 +0,0 @@
-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

.github/workflows/firebase-hosting-merge.yml

@@ -5,7 +5,7 @@ name: Deploy to Firebase Hosting on merge
 'on':
   push:
     branches:
-      - main-old
+      - main
 jobs:
   build_and_deploy:
     runs-on: ubuntu-latest

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pojazdownik",
-  "version": "1.10.0",
+  "version": "1.9.3",
   "private": true,
   "type": "module",
   "scripts": {
@@ -12,22 +12,23 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "lucide-vue-next": "^0.576.0",
+    "axios": "^1.4.0",
+    "lucide-vue-next": "^0.552.0",
     "pinia": "^3.0.3",
     "prettier": "^3.0.3",
     "vue": "^3.2.37",
-    "vue-i18n": "11.2.8",
-    "vue-router": "5.0.3"
+    "vue-i18n": "11.1.12",
+    "vue-router": "4"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
-    "@types/node": "^25.3.3",
+    "@types/node": "^24.10.0",
     "@vite-pwa/assets-generator": "^1.0.2",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.6.0",
-    "@vue/tsconfig": "^0.9.0",
-    "eslint": "^10.0.2",
+    "@vue/tsconfig": "^0.8.1",
+    "eslint": "^9.39.1",
     "eslint-plugin-vue": "^10.5.1",
     "sass": "^1.59.3",
     "typescript": "^5.0.2",

src/App.vue

@@ -2,85 +2,83 @@
   <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" setup>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { useStore } from './store';
 import ImageFullscreenPreview from './components/utils/ImageFullscreenPreview.vue';
+import AppContainerView from './views/AppContainerView.vue';
 import AppModals from './components/app/AppModals.vue';
-import { computed, onMounted, watchEffect } from 'vue';
 import { registerSW } from 'virtual:pwa-register';
-import MigrationInfo from './components/app/MigrationInfo.vue';
-
-const store = useStore();
 
 registerSW({
   immediate: true,
+  onNeedRefresh() {
+    console.log('Needs refresh!');
+  },
 });
 
-onMounted(() => {
-  loadStockDataFromStorage();
-  handleMigrationInfo();
-  store.setupAPIData();
+export default defineComponent({
+  components: { ImageFullscreenPreview, AppContainerView, AppModals },
+  data() {
+    return { store: useStore() };
+  },
+
+  created() {
+    this.loadStockDataFromStorage();
+    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);
+      }
+    },
+  },
 });
-
-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: var(--textColor);
+  color: global.$textColor;
   font-size: 1em;
   padding: 0;
 
-  @include responsive.midScreen {
+  @media screen and (max-width: global.$breakpointMd) {
     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>

src/components/app/AppModals.vue

@@ -6,9 +6,19 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { useStore } from '../../store';
 import RealStockCard from '../cards/RealStockCard.vue';
 
-const store = useStore();
+export default defineComponent({
+  components: { RealStockCard },
+  data() {
+    return {
+      store: useStore(),
+    };
+  },
+});
 </script>
+
+<style scoped></style>

src/components/app/Footer.vue

@@ -1,11 +1,12 @@
 <template>
   <footer>
-    <div>
-      &copy;
-      <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
-      {{ new Date().getUTCFullYear() }} |
-      <a class="release-link" :href="githubReleaseHref" target="_blank">v{{ VERSION }}{{ !isOnProductionHost ? 'dev' : '' }}</a>
-    </div>
+    <i18n-t keypath="footer.disclaimer" tag="div" class="text--grayed">
+      <template #tos>
+        <a style="color: #ccc" :href="$t('footer.tos-href')" target="_blank">
+          {{ $t('footer.tos') }}
+        </a>
+      </template>
+    </i18n-t>
 
     <div class="text--grayed" v-if="store.vehiclesData">
       {{
@@ -16,6 +17,12 @@
         })
       }}
     </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>
 
@@ -27,17 +34,13 @@ import { useStore } from '../../store';
 export default defineComponent({
   data() {
     return {
-      isOnProductionHost: location.hostname == 'pojazdownik-td2.web.app' || location.hostname == 'pojazdownik-td2.spythere.eu',
+      isOnProductionHost: location.hostname == 'pojazdownik-td2.web.app',
       VERSION: packageInfo.version,
       store: useStore(),
     };
   },
 
   computed: {
-    githubReleaseHref() {
-      return `https://github.com/Spythere/pojazdownik/releases/tag/${this.VERSION}`;
-    },
-
     vehiclesCounters() {
       let counters = {
         all: 0,
@@ -63,14 +66,6 @@ export default defineComponent({
 <style lang="scss" scoped>
 footer {
   text-align: center;
-  padding: 0 0.5em 0.5em 0.5em;
-}
-
-.release-link {
-  color: var(--accentColor);
-
-  &:hover {
-    color: white;
-  }
+  padding: 1em 1em 0 1em;
 }
 </style>

src/components/app/MainContainer.vue

@@ -20,29 +20,29 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@use '@/styles/responsive';
-
 main {
   display: grid;
   gap: 1em;
 
-  width: 100vw;
-  max-width: 1600px;
+  width: 100%;
+  max-width: 1350px;
 
-  grid-template-columns: minmax(380px, 1fr) 3fr;
-  grid-template-rows: auto 350px minmax(300px, 1fr);
+  grid-template-columns: 1fr 2fr;
+  grid-template-rows: auto 360px minmax(300px, 1fr);
 
+  background-color: global.$bgColorDarker;
   border-radius: 1em;
-  overflow: hidden;
+
+  min-height: 950px;
+
   padding: 1em;
 }
 
-@include responsive.midScreen {
+@media screen and (max-width: global.$breakpointMd) {
   main {
     display: flex;
     flex-direction: column;
     gap: 1em;
-    height: auto;
   }
 }
 </style>

src/components/app/MigrationInfo.vue

@@ -1,59 +0,0 @@
-<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>

src/components/cards/RealStockCard.vue

@@ -220,8 +220,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@use '@/styles/responsive';
-
 .action-exit {
   display: flex;
   background-color: #333;
@@ -249,7 +247,7 @@ export default defineComponent({
 
   z-index: 100;
 
-  @include responsive.smallScreen {
+  @media screen and (max-width: global.$breakpointSm) {
     height: 80vh;
   }
 }
@@ -281,7 +279,7 @@ export default defineComponent({
     width: 35%;
   }
 
-  @include responsive.smallScreen {
+  @media screen and (max-width: global.$breakpointSm) {
     flex-wrap: wrap;
 
     input {
@@ -309,7 +307,7 @@ ul {
     padding: 0.1em;
 
     &[data-last-selected='true'] .stock-title {
-      border: 1px solid var(--accentColor);
+      border: 1px solid global.$accentColor;
     }
 
     .stock-title {
@@ -325,7 +323,7 @@ ul {
       background: #222;
     }
 
-    @include responsive.smallScreen {
+    @media screen and (max-width: global.$breakpointSm) {
       grid-template-columns: 1fr;
       // grid-template-rows: 1fr 1fr;
     }

src/components/sections/InputsSection.vue

@@ -224,8 +224,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@use '@/styles/responsive';
-
 .inputs-section {
   display: flex;
   justify-content: center;
@@ -244,7 +242,7 @@ button.btn--choice {
   padding: 0.3em 0.6em;
 
   &[data-selected='true'] {
-    background-color: var(--accentColor);
+    background-color: global.$accentColor;
     color: black;
   }
 
@@ -262,12 +260,12 @@ button.btn--choice {
     display: block;
 
     font-weight: bold;
-    color: var(--accentColor);
+    color: global.$accentColor;
     margin-bottom: 0.3em;
   }
 
   select:focus {
-    border-color: var(--accentColor);
+    border-color: global.$accentColor;
   }
 }
 
@@ -292,7 +290,7 @@ button.btn--choice {
   }
 }
 
-@include responsive.midScreen {
+@media screen and (max-width: global.$breakpointMd) {
   .inputs-section {
     justify-content: center;
     text-align: center;

src/components/sections/LogoSection.vue

@@ -58,7 +58,7 @@ export default {
 
   button[data-selected='true'] {
     font-weight: bold;
-    color: var(--accentColor);
+    color: global.$accentColor;
     text-decoration: underline;
   }
 }

src/components/sections/TabsSection.vue

@@ -1,9 +1,17 @@
 <template>
   <section class="tabs-section">
     <div class="tabs-modes">
-      <router-link v-for="(route, i) in routes" :key="route.name" class="link-btn" :to="route.href" :style="{ 'grid-area': route.name }">
+      <router-link
+        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'">({{ store.stockList.length }})</span>
+        <span class="text--grayed" v-if="route.name == 'stock'"
+          >({{ store.stockList.length }})</span
+        >
       </router-link>
     </div>
 
@@ -60,9 +68,7 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-@use '@/styles/responsive';
-
+<style lang="scss">
 // Tab change animation
 .tab-change {
   &-enter-from,
@@ -78,10 +84,6 @@ onMounted(() => {
 
 // Section styles
 .tabs-section {
-  display: grid;
-  grid-template-rows: auto 1fr;
-  gap: 1em;
-
   grid-row: 1 / 4;
   grid-column: 2;
 
@@ -91,21 +93,19 @@ onMounted(() => {
 
 .tabs-modes {
   display: grid;
-  gap: 0.5em;
-  grid-template-areas: 'stock wiki storage numgen stockgen';
-
+  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;
+
+  margin-bottom: 1em;
 }
 
-@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 {
+@media screen and (max-width: global.$breakpointSm) {
   .tabs-modes {
     grid-template-areas:
       'stock wiki'
@@ -114,10 +114,4 @@ onMounted(() => {
     grid-template-columns: repeat(2, 1fr);
   }
 }
-
-@include responsive.midScreen {
-  .tabs-section {
-    min-height: 100vh;
-  }
-}
 </style>

src/components/sections/TrainImageSection.vue

@@ -5,7 +5,10 @@
         <img
           :src="getThumbnailURL(store.chosenVehicle.type, 'small')"
           :data-preview-available="isDataPreviewAvailable"
-          :data-sponsor-only="store.chosenVehicle.sponsorOnlyTimestamp && store.chosenVehicle.sponsorOnlyTimestamp > Date.now()"
+          :data-sponsor-only="
+            store.chosenVehicle.sponsorOnlyTimestamp &&
+            store.chosenVehicle.sponsorOnlyTimestamp > Date.now()
+          "
           :data-team-only="store.chosenVehicle.teamOnly"
           @click="onImageClick"
           @keydown.enter="onImageClick"
@@ -18,15 +21,23 @@
       <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.weight / 1000).toFixed(1) }}t | {{ store.chosenVehicle.maxSpeed }} km/h
+            {{ store.chosenVehicle.length }}m |
+            {{ (store.chosenVehicle.weight / 1000).toFixed(1) }}t |
+            {{ store.chosenVehicle.maxSpeed }} km/h
           </div>
 
-          <div v-if="isTractionUnit(store.chosenVehicle)">{{ $t('preview.cabin') }} {{ store.chosenVehicle.cabinType }}</div>
+          <div v-if="isTractionUnit(store.chosenVehicle)">
+            {{ $t('preview.cabin') }} {{ store.chosenVehicle.cabinType }}
+          </div>
 
           <div v-else>
             {{
@@ -36,10 +47,18 @@
             }}
           </div>
 
-          <b v-if="store.chosenVehicle.sponsorOnlyTimestamp && store.chosenVehicle.sponsorOnlyTimestamp > Date.now()" class="sponsor-only">
+          <b
+            v-if="
+              store.chosenVehicle.sponsorOnlyTimestamp &&
+              store.chosenVehicle.sponsorOnlyTimestamp > Date.now()
+            "
+            class="sponsor-only"
+          >
             {{
               $t('preview.sponsor-only', [
-                new Date(store.chosenVehicle.sponsorOnlyTimestamp).toLocaleDateString($i18n.locale == 'pl' ? 'pl-PL' : 'en-GB'),
+                new Date(store.chosenVehicle.sponsorOnlyTimestamp).toLocaleDateString(
+                  $i18n.locale == 'pl' ? 'pl-PL' : 'en-GB'
+                ),
               ])
             }}
           </b>
@@ -133,7 +152,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@use '@/styles/responsive';
+
 
 .train-image-section {
   display: flex;
@@ -145,8 +164,8 @@ export default defineComponent({
 
   & > div {
     position: relative;
-    width: 100%;
-    max-width: 380px;
+    max-width: 100%;
+    width: 380px;
   }
 }
 
@@ -159,11 +178,11 @@ img {
   }
 
   &[data-sponsor-only='true'] {
-    border: 1px solid var(--accentColor);
+    border: 1px solid global.$sponsorColor;
   }
 
   &[data-team-only='true'] {
-    border: 1px solid var(--teamColor);
+    border: 1px solid global.$teamColor;
   }
 }
 
@@ -197,25 +216,25 @@ img {
   width: 100%;
   max-width: 380px;
 
-  background-color: var(--secondaryColor);
+  background-color: global.$secondaryColor;
   font-weight: bold;
 }
 
 .placeholder {
   height: 250px;
 
-  background-color: var(--bgColor);
+  background-color: global.$bgColor;
 }
 
 .sponsor-only {
-  color: var(--accentColor);
+  color: global.$sponsorColor;
 }
 
 .team-only {
-  color: var(--teamColor);
+  color: global.$teamColor;
 }
 
-@include responsive.midScreen {
+@media screen and (max-width: global.$breakpointMd) {
   .train-image-section {
     justify-content: center;
   }

src/components/tabs/NumberGeneratorTab.vue

@@ -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,15 +224,7 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
 </script>
 
 <style lang="scss" scoped>
-@use '@/styles/tab';
-@use '@/styles/responsive';
-
-.number-generator-tab {
-  display: flex;
-  flex-direction: column;
-  gap: 1em;
-  overflow: auto;
-}
+@use '../../styles/tab';
 
 .category-select {
   select {
@@ -271,7 +263,7 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
 
   margin: 0.5em 0;
   padding: 0.5em;
-  background-color: var(--secondaryColor);
+  background-color: global.$secondaryColor;
 }
 
 .category-rules {
@@ -289,13 +281,13 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
   margin: 0.25em 0;
 }
 
-@include responsive.midScreen {
-  .number-generator-tab {
+@media screen and (max-width: global.$breakpointMd) {
+  .number-generator {
     min-height: 100vh;
   }
 }
 
-@include responsive.smallScreen {
+@media screen and (max-width: global.$breakpointSm) {
   .regions-select {
     flex-wrap: wrap;
   }

src/components/tabs/StockGeneratorTab.vue

@@ -1,96 +1,110 @@
 <template>
-  <div class="stock-generator-tab">
-    <div>
-      <h2>{{ $t('stockgen.properties-title') }}</h2>
+  <div class="stock-generator tab">
+    <div class="tab_content">
+      <div>
+        <h2>{{ $t('stockgen.properties-title') }}</h2>
 
-      <b class="text--accent">
-        {{ $t('stockgen.properties-desc') }}
-      </b>
+        <b class="text--accent">
+          {{ $t('stockgen.properties-desc') }}
+        </b>
 
-      <div class="inputs">
-        <label>
-          <span>{{ $t('stockgen.input-mass') }}</span>
-          <input type="number" v-model="maxTons" step="100" max="4000" min="0" />
-        </label>
+        <div class="inputs">
+          <label>
+            <span>{{ $t('stockgen.input-mass') }}</span>
+            <input type="number" v-model="maxTons" step="100" max="4000" min="0" />
+          </label>
 
-        <label>
-          <span>{{ $t('stockgen.input-length') }}</span>
-          <input type="number" v-model="maxLength" step="25" max="650" min="0" />
-        </label>
+          <label>
+            <span>{{ $t('stockgen.input-length') }}</span>
+            <input type="number" v-model="maxLength" step="25" max="650" min="0" />
+          </label>
 
-        <label>
-          <span>{{ $t('stockgen.input-carcount') }}</span>
-          <input type="number" v-model="maxCarCount" step="1" max="60" min="1" />
-        </label>
-      </div>
+          <label>
+            <span>{{ $t('stockgen.input-carcount') }}</span>
+            <input type="number" v-model="maxCarCount" step="1" max="60" min="1" />
+          </label>
+        </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 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>
+      <div>
+        <h2>{{ $t('stockgen.cargo-title') }}</h2>
+        <b>{{ $t('stockgen.cargo-desc') }}</b>
+      </div>
 
-    <hr />
+      <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 class="tab_actions">
-      <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock()">
-        {{ $t('stockgen.action-generate') }}
-      </button>
+      <div>
+        <h2>{{ $t('stockgen.chosen-title') }}</h2>
 
-      <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock(true)">
-        {{ $t('stockgen.action-generate-empty') }}
-      </button>
+        <div class="generator_warning">
+          <span v-if="computedChosenCarTypes.size == 0">
+            {{ $t('stockgen.chosen-empty-warning') }}
+          </span>
 
-      <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="resetChosenCargo">
-        {{ $t('stockgen.action-reset') }}
-      </button>
+          <span v-else>
+            {{ $t('stockgen.chosen-warning') }}
+          </span>
+        </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>
@@ -169,7 +183,9 @@ export default defineComponent({
       if (!this.isCarGroupingEnabled) return false;
 
       stockList.sort((s1, s2) => {
-        return (s1.vehicleRef.constructionType + s1.cargo?.id).localeCompare(s2.vehicleRef.constructionType + s2.cargo?.id);
+        return (s1.vehicleRef.constructionType + s1.cargo?.id).localeCompare(
+          s2.vehicleRef.constructionType + s2.cargo?.id
+        );
       });
     },
 
@@ -186,11 +202,14 @@ export default defineComponent({
 
               if (!cargoType || empty) cargoObjs.push(undefined);
               else if (cargoType == 'all') cargoObjs.push(...carWagonObjs[0]!.cargoTypes);
-              else cargoObjs.push(carWagonObjs[0]?.cargoTypes.find((cargo) => cargo.id == cargoType));
+              else
+                cargoObjs.push(carWagonObjs[0]?.cargoTypes.find((cargo) => cargo.id == cargoType));
 
               carWagonObjs.forEach((cw) => {
                 cargoObjs.forEach((cargoObj) => {
-                  const chosenStock = acc.find((a) => a.constructionType.includes(cw.constructionType));
+                  const chosenStock = acc.find((a) =>
+                    a.constructionType.includes(cw.constructionType)
+                  );
 
                   if (!chosenStock)
                     acc.push({
@@ -210,15 +229,24 @@ 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.length > 0 && isTractionUnit(this.store.stockList[0].vehicleRef) ? 1 : 0);
+        this.store.stockList.splice(
+          this.store.stockList.length > 0 && isTractionUnit(this.store.stockList[0].vehicleRef)
+            ? 1
+            : 0
+        );
 
         let carCount = 0;
-        const maxWeight = this.store.acceptableWeight > 0 ? Math.min(this.store.acceptableWeight, this.maxTons * 1000) : this.maxTons * 1000;
+        const maxWeight =
+          this.store.acceptableWeight > 0
+            ? Math.min(this.store.acceptableWeight, this.maxTons * 1000)
+            : this.maxTons * 1000;
 
         // eslint-disable-next-line no-constant-condition
         while (true) {
-          const randomStockType = generatedChosenStockList[~~(Math.random() * generatedChosenStockList.length)];
-          const { carWagon, cargo } = randomStockType.carPool[~~(Math.random() * randomStockType.carPool.length)];
+          const randomStockType =
+            generatedChosenStockList[~~(Math.random() * generatedChosenStockList.length)];
+          const { carWagon, cargo } =
+            randomStockType.carPool[~~(Math.random() * randomStockType.carPool.length)];
 
           if (
             this.store.totalWeight + (carWagon.weight + (cargo?.weight ?? 0)) > maxWeight ||
@@ -288,14 +316,6 @@ 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;
@@ -315,6 +335,8 @@ h2 {
     text-transform: uppercase;
     font-weight: bold;
 
+    background-color: global.$secondaryColor;
+
     &[data-excluded='true'] {
       background-color: gray;
       box-shadow: none;
@@ -327,7 +349,7 @@ h2 {
       padding: 5px;
 
       transform: translate(-8px, -50%);
-      background-color: var(--bgColor);
+      background-color: global.$bgColor;
       color: white;
     }
   }
@@ -368,7 +390,7 @@ h2 {
 }
 
 .generator_warning {
-  background-color: var(--accentColor);
+  background-color: global.$accentColor;
   padding: 0.5em;
   text-align: justify;
   font-weight: bold;

src/components/tabs/StockListTab.vue

@@ -1,19 +1,21 @@
 <template>
   <section class="stock-list-tab">
-    <!-- Stock Actions -->
-    <StockActions />
+    <div class="tab_content">
+      <!-- Stock Actions -->
+      <StockActions />
 
-    <!-- Stock Specs -->
-    <StockSpecs />
+      <!-- Stock Specs -->
+      <StockSpecs />
 
-    <!-- Stock Spawn Settings -->
-    <StockSpawnSettings />
+      <!-- Stock Spawn Settings -->
+      <StockSpawnSettings />
 
-    <!-- Stock Warnings -->
-    <StockWarnings />
+      <!-- Stock Warnings -->
+      <StockWarnings />
 
-    <!-- Stock List -->
-    <StockList />
+      <!-- Stock List -->
+      <StockList />
+    </div>
   </section>
 </template>
 
@@ -40,14 +42,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@use '../../styles/tab';
-
-.stock-list-tab {
-  display: grid;
-  grid-template-rows: auto auto auto auto 1fr;
-  gap: 0.5em;
-  overflow: hidden;
-}
+@use '@/styles/tab';
 
 .tab_content {
   display: flex;

src/components/tabs/StorageTab.vue

@@ -1,54 +1,57 @@
 <template>
-  <section class="storage-tab">
+  <section class="tab storage-tab">
     <div class="tab_header">
       <h2>{{ $t('storage.title') }}</h2>
       <h3>{{ $t('storage.subtitle') }}</h3>
     </div>
 
     <div class="tab_content">
-      <transition-group name="storage-list-anim" tag="ul" class="storage-list">
-        <li v-for="storageEntry in storageStockDataList" :key="storageEntry.id">
-          <div class="storage-item-top">
-            <h3>
-              {{ storageEntry.id }}
-            </h3>
+      <div class="storage-list-wrapper">
+        <transition-group name="storage-list-anim" tag="ul" class="storage-list">
+          <li v-for="storageEntry in storageStockDataList" :key="storageEntry.id">
+            <div class="storage-item-top">
+              <h3>
+                {{ storageEntry.id }}
+              </h3>
 
-            <div class="storage-item-top-actions">
-              <button class="btn btn--icon" @click="chooseStorageStock(storageEntry.id)">
-                <LogIn />
-              </button>
+              <div class="storage-item-top-actions">
+                <button class="btn btn--icon" @click="chooseStorageStock(storageEntry.id)">
+                  <LogIn />
+                </button>
 
-              <button class="btn btn--icon" @click="toggleStorageEntryExpand(storageEntry.id)">
-                <ChevronDown v-if="!expandedEntries.includes(storageEntry.id)" />
-                <ChevronUp v-else />
-              </button>
+                <button class="btn btn--icon" @click="toggleStorageEntryExpand(storageEntry.id)">
+                  <ChevronDown v-if="!expandedEntries.includes(storageEntry.id)" />
+                  <ChevronUp v-else />
+                </button>
 
-              <button class="btn btn--icon" @click="removeStockIndexFromStorage(storageEntry.id)">
-                <Trash2 />
-              </button>
+                <button class="btn btn--icon" @click="removeStockIndexFromStorage(storageEntry.id)">
+                  <Trash2 />
+                </button>
+              </div>
             </div>
-          </div>
 
-          <div class="storage-item-expandable" v-if="expandedEntries.includes(storageEntry.id)">
-            <i>
-              {{ $t('storage.created-at') }}
-              {{ new Date(storageEntry.createdAt).toLocaleString($i18n.locale) }}</i
-            >
-            <i v-if="storageEntry.updatedAt">
-              &bull; {{ $t('storage.updated-at') }} {{ new Date(storageEntry.updatedAt).toLocaleString($i18n.locale) }}</i
-            >
+            <div class="storage-item-expandable" v-if="expandedEntries.includes(storageEntry.id)">
+              <i>
+                {{ $t('storage.created-at') }}
+                {{ new Date(storageEntry.createdAt).toLocaleString($i18n.locale) }}</i
+              >
+              <i v-if="storageEntry.updatedAt">
+                &bull; {{ $t('storage.updated-at') }}
+                {{ new Date(storageEntry.updatedAt).toLocaleString($i18n.locale) }}</i
+              >
 
-            <div style="margin-top: 0.5em">
-              <i>{{ $t('storage.stock-title') }} </i>
-              {{ shortenStockString(storageEntry.stockString) }}
+              <div style="margin-top: 0.5em">
+                <i>{{ $t('storage.stock-title') }} </i>
+                {{ shortenStockString(storageEntry.stockString) }}
+              </div>
             </div>
-          </div>
-        </li>
+          </li>
 
-        <li v-if="Object.keys(storageStockDataList).length == 0" class="storage-no-entries">
-          {{ $t('storage.no-entires') }}
-        </li>
-      </transition-group>
+          <li v-if="Object.keys(storageStockDataList).length == 0" class="storage-no-entries">
+            {{ $t('storage.no-entires') }}
+          </li>
+        </transition-group>
+      </div>
     </div>
   </section>
 </template>
@@ -143,31 +146,26 @@ 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);
 }
 
-.tab_content {
-  overflow: auto;
-  margin-top: 1em;
+.storage-list-wrapper {
   position: relative;
+  height: 730px;
+  overflow: auto;
 }
 
 ul.storage-list {
   display: flex;
   flex-direction: column;
   gap: 0.5em;
+  margin-top: 0.5em;
 }
 
 ul.storage-list > li {
   padding: 0.5em;
-  background-color: var(--secondaryColor);
+  background-color: global.$secondaryColor;
 
   &[data-current='true'] {
     background-color: #3b3b3b;
@@ -176,14 +174,12 @@ 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 {
-  min-width: 350px;
+  width: 100%;
   text-align: left;
   margin: 0;
 }
@@ -212,7 +208,7 @@ ul.storage-list > li {
   &-move,
   &-enter-active,
   &-leave-active {
-    transition: all 100ms ease-in-out;
+    transition: all 120ms ease-in-out;
   }
 
   &-enter-from {

src/components/tabs/WikiListTab.vue

@@ -1,86 +1,97 @@
 <template>
-  <section class="wiki-list-tab">
-    <div class="actions">
-      <div class="action action-input">
-        <label for="search-vehicle">
-          {{ $t('wiki.labels.search-vehicle') }}
-          <button class="reset-btn" @click="resetSearchInput">
-            <img src="/images/icon-exit.svg" alt="reset vehicle input icon" />
-          </button>
-        </label>
-        <input
-          type="text"
-          id="search-vehicle"
-          name="search-vehicle"
-          :placeholder="$t('wiki.labels.search-vehicle-placeholder')"
-          v-model="searchedVehicleTypeName"
-        />
+  <section class="wiki-list tab">
+    <div class="tab_content">
+      <div class="actions">
+        <div class="action action-input">
+          <label for="search-vehicle">
+            {{ $t('wiki.labels.search-vehicle') }}
+            <button class="reset-btn" @click="resetSearchInput">
+              <img src="/images/icon-exit.svg" alt="reset vehicle input icon" />
+            </button>
+          </label>
+          <input
+            type="text"
+            id="search-vehicle"
+            name="search-vehicle"
+            :placeholder="$t('wiki.labels.search-vehicle-placeholder')"
+            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>
 
-      <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>
+      <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"
+          />
 
-      <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>
+          <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="action action-select">
-        <label for="sorter-direction">{{ $t('wiki.labels.sort-direction') }}</label>
+            <div class="vehicle-group">
+              {{ $t(`wiki.${vehicle.group}`) }} |
+              {{ isTractionUnit(vehicle) ? vehicle.cabinType : vehicle.constructionType }}
+            </div>
 
-        <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>
-
-    <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>
+            <div class="vehicle-props">
+              {{ vehicle.length }}m | {{ (vehicle.weight / 1000).toFixed(1) }}t |
+              {{ vehicle.maxSpeed }}km/h
+            </div>
           </span>
+        </li>
+      </ul>
 
-          <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>
+      <div class="no-vehicles-warning" v-if="computedVehicles.length == 0">
+        {{ $t('wiki.no-vehicles') }}
+      </div>
+    </div>
   </section>
 </template>
 
@@ -155,7 +166,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';
     },
@@ -170,7 +181,11 @@ export default defineComponent({
     },
 
     filterVehicles(v: IVehicle) {
-      if (this.searchedVehicleTypeName != '' && !v.type.toLocaleLowerCase().includes(this.searchedVehicleTypeName.toLocaleLowerCase())) return false;
+      if (
+        this.searchedVehicleTypeName != '' &&
+        !v.type.toLocaleLowerCase().includes(this.searchedVehicleTypeName.toLocaleLowerCase())
+      )
+        return false;
 
       switch (this.filterType) {
         case VehicleFilter.AllTractions:
@@ -230,14 +245,6 @@ 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;
@@ -276,7 +283,10 @@ export default defineComponent({
   gap: 0.5em;
   overflow: auto;
 
-  margin-top: 1em;
+  max-height: 730px;
+
+  margin-top: 0.75em;
+  padding: 0.25em;
 }
 
 .vehicles > li {
@@ -286,6 +296,7 @@ export default defineComponent({
   background-color: #161c2e;
   padding: 0.5em;
 
+  min-height: 75px;
   cursor: pointer;
 
   &[data-preview='true'] {
@@ -307,7 +318,7 @@ export default defineComponent({
 }
 
 .sponsor-only {
-  color: var(--accentColor);
+  color: global.$sponsorColor;
 
   &::after {
     content: '*';
@@ -315,7 +326,7 @@ export default defineComponent({
 }
 
 .team-only {
-  color: var(--teamColor);
+  color: global.$teamColor;
 
   &::after {
     content: '*';
@@ -328,17 +339,11 @@ export default defineComponent({
 
 .no-vehicles-warning {
   text-align: center;
-  width: 100%;
   padding: 1em;
   background-color: #161c2e;
 }
 
-@include responsive.midScreen {
-  .vehicles {
-    height: 100vh;
-    min-height: 400px;
-  }
-
+@media screen and (max-width: global.$breakpointSm) {
   .actions-panel {
     align-items: stretch;
     flex-direction: column;

src/components/tabs/stock-list/StockActions.vue

@@ -1,12 +1,20 @@
 <template>
   <div class="stock_actions">
     <div class="actions-top">
-      <button class="btn btn--image" @click="clickFileInput" :data-button-tooltip="$t('stocklist.action-upload-file')">
+      <button
+        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 class="btn btn--image" @click="uploadStockFromClipboard" :data-button-tooltip="$t('stocklist.action-upload-clipboard')">
+      <button
+        class="btn btn--image"
+        @click="uploadStockFromClipboard"
+        :data-button-tooltip="$t('stocklist.action-upload-clipboard')"
+      >
         <ClipboardPaste :stroke-width="2.5" />
       </button>
 
@@ -107,11 +115,10 @@ 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,
@@ -150,11 +157,12 @@ export default defineComponent({
   }),
 
   setup() {
+    const fileUtils = useFileUtils();
     const stockListUtils = useStockListUtils();
 
     return {
+      fileUtils,
       stockListUtils,
-      getCurrentStockFileName,
     };
   },
 
@@ -194,7 +202,8 @@ export default defineComponent({
 
         availableIndexes.splice(i, -1);
 
-        const randAvailableIndex = availableIndexes[Math.floor(Math.random() * availableIndexes.length)];
+        const randAvailableIndex =
+          availableIndexes[Math.floor(Math.random() * availableIndexes.length)];
         const tempSwap = this.store.stockList[randAvailableIndex];
 
         this.store.stockList[randAvailableIndex] = this.store.stockList[i];
@@ -207,7 +216,9 @@ export default defineComponent({
 
       const isFirstTractionUnit = isTractionUnit(this.store.stockList[0].vehicleRef);
 
-      const sliceToSwap = isFirstTractionUnit ? this.store.stockList.slice(1) : this.store.stockList.slice();
+      const sliceToSwap = isFirstTractionUnit
+        ? this.store.stockList.slice(1)
+        : this.store.stockList.slice();
 
       sliceToSwap.reverse();
 
@@ -219,7 +230,7 @@ export default defineComponent({
     downloadStock() {
       if (this.store.stockList.length == 0) return alert(this.$t('stocklist.alert-empty'));
 
-      const defaultName = this.getCurrentStockFileName();
+      const defaultName = this.fileUtils.getCurrentStockFileName();
       const fileName = prompt(this.$t('stocklist.prompt-file'), defaultName);
 
       if (!fileName) return;
@@ -262,7 +273,7 @@ export default defineComponent({
     saveStockDataToStorage() {
       if (this.store.stockList.length == 0) return;
 
-      const defaultName = this.getCurrentStockFileName();
+      const defaultName = this.fileUtils.getCurrentStockFileName();
       const entryName = prompt(this.$t('stocklist.prompt-bookmark'), defaultName);
 
       if (!entryName) return;
@@ -296,8 +307,6 @@ 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'));

src/components/tabs/stock-list/StockList.vue

@@ -2,16 +2,15 @@
   <div class="list-wrapper">
     <StockThumbnails :onListItemClick="onListItemClick" />
 
-    <ul>
-      <transition-group name="stock-list-anim">
-        <li v-if="stockIsEmpty" class="list-empty">
-          {{ $t('stocklist.list-empty') }}
-        </li>
+    <div v-if="stockIsEmpty" class="list-empty">
+      <div class="stock-info">{{ $t('stocklist.list-empty') }}</div>
+    </div>
 
+    <ul v-else>
+      <transition-group name="stock-list-anim">
         <li
           v-for="(stock, i) in store.stockList"
           :key="stock.id"
-          class="stock-item"
           :class="{ loco: isTractionUnit(stock.vehicleRef) }"
           tabindex="0"
           @click="onListItemClick(i)"
@@ -21,7 +20,13 @@
           @keydown.backspace="stockListUtils.removeStock(i)"
           ref="itemRefs"
         >
-          <div class="stock-info" @dragstart="onDragStart(i)" @drop="onDrop($event, i)" @dragover="allowDrop" draggable="true">
+          <div
+            class="stock-info"
+            @dragstart="onDragStart(i)"
+            @drop="onDrop($event, i)"
+            @dragover="allowDrop"
+            draggable="true"
+          >
             <span class="stock-info-no" :data-selected="i == store.chosenStockListIndex">
               <span v-if="i == store.chosenStockListIndex">&bull;&nbsp;</span>
               {{ i + 1 }}.
@@ -29,10 +34,17 @@
 
             <span
               class="stock-info-type"
-              :data-sponsor-only="stock.vehicleRef.sponsorOnlyTimestamp && stock.vehicleRef.sponsorOnlyTimestamp > Date.now()"
+              :data-sponsor-only="
+                stock.vehicleRef.sponsorOnlyTimestamp &&
+                stock.vehicleRef.sponsorOnlyTimestamp > Date.now()
+              "
               :data-team-only="stock.vehicleRef.teamOnly"
             >
-              {{ isTractionUnit(stock.vehicleRef) ? stock.vehicleRef.type : getCarSpecFromType(stock.vehicleRef.type) }}
+              {{
+                isTractionUnit(stock.vehicleRef)
+                  ? stock.vehicleRef.type
+                  : getCarSpecFromType(stock.vehicleRef.type)
+              }}
             </span>
 
             <span class="stock-info-cargo" v-if="stock.cargo">
@@ -41,7 +53,9 @@
 
             <span class="stock-info-length">{{ stock.vehicleRef.length }}m</span>
 
-            <span class="stock-info-mass"> {{ ((stock.vehicleRef.weight + (stock.cargo?.weight ?? 0)) / 1000).toFixed(1) }}t </span>
+            <span class="stock-info-mass">
+              {{ ((stock.vehicleRef.weight + (stock.cargo?.weight ?? 0)) / 1000).toFixed(1) }}t
+            </span>
             <span class="stock-info-speed">{{ stock.vehicleRef.maxSpeed }}km/h</span>
           </div>
         </li>
@@ -109,7 +123,10 @@ export default defineComponent({
       const stock = this.store.stockList[stockID];
 
       this.store.chosenStockListIndex =
-        this.store.chosenStockListIndex == stockID && this.store.chosenVehicle?.type == stock.vehicleRef.type ? -1 : stockID;
+        this.store.chosenStockListIndex == stockID &&
+        this.store.chosenVehicle?.type == stock.vehicleRef.type
+          ? -1
+          : stockID;
 
       if (this.store.chosenStockListIndex == -1) {
         this.store.chosenVehicle = null;
@@ -137,32 +154,27 @@ 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: var(--secondaryColor);
+  background-color: global.$secondaryColor;
   border-radius: 0.5em;
   padding: 0.75em;
   font-weight: bold;
-  width: 100%;
 }
 
 ul {
-  overflow-y: auto;
+  overflow-y: scroll;
+  height: 500px;
 }
 
 ul > li {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  white-space: nowrap;
+  min-width: 500px;
 
   margin: 0.25em 0;
 
@@ -190,14 +202,14 @@ li > .stock-info {
 
 .stock-info-no,
 .stock-info-type {
-  background-color: var(--secondaryColor);
+  background-color: global.$secondaryColor;
 
   &[data-team-only='true'] {
-    color: var(--teamColor);
+    color: global.$teamColor;
   }
 
   &[data-sponsor-only='true'] {
-    color: var(--accentColor);
+    color: global.$sponsorColor;
   }
 }
 
@@ -206,7 +218,7 @@ li > .stock-info {
   text-align: right;
 
   &[data-selected='true'] {
-    color: var(--accentColor);
+    color: global.$accentColor;
   }
 }
 
@@ -241,10 +253,9 @@ li > .stock-info {
   }
 }
 
-@include responsive.midScreen {
+@media screen and (max-width: global.$breakpointMd) {
   ul {
-    height: 100vh;
-    min-height: 400px;
+    min-height: auto;
   }
 }
 </style>

src/components/tabs/stock-list/StockThumbnails.vue

@@ -199,11 +199,11 @@ ul {
   }
 
   &[data-sponsor-only='true'] > b {
-    color: var(--accentColor);
+    color: global.$sponsorColor;
   }
 
   &[data-team-only='true'] > b {
-    color: var(--teamColor);
+    color: global.$teamColor;
   }
 
   img {

src/components/tabs/stock-list/StockWarnings.vue

@@ -91,7 +91,7 @@ export default defineComponent({
 .warning {
   padding: 0.25em;
   margin: 0.25em 0;
-  background: var(--accentColor);
+  background: global.$accentColor;
   color: black;
 
   font-weight: bold;

src/composables/file.ts

@@ -1,51 +0,0 @@
-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(';');
-}

src/data/generatorData.json

@@ -1,32 +1,198 @@
 {
   "cargo": {
-    "containers": ["412Z:sc_20", "412Z:sc_40", "627Z:sc_20", "627Z:sc_40"],
-    "food": ["412Z:tc_20_loaded", "627Z:tc_20_loaded"],
-    "food-empty": ["412Z:tc_20_empty", "627Z:tc_20_empty"],
-    "intermodal": [
+    "kontenery": [
+      "412Z:sc_20_red",
+      "412Z:sc_20_blue",
+      "412Z:sc_20_green",
+      "412Z:sc_20_APL",
+      "412Z:sc_20_CMA",
+      "412Z:sc_20_Cosco",
+      "412Z:sc_20_Evr1",
+      "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",
       "627Z:sc_20",
+      "627Z:sc_20_red",
+      "627Z:sc_20_blue",
+      "627Z:sc_20_green",
+      "627Z:sc_20_APL",
+      "627Z:sc_20_CMA",
+      "627Z:sc_20_Cosco",
+      "627Z:sc_20_Evr1",
+      "627Z:sc_20_Evr2",
+      "627Z:sc_20_Finnlines",
+      "627Z:sc_20_Hamburg",
+      "627Z:sc_20_Hanjin",
+      "627Z:sc_20_HapagLloyd",
+      "627Z:sc_20_HMM",
+      "627Z:sc_20_KLine",
+      "627Z:sc_20_Maersk",
+      "627Z:sc_20_ONE",
+      "627Z:sc_20_OOCL",
+      "627Z:sc_20_Schavemaker",
+      "627Z:sc_20_TD2",
+      "627Z:sc_20_Titan",
+      "627Z:sc_20_Toll",
+      "627Z:sc_40_red",
       "627Z:sc_40",
-      "627Z:tc_20_empty",
-      "627Z:tc_20_loaded",
-      "627Z:wt_20_empty",
+      "627Z:sc_40_blue",
+      "627Z:sc_40_green",
+      "627Z:sc_40_APL",
+      "627Z:sc_40_CMA",
+      "627Z:sc_40_Cosco",
+      "627Z:sc_40_Evr1",
+      "627Z:sc_40_Evr2",
+      "627Z:sc_40_Finnlines",
+      "627Z:sc_40_Hamburg",
+      "627Z:sc_40_Hanjin",
+      "627Z:sc_40_HapagLloyd",
+      "627Z:sc_40_HMM",
+      "627Z:sc_40_KLine",
+      "627Z:sc_40_Maersk",
+      "627Z:sc_40_ONE",
+      "627Z:sc_40_OOCL",
+      "627Z:sc_40_Schavemaker",
+      "627Z:sc_40_TD2",
+      "627Z:sc_40_Titan",
+      "627Z: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",
-      "412Z:sc_20",
-      "412Z:sc_40",
-      "412Z:tc_20_empty",
-      "412Z:tc_20_loaded",
-      "412Z:wt_20_empty",
-      "412Z: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"
     ],
-    "biomass": ["412Z:wt_20_biomass", "627Z:wt_20_biomass"],
-    "biomass-empty": [
+    "biomasa-puste": [
       "412Z:wt_20_empty",
-      "627Z: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_mix_blue_empty",
+      "627Z:wt_20_mix_blue_CDC_white_empty",
+      "627Z:wt_20_mix_blue_white_empty",
+      "627Z:wt_20_mix_EPC_empty",
+      "627Z:wt_20_mix_green_empty",
+      "627Z:wt_20_black_empty",
+      "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"
     ],
-    "cold-storage": ["202Lc:all"],
-    "loose-cargo": ["426S:all", "208Kf:all", "401Ka_PKP_Gags:all", "401Ka_PKPC_Gags:all", "411V_PKPC_Facc:all", "411V_ALU_Faccpp:all", "411V_DOLWR_Facc:all", "411V_PKP_Facc:all", "411V_PNUIK_Facc:all"],
-    "coal": ["412W:coal_01", "413S:coal_413S", "429W:coal_01", "401Zb:coal_02"],
-    "ore": ["412W:ore_01", "401Zl:ore_35", "429W:ore_01"],
-    "sand": [
+    "chłodnia": [
+      "202Lc:all"
+    ],
+    "drobnica": [
+      "426S:all",
+      "208Kf:all",
+      "401Ka_PKP_Gags:all",
+      "401Ka_PKPC_Gags:all"
+    ],
+    "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",
@@ -34,34 +200,113 @@
       "429W:sand_01",
       "429W:sand_02",
       "401Zb:sand_03",
-      "409Va:sand_409Va",
       "418Va:sand_418V",
       "418Vb:sand_418V"
     ],
-    "chalk": ["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"],
-    "fuel": ["29R_CTLL:all", "29R_PKP:all", "445Rb:all"],
-    "molasses": ["29R_PLPOL:all"],
-    "gravel": ["441V"],
-    "wheels": ["424Z:wheels_01"],
-    "wood": ["424Z:woods_01", "424Z:woods_02"],
-    "rails": ["424Z:rails_01"],
-    "cables": ["424Z:cables_01", "24Z:cables_Ks", "401Ze:cables_02"],
-    "aggregate": ["59WS:all"],
-    "technical": ["209c", "304Ca", "102a_PKPE", "401Ka_PKP_XGa:all"],
-    "mail": ["211K:all"],
-    "concrete": ["408S:cement_4", "206S_CEMET:cement_3", "206S_SPEED:cement_3", "220S_CEMET:cement_3"],
-    "lime": ["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"],
-    "wheat": ["206Sh_PKP_Ugpps:wheat_3", "206Sh_PKPC_Ugpps:wheat_3"],
-    "corn": ["206Sh_PKP_Ugpps:corn_3", "206Sh_PKPC_Ugpps:corn_3"],
-    "fodder": ["206Sh_PKP_Ugpps:forage_3", "206Sh_PKPC_Ugpps:forage_3"],
-    "military": ["426Z:tank_01", "426Z:truck_01", "426Z:vehicles_01"],
-    "vehicles_nysa": ["424Z:vehicles_nysa", "426Z:vehicles_02"],
-    "carbide": ["421S:carbide_01"],
-    "sensitive": ["425S:all", "421S:carbide_01"],
-    "steel": ["401Ze:steel_01", "401Ze:steel_02"],
-    "gas": ["WB117:all"]
+    "kreda": [
+      "413S:chalk_413S"
+    ],
+    "kamień": [
+      "412W:stone_01",
+      "412W:stone_50",
+      "401Zl:stone_25",
+      "429W:stone_01",
+      "401Zb:stone_02",
+      "418Va:stone_418V",
+      "418Vb:stone_418V"
+    ],
+    "złom": [
+      "412W:scrap_01",
+      "412W:scrap_02",
+      "429W:scrap_01",
+      "429W:scrap_02"
+    ],
+    "paliwo": [
+      "29R_CTLL:all",
+      "29R_PKP:all",
+      "445Rb:all"
+    ],
+    "melasa": [
+      "29R_PLPOL: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"
+    ]
   }
-}
+}

src/http.ts

@@ -1,23 +1,10 @@
-export class HttpClient {
-  constructor(private readonly baseURL: string) {}
+import axios from 'axios';
 
-  async get<T>(url: string, params?: Record<string, any>): Promise<T> {
-    const absoluteURL = new URL(this.baseURL + '/' + url);
+const http = axios.create({
+  baseURL:
+    import.meta.env.VITE_API_DEV === '1' && import.meta.env.DEV
+      ? 'http://localhost:3001'
+      : 'https://stacjownik.spythere.eu',
+});
 
-    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();
-  }
-}
+export default http;

src/locales/en.json

@@ -221,42 +221,38 @@
     "stock-title": "Rolling stock:"
   },
   "cargo": {
-    "containers": "containers",
-    "food": "food tanks",
-    "food-empty": "food tanks (empty)",
-    "biomass": "biomass",
-    "biomass-empty": "biomass (empty)",
-    "cold-storage": "cold storage",
-    "loose-cargo": "loose cargo",
-    "coal": "coal",
-    "ore": "ore",
-    "sand": "sand",
-    "chalk": "chalk",
-    "stone": "stone",
-    "scrap": "scrap",
-    "fuel": "fuel",
-    "molasses": "molasses",
-    "gravel": "gravel",
-    "wheels": "wheels",
-    "wood": "wood",
-    "rails": "rails",
-    "cables": "cables",
-    "aggregate": "aggregate",
-    "technical": "technical",
-    "mail": "mail",
-    "concrete": "concrete",
-    "lime": "lime",
+    "kontenery": "containers",
+    "biomasa": "biomass",
+    "biomasa-puste": "biomass (empty)",
+    "chłodnia": "refrigerator",
+    "drobnica": "loose cargo",
+    "węgiel": "coal",
+    "ruda": "ore",
+    "piasek": "sand",
+    "kreda": "chalk",
+    "kamień": "stone",
+    "złom": "scrap",
+    "paliwo": "fuel",
+    "melasa": "molasses",
+    "żwir": "gravel",
+    "koła": "wheels",
+    "drewno": "wood",
+    "szyny": "rails",
+    "kable": "cables",
+    "kruszywo": "aggregate",
+    "techniczne": "technical",
+    "poczta": "mail",
+    "cement": "concrete",
+    "wapno": "lime",
     "soda": "soda",
-    "wheat": "wheat",
-    "corn": "corn",
-    "fodder": "fodder",
-    "carbide": "carbide",
-    "vehicles_nysa": "vehicles (nysa)",
-    "military": "vehicles (military)",
-    "sensitive": "sensitive",
-    "steel": "steel",
-    "gas": "gas",
-    "intermodal": "intermodalne"
+    "pszenica": "wheat",
+    "kukurydza": "corn",
+    "pasza": "fodder",
+    "karbid": "carbide",
+    "pojazdy": "vehicles",
+    "wrażliwe": "sensitive",
+    "stal": "steel",
+    "gaz": "gas"
   },
   "usage": {
     "Gor89": "passenger carriage",
@@ -318,7 +314,6 @@
     "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",
@@ -332,11 +327,7 @@
     "418Vb_WIEBE": "loose cargo (sand, stone)",
     "418Vb_ZOS": "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"
+    "PRSM4": "rail welding car"
   },
   "cargo-warnings": {
     "title": "Rolling stock containing extra cargo warnings:",
@@ -344,12 +335,6 @@
     "warning_un1965_twr": "TWR: LPG (UN 1965)",
     "warning_un1965_tn": "TN: LPG - empty tank (UN 1965)",
     "warning_un1202_tn": "TN: diesel fuel (UN 1202)",
-    "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!"
+    "warning_military_pn": "PN: military transport"
   }
-}
+}

src/locales/pl.json

@@ -221,42 +221,38 @@
     "stock-title": "Skład:"
   },
   "cargo": {
-    "containers": "kontenery",
-    "food": "żywność",
-    "food-empty": "żywność (puste)",
-    "biomass": "biomasa",
-    "biomass-empty": "biomasa (puste)",
-    "cold-storage": "chłodnia",
-    "loose-cargo": "drobnica",
-    "coal": "węgiel",
-    "ore": "ruda",
-    "sand": "piasek",
-    "chalk": "kreda",
-    "stone": "kamień",
-    "scrap": "złom",
-    "fuel": "paliwo",
-    "molasses": "melasa",
-    "gravel": "żwir",
-    "wheels": "koła",
-    "wood": "drewno",
-    "rails": "szyny",
-    "cables": "kable",
-    "aggregate": "kruszywo",
-    "technical": "techniczne",
-    "mail": "poczta",
-    "concrete": "cement",
-    "lime": "wapno",
+    "kontenery": "kontenery",
+    "biomasa": "biomasa",
+    "biomasa-puste": "biomasa (puste)",
+    "chłodnia": "chłodnia",
+    "drobnica": "drobnica",
+    "węgiel": "węgiel",
+    "ruda": "ruda",
+    "piasek": "piasek",
+    "kreda": "kreda",
+    "kamień": "kamień",
+    "złom": "złom",
+    "paliwo": "paliwo",
+    "melasa": "melasa",
+    "żwir": "żwir",
+    "koła": "koła",
+    "drewno": "drewno",
+    "szyny": "szyny",
+    "kable": "kable",
+    "kruszywo": "kruszywo",
+    "techniczne": "techniczne",
+    "poczta": "poczta",
+    "cement": "cement",
+    "wapno": "wapno",
     "soda": "soda",
-    "wheat": "pszenica",
-    "corn": "kukurydza",
-    "fodder": "pasza",
-    "carbide": "karbid",
-    "vehicles_nysa": "pojazdy (nysa)",
-    "military": "pojazdy (wojsko)",
-    "sensitive": "wrażliwe",
-    "steel": "stal",
-    "gas": "gaz",
-    "intermodal": "intermodalne"
+    "pszenica": "pszenica",
+    "kukurydza": "kukurydza",
+    "pasza": "pasza",
+    "karbid": "karbid",
+    "pojazdy": "pojazdy",
+    "wrażliwe": "wrażliwe",
+    "stal": "stal",
+    "gaz": "gaz"
   },
   "usage": {
     "Gor89": "wagon pasażerski",
@@ -317,7 +313,6 @@
     "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",
@@ -331,11 +326,7 @@
     "418Vb_WIEBE": "drobnica, ładunki sypkie (piasek, kamień)",
     "418Vb_ZOS": "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"
+    "PRSM4": "zgrzewarka torowa"
   },
   "cargo-warnings": {
     "title": "Skład z dodatkowymi uwagami przewozowymi:",
@@ -343,12 +334,6 @@
     "warning_un1965_twr": "TWR: gazy węglowodorowe skroplone (UN 1965)",
     "warning_un1965_tn": "TN: gazy węglowodorowe skroplone - puste cysterny (UN 1965)",
     "warning_un1202_tn": "TN: olej napędowy (UN 1202)",
-    "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!"
+    "warning_military_pn": "PN: transport wojskowy"
   }
-}
+}

src/managers/apiManager.ts

@@ -0,0 +1,16 @@
+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;
+  }
+}

src/mixins/stockMixin.ts

@@ -28,7 +28,11 @@ export default defineComponent({
 
       const stock = this.getStockObject(vehicle, cargo);
 
-      if (isTractionUnit(stock.vehicleRef) && this.store.stockList.length > 0 && !isTractionUnit(this.store.stockList[0].vehicleRef))
+      if (
+        isTractionUnit(stock.vehicleRef) &&
+        this.store.stockList.length > 0 &&
+        !isTractionUnit(this.store.stockList[0].vehicleRef)
+      )
         this.store.stockList.unshift(stock);
       else this.store.stockList.push(stock);
     },
@@ -36,7 +40,8 @@ export default defineComponent({
     addLocomotive(loco: ILocomotive) {
       const stockObj = this.getStockObject(loco);
 
-      if (this.store.stockList.length > 0 && !isTractionUnit(this.store.stockList[0].vehicleRef)) this.store.stockList.unshift(stockObj);
+      if (this.store.stockList.length > 0 && !isTractionUnit(this.store.stockList[0].vehicleRef))
+        this.store.stockList.unshift(stockObj);
       else this.store.stockList.push(stockObj);
     },
 
@@ -78,20 +83,7 @@ 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;
-
-            // 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 (cargo) vehicleCargo = vehicle?.cargoTypes.find((c) => c.id == cargo) || null;
         }
 
         if (!vehicle && type) {

src/store.ts

@@ -26,11 +26,9 @@ import {
   totalWeight,
 } from './utils/vehicleUtils';
 
-import realCompositionsJSON from './data/realCompositions.json';
-import { HttpClient } from './http';
-import { API } from './types/api.types';
+import http from './http';
 
-const baseURL = import.meta.env.VITE_API_DEV === '1' && import.meta.env.DEV ? 'http://localhost:3001' : 'https://stacjownik.spythere.eu';
+import realCompositionsJSON from './data/realCompositions.json';
 
 export const useStore = defineStore('store', {
   state: () => ({
@@ -54,7 +52,6 @@ export const useStore = defineStore('store', {
 
     vehiclePreviewSrc: '',
 
-    isMigrationInfoOpen: false,
     isRandomizerCardOpen: false,
     isRealStockListCardOpen: false,
 
@@ -67,8 +64,6 @@ export const useStore = defineStore('store', {
     chosenStorageStockString: '',
 
     compatibleSimulatorVersion: '2025.1.1',
-
-    httpClient: new HttpClient(baseURL),
   }),
 
   getters: {
@@ -129,13 +124,8 @@ export const useStore = defineStore('store', {
   actions: {
     async fetchVehiclesAPI() {
       try {
-        const response = await this.httpClient.get<API.VehiclesData.Response>('api/getVehiclesData');
-        this.vehiclesData = response.vehicles.map((v) => ({
-          ...v,
-          group: response.vehicleGroups.find((g) => g.id == v.vehicleGroupsId)!,
-        }));
-
-        console.log(response);
+        const vehiclesData = (await http.get<IVehiclesAPIResponse>('/api/getVehicles')).data;
+        this.vehiclesData = vehiclesData;
       } catch (error) {
         console.error(error);
       }

src/styles/_fonts.scss

@@ -1,19 +0,0 @@
-@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;
-}

src/styles/_global.scss

@@ -1,15 +1,33 @@
-@use 'fonts';
-@use 'responsive';
+$breakpointMd: 960px;
+$breakpointSm: 550px;
 
-:root {
-  --bgColor: #2b3552;
-  --bgColorDarker: #1f263b;
-  --textColor: #fff;
-  --secondaryColor: #1b1b1b;
-  --accentColor: #e4c428;
+$bgColor: #2b3552;
+$bgColorDarker: #1f263b;
+$textColor: #fff;
+$secondaryColor: #1b1b1b;
+$accentColor: #e4c428;
 
-  --sponsorColor: gold;
-  --teamColor: #ff4848;
+$sponsorColor: gold;
+$teamColor: #ff4848;
+
+@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 {
@@ -38,7 +56,7 @@ html {
 
   font-family: Lato, sans-serif;
 
-  background-color: var(--bgColorDarker);
+  background-color: $bgColor;
   overflow-x: hidden;
 }
 
@@ -53,6 +71,15 @@ a {
   text-decoration: none;
 
   transition: color 250ms;
+
+  &:visited {
+    color: white;
+  }
+
+  &:hover,
+  &:focus {
+    color: $accentColor;
+  }
 }
 
 select,
@@ -77,11 +104,11 @@ button {
   color: white;
 
   &:hover {
-    color: var(--accentColor);
+    color: $accentColor;
   }
 
   &:focus-visible {
-    outline: 1px solid var(--accentColor);
+    outline: 1px solid $accentColor;
   }
 }
 
@@ -103,7 +130,7 @@ button {
 
     z-index: 100;
 
-    @include responsive.smallScreen {
+    @media screen and (max-width: $breakpointSm) {
       left: 50%;
       transform: translate(-50%, 3ex);
       text-align: center;
@@ -138,7 +165,7 @@ button {
   padding: 0.4em 0.75em;
 
   outline: none;
-  background-color: var(--secondaryColor);
+  background-color: $secondaryColor;
   border-radius: 8px;
   font-weight: bold;
 
@@ -147,25 +174,25 @@ button {
     background-color 150ms;
 
   &:hover {
-    color: var(--accentColor);
+    color: $accentColor;
   }
 
   &.btn--outline {
     background: none;
     font-weight: bold;
-    outline: 1px solid var(--accentColor);
+    outline: 1px solid $accentColor;
   }
 
   &:focus-visible {
-    color: var(--accentColor);
+    color: $accentColor;
     outline: 1px solid white;
   }
 
   &[data-chosen='true'] {
-    background-color: var(--accentColor);
+    background-color: $accentColor;
     color: black;
 
-    box-shadow: 0 0 5px 1px var(--accentColor);
+    box-shadow: 0 0 5px 1px $accentColor;
   }
 
   &[data-disabled='true'] {
@@ -213,13 +240,13 @@ button {
 }
 
 .link-btn.router-link-exact-active {
-  color: var(--accentColor);
+  color: $accentColor;
 }
 
 select,
 input[type='text'],
 input[type='number'] {
-  background: var(--bgColor);
+  background: $bgColor;
   border: 2px solid #aaa;
   outline: none;
 
@@ -230,7 +257,7 @@ input[type='number'] {
   font-size: 1em;
 
   &:focus-visible {
-    border-color: var(--accentColor);
+    border-color: $accentColor;
   }
 
   &::placeholder {
@@ -241,7 +268,7 @@ input[type='number'] {
 option {
   color: white;
   border: none;
-  background-color: var(--bgColor);
+  background-color: $bgColor;
 }
 
 ul {
@@ -252,7 +279,7 @@ ul {
 
 .text {
   &--accent {
-    color: var(--accentColor);
+    color: $accentColor;
   }
 
   &--grayed {
@@ -309,18 +336,19 @@ hr {
   }
 
   span:focus {
-    color: var(--accentColor);
+    color: $accentColor;
     outline: none;
   }
 
-  label > input:checked + span {
-    color: var(--accentColor);
-    border-color: var(--accentColor);
+  label>input:checked+span {
+    color: $accentColor;
+    border-color: $accentColor;
   }
 }
 
 // Vue Transition anims
-.slide-top-anim {
+.slide-top {
+
   &-enter-from,
   &-leave-to {
     transform: translateY(-100%);
@@ -332,19 +360,8 @@ hr {
   }
 }
 
-.slide-bottom-anim {
-  &-enter-from,
-  &-leave-to {
-    transform: translateY(100%);
-  }
+.card-appear {
 
-  &-enter-active,
-  &-leave-active {
-    transition: transform 100ms ease-in-out;
-  }
-}
-
-.card-appear-anim {
   &-enter-from,
   &-leave-to {
     opacity: 0;
@@ -354,4 +371,4 @@ hr {
   &-leave-active {
     transition: all 100ms ease-in-out;
   }
-}
+}

src/styles/_responsive.scss

@@ -1,20 +0,0 @@
-$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;
-  }
-}

src/styles/_tab.scss

@@ -1,10 +1,13 @@
+@use 'global';
+
 .tab {
   height: 100%;
+  margin-top: 1px;
 
   &_header {
     padding: 0.5em 1em;
 
-    background-color: var(--secondaryColor);
+    background-color: global.$secondaryColor;
     text-align: center;
 
     h2 {
@@ -25,6 +28,7 @@
   }
 
   &_content {
+    margin-top: 1em;
     height: 100%;
   }
 

src/types/api.types.ts

@@ -1,52 +1,87 @@
-import { IVehicleRestrictions } from './common.types';
-
 // API namespace
 export namespace API {
-  export namespace VehiclesData {
-    export interface VehicleObject {
-      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 ActiveData {
+    trains: Train[];
+    activeSceneries: ActiveScenery[];
   }
 }
+
+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;
+}

src/types/common.types.ts

@@ -74,6 +74,7 @@ export interface IVehicleData {
   cabinName: string | null;
   restrictions: IVehicleRestrictions | null;
   vehicleGroupsId: number;
+  simulatorVersion: string;
   group: IVehicleGroup;
 }
 

src/utils/fileUtils.ts

@@ -0,0 +1,27 @@
+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 };
+};

src/utils/vehicleUtils.ts

@@ -1,57 +1,6 @@
 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;
 }
@@ -93,26 +42,12 @@ 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,
+      cargoTypes: data.group?.cargoTypes ?? [],
 
       sponsorOnlyTimestamp: data.restrictions?.sponsorOnly ?? 0,
       teamOnly: data.restrictions?.teamOnly ?? false,
@@ -171,13 +106,12 @@ export function getCargoWarnings(stockList: IStock[]) {
   let warnings: Set<string> = new Set();
 
   stockList.forEach((stockVehicle) => {
-    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.vehicleRef.type.startsWith('WB117')) warnings.add(stockVehicle.cargo ? 'warning_un1965_twr' : 'warning_un1965_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');
+    if (stockVehicle.vehicleRef.group == 'wagon-freight') {
+      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');
+      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('warning_un1202_tn');
+    }
   });
 
   return warnings;

src/views/AppContainerView.vue

@@ -25,22 +25,13 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@use '../styles/responsive';
-
 .app-container {
-  display: grid;
+  display: flex;
   justify-content: center;
-  
-  grid-template-rows: minmax(900px, 1fr) auto;
-  gap: 0.5em;
-  
-  height: 100vh;
-}
+  align-items: center;
+  flex-direction: column;
 
-@include responsive.midScreen {
-  .app-container {
-    height: auto;
-    min-height: 100vh;
-  }
+  min-height: 100vh;
+  padding: 0.5em;
 }
 </style>

vite.config.ts

@@ -10,7 +10,7 @@ export default defineConfig({
   preview: { port: 4138 },
   css: {
     preprocessorOptions: {
-      scss: { silenceDeprecations: ['legacy-js-api'] },
+      scss: { additionalData: `@use '@/styles/global';`, silenceDeprecations: ['legacy-js-api'] },
     },
   },
   resolve: {
@@ -23,11 +23,13 @@ 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,ico,woff,woff2,ttf}', '**/*.{png,jpg,jpeg,svg,webp,gif}'],
+        globPatterns: ['**/*.{js,css,html,jpg,png,svg,img,woff,woff2}'],
 
         runtimeCaching: [
           {