Merge pull request #20 from Spythere/development

Wersja 1.8.1

package.json

@@ -1,7 +1,8 @@
 {
   "name": "pojazdownik",
-  "version": "1.7.1",
+  "version": "1.8.1",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
@@ -19,17 +20,17 @@
   },
   "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"
   }
 }

src/App.vue

@@ -5,11 +5,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { useStore } from './store';
-import ImageFullscreenPreview from './components/utils/ImageFullscreenPreview.vue';
-import AppContainerView from './views/AppContainerView.vue';
-import AppModals from './components/app/AppModals.vue';
+import { defineComponent } from "vue";
+import { useStore } from "./store";
+import ImageFullscreenPreview from "./components/utils/ImageFullscreenPreview.vue";
+import AppContainerView from "./views/AppContainerView.vue";
+import AppModals from "./components/app/AppModals.vue";
 
 export default defineComponent({
   data() {
@@ -26,7 +26,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import './styles/global.scss';
+@import "./styles/global.scss";
 
 /* APP */
 #app {
@@ -34,6 +34,14 @@ 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);
+  }
+
+  @media screen and (orientation: landscape) and (max-width: $breakpointMd) {
+    font-size: calc(0.75rem + 0.4vw);
+  }
 }
 </style>

src/components/app/Footer.vue

@@ -41,12 +41,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

@@ -27,11 +27,15 @@ main {
   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;
+
+  padding: 1em;
 }
 
 @media screen and (max-width: $breakpointMd) {

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

@@ -80,7 +80,7 @@
           </option>
           <option :value="null" v-else>{{ $t('inputs.cargo-empty') }}</option>
 
-          <option v-for="cargo in store.chosenCar?.cargoList" :value="cargo" :key="cargo.id">
+          <option v-for="cargo in store.chosenCar?.cargoTypes" :value="cargo" :key="cargo.id">
             {{ cargo.id }}
           </option>
         </select>
@@ -216,7 +216,7 @@ export default defineComponent({
 
         this.store.chosenVehicle = type == 'loco' ? this.store.chosenLoco : this.store.chosenCar;
 
-        this.store.chosenCargo = this.store.chosenCar?.cargoList.find((cargo) => cargo.id == this.store.chosenCargo?.id) || null;
+        this.store.chosenCargo = this.store.chosenCar?.cargoTypes.find((cargo) => cargo.id == this.store.chosenCargo?.id) || null;
       });
     },
   },

src/components/sections/StockSection.vue

@@ -23,22 +23,27 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref } from 'vue';
-import { useStore } from '../../store';
-import StockListTab from '../tabs/StockListTab.vue';
-import StockGeneratorTab from '../tabs/StockGeneratorTab.vue';
-import NumberGeneratorTab from '../tabs/NumberGeneratorTab.vue';
-import WikiListTab from '../tabs/WikiListTab.vue';
+import { computed, onMounted, ref } from "vue";
+import { useStore } from "../../store";
+import StockListTab from "../tabs/StockListTab.vue";
+import StockGeneratorTab from "../tabs/StockGeneratorTab.vue";
+import NumberGeneratorTab from "../tabs/NumberGeneratorTab.vue";
+import WikiListTab from "../tabs/WikiListTab.vue";
 
 const sectionButtonRefs = ref([]);
 
 const store = useStore();
 type SectionMode = typeof store.stockSectionMode;
 
-const sectionModes: SectionMode[] = ['stock-list', 'wiki-list', 'number-generator', 'stock-generator'];
+const sectionModes: SectionMode[] = [
+  "stock-list",
+  "wiki-list",
+  "number-generator",
+  "stock-generator",
+];
 
 onMounted(() => {
-  window.addEventListener('keydown', (e) => {
+  window.addEventListener("keydown", (e) => {
     if (e.target instanceof HTMLInputElement) return;
 
     if (/[1234]/.test(e.key)) {
@@ -51,16 +56,16 @@ onMounted(() => {
 
 const chosenSectionComponent = computed(() => {
   switch (store.stockSectionMode) {
-    case 'stock-list':
+    case "stock-list":
       return StockListTab;
 
-    case 'wiki-list':
+    case "wiki-list":
       return WikiListTab;
 
-    case 'stock-generator':
+    case "stock-generator":
       return StockGeneratorTab;
 
-    case 'number-generator':
+    case "number-generator":
       return NumberGeneratorTab;
 
     default:
@@ -74,7 +79,7 @@ function chooseSection(sectionId: SectionMode) {
 </script>
 
 <style lang="scss">
-@import '../../styles/global.scss';
+@import "../../styles/global.scss";
 
 // Tab change animation
 .tab-change {
@@ -116,14 +121,14 @@ function chooseSection(sectionId: SectionMode) {
       left: 50%;
       transform: translateX(-50%);
 
-      content: '';
+      content: "";
       width: 0;
       height: 2px;
       transition: all 100ms;
       background-color: $accentColor;
     }
 
-    &[data-selected='true']::after {
+    &[data-selected="true"]::after {
       width: 100%;
     }
   }

src/components/sections/TrainImageSection.vue

@@ -18,7 +18,7 @@
       </b>
 
       <div style="color: #ccc">
-        <div>{{ store.chosenVehicle.length }}m | {{ store.chosenVehicle.mass }}t | {{ store.chosenVehicle.maxSpeed }} km/h</div>
+        <div>{{ store.chosenVehicle.length }}m | {{ (store.chosenVehicle.weight / 1000).toFixed(1) }}t | {{ store.chosenVehicle.maxSpeed }} km/h</div>
 
         <div v-if="isLocomotive(store.chosenVehicle)">{{ $t('preview.cabin') }} {{ store.chosenVehicle.cabinType }}</div>
 

src/components/tabs/NumberGeneratorTab.vue

@@ -2,46 +2,70 @@
   <div class="number-generator tab">
     <div class="tab_header">
       <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") }}
           </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"
+      <div class="regions-select">
+        <div>
+          <label for="begin-region"> {{ $t("numgen.start-region") }}</label>
+          <select
+            id="begin-region"
+            v-model="beginRegionName"
+            @change="randomizeTrainNumber()"
           >
-            {{ name }}
-          </option>
-        </select>
+            <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"
+        <div>
+          <label for="end-region"> {{ $t("numgen.end-region") }}</label>
+          <select
+            id="end-region"
+            v-model="endRegionName"
+            @change="randomizeTrainNumber()"
           >
-            {{ name }}
-          </option>
-        </select>
+            <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">
@@ -52,22 +76,69 @@
         <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">
@@ -81,6 +152,11 @@
         <button class="btn" @click="randomizeTrainNumber(true)">
           {{ $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") }}
         </button>
@@ -94,10 +170,11 @@ import { Ref, ref } from "vue";
 import { useI18n } from "vue-i18n";
 
 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>;
@@ -112,6 +189,19 @@ const copyNumber = () => {
   }
 };
 
+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;
 
@@ -129,6 +219,7 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
 
   let number = "";
 
+  // Two first numbers (begin & end regions)
   if (beginRegionName.value == endRegionName.value) {
     const sameRegionsNumbers = genData.sameRegions[beginRegionName.value!];
     const randRegionNumber =
@@ -147,32 +238,25 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
     return;
   }
 
+  // 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;
 };
@@ -182,14 +266,39 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
 @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 +313,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 +335,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>
@@ -37,13 +43,13 @@
 
       <div class="generator_cargo">
         <button
-          v-for="(cargoArray, cargoName) in store.stockData?.generator.cargo"
-          :key="cargoName"
+          v-for="cargo in computedCargoData"
+          :key="cargo.name"
           class="btn"
-          :data-chosen="chosenCargoTypes.includes(cargoName.toString())"
-          @click="toggleCargoChosen(cargoName.toString(), cargoArray)"
+          :data-chosen="chosenCargoTypes.includes(cargo.name)"
+          @click="toggleCargoChosen(cargo.name, cargo.cargoList)"
         >
-          {{ $t(`cargo.${cargoName}`) }}
+          {{ $t(`cargo.${cargo.name}`) }}
         </button>
       </div>
 
@@ -105,7 +111,6 @@ import warningsMixin from '../../mixins/warningsMixin';
 
 export default defineComponent({
   name: 'stock-generator',
-
   mixins: [stockMixin, warningsMixin],
 
   data() {
@@ -117,10 +122,12 @@ export default defineComponent({
 
       previewTimeout: -1,
 
-      maxMass: 3000,
+      maxTons: 3000,
       maxLength: 650,
       maxCarCount: 50,
 
+      isCarGroupingEnabled: false,
+
       store: useStore(),
     };
   },
@@ -129,6 +136,19 @@ export default defineComponent({
     computedChosenCarTypes() {
       return new Set<string>(this.chosenCarTypes.slice().sort((c1, c2) => (c1 > c2 ? 1 : -1)));
     },
+
+    computedCargoData() {
+      if (!this.store.stockData?.generator.cargo) return [];
+
+      const cargoGeneratorData = this.store.stockData.generator.cargo;
+
+      return Object.keys(cargoGeneratorData)
+        .sort((v1, v2) => this.$t(`cargo.${v1}`).localeCompare(this.$t(`cargo.${v2}`)))
+        .map((v) => ({
+          name: v,
+          cargoList: cargoGeneratorData[v],
+        }));
+    },
   },
 
   methods: {
@@ -150,6 +170,15 @@ 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) => {
@@ -162,8 +191,8 @@ export default defineComponent({
               const cargoObjs = [] as (ICargo | undefined)[];
 
               if (!cargoType || empty) cargoObjs.push(undefined);
-              else if (cargoType == 'all') cargoObjs.push(...carWagonObjs[0]!.cargoList);
-              else cargoObjs.push(carWagonObjs[0]?.cargoList.find((cargo) => cargo.id == cargoType));
+              else if (cargoType == 'all') cargoObjs.push(...carWagonObjs[0]!.cargoTypes);
+              else cargoObjs.push(carWagonObjs[0]?.cargoTypes.find((cargo) => cargo.id == cargoType));
 
               carWagonObjs.forEach((cw) => {
                 cargoObjs.forEach((cargoObj) => {
@@ -193,30 +222,29 @@ 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) {
+        // 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;
@@ -224,6 +252,10 @@ export default defineComponent({
         }
       }
 
+      const bestStockList = bestGeneration.stockList;
+
+      this.groupStock(bestStockList);
+
       this.store.stockList = bestGeneration.stockList;
       this.store.stockSectionMode = 'stock-list';
     },
@@ -270,6 +302,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;
@@ -310,6 +347,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

@@ -33,27 +33,17 @@
     </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>
@@ -70,8 +60,8 @@
 
       <span>
         {{ $t('stocklist.mass') }}
-        <span class="text--accent">{{ store.totalMass }}t</span> ({{ $t('stocklist.mass-accepted') }}:
-        <span class="text--accent">{{ store.acceptableMass ? store.acceptableMass + 't' : '-' }}</span
+        <span class="text--accent">{{ (store.totalWeight / 1000).toFixed(1) }}t</span> ({{ $t('stocklist.mass-accepted') }}:
+        <span class="text--accent">{{ store.acceptableWeight ? `${~~(store.acceptableWeight / 1000)}t` : '-' }}</span
         >) - {{ $t('stocklist.length') }}:
         <span class="text--accent">{{ store.totalLength }}m</span>
         - {{ $t('stocklist.vmax') }}:
@@ -80,15 +70,13 @@
     </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">
@@ -122,7 +110,7 @@
         <div class="stock-info">{{ $t('stocklist.list-empty') }}</div>
       </li>
 
-      <TransitionGroup name="stock-list-anim">
+      <TransitionGroup name="stock-list-anim" v-else>
         <li
           v-for="(stock, i) in store.stockList"
           :key="stock.id"
@@ -148,9 +136,9 @@
             <span class="stock-info__cargo" v-if="stock.cargo">
               {{ stock.cargo.id }}
             </span>
-            <span class="stock-info__length"> {{ stock.length }}m </span>
-            <span class="stock-info__mass">{{ stock.cargo ? stock.cargo.totalMass : stock.mass }}t </span>
-            <span class="stock-info__speed"> {{ stock.maxSpeed }}km/h </span>
+            <span class="stock-info__length">{{ stock.length }}m</span>
+            <span class="stock-info__mass">{{ ((stock.weight + (stock.cargo?.weight ?? 0)) / 1000).toFixed(1) }}t</span>
+            <span class="stock-info__speed">{{ stock.maxSpeed }}km/h</span>
           </div>
         </li>
       </TransitionGroup>
@@ -168,10 +156,11 @@ 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],
 
@@ -335,7 +324,7 @@ export default defineComponent({
     downloadStock() {
       if (this.store.stockList.length == 0) return alert(this.$t('stocklist.alert-empty'));
 
-      const defaultName = `${this.store.chosenRealStockName || this.store.stockList[0].type} ${this.store.totalMass}t; ${
+      const defaultName = `${this.store.chosenRealStockName || this.store.stockList[0].type} ${(this.store.totalWeight / 1000).toFixed(1)}t; ${
         this.store.totalLength
       }m; vmax ${this.store.maxStockSpeed}`;
 
@@ -409,8 +398,9 @@ export default defineComponent({
 @import '../../styles/tab.scss';
 
 .stock-list-tab {
-  display: grid;
-  grid-gap: 0.5em;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
 }
 
 .warning {
@@ -430,9 +420,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 +437,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 +459,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 {
@@ -528,7 +470,7 @@ export default defineComponent({
 ul {
   position: relative;
   overflow: auto;
-  height: 500px;
+  max-height: 500px;
 }
 
 ul > li {

src/components/tabs/WikiListTab.vue

@@ -54,17 +54,23 @@
                 />
               </td>
 
-              <td :data-sponsoronly="vehicle.isSponsorsOnly">{{ vehicle.type }}</td>
+              <td :data-sponsoronly="vehicle.isSponsorsOnly">
+                {{ vehicle.type }}
+              </td>
 
-              <td v-if="isLocomotive(vehicle)">{{ $t(`wiki.${vehicle.power}`) }}</td>
+              <td v-if="isLocomotive(vehicle)">
+                {{ $t(`wiki.${vehicle.power}`) }}
+              </td>
               <td v-else>{{ $t(`wiki.${vehicle.useType}`) }}</td>
 
               <td>{{ vehicle.constructionType }}</td>
               <td>{{ vehicle.length }}m</td>
-              <td>{{ vehicle.mass }}t</td>
+              <td>{{ (vehicle.weight / 1000).toFixed(1) }}t</td>
               <td>{{ vehicle.maxSpeed }}km/h</td>
 
-              <td v-if="currentFilterMode == 'carriages'">{{ !isLocomotive(vehicle) ? vehicle.cargoList.length : '---' }}</td>
+              <td v-if="currentFilterMode == 'carriages'">
+                {{ !isLocomotive(vehicle) ? vehicle.cargoTypes.length : '---' }}
+              </td>
               <td v-if="currentFilterMode == 'tractions'">
                 {{ isLocomotive(vehicle) ? (vehicle.coldStart ? `&check;` : '&cross;') : '---' }}
               </td>
@@ -87,7 +93,7 @@ import { isLocomotive } from '../../utils/vehicleUtils';
 import stockMixin from '../../mixins/stockMixin';
 import imageMixin from '../../mixins/imageMixin';
 
-type SorterID = 'type' | 'constructionType' | 'image' | 'length' | 'mass' | 'maxSpeed' | 'cargoCount' | 'group' | 'coldStart';
+type SorterID = 'type' | 'constructionType' | 'image' | 'length' | 'weight' | 'maxSpeed' | 'cargoCount' | 'group' | 'coldStart';
 
 interface IWikiHeader {
   id: SorterID;
@@ -106,7 +112,7 @@ const headers: IWikiHeader[] = [
   { id: 'group', sortable: true, for: 'all' },
   { id: 'constructionType', sortable: true, for: 'all' },
   { id: 'length', sortable: true, for: 'all' },
-  { id: 'mass', sortable: true, for: 'all' },
+  { id: 'weight', sortable: true, for: 'all' },
   { id: 'maxSpeed', sortable: true, for: 'all' },
   { id: 'coldStart', sortable: true, for: 'tractions' },
   { id: 'cargoCount', sortable: true, for: 'carriages' },
@@ -166,15 +172,15 @@ export default defineComponent({
         case 'group':
           return direction == 1 ? row1.vehicle[id].localeCompare(row2.vehicle[id]) : row2.vehicle[id].localeCompare(row1.vehicle[id]);
 
-        case 'mass':
+        case 'weight':
         case 'length':
         case 'maxSpeed':
           return Math.sign(row1.vehicle[id] - row2.vehicle[id]) * direction;
 
         case 'cargoCount':
           return (
-            (!isLocomotive(row1.vehicle) ? Math.sign(row1.vehicle.cargoList.length || -1) : -1) -
-            (!isLocomotive(row2.vehicle) ? (row2.vehicle.cargoList.length || -1) * direction : -1)
+            (!isLocomotive(row1.vehicle) ? Math.sign(row1.vehicle.cargoTypes.length || -1) : -1) -
+            (!isLocomotive(row2.vehicle) ? (row2.vehicle.cargoTypes.length || -1) * direction : -1)
           );
 
         case 'coldStart':
@@ -290,6 +296,7 @@ export default defineComponent({
   td {
     text-align: center;
     height: 70px;
+    padding: 0.25em;
 
     &[data-sponsoronly='true'] {
       color: salmon;

src/components/utils/StockThumbnails.vue

@@ -1,46 +1,45 @@
 <template>
-  <div class="stock_thumbnails" ref="thumbnailsRef">
+  <div class="stock-thumbnails" ref="thumbnailsRef">
     <div
+      class="thumbnail-item"
       v-for="(stock, stockIndex) in store.stockList"
       :key="stockIndex"
       :data-selected="store.chosenStockListIndex == stockIndex"
+      :data-sponsor="stock.isSponsorsOnly"
       draggable="true"
       @dragstart="onDragStart(stockIndex)"
       @drop="onDrop($event, stockIndex)"
       @dragover="allowDrop"
+      @click="onListItemClick(stockIndex)"
     >
-      <span @click="onListItemClick(stockIndex)" :key="stock.id">
-        <b :class="{ sponsor: stock.isSponsorsOnly }">
-          {{ stock.type }}
-        </b>
+      <b>
+        {{ stock.type }}
+      </b>
 
-        <span>
-          <img
-            draggable="false"
-            :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stock.type}.png`"
-            :alt="stock.type"
-            :title="stock.type"
-            @error="stockImageError($event, stock)"
-          />
-        </span>
-      </span>
+      <img
+        draggable="false"
+        :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stock.type}.png`"
+        :alt="stock.type"
+        :title="stock.type"
+        @error="stockImageError($event, stock)"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { Ref, computed, nextTick, ref, watch } from 'vue';
-import { useStore } from '../../store';
-import { IStock } from '../../types';
+import { Ref, computed, nextTick, ref, watch } from "vue";
+import { useStore } from "../../store";
+import { IStock } from "../../types";
 
 const store = useStore();
-const emit = defineEmits(['listItemClick']);
+const emit = defineEmits(["listItemClick"]);
 
 const thumbnailsRef = ref() as Ref<HTMLElement>;
 const draggedIndex = ref(-1);
 
 const onListItemClick = (index: number) => {
-  emit('listItemClick', index);
+  emit("listItemClick", index);
 };
 
 const stockImageError = (e: Event, stock: IStock) => {
@@ -53,13 +52,15 @@ watch(
     if (index < 0) return;
 
     nextTick(() => {
-      (thumbnailsRef.value as HTMLElement).querySelector(`div:nth-child(${index + 1})`)?.scrollIntoView({
-        block: 'nearest',
-        inline: 'start',
-        behavior: 'smooth',
-      });
+      (thumbnailsRef.value as HTMLElement)
+        .querySelector(`div:nth-child(${index + 1})`)
+        ?.scrollIntoView({
+          block: "nearest",
+          inline: "start",
+          behavior: "smooth",
+        });
     });
-  }
+  },
 );
 
 // Dragging images
@@ -70,7 +71,9 @@ const onDragStart = (vehicleIndex: number) => {
 const onDrop = (e: DragEvent, vehicleIndex: number) => {
   e.preventDefault();
 
-  let targetEl = thumbnailsRef.value.querySelector(`div:nth-child(${vehicleIndex + 1})`);
+  let targetEl = thumbnailsRef.value.querySelector(
+    `div:nth-child(${vehicleIndex + 1})`,
+  );
 
   if (!targetEl && draggedIndex.value != -1) return;
 
@@ -87,41 +90,45 @@ const allowDrop = (e: DragEvent) => {
 </script>
 
 <style lang="scss" scoped>
-.stock_thumbnails {
+.stock-thumbnails {
   display: flex;
   overflow: auto;
   background-color: #353a57;
+}
 
-  > div {
-    display: flex;
-    align-items: flex-end;
-    cursor: pointer;
-    min-height: 100px;
+.thumbnail-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 
-    &[data-selected='true'] {
-      background-color: rebeccapurple;
-    }
+  flex-direction: column;
+  gap: 0.5em;
 
-    > span {
-      display: flex;
-      flex-direction: column;
-      gap: 0.5em;
-      padding: 0.5em 0;
+  padding-top: 0.5em;
 
-      text-align: center;
+  cursor: pointer;
+  min-height: 100px;
+  font-size: 0.85em;
 
-      font-size: 0.85em;
-      user-select: none;
-      -moz-user-select: none;
-    }
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+
+  &[data-selected="true"] {
+    background-color: rebeccapurple;
+  }
+
+  b {
+    color: #ccc;
+    margin: 0 1em;
+  }
+
+  &[data-sponsor="true"] > b {
+    color: salmon;
   }
 
   img {
     max-height: 60px;
   }
 }
-
-.sponsor {
-  color: salmon;
-}
 </style>

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,70 @@
 {
   "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/locales/en.json

@@ -92,33 +92,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,7 +168,7 @@
       "constructionType": "Construction",
       "coldStart": "Cold start",
       "length": "Length",
-      "mass": "Mass",
+      "weight": "Mass",
       "maxSpeed": "Speed",
       "cargoCount": "Cargo count"
     },

src/locales/pl.json

@@ -92,33 +92,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,7 +168,7 @@
       "constructionType": "Konstrukcja",
       "coldStart": "Zimny start",
       "length": "Długość",
-      "mass": "Masa",
+      "weight": "Masa",
       "maxSpeed": "Prędkość",
       "cargoCount": "Ładunki"
     },

src/main.ts

@@ -1,8 +1,8 @@
-import { createApp } from 'vue';
-import { createPinia } from 'pinia';
+import { createApp } from "vue";
+import { createPinia } from "pinia";
 
-import App from './App.vue';
-import i18n from './i18n-setup';
+import App from "./App.vue";
+import i18n from "./i18n-setup";
 const pinia = createPinia();
 
-createApp(App).use(pinia).use(i18n).mount('#app');
+createApp(App).use(pinia).use(i18n).mount("#app");

src/mixins/stockMixin.ts

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import { useStore } from '../store';
-import { ICargo, ICarWagon, ILocomotive, IStock, Vehicle } from '../types';
+import { ICarWagon, ILocomotive, IStock, ICargo, Vehicle } from '../types';
 import { isLocomotive } from '../utils/vehicleUtils';
 
 export default defineComponent({
@@ -22,7 +22,7 @@ export default defineComponent({
         id: this.getStockId(),
         type: vehicle.type,
         length: vehicle.length,
-        mass: vehicle.mass,
+        weight: vehicle.weight,
         maxSpeed: vehicle.maxSpeed,
         isLoco,
         cargo: !isLoco && vehicle.loadable && cargo ? cargo : undefined,
@@ -88,7 +88,7 @@ export default defineComponent({
           const [carType, cargo] = type.split(':');
           vehicle = this.store.carDataList.find((car) => car.type == carType) || null;
 
-          if (cargo) vehicleCargo = vehicle?.cargoList.find((c) => c.id == cargo) || null;
+          if (cargo) vehicleCargo = vehicle?.cargoTypes.find((c) => c.id == cargo) || null;
         }
 
         if (!vehicle) console.log('Brak pojazdu / rodzaj pojazdu źle wczytany:', type);

src/mixins/warningsMixin.ts

@@ -1,5 +1,5 @@
-import { defineComponent } from "vue";
-import { useStore } from "../store";
+import { defineComponent } from 'vue';
+import { useStore } from '../store';
 
 export default defineComponent({
   setup() {
@@ -11,17 +11,11 @@ export default defineComponent({
   },
   computed: {
     trainTooLong() {
-      return (
-        (this.store.totalLength > 350 && this.store.isTrainPassenger) ||
-        (this.store.totalLength > 650 && !this.store.isTrainPassenger)
-      );
+      return (this.store.totalLength > 350 && this.store.isTrainPassenger) || (this.store.totalLength > 650 && !this.store.isTrainPassenger);
     },
 
     trainTooHeavy() {
-      return (
-        this.store.acceptableMass &&
-        this.store.totalMass > this.store.acceptableMass
-      );
+      return this.store.acceptableWeight && this.store.totalWeight > this.store.acceptableWeight;
     },
 
     locoNotSuitable() {
@@ -29,9 +23,7 @@ export default defineComponent({
         !this.store.isTrainPassenger &&
         this.store.stockList.length > 1 &&
         !this.store.stockList.every((stock) => stock.isLoco) &&
-        this.store.stockList.some(
-          (stock) => stock.isLoco && stock.type.startsWith("EP"),
-        )
+        this.store.stockList.some((stock) => stock.isLoco && stock.type.startsWith('EP'))
       );
     },
 

src/store.ts

@@ -1,14 +1,14 @@
 import { IStockData, IStore } from './types';
 import { defineStore } from 'pinia';
 import {
-  acceptableMass,
+  acceptableMass as acceptableWeight,
   carDataList,
   chosenRealStock,
   isTrainPassenger,
   locoDataList,
   maxStockSpeed,
   totalLength,
-  totalMass,
+  totalWeight,
 } from './utils/vehicleUtils';
 import http from './http';
 
@@ -56,12 +56,12 @@ export const useStore = defineStore({
     locoDataList: (state) => locoDataList(state),
     carDataList: (state) => carDataList(state),
     vehicleDataList: (state) => [...locoDataList(state), ...carDataList(state)],
-    totalMass: (state) => totalMass(state),
+    totalWeight: (state) => totalWeight(state),
     totalLength: (state) => totalLength(state),
     maxStockSpeed: (state) => maxStockSpeed(state),
     isTrainPassenger: (state) => isTrainPassenger(state),
     chosenRealStock: (state) => chosenRealStock(state),
-    acceptableMass: (state) => acceptableMass(state),
+    acceptableWeight: (state) => acceptableWeight(state),
 
     stockSupportsColdStart: (state) => {
       if (state.stockList.length == 0) return false;

src/styles/global.scss

@@ -3,34 +3,34 @@ $breakpointSm: 550px;
 
 $bgColor: #2b3552;
 $textColor: #fff;
-$secondaryColor: #222;
+$secondaryColor: #1b1b1b;
 $accentColor: #e4c428;
 
 @font-face {
-  font-family: 'Lato';
+  font-family: "Lato";
   src:
-    url('/fonts/Lato-Light.woff2') format('woff2'),
-    url('/fonts/Lato-Light.woff') format('woff');
+    url("/fonts/Lato-Light.woff2") format("woff2"),
+    url("/fonts/Lato-Light.woff") format("woff");
   font-weight: 300;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Lato';
+  font-family: "Lato";
   src:
-    url('/fonts/Lato-Bold.woff2') format('woff2'),
-    url('/fonts/Lato-Bold.woff') format('woff');
+    url("/fonts/Lato-Bold.woff2") format("woff2"),
+    url("/fonts/Lato-Bold.woff") format("woff");
   font-weight: bold;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Lato';
+  font-family: "Lato";
   src:
-    url('/fonts/Lato-Regular.woff2') format('woff2'),
-    url('/fonts/Lato-Regular.woff') format('woff');
+    url("/fonts/Lato-Regular.woff2") format("woff2"),
+    url("/fonts/Lato-Regular.woff") format("woff");
   font-weight: normal;
   font-style: normal;
   font-display: swap;
@@ -118,7 +118,7 @@ button {
   padding: 0.4em 0.75em;
 
   outline: none;
-  background-color: #222;
+  background-color: $secondaryColor;
   border-radius: 8px;
   font-weight: bold;
 
@@ -141,14 +141,14 @@ button {
     outline: 1px solid white;
   }
 
-  &[data-chosen='true'] {
+  &[data-chosen="true"] {
     background-color: $accentColor;
     color: black;
 
     box-shadow: 0 0 5px 1px $accentColor;
   }
 
-  &[data-disabled='true'] {
+  &[data-disabled="true"] {
     user-select: none;
     pointer-events: none;
     -moz-user-select: none;
@@ -183,8 +183,8 @@ button {
 }
 
 select,
-input[type='text'],
-input[type='number'] {
+input[type="text"],
+input[type="number"] {
   background: $bgColor;
   border: 2px solid #aaa;
   outline: none;
@@ -227,6 +227,13 @@ ul {
   }
 }
 
+hr {
+  height: 3px;
+  background-color: white;
+  outline: none;
+  margin: 0;
+}
+
 .g-card {
   position: fixed;
   top: 1em;

src/styles/tab.scss

@@ -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

@@ -41,12 +41,19 @@ export type TCarWagonGroup = 'car-passenger' | 'car-cargo';
 export interface IStockProps {
   type: string;
   length: number;
-  mass: number;
-  cargo?: string | null;
+  // mass: number;
+  weight: number;
+  // cargo?: string | null;
+  cargoTypes: ICargo[] | null;
   coldStart?: boolean;
   doubleManned?: boolean;
 }
 
+export interface ICargo {
+  id: string;
+  weight: number;
+}
+
 export interface IStockData {
   version: string;
 
@@ -79,8 +86,7 @@ export interface ILocomotive {
   isSponsorsOnly: boolean;
   sponsorsOnlyTimestamp: number;
   imageSrc: string;
-
-  mass: number;
+  weight: number;
   length: number;
   coldStart: boolean;
   doubleManned: boolean;
@@ -96,15 +102,9 @@ export interface ICarWagon {
   sponsorsOnlyTimestamp: number;
   maxSpeed: number;
   imageSrc: string;
-
-  mass: number;
+  weight: number;
   length: number;
-  cargoList: { id: string; totalMass: number }[];
-}
-
-export interface ICargo {
-  id: string;
-  totalMass: number;
+  cargoTypes: ICargo[];
 }
 
 export interface IStock {
@@ -113,9 +113,10 @@ export interface IStock {
   useType: string;
   constructionType: string;
   length: number;
-  mass: number;
+  // mass: number;
+  weight: number;
   maxSpeed: number;
-  cargo?: { id: string; totalMass: number };
+  cargo?: ICargo;
   isLoco: boolean;
   isSponsorsOnly: boolean;
   sponsorsOnlyTimestamp: number;

src/utils/vehicleLimitsUtils.ts

@@ -4,19 +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) {
-  const speedTable = speedLimits[locoType][isTrainPassenger ? 'passenger' : 'cargo'];
+export function calculateSpeedLimit(locoType: SpeedLimitLocoType, stockTotalWeight: number, stockCount: number, isTrainPassenger: boolean) {
+  if (speedLimits[locoType] === undefined) return 0;
+
+  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;
 }
 
 export function calculateMassLimit(locoType: MassLimitLocoType, isTrainPassenger: boolean) {
-  if(massLimits[locoType] === undefined) return 0;
-  
+  if (massLimits[locoType] === undefined) return 0;
+
   return massLimits[locoType][isTrainPassenger ? 0 : 1] || 0;
 }

src/utils/vehicleUtils.ts

@@ -34,7 +34,7 @@ export function locoDataList(state: IStore) {
         imageSrc: '',
 
         length: locoProps?.length && type.startsWith('2EN') ? locoProps.length * 2 : locoProps?.length ?? 0,
-        mass: locoProps?.mass && type.startsWith('2EN') ? 253 : locoProps?.mass ?? 0,
+        weight: locoProps?.weight && type.startsWith('2EN') ? 253000 : locoProps?.weight ?? 0,
 
         coldStart: locoProps?.coldStart ?? false,
         doubleManned: locoProps?.doubleManned ?? false,
@@ -72,13 +72,9 @@ export function carDataList(state: IStore) {
         sponsorsOnlyTimestamp: Number(sponsorsOnlyTimestamp),
         maxSpeed: Number(maxSpeed),
         imageSrc: '',
-        cargoList:
-          carPropsData?.cargo?.split(';').map((cargo) => ({
-            id: cargo.split(':')[0],
-            totalMass: Number(cargo.split(':')[1]),
-          })) || [],
+        cargoTypes: carPropsData?.cargoTypes ?? [],
 
-        mass: carPropsData?.mass || 0,
+        weight: carPropsData?.weight || 0,
         length: carPropsData?.length || 0,
       });
     });
@@ -87,8 +83,8 @@ export function carDataList(state: IStore) {
   }, [] as ICarWagon[]);
 }
 
-export function totalMass(state: IStore) {
-  return ~~state.stockList.reduce((acc, stock) => acc + (stock.cargo ? stock.cargo.totalMass : stock.mass) * stock.count, 0);
+export function totalWeight(state: IStore) {
+  return state.stockList.reduce((acc, stock) => acc + (stock.weight + (stock.cargo?.weight ?? 0)) * stock.count, 0);
 }
 
 export function totalLength(state: IStore) {
@@ -105,9 +101,7 @@ 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(state), state.stockList.length, isTrainPassenger(state));
 
   return speedLimitByMass ? Math.min(stockSpeedLimit, speedLimitByMass) : stockSpeedLimit;
 }

src/views/AppContainerView.vue

@@ -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>