From 83f5b07c7e9eb0611ff26af45e1a4c815add3e59 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Mon, 19 Feb 2024 17:37:46 +0100
Subject: [PATCH] code adaptation for API changes; tons changed to kilos

---
 src/App.vue                                   |  12 +-
 src/components/app/Footer.vue                 |  19 ++-
 src/components/app/MainContainer.vue          |  12 +-
 src/components/common/Checkbox.vue            |   4 +-
 src/components/sections/InputsSection.vue     |   4 +-
 src/components/sections/StockSection.vue      |  35 ++--
 src/components/sections/TrainImageSection.vue |   2 +-
 src/components/tabs/NumberGeneratorTab.vue    | 156 ++++++++++++------
 src/components/tabs/StockGeneratorTab.vue     |  16 +-
 src/components/tabs/StockListTab.vue          |  12 +-
 src/components/tabs/WikiListTab.vue           |  24 ++-
 src/components/utils/StockThumbnails.vue      |  32 ++--
 src/constants/massLimits.json                 |  17 +-
 src/locales/en.json                           |   2 +-
 src/locales/pl.json                           |   2 +-
 src/main.ts                                   |  10 +-
 src/mixins/stockMixin.ts                      |   6 +-
 src/mixins/warningsMixin.ts                   |  18 +-
 src/store.ts                                  |   8 +-
 src/styles/global.scss                        |  26 +--
 src/styles/tab.scss                           |   2 +-
 src/types.ts                                  |  29 ++--
 src/utils/vehicleLimitsUtils.ts               |  21 ++-
 src/utils/vehicleUtils.ts                     | 122 ++++++++++----
 src/views/AppContainerView.vue                |   8 +-
 25 files changed, 365 insertions(+), 234 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 2c90c22..d7d74c2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { useStore } from './store';
-import ImageFullscreenPreview from './components/utils/ImageFullscreenPreview.vue';
-import AppContainerView from './views/AppContainerView.vue';
-import AppModals from './components/app/AppModals.vue';
+import { defineComponent } from "vue";
+import { useStore } from "./store";
+import ImageFullscreenPreview from "./components/utils/ImageFullscreenPreview.vue";
+import AppContainerView from "./views/AppContainerView.vue";
+import AppModals from "./components/app/AppModals.vue";
 
 export default defineComponent({
   data() {
@@ -26,7 +26,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import './styles/global.scss';
+@import "./styles/global.scss";
 
 /* APP */
 #app {
diff --git a/src/components/app/Footer.vue b/src/components/app/Footer.vue
index 5f09d5d..aed8291 100644
--- a/src/components/app/Footer.vue
+++ b/src/components/app/Footer.vue
@@ -3,32 +3,35 @@
     <i18n-t keypath="footer.disclaimer" tag="div" class="text--grayed">
       <template #tos>
         <a style="color: #ccc" :href="$t('footer.tos-href')" target="_blank">
-          {{ $t('footer.tos') }}
+          {{ $t("footer.tos") }}
         </a>
       </template>
     </i18n-t>
 
     <div class="text--grayed" v-if="store.stockData">
-      {{ $t('footer.version-check', { version: store.stockData.version }) }}
+      {{ $t("footer.version-check", { version: store.stockData.version }) }}
     </div>
 
     <div>
       &copy;
-      <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
-      {{ new Date().getUTCFullYear() }} | v{{ VERSION }}{{ !isOnProductionHost ? 'dev' : '' }}
+      <a href="https://td2.info.pl/profile/?u=20777" target="_blank"
+        >Spythere</a
+      >
+      {{ new Date().getUTCFullYear() }} | v{{ VERSION
+      }}{{ !isOnProductionHost ? "dev" : "" }}
     </div>
   </footer>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import packageInfo from '../../../package.json';
-import { useStore } from '../../store';
+import { defineComponent } from "vue";
+import packageInfo from "../../../package.json";
+import { useStore } from "../../store";
 
 export default defineComponent({
   data() {
     return {
-      isOnProductionHost: location.hostname == 'pojazdownik-td2.web.app',
+      isOnProductionHost: location.hostname == "pojazdownik-td2.web.app",
       VERSION: packageInfo.version,
       store: useStore(),
     };
diff --git a/src/components/app/MainContainer.vue b/src/components/app/MainContainer.vue
index 3f5f7ad..95b59dd 100644
--- a/src/components/app/MainContainer.vue
+++ b/src/components/app/MainContainer.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import LogoSection from '../sections/LogoSection.vue';
-import InputsSection from '../sections/InputsSection.vue';
-import TrainImageSection from '../sections/TrainImageSection.vue';
-import StockSection from '../sections/StockSection.vue';
+import { defineComponent } from "vue";
+import LogoSection from "../sections/LogoSection.vue";
+import InputsSection from "../sections/InputsSection.vue";
+import TrainImageSection from "../sections/TrainImageSection.vue";
+import StockSection from "../sections/StockSection.vue";
 
 export default defineComponent({
   components: { LogoSection, InputsSection, TrainImageSection, StockSection },
@@ -20,7 +20,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/global.scss';
+@import "../../styles/global.scss";
 
 main {
   display: grid;
diff --git a/src/components/common/Checkbox.vue b/src/components/common/Checkbox.vue
index a88dff8..f35bc44 100644
--- a/src/components/common/Checkbox.vue
+++ b/src/components/common/Checkbox.vue
@@ -27,7 +27,7 @@ div {
   user-select: none;
 
   &::before {
-    content: '\2716';
+    content: "\2716";
     margin-right: 0.5em;
     color: #aaa;
   }
@@ -51,7 +51,7 @@ input {
 
     &::before {
       color: palegreen;
-      content: '\2714';
+      content: "\2714";
     }
   }
 }
diff --git a/src/components/sections/InputsSection.vue b/src/components/sections/InputsSection.vue
index 337081a..446997a 100644
--- a/src/components/sections/InputsSection.vue
+++ b/src/components/sections/InputsSection.vue
@@ -80,7 +80,7 @@
           </option>
           <option :value="null" v-else>{{ $t('inputs.cargo-empty') }}</option>
 
-          <option v-for="cargo in store.chosenCar?.cargoList" :value="cargo" :key="cargo.id">
+          <option v-for="cargo in store.chosenCar?.cargoTypes" :value="cargo" :key="cargo.id">
             {{ cargo.id }}
           </option>
         </select>
@@ -216,7 +216,7 @@ export default defineComponent({
 
         this.store.chosenVehicle = type == 'loco' ? this.store.chosenLoco : this.store.chosenCar;
 
-        this.store.chosenCargo = this.store.chosenCar?.cargoList.find((cargo) => cargo.id == this.store.chosenCargo?.id) || null;
+        this.store.chosenCargo = this.store.chosenCar?.cargoTypes.find((cargo) => cargo.id == this.store.chosenCargo?.id) || null;
       });
     },
   },
diff --git a/src/components/sections/StockSection.vue b/src/components/sections/StockSection.vue
index c928d63..0aa8b84 100644
--- a/src/components/sections/StockSection.vue
+++ b/src/components/sections/StockSection.vue
@@ -23,22 +23,27 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref } from 'vue';
-import { useStore } from '../../store';
-import StockListTab from '../tabs/StockListTab.vue';
-import StockGeneratorTab from '../tabs/StockGeneratorTab.vue';
-import NumberGeneratorTab from '../tabs/NumberGeneratorTab.vue';
-import WikiListTab from '../tabs/WikiListTab.vue';
+import { computed, onMounted, ref } from "vue";
+import { useStore } from "../../store";
+import StockListTab from "../tabs/StockListTab.vue";
+import StockGeneratorTab from "../tabs/StockGeneratorTab.vue";
+import NumberGeneratorTab from "../tabs/NumberGeneratorTab.vue";
+import WikiListTab from "../tabs/WikiListTab.vue";
 
 const sectionButtonRefs = ref([]);
 
 const store = useStore();
 type SectionMode = typeof store.stockSectionMode;
 
-const sectionModes: SectionMode[] = ['stock-list', 'wiki-list', 'number-generator', 'stock-generator'];
+const sectionModes: SectionMode[] = [
+  "stock-list",
+  "wiki-list",
+  "number-generator",
+  "stock-generator",
+];
 
 onMounted(() => {
-  window.addEventListener('keydown', (e) => {
+  window.addEventListener("keydown", (e) => {
     if (e.target instanceof HTMLInputElement) return;
 
     if (/[1234]/.test(e.key)) {
@@ -51,16 +56,16 @@ onMounted(() => {
 
 const chosenSectionComponent = computed(() => {
   switch (store.stockSectionMode) {
-    case 'stock-list':
+    case "stock-list":
       return StockListTab;
 
-    case 'wiki-list':
+    case "wiki-list":
       return WikiListTab;
 
-    case 'stock-generator':
+    case "stock-generator":
       return StockGeneratorTab;
 
-    case 'number-generator':
+    case "number-generator":
       return NumberGeneratorTab;
 
     default:
@@ -74,7 +79,7 @@ function chooseSection(sectionId: SectionMode) {
 </script>
 
 <style lang="scss">
-@import '../../styles/global.scss';
+@import "../../styles/global.scss";
 
 // Tab change animation
 .tab-change {
@@ -116,14 +121,14 @@ function chooseSection(sectionId: SectionMode) {
       left: 50%;
       transform: translateX(-50%);
 
-      content: '';
+      content: "";
       width: 0;
       height: 2px;
       transition: all 100ms;
       background-color: $accentColor;
     }
 
-    &[data-selected='true']::after {
+    &[data-selected="true"]::after {
       width: 100%;
     }
   }
diff --git a/src/components/sections/TrainImageSection.vue b/src/components/sections/TrainImageSection.vue
index 51addfd..3eccd5b 100644
--- a/src/components/sections/TrainImageSection.vue
+++ b/src/components/sections/TrainImageSection.vue
@@ -18,7 +18,7 @@
       </b>
 
       <div style="color: #ccc">
-        <div>{{ store.chosenVehicle.length }}m | {{ store.chosenVehicle.mass }}t | {{ store.chosenVehicle.maxSpeed }} km/h</div>
+        <div>{{ store.chosenVehicle.length }}m | {{ (store.chosenVehicle.weight / 1000).toFixed(1) }}t | {{ store.chosenVehicle.maxSpeed }} km/h</div>
 
         <div v-if="isLocomotive(store.chosenVehicle)">{{ $t('preview.cabin') }} {{ store.chosenVehicle.cabinType }}</div>
 
diff --git a/src/components/tabs/NumberGeneratorTab.vue b/src/components/tabs/NumberGeneratorTab.vue
index 07e3b13..8c0c7b5 100644
--- a/src/components/tabs/NumberGeneratorTab.vue
+++ b/src/components/tabs/NumberGeneratorTab.vue
@@ -1,18 +1,26 @@
 <template>
   <div class="number-generator tab">
     <div class="tab_header">
-      <h2>{{ $t('numgen.title') }}</h2>
-      <h3>{{ $t('numgen.subtitle') }}</h3>
+      <h2>{{ $t("numgen.title") }}</h2>
+      <h3>{{ $t("numgen.subtitle") }}</h3>
     </div>
 
     <div class="tab_content">
       <div class="category-select">
-        <label for="category"> {{ $t('numgen.train-category') }}</label>
-        <select id="category" v-model="chosenCategory" @change="randomizeTrainNumber()">
+        <label for="category"> {{ $t("numgen.train-category") }}</label>
+        <select
+          id="category"
+          v-model="chosenCategory"
+          @change="randomizeTrainNumber()"
+        >
           <option :value="null" disabled>
-            {{ $t('numgen.train-category') }}
+            {{ $t("numgen.train-category") }}
           </option>
-          <option v-for="(_, category) in genData.categoriesRules" :key="category" :value="category">
+          <option
+            v-for="(_, category) in genData.categoriesRules"
+            :key="category"
+            :value="category"
+          >
             {{ $t(`numgen.categories.${category}`) }}
           </option>
         </select>
@@ -20,22 +28,40 @@
 
       <div class="regions-select">
         <div>
-          <label for="begin-region"> {{ $t('numgen.start-region') }}</label>
-          <select id="begin-region" v-model="beginRegionName" @change="randomizeTrainNumber()">
+          <label for="begin-region"> {{ $t("numgen.start-region") }}</label>
+          <select
+            id="begin-region"
+            v-model="beginRegionName"
+            @change="randomizeTrainNumber()"
+          >
             <option :value="null" disabled>
-              {{ $t('numgen.start-region') }}
+              {{ $t("numgen.start-region") }}
             </option>
-            <option v-for="(_, name) in genData.regionNumbers" :key="name" :value="name">
+            <option
+              v-for="(_, name) in genData.regionNumbers"
+              :key="name"
+              :value="name"
+            >
               {{ name }}
             </option>
           </select>
         </div>
 
         <div>
-          <label for="end-region"> {{ $t('numgen.end-region') }}</label>
-          <select id="end-region" v-model="endRegionName" @change="randomizeTrainNumber()">
-            <option :value="null" disabled>{{ $t('numgen.end-region') }}</option>
-            <option v-for="(_, name) in genData.regionNumbers" :key="name" :value="name">
+          <label for="end-region"> {{ $t("numgen.end-region") }}</label>
+          <select
+            id="end-region"
+            v-model="endRegionName"
+            @change="randomizeTrainNumber()"
+          >
+            <option :value="null" disabled>
+              {{ $t("numgen.end-region") }}
+            </option>
+            <option
+              v-for="(_, name) in genData.regionNumbers"
+              :key="name"
+              :value="name"
+            >
               {{ name }}
             </option>
           </select>
@@ -44,50 +70,71 @@
 
       <div class="generated-number" @click="copyNumber">
         <span v-if="trainNumber">
-          {{ $t('numgen.number-info') }}
+          {{ $t("numgen.number-info") }}
           <b class="text--accent">{{ trainNumber }}</b>
         </span>
-        <span v-else>{{ $t('numgen.warning') }}</span>
+        <span v-else>{{ $t("numgen.warning") }}</span>
       </div>
 
-      <div class="category-rules" v-if="chosenCategory && categoryRules && trainNumber">
+      <div
+        class="category-rules"
+        v-if="chosenCategory && categoryRules && trainNumber"
+      >
         <!-- First & second digit (the same regions)  -->
-        <div v-if="beginRegionName && endRegionName && beginRegionName == endRegionName">
-          <b>{{ $t('numgen.rules.two-first-digits') }}</b> {{ $t('numgen.rules.from-pool') }}
-          <b class="text--accent">{{ genData.sameRegions[beginRegionName].join(', ') }}</b>
-          {{ $t('numgen.rules.for-region') }} {{ beginRegionName }}
+        <div
+          v-if="
+            beginRegionName && endRegionName && beginRegionName == endRegionName
+          "
+        >
+          <b>{{ $t("numgen.rules.two-first-digits") }}</b>
+          {{ $t("numgen.rules.from-pool") }}
+          <b class="text--accent">{{
+            genData.sameRegions[beginRegionName].join(", ")
+          }}</b>
+          {{ $t("numgen.rules.for-region") }} {{ beginRegionName }}
         </div>
 
         <!-- First & second digit (different regions)  -->
         <div v-else>
           <div>
             <b>
-              {{ $t('numgen.rules.first-digit') }} <span class="text--accent">{{ trainNumber[0] }}</span>
+              {{ $t("numgen.rules.first-digit") }}
+              <span class="text--accent">{{ trainNumber[0] }}</span>
             </b>
-            {{ $t('numgen.rules.for-region-begin') }} {{ beginRegionName }}
+            {{ $t("numgen.rules.for-region-begin") }} {{ beginRegionName }}
           </div>
 
           <div>
             <b>
-              {{ $t('numgen.rules.second-digit') }} <span class="text--accent">{{ trainNumber[1] }} </span>
+              {{ $t("numgen.rules.second-digit") }}
+              <span class="text--accent">{{ trainNumber[1] }} </span>
             </b>
-            {{ $t('numgen.rules.for-region-end') }} {{ endRegionName }}
+            {{ $t("numgen.rules.for-region-end") }} {{ endRegionName }}
           </div>
         </div>
 
         <!-- Third digit (non-passenger only) -->
         <div v-if="categoryRules[0] != null">
           <b>
-            {{ $t('numgen.rules.third-digit') }} <span class="text--accent">{{ categoryRules[0] }}</span>
+            {{ $t("numgen.rules.third-digit") }}
+            <span class="text--accent">{{ categoryRules[0] }}</span>
           </b>
-          {{ $t('numgen.rules.for-category') }} {{ chosenCategory }}
+          {{ $t("numgen.rules.for-category") }} {{ chosenCategory }}
         </div>
 
         <!-- Last digits  -->
         <div>
-          <b> {{ $t(`numgen.rules.${categoryRules[1]?.length == 3 ? 'three' : 'two'}-last-digits`) }}</b>
-          {{ $t('numgen.rules.from-range') }}
-          <b class="text--accent">{{ categoryRules[1] }}-{{ categoryRules[2] }}</b>
+          <b>
+            {{
+              $t(
+                `numgen.rules.${categoryRules[1]?.length == 3 ? "three" : "two"}-last-digits`,
+              )
+            }}</b
+          >
+          {{ $t("numgen.rules.from-range") }}
+          <b class="text--accent"
+            >{{ categoryRules[1] }}-{{ categoryRules[2] }}</b
+          >
         </div>
       </div>
 
@@ -95,7 +142,7 @@
 
       <div class="tab_links">
         <a :href="$t('numgen.td2-wiki-link')" target="_blank">
-          {{ $t('numgen.td2-wiki') }}
+          {{ $t("numgen.td2-wiki") }}
         </a>
       </div>
 
@@ -103,15 +150,15 @@
 
       <div class="tab_actions">
         <button class="btn" @click="randomizeTrainNumber(true)">
-          {{ $t('numgen.action-random-region') }}
+          {{ $t("numgen.action-random-region") }}
         </button>
 
         <button class="btn" @click="randomizeCategory">
-          {{ $t('numgen.action-random-category') }}
+          {{ $t("numgen.action-random-category") }}
         </button>
 
         <button class="btn" @click="randomizeTrainNumber(false)">
-          {{ $t('numgen.action-random-number') }}
+          {{ $t("numgen.action-random-number") }}
         </button>
       </div>
     </div>
@@ -119,11 +166,11 @@
 </template>
 
 <script setup lang="ts">
-import { Ref, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { Ref, ref } from "vue";
+import { useI18n } from "vue-i18n";
 
-import genData from '../../constants/numberGeneratorData.json';
-import { computed } from 'vue';
+import genData from "../../constants/numberGeneratorData.json";
+import { computed } from "vue";
 
 const i18n = useI18n();
 type RegionName = keyof typeof genData.regionNumbers;
@@ -138,7 +185,7 @@ const trainNumber = ref(null) as Ref<string | null>;
 const copyNumber = () => {
   if (trainNumber.value) {
     navigator.clipboard.writeText(trainNumber.value);
-    alert(i18n.t('numgen.alert'));
+    alert(i18n.t("numgen.alert"));
   }
 };
 
@@ -160,16 +207,23 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
 
   const regionKeys = Object.keys(genData.regionNumbers);
 
-  if (beginRegionName.value == null || randomizeRegions) beginRegionName.value = regionKeys[(regionKeys.length * Math.random()) << 0] as RegionName;
+  if (beginRegionName.value == null || randomizeRegions)
+    beginRegionName.value = regionKeys[
+      (regionKeys.length * Math.random()) << 0
+    ] as RegionName;
 
-  if (endRegionName.value == null || randomizeRegions) endRegionName.value = regionKeys[(regionKeys.length * Math.random()) << 0] as RegionName;
+  if (endRegionName.value == null || randomizeRegions)
+    endRegionName.value = regionKeys[
+      (regionKeys.length * Math.random()) << 0
+    ] as RegionName;
 
-  let number = '';
+  let number = "";
 
   // Two first numbers (begin & end regions)
   if (beginRegionName.value == endRegionName.value) {
     const sameRegionsNumbers = genData.sameRegions[beginRegionName.value!];
-    const randRegionNumber = sameRegionsNumbers[Math.floor(Math.random() * sameRegionsNumbers.length)];
+    const randRegionNumber =
+      sameRegionsNumbers[Math.floor(Math.random() * sameRegionsNumbers.length)];
     number += randRegionNumber.toString();
   } else {
     const beginRegionNumber = genData.regionNumbers[beginRegionName.value!];
@@ -185,18 +239,22 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
   }
 
   // Choose default category if it's not chosen
-  if (chosenCategory.value == null) chosenCategory.value = 'EI';
+  if (chosenCategory.value == null) chosenCategory.value = "EI";
 
   // Get category rules
   const [thirdNumber, minRange, maxRange] = categoryRules.value!;
 
   // Third number
-  number += thirdNumber ?? '';
+  number += thirdNumber ?? "";
 
   // Remaining numbers
   const rangeNums = minRange!.length;
-  const randRange = Math.floor(Math.random() * (Number(maxRange) - Number(minRange)) + Number(minRange)).toString();
-  const leadingZeros = new Array(Math.abs(randRange.length - rangeNums)).fill('0').join('');
+  const randRange = Math.floor(
+    Math.random() * (Number(maxRange) - Number(minRange)) + Number(minRange),
+  ).toString();
+  const leadingZeros = new Array(Math.abs(randRange.length - rangeNums))
+    .fill("0")
+    .join("");
 
   number += `${leadingZeros}${randRange}`;
 
@@ -205,8 +263,8 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/tab.scss';
-@import '../../styles/global.scss';
+@import "../../styles/tab.scss";
+@import "../../styles/global.scss";
 
 label {
   display: block;
diff --git a/src/components/tabs/StockGeneratorTab.vue b/src/components/tabs/StockGeneratorTab.vue
index 8f11fed..65bfb9d 100644
--- a/src/components/tabs/StockGeneratorTab.vue
+++ b/src/components/tabs/StockGeneratorTab.vue
@@ -15,7 +15,7 @@
         <div class="tab_attributes">
           <label>
             {{ $t('stockgen.input-mass') }}
-            <input type="number" v-model="maxMass" step="100" max="4000" min="0" />
+            <input type="number" v-model="maxTons" step="100" max="4000" min="0" />
           </label>
 
           <label>
@@ -122,7 +122,7 @@ export default defineComponent({
 
       previewTimeout: -1,
 
-      maxMass: 3000,
+      maxTons: 3000,
       maxLength: 650,
       maxCarCount: 50,
 
@@ -191,8 +191,8 @@ export default defineComponent({
               const cargoObjs = [] as (ICargo | undefined)[];
 
               if (!cargoType || empty) cargoObjs.push(undefined);
-              else if (cargoType == 'all') cargoObjs.push(...carWagonObjs[0]!.cargoList);
-              else cargoObjs.push(carWagonObjs[0]?.cargoList.find((cargo) => cargo.id == cargoType));
+              else if (cargoType == 'all') cargoObjs.push(...carWagonObjs[0]!.cargoTypes);
+              else cargoObjs.push(carWagonObjs[0]?.cargoTypes.find((cargo) => cargo.id == cargoType));
 
               carWagonObjs.forEach((cw) => {
                 cargoObjs.forEach((cargoObj) => {
@@ -223,9 +223,9 @@ export default defineComponent({
 
       for (let i = 0; i < 10; i++) {
         this.store.stockList.splice(this.store.stockList[0]?.isLoco ? 1 : 0);
-        let carCount = 0;
 
-        const maxMass = this.store.acceptableMass > 0 ? Math.min(this.store.acceptableMass, this.maxMass) : this.maxMass;
+        let carCount = 0;
+        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) {
@@ -233,7 +233,7 @@ export default defineComponent({
           const { carWagon, cargo } = randomStockType.carPool[~~(Math.random() * randomStockType.carPool.length)];
 
           if (
-            this.store.totalMass + (cargo?.totalMass || carWagon.mass) > maxMass ||
+            this.store.totalWeight + (carWagon.weight + (cargo?.weight ?? 0)) > maxWeight ||
             this.store.totalLength + carWagon.length > this.maxLength ||
             carCount >= this.maxCarCount
           ) {
@@ -244,7 +244,7 @@ export default defineComponent({
           carCount++;
         }
 
-        const currentGenerationValue = this.store.totalLength + this.store.totalMass + carCount;
+        const currentGenerationValue = this.store.totalLength + this.store.totalWeight + carCount;
 
         if (bestGeneration.value < currentGenerationValue) {
           bestGeneration.stockList = this.store.stockList;
diff --git a/src/components/tabs/StockListTab.vue b/src/components/tabs/StockListTab.vue
index 55e532f..bfe50f6 100644
--- a/src/components/tabs/StockListTab.vue
+++ b/src/components/tabs/StockListTab.vue
@@ -60,8 +60,8 @@
 
       <span>
         {{ $t('stocklist.mass') }}
-        <span class="text--accent">{{ store.totalMass }}t</span> ({{ $t('stocklist.mass-accepted') }}:
-        <span class="text--accent">{{ store.acceptableMass ? store.acceptableMass + 't' : '-' }}</span
+        <span class="text--accent">{{ (store.totalWeight / 1000).toFixed(1) }}t</span> ({{ $t('stocklist.mass-accepted') }}:
+        <span class="text--accent">{{ store.acceptableWeight ? `${~~(store.acceptableWeight / 1000)}t` : '-' }}</span
         >) - {{ $t('stocklist.length') }}:
         <span class="text--accent">{{ store.totalLength }}m</span>
         - {{ $t('stocklist.vmax') }}:
@@ -136,9 +136,9 @@
             <span class="stock-info__cargo" v-if="stock.cargo">
               {{ stock.cargo.id }}
             </span>
-            <span class="stock-info__length"> {{ stock.length }}m </span>
-            <span class="stock-info__mass">{{ stock.cargo ? stock.cargo.totalMass : stock.mass }}t </span>
-            <span class="stock-info__speed"> {{ stock.maxSpeed }}km/h </span>
+            <span class="stock-info__length">{{ stock.length }}m</span>
+            <span class="stock-info__mass">{{ ((stock.weight + (stock.cargo?.weight ?? 0)) / 1000).toFixed(1) }}t</span>
+            <span class="stock-info__speed">{{ stock.maxSpeed }}km/h</span>
           </div>
         </li>
       </TransitionGroup>
@@ -324,7 +324,7 @@ export default defineComponent({
     downloadStock() {
       if (this.store.stockList.length == 0) return alert(this.$t('stocklist.alert-empty'));
 
-      const defaultName = `${this.store.chosenRealStockName || this.store.stockList[0].type} ${this.store.totalMass}t; ${
+      const defaultName = `${this.store.chosenRealStockName || this.store.stockList[0].type} ${this.store.totalWeight}t; ${
         this.store.totalLength
       }m; vmax ${this.store.maxStockSpeed}`;
 
diff --git a/src/components/tabs/WikiListTab.vue b/src/components/tabs/WikiListTab.vue
index 76e557f..f15f416 100644
--- a/src/components/tabs/WikiListTab.vue
+++ b/src/components/tabs/WikiListTab.vue
@@ -54,17 +54,23 @@
                 />
               </td>
 
-              <td :data-sponsoronly="vehicle.isSponsorsOnly">{{ vehicle.type }}</td>
+              <td :data-sponsoronly="vehicle.isSponsorsOnly">
+                {{ vehicle.type }}
+              </td>
 
-              <td v-if="isLocomotive(vehicle)">{{ $t(`wiki.${vehicle.power}`) }}</td>
+              <td v-if="isLocomotive(vehicle)">
+                {{ $t(`wiki.${vehicle.power}`) }}
+              </td>
               <td v-else>{{ $t(`wiki.${vehicle.useType}`) }}</td>
 
               <td>{{ vehicle.constructionType }}</td>
               <td>{{ vehicle.length }}m</td>
-              <td>{{ vehicle.mass }}t</td>
+              <td>{{ (vehicle.weight / 1000).toFixed(1) }}t</td>
               <td>{{ vehicle.maxSpeed }}km/h</td>
 
-              <td v-if="currentFilterMode == 'carriages'">{{ !isLocomotive(vehicle) ? vehicle.cargoList.length : '---' }}</td>
+              <td v-if="currentFilterMode == 'carriages'">
+                {{ !isLocomotive(vehicle) ? vehicle.cargoTypes.length : '---' }}
+              </td>
               <td v-if="currentFilterMode == 'tractions'">
                 {{ isLocomotive(vehicle) ? (vehicle.coldStart ? `&check;` : '&cross;') : '---' }}
               </td>
@@ -87,7 +93,7 @@ import { isLocomotive } from '../../utils/vehicleUtils';
 import stockMixin from '../../mixins/stockMixin';
 import imageMixin from '../../mixins/imageMixin';
 
-type SorterID = 'type' | 'constructionType' | 'image' | 'length' | 'mass' | 'maxSpeed' | 'cargoCount' | 'group' | 'coldStart';
+type SorterID = 'type' | 'constructionType' | 'image' | 'length' | 'weight' | 'maxSpeed' | 'cargoCount' | 'group' | 'coldStart';
 
 interface IWikiHeader {
   id: SorterID;
@@ -106,7 +112,7 @@ const headers: IWikiHeader[] = [
   { id: 'group', sortable: true, for: 'all' },
   { id: 'constructionType', sortable: true, for: 'all' },
   { id: 'length', sortable: true, for: 'all' },
-  { id: 'mass', sortable: true, for: 'all' },
+  { id: 'weight', sortable: true, for: 'all' },
   { id: 'maxSpeed', sortable: true, for: 'all' },
   { id: 'coldStart', sortable: true, for: 'tractions' },
   { id: 'cargoCount', sortable: true, for: 'carriages' },
@@ -166,15 +172,15 @@ export default defineComponent({
         case 'group':
           return direction == 1 ? row1.vehicle[id].localeCompare(row2.vehicle[id]) : row2.vehicle[id].localeCompare(row1.vehicle[id]);
 
-        case 'mass':
+        case 'weight':
         case 'length':
         case 'maxSpeed':
           return Math.sign(row1.vehicle[id] - row2.vehicle[id]) * direction;
 
         case 'cargoCount':
           return (
-            (!isLocomotive(row1.vehicle) ? Math.sign(row1.vehicle.cargoList.length || -1) : -1) -
-            (!isLocomotive(row2.vehicle) ? (row2.vehicle.cargoList.length || -1) * direction : -1)
+            (!isLocomotive(row1.vehicle) ? Math.sign(row1.vehicle.cargoTypes.length || -1) : -1) -
+            (!isLocomotive(row2.vehicle) ? (row2.vehicle.cargoTypes.length || -1) * direction : -1)
           );
 
         case 'coldStart':
diff --git a/src/components/utils/StockThumbnails.vue b/src/components/utils/StockThumbnails.vue
index 5062e7a..c29e3e5 100644
--- a/src/components/utils/StockThumbnails.vue
+++ b/src/components/utils/StockThumbnails.vue
@@ -28,18 +28,18 @@
 </template>
 
 <script setup lang="ts">
-import { Ref, computed, nextTick, ref, watch } from 'vue';
-import { useStore } from '../../store';
-import { IStock } from '../../types';
+import { Ref, computed, nextTick, ref, watch } from "vue";
+import { useStore } from "../../store";
+import { IStock } from "../../types";
 
 const store = useStore();
-const emit = defineEmits(['listItemClick']);
+const emit = defineEmits(["listItemClick"]);
 
 const thumbnailsRef = ref() as Ref<HTMLElement>;
 const draggedIndex = ref(-1);
 
 const onListItemClick = (index: number) => {
-  emit('listItemClick', index);
+  emit("listItemClick", index);
 };
 
 const stockImageError = (e: Event, stock: IStock) => {
@@ -52,13 +52,15 @@ watch(
     if (index < 0) return;
 
     nextTick(() => {
-      (thumbnailsRef.value as HTMLElement).querySelector(`div:nth-child(${index + 1})`)?.scrollIntoView({
-        block: 'nearest',
-        inline: 'start',
-        behavior: 'smooth',
-      });
+      (thumbnailsRef.value as HTMLElement)
+        .querySelector(`div:nth-child(${index + 1})`)
+        ?.scrollIntoView({
+          block: "nearest",
+          inline: "start",
+          behavior: "smooth",
+        });
     });
-  }
+  },
 );
 
 // Dragging images
@@ -69,7 +71,9 @@ const onDragStart = (vehicleIndex: number) => {
 const onDrop = (e: DragEvent, vehicleIndex: number) => {
   e.preventDefault();
 
-  let targetEl = thumbnailsRef.value.querySelector(`div:nth-child(${vehicleIndex + 1})`);
+  let targetEl = thumbnailsRef.value.querySelector(
+    `div:nth-child(${vehicleIndex + 1})`,
+  );
 
   if (!targetEl && draggedIndex.value != -1) return;
 
@@ -110,7 +114,7 @@ const allowDrop = (e: DragEvent) => {
   -moz-user-select: none;
   -webkit-user-select: none;
 
-  &[data-selected='true'] {
+  &[data-selected="true"] {
     background-color: rebeccapurple;
   }
 
@@ -119,7 +123,7 @@ const allowDrop = (e: DragEvent) => {
     margin: 0 1em;
   }
 
-  &[data-sponsor='true'] > b {
+  &[data-sponsor="true"] > b {
     color: salmon;
   }
 
diff --git a/src/constants/massLimits.json b/src/constants/massLimits.json
index 29e887e..d4d3a15 100644
--- a/src/constants/massLimits.json
+++ b/src/constants/massLimits.json
@@ -1,10 +1,11 @@
 {
-  "EU06": [650, 2000],
-  "EU07": [650, 2000],
-  "EU07E": [650, 2000],
-  "EP07": [650, 650],
-  "EP08": [650, 650],
-  "EP09": [800, 800],
-  "ET41": [700, 4000],
-  "SM42": [2400, 2400]
+  "EU06": [650000, 2000000],
+  "EU07": [650000, 2000000],
+  "4E": [650000, 2000000],
+  "EU07E": [650000, 2000000],
+  "EP07": [650000, 650000],
+  "EP08": [650000, 650000],
+  "EP09": [800000, 800000],
+  "ET41": [700000, 4000000],
+  "SM42": [2400000, 2400000]
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index 9e4488f..6f24c72 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -166,7 +166,7 @@
       "constructionType": "Construction",
       "coldStart": "Cold start",
       "length": "Length",
-      "mass": "Mass",
+      "weight": "Mass",
       "maxSpeed": "Speed",
       "cargoCount": "Cargo count"
     },
diff --git a/src/locales/pl.json b/src/locales/pl.json
index 7656a12..2be229a 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -166,7 +166,7 @@
       "constructionType": "Konstrukcja",
       "coldStart": "Zimny start",
       "length": "Długość",
-      "mass": "Masa",
+      "weight": "Masa",
       "maxSpeed": "Prędkość",
       "cargoCount": "Ładunki"
     },
diff --git a/src/main.ts b/src/main.ts
index 60bbb60..59fa9c7 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,8 +1,8 @@
-import { createApp } from 'vue';
-import { createPinia } from 'pinia';
+import { createApp } from "vue";
+import { createPinia } from "pinia";
 
-import App from './App.vue';
-import i18n from './i18n-setup';
+import App from "./App.vue";
+import i18n from "./i18n-setup";
 const pinia = createPinia();
 
-createApp(App).use(pinia).use(i18n).mount('#app');
+createApp(App).use(pinia).use(i18n).mount("#app");
diff --git a/src/mixins/stockMixin.ts b/src/mixins/stockMixin.ts
index 738312e..fce4a33 100644
--- a/src/mixins/stockMixin.ts
+++ b/src/mixins/stockMixin.ts
@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import { useStore } from '../store';
-import { ICargo, ICarWagon, ILocomotive, IStock, Vehicle } from '../types';
+import { ICarWagon, ILocomotive, IStock, ICargo, Vehicle } from '../types';
 import { isLocomotive } from '../utils/vehicleUtils';
 
 export default defineComponent({
@@ -22,7 +22,7 @@ export default defineComponent({
         id: this.getStockId(),
         type: vehicle.type,
         length: vehicle.length,
-        mass: vehicle.mass,
+        weight: vehicle.weight,
         maxSpeed: vehicle.maxSpeed,
         isLoco,
         cargo: !isLoco && vehicle.loadable && cargo ? cargo : undefined,
@@ -88,7 +88,7 @@ export default defineComponent({
           const [carType, cargo] = type.split(':');
           vehicle = this.store.carDataList.find((car) => car.type == carType) || null;
 
-          if (cargo) vehicleCargo = vehicle?.cargoList.find((c) => c.id == cargo) || null;
+          if (cargo) vehicleCargo = vehicle?.cargoTypes.find((c) => c.id == cargo) || null;
         }
 
         if (!vehicle) console.log('Brak pojazdu / rodzaj pojazdu źle wczytany:', type);
diff --git a/src/mixins/warningsMixin.ts b/src/mixins/warningsMixin.ts
index 978dcf4..1985d7b 100644
--- a/src/mixins/warningsMixin.ts
+++ b/src/mixins/warningsMixin.ts
@@ -1,5 +1,5 @@
-import { defineComponent } from "vue";
-import { useStore } from "../store";
+import { defineComponent } from 'vue';
+import { useStore } from '../store';
 
 export default defineComponent({
   setup() {
@@ -11,17 +11,11 @@ export default defineComponent({
   },
   computed: {
     trainTooLong() {
-      return (
-        (this.store.totalLength > 350 && this.store.isTrainPassenger) ||
-        (this.store.totalLength > 650 && !this.store.isTrainPassenger)
-      );
+      return (this.store.totalLength > 350 && this.store.isTrainPassenger) || (this.store.totalLength > 650 && !this.store.isTrainPassenger);
     },
 
     trainTooHeavy() {
-      return (
-        this.store.acceptableMass &&
-        this.store.totalMass > this.store.acceptableMass
-      );
+      return this.store.acceptableWeight && this.store.totalWeight > this.store.acceptableWeight;
     },
 
     locoNotSuitable() {
@@ -29,9 +23,7 @@ export default defineComponent({
         !this.store.isTrainPassenger &&
         this.store.stockList.length > 1 &&
         !this.store.stockList.every((stock) => stock.isLoco) &&
-        this.store.stockList.some(
-          (stock) => stock.isLoco && stock.type.startsWith("EP"),
-        )
+        this.store.stockList.some((stock) => stock.isLoco && stock.type.startsWith('EP'))
       );
     },
 
diff --git a/src/store.ts b/src/store.ts
index 47df771..4e13a91 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -1,14 +1,14 @@
 import { IStockData, IStore } from './types';
 import { defineStore } from 'pinia';
 import {
-  acceptableMass,
+  acceptableMass as acceptableWeight,
   carDataList,
   chosenRealStock,
   isTrainPassenger,
   locoDataList,
   maxStockSpeed,
   totalLength,
-  totalMass,
+  totalWeight,
 } from './utils/vehicleUtils';
 import http from './http';
 
@@ -56,12 +56,12 @@ export const useStore = defineStore({
     locoDataList: (state) => locoDataList(state),
     carDataList: (state) => carDataList(state),
     vehicleDataList: (state) => [...locoDataList(state), ...carDataList(state)],
-    totalMass: (state) => totalMass(state),
+    totalWeight: (state) => totalWeight(state),
     totalLength: (state) => totalLength(state),
     maxStockSpeed: (state) => maxStockSpeed(state),
     isTrainPassenger: (state) => isTrainPassenger(state),
     chosenRealStock: (state) => chosenRealStock(state),
-    acceptableMass: (state) => acceptableMass(state),
+    acceptableWeight: (state) => acceptableWeight(state),
 
     stockSupportsColdStart: (state) => {
       if (state.stockList.length == 0) return false;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 4e42f56..b5101a3 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -7,30 +7,30 @@ $secondaryColor: #1b1b1b;
 $accentColor: #e4c428;
 
 @font-face {
-  font-family: 'Lato';
+  font-family: "Lato";
   src:
-    url('/fonts/Lato-Light.woff2') format('woff2'),
-    url('/fonts/Lato-Light.woff') format('woff');
+    url("/fonts/Lato-Light.woff2") format("woff2"),
+    url("/fonts/Lato-Light.woff") format("woff");
   font-weight: 300;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Lato';
+  font-family: "Lato";
   src:
-    url('/fonts/Lato-Bold.woff2') format('woff2'),
-    url('/fonts/Lato-Bold.woff') format('woff');
+    url("/fonts/Lato-Bold.woff2") format("woff2"),
+    url("/fonts/Lato-Bold.woff") format("woff");
   font-weight: bold;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Lato';
+  font-family: "Lato";
   src:
-    url('/fonts/Lato-Regular.woff2') format('woff2'),
-    url('/fonts/Lato-Regular.woff') format('woff');
+    url("/fonts/Lato-Regular.woff2") format("woff2"),
+    url("/fonts/Lato-Regular.woff") format("woff");
   font-weight: normal;
   font-style: normal;
   font-display: swap;
@@ -141,14 +141,14 @@ button {
     outline: 1px solid white;
   }
 
-  &[data-chosen='true'] {
+  &[data-chosen="true"] {
     background-color: $accentColor;
     color: black;
 
     box-shadow: 0 0 5px 1px $accentColor;
   }
 
-  &[data-disabled='true'] {
+  &[data-disabled="true"] {
     user-select: none;
     pointer-events: none;
     -moz-user-select: none;
@@ -183,8 +183,8 @@ button {
 }
 
 select,
-input[type='text'],
-input[type='number'] {
+input[type="text"],
+input[type="number"] {
   background: $bgColor;
   border: 2px solid #aaa;
   outline: none;
diff --git a/src/styles/tab.scss b/src/styles/tab.scss
index 1716164..f8fee13 100644
--- a/src/styles/tab.scss
+++ b/src/styles/tab.scss
@@ -1,4 +1,4 @@
-@import './global.scss';
+@import "./global.scss";
 
 .tab {
   height: 100%;
diff --git a/src/types.ts b/src/types.ts
index 99fc72e..1e2cb71 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -41,12 +41,19 @@ export type TCarWagonGroup = 'car-passenger' | 'car-cargo';
 export interface IStockProps {
   type: string;
   length: number;
-  mass: number;
-  cargo?: string | null;
+  // mass: number;
+  weight: number;
+  // cargo?: string | null;
+  cargoTypes: ICargo[] | null;
   coldStart?: boolean;
   doubleManned?: boolean;
 }
 
+export interface ICargo {
+  id: string;
+  weight: number;
+}
+
 export interface IStockData {
   version: string;
 
@@ -79,8 +86,7 @@ export interface ILocomotive {
   isSponsorsOnly: boolean;
   sponsorsOnlyTimestamp: number;
   imageSrc: string;
-
-  mass: number;
+  weight: number;
   length: number;
   coldStart: boolean;
   doubleManned: boolean;
@@ -96,15 +102,9 @@ export interface ICarWagon {
   sponsorsOnlyTimestamp: number;
   maxSpeed: number;
   imageSrc: string;
-
-  mass: number;
+  weight: number;
   length: number;
-  cargoList: { id: string; totalMass: number }[];
-}
-
-export interface ICargo {
-  id: string;
-  totalMass: number;
+  cargoTypes: ICargo[];
 }
 
 export interface IStock {
@@ -113,9 +113,10 @@ export interface IStock {
   useType: string;
   constructionType: string;
   length: number;
-  mass: number;
+  // mass: number;
+  weight: number;
   maxSpeed: number;
-  cargo?: { id: string; totalMass: number };
+  cargo?: ICargo;
   isLoco: boolean;
   isSponsorsOnly: boolean;
   sponsorsOnlyTimestamp: number;
diff --git a/src/utils/vehicleLimitsUtils.ts b/src/utils/vehicleLimitsUtils.ts
index 584c6d5..cbbe540 100644
--- a/src/utils/vehicleLimitsUtils.ts
+++ b/src/utils/vehicleLimitsUtils.ts
@@ -1,25 +1,34 @@
-import speedLimits from '../constants/speedLimits.json';
-import massLimits from '../constants/massLimits.json';
+import speedLimits from "../constants/speedLimits.json";
+import massLimits from "../constants/massLimits.json";
 
 export type SpeedLimitLocoType = keyof typeof speedLimits;
 export type MassLimitLocoType = keyof typeof massLimits;
 
-export function calculateSpeedLimit(locoType: SpeedLimitLocoType, stockMass: number, isTrainPassenger: boolean) {
+export function calculateSpeedLimit(
+  locoType: SpeedLimitLocoType,
+  stockTotalWeight: number,
+  isTrainPassenger: boolean,
+) {
   console.log(speedLimits[locoType]);
 
   if (speedLimits[locoType] === undefined) return 0;
 
-  const speedTable = speedLimits[locoType][isTrainPassenger ? 'passenger' : 'cargo'];
+  const speedTable =
+    speedLimits[locoType][isTrainPassenger ? "passenger" : "cargo"];
 
   if (!speedTable) return undefined;
 
   let speedLimit = 0;
-  for (const mass in speedTable) if (stockMass > Number(mass)) speedLimit = (speedTable as any)[mass];
+  for (const mass in speedTable)
+    if (stockTotalWeight > Number(mass)) speedLimit = (speedTable as any)[mass];
 
   return speedLimit;
 }
 
-export function calculateMassLimit(locoType: MassLimitLocoType, isTrainPassenger: boolean) {
+export function calculateMassLimit(
+  locoType: MassLimitLocoType,
+  isTrainPassenger: boolean,
+) {
   if (massLimits[locoType] === undefined) return 0;
 
   return massLimits[locoType][isTrainPassenger ? 0 : 1] || 0;
diff --git a/src/utils/vehicleUtils.ts b/src/utils/vehicleUtils.ts
index 4901723..4d62fd9 100644
--- a/src/utils/vehicleUtils.ts
+++ b/src/utils/vehicleUtils.ts
@@ -1,8 +1,21 @@
-import { EVehicleUseType } from '../enums/EVehicleUseType';
-import { ICarWagon, ILocomotive, IStore, TCarWagonGroup, TLocoGroup } from '../types';
-import { MassLimitLocoType, SpeedLimitLocoType, calculateMassLimit, calculateSpeedLimit } from './vehicleLimitsUtils';
+import { EVehicleUseType } from "../enums/EVehicleUseType";
+import {
+  ICarWagon,
+  ILocomotive,
+  IStore,
+  TCarWagonGroup,
+  TLocoGroup,
+} from "../types";
+import {
+  MassLimitLocoType,
+  SpeedLimitLocoType,
+  calculateMassLimit,
+  calculateSpeedLimit,
+} from "./vehicleLimitsUtils";
 
-export function isLocomotive(vehicle: ILocomotive | ICarWagon): vehicle is ILocomotive {
+export function isLocomotive(
+  vehicle: ILocomotive | ICarWagon,
+): vehicle is ILocomotive {
   return (vehicle as ILocomotive).power !== undefined;
 }
 
@@ -12,15 +25,18 @@ export function locoDataList(state: IStore) {
   const stockData = state.stockData;
 
   return Object.keys(stockData.info).reduce((acc, vehiclePower) => {
-    if (!vehiclePower.startsWith('loco')) return acc;
+    if (!vehiclePower.startsWith("loco")) return acc;
 
     const locoVehiclesData = stockData.info[vehiclePower as TLocoGroup];
 
     locoVehiclesData.forEach((loco) => {
       if (state.showSupporter && !loco[4]) return;
 
-      const [type, constructionType, cabinType, maxSpeed, sponsorsTimestamp] = loco;
-      const locoProps = stockData.props.find((prop) => constructionType == prop.type);
+      const [type, constructionType, cabinType, maxSpeed, sponsorsTimestamp] =
+        loco;
+      const locoProps = stockData.props.find(
+        (prop) => constructionType == prop.type,
+      );
 
       acc.push({
         power: vehiclePower as TLocoGroup,
@@ -31,10 +47,16 @@ export function locoDataList(state: IStore) {
         maxSpeed: Number(maxSpeed),
         isSponsorsOnly: Number(sponsorsTimestamp) > Date.now(),
         sponsorsOnlyTimestamp: Number(sponsorsTimestamp),
-        imageSrc: '',
+        imageSrc: "",
 
-        length: locoProps?.length && type.startsWith('2EN') ? locoProps.length * 2 : locoProps?.length ?? 0,
-        mass: locoProps?.mass && type.startsWith('2EN') ? 253 : locoProps?.mass ?? 0,
+        length:
+          locoProps?.length && type.startsWith("2EN")
+            ? locoProps.length * 2
+            : locoProps?.length ?? 0,
+        weight:
+          locoProps?.weight && type.startsWith("2EN")
+            ? 253000
+            : locoProps?.weight ?? 0,
 
         coldStart: locoProps?.coldStart ?? false,
         doubleManned: locoProps?.doubleManned ?? false,
@@ -51,16 +73,25 @@ export function carDataList(state: IStore) {
   const stockData = state.stockData;
 
   return Object.keys(stockData.info).reduce((acc, vehicleUseType) => {
-    if (!vehicleUseType.startsWith('car')) return acc;
+    if (!vehicleUseType.startsWith("car")) return acc;
 
     const carVehiclesData = stockData.info[vehicleUseType as TCarWagonGroup];
 
     carVehiclesData.forEach((car) => {
-      const [type, constructionType, loadable, sponsorsOnlyTimestamp, maxSpeed] = car;
+      const [
+        type,
+        constructionType,
+        loadable,
+        sponsorsOnlyTimestamp,
+        maxSpeed,
+      ] = car;
 
-      if (state.showSupporter && Number(sponsorsOnlyTimestamp) <= Date.now()) return;
+      if (state.showSupporter && Number(sponsorsOnlyTimestamp) <= Date.now())
+        return;
 
-      const carPropsData = stockData.props.find((v) => type.toString().startsWith(v.type));
+      const carPropsData = stockData.props.find((v) =>
+        type.toString().startsWith(v.type),
+      );
 
       acc.push({
         useType: vehicleUseType as TCarWagonGroup,
@@ -71,14 +102,10 @@ export function carDataList(state: IStore) {
         isSponsorsOnly: Number(sponsorsOnlyTimestamp) > Date.now(),
         sponsorsOnlyTimestamp: Number(sponsorsOnlyTimestamp),
         maxSpeed: Number(maxSpeed),
-        imageSrc: '',
-        cargoList:
-          carPropsData?.cargo?.split(';').map((cargo) => ({
-            id: cargo.split(':')[0],
-            totalMass: Number(cargo.split(':')[1]),
-          })) || [],
+        imageSrc: "",
+        cargoTypes: carPropsData?.cargoTypes ?? [],
 
-        mass: carPropsData?.mass || 0,
+        weight: carPropsData?.weight || 0,
         length: carPropsData?.length || 0,
       });
     });
@@ -87,37 +114,58 @@ export function carDataList(state: IStore) {
   }, [] as ICarWagon[]);
 }
 
-export function totalMass(state: IStore) {
-  return ~~state.stockList.reduce((acc, stock) => acc + (stock.cargo ? stock.cargo.totalMass : stock.mass) * stock.count, 0);
+export function totalWeight(state: IStore) {
+  return state.stockList.reduce(
+    (acc, stock) =>
+      acc + (stock.weight + (stock.cargo?.weight ?? 0)) * stock.count,
+    0,
+  );
 }
 
 export function totalLength(state: IStore) {
-  return state.stockList.reduce((acc, stock) => acc + stock.length * stock.count, 0);
+  return state.stockList.reduce(
+    (acc, stock) => acc + stock.length * stock.count,
+    0,
+  );
 }
 
 export function maxStockSpeed(state: IStore) {
-  const stockSpeedLimit = state.stockList.reduce((acc, stock) => (stock.maxSpeed < acc || acc == 0 ? stock.maxSpeed : acc), 0);
-  const headingLoco = state.stockList[0]?.isLoco ? state.stockList[0] : undefined;
+  const stockSpeedLimit = state.stockList.reduce(
+    (acc, stock) => (stock.maxSpeed < acc || acc == 0 ? stock.maxSpeed : acc),
+    0,
+  );
+  const headingLoco = state.stockList[0]?.isLoco
+    ? state.stockList[0]
+    : undefined;
 
   if (!headingLoco) return stockSpeedLimit;
 
-  const locoType = headingLoco.type.split('-')[0];
+  const locoType = headingLoco.type.split("-")[0];
 
   if (/^(EN|2EN|SN)/.test(locoType)) return stockSpeedLimit;
 
-  const stockMass = totalMass(state);
+  const stockTotalWeight = totalWeight(state);
 
-  const speedLimitByMass = calculateSpeedLimit(locoType as SpeedLimitLocoType, stockMass, isTrainPassenger(state));
+  const speedLimitByMass = calculateSpeedLimit(
+    locoType as SpeedLimitLocoType,
+    stockTotalWeight,
+    isTrainPassenger(state),
+  );
 
-  return speedLimitByMass ? Math.min(stockSpeedLimit, speedLimitByMass) : stockSpeedLimit;
+  return speedLimitByMass
+    ? Math.min(stockSpeedLimit, speedLimitByMass)
+    : stockSpeedLimit;
 }
 
 export function acceptableMass(state: IStore) {
   if (state.stockList.length == 0 || !state.stockList[0].isLoco) return 0;
 
-  const activeLocomotiveType = state.stockList[0].type.split('-')[0];
+  const activeLocomotiveType = state.stockList[0].type.split("-")[0];
 
-  const locoMassLimit = calculateMassLimit(activeLocomotiveType as MassLimitLocoType, isTrainPassenger(state));
+  const locoMassLimit = calculateMassLimit(
+    activeLocomotiveType as MassLimitLocoType,
+    isTrainPassenger(state),
+  );
 
   return locoMassLimit;
 }
@@ -126,7 +174,9 @@ export function isTrainPassenger(state: IStore) {
   if (state.stockList.length == 0) return false;
   if (state.stockList.every((stock) => stock.isLoco)) return false;
 
-  return state.stockList.filter((stock) => !stock.isLoco).every((stock) => stock.useType === EVehicleUseType.CAR_PASSENGER);
+  return state.stockList
+    .filter((stock) => !stock.isLoco)
+    .every((stock) => stock.useType === EVehicleUseType.CAR_PASSENGER);
 }
 
 export function chosenRealStock(state: IStore) {
@@ -135,9 +185,11 @@ export function chosenRealStock(state: IStore) {
       for (let i = 0; i < stock.count; i++) acc.push(stock.type);
       return acc;
     }, [] as string[])
-    .join(';');
+    .join(";");
 
-  const realStockObj = state.readyStockList.find((readyStock) => readyStock.stockString == currentStockString);
+  const realStockObj = state.readyStockList.find(
+    (readyStock) => readyStock.stockString == currentStockString,
+  );
 
   state.chosenRealStockName = realStockObj?.stockId ?? undefined;
 
diff --git a/src/views/AppContainerView.vue b/src/views/AppContainerView.vue
index c4bb958..d7dd0e0 100644
--- a/src/views/AppContainerView.vue
+++ b/src/views/AppContainerView.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { useStore } from '../store';
+import { defineComponent } from "vue";
+import { useStore } from "../store";
 
-import MainContainer from '../components/app/MainContainer.vue';
-import FooterVue from '../components/app/Footer.vue';
+import MainContainer from "../components/app/MainContainer.vue";
+import FooterVue from "../components/app/Footer.vue";
 
 export default defineComponent({
   components: {