feature: generator nr pociągi

src/components/InputsSection.vue

@@ -85,7 +85,7 @@
       </div>
 
       <div class="input_actions">
-        <button class="btn" @click="addVehicle">DODAJ NOWY</button>
+        <button class="btn" @click="addVehicle(store.chosenVehicle, store.chosenCargo)">DODAJ NOWY</button>
         <button
           class="btn"
           @click="switchVehicles"
@@ -112,6 +112,7 @@ import imageMixin from '../mixins/imageMixin';
 import { useStore } from '../store';
 import { isLocomotive } from '../utils/vehicleUtils';
 import stockPreviewMixin from '../mixins/stockPreviewMixin';
+import stockMixin from '../mixins/stockMixin';
 
 interface ILocoType {
   id: string;
@@ -120,7 +121,7 @@ interface ILocoType {
 }
 
 export default defineComponent({
-  mixins: [imageMixin, stockPreviewMixin],
+  mixins: [imageMixin, stockPreviewMixin, stockMixin],
 
   data: () => ({
     locomotiveTypeList: [
@@ -174,7 +175,10 @@ export default defineComponent({
     },
 
     addOrSwitchVehicle() {
-      if (this.store.chosenStockListIndex == -1) this.addVehicle();
+      if(!this.store.chosenVehicle) return;
+
+      if (this.store.chosenStockListIndex == -1)
+        this.addVehicle(this.store.chosenVehicle, this.store.chosenCargo);
       else this.switchVehicles();
     },
 
@@ -211,50 +215,6 @@ export default defineComponent({
 
       this.store.stockList[this.store.chosenStockListIndex] = stockObj;
     },
-
-    addVehicle() {
-      const vehicle = this.store.chosenVehicle;
-
-      if (!vehicle) return;
-
-      const stockObj: IStock = {
-        id: `${Date.now()}`,
-        useType: isLocomotive(vehicle) ? vehicle.power : vehicle.useType,
-        type: vehicle.type,
-        length: vehicle.length,
-        mass: vehicle.mass,
-        maxSpeed: vehicle.maxSpeed,
-        isLoco: isLocomotive(vehicle),
-        cargo:
-          !isLocomotive(vehicle) && vehicle.loadable && this.store.chosenCargo ? this.store.chosenCargo : undefined,
-        count: 1,
-        imgSrc: vehicle.imageSrc,
-        supportersOnly: vehicle.supportersOnly,
-      };
-
-      const previousStock =
-        this.store.stockList.length > 0 ? this.store.stockList[this.store.stockList.length - 1] : null;
-
-      if (isLocomotive(vehicle) && previousStock && previousStock.type == vehicle.type) {
-        this.store.stockList[this.store.stockList.length - 1].count++;
-        return;
-      }
-
-      if (
-        !isLocomotive(vehicle) &&
-        previousStock &&
-        previousStock.type == vehicle.type &&
-        previousStock.cargo?.id == this.store.chosenCargo?.id
-      ) {
-        this.store.stockList[this.store.stockList.length - 1].count++;
-
-        return;
-      }
-
-      if (isLocomotive(vehicle) && this.store.stockList.length > 0 && !this.store.stockList[0].isLoco)
-        this.store.stockList.unshift(stockObj);
-      else this.store.stockList.push(stockObj);
-    },
   },
 });
 </script>

src/components/NumberGeneratorTab.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="number-generator tab">
+    <div class="tab_header">
+      <h2>GENERATOR NUMERU POCIĄGU</h2>
+      <button class="btn" @click="() => (store.stockSectionMode = 'stock-list')">POWRÓT DO LISTY &gt;</button>
+    </div>
+
+    <div class="tab_content">
+      <div class="options">
+        <select v-model="regionNumbers">
+          <option :value="null" disabled>Obszar konstrukcyjny</option>
+          <option v-for="(nums, name) in genData.regions" :value="nums">{{ name }}</option>
+        </select>
+
+        <select v-model="categoryRules">
+          <option :value="null" disabled>Kategoria pociągu</option>
+          <option v-for="(rules, category) in genData.categories" :value="rules">{{ category }}</option>
+        </select>
+      </div>
+
+      <h1>Wygenerowany numer pociągu: {{ computedNumber }}</h1>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Ref, computed, ref } from 'vue';
+import { useStore } from '../store';
+
+import genData from '../constants/numberGeneratorData.json';
+
+const store = useStore();
+
+const regionNumbers = ref(null) as Ref<number[] | null>;
+const categoryRules = ref(null) as Ref<string | null>;
+
+const computedNumber = computed(() => {
+  if (regionNumbers.value == null || categoryRules.value == null) return '';
+
+  let trainNumber = '';
+  const randRegionNumber = regionNumbers.value[Math.floor(Math.random() * regionNumbers.value.length)];
+
+  trainNumber += randRegionNumber.toString();
+
+  const rulesArray = categoryRules.value.split(';').map((r) => ({
+    index: r.split(':')[0],
+    rule: r.split(':')[1],
+    nums: Number(r.split(':')[2] || '1'),
+  }));
+
+  rulesArray.forEach((r) => {
+    const range = r.rule.split('-');
+
+    if (range.length == 1) trainNumber += r.rule;
+    else {
+      const [minRange, maxRange] = range;
+      const randRange = Math.floor(Math.random() * (Number(maxRange) - Number(minRange)) + Number(minRange)).toString();
+
+      trainNumber += new Array(Math.abs(randRange.length - r.nums)).fill('0').join('') + randRange;
+    }
+  });
+
+  return trainNumber;
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../styles/tab.scss';
+
+.options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1em;
+
+  select {
+    width: calc(50% - 1em);
+  }
+}
+</style>
+

src/components/StockGeneratorTab.vue

@@ -1,14 +1,14 @@
 <template>
-  <div class="stock-generator">
-    <div class="stock_actions">
+  <div class="stock-generator tab">
+    <div class="tab_header">
       <h2>GENERATOR SKŁADU TOWAROWEGO</h2>
       <button class="btn" @click="() => (store.stockSectionMode = 'stock-list')">POWRÓT DO LISTY &gt;</button>
     </div>
 
-    <div class="generator_content">
+    <div class="tab_content">
       <h2>WŁAŚCIWOŚCI SKŁADU</h2>
 
-      <div class="generator_attributes">
+      <div class="tab_attributes">
         <label>
           Maksymalna masa (t)
           <input type="number" v-model="maxMass" step="100" max="4000" min="0" />
@@ -41,7 +41,7 @@
 
       <h2>WAGONY Z WYBRANYMI ŁADUNKAMI</h2>
 
-      <div class="warning">
+      <div class="generator_warning">
         <span v-if="computedChosenCarTypes.size == 0">
           Wybierz co najmniej jeden ładunek, aby zobaczyć wagony, które go posiadają!
         </span>
@@ -71,7 +71,7 @@
 
       <hr />
 
-      <div class="generator_actions">
+      <div class="tab_actions">
         <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock()">
           WYGENERUJ
         </button>
@@ -176,7 +176,7 @@ export default defineComponent({
 
       new Array(this.maxCarCount).fill(0).forEach(() => {
         const randomStockType = generatedChosenStockList[~~(Math.random() * generatedChosenStockList.length)];
-        const {carWagon, cargo} = randomStockType.carPool[~~(Math.random() * randomStockType.carPool.length)];
+        const { carWagon, cargo } = randomStockType.carPool[~~(Math.random() * randomStockType.carPool.length)];
 
         if (this.store.totalMass + (cargo?.totalMass || carWagon.mass) > this.maxMass) return;
         if (this.store.totalLength + carWagon.length > this.maxLength) return;
@@ -227,51 +227,14 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import '../styles/global.scss';
+@import '../styles/tab.scss';
 
-.stock_actions {
-  align-items: center;
 
-  h2 {
-    margin: 0;
-    color: white;
-    font-size: 1.35em;
-    text-align: center;
-  }
-
-  button {
-    margin-left: auto;
-  }
-}
-
-.stock-generator {
-  height: 100%;
-}
-
-.generator_content {
-  margin-top: 1em;
-  height: 100%;
-}
 
 h2 {
   margin: 1em 0;
 }
 
-.generator_attributes {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1em;
-
-  label {
-    display: flex;
-    flex-direction: column;
-  }
-
-  input {
-    max-width: 250px;
-    margin-top: 0.5em;
-  }
-}
-
 .generator_cargo,
 .generator_vehicles {
   display: grid;
@@ -325,24 +288,7 @@ hr {
   margin: 15px 0;
 }
 
-.generator_actions {
-  display: grid;
-  gap: 0.5em;
-  grid-template-columns: repeat(3, 1fr);
-
-  button {
-    background-color: #131313;
-
-    padding: 0.5em;
-    font-weight: bold;
-  }
-
-  &[data-disabled] button {
-    opacity: 0.75;
-  }
-}
-
-.warning {
+.generator_warning {
   background-color: $accentColor;
   padding: 0.5em;
   text-align: justify;
@@ -355,17 +301,6 @@ hr {
   .generator_vehicles {
     grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
   }
-
-  .generator_attributes {
-    label {
-      width: 100%;
-    }
-
-    input {
-      max-width: 100%;
-      width: 100%;
-    }
-  }
 }
 </style>
 

src/components/StockListTab.vue

@@ -12,37 +12,6 @@
         POJAZD NR <span class="text--accent">{{ store.chosenStockListIndex + 1 }}</span> &nbsp;
       </b>
 
-      <div class="count">
-        <button
-          class="btn action-btn"
-          :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
-          @click="subStock(store.chosenStockListIndex)"
-        >
-          <img :src="getIconURL('sub')" alt="subtract vehicle count" />
-          1
-        </button>
-
-        <input
-          v-if="chosenStockVehicle"
-          v-model="chosenStockVehicle.count"
-          type="number"
-          min="1"
-          name="stock-count"
-          id="stock-count"
-        />
-
-        <input v-else id="stock-count" type="number" value="0" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" />
-
-        <button
-          class="btn action-btn"
-          :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
-          @click="addStock(store.chosenStockListIndex)"
-        >
-          <img :src="getIconURL('add')" alt="add vehicle count" />
-          1
-        </button>
-      </div>
-
       <button
         class="btn action-btn"
         :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
@@ -71,8 +40,12 @@
       </button>
     </div>
 
-    <div class="stock_clipboard-text" v-if="store.stockList.length > 0">
-      <button class="btn" @click="copyToClipboard">Skopiuj tekst składu do schowka</button>
+    <div class="stock_additional">
+      <button class="btn" v-if="store.stockList.length > 0" @click="copyToClipboard">
+        Skopiuj tekst składu do schowka
+      </button>
+
+      <button class="btn" v-if="store.stockList[0]?.isLoco">Wygeneruj numer pociągu</button>
     </div>
 
     <div class="stock_specs">
@@ -117,20 +90,7 @@
       <div class="warning" v-if="tooManyLocomotives">Ten skład posiada za dużo pojazdów trakcyjnych!</div>
     </div>
 
-    <div class="stock_thumbnails" ref="thumbnails">
-      <div v-for="(stock, stockIndex) in store.stockList" :data-selected="store.chosenStockListIndex == stockIndex">
-        <span v-for="i in stock.count" @click="onListItemClick(stockIndex)" :key="stock.id">
-          <b>{{ stock.type }}</b>
-
-          <img
-            :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stock.type}.png`"
-            :alt="stock.type"
-            :title="stock.type"
-            @error="stockImageError($event, stock)"
-          />
-        </span>
-      </div>
-    </div>
+    <StockThumbnails :onListItemClick="onListItemClick" :onStockImageError="stockImageError" />
 
     <!-- Stock list -->
     <ul ref="list">
@@ -138,7 +98,7 @@
         <div class="stock-info">Lista pojazdów jest pusta!</div>
       </li>
 
-      <transition-group name="stock-list-anim">
+      <TransitionGroup name="stock-list-anim">
         <li
           v-for="(stock, i) in store.stockList"
           :key="stock.id"
@@ -171,11 +131,9 @@
             <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__count"> x{{ stock.count }} </span>
           </div>
         </li>
-      </transition-group>
+      </TransitionGroup>
     </ul>
   </section>
 </template>
@@ -189,10 +147,11 @@ import warningsMixin from '../mixins/warningsMixin';
 import imageMixin from '../mixins/imageMixin';
 import stockPreviewMixin from '../mixins/stockPreviewMixin';
 import { IStock } from '../types';
+import StockThumbnails from './StockThumbnails.vue';
 
 export default defineComponent({
   name: 'stock-list',
-  components: { TrainImage },
+  components: { TrainImage, StockThumbnails },
 
   mixins: [warningsMixin, imageMixin, stockPreviewMixin],
 
@@ -210,18 +169,6 @@ export default defineComponent({
     draggedVehicleID: -1,
   }),
 
-  watch: {
-    'store.chosenStockListIndex': {
-      handler(id: number) {
-        if (id < 0) return;
-
-        (this.$refs['thumbnails'] as HTMLElement)
-          .querySelector(`div:nth-child(${id + 1})`)
-          ?.scrollIntoView({ block: 'nearest', inline: 'start', behavior: 'smooth' });
-      },
-    },
-  },
-
   computed: {
     stockString() {
       return this.store.stockList
@@ -470,12 +417,11 @@ export default defineComponent({
   }
 }
 
-.stock_clipboard-text {
-  font-weight: bold;
+.stock_additional {
+  display: flex;
+  gap: 0.5em;
 
-  & > .btn {
-    margin: 0 0.5em 0.5em 0;
-  }
+  margin: 0.5em 0;
 }
 
 .real-stock-info {
@@ -509,7 +455,8 @@ ul > li {
 
   &.list-empty {
     background-color: $secondaryColor;
-    padding: 0.5em;
+    border-radius: 0.5em;
+    padding: 0.75em;
   }
 }
 
@@ -532,7 +479,7 @@ li > .stock-info {
 }
 
 .stock_warnings {
-  margin: 0.5em 0; 
+  margin: 0.5em 0;
 }
 
 .stock-info {
@@ -586,39 +533,6 @@ li > .stock-info {
   }
 }
 
-.stock_thumbnails {
-  display: flex;
-  margin: 1em 0;
-
-  overflow: auto;
-
-  background-color: #353a57;
-
-  div {
-    display: flex;
-    align-items: flex-end;
-
-    &[data-selected='true'] {
-      background-color: rebeccapurple;
-    }
-
-    span {
-      display: flex;
-      flex-direction: column;
-      gap: 0.5em;
-      padding: 0.5em 0;
-
-      text-align: center;
-
-      font-size: 0.85em;
-    }
-  }
-
-  img {
-    max-height: 60px;
-  }
-}
-
 @media screen and (max-width: $breakpointMd) {
   ul {
     min-height: auto;

src/components/StockSection.vue

@@ -13,6 +13,7 @@ import { defineComponent } from 'vue';
 import { useStore } from '../store';
 import StockListTab from './StockListTab.vue';
 import StockGeneratorTab from './StockGeneratorTab.vue';
+import NumberGeneratorTab from './NumberGeneratorTab.vue';
 
 export default defineComponent({
   setup() {
@@ -30,6 +31,9 @@ export default defineComponent({
         case 'stock-generator':
           return StockGeneratorTab;
 
+        case 'number-generator':
+          return NumberGeneratorTab;
+
         default:
           return StockListTab;
       }
@@ -57,6 +61,8 @@ export default defineComponent({
   grid-row: 1 / 4;
   grid-column: 2;
 
+  padding: 0 1px;
+
   overflow: hidden;
 }
 

src/components/StockThumbnails.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="stock_thumbnails" ref="thumbnailsRef">
+    <div
+      v-for="(stock, stockIndex) in store.stockList"
+      :data-selected="store.chosenStockListIndex == stockIndex"
+      draggable="true"
+      @dragstart="onDragStart(stockIndex)"
+      @drop="onDrop($event, stockIndex)"
+      @dragover="allowDrop"
+    >
+      <span @click="onListItemClick(stockIndex)" :key="stock.id">
+        <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>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Ref, computed, nextTick, ref, watch } from 'vue';
+import { useStore } from '../store';
+import { IStock } from '../types';
+
+const store = useStore();
+const emit = defineEmits(['listItemClick', 'stockImageError']);
+
+const thumbnailsRef = ref() as Ref<HTMLElement>;
+const draggedIndex = ref(-1);
+
+const onListItemClick = (index: number) => {
+  emit('listItemClick', index);
+};
+
+const stockImageError = (e: Event, stock: IStock) => {
+  console.log('error');
+
+  emit('stockImageError', e, stock);
+};
+
+watch(
+  computed(() => store.chosenStockListIndex),
+  (index) => {
+    if (index < 0) return;
+
+    nextTick(() => {
+      (thumbnailsRef.value as HTMLElement)
+        .querySelector(`div:nth-child(${index + 1})`)
+        ?.scrollIntoView({ block: 'nearest', inline: 'start', behavior: 'smooth' });
+    });
+  }
+);
+
+// Dragging images
+const onDragStart = (vehicleIndex: number) => {
+  draggedIndex.value = vehicleIndex;
+};
+
+const onDrop = (e: DragEvent, vehicleIndex: number) => {
+  e.preventDefault();
+
+  let targetEl = thumbnailsRef.value.querySelector(`div:nth-child(${vehicleIndex + 1})`);
+
+  if (!targetEl && draggedIndex.value != -1) return;
+
+  const tempVehicle = store.stockList[vehicleIndex];
+  store.stockList[vehicleIndex] = store.stockList[draggedIndex.value];
+  store.stockList[draggedIndex.value] = tempVehicle;
+
+  store.chosenStockListIndex = vehicleIndex;
+};
+
+const allowDrop = (e: DragEvent) => {
+  e.preventDefault();
+};
+</script>
+
+<style lang="scss" scoped>
+.stock_thumbnails {
+  display: flex;
+  margin: 1em 0;
+
+  overflow: auto;
+
+  background-color: #353a57;
+
+  > div {
+    display: flex;
+    align-items: flex-end;
+    cursor: pointer;
+
+    &[data-selected='true'] {
+      background-color: rebeccapurple;
+    }
+
+    > span {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5em;
+      padding: 0.5em 0;
+
+      text-align: center;
+
+      font-size: 0.85em;
+      user-select: none;
+      -moz-user-select: none;
+    }
+  }
+
+  img {
+    max-height: 60px;
+  }
+}
+</style>
+

src/components/cards/RealStockCard.vue

@@ -41,18 +41,18 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { Vehicle, IStock, IReadyStockList } from '../../types';
+import { Vehicle, IReadyStockList } from '../../types';
 
 import { useStore } from '../../store';
-import { isLocomotive } from '../../utils/vehicleUtils';
 import imageMixin from '../../mixins/imageMixin';
+import stockMixin from '../../mixins/stockMixin';
 
 interface ResponseJSONData {
   [key: string]: string;
 }
 
 export default defineComponent({
-  mixins: [imageMixin],
+  mixins: [imageMixin, stockMixin],
 
   setup() {
     return {
@@ -109,34 +109,6 @@ export default defineComponent({
 
       this.store.isRealStockListCardOpen = false;
     },
-
-    addVehicle(vehicle: Vehicle | null) {
-      if (!vehicle) return;
-
-      const stockObj: IStock = {
-        id: `${Date.now() + this.store.stockList.length}`,
-        type: vehicle.type,
-        length: vehicle.length,
-        mass: vehicle.mass,
-        maxSpeed: vehicle.maxSpeed,
-        isLoco: isLocomotive(vehicle),
-        cargo: undefined,
-        count: 1,
-        imgSrc: vehicle.imageSrc,
-        useType: isLocomotive(vehicle) ? vehicle.power : vehicle.useType,
-        supportersOnly: vehicle.supportersOnly,
-      };
-
-      const previousStock =
-        this.store.stockList.length > 0 ? this.store.stockList[this.store.stockList.length - 1] : null;
-
-      if (previousStock && previousStock.type == vehicle.type) {
-        this.store.stockList[this.store.stockList.length - 1].count++;
-        return;
-      }
-
-      this.store.stockList.push(stockObj);
-    },
   },
 
   async mounted() {