Merge pull request #24 from Spythere/development

Wersja 1.8.4

.eslintrc.cjs

@@ -1,18 +1,13 @@
 /* eslint-env node */
-require('@rushstack/eslint-patch/modern-module-resolution')
+require('@rushstack/eslint-patch/modern-module-resolution');
 
 module.exports = {
   root: true,
-  extends: [
-    'plugin:vue/vue3-essential',
-    'eslint:recommended',
-    '@vue/eslint-config-typescript',
-    '@vue/eslint-config-prettier/skip-formatting'
-  ],
+  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/eslint-config-typescript', '@vue/eslint-config-prettier/skip-formatting'],
   rules: {
-    'vue/multi-word-component-names': 'off'
+    'vue/multi-word-component-names': 'off',
   },
   parserOptions: {
-    ecmaVersion: 'latest'
-  }
-}
+    ecmaVersion: 'latest',
+  },
+};

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "printWidth": 100
+}

firebase.json

@@ -1,7 +1,7 @@
 {
   "hosting": {
     "public": "dist",
-    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+    "ignore": [],
     "rewrites": [
       {
         "source": "**",
@@ -9,4 +9,4 @@
       }
     ]
   }
-}
+}

package.json

@@ -1,7 +1,8 @@
 {
   "name": "pojazdownik",
-  "version": "1.7.3",
+  "version": "1.8.4",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
@@ -15,21 +16,21 @@
     "pinia": "^2.0.17",
     "prettier": "^3.0.3",
     "vue": "^3.2.37",
-    "vue-i18n": "9"
+    "vue-i18n": "9.11.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
-    "@vite-pwa/assets-generator": "^0.0.10",
-    "@vitejs/plugin-vue": "^4.1.0",
-    "@vue/eslint-config-prettier": "^8.0.0",
+    "@vite-pwa/assets-generator": "^0.2.3",
+    "@vitejs/plugin-vue": "^5.0.3",
+    "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
-    "@vue/tsconfig": "^0.4.0",
+    "@vue/tsconfig": "^0.5.1",
     "eslint": "^8.49.0",
     "eslint-plugin-vue": "^9.17.0",
     "sass": "^1.59.3",
     "typescript": "^5.0.2",
-    "vite": "^4.2.1",
-    "vite-plugin-pwa": "^0.16.5",
+    "vite": "^5.0.12",
+    "vite-plugin-pwa": "^0.17.5",
     "vue-tsc": "^1.2.0"
   }
 }

public/images/icon-exit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>

src/App.vue

@@ -12,16 +12,17 @@ import AppContainerView from './views/AppContainerView.vue';
 import AppModals from './components/app/AppModals.vue';
 
 export default defineComponent({
+  components: { ImageFullscreenPreview, AppContainerView, AppModals },
   data() {
     return {
       store: useStore(),
     };
   },
+
   async created() {
-    this.store.fetchStockInfoData();
     this.store.handleRouting();
+    this.store.setupAPIData();
   },
-  components: { ImageFullscreenPreview, AppContainerView, AppModals },
 });
 </script>
 
@@ -34,7 +35,7 @@ export default defineComponent({
 
   color: $textColor;
   font-size: 1em;
-  padding: 1em 0.5em;
+  padding: 0;
 
   @media screen and (max-width: $breakpointMd) {
     font-size: calc(0.7rem + 0.75vw);

src/components/app/AppModals.vue

@@ -7,9 +7,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
-import { useStore } from "../../store";
-import RealStockCard from "../cards/RealStockCard.vue";
+import { defineComponent } from 'vue';
+import { useStore } from '../../store';
+import RealStockCard from '../cards/RealStockCard.vue';
 
 export default defineComponent({
   components: { RealStockCard },

src/components/app/Footer.vue

@@ -3,35 +3,32 @@
     <i18n-t keypath="footer.disclaimer" tag="div" class="text--grayed">
       <template #tos>
         <a style="color: #ccc" :href="$t('footer.tos-href')" target="_blank">
-          {{ $t("footer.tos") }}
+          {{ $t('footer.tos') }}
         </a>
       </template>
     </i18n-t>
 
-    <div class="text--grayed" v-if="store.stockData">
-      {{ $t("footer.version-check", { version: store.stockData.version }) }}
+    <div class="text--grayed" v-if="store.vehiclesData">
+      {{ $t('footer.version-check', { version: store.vehiclesData.simulatorVersion }) }}
     </div>
 
     <div>
       &copy;
-      <a href="https://td2.info.pl/profile/?u=20777" target="_blank"
-        >Spythere</a
-      >
-      {{ new Date().getUTCFullYear() }} | v{{ VERSION
-      }}{{ !isOnProductionHost ? "dev" : "" }}
+      <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
+      {{ new Date().getUTCFullYear() }} | v{{ VERSION }}{{ !isOnProductionHost ? 'dev' : '' }}
     </div>
   </footer>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
-import packageInfo from "../../../package.json";
-import { useStore } from "../../store";
+import { defineComponent } from 'vue';
+import packageInfo from '../../../package.json';
+import { useStore } from '../../store';
 
 export default defineComponent({
   data() {
     return {
-      isOnProductionHost: location.hostname == "pojazdownik-td2.web.app",
+      isOnProductionHost: location.hostname == 'pojazdownik-td2.web.app',
       VERSION: packageInfo.version,
       store: useStore(),
     };
@@ -41,12 +38,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 footer {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25em;
-
   text-align: center;
   padding: 1em 1em 0 1em;
-  margin-top: auto;
 }
 </style>

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,26 +20,29 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/global.scss";
+@import '../../styles/global.scss';
 
 main {
   display: grid;
   gap: 1em;
 
   width: 100%;
-  max-width: 1300px;
-  min-height: 75vh;
+  max-width: 1350px;
 
   grid-template-columns: 1fr 2fr;
-  grid-template-rows: auto 360px minmax(400px, 1fr);
+  grid-template-rows: auto 360px minmax(300px, 1fr);
+
+  background-color: darken($color: $bgColor, $amount: 5);
+  border-radius: 1em;
+
+  min-height: 950px;
+
+  padding: 1em;
 }
 
 @media screen and (max-width: $breakpointMd) {
   main {
-    display: flex;
-    flex-direction: column;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
+    display: block;
   }
 }
 </style>

src/components/cards/RealStockCard.vue

@@ -1,24 +1,16 @@
 <template>
-  <div
-    class="real-stock-card g-card"
-    @keydown.esc="store.isRealStockListCardOpen = false"
-  >
+  <div class="real-stock-card g-card" @keydown.esc="store.isRealStockListCardOpen = false">
     <div class="g-card_bg" @click="store.isRealStockListCardOpen = false"></div>
 
     <div class="card_content">
       <div class="card_nav">
         <div class="top-pane">
           <h1>
-            {{ $t("realstock.title") }}
-            <a href="https://td2.info.pl/profile/?u=17708" target="_blank"
-              >Railtrains997</a
-            >
+            {{ $t('realstock.title') }}
+            <a href="https://td2.info.pl/profile/?u=17708" target="_blank">Railtrains997</a>
           </h1>
-          <button
-            class="btn exit-btn"
-            @click="store.isRealStockListCardOpen = false"
-          >
-            &Cross;
+          <button class="btn action-exit" @click="store.isRealStockListCardOpen = false">
+            <img src="/images/icon-exit.svg" alt="" />
           </button>
         </div>
 
@@ -31,7 +23,7 @@
 
           <datalist id="readyStockDataList">
             <option
-              v-for="stock in store.readyStockList"
+              v-for="stock in store.realCompositionList"
               :value="stock.stockId"
               :key="stock.name"
             >
@@ -55,32 +47,23 @@
             </option>
           </datalist>
 
-          <button class="btn" @click="resetStockFilters">
-            {{ $t("realstock.action-reset") }}
+          <button class="btn action-reset" @click="resetStockFilters">
+            {{ $t('realstock.action-reset') }}
           </button>
         </div>
       </div>
 
       <ul class="card_list" ref="list" @scroll="onListScroll">
-        <li
-          v-for="rStock in computedReadyStockList"
-          :key="rStock.stockId"
-          :data-last-selected="store.chosenRealStockName === rStock.stockId"
-        >
+        <li v-for="rStock in computedReadyStockList" :key="rStock.stockId">
+          <!-- :data-last-selected="store.ch === rStock.stockId" -->
           <div
             class="stock-title"
             tabindex="0"
             @click="chooseStock(rStock)"
             @keydown.enter="chooseStock(rStock)"
           >
-            <img
-              class="stock-icon"
-              :src="getIconURL(rStock.type)"
-              :alt="rStock.type"
-            />
-            <b class="text--accent" style="margin-left: 5px">
-              {{ rStock.name }}</b
-            >
+            <img class="stock-icon" :src="getIconURL(rStock.type)" :alt="rStock.type" />
+            <b class="text--accent" style="margin-left: 5px"> {{ rStock.name }}</b>
             <div>{{ rStock.number }}</div>
           </div>
 
@@ -111,24 +94,19 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent } from 'vue';
 
-import { useStore } from "../../store";
-import imageMixin from "../../mixins/imageMixin";
-import stockMixin from "../../mixins/stockMixin";
+import { useStore } from '../../store';
+import imageMixin from '../../mixins/imageMixin';
+import stockMixin from '../../mixins/stockMixin';
 
-import { IReadyStockItem } from "../../types";
-import http from "../../http";
+import { IRealComposition, VehicleGroupType } from '../../types';
 
-interface ResponseJSONData {
-  [key: string]: string;
-}
+function getVehicleType(stockType: string): VehicleGroupType {
+  if (/^E/.test(stockType)) return 'loco-electric';
+  if (/^S/.test(stockType)) return 'loco-diesel';
 
-function getVehicleType(stockType: string) {
-  if (/^E/.test(stockType)) return "loco-e";
-  if (/^S/.test(stockType)) return "loco-s";
-
-  return "car-passenger";
+  return 'wagon-passenger';
 }
 
 export default defineComponent({
@@ -136,55 +114,51 @@ export default defineComponent({
 
   data: () => ({
     store: useStore(),
-    responseStatus: "loading",
+    responseStatus: 'loading',
     isMobile:
-      "ontouchstart" in document.documentElement &&
-      navigator.userAgent.match(/Mobi/)
+      'ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/)
         ? true
         : false,
     observer: null as IntersectionObserver | null,
-    searchedReadyStockName: "",
-    searchedReadyStockString: "",
+    searchedReadyStockName: '',
+    searchedReadyStockString: '',
     visibleIndexesTo: 0,
     lastSelectedStockId: null as string | null,
     scrollTop: 0,
   }),
 
-  async mounted() {
+  mounted() {
     this.mountObserver();
-    this.fetchStockListData();
   },
 
   activated() {
-    (this.$refs["focus"] as HTMLElement).focus();
+    (this.$refs['focus'] as HTMLElement).focus();
 
-    (this.$refs["list"] as HTMLElement).scrollTo({
+    (this.$refs['list'] as HTMLElement).scrollTo({
       top: this.scrollTop,
-      behavior: "auto",
+      behavior: 'auto',
     });
   },
 
   computed: {
-    computedReadyStockList() {
-      if (this.searchedReadyStockName == null) return this.store.readyStockList;
-
-      return this.store.readyStockList
+    computedReadyStockList(): IRealComposition[] {
+      return this.store.realCompositionList
         .filter(
-          (rs) =>
-            rs.stockId
+          (rc) =>
+            rc.stockId
               .toLocaleLowerCase()
               .includes(this.searchedReadyStockName.toLocaleLowerCase()) &&
-            rs.stockString
+            rc.stockString
               .toLocaleLowerCase()
-              .includes(this.searchedReadyStockString.toLocaleLowerCase()),
+              .includes(this.searchedReadyStockString.toLocaleLowerCase())
         )
         .filter((_, i) => i <= this.visibleIndexesTo);
     },
 
     computedAvailableStockTypes() {
-      return this.store.readyStockList
+      return this.store.realCompositionList
         .reduce((acc, rs) => {
-          rs.stockString.split(";").forEach((s) => {
+          rs.stockString.split(';').forEach((s) => {
             if (!acc.includes(s)) acc.push(s);
           });
 
@@ -198,7 +172,7 @@ export default defineComponent({
     computedReadyStockList(curr, prev) {
       if (curr.length < prev.length) {
         this.visibleIndexesTo = 20;
-        (this.$refs["list"] as HTMLElement).scrollTo({
+        (this.$refs['list'] as HTMLElement).scrollTo({
           top: 0,
         });
       }
@@ -206,41 +180,12 @@ export default defineComponent({
   },
 
   methods: {
-    async fetchStockListData() {
-      const readyStockJSONData = (
-        await http.get<ResponseJSONData>("td2/data/readyStock.json")
-      ).data;
-
-      if (!readyStockJSONData) {
-        this.responseStatus = "error";
-        return;
-      }
-
-      for (let stockKey in readyStockJSONData) {
-        const [type, number, ...name] = stockKey.split(" ");
-
-        const obj = {
-          number: number.replace(/_/g, "/"),
-          name: name.join(" "),
-          stockString: readyStockJSONData[stockKey],
-          type,
-        };
-
-        this.store.readyStockList.push({
-          ...obj,
-          stockId: `${obj.type} ${obj.number} ${obj.name}`,
-        });
-      }
-
-      this.responseStatus = "loaded";
-    },
-
     mountObserver() {
       this.observer = new IntersectionObserver((entries) => {
         if (entries[0].intersectionRatio > 0) this.visibleIndexesTo += 20;
       });
 
-      this.observer.observe(this.$refs["bottom"] as HTMLElement);
+      this.observer.observe(this.$refs['bottom'] as HTMLElement);
     },
 
     getImageUrl(name: string) {
@@ -248,11 +193,11 @@ export default defineComponent({
     },
 
     resetStockFilters() {
-      this.searchedReadyStockName = "";
-      this.searchedReadyStockString = "";
+      this.searchedReadyStockName = '';
+      this.searchedReadyStockString = '';
     },
 
-    chooseStock(stockItem: IReadyStockItem) {
+    chooseStock(stockItem: IRealComposition) {
       this.loadStockFromString(stockItem.stockString);
       this.lastSelectedStockId = stockItem.stockId;
       this.store.isRealStockListCardOpen = false;
@@ -261,7 +206,7 @@ export default defineComponent({
     onStockItemError(e: Event, stockType: string) {
       const imageEl = e.target as HTMLImageElement;
       imageEl.src = `images/${getVehicleType(stockType)}-unknown.png`;
-      imageEl.style.opacity = "1";
+      imageEl.style.opacity = '1';
     },
 
     onListScroll(e: Event) {
@@ -275,15 +220,17 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/global.scss";
+@import '../../styles/global.scss';
 
-.exit-btn {
-  font-size: 1.2em;
-  margin: 0.25em 0;
+.action-exit {
+  display: flex;
+  background-color: #333;
+  border-radius: 0.25em;
+  padding: 0.5em;
 }
 
-.btn {
-  background-color: #444;
+.action-reset {
+  background-color: #333;
 }
 
 .card_content {
@@ -361,7 +308,7 @@ ul {
     gap: 1rem;
     padding: 0.1em;
 
-    &[data-last-selected="true"] .stock-title {
+    &[data-last-selected='true'] .stock-title {
       border: 1px solid $accentColor;
     }
 

src/components/common/Checkbox.vue

@@ -0,0 +1,58 @@
+<template>
+  <label>
+    <input type="checkbox" v-model="model" />
+    <div><slot /></div>
+  </label>
+</template>
+
+<script lang="ts" setup>
+const model = defineModel();
+</script>
+
+<style lang="scss" scoped>
+label {
+  cursor: pointer;
+
+  text-transform: uppercase;
+  transition: color 200ms;
+}
+
+div {
+  padding: 0.25em 0.5em;
+  color: white;
+
+  background-color: #222;
+  border-radius: 0.25em;
+
+  user-select: none;
+
+  &::before {
+    content: '\2716';
+    margin-right: 0.5em;
+    color: #aaa;
+  }
+}
+
+input {
+  position: absolute;
+  clip: rect(1px, 1px, 1px, 1px);
+  padding: 0;
+  border: 0;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+
+  &:focus-visible + div {
+    outline: 1px solid white;
+  }
+
+  &:checked + div {
+    color: palegreen;
+
+    &::before {
+      color: palegreen;
+      content: '\2714';
+    }
+  }
+}
+</style>

src/components/sections/InputsSection.vue

@@ -9,7 +9,7 @@
             v-for="locoType in locomotiveTypeList"
             :key="locoType.id"
             class="btn btn--choice"
-            :data-selected="locoType.id == store.chosenLocoPower"
+            :data-selected="locoType.id == store.chosenLocoGroup"
             @click="selectLocoType(locoType.id)"
           >
             {{ $t(`inputs.${locoType.id}`) }}
@@ -27,7 +27,9 @@
           <option :value="null" disabled>
             {{ $t('inputs.input-vehicle') }}
           </option>
-          <option v-for="loco in locoOptions" :value="loco" :key="loco.type">{{ loco.type }}<b v-if="loco.isSponsorsOnly">*</b></option>
+          <option v-for="loco in locoOptions" :value="loco" :key="loco.type">
+            {{ loco.type }}<b v-if="loco.restrictions['sponsorOnly']">*</b>
+          </option>
         </select>
       </div>
 
@@ -37,7 +39,7 @@
             v-for="carType in carTypeList"
             :key="carType.id"
             class="btn btn--choice"
-            :data-selected="carType.id == store.chosenCarUseType"
+            :data-selected="carType.id == store.chosenCarGroup"
             @click="selectCarWagonType(carType.id)"
           >
             {{ $t(`inputs.${carType.id}`) }}
@@ -56,7 +58,9 @@
             {{ $t('inputs.input-carwagon') }}
           </option>
 
-          <option v-for="car in carOptions" :value="car" :key="car.type">{{ car.type }}<b v-if="car.isSponsorsOnly">*</b></option>
+          <option v-for="car in carOptions" :value="car" :key="car.type">
+            {{ car.type }}<b v-if="car.restrictions['sponsorOnly']">*</b>
+          </option>
         </select>
       </div>
 
@@ -65,7 +69,9 @@
         <select
           id="cargo-select"
           :disabled="
-            (store.chosenCar && !store.chosenCar.loadable) || (store.chosenCar && store.chosenCar.useType == 'car-passenger') || !store.chosenCar
+            (store.chosenCar && !store.chosenCar.loadable) ||
+            (store.chosenCar && store.chosenCar.group == 'wagon-passenger') ||
+            !store.chosenCar
           "
           data-select="cargo"
           data-ignore-outside="1"
@@ -80,7 +86,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>
@@ -90,7 +96,12 @@
         <button class="btn" @click="addVehicle(store.chosenVehicle, store.chosenCargo)">
           {{ $t('inputs.action-add') }}
         </button>
-        <button class="btn" @click="switchVehicles" :disabled="store.chosenStockListIndex == -1" :data-disabled="store.chosenStockListIndex == -1">
+        <button
+          class="btn"
+          @click="switchVehicles"
+          :disabled="store.chosenStockListIndex == -1"
+          :data-disabled="store.chosenStockListIndex == -1"
+        >
           {{ $t('inputs.action-swap') }}
           <b class="text--accent">
             {{ store.chosenStockListIndex == -1 ? '' : `${store.chosenStockListIndex + 1}.` }}
@@ -112,6 +123,7 @@ import imageMixin from '../../mixins/imageMixin';
 import { useStore } from '../../store';
 import stockPreviewMixin from '../../mixins/stockPreviewMixin';
 import stockMixin from '../../mixins/stockMixin';
+import { LocoGroupType, WagonGroupType } from '../../types';
 
 export default defineComponent({
   mixins: [imageMixin, stockPreviewMixin, stockMixin],
@@ -120,33 +132,33 @@ export default defineComponent({
     store: useStore(),
     locomotiveTypeList: [
       {
-        id: 'loco-e',
+        id: 'loco-electric',
         desc: 'ELEKTRYCZNE',
       },
       {
-        id: 'loco-s',
+        id: 'loco-diesel',
         desc: 'SPALINOWE',
       },
       {
-        id: 'loco-ezt',
+        id: 'unit-electric',
         desc: 'ELEKTR. ZESPOŁY TRAKCYJNE',
       },
       {
-        id: 'loco-szt',
+        id: 'unit-diesel',
         desc: 'SPAL. ZESPOŁY TRAKCYJNE',
       },
-    ],
+    ] as { id: LocoGroupType; desc: string }[],
 
     carTypeList: [
       {
-        id: 'car-passenger',
+        id: 'wagon-passenger',
         desc: 'PASAŻERSKIE',
       },
       {
-        id: 'car-cargo',
+        id: 'wagon-freight',
         desc: 'TOWAROWE',
       },
-    ],
+    ] as { id: WagonGroupType; desc: string }[],
   }),
 
   computed: {
@@ -154,14 +166,14 @@ export default defineComponent({
       return this.store.locoDataList
         .slice()
         .sort((a, b) => (a.type > b.type ? 1 : -1))
-        .filter((loco) => loco.power == this.store.chosenLocoPower);
+        .filter((loco) => loco.group == this.store.chosenLocoGroup);
     },
 
     carOptions() {
       return this.store.carDataList
         .slice()
         .sort((a, b) => (a.type > b.type ? 1 : -1))
-        .filter((car) => car.useType == this.store.chosenCarUseType);
+        .filter((car) => car.group == this.store.chosenCarGroup);
     },
   },
 
@@ -173,7 +185,8 @@ export default defineComponent({
     addOrSwitchVehicle() {
       if (!this.store.chosenVehicle) return;
 
-      if (this.store.chosenStockListIndex == -1) this.addVehicle(this.store.chosenVehicle, this.store.chosenCargo);
+      if (this.store.chosenStockListIndex == -1)
+        this.addVehicle(this.store.chosenVehicle, this.store.chosenCargo);
       else this.switchVehicles();
     },
 
@@ -197,14 +210,14 @@ export default defineComponent({
       this.store.stockList[this.store.chosenStockListIndex] = stockObject;
     },
 
-    selectLocoType(locoTypeId: string) {
-      this.store.chosenLocoPower = locoTypeId;
+    selectLocoType(locoGroupType: LocoGroupType) {
+      this.store.chosenLocoGroup = locoGroupType;
       this.store.chosenVehicle = this.locoOptions[0];
       this.store.chosenLoco = this.locoOptions[0];
     },
 
-    selectCarWagonType(carWagonTypeId: string) {
-      this.store.chosenCarUseType = carWagonTypeId;
+    selectCarWagonType(wagonGroupType: WagonGroupType) {
+      this.store.chosenCarGroup = wagonGroupType;
       this.store.chosenVehicle = this.carOptions[0];
       this.store.chosenCar = this.carOptions[0];
       this.store.chosenCargo = null;
@@ -216,7 +229,10 @@ export default defineComponent({
 
         this.store.chosenVehicle = type == 'loco' ? this.store.chosenLoco : this.store.chosenCar;
 
-        this.store.chosenCargo = this.store.chosenCar?.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;
       });
     },
   },

src/components/sections/LogoSection.vue

@@ -1,10 +1,6 @@
 <template>
   <section class="logo-section">
-    <img
-      :src="`/logo-${$i18n.locale}.svg`"
-      alt="logo pojazdownik"
-      @click="navigate"
-    />
+    <img :src="`/logo-${$i18n.locale}.svg`" alt="logo pojazdownik" @click="navigate" />
 
     <div class="actions">
       <button
@@ -26,36 +22,35 @@ export default {
     return {
       localeActions: [
         {
-          name: "POLSKI",
-          locale: "pl",
+          name: 'POLSKI',
+          locale: 'pl',
         },
         {
-          name: "ENGLISH",
-          locale: "en",
+          name: 'ENGLISH',
+          locale: 'en',
         },
       ],
     };
   },
   methods: {
     navigate() {
-      window.location.pathname = "";
+      window.location.pathname = '';
     },
 
     chooseLocale(locale: string) {
       this.$i18n.locale = locale;
-      window.localStorage.setItem("locale", locale);
+      window.localStorage.setItem('locale', locale);
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/global.scss";
+@import '../../styles/global.scss';
 
 .logo-section {
   grid-row: 1;
   grid-column: 1;
-  margin-bottom: 1.5em;
 
   display: flex;
   align-items: center;
@@ -69,7 +64,7 @@ export default {
   display: flex;
   gap: 0.5em;
 
-  button[data-selected="true"] {
+  button[data-selected='true'] {
     font-weight: bold;
     color: $accentColor;
     text-decoration: underline;

src/components/sections/StockSection.vue

@@ -35,7 +35,12 @@ 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) => {
@@ -44,7 +49,7 @@ onMounted(() => {
     if (/[1234]/.test(e.key)) {
       const keyNum = Number(e.key);
       store.stockSectionMode = sectionModes[keyNum - 1];
-      (sectionButtonRefs.value[keyNum - 1] as HTMLButtonElement).focus();
+      (sectionButtonRefs.value[keyNum - 1] as HTMLButtonElement)?.focus();
     }
   });
 });

src/components/sections/TrainImageSection.vue

@@ -1,52 +1,72 @@
 <template>
   <section class="train-image-section">
-    <div class="train-image__content" :class="{ sponsor: store.chosenVehicle?.isSponsorsOnly }">
+    <div class="image-wrapper">
       <img
+        :src="
+          store.chosenVehicle
+            ? getThumbnailURL(store.chosenVehicle.type, 'small')
+            : '/images/placeholder.jpg'
+        "
         tabindex="0"
-        :src="store.chosenVehicle ? getThumbnailURL(store.chosenVehicle.type, 'small') : '/images/placeholder.jpg'"
+        :data-sponsor-only="store.chosenVehicle?.restrictions.sponsorOnly"
+        :data-team-only="store.chosenVehicle?.restrictions.teamOnly"
         @click="onImageClick"
         @keydown.enter="onImageClick"
         @error="onImageError"
-        type="image/jpeg"
       />
     </div>
 
-    <div class="train-image__info" v-if="store.chosenVehicle">
+    <div class="image-info" v-if="store.chosenVehicle">
       <b class="text--accent">{{ store.chosenVehicle.type }}</b> &bull;
       <b style="color: #ccc">
-        {{ $t(`preview.${isLocomotive(store.chosenVehicle) ? store.chosenVehicle.power : store.chosenVehicle.useType}`) }}
+        {{
+          $t(
+            `preview.${isLocomotive(store.chosenVehicle) ? store.chosenVehicle.group : store.chosenVehicle.group}`
+          )
+        }}
       </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>
+        <div v-if="isLocomotive(store.chosenVehicle)">
+          {{ $t('preview.cabin') }} {{ store.chosenVehicle.cabinType }}
+        </div>
 
         <div v-else>
           {{
-            store.chosenVehicle.useType == 'car-cargo'
+            store.chosenVehicle.group == 'wagon-freight'
               ? $t(`usage.${store.chosenVehicle.constructionType}`)
               : `${$t('preview.construction')} ${store.chosenVehicle.constructionType}`
           }}
         </div>
 
-        <b style="color: salmon" v-if="store.chosenVehicle.isSponsorsOnly">{{
+        <b style="color: salmon" v-if="store.chosenVehicle.restrictions['sponsorOnly']">{{
           $t('preview.sponsor-only', [
-            new Date(store.chosenVehicle.sponsorsOnlyTimestamp).toLocaleDateString($i18n.locale == 'pl' ? 'pl-PL' : 'en-GB'),
+            new Date(store.chosenVehicle.restrictions['sponsorOnly']).toLocaleDateString(
+              $i18n.locale == 'pl' ? 'pl-PL' : 'en-GB'
+            ),
           ])
         }}</b>
+
+        <b style="color: gold" v-if="store.chosenVehicle.restrictions['teamOnly']">{{
+          $t('preview.team-only')
+        }}</b>
       </div>
     </div>
 
-    <div class="train-image__info" v-else>{{ $t('preview.desc') }}</div>
+    <div class="image-info" v-else>{{ $t('preview.desc') }}</div>
   </section>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
 import { useStore } from '../../store';
-import { isLocomotive } from '../../utils/vehicleUtils';
-import { ILocomotive, Vehicle } from '../../types';
+import { isTractionUnit } from '../../utils/vehicleUtils';
+import { ILocomotive, IVehicle } from '../../types';
 import imageMixin from '../../mixins/imageMixin';
 
 export default defineComponent({
@@ -68,7 +88,7 @@ export default defineComponent({
   },
 
   watch: {
-    chosenVehicle(vehicle: Vehicle, prevVehicle: Vehicle) {
+    chosenVehicle(vehicle: IVehicle, prevVehicle: IVehicle) {
       if (vehicle && vehicle.type != prevVehicle?.type) {
         this.store.imageLoading = true;
       }
@@ -87,8 +107,8 @@ export default defineComponent({
       el.src = '/images/placeholder.jpg';
     },
 
-    isLocomotive(vehicle: Vehicle): vehicle is ILocomotive {
-      return isLocomotive(vehicle);
+    isLocomotive(vehicle: IVehicle): vehicle is ILocomotive {
+      return isTractionUnit(vehicle);
     },
 
     onImageClick(e: Event) {
@@ -106,7 +126,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/global.scss';
+@import '../../styles/global';
 
 .train-image-section {
   display: flex;
@@ -120,24 +140,41 @@ export default defineComponent({
   height: 22em;
 }
 
-.train-image {
-  &__content {
-    &.sponsor img {
-      border: 1px solid salmon;
-    }
+img {
+  max-width: 380px;
+  width: 100%;
+  height: 100%;
+  border: 1px solid white;
 
-    img {
-      max-width: 380px;
-      width: 100%;
-      height: 100%;
-      border: 1px solid white;
+  cursor: zoom-in;
 
-      cursor: zoom-in;
-    }
+  &[data-sponsor-only='true'] {
+    border: 1px solid $sponsorColor;
+  }
+
+  &[data-team-only='true'] {
+    border: 1px solid $teamColor;
   }
 }
 
-.train-image__info {
+// .train-image {
+//   &__content {
+//     &.sponsor img {
+//       border: 1px solid salmon;
+//     }
+
+//     img {
+//       max-width: 380px;
+//       width: 100%;
+//       height: 100%;
+//       border: 1px solid white;
+
+//       cursor: zoom-in;
+//     }
+//   }
+// }
+
+.image-info {
   font-size: 1.1em;
   padding: 0.5em;
   margin: 0.5em auto;
@@ -150,19 +187,6 @@ export default defineComponent({
   font-weight: bold;
 }
 
-// Transition animations
-.img-message-anim {
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-  }
-
-  &-enter-active,
-  &-leave-active {
-    transition: opacity 75ms ease-in 100ms;
-  }
-}
-
 @media screen and (max-width: $breakpointMd) {
   .train-image-section {
     justify-content: center;

src/components/tabs/NumberGeneratorTab.vue

@@ -1,77 +1,115 @@
 <template>
   <div class="number-generator tab">
     <div class="tab_header">
-      <h2>{{ $t("numgen.title") }}</h2>
+      <h2>{{ $t('numgen.title') }}</h2>
+      <h3>{{ $t('numgen.subtitle') }}</h3>
     </div>
 
     <div class="tab_content">
-      <div class="options">
-        <select v-model="chosenCategory" @change="randomizeTrainNumber()">
+      <div class="category-select">
+        <label for="category"> {{ $t('numgen.train-category') }}</label>
+        <select id="category" v-model="chosenCategory" @change="randomizeTrainNumber()">
           <option :value="null" disabled>
-            {{ $t("numgen.train-category") }}
+            {{ $t('numgen.train-category') }}
           </option>
           <option
-            v-for="(_, category) in genData.categories"
+            v-for="(_, category) in genData.categoriesRules"
             :key="category"
             :value="category"
           >
             {{ $t(`numgen.categories.${category}`) }}
           </option>
         </select>
+      </div>
 
-        <select v-model="beginRegionName" @change="randomizeTrainNumber()">
-          <option :value="null" disabled>
-            {{ $t("numgen.start-region") }}
-          </option>
-          <option
-            v-for="(_, name) in genData.regionNumbers"
-            :key="name"
-            :value="name"
-          >
-            {{ name }}
-          </option>
-        </select>
+      <div class="regions-select">
+        <div>
+          <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') }}
+            </option>
+            <option v-for="(_, name) in genData.regionNumbers" :key="name" :value="name">
+              {{ name }}
+            </option>
+          </select>
+        </div>
 
-        <select v-model="endRegionName" @change="randomizeTrainNumber()">
-          <option :value="null" disabled>{{ $t("numgen.end-region") }}</option>
-          <option
-            v-for="(_, name) in genData.regionNumbers"
-            :key="name"
-            :value="name"
-          >
-            {{ name }}
-          </option>
-        </select>
+        <div>
+          <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>
+        </div>
       </div>
 
       <div class="generated-number" @click="copyNumber">
         <span v-if="trainNumber">
-          {{ $t("numgen.number-info") }}
+          {{ $t('numgen.number-info') }}
           <b class="text--accent">{{ trainNumber }}</b>
         </span>
-        <span v-else>{{ $t("numgen.warning") }}</span>
+        <span v-else>{{ $t('numgen.warning') }}</span>
       </div>
 
-      <!-- <div v-if="chosenCategory">
-        Current numbering rules: {{ $t(`numgen.rules.${chosenCategory}`) }};
+      <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>
 
-        <span v-if="beginRegionName && endRegionName">
-          <span v-if="beginRegionName == endRegionName">
-            pierwsze dwie cyfry:
-            {{ genData.sameRegions[beginRegionName].join(', ') }}
-            (numer w obrębie obszaru {{ beginRegionName }})
-          </span>
+        <!-- First & second digit (different regions)  -->
+        <div v-else>
+          <div>
+            <b>
+              {{ $t('numgen.rules.first-digit') }}
+              <span class="text--accent">{{ trainNumber[0] }}</span>
+            </b>
+            {{ $t('numgen.rules.for-region-begin') }} {{ beginRegionName }}
+          </div>
 
-          <span v-else>
-            pierwsza cyfra: {{ genData.regionNumbers[beginRegionName] }}; druga cyfra:
-            {{ genData.regionNumbers[endRegionName] }}
-          </span>
-        </span>
-      </div> -->
+          <div>
+            <b>
+              {{ $t('numgen.rules.second-digit') }}
+              <span class="text--accent">{{ trainNumber[1] }} </span>
+            </b>
+            {{ $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>
+          </b>
+          {{ $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>
+        </div>
+      </div>
+
+      <hr />
 
       <div class="tab_links">
         <a :href="$t('numgen.td2-wiki-link')" target="_blank">
-          {{ $t("numgen.td2-wiki") }}
+          {{ $t('numgen.td2-wiki') }}
         </a>
       </div>
 
@@ -79,10 +117,15 @@
 
       <div class="tab_actions">
         <button class="btn" @click="randomizeTrainNumber(true)">
-          {{ $t("numgen.action-random-region") }}
+          {{ $t('numgen.action-random-region') }}
         </button>
+
+        <button class="btn" @click="randomizeCategory">
+          {{ $t('numgen.action-random-category') }}
+        </button>
+
         <button class="btn" @click="randomizeTrainNumber(false)">
-          {{ $t("numgen.action-random-number") }}
+          {{ $t('numgen.action-random-number') }}
         </button>
       </div>
     </div>
@@ -90,14 +133,15 @@
 </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 genData from '../../constants/numberGeneratorData.json';
+import { computed } from 'vue';
 
 const i18n = useI18n();
 type RegionName = keyof typeof genData.regionNumbers;
-type Category = keyof typeof genData.categories;
+type Category = keyof typeof genData.categoriesRules;
 
 const beginRegionName = ref(null) as Ref<RegionName | null>;
 const endRegionName = ref(null) as Ref<RegionName | null>;
@@ -108,27 +152,37 @@ 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'));
   }
 };
 
+const categoryRules = computed(() => {
+  if (!chosenCategory.value) return null;
+
+  return genData.categoriesRules[chosenCategory.value];
+});
+
+const randomizeCategory = () => {
+  const categoryKeys = Object.keys(genData.categoriesRules) as Category[];
+  chosenCategory.value = categoryKeys[~~(Math.random() * categoryKeys.length)];
+
+  randomizeTrainNumber(false);
+};
+
 const randomizeTrainNumber = (randomizeRegions = false) => {
   // if (categoryRules.value == null) return;
 
   const regionKeys = Object.keys(genData.regionNumbers);
 
   if (beginRegionName.value == null || randomizeRegions)
-    beginRegionName.value = regionKeys[
-      (regionKeys.length * Math.random()) << 0
-    ] as RegionName;
+    beginRegionName.value = regionKeys[(regionKeys.length * Math.random()) << 0] as RegionName;
 
   if (endRegionName.value == null || randomizeRegions)
-    endRegionName.value = regionKeys[
-      (regionKeys.length * Math.random()) << 0
-    ] as RegionName;
+    endRegionName.value = regionKeys[(regionKeys.length * Math.random()) << 0] as RegionName;
 
-  let number = "";
+  let number = '';
 
+  // Two first numbers (begin & end regions)
   if (beginRegionName.value == endRegionName.value) {
     const sameRegionsNumbers = genData.sameRegions[beginRegionName.value!];
     const randRegionNumber =
@@ -147,49 +201,65 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
     return;
   }
 
-  if (chosenCategory.value == null) chosenCategory.value = "EI";
+  // Choose default category if it's not chosen
+  if (chosenCategory.value == null) chosenCategory.value = 'EI';
 
-  const rulesArray = genData.categories[chosenCategory.value]
-    .split(";")
-    .map((r) => ({
-      index: r.split(":")[0],
-      rule: r.split(":")[1],
-      nums: Number(r.split(":")[2] || "1"),
-    }));
+  // Get category rules
+  const [thirdNumber, minRange, maxRange] = categoryRules.value!;
 
-  rulesArray.forEach((r) => {
-    const range = r.rule.split("-");
+  // Third number
+  number += thirdNumber ?? '';
 
-    if (range.length == 1) number += r.rule;
-    else {
-      const [minRange, maxRange] = range;
-      const randRange = Math.floor(
-        Math.random() * (Number(maxRange) - Number(minRange)) +
-          Number(minRange),
-      ).toString();
+  // 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('');
 
-      number +=
-        new Array(Math.abs(randRange.length - r.nums)).fill("0").join("") +
-        randRange;
-    }
-  });
+  number += `${leadingZeros}${randRange}`;
 
   trainNumber.value = number;
 };
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/tab.scss";
-@import "../../styles/global.scss";
+@import '../../styles/tab.scss';
+@import '../../styles/global.scss';
 
-.options {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+label {
+  display: block;
+  font-weight: bold;
+  margin-bottom: 0.5em;
+}
+
+.category-select {
+  select {
+    width: auto;
+    min-width: 50%;
+  }
+
+  margin-bottom: 1em;
+}
+
+.regions-select {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   gap: 0.5em;
 
+  div {
+    width: 100%;
+  }
+
   select {
     width: 100%;
   }
+
+  label {
+    display: block;
+    margin-bottom: 0.5em;
+  }
 }
 
 .generated-number {
@@ -204,14 +274,19 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
   background-color: $secondaryColor;
 }
 
+.category-rules {
+  margin-bottom: 0.5em;
+}
+
 .tab_actions {
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(3, 1fr);
   margin: 0.5em 0;
 }
 
 .tab_links {
   display: flex;
   justify-content: flex-end;
+  margin: 0.25em 0;
 }
 
 @media screen and (max-width: $breakpointMd) {
@@ -221,8 +296,20 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
 }
 
 @media screen and (max-width: $breakpointSm) {
-  .options select {
+  .regions-select {
+    flex-wrap: wrap;
+  }
+
+  .regions-select select {
     width: 100%;
   }
+
+  .category-select select {
+    min-width: 100%;
+  }
+
+  .category-rules {
+    text-align: center;
+  }
 }
 </style>

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>
@@ -28,6 +28,12 @@
             <input type="number" v-model="maxCarCount" step="1" max="60" min="1" />
           </label>
         </div>
+
+        <!-- <hr style="margin: 1em 0" /> -->
+
+        <!-- <div class="generator_options">
+          <Checkbox v-model="isCarGroupingEnabled">Grupuj wylosowane wagony (ustawia podobne wagony obok siebie w składzie)</Checkbox>
+        </div>  -->
       </div>
 
       <div>
@@ -79,15 +85,27 @@
       <hr />
 
       <div class="tab_actions">
-        <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock()">
+        <button
+          class="btn"
+          :data-disabled="computedChosenCarTypes.size == 0"
+          @click="generateStock()"
+        >
           {{ $t('stockgen.action-generate') }}
         </button>
 
-        <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock(true)">
+        <button
+          class="btn"
+          :data-disabled="computedChosenCarTypes.size == 0"
+          @click="generateStock(true)"
+        >
           {{ $t('stockgen.action-generate-empty') }}
         </button>
 
-        <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="resetChosenCargo">
+        <button
+          class="btn"
+          :data-disabled="computedChosenCarTypes.size == 0"
+          @click="resetChosenCargo"
+        >
           {{ $t('stockgen.action-reset') }}
         </button>
       </div>
@@ -101,12 +119,10 @@ import { useStore } from '../../store';
 
 import stockMixin from '../../mixins/stockMixin';
 import { ICargo, ICarWagon, IStock } from '../../types';
-import warningsMixin from '../../mixins/warningsMixin';
 
 export default defineComponent({
   name: 'stock-generator',
-
-  mixins: [stockMixin, warningsMixin],
+  mixins: [stockMixin],
 
   data() {
     return {
@@ -117,10 +133,12 @@ export default defineComponent({
 
       previewTimeout: -1,
 
-      maxMass: 3000,
+      maxTons: 3000,
       maxLength: 650,
       maxCarCount: 50,
 
+      isCarGroupingEnabled: false,
+
       store: useStore(),
     };
   },
@@ -131,9 +149,9 @@ export default defineComponent({
     },
 
     computedCargoData() {
-      if (!this.store.stockData?.generator.cargo) return [];
+      if (!this.store.vehiclesData?.generator.cargo) return [];
 
-      const cargoGeneratorData = this.store.stockData.generator.cargo;
+      const cargoGeneratorData = this.store.vehiclesData.generator.cargo;
 
       return Object.keys(cargoGeneratorData)
         .sort((v1, v2) => this.$t(`cargo.${v1}`).localeCompare(this.$t(`cargo.${v2}`)))
@@ -163,10 +181,21 @@ export default defineComponent({
       this.excludedCarTypes.length = 0;
     },
 
+    // WIP
+    groupStock(stockList: IStock[]) {
+      if (!this.isCarGroupingEnabled) return false;
+
+      stockList.sort((s1, s2) => {
+        return (s1.constructionType + s1.cargo?.id).localeCompare(
+          s2.constructionType + s2.cargo?.id
+        );
+      });
+    },
+
     generateStock(empty = false) {
       const generatedChosenStockList = this.chosenCargoTypes.reduce(
         (acc, type) => {
-          this.store.stockData?.generator.cargo[type]
+          this.store.vehiclesData?.generator.cargo[type]
             .filter((c) => !this.excludedCarTypes.includes(c.split(':')[0]))
             .forEach((c) => {
               const [type, cargoType] = c.split(':');
@@ -175,12 +204,15 @@ 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) => {
-                  const chosenStock = acc.find((a) => a.constructionType.includes(cw.constructionType));
+                  const chosenStock = acc.find((a) =>
+                    a.constructionType.includes(cw.constructionType)
+                  );
 
                   if (!chosenStock)
                     acc.push({
@@ -206,30 +238,34 @@ export default defineComponent({
       };
 
       for (let i = 0; i < 10; i++) {
-        const headingLoco = this.store.stockList[0]?.isLoco ? this.store.stockList[0] : undefined;
-        this.store.stockList.length = headingLoco ? 1 : 0;
+        this.store.stockList.splice(this.store.stockList[0]?.isLoco ? 1 : 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;
 
-        let exceeded = false;
-
-        while (!exceeded) {
-          const randomStockType = generatedChosenStockList[~~(Math.random() * generatedChosenStockList.length)];
-          const { carWagon, cargo } = randomStockType.carPool[~~(Math.random() * randomStockType.carPool.length)];
+        // 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)];
 
           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 ||
-            this.store.stockList.length > this.maxCarCount
+            carCount >= this.maxCarCount
           ) {
-            exceeded = true;
             break;
           }
 
           this.addCarWagon(carWagon, cargo);
+          carCount++;
         }
 
-        const currentGenerationValue = this.store.totalLength + this.store.totalMass + this.store.stockList.length;
+        const currentGenerationValue = this.store.totalLength + this.store.totalWeight + carCount;
 
         if (bestGeneration.value < currentGenerationValue) {
           bestGeneration.stockList = this.store.stockList;
@@ -237,6 +273,10 @@ export default defineComponent({
         }
       }
 
+      const bestStockList = bestGeneration.stockList;
+
+      this.groupStock(bestStockList);
+
       this.store.stockList = bestGeneration.stockList;
       this.store.stockSectionMode = 'stock-list';
     },
@@ -249,7 +289,7 @@ export default defineComponent({
       this.store.chosenLoco = null;
       this.store.chosenCargo = null;
 
-      if (c) this.store.chosenCarUseType = c?.useType;
+      if (c) this.store.chosenCarGroup = c?.group;
     },
 
     toggleCargoChosen(cargoType: string, vehicles: string[]) {
@@ -283,6 +323,11 @@ export default defineComponent({
 @import '../../styles/global.scss';
 @import '../../styles/tab.scss';
 
+h2 {
+  margin-top: 0;
+  margin-bottom: 0.5em;
+}
+
 .generator_cargo,
 .generator_vehicles {
   display: grid;
@@ -323,6 +368,12 @@ export default defineComponent({
   gap: 1em;
 }
 
+.generator_options {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+}
+
 .generator_warning {
   background-color: $accentColor;
   padding: 0.5em;

src/components/tabs/StockListTab.vue

@@ -11,105 +11,147 @@
         {{ $t('stocklist.action-upload') }}
       </button>
 
-      <button class="btn btn--image" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="downloadStock">
+      <button
+        class="btn btn--image"
+        :data-disabled="stockIsEmpty"
+        :disabled="stockIsEmpty"
+        @click="downloadStock"
+      >
         <img src="/images/icon-download.svg" alt="download icon" />
         {{ $t('stocklist.action-download') }}
       </button>
 
-      <button class="btn btn--image" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="copyToClipboard">
+      <button
+        class="btn btn--image"
+        :data-disabled="stockIsEmpty"
+        :disabled="stockIsEmpty"
+        @click="copyToClipboard"
+      >
         <img src="/images/icon-copy.svg" alt="copy icon" />
         {{ $t('stocklist.action-copy') }}
       </button>
 
-      <button class="btn btn--image" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="resetStock">
+      <button
+        class="btn btn--image"
+        :data-disabled="stockIsEmpty"
+        :disabled="stockIsEmpty"
+        @click="resetStock"
+      >
         <img src="/images/icon-reset.svg" alt="reset icon" />
         {{ $t('stocklist.action-reset') }}
       </button>
 
-      <button class="btn btn--image" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="shuffleCars">
+      <button
+        class="btn btn--image"
+        :data-disabled="stockIsEmpty"
+        :disabled="stockIsEmpty"
+        @click="shuffleCars"
+      >
         <img src="/images/icon-shuffle.svg" alt="shuffle icon" />
         {{ $t('stocklist.action-shuffle') }}
       </button>
     </div>
 
     <div class="stock_controls" :data-disabled="store.chosenStockListIndex == -1">
-      <b v-if="store.chosenStockListIndex >= 0">
-        {{ $t('stocklist.vehicle-no') }}
-        <span class="text--accent">{{ store.chosenStockListIndex + 1 }}</span>
-        &nbsp;
-      </b>
-
-      <b v-else>
-        {{ $t('stocklist.no-vehicle-chosen') }}
-      </b>
-
-      <button class="btn" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" @click="moveUpStock(store.chosenStockListIndex)">
+      <button
+        class="btn btn--image"
+        :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
+        @click="moveUpStock(store.chosenStockListIndex)"
+      >
         <img :src="getIconURL('higher')" alt="move up vehicle" />
         {{ $t('stocklist.action-move-up') }}
       </button>
 
-      <button class="btn" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" @click="moveDownStock(store.chosenStockListIndex)">
+      <button
+        class="btn btn--image"
+        :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
+        @click="moveDownStock(store.chosenStockListIndex)"
+      >
         <img :src="getIconURL('lower')" alt="move down vehicle" />
         {{ $t('stocklist.action-move-down') }}
       </button>
 
-      <button class="btn" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" @click="removeStock(store.chosenStockListIndex)">
+      <button
+        class="btn btn--image"
+        :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
+        @click="removeStock(store.chosenStockListIndex)"
+      >
         <img :src="getIconURL('remove')" alt="remove vehicle" />
         {{ $t('stocklist.action-remove') }}
       </button>
     </div>
 
     <div class="stock_specs">
-      <b class="real-stock-info" v-if="store.chosenRealStock">
+      <b class="real-stock-info" v-if="chosenRealComposition">
         <span class="text--accent">
-          <img :src="getIconURL(store.chosenRealStock.type)" :alt="store.chosenRealStock.type" />
-          {{ store.chosenRealStock.number }} {{ store.chosenRealStock.name }}
+          <img :src="getIconURL(chosenRealComposition.type)" :alt="chosenRealComposition.type" />
+          {{ chosenRealComposition.number }} {{ chosenRealComposition.name }}
         </span>
         |
       </b>
 
       <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') }}:
+        - {{ $t('stocklist.vmax') }}
+        <span tabindex="0" :data-tooltip="$t('stocklist.disclaimer')">(?)</span>:
         <span class="text--accent">{{ store.maxStockSpeed }} km/h</span>
       </span>
     </div>
 
     <div class="stock_spawn-settings">
-      <label v-if="store.stockSupportsColdStart" :data-checked="store.isColdStart">
-        <input type="checkbox" v-model="store.isColdStart" />
+      <Checkbox v-if="store.stockSupportsColdStart" v-model="store.isColdStart">
         {{ $t('stocklist.coldstart-info') }}
-      </label>
+      </Checkbox>
 
-      <label v-if="store.stockSupportsDoubleManning" :data-checked="store.isDoubleManned">
-        <input type="checkbox" v-model="store.isDoubleManned" />
+      <Checkbox v-if="store.stockSupportsDoubleManning" v-model="store.isDoubleManned">
         {{ $t('stocklist.doublemanning-info') }}
-      </label>
+      </Checkbox>
     </div>
 
-    <div class="stock_warnings" v-if="stockHasWarnings">
-      <div class="warning" v-if="locoNotSuitable">(!) {{ $t('stocklist.warning-not-suitable') }}</div>
+    <div class="stock_warnings" v-if="hasAnyWarnings">
+      <div class="warning" v-if="locoNotSuitable">
+        (!) {{ $t('stocklist.warning-not-suitable') }}
+      </div>
 
-      <div class="warning" v-if="trainTooLong && store.isTrainPassenger">(!) {{ $t('stocklist.warning-passenger-too-long') }}</div>
+      <div class="warning" v-if="lengthExceeded && store.isTrainPassenger">
+        (!) {{ $t('stocklist.warning-passenger-too-long') }}
+      </div>
 
-      <div class="warning" v-if="trainTooLong && !store.isTrainPassenger">(!) {{ $t('stocklist.warning-freight-too-long') }}</div>
+      <div class="warning" v-if="lengthExceeded && !store.isTrainPassenger">
+        (!) {{ $t('stocklist.warning-freight-too-long') }}
+      </div>
 
-      <div class="warning" v-if="trainTooHeavy">
+      <div class="warning" v-if="teamOnlyVehicles.length > 0">
+        (!)
+        {{
+          $t('stocklist.warning-team-only-vehicle', [
+            teamOnlyVehicles.map((v) => v.type).join(', '),
+          ])
+        }}
+      </div>
+
+      <div class="warning" v-if="weightExceeded">
         (!)
         <i18n-t keypath="stocklist.warning-too-heavy">
           <template #href>
-            <a target="_blank" href="https://docs.google.com/spreadsheets/d/1KVa5vn2d8XGkXQFwbavVudwKqUQxbLOucHWs2VYqAUE">
+            <a
+              target="_blank"
+              href="https://docs.google.com/spreadsheets/d/1KVa5vn2d8XGkXQFwbavVudwKqUQxbLOucHWs2VYqAUE"
+            >
               {{ $t('stocklist.acceptable-mass-docs') }}
             </a>
           </template>
         </i18n-t>
       </div>
 
-      <div class="warning" v-if="tooManyLocomotives">
+      <div class="warning" v-if="locoCountExceeded">
         {{ $t('stocklist.warning-too-many-locos') }}
       </div>
     </div>
@@ -117,44 +159,60 @@
     <StockThumbnails :onListItemClick="onListItemClick" />
 
     <!-- Stock list -->
-    <ul ref="stock_list">
-      <li v-if="stockIsEmpty" class="list-empty">
+    <div class="list-wrapper">
+      <div v-if="stockIsEmpty" class="list-empty">
         <div class="stock-info">{{ $t('stocklist.list-empty') }}</div>
-      </li>
+      </div>
 
-      <TransitionGroup name="stock-list-anim">
-        <li
-          v-for="(stock, i) in store.stockList"
-          :key="stock.id"
-          :class="{ loco: stock.isLoco }"
-          tabindex="0"
-          @click="onListItemClick(i)"
-          @keydown.enter="onListItemClick(i)"
-          @keydown.w="moveUpStock(i)"
-          @keydown.s="moveDownStock(i)"
-          @keydown.backspace="removeStock(i)"
-          ref="itemRefs"
-        >
-          <div class="stock-info" @dragstart="onDragStart(i)" @drop="onDrop($event, i)" @dragover="allowDrop" draggable="true">
-            <span class="stock-info__no" :data-selected="i == store.chosenStockListIndex">
-              <span v-if="i == store.chosenStockListIndex">&bull;&nbsp;</span>
-              {{ i + 1 }}.
-            </span>
+      <ul v-else>
+        <transition-group name="stock-list-anim">
+          <li
+            v-for="(stock, i) in store.stockList"
+            :key="stock.id"
+            :class="{ loco: stock.isLoco }"
+            tabindex="0"
+            @click="onListItemClick(i)"
+            @keydown.enter="onListItemClick(i)"
+            @keydown.w="moveUpStock(i)"
+            @keydown.s="moveDownStock(i)"
+            @keydown.backspace="removeStock(i)"
+            ref="itemRefs"
+          >
+            <div
+              class="stock-info"
+              @dragstart="onDragStart(i)"
+              @drop="onDrop($event, i)"
+              @dragover="allowDrop"
+              draggable="true"
+            >
+              <span class="stock-info-no" :data-selected="i == store.chosenStockListIndex">
+                <span v-if="i == store.chosenStockListIndex">&bull;&nbsp;</span>
+                {{ i + 1 }}.
+              </span>
 
-            <span class="stock-info__type" :class="{ sponsor: stock.isSponsorsOnly }">
-              {{ stock.isLoco ? stock.type : getCarSpecFromType(stock.type) }}
-            </span>
+              <span
+                class="stock-info-type"
+                :data-sponsor-only="stock.restrictions.sponsorOnly"
+                :data-team-only="stock.restrictions.teamOnly"
+              >
+                {{ stock.isLoco ? stock.type : getCarSpecFromType(stock.type) }}
+              </span>
 
-            <span class="stock-info__cargo" v-if="stock.cargo">
-              {{ stock.cargo.id }}
-            </span>
-            <span class="stock-info__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>
-          </div>
-        </li>
-      </TransitionGroup>
-    </ul>
+              <span class="stock-info-cargo" v-if="stock.cargo">
+                {{ stock.cargo.id }}
+              </span>
+
+              <span class="stock-info-length">{{ stock.length }}m</span>
+
+              <span class="stock-info-mass">
+                {{ ((stock.weight + (stock.cargo?.weight ?? 0)) / 1000).toFixed(1) }}t
+              </span>
+              <span class="stock-info-speed">{{ stock.maxSpeed }}km/h</span>
+            </div>
+          </li>
+        </transition-group>
+      </ul>
+    </div>
   </section>
 </template>
 
@@ -163,17 +221,17 @@ import { defineComponent } from 'vue';
 
 import { useStore } from '../../store';
 
-import warningsMixin from '../../mixins/warningsMixin';
 import imageMixin from '../../mixins/imageMixin';
 import stockPreviewMixin from '../../mixins/stockPreviewMixin';
 import StockThumbnails from '../utils/StockThumbnails.vue';
 import stockMixin from '../../mixins/stockMixin';
+import Checkbox from '../common/Checkbox.vue';
 
 export default defineComponent({
   name: 'stock-list',
-  components: { StockThumbnails },
+  components: { StockThumbnails, Checkbox },
 
-  mixins: [warningsMixin, imageMixin, stockMixin, stockPreviewMixin],
+  mixins: [imageMixin, stockMixin, stockPreviewMixin],
 
   setup() {
     const store = useStore();
@@ -191,15 +249,23 @@ export default defineComponent({
   }),
 
   computed: {
+    chosenRealComposition() {
+      const currentStockString = this.store.stockList.map((s) => s.type).join(';');
+
+      return this.store.realCompositionList.find((rc) => rc.stockString == currentStockString);
+    },
+
     stockString() {
       if (this.store.stockList.length == 0) return '';
 
       const includeColdStart = this.store.isColdStart && this.store.stockSupportsColdStart;
-      const includeDoubleManned = this.store.isDoubleManned && this.store.stockSupportsDoubleManning;
+      const includeDoubleManned =
+        this.store.isDoubleManned && this.store.stockSupportsDoubleManning;
 
       return this.store.stockList
         .map((stock, i) => {
-          let stockTypeStr = stock.isLoco || !stock.cargo ? stock.type : `${stock.type}:${stock.cargo.id}`;
+          let stockTypeStr =
+            stock.isLoco || !stock.cargo ? stock.type : `${stock.type}:${stock.cargo.id}`;
 
           if (i == 0 && (includeColdStart || includeDoubleManned))
             return `${stockTypeStr},${includeColdStart ? 'c' : ''}${includeDoubleManned ? 'd' : ''}`;
@@ -214,11 +280,52 @@ export default defineComponent({
     },
 
     chosenStockVehicle() {
-      return this.store.chosenStockListIndex == -1 ? undefined : this.store.stockList[this.store.chosenStockListIndex];
+      return this.store.chosenStockListIndex == -1
+        ? undefined
+        : this.store.stockList[this.store.chosenStockListIndex];
     },
 
-    stockHasWarnings() {
-      return this.tooManyLocomotives || this.trainTooHeavy || this.trainTooLong || this.locoNotSuitable;
+    lengthExceeded() {
+      return (
+        (this.store.totalLength > 350 && this.store.isTrainPassenger) ||
+        (this.store.totalLength > 650 && !this.store.isTrainPassenger)
+      );
+    },
+
+    weightExceeded() {
+      return this.store.acceptableWeight && this.store.totalWeight > this.store.acceptableWeight;
+    },
+
+    locoNotSuitable() {
+      return (
+        !this.store.isTrainPassenger &&
+        this.store.stockList.length > 1 &&
+        !this.store.stockList.every((stock) => stock.isLoco) &&
+        this.store.stockList.some((stock) => stock.isLoco && stock.type.startsWith('EP'))
+      );
+    },
+
+    locoCountExceeded() {
+      return (
+        this.store.stockList.reduce((acc, stock) => {
+          if (stock.isLoco) acc += stock.count;
+          return acc;
+        }, 0) > 2
+      );
+    },
+
+    teamOnlyVehicles() {
+      return this.store.stockList.filter((stock) => stock.restrictions.teamOnly);
+    },
+
+    hasAnyWarnings() {
+      return (
+        this.locoCountExceeded ||
+        this.weightExceeded ||
+        this.lengthExceeded ||
+        this.locoNotSuitable ||
+        this.teamOnlyVehicles
+      );
     },
   },
 
@@ -238,7 +345,10 @@ export default defineComponent({
     onListItemClick(stockID: number) {
       const stock = this.store.stockList[stockID];
 
-      this.store.chosenStockListIndex = this.store.chosenStockListIndex == stockID && this.store.chosenVehicle?.type == stock.type ? -1 : stockID;
+      this.store.chosenStockListIndex =
+        this.store.chosenStockListIndex == stockID && this.store.chosenVehicle?.type == stock.type
+          ? -1
+          : stockID;
 
       if (this.store.chosenStockListIndex == -1) {
         this.store.chosenVehicle = null;
@@ -324,7 +434,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];
@@ -335,7 +446,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.chosenRealComposition ? this.chosenRealComposition.stockId + ' ' : ''}${this.store.stockList[0].type} ${(this.store.totalWeight / 1000).toFixed(1)}t; ${
         this.store.totalLength
       }m; vmax ${this.store.maxStockSpeed}`;
 
@@ -373,7 +484,7 @@ export default defineComponent({
         this.loadStockFromString(stockString);
       };
 
-      reader.onerror = (err) => console.log(err);
+      reader.onerror = (err) => console.error(err);
 
       inputEl.value = '';
     },
@@ -409,12 +520,15 @@ export default defineComponent({
 @import '../../styles/tab.scss';
 
 .stock-list-tab {
-  display: grid;
-  grid-gap: 0.5em;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  position: relative;
 }
 
 .warning {
   padding: 0.25em;
+  margin: 0.25em 0;
   background: $accentColor;
   color: black;
 
@@ -430,9 +544,9 @@ export default defineComponent({
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-wrap: wrap;
 
   gap: 0.5em;
-  flex-wrap: wrap;
 
   padding: 0.5em;
 
@@ -447,21 +561,6 @@ export default defineComponent({
 
     pointer-events: none;
   }
-
-  input#stock-count {
-    width: 3em;
-
-    margin: 0;
-    padding: 0.25em;
-    outline: none;
-    border: none;
-  }
-
-  button {
-    img {
-      margin-right: 0.25em;
-    }
-  }
 }
 
 .stock_actions {
@@ -484,39 +583,6 @@ export default defineComponent({
 .stock_spawn-settings {
   display: flex;
   gap: 0.5em;
-
-  label > input {
-    position: absolute;
-    clip: rect(1px, 1px, 1px, 1px);
-    padding: 0;
-    border: 0;
-    height: 1px;
-    width: 1px;
-    overflow: hidden;
-  }
-
-  label {
-    padding: 0.25em 0.5em;
-    border-radius: 0.25em;
-    background-color: #222;
-    color: #aaa;
-    cursor: pointer;
-
-    text-transform: uppercase;
-    transition: color 200ms;
-
-    &::before {
-      content: '\2716';
-    }
-  }
-
-  label[data-checked='true'] {
-    color: palegreen;
-
-    &::before {
-      content: '\2714';
-    }
-  }
 }
 
 .real-stock-info {
@@ -525,9 +591,19 @@ export default defineComponent({
   }
 }
 
-ul {
+.list-wrapper {
   position: relative;
-  overflow: auto;
+}
+
+.list-empty {
+  background-color: $secondaryColor;
+  border-radius: 0.5em;
+  padding: 0.75em;
+  font-weight: bold;
+}
+
+ul {
+  overflow-y: scroll;
   height: 500px;
 }
 
@@ -545,16 +621,11 @@ ul > li {
   &:focus-visible {
     outline: 1px solid white;
   }
-
-  &.list-empty {
-    background-color: $secondaryColor;
-    border-radius: 0.5em;
-    padding: 0.75em;
-  }
 }
 
 li > .stock-info {
   display: flex;
+  gap: 0.25em;
 
   color: white;
   font-weight: 700;
@@ -563,46 +634,39 @@ li > .stock-info {
 
   & > span {
     padding: 0.5em;
-    margin-right: 0.25em;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
   }
 }
 
-.sponsor {
-  color: salmon;
+.stock-info-no,
+.stock-info-type {
+  background-color: $secondaryColor;
+
+  &[data-team-only='true'] {
+    color: $teamColor;
+  }
+
+  &[data-sponsor-only] {
+    color: $sponsorColor;
+  }
 }
 
-.stock-info {
-  &__no,
-  &__type {
-    background-color: $secondaryColor;
-  }
+.stock-info-no {
+  min-width: 3.5em;
+  text-align: right;
 
-  &__count {
-    background-color: #e04e3e;
+  &[data-selected='true'] {
+    color: $accentColor;
   }
+}
 
-  &__no {
-    min-width: 3.5em;
-    text-align: right;
+.stock-info-cargo {
+  background-color: #333;
+}
 
-    &[data-selected='true'] {
-      color: $accentColor;
-    }
-  }
-
-  &__cargo {
-    background-color: #333;
-  }
-
-  &__length,
-  &__mass,
-  &__speed {
-    background-color: #555;
-  }
+.stock-info-length,
+.stock-info-mass,
+.stock-info-speed {
+  background-color: #555;
 }
 
 .stock-list-anim {

src/components/tabs/WikiListTab.vue

@@ -7,10 +7,18 @@
     <div class="tab_content">
       <div class="actions-panel">
         <div class="actions-panel_vehicles">
-          <button class="btn" :data-chosen="currentFilterMode == 'tractions'" @click="toggleFilter('tractions')">
+          <button
+            class="btn"
+            :data-chosen="currentFilterMode == 'tractions'"
+            @click="toggleFilter('tractions')"
+          >
             {{ $t('wiki.action-vehicles') }}
           </button>
-          <button class="btn" :data-chosen="currentFilterMode == 'carriages'" @click="toggleFilter('carriages')">
+          <button
+            class="btn"
+            :data-chosen="currentFilterMode == 'carriages'"
+            @click="toggleFilter('carriages')"
+          >
             {{ $t('wiki.action-carriages') }}
           </button>
         </div>
@@ -37,37 +45,31 @@
           <tbody>
             <tr
               v-for="{ vehicle, show } in computedTableData"
-              tabindex="0"
               v-show="show"
+              tabindex="0"
               :key="vehicle.type"
               @click="previewVehicle(vehicle)"
               @keydown.enter="previewVehicle(vehicle)"
               @dblclick="addVehicle(vehicle)"
+              ref="itemRefs"
             >
               <td style="width: 120px">
-                <img
-                  width="120"
-                  :src="getThumbnailURL(vehicle.type, 'small')"
-                  :alt="`${vehicle.type}`"
-                  loading="lazy"
-                  @error="(e) => ((e.target as HTMLElement).style.display = 'none')"
-                />
+                <img width="120" src="" :data-src="getThumbnailURL(vehicle.type, 'small')" />
               </td>
 
-              <td :data-sponsoronly="vehicle.isSponsorsOnly">{{ vehicle.type }}</td>
-
-              <td v-if="isLocomotive(vehicle)">{{ $t(`wiki.${vehicle.power}`) }}</td>
-              <td v-else>{{ $t(`wiki.${vehicle.useType}`) }}</td>
+              <td
+                :data-sponsor-only="vehicle.restrictions.sponsorOnly > 0"
+                :data-team-only="vehicle.restrictions.teamOnly"
+                style="min-width: 150px"
+              >
+                {{ vehicle.type.replace(/_/g, ' ') }}
+              </td>
 
+              <td style="min-width: 100px">{{ $t(`wiki.${vehicle.group}`) }}</td>
               <td>{{ vehicle.constructionType }}</td>
-              <td>{{ vehicle.length }}m</td>
-              <td>{{ vehicle.mass }}t</td>
-              <td>{{ vehicle.maxSpeed }}km/h</td>
-
-              <td v-if="currentFilterMode == 'carriages'">{{ !isLocomotive(vehicle) ? vehicle.cargoList.length : '---' }}</td>
-              <td v-if="currentFilterMode == 'tractions'">
-                {{ isLocomotive(vehicle) ? (vehicle.coldStart ? `&check;` : '&cross;') : '---' }}
-              </td>
+              <td>{{ vehicle.length }}</td>
+              <td>{{ (vehicle.weight / 1000).toFixed(1) }}</td>
+              <td>{{ vehicle.maxSpeed }}</td>
             </tr>
           </tbody>
 
@@ -82,12 +84,21 @@
 import { defineComponent } from 'vue';
 import { useStore } from '../../store';
 import stockPreviewMixin from '../../mixins/stockPreviewMixin';
-import { Vehicle } from '../../types';
-import { isLocomotive } from '../../utils/vehicleUtils';
+import { IVehicle } from '../../types';
+import { isTractionUnit } from '../../utils/vehicleUtils';
 import stockMixin from '../../mixins/stockMixin';
 import imageMixin from '../../mixins/imageMixin';
 
-type SorterID = 'type' | 'constructionType' | 'image' | 'length' | 'mass' | 'maxSpeed' | 'cargoCount' | 'group' | 'coldStart';
+type SorterID =
+  | 'type'
+  | 'constructionType'
+  | 'image'
+  | 'length'
+  | 'weight'
+  | 'maxSpeed'
+  | 'cargoCount'
+  | 'group'
+  | 'coldStart';
 
 interface IWikiHeader {
   id: SorterID;
@@ -96,8 +107,9 @@ interface IWikiHeader {
 }
 
 interface IWikiRow {
-  vehicle: Vehicle;
+  vehicle: IVehicle;
   show: boolean;
+  showImage: boolean;
 }
 
 const headers: IWikiHeader[] = [
@@ -106,10 +118,10 @@ 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' },
+  // { id: 'coldStart', sortable: true, for: 'tractions' },
+  // { id: 'cargoCount', sortable: true, for: 'carriages' },
 ];
 
 export default defineComponent({
@@ -118,6 +130,7 @@ export default defineComponent({
   data() {
     return {
       store: useStore(),
+      observer: null as IntersectionObserver | null,
       headers,
 
       scrollTop: 0,
@@ -133,6 +146,10 @@ export default defineComponent({
     };
   },
 
+  mounted() {
+    this.mountObserver();
+  },
+
   activated() {
     const tableWrapperRef = this.$refs['table-wrapper'] as HTMLElement;
 
@@ -142,10 +159,34 @@ export default defineComponent({
   },
 
   methods: {
-    isLocomotive,
+    isTractionUnit,
+
+    mountObserver() {
+      if (this.observer) return;
+
+      this.observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          if (entry.intersectionRatio > 0) {
+            entry.target
+              .querySelector('td:first-child > img')!
+              .setAttribute(
+                'src',
+                entry.target.querySelector('td:first-child > img')!.getAttribute('data-src')!
+              );
+          }
+        });
+      });
+
+      (this.$refs['itemRefs'] as HTMLElement[]).forEach((el) => this.observer?.observe(el));
+    },
 
     toggleFilter(name: typeof this.currentFilterMode) {
       this.currentFilterMode = this.currentFilterMode == name ? 'all' : name;
+      const tableWrapperRef = this.$refs['table-wrapper'] as HTMLElement;
+
+      tableWrapperRef.scrollTo({
+        top: this.scrollTop,
+      });
     },
 
     toggleSorter(header: IWikiHeader) {
@@ -164,22 +205,27 @@ export default defineComponent({
         case 'type':
         case 'constructionType':
         case 'group':
-          return direction == 1 ? row1.vehicle[id].localeCompare(row2.vehicle[id]) : row2.vehicle[id].localeCompare(row1.vehicle[id]);
+          return direction == 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)
+            Math.sign(
+              (!isTractionUnit(row1.vehicle) ? row1.vehicle.cargoTypes.length || -1 : -1) -
+                (!isTractionUnit(row2.vehicle) ? row2.vehicle.cargoTypes.length || -1 : -1)
+            ) * direction
           );
 
         case 'coldStart':
           return (
-            ((isLocomotive(row1.vehicle) && row1.vehicle.coldStart ? 1 : -1) - (isLocomotive(row2.vehicle) && row2.vehicle.coldStart ? 1 : -1)) *
+            ((isTractionUnit(row1.vehicle) && row1.vehicle.coldStart ? 1 : -1) -
+              (isTractionUnit(row2.vehicle) && row2.vehicle.coldStart ? 1 : -1)) *
             direction
           );
 
@@ -187,7 +233,9 @@ export default defineComponent({
           break;
       }
 
-      return direction == 1 ? row1.vehicle.type.localeCompare(row2.vehicle.type) : row2.vehicle.type.localeCompare(row1.vehicle.type);
+      return direction == 1
+        ? row1.vehicle.type.localeCompare(row2.vehicle.type)
+        : row2.vehicle.type.localeCompare(row1.vehicle.type);
     },
   },
 
@@ -196,11 +244,12 @@ export default defineComponent({
       return this.store.vehicleDataList
         .map((vehicle) => ({
           vehicle,
+          showImage: false,
           show:
             new RegExp(`${this.searchedVehicleTypeName.trim()}`, 'i').test(vehicle.type) &&
             (this.currentFilterMode == 'all' ||
-              (this.currentFilterMode == 'tractions' && isLocomotive(vehicle)) ||
-              (this.currentFilterMode == 'carriages' && !isLocomotive(vehicle))),
+              (this.currentFilterMode == 'tractions' && isTractionUnit(vehicle)) ||
+              (this.currentFilterMode == 'carriages' && !isTractionUnit(vehicle))),
         }))
         .sort((a, b) => this.sortTableRows(a, b));
     },
@@ -232,8 +281,6 @@ export default defineComponent({
 
   flex-wrap: wrap;
   gap: 0.5em;
-
-  margin: 0.5em 0;
 }
 
 .actions-panel_vehicles {
@@ -247,10 +294,14 @@ export default defineComponent({
   }
 }
 
+.tab_content {
+  display: grid;
+  grid-template-rows: 30px 770px;
+  gap: 0.5em;
+}
+
 .table-wrapper {
   overflow: auto;
-  height: 750px;
-  max-height: 95vh;
 }
 
 .wiki-list table {
@@ -274,10 +325,6 @@ export default defineComponent({
     cursor: pointer;
     background-color: #333;
 
-    &:first-child {
-      min-width: 120px;
-    }
-
     &:nth-child(odd) {
       background-color: #444;
     }
@@ -289,10 +336,21 @@ export default defineComponent({
 
   td {
     text-align: center;
-    height: 70px;
+    padding: 0.25em;
+    height: 75px;
 
-    &[data-sponsoronly='true'] {
-      color: salmon;
+    min-width: 95px;
+
+    &[data-sponsor-only='true'] {
+      color: $sponsorColor;
+    }
+
+    &[data-team-only='true'] {
+      color: $teamColor;
+    }
+
+    img {
+      vertical-align: middle;
     }
   }
 }

src/components/utils/ImageFullscreenPreview.vue

@@ -10,8 +10,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
-import { useStore } from "../../store";
+import { defineComponent } from 'vue';
+import { useStore } from '../../store';
 
 export default defineComponent({
   data() {

src/components/utils/StockThumbnails.vue

@@ -5,7 +5,7 @@
       v-for="(stock, stockIndex) in store.stockList"
       :key="stockIndex"
       :data-selected="store.chosenStockListIndex == stockIndex"
-      :data-sponsor="stock.isSponsorsOnly"
+      :data-sponsor="stock.restrictions.sponsorOnly"
       draggable="true"
       @dragstart="onDragStart(stockIndex)"
       @drop="onDrop($event, stockIndex)"
@@ -43,7 +43,7 @@ const onListItemClick = (index: number) => {
 };
 
 const stockImageError = (e: Event, stock: IStock) => {
-  (e.target as HTMLImageElement).src = `images/${stock.useType}-unknown.png`;
+  (e.target as HTMLImageElement).src = `images/${stock.group}-unknown.png`;
 };
 
 watch(
@@ -52,11 +52,13 @@ 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',
+        });
     });
   }
 );

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]
 }

src/constants/numberGeneratorData.json

@@ -1,37 +1,71 @@
 {
   "regionNumbers": {
-    "Warszawa": 1,
-    "Lublin": 2,
-    "Kraków": 3,
-    "Sosnowiec": 4,
-    "Gdańsk": 5,
-    "Wrocław": 6,
-    "Poznań": 7,
-    "Szczecin": 8,
-    "Rezerwa": 9
+    "Warszawa (1)": 1,
+    "Lublin (2)": 2,
+    "Kraków (3)": 3,
+    "Sosnowiec (4)": 4,
+    "Gdańsk (5)": 5,
+    "Wrocław (6)": 6,
+    "Poznań (7)": 7,
+    "Szczecin (8)": 8,
+    "Rezerwa (9)": 9
   },
   "sameRegions": {
     "Losowy": [
-      10, 11, 19, 91, 93, 97, 99, 20, 22, 29, 30, 33, 39, 40, 44, 49, 94, 50,
-      55, 59, 90, 95, 96, 66, 60, 69, 77, 70, 79, 88, 80, 89, 92, 98
+      10, 11, 19, 91, 93, 97, 99, 20, 22, 29, 30, 33, 39, 40, 44, 49, 94, 50, 55, 59, 90, 95, 96,
+      66, 60, 69, 77, 70, 79, 88, 80, 89, 92, 98
     ],
-    "Warszawa": [10, 11, 19, 91, 93, 97, 99],
-    "Lublin": [20, 22, 29],
-    "Kraków": [30, 33, 39],
-    "Sosnowiec": [40, 44, 49, 94],
-    "Gdańsk": [50, 55, 59, 90, 95, 96],
-    "Wrocław": [66, 60, 69],
-    "Poznań": [77, 70, 79],
-    "Szczecin": [88, 80],
-    "Rezerwa": [89, 92, 98]
+    "Warszawa (1)": [10, 11, 19, 91, 93, 97, 99],
+    "Lublin (2)": [20, 22, 29],
+    "Kraków (3)": [30, 33, 39],
+    "Sosnowiec (4)": [40, 44, 49, 94],
+    "Gdańsk (5)": [50, 55, 59, 90, 95, 96],
+    "Wrocław (6)": [66, 60, 69],
+    "Poznań (7)": [77, 70, 79],
+    "Szczecin (8)": [88, 80],
+    "Rezerwa (9)": [89, 92, 98]
   },
-  "categories": {
-    "EI": "2:00-99:2",
-    "MP/RP": "2:050-169:3",
-    "RO": "2:200-999:3",
-    "PW": "2:6;3:0-899:3",
-    "TM": "2:4;3:0-899:3",
-    "TK": "2:3;3:0-899:3",
-    "LT": "2:5;3:0-899:3"
+  "categoriesRules": {
+    "EI": [null, "00", "99"],
+    "MP": [null, "050", "169"],
+    "RO": [null, "200", "999"],
+    "RP": [null, "050", "169"],
+    "PW": ["6", "000", "899"],
+    "TK": ["3", "000", "899"],
+    "TM": ["4", "000", "899"],
+    "LT": ["5", "000", "899"]
+  },
+  "categoriesNextVersion": {
+    "EI": [null, "00", "99"],
+    "EC": [null, "001", "049"],
+    "EN": [null, "001", "049"],
+
+    "RO": [null, "200", "999"],
+    "RP": [null, "050", "169"],
+    "RM": [null, "200", "999"],
+    "RA": [null, "200", "999"],
+
+    "MO": [null, "200", "999"],
+    "MP": [null, "050", "169"],
+    "MM": [null, "001", "049"],
+    "MH": [null, "170", "199"],
+
+    "PW": ["6", "000", "899"],
+    "PX": ["6", "000", "899"],
+
+    "TC": ["0", "000", "899"],
+    "TG": ["1", "000", "899"],
+    "TR": ["1", "000", "899"],
+    "TD": ["2", "000", "899"],
+    "TK": ["3", "000", "899"],
+    "TN": ["3", "000", "899"],
+    "TM": ["4", "000", "899"],
+    "TS": ["5", "000", "899"],
+
+    "LT": ["5", "000", "899"],
+    "LP": ["6", "000", "899"],
+    "LS": ["9", "000", "899"],
+
+    "ZN": ["9", "000", "899"]
   }
 }

src/constants/speedLimits.json

@@ -1,66 +1,82 @@
 {
   "EU07": {
     "passenger": {
-      "650": 125
+      "650000": 125
     },
     "cargo": {
-      "2000": 70
-    }
+      "2000000": 70
+    },
+    "none": 110
+  },
+  "4E": {
+    "passenger": {
+      "650000": 125
+    },
+    "cargo": {
+      "2000000": 70
+    },
+    "none": 110
   },
   "EU07E": {
     "passenger": {
-      "650": 125
+      "650000": 125
     },
     "cargo": {
-      "2000": 70
-    }
+      "2000000": 70
+    },
+    "none": 110
   },
   "EP07": {
     "passenger": {
-      "650": 125
+      "650000": 125
     },
-    "cargo": null
+    "cargo": null,
+    "none": 110
   },
   "EP08": {
     "passenger": {
-      "650": 140
+      "650000": 140
     },
-    "cargo": null
+    "cargo": null,
+    "none": 110
   },
   "EP09": {
     "passenger": {
-      "650": 160
+      "650000": 160
     },
-    "cargo": null
+    "cargo": null,
+    "none": 160
   },
   "ET41": {
     "passenger": {
-      "700": 125
+      "700000": 125
     },
     "cargo": {
-      "4000": 70
-    }
+      "4000000": 70
+    },
+    "none": 110
   },
   "SM42": {
     "passenger": {
-      "95": 90,
-      "200": 80,
-      "300": 70,
-      "450": 60,
-      "750": 50,
-      "1130": 40,
-      "1720": 30,
-      "2400": 20
+      "95000": 90,
+      "200000": 80,
+      "300000": 70,
+      "450000": 60,
+      "750000": 50,
+      "1130000": 40,
+      "1720000": 30,
+      "2400000": 20
     },
     "cargo": {
-      "95": 90,
-      "200": 80,
-      "300": 70,
-      "450": 60,
-      "750": 50,
-      "1130": 40,
-      "1720": 30,
-      "2400": 20
-    }
+      "95000": 90,
+      "200000": 80,
+      "300000": 70,
+      "450000": 60,
+      "750000": 50,
+      "1130000": 40,
+      "1720000": 30,
+      "2400000": 20
+    },
+    "none": 90
   }
 }

src/enums/EVehicleUseType.ts

@@ -1,9 +0,0 @@
-export const enum EVehicleUseType {
-  LOCO_ELECTRICAL = "loco-e",
-  LOCO_DIESEL = "loco-s",
-  EMU = "loco-ezt",
-  DMU = "loco-szt",
-
-  CAR_PASSENGER = "car-passenger",
-  CAR_CARGO = "car-cargo",
-}

src/http.ts

@@ -1,10 +1,10 @@
-import axios from "axios";
+import axios from 'axios';
 
 const http = axios.create({
   baseURL:
-    import.meta.env.VITE_API_DEV === "1" && import.meta.env.DEV
-      ? "http://localhost:5500"
-      : "https://spythere.github.io/api",
+    import.meta.env.VITE_API_DEV === '1' && import.meta.env.DEV
+      ? 'http://localhost:3001'
+      : 'https://stacjownik.spythere.eu',
 });
 
 export default http;

src/i18n-setup.ts

@@ -1,10 +1,9 @@
-import localePL from "./locales/pl.json";
-import localeEN from "./locales/en.json";
-import { createI18n } from "vue-i18n";
-import http from "./http";
+import localePL from './locales/pl.json';
+import localeEN from './locales/en.json';
+import { createI18n } from 'vue-i18n';
 
 type LocaleMessageSchema = typeof localePL;
-type LocaleKey = "en" | "pl";
+type LocaleKey = 'en' | 'pl';
 
 const locales: { [key in LocaleKey]: LocaleMessageSchema } = {
   en: localeEN,
@@ -12,24 +11,14 @@ const locales: { [key in LocaleKey]: LocaleMessageSchema } = {
 };
 
 const locale =
-  window.localStorage.getItem("locale") ||
-  (/^pl\b/.test(navigator.language) ? "pl" : "en");
+  window.localStorage.getItem('locale') || (/^pl\b/.test(navigator.language) ? 'pl' : 'en');
 
-const i18n = createI18n<[LocaleMessageSchema], "en" | "pl">({
+const i18n = createI18n<[LocaleMessageSchema], 'en' | 'pl'>({
   locale,
-  fallbackLocale: "pl",
+  fallbackLocale: 'pl',
   legacy: false,
   globalInjection: true,
   messages: locales,
 });
 
-async function fetchBackendTranslations() {
-  const localeData = (await http.get(`td2/data/locales.json`)).data;
-
-  i18n.global.mergeLocaleMessage("pl", localeData.pl);
-  i18n.global.mergeLocaleMessage("en", localeData.en);
-}
-
-fetchBackendTranslations();
-
 export default i18n;

src/locales/en.json

@@ -15,12 +15,12 @@
     "cargo-title": "Cargo (only selected freight cars)",
     "no-cargo-available": "no cargo available",
     "cargo-empty": "empty",
-    "loco-e": "ELECTR.",
-    "loco-s": "DIESEL",
-    "loco-ezt": "EMU",
-    "loco-szt": "DMU",
-    "car-passenger": "PASSENGER",
-    "car-cargo": "FREIGHT",
+    "loco-electric": "ELECTR.",
+    "loco-diesel": "DIESEL",
+    "unit-electric": "EMU",
+    "unit-diesel": "DMU",
+    "wagon-passenger": "PASSENGER",
+    "wagon-freight": "FREIGHT",
     "action-add": "ADD NEW",
     "action-swap": "SWAP WITH",
     "real-stock": "POLISH TRAIN COMPOSITIONS"
@@ -30,12 +30,13 @@
     "loading": "IMAGE LOADING...",
     "desc": "Choose a railway vehicle above to see its preview",
     "sponsor-only": "* SPONSORS ONLY UNTIL {0}",
-    "loco-e": "ELECTRIC LOCO",
-    "loco-s": "DIESEL LOCO",
-    "loco-ezt": "ELECTRIC M.U.",
-    "loco-szt": "DIESEL M.U.",
-    "car-passenger": "PASSENGER CARRIAGE",
-    "car-cargo": "FREIGHT CARRIAGE",
+    "team-only": "* TD2 TEAM ONLY",
+    "loco-electric": "ELECTRIC LOCO",
+    "loco-diesel": "DIESEL LOCO",
+    "unit-electric": "ELECTRIC M.U.",
+    "unit-diesel": "DIESEL M.U.",
+    "wagon-passenger": "PASSENGER CARRIAGE",
+    "wagon-freight": "FREIGHT CARRIAGE",
     "cabin": "Cabin type:",
     "construction": "Construction type:"
   },
@@ -47,6 +48,7 @@
   },
   "stocklist": {
     "title": "STOCK EDITOR",
+    "disclaimer": "Theorethical value based on vehicles maximum speed in the current composition. It may be inaccurate in relation to the correct operational speed in certain configurations.",
     "alert-copied": "The rolling stock has been copied to your clipboard!",
     "alert-empty": "Lista pojazdów jest pusta!",
     "prompt-file": "Name a file and download it to the Presets folder (Documents/TTSK/TrainDriver2):",
@@ -67,11 +69,13 @@
     "coldstart-info": "Locomotive cold start",
     "doublemanning-info": "Double manning",
     "list-empty": "Stock list is empty!",
-    "warning-not-suitable": "EP07 & EP08 type locomotives are designed for passenger traffic only!",
+
+    "warning-not-suitable": "EP series locomotives are designed for passenger traffic only!",
     "warning-passenger-too-long": "Maximum length of a passenger train may not be greater than 350m!",
     "warning-freight-too-long": "Maximum length of a freight train may not be greater than 650m!",
     "warning-too-many-locos": "This train has too many traction units!",
     "warning-too-heavy": "This train is too heavy! Check {href}",
+    "warning-team-only-vehicle": "There's at least one vehicle available only for TD2 team members in your stock composition! ({0})",
     "acceptable-mass-docs": "acceptable rolling stock masses (PL)"
   },
   "stockgen": {
@@ -92,33 +96,68 @@
   },
   "numgen": {
     "title": "TRAIN NUMBER GENERATOR",
+    "subtitle": "Generates real train number based on Polish railway instruction Ir-11",
     "alert": "The number has been copied to your clipboard!",
     "start-region": "Beginning construction region",
     "end-region": "Terminating construction region",
     "train-category": "Train category",
     "number-info": "Generated train number:",
     "warning": "Choose category and (optionally) construction regions",
-    "td2-wiki": "> Polish rules of train numbering (TD2 wiki)",
-    "td2-wiki-link": "https://wiki.td2.info.pl/index.php?title=Zasady_numeracji_poci%C4%85g%C3%B3w/en",
+    "td2-wiki": "> Polish rules of train numbering (forum thread)",
+    "td2-wiki-link": "https://td2.info.pl/english-boards/new-train-categories-in-the-simulator/",
     "action-random-region": "DRAW REGIONS",
-    "action-random-number": "DRAW A NUMBER",
-    "categories": {
-      "EI": "domestic express (EI)",
-      "MP/RP": "(inter)voivodeship bullet (MP/RP)",
-      "RO": "regional passenger (RO)",
-      "PW": "empty passenger (PW)",
-      "TM": "mass transport freight (TM)",
-      "TK": "non-mass transport freight (TK)",
-      "LT": "locomotive alone (LT)"
-    },
+    "action-random-number": "DRAW LAST DIGITS",
+    "action-random-category": "DRAW A CATEGORY",
+
     "rules": {
-      "EI": "4 digits - ends within the range of 00-99",
-      "MP/RP": "5 digits - ends within the range of 050-169",
-      "RO": "5 digits - ends within the range of 200-999",
-      "PW": "6 digits - '6' on the 3rd place; ends within the range of 000-899",
-      "TM": "6 digits - '4' on the 3rd place; ends within the range of 000-899",
-      "TK": "6 digits - '3' on the 3rd place; ends within the range of 000-899",
-      "LT": "6 digits - '5' on the 3rd place; ends within the range of 000-899"
+      "first-digit": "First digit:",
+      "second-digit": "Second digit:",
+      "third-digit": "Third digit:",
+      "two-first-digits": "Two first digits:",
+      "two-last-digits": "Two last digits:",
+      "three-last-digits": "Three last digits:",
+      "from-pool": "from pool of",
+      "for-category": "for category",
+      "for-region": "for region",
+      "for-region-begin": "for the beginning construction region",
+      "for-region-end": "for the terminating construction region",
+      "from-range": "from range of"
+    },
+
+    "categories": {
+      "EI": "EI - domestic express",
+      "EC": "EC - international express",
+      "EN": "EN - domestic night express",
+
+      "MP": "MP - intervoivodeship bullet",
+      "RP": "RP - voivodeship bullet",
+      "MO": "MO - intervoivodeship regio",
+      "RO": "RO - voivodeship regio",
+
+      "MM": "MM - international bullet",
+      "MH": "MH - intervoivodeship bullet (night / hotel)",
+      "RM": "RM - international voivodeship regio",
+      "RA": "RA - voivodeship regio (urban)",
+
+      "PW": "PW - empty passenger",
+      "PX": "PX - empty passenger test drive",
+
+      "TC": "TC - international freight (intermodal)",
+      "TG": "TG - international freight (cargo)",
+      "TR": "TR - international freight (no cargo)",
+      "TD": "TD - domestic freight (intermodal)",
+      "TM": "TM - domestic freight (cargo)",
+      "TN": "TN - domestic freight (no cargo)",
+      "TK": "TK - freight (stations & sidings service)",
+      "TS": "TS - empty freight test drive",
+
+      "LT": "LT - locomotive only",
+      "LT-new": "LT - freight locomotive only",
+
+      "LP": "LP - passenger locomotive only",
+      "LS": "LS - shunting locomotive",
+
+      "ZN": "ZN - inspection / diagnostic"
     }
   },
   "wiki": {
@@ -133,16 +172,16 @@
       "constructionType": "Construction",
       "coldStart": "Cold start",
       "length": "Length",
-      "mass": "Mass",
+      "weight": "Mass",
       "maxSpeed": "Speed",
       "cargoCount": "Cargo count"
     },
-    "loco-ezt": "EMU",
-    "loco-szt": "DMU",
-    "loco-s": "Diesel locomotive",
-    "loco-e": "Electric locomotive",
-    "car-passenger": "Passenger carriage",
-    "car-cargo": "Frieght carriage"
+    "unit-electric": "EMU",
+    "unit-diesel": "DMU",
+    "loco-diesel": "Diesel locomotive",
+    "loco-electric": "Electric locomotive",
+    "wagon-passenger": "Passenger carriage",
+    "wagon-freight": "Frieght carriage"
   },
   "realstock": {
     "title": "POLISH TRAIN COMPOSITIONS by",

src/locales/pl.json

@@ -9,18 +9,18 @@
     "version-check": "Strona jest kompletna dla wersji {version} symulatora TD2"
   },
   "inputs": {
-    "title": "WYBIERZ POJAZD SZYNOWY",
+    "title": "WYBIERZ POJAZD",
     "input-vehicle": "Wybierz pojazd trakcyjny",
     "input-carwagon": "Wybierz wagon",
     "cargo-title": "Ładunek (tylko wybrane towarowe)",
     "no-cargo-available": "brak dostępnych ładunków",
     "cargo-empty": "próżny",
-    "loco-e": "ELEKTR.",
-    "loco-s": "SPAL.",
-    "loco-ezt": "EZT",
-    "loco-szt": "SZT",
-    "car-passenger": "PASAŻERSKIE",
-    "car-cargo": "TOWAROWE",
+    "loco-electric": "ELEKTR.",
+    "loco-diesel": "SPAL.",
+    "unit-electric": "EZT",
+    "unit-diesel": "SZT",
+    "wagon-passenger": "PASAŻERSKIE",
+    "wagon-freight": "TOWAROWE",
     "action-add": "DODAJ NOWY",
     "action-swap": "ZAMIEŃ ZA",
     "real-stock": "REALNE ZESTAWIENIA"
@@ -30,12 +30,13 @@
     "loading": "ŁADOWANIE OBRAZU...",
     "desc": "Wybierz pojazd lub wagon, aby zobaczyć jego podgląd powyżej",
     "sponsor-only": "* TYLKO DLA SPONSORÓW DO {0}",
-    "loco-e": "ELEKTROWÓZ",
-    "loco-s": "SPALINOWÓZ",
-    "loco-ezt": "EZT",
-    "loco-szt": "SZT",
-    "car-passenger": "WAGON PASAŻERSKI",
-    "car-cargo": "WAGON TOWAROWY",
+    "team-only": "* TYLKO DLA ZESPOŁU TD2",
+    "loco-electric": "ELEKTROWÓZ",
+    "loco-diesel": "SPALINOWÓZ",
+    "unit-electric": "EZT",
+    "unit-diesel": "SZT",
+    "wagon-passenger": "WAGON PASAŻERSKI",
+    "wagon-freight": "WAGON TOWAROWY",
     "cabin": "Typ kabiny:",
     "construction": "Typ konstrukcji:"
   },
@@ -47,6 +48,7 @@
   },
   "stocklist": {
     "title": "EDYTOR SKŁADU",
+    "disclaimer": "Wartość poglądowa wzorowana na prędkościach maksymalnych poszczególnych pojazdów w zestawieniu. Może nie zgadzać się z prawdziwymi prędkościami eksploatacyjnymi w konkretnych konfiguracjach.",
     "alert-copied": "Skład został skopiowany do twojego schowka!",
     "alert-empty": "Lista pojazdów jest pusta!",
     "prompt-file": "Nazwij plik, a następnie pobierz do folderu Presets (Dokumenty/TTSK/TrainDriver2):",
@@ -67,11 +69,13 @@
     "coldstart-info": "Zimny start",
     "doublemanning-info": "Podwójna obsada",
     "list-empty": "Lista pojazdów jest pusta!",
-    "warning-not-suitable": "Lokomotywy EP07 i EP08 są przeznaczone jedynie do ruchu pasażerskiego!",
+
+    "warning-not-suitable": "Lokomotywy serii EP są przeznaczone jedynie do ruchu pasażerskiego!",
     "warning-passenger-too-long": "Maksymalna długość składów pasażerskich nie może przekraczać 350m!",
     "warning-freight-too-long": "Maksymalna długość składów innych niż pasażerskie nie może przekraczać 650m!",
     "warning-too-many-locos": "Ten skład posiada za dużo pojazdów trakcyjnych!",
     "warning-too-heavy": "Ten skład jest za ciężki! Sprawdź {href}",
+    "warning-team-only-vehicle": "W zestawieniu znajduje się co najmniej jeden pojazd dostępny tylko dla członków zespołu TD2! ({0})",
     "acceptable-mass-docs": "dopuszczalne masy składów"
   },
   "stockgen": {
@@ -92,33 +96,68 @@
   },
   "numgen": {
     "title": "GENERATOR NUMERU POCIĄGU",
+    "subtitle": "Generuje realny numer pociągu na podstawie instrukcji Ir-11",
     "alert": "Numer został skopiowany do twojego schowka!",
     "start-region": "Początkowy obszar konstrukcyjny",
     "end-region": "Końcowy obszar konstrukcyjny",
     "train-category": "Kategoria pociągu",
     "number-info": "Wygenerowany numer pociągu:",
     "warning": "Wybierz kategorię oraz (opcjonalnie) obszary konstrukcyjne",
-    "td2-wiki": "> Szczegółowe zasady numeracji (wikipedia TD2)",
-    "td2-wiki-link": "https://wiki.td2.info.pl/index.php?title=Zasady_numeracji_poci%C4%85g%C3%B3w",
+    "td2-wiki": "> Szczegółowe zasady numeracji (wątek forum)",
+    "td2-wiki-link": "https://td2.info.pl/ogloszenia/nowe-kategorie-pociagow-w-symulatorze/",
     "action-random-region": "LOSUJ OBSZARY",
-    "action-random-number": "LOSUJ NUMER",
-    "categories": {
-      "EI": "ekspres krajowy (EI)",
-      "MP/RP": "(między)wojewódzki pośpieszny (MP/RP)",
-      "RO": "wojewódzki osobowy (RO)",
-      "PW": "próżny \"służbowy\" (PW)",
-      "TM": "towarowy do przewozów masowych (TM)",
-      "TK": "towarowy do obsługi stacji (TK)",
-      "LT": "lokomotywa luzem (LT)"
-    },
+    "action-random-number": "LOSUJ KOŃCÓWKĘ",
+    "action-random-category": "LOSUJ KATEGORIĘ",
+
     "rules": {
-      "EI": "4 cyfry - końcówka z przedziału 00-99",
-      "MP/RP": "5 cyfr - końcówka z przedziału 050-169",
-      "RO": "5 cyfr - końcówka z przedziału 200-999",
-      "PW": "6 cyfr - '6' na 3. miejscu; końcówka z przedziału 000-899",
-      "TM": "6 cyfr - '4' na 3. miejscu; końcówka z przedziału 000-899",
-      "TK": "6 cyfr - '3' na 3. miejscu; końcówka z przedziału 000-899",
-      "LT": "6 cyfr - '5' na 3. miejscu; końcówka z przedziału 000-899"
+      "first-digit": "Pierwsza cyfra:",
+      "second-digit": "Druga cyfra:",
+      "third-digit": "Trzecia cyfra:",
+      "two-first-digits": "Dwie pierwsze cyfry:",
+      "two-last-digits": "Dwie ostatnie cyfry:",
+      "three-last-digits": "Trzy ostatnie cyfry:",
+      "from-pool": "z puli",
+      "for-category": "dla kategorii",
+      "for-region": "dla obszaru",
+      "for-region-begin": "dla początkowego obszaru konstrukcyjnego",
+      "for-region-end": "dla końcowego obszaru konstrukcyjnego",
+      "from-range": "z przedziału"
+    },
+
+    "categories": {
+      "EI": "EI - ekspres krajowy",
+      "EC": "EC - ekspres międzynarodowy",
+      "EN": "EN - ekspres krajowy nocny",
+
+      "MP": "MP - międzywojewódzki pośpieszny",
+      "RP": "RP - wojewódzki pośpieszny",
+      "MO": "MO - międzywojewódzki osobowy",
+      "RO": "RO - wojewódzki osobowy",
+
+      "MM": "MM - międzynarodowy pośpieszny",
+      "MH": "MH - międzywoj. pośpieszny nocny / hotelowy",
+      "RM": "RM - wojewódzki osobowy międzynarodowy",
+      "RA": "RA - wojewódzki osobowy algomeracyjny",
+
+      "PW": "PW - pasażerski próżny (\"służbowy\")",
+      "PX": "PX - pasażerski próżny próbny",
+
+      "TC": "TC - towarowy międzynarodowy intermodalny",
+      "TG": "TG - towarowy międzynarodowy masowy",
+      "TR": "TR - towarowy międzynarodowy niemasowy",
+      "TD": "TD - towarowy krajowy intermodalny",
+      "TM": "TM - towarowy krajowy masowy",
+      "TN": "TN - towarowy krajowy niemasowy",
+      "TK": "TK - towarowy do obsługi stacji i bocznic",
+      "TS": "TS - towarowy próżny próbny",
+
+      "LT": "LT - lokomotywa luzem",
+      "LT-new": "LT - lokomotywa towarowa luzem",
+
+      "LP": "LP - lokomotywa pasażerska luzem",
+      "LS": "LS - lokomotywa manewrowa",
+
+      "ZN": "ZN - inspekcyjny / diagnostyczny"
     }
   },
   "wiki": {
@@ -133,16 +172,16 @@
       "constructionType": "Konstrukcja",
       "coldStart": "Zimny start",
       "length": "Długość",
-      "mass": "Masa",
+      "weight": "Masa",
       "maxSpeed": "Prędkość",
       "cargoCount": "Ładunki"
     },
-    "loco-ezt": "EZT",
-    "loco-szt": "SZT",
-    "loco-s": "Spalinowóz",
-    "loco-e": "Elektrowóz",
-    "car-passenger": "Wagon pasażerski",
-    "car-cargo": "Wagon towarowy"
+    "loco-diesel": "Spalinowóz",
+    "loco-electric": "Elektrowóz",
+    "unit-electric": "EZT",
+    "unit-diesel": "SZT",
+    "wagon-passenger": "Wagon pasażerski",
+    "wagon-freight": "Wagon towarowy"
   },
   "realstock": {
     "title": "ZESTAWIENIA REALNE by",

src/mixins/imageMixin.ts

@@ -1,17 +1,13 @@
-import { defineComponent } from "vue";
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   methods: {
-    getIconURL(name: string, ext = "svg"): string {
+    getIconURL(name: string, ext = 'svg'): string {
       return `/images/icon-${name}.${ext}`;
     },
 
-    getThumbnailURL(vehicleType: string, size: "small" | "large") {
-      return `${
-        import.meta.env.VITE_API_DEV === "1"
-          ? "http://localhost:5500"
-          : "https://spythere.github.io/api"
-      }/td2/images/${vehicleType}--${size == "small" ? 300 : 800}px.jpg`;
+    getThumbnailURL(vehicleType: string, size: 'small' | 'large') {
+      return `https://static.spythere.eu/images/${vehicleType}--${size == 'small' ? 300 : 800}px.jpg`;
     },
   },
 });

src/mixins/stockMixin.ts

@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue';
 import { useStore } from '../store';
-import { ICargo, ICarWagon, ILocomotive, IStock, Vehicle } from '../types';
-import { isLocomotive } from '../utils/vehicleUtils';
+import { ICarWagon, ILocomotive, IStock, ICargo, IVehicle } from '../types';
+import { isTractionUnit } from '../utils/vehicleUtils';
 
 export default defineComponent({
   setup() {
@@ -15,27 +15,25 @@ export default defineComponent({
       return `${Math.random().toString(36).slice(5)}`;
     },
 
-    getStockObject(vehicle: Vehicle, cargo?: ICargo | null, count = 1): IStock {
-      const isLoco = isLocomotive(vehicle);
+    getStockObject(vehicle: IVehicle, cargo?: ICargo | null, count = 1): IStock {
+      const isLoco = isTractionUnit(vehicle);
 
       return {
         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,
         count,
-        imgSrc: vehicle.imageSrc,
-        useType: isLoco ? vehicle.power : vehicle.useType,
-        isSponsorsOnly: vehicle.isSponsorsOnly,
+        group: isLoco ? vehicle.group : vehicle.group,
         constructionType: vehicle.constructionType,
-        sponsorsOnlyTimestamp: vehicle.sponsorsOnlyTimestamp,
+        restrictions: vehicle.restrictions,
       };
     },
 
-    addVehicle(vehicle: Vehicle | null, cargo?: ICargo | null) {
+    addVehicle(vehicle: IVehicle | null, cargo?: ICargo | null) {
       if (!vehicle) return;
 
       const stock = this.getStockObject(vehicle, cargo);
@@ -47,7 +45,8 @@ export default defineComponent({
     addLocomotive(loco: ILocomotive) {
       const stockObj = this.getStockObject(loco);
 
-      if (this.store.stockList.length > 0 && !this.store.stockList[0].isLoco) this.store.stockList.unshift(stockObj);
+      if (this.store.stockList.length > 0 && !this.store.stockList[0].isLoco)
+        this.store.stockList.unshift(stockObj);
       else this.store.stockList.push(stockObj);
     },
 
@@ -70,7 +69,7 @@ export default defineComponent({
       this.store.swapVehicles = false;
 
       stockArray.forEach((type, i) => {
-        let vehicle: Vehicle | null = null;
+        let vehicle: IVehicle | null = null;
         let vehicleCargo: ICargo | null = null;
 
         const isLoco = /^(EU|EP|ET|SM|EN|2EN|SN)/.test(type);
@@ -88,10 +87,10 @@ 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);
+        if (!vehicle) console.warn('Brak pojazdu / rodzaj pojazdu źle wczytany:', type);
 
         this.addVehicle(vehicle, vehicleCargo);
       });

src/mixins/stockPreviewMixin.ts

@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue';
 import { useStore } from '../store';
-import { ICarWagon, ILocomotive, IStock, Vehicle } from '../types';
-import { isLocomotive } from '../utils/vehicleUtils';
+import { ICarWagon, ILocomotive, IStock, IVehicle, LocoGroupType, WagonGroupType } from '../types';
+import { isTractionUnit } from '../utils/vehicleUtils';
 
 export default defineComponent({
   setup() {
@@ -14,40 +14,40 @@ export default defineComponent({
 
   methods: {
     previewStock(stock: IStock) {
-      if (this.store.chosenVehicle?.imageSrc != stock.imgSrc) this.store.imageLoading = true;
+      // if (this.store.chosenVehicle?.imageSrc != stock.imgSrc) this.store.imageLoading = true;
 
       if (stock.isLoco) {
         const chosenLoco = this.store.locoDataList.find((v) => v.type == stock.type) || null;
         this.store.chosenVehicle = chosenLoco;
         this.store.chosenLoco = chosenLoco;
         this.store.chosenCargo = null;
-        this.store.chosenLocoPower = stock.useType;
+        this.store.chosenLocoGroup = stock.group as LocoGroupType;
       } else {
         const chosenCar = this.store.carDataList.find((v) => v.type == stock.type) || null;
         this.store.chosenVehicle = chosenCar;
         this.store.chosenCar = chosenCar;
 
         this.store.chosenCargo = stock.cargo || null;
-        this.store.chosenCarUseType = stock.useType;
+        this.store.chosenCarGroup = stock.group as WagonGroupType;
       }
     },
 
     previewLocomotive(loco: ILocomotive) {
       this.store.chosenLoco = loco;
       this.store.chosenVehicle = loco;
-      this.store.chosenLocoPower = loco.power;
+      this.store.chosenLocoGroup = loco.group;
     },
 
     previewCarWagon(carWagon: ICarWagon) {
       this.store.chosenCar = carWagon;
-      this.store.chosenCarUseType = carWagon.useType;
+      this.store.chosenCarGroup = carWagon.group;
       this.store.chosenVehicle = carWagon;
 
       this.store.chosenCargo = null;
     },
 
-    previewVehicle(vehicle: Vehicle) {
-      if (isLocomotive(vehicle)) this.previewLocomotive(vehicle);
+    previewVehicle(vehicle: IVehicle) {
+      if (isTractionUnit(vehicle)) this.previewLocomotive(vehicle);
       else this.previewCarWagon(vehicle);
     },
 

src/mixins/warningsMixin.ts

@@ -1,47 +0,0 @@
-import { defineComponent } from "vue";
-import { useStore } from "../store";
-
-export default defineComponent({
-  setup() {
-    const store = useStore();
-
-    return {
-      store,
-    };
-  },
-  computed: {
-    trainTooLong() {
-      return (
-        (this.store.totalLength > 350 && this.store.isTrainPassenger) ||
-        (this.store.totalLength > 650 && !this.store.isTrainPassenger)
-      );
-    },
-
-    trainTooHeavy() {
-      return (
-        this.store.acceptableMass &&
-        this.store.totalMass > this.store.acceptableMass
-      );
-    },
-
-    locoNotSuitable() {
-      return (
-        !this.store.isTrainPassenger &&
-        this.store.stockList.length > 1 &&
-        !this.store.stockList.every((stock) => stock.isLoco) &&
-        this.store.stockList.some(
-          (stock) => stock.isLoco && stock.type.startsWith("EP"),
-        )
-      );
-    },
-
-    tooManyLocomotives() {
-      return (
-        this.store.stockList.reduce((acc, stock) => {
-          if (stock.isLoco) acc += stock.count;
-          return acc;
-        }, 0) > 2
-      );
-    },
-  },
-});

src/store.ts

@@ -1,67 +1,100 @@
-import { IStockData, IStore } from './types';
+import {
+  IVehiclesData,
+  ICarWagon,
+  ILocomotive,
+  ICargo,
+  IVehicle,
+  IStock,
+  IRealComposition,
+  LocoGroupType,
+  WagonGroupType,
+} from './types';
 import { defineStore } from 'pinia';
 import {
-  acceptableMass,
+  acceptableWeight,
   carDataList,
-  chosenRealStock,
   isTrainPassenger,
   locoDataList,
   maxStockSpeed,
   totalLength,
-  totalMass,
+  totalWeight,
 } from './utils/vehicleUtils';
+
+import i18n from './i18n-setup';
 import http from './http';
 
 export const useStore = defineStore({
   id: 'store',
-  state: () =>
-    ({
-      chosenCar: null,
-      chosenLoco: null,
-      chosenCargo: null,
-      chosenVehicle: null,
+  state: () => ({
+    chosenCar: null as ICarWagon | null,
+    chosenLoco: null as ILocomotive | null,
+    chosenCargo: null as ICargo | null,
+    chosenVehicle: null as IVehicle | null,
 
-      isColdStart: false,
-      isDoubleManned: false,
+    isColdStart: false,
+    isDoubleManned: false,
 
-      showSupporter: false,
-      imageLoading: false,
+    imageLoading: false,
 
-      chosenLocoPower: 'loco-e',
-      chosenCarUseType: 'car-passenger',
+    chosenLocoGroup: 'loco-electric' as LocoGroupType,
+    chosenCarGroup: 'wagon-passenger' as WagonGroupType,
 
-      stockList: [],
-      cargoOptions: [],
+    stockList: [] as IStock[],
+    cargoOptions: [] as any[][],
 
-      readyStockList: [],
+    swapVehicles: false,
 
-      swapVehicles: false,
+    chosenStockListIndex: -1,
 
-      chosenStockListIndex: -1,
-      chosenRealStockName: undefined,
+    vehiclePreviewSrc: '',
 
-      vehiclePreviewSrc: '',
+    stockSectionMode: 'stock-list',
 
-      stockSectionMode: 'stock-list',
+    isRandomizerCardOpen: false,
+    isRealStockListCardOpen: false,
 
-      isRandomizerCardOpen: false,
-      isRealStockListCardOpen: false,
+    vehiclesData: undefined as IVehiclesData | undefined,
 
-      stockData: undefined,
-
-      lastFocusedElement: null,
-    }) as IStore,
+    lastFocusedElement: null as HTMLElement | null,
+  }),
 
   getters: {
-    locoDataList: (state) => locoDataList(state),
-    carDataList: (state) => carDataList(state),
-    vehicleDataList: (state) => [...locoDataList(state), ...carDataList(state)],
-    totalMass: (state) => totalMass(state),
-    totalLength: (state) => totalLength(state),
-    maxStockSpeed: (state) => maxStockSpeed(state),
-    isTrainPassenger: (state) => isTrainPassenger(state),
-    chosenRealStock: (state) => chosenRealStock(state),
-    acceptableMass: (state) => acceptableMass(state),
+    locoDataList: (state) => locoDataList(state.vehiclesData),
+    carDataList: (state) => carDataList(state.vehiclesData),
+    vehicleDataList: (state) => [
+      ...locoDataList(state.vehiclesData),
+      ...carDataList(state.vehiclesData),
+    ],
+    totalWeight: (state) => totalWeight(state.stockList),
+    totalLength: (state) => totalLength(state.stockList),
+    maxStockSpeed: (state) => maxStockSpeed(state.stockList),
+    isTrainPassenger: (state) => isTrainPassenger(state.stockList),
+    acceptableWeight: (state) => acceptableWeight(state.stockList),
+
+    realCompositionList: (state) => {
+      if (!state.vehiclesData) return [];
+
+      return Object.keys(state.vehiclesData.realCompositions).reduce<IRealComposition[]>(
+        (acc, key) => {
+          const [type, number, ...name] = key.split(' ');
+
+          const obj = {
+            number: number.replace(/_/g, '/'),
+            name: name.join(' '),
+            stockString: state.vehiclesData!.realCompositions[key],
+            type,
+          };
+
+          acc.push({
+            stockId: `${obj.type} ${obj.number} ${obj.name}`,
+            ...obj,
+          });
+
+          return acc;
+        },
+        []
+      );
+    },
 
     stockSupportsColdStart: (state) => {
       if (state.stockList.length == 0) return false;
@@ -69,7 +102,10 @@ export const useStore = defineStore({
 
       const headingLoco = state.stockList[0];
 
-      return state.stockData?.props.find((stock) => stock.type == headingLoco.constructionType)?.coldStart ?? false;
+      return (
+        state.vehiclesData?.vehicleProps.find((stock) => stock.type == headingLoco.constructionType)
+          ?.coldStart ?? false
+      );
     },
 
     stockSupportsDoubleManning: (state) => {
@@ -78,14 +114,34 @@ export const useStore = defineStore({
 
       const headingLoco = state.stockList[0];
 
-      return state.stockData?.props.find((stock) => stock.type == headingLoco.constructionType)?.doubleManned ?? false;
+      return (
+        state.vehiclesData?.vehicleProps.find((stock) => stock.type == headingLoco.constructionType)
+          ?.doubleManned ?? false
+      );
     },
   },
 
   actions: {
-    async fetchStockInfoData() {
-      const stockData = (await http.get<IStockData>('td2/data/stockInfo.json')).data;
-      this.stockData = stockData;
+    async fetchVehiclesAPI() {
+      try {
+        const vehiclesData = (await http.get<IVehiclesData>('/vehicles')).data;
+        this.vehiclesData = vehiclesData;
+
+      } catch (error) {
+        console.error(error);
+      }
+    },
+
+    async setupAPIData() {
+      await this.fetchVehiclesAPI();
+      this.mergeBackendTranslations();
+    },
+
+    async mergeBackendTranslations() {
+      if (!this.vehiclesData) return;
+
+      i18n.global.mergeLocaleMessage('pl', this.vehiclesData.vehicleLocales.pl);
+      i18n.global.mergeLocaleMessage('en', this.vehiclesData.vehicleLocales.en);
     },
 
     handleRouting() {

src/styles/global.scss

@@ -3,9 +3,12 @@ $breakpointSm: 550px;
 
 $bgColor: #2b3552;
 $textColor: #fff;
-$secondaryColor: #222;
+$secondaryColor: #1b1b1b;
 $accentColor: #e4c428;
 
+$sponsorColor: salmon;
+$teamColor: gold;
+
 @font-face {
   font-family: 'Lato';
   src:
@@ -114,11 +117,28 @@ button {
   }
 }
 
+[data-tooltip]:hover::after,
+[data-tooltip]:focus::after {
+  position: absolute;
+  transform: translateX(10px);
+
+  content: attr(data-tooltip);
+  color: white;
+  background: black;
+  padding: 0.5em;
+  max-width: 300px;
+  z-index: 100;
+}
+
+[data-tooltip] {
+  cursor: pointer;
+}
+
 .btn {
   padding: 0.4em 0.75em;
 
   outline: none;
-  background-color: #222;
+  background-color: $secondaryColor;
   border-radius: 8px;
   font-weight: bold;
 
@@ -227,6 +247,13 @@ ul {
   }
 }
 
+hr {
+  height: 3px;
+  background-color: white;
+  outline: none;
+  margin: 0;
+}
+
 .g-card {
   position: fixed;
   top: 1em;

src/styles/tab.scss

@@ -1,4 +1,4 @@
-@import "./global.scss";
+@import './global.scss';
 
 .tab {
   height: 100%;
@@ -8,12 +8,18 @@
     padding: 0.5em 1em;
 
     background-color: $secondaryColor;
+    text-align: center;
 
     h2 {
       margin: 0;
       color: white;
       font-size: 1.35em;
-      text-align: center;
+    }
+
+    h3 {
+      margin: 0.5em 0 0 0;
+      font-size: 1.15em;
+      color: #aaa;
     }
 
     button {
@@ -58,13 +64,6 @@
   }
 }
 
-hr {
-  height: 3px;
-  background-color: white;
-  outline: none;
-  margin: 0;
-}
-
 @media only screen and (max-width: 470px) {
   .tab_attributes {
     label {

src/types.ts

@@ -1,86 +1,61 @@
-export type Vehicle = ILocomotive | ICarWagon;
+export type IVehicle = ILocomotive | ICarWagon;
 export type StockSectionMode = 'STOCK_LIST' | 'STOCK_GENERATOR';
 
-export interface IStore {
-  chosenCar: ICarWagon | null;
-  chosenLoco: ILocomotive | null;
-  chosenCargo: ICargo | null;
-  chosenVehicle: Vehicle | null;
+export type LocoGroupType = 'loco-electric' | 'loco-diesel' | 'unit-electric' | 'unit-diesel';
+export type WagonGroupType = 'wagon-passenger' | 'wagon-freight';
+export type VehicleGroupType = LocoGroupType | WagonGroupType;
+export type RestrictionType = 'sponsorOnly' | 'teamOnly';
 
-  isColdStart: boolean;
-  isDoubleManned: boolean;
-
-  showSupporter: boolean;
-  imageLoading: boolean;
-
-  chosenLocoPower: string;
-  chosenCarUseType: string;
-
-  stockList: IStock[];
-  readyStockList: IReadyStockItem[];
-  cargoOptions: any[][];
-
-  chosenStockListIndex: number;
-  chosenRealStockName?: string;
-
-  swapVehicles: boolean;
-  vehiclePreviewSrc: string;
-
-  isRandomizerCardOpen: boolean;
-  isRealStockListCardOpen: boolean;
-
-  stockSectionMode: 'stock-list' | 'stock-generator' | 'number-generator' | 'wiki-list';
-  stockData?: IStockData;
-
-  lastFocusedElement: HTMLElement | null;
-}
-
-export type TLocoGroup = 'loco-e' | 'loco-s' | 'loco-ezt' | 'loco-szt';
-export type TCarWagonGroup = 'car-passenger' | 'car-cargo';
-
-export interface IStockProps {
+export interface IVehicleProps {
   type: string;
+  speed: number;
   length: number;
-  mass: number;
-  cargo?: string | null;
+  weight: number;
+  cargoTypes?: ICargo[];
   coldStart?: boolean;
   doubleManned?: boolean;
 }
 
-export interface IStockData {
-  version: string;
+export interface ICargo {
+  id: string;
+  weight: number;
+}
+
+export interface IVehiclesData {
+  simulatorVersion: string;
 
   generator: {
-    passenger: any;
     cargo: {
       [key: string]: string[];
     };
   };
 
-  info: {
-    'car-cargo': [string, string, boolean, number | null, string][];
-    'car-passenger': [string, string, boolean, number | null, string][];
-    'loco-e': [string, string, string, string, number | null][];
-    'loco-s': [string, string, string, string, number | null][];
-    'loco-szt': [string, string, string, string, number | null][];
-    'loco-ezt': [string, string, string, string, number | null][];
+  vehicleList: any[][];
+
+  vehicleProps: IVehicleProps[];
+
+  vehicleLocales: {
+    pl: {
+      cargo: Record<string, string>;
+      usage: Record<string, string>;
+    };
+    en: {
+      cargo: Record<string, string>;
+      usage: Record<string, string>;
+    };
   };
 
-  props: IStockProps[];
+  realCompositions: Record<string, string>;
 }
 
 export interface ILocomotive {
   type: string;
-  power: TLocoGroup;
-  group: TLocoGroup;
+  group: LocoGroupType;
   constructionType: string;
   cabinType: string;
   maxSpeed: number;
-  isSponsorsOnly: boolean;
-  sponsorsOnlyTimestamp: number;
-  imageSrc: string;
-
-  mass: number;
+  restrictions: Record<RestrictionType, any>;
+  weight: number;
   length: number;
   coldStart: boolean;
   doubleManned: boolean;
@@ -88,42 +63,31 @@ export interface ILocomotive {
 
 export interface ICarWagon {
   type: string;
-  useType: TCarWagonGroup;
-  group: TCarWagonGroup;
+  group: WagonGroupType;
   constructionType: string;
   loadable: boolean;
-  isSponsorsOnly: boolean;
-  sponsorsOnlyTimestamp: number;
+  restrictions: Record<RestrictionType, any>;
   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 {
   id: string;
   type: string;
-  useType: string;
+  group: LocoGroupType | WagonGroupType;
   constructionType: string;
   length: number;
-  mass: number;
+  weight: number;
   maxSpeed: number;
-  cargo?: { id: string; totalMass: number };
+  cargo?: ICargo;
   isLoco: boolean;
-  isSponsorsOnly: boolean;
-  sponsorsOnlyTimestamp: number;
+  restrictions: Record<RestrictionType, any>;
   count: number;
-  imgSrc?: string;
 }
 
-export interface IReadyStockItem {
+export interface IRealComposition {
   stockId: string;
   stockString: string;
   type: string;

src/utils/vehicleLimitsUtils.ts

@@ -4,17 +4,24 @@ 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) {
-  console.log(speedLimits[locoType]);
-
+export function calculateSpeedLimit(
+  locoType: SpeedLimitLocoType,
+  stockTotalWeight: number,
+  stockCount: number,
+  isTrainPassenger: boolean
+) {
   if (speedLimits[locoType] === undefined) return 0;
 
-  const speedTable = speedLimits[locoType][isTrainPassenger ? 'passenger' : 'cargo'];
+  if (stockCount == 1) return speedLimits[locoType]['none'];
+
+  const stockType = isTrainPassenger ? 'passenger' : 'cargo';
+  const speedTable = speedLimits[locoType][stockType];
 
   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;
 }

src/utils/vehicleUtils.ts

@@ -1,103 +1,108 @@
-import { EVehicleUseType } from '../enums/EVehicleUseType';
-import { ICarWagon, ILocomotive, IStore, TCarWagonGroup, TLocoGroup } from '../types';
-import { MassLimitLocoType, SpeedLimitLocoType, calculateMassLimit, calculateSpeedLimit } from './vehicleLimitsUtils';
+import {
+  ICarWagon,
+  ILocomotive,
+  IStock,
+  IVehiclesData,
+  LocoGroupType,
+  WagonGroupType,
+} from '../types';
+import {
+  MassLimitLocoType,
+  SpeedLimitLocoType,
+  calculateMassLimit,
+  calculateSpeedLimit,
+} from './vehicleLimitsUtils';
 
-export function isLocomotive(vehicle: ILocomotive | ICarWagon): vehicle is ILocomotive {
-  return (vehicle as ILocomotive).power !== undefined;
+export function isTractionUnit(vehicle: ILocomotive | ICarWagon): vehicle is ILocomotive {
+  return (vehicle as ILocomotive).cabinType !== undefined;
 }
 
-export function locoDataList(state: IStore) {
-  if (!state.stockData) return [];
+export function locoDataList(vehiclesData: IVehiclesData | undefined) {
+  if (!vehiclesData) return [];
 
-  const stockData = state.stockData;
+  return vehiclesData.vehicleList.reduce<ILocomotive[]>((acc, vehicleInfoArray) => {
+    // check if data array has 5 elements (locos & units only)
+    if (vehicleInfoArray.length != 5) return acc;
 
-  return Object.keys(stockData.info).reduce((acc, vehiclePower) => {
-    if (!vehiclePower.startsWith('loco')) return acc;
+    const [type, constructionType, cabinType, group, restrictions] = vehicleInfoArray;
+    const locoProps = vehiclesData.vehicleProps.find((prop) => constructionType == prop.type);
 
-    const locoVehiclesData = stockData.info[vehiclePower as TLocoGroup];
+    if (!locoProps) {
+      console.warn('Brak atrybutów dla pojazdu:', type);
+      return acc;
+    }
 
-    locoVehiclesData.forEach((loco) => {
-      if (state.showSupporter && !loco[4]) return;
+    acc.push({
+      group: group as LocoGroupType,
 
-      const [type, constructionType, cabinType, maxSpeed, sponsorsTimestamp] = loco;
-      const locoProps = stockData.props.find((prop) => constructionType == prop.type);
+      type,
+      constructionType,
+      cabinType,
 
-      acc.push({
-        power: vehiclePower as TLocoGroup,
-        group: vehiclePower as TLocoGroup,
-        type,
-        constructionType,
-        cabinType,
-        maxSpeed: Number(maxSpeed),
-        isSponsorsOnly: Number(sponsorsTimestamp) > Date.now(),
-        sponsorsOnlyTimestamp: Number(sponsorsTimestamp),
-        imageSrc: '',
+      restrictions: restrictions ?? {},
 
-        length: locoProps?.length && type.startsWith('2EN') ? locoProps.length * 2 : locoProps?.length ?? 0,
-        mass: locoProps?.mass && type.startsWith('2EN') ? 253 : locoProps?.mass ?? 0,
+      maxSpeed: locoProps.speed,
+      length: locoProps.length,
+      weight: locoProps.weight,
 
-        coldStart: locoProps?.coldStart ?? false,
-        doubleManned: locoProps?.doubleManned ?? false,
-      });
+      coldStart: locoProps.coldStart ?? false,
+      doubleManned: locoProps.doubleManned ?? false,
     });
 
     return acc;
-  }, [] as ILocomotive[]);
+  }, []);
 }
 
-export function carDataList(state: IStore) {
-  if (!state.stockData) return [];
+export function carDataList(vehiclesData: IVehiclesData | undefined) {
+  if (!vehiclesData) return [];
 
-  const stockData = state.stockData;
+  return vehiclesData.vehicleList.reduce<ICarWagon[]>((acc, vehicleInfoArray) => {
+    // check if data array has 4 elements (wagons only)
+    if (vehicleInfoArray.length != 4) return acc;
 
-  return Object.keys(stockData.info).reduce((acc, vehicleUseType) => {
-    if (!vehicleUseType.startsWith('car')) return acc;
+    const [type, constructionType, group, restrictions] = vehicleInfoArray;
+    const wagonProps = vehiclesData.vehicleProps.find((prop) => constructionType == prop.type);
 
-    const carVehiclesData = stockData.info[vehicleUseType as TCarWagonGroup];
+    if (!wagonProps) {
+      console.warn('Brak atrybutów dla pojazdu:', type);
+      return acc;
+    }
 
-    carVehiclesData.forEach((car) => {
-      const [type, constructionType, loadable, sponsorsOnlyTimestamp, maxSpeed] = car;
+    acc.push({
+      group: group as WagonGroupType,
+      type,
+      constructionType,
+      loadable: wagonProps.cargoTypes ? wagonProps.cargoTypes.length > 0 : false,
+      cargoTypes: wagonProps?.cargoTypes ?? [],
 
-      if (state.showSupporter && Number(sponsorsOnlyTimestamp) <= Date.now()) return;
+      restrictions: restrictions ?? {},
 
-      const carPropsData = stockData.props.find((v) => type.toString().startsWith(v.type));
-
-      acc.push({
-        useType: vehicleUseType as TCarWagonGroup,
-        group: vehicleUseType as TCarWagonGroup,
-        type,
-        constructionType,
-        loadable,
-        isSponsorsOnly: Number(sponsorsOnlyTimestamp) > Date.now(),
-        sponsorsOnlyTimestamp: Number(sponsorsOnlyTimestamp),
-        maxSpeed: Number(maxSpeed),
-        imageSrc: '',
-        cargoList:
-          carPropsData?.cargo?.split(';').map((cargo) => ({
-            id: cargo.split(':')[0],
-            totalMass: Number(cargo.split(':')[1]),
-          })) || [],
-
-        mass: carPropsData?.mass || 0,
-        length: carPropsData?.length || 0,
-      });
+      maxSpeed: wagonProps.speed,
+      weight: wagonProps?.weight || 0,
+      length: wagonProps?.length || 0,
     });
 
     return acc;
-  }, [] 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(stockList: IStock[]) {
+  return 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);
+export function totalLength(stockList: IStock[]) {
+  return 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;
+export function maxStockSpeed(stockList: IStock[]) {
+  const stockSpeedLimit = stockList.reduce(
+    (acc, stock) => (stock.maxSpeed < acc || acc == 0 ? stock.maxSpeed : acc),
+    0
+  );
+  const headingLoco = stockList[0]?.isLoco ? stockList[0] : undefined;
 
   if (!headingLoco) return stockSpeedLimit;
 
@@ -105,41 +110,34 @@ export function maxStockSpeed(state: IStore) {
 
   if (/^(EN|2EN|SN)/.test(locoType)) return stockSpeedLimit;
 
-  const stockMass = totalMass(state);
-
-  const speedLimitByMass = calculateSpeedLimit(locoType as SpeedLimitLocoType, stockMass, isTrainPassenger(state));
+  const speedLimitByMass = calculateSpeedLimit(
+    locoType as SpeedLimitLocoType,
+    totalWeight(stockList),
+    stockList.length,
+    isTrainPassenger(stockList)
+  );
 
   return speedLimitByMass ? Math.min(stockSpeedLimit, speedLimitByMass) : stockSpeedLimit;
 }
 
-export function acceptableMass(state: IStore) {
-  if (state.stockList.length == 0 || !state.stockList[0].isLoco) return 0;
+export function acceptableWeight(stockList: IStock[]) {
+  if (stockList.length == 0 || !stockList[0].isLoco) return 0;
 
-  const activeLocomotiveType = state.stockList[0].type.split('-')[0];
+  const activeLocomotiveType = stockList[0].type.split('-')[0];
 
-  const locoMassLimit = calculateMassLimit(activeLocomotiveType as MassLimitLocoType, isTrainPassenger(state));
+  const locoMassLimit = calculateMassLimit(
+    activeLocomotiveType as MassLimitLocoType,
+    isTrainPassenger(stockList)
+  );
 
   return locoMassLimit;
 }
 
-export function isTrainPassenger(state: IStore) {
-  if (state.stockList.length == 0) return false;
-  if (state.stockList.every((stock) => stock.isLoco)) return false;
+export function isTrainPassenger(stockList: IStock[]) {
+  if (stockList.length == 0) return false;
+  if (stockList.every((stock) => stock.isLoco)) return false;
 
-  return state.stockList.filter((stock) => !stock.isLoco).every((stock) => stock.useType === EVehicleUseType.CAR_PASSENGER);
-}
-
-export function chosenRealStock(state: IStore) {
-  const currentStockString = state.stockList
-    .reduce((acc, stock) => {
-      for (let i = 0; i < stock.count; i++) acc.push(stock.type);
-      return acc;
-    }, [] as string[])
-    .join(';');
-
-  const realStockObj = state.readyStockList.find((readyStock) => readyStock.stockString == currentStockString);
-
-  state.chosenRealStockName = realStockObj?.stockId ?? undefined;
-
-  return realStockObj;
+  return stockList
+    .filter((stock) => !stock.isLoco)
+    .every((stock) => stock.group === 'wagon-passenger');
 }

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: {
@@ -26,10 +26,12 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .app-container {
-  min-height: 100vh;
-
   display: flex;
-  flex-direction: column;
+  justify-content: center;
   align-items: center;
+  flex-direction: column;
+
+  min-height: 100vh;
+  padding: 0.5em;
 }
 </style>

src/vite-env.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="vite/client" />
 
-declare module "*.vue" {
-  import type { DefineComponent } from "vue";
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
   const component: DefineComponent<{}, {}, any>;
   export default component;
 }

vite.config.ts

@@ -13,6 +13,8 @@ export default defineConfig({
     VitePWA({
       registerType: 'autoUpdate',
 
+      includeAssets: ['/images/*.{png,svg,jpg}', '/fonts/*.{woff,woff2,ttf}'],
+
       devOptions: {
         suppressWarnings: true,
         enabled: true,
@@ -23,8 +25,8 @@ export default defineConfig({
 
         runtimeCaching: [
           {
-            urlPattern: /^https:\/\/rj.td2.info.pl\/dist\/img\/thumbnails\/.*/i,
-            handler: 'NetworkFirst',
+            urlPattern: new RegExp('^https://rj.td2.info.pl/dist/img/thumbnails/*', 'i'),
+            handler: 'CacheFirst',
             options: {
               cacheName: 'swdr-images-cache',
               expiration: {
@@ -37,16 +39,26 @@ export default defineConfig({
             },
           },
           {
-            urlPattern: /^https:\/\/spythere.github.io\/api\/td2\/.*/i,
-            handler: 'NetworkFirst',
+            urlPattern: new RegExp('^https://static.spythere.eu/images/*', 'i'),
+            handler: 'CacheFirst',
             options: {
               cacheName: 'spythere-api-cache',
               expiration: {
-                maxEntries: 150,
+                maxEntries: 100,
                 maxAgeSeconds: 60 * 60 * 24, // <== 1 day
               },
               cacheableResponse: {
-                statuses: [0, 200],
+                statuses: [200, 302],
+              },
+            },
+          },
+          {
+            urlPattern: new RegExp('^https://stacjownik.spythere.eu/vehicles', 'i'),
+            handler: 'NetworkFirst',
+            options: {
+              cacheName: 'vehicles-cache',
+              cacheableResponse: {
+                statuses: [200],
               },
             },
           },