Aktualizacja 1.0.6

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pojazdownik",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/App.vue

@@ -108,6 +108,8 @@ h2 {
 .header-bottom {
   margin: 0;
   font-size: 1.5em;
+
+  color: #d1d1d1;
 }
 
 .image-preview {

src/components/InputsSection.vue

@@ -9,6 +9,7 @@
             :key="label.id"
             @click="onLocoPowerChange(label.id)"
             :class="{ checked: store.chosenLocoPower == label.id }"
+            data-ignore-outside="1"
           >
             {{ label.title }}
           </button>
@@ -21,6 +22,7 @@
             v-model="store.chosenLoco"
             @change="onLocoTypeChange"
             data-select="loco"
+            data-ignore-outside="1"
           >
             <option :value="null" disabled>Wybierz pojazd z listy</option>
             <option v-for="loco in locoOptions" :value="loco" :key="loco.type">
@@ -30,7 +32,7 @@
           </select>
 
           <button class="btn--add" @click="addVehicle" title="Dodaj pojazd">
-            <img :src="icons.add" alt="add vehicle" />
+            <img :src="icons.add" alt="add vehicle" data-ignore-outside="1" />
           </button>
 
           <!-- <button class="btn--swap" @click="prepareSwapVehicles" title="Zamień pojazdy">
@@ -39,7 +41,7 @@
         </div>
 
         <div class="input_checkbox">
-          <button @click="onShowSupporterChange" :class="{ checked: this.store.showSupporter }">
+          <button @click="onShowSupporterChange" :class="{ checked: this.store.showSupporter }" data-ignore-outside="1">
             Pokaż tylko pojazdy dla supporterów
           </button>
         </div>
@@ -57,6 +59,7 @@
             :key="label.id"
             @click="onCarUseTypeChange(label.id)"
             :class="{ checked: store.chosenCarUseType == label.id }"
+            data-ignore-outside="1"
           >
             {{ label.title }}
           </button>
@@ -69,6 +72,7 @@
             v-model="store.chosenCar"
             @change="onCarTypeChange"
             data-select="car"
+            data-ignore-outside="1"
           >
             <option :value="null" disabled>Wybierz wagon z listy</option>
             <option v-for="car in carOptions" :value="car" :key="car.type">
@@ -78,7 +82,7 @@
           </select>
 
           <button class="btn--add" @click="addVehicle" title="Dodaj pojazd">
-            <img :src="icons.add" alt="add vehicle" />
+            <img :src="icons.add" alt="add vehicle" data-ignore-outside="1" />
           </button>
 
           <!-- <button class="btn--swap" @click="prepareSwapVehicles" title="Zamień pojazdy">
@@ -95,6 +99,7 @@
               !store.chosenCar
             "
             data-select="cargo"
+            data-ignore-outside="1"
             v-model="store.chosenCargo"
           >
             <option :value="null" v-if="!store.chosenCar || !store.chosenCar.loadable">brak dostępnych ładunków</option>
@@ -239,7 +244,7 @@ export default defineComponent({
       this.store.imageLoading = false;
 
       this.store.chosenLocoPower = inputId;
-      this.store.chosenStockListIndex = -1;
+      // this.store.chosenStockListIndex = -1;
 
       (this.$refs['loco-select'] as HTMLElement).focus();
     },
@@ -249,7 +254,7 @@ export default defineComponent({
       this.store.imageLoading = false;
 
       this.store.chosenCarUseType = inputId;
-      this.store.chosenStockListIndex = -1;
+      // this.store.chosenStockListIndex = -1;
 
       if (inputId == 'car-passenger') this.store.chosenCargo = null;
     },
@@ -257,7 +262,7 @@ export default defineComponent({
     onCarTypeChange() {
       this.store.chosenCargo = null;
       this.store.chosenLoco = null;
-      this.store.chosenStockListIndex = -1;
+      // this.store.chosenStockListIndex = -1;
 
       this.store.imageLoading = true;
     },
@@ -265,7 +270,7 @@ export default defineComponent({
     onLocoTypeChange() {
       this.store.chosenCargo = null;
       this.store.chosenCar = null;
-      this.store.chosenStockListIndex = -1;
+      // this.store.chosenStockListIndex = -1
 
       this.store.imageLoading = true;
     },
@@ -275,6 +280,45 @@ export default defineComponent({
 
       if (!vehicle) return;
 
+      const stockObj = {
+        type: vehicle.type,
+        length: vehicle.length,
+        mass: vehicle.mass,
+        maxSpeed: vehicle.maxSpeed,
+        isLoco: this.isLocomotive(vehicle),
+        cargo:
+          !this.isLocomotive(vehicle) && vehicle.loadable && this.store.chosenCargo
+            ? this.store.chosenCargo
+            : undefined,
+        count: 1,
+        imgSrc: vehicle.imageSrc,
+        useType: this.isLocomotive(vehicle) ? vehicle.power : vehicle.useType,
+        supportersOnly: vehicle.supportersOnly,
+      };
+
+      if (this.store.chosenStockListIndex != -1) {
+        let currentStock = this.store.stockList[this.store.chosenStockListIndex];
+
+        if (this.isLocomotive(vehicle) && currentStock && currentStock.type == vehicle.type) {
+          this.store.stockList[this.store.chosenStockListIndex].count++;
+          return;
+        }
+
+        if (
+          !this.isLocomotive(vehicle) &&
+          currentStock &&
+          currentStock.type == vehicle.type &&
+          currentStock.cargo?.id == this.store.chosenCargo?.id
+        ) {
+          this.store.stockList[this.store.chosenStockListIndex].count++;
+
+          return;
+        }
+
+        this.store.stockList[this.store.chosenStockListIndex] = stockObj;
+        return;
+      }
+
       const previousStock =
         this.store.stockList.length > 0 ? this.store.stockList[this.store.stockList.length - 1] : null;
 
@@ -294,22 +338,6 @@ export default defineComponent({
         return;
       }
 
-      const stockObj = {
-        type: vehicle.type,
-        length: vehicle.length,
-        mass: vehicle.mass,
-        maxSpeed: vehicle.maxSpeed,
-        isLoco: this.isLocomotive(vehicle),
-        cargo:
-          !this.isLocomotive(vehicle) && vehicle.loadable && this.store.chosenCargo
-            ? this.store.chosenCargo
-            : undefined,
-        count: 1,
-        imgSrc: vehicle.imageSrc,
-        useType: this.isLocomotive(vehicle) ? vehicle.power : vehicle.useType,
-        supportersOnly: vehicle.supportersOnly,
-      };
-
       if (this.isLocomotive(vehicle) && this.store.stockList.length > 0 && !this.store.stockList[0].isLoco)
         this.store.stockList.unshift(stockObj);
       else this.store.stockList.push(stockObj);

src/components/ListSection.vue

@@ -33,6 +33,8 @@
           {{ (store.chosenCar || store.chosenLoco)?.length }}m | {{ (store.chosenCar || store.chosenLoco)?.mass }}t |
           {{ (store.chosenCar || store.chosenLoco)?.maxSpeed }} km/h
         </div>
+        <div v-if="store.chosenLoco">Typ kabiny: {{ store.chosenLoco.cabinType }}</div>
+        <div v-if="store.chosenCar">{{ carUsage[store.chosenCar.constructionType] }}</div>
       </div>
     </section>
 
@@ -71,7 +73,7 @@
         <div class="warning" v-if="warnings.tooManyLocos.value">Ten skład posiada za dużo pojazdów trakcyjnych!</div>
       </div>
 
-      <ul ref="stock-list">
+      <ul ref="list" data-ignore-outside="1">
         <li v-if="store.stockList.length == 0" class="list-empty">
           <div class="item-content">Lista pojazdów jest pusta!</div>
         </li>
@@ -132,6 +134,8 @@ import { computed, ComputedRef, defineComponent, inject, provide, reactive, ref
 import { ICarWagon, ILocomotive, IStore } from '@/types';
 import RandomizerCard from './RandomizerCard.vue';
 
+import carUsage from '@/data/carUsage.json';
+
 export default defineComponent({
   components: { RandomizerCard },
 
@@ -170,6 +174,20 @@ export default defineComponent({
     };
   },
 
+  mounted() {
+    document.addEventListener('click', (event: Event) => {
+      if (!event.target) return;
+
+      event.stopPropagation();
+
+      const targetNode = event.target as HTMLElement;
+
+      const attr = targetNode.attributes.getNamedItem('data-ignore-outside');
+
+      if (!attr && !(this.$refs['list'] as Node).contains(targetNode)) this.store.chosenStockListIndex = -1;
+    });
+  },
+
   data: () => ({
     icons: {
       add: require('@/assets/add-icon.svg'),
@@ -191,6 +209,8 @@ export default defineComponent({
       'car-passenger': 'WAGON PASAŻERSKI',
       'car-cargo': 'WAGON TOWAROWY',
     } as { [key: string]: string },
+
+    carUsage: carUsage as { [key: string]: string },
   }),
 
   computed: {
@@ -260,6 +280,7 @@ export default defineComponent({
 
     resetStock() {
       this.store.stockList.length = 0;
+      this.store.chosenStockListIndex = -1;
     },
 
     addStock(index: number) {

src/components/RandomizerCard.vue

@@ -85,7 +85,11 @@
             }
           "
         >
-          DOŁĄCZ POJAZDY DLA SUPPORTERÓW
+          POJAZDY DLA SUPPORTERÓW
+        </button>
+
+        <button class="btn choice-btn" :class="{ chosen: loadableByDefault }" @click="changeLoadableByDefault">
+          DOMYŚLNIE ŁADOWNE
         </button>
       </div>
 
@@ -99,6 +103,8 @@
 import { ICargo, ICarWagon, ILocomotive, IStore } from '@/types';
 import { ComputedRef, defineComponent, inject } from 'vue';
 
+import carUsage from '@/data/carUsage.json';
+
 export default defineComponent({
   setup() {
     const isCardOpen = inject('isCardOpen') as boolean;
@@ -137,39 +143,9 @@ export default defineComponent({
 
     focusedCar: null as ICarWagon | null,
     isPreviewLoading: false,
+    loadableByDefault: false,
 
-    carUsage: {
+    carUsage: carUsage as { [key: string]: string },
-      Gor89: 'wagon pasażerski',
-      Gor77: 'wagon pasażerski',
-      Bau84: 'wagon pasażerski',
-      '612a': 'wagon pasażerski',
-      '504a': 'wagon pasażerski',
-      '304c': 'wagon pasażerski',
-      '159a': 'wagon pasażerski',
-      '158a': 'wagon pasażerski',
-      '154a': 'wagon pasażerski',
-      '120a': 'wagon pasażerski',
-      '113a': 'wagon pasażerski',
-      '112a': 'wagon pasażerski',
-      '111a': 'wagon pasażerski',
-      '110a': 'wagon pasażerski',
-      '101a': 'wagon pasażerski',
-      '203V': 'kruszywo, kamień wapienny, odpady kopalniane',
-      '208Kf': 'drobnica, ładunki sypkie',
-      '209c': 'wagon techniczny',
-      '29R': 'produkty naftowe',
-      '304Ca': 'pojazd specjalny',
-      '401Ka': 'drobnica, ładunki sypkie',
-      '401Zb': 'ładunki sypkie o dużej masie usypowej',
-      '408S': 'cement, wapno, popioły lotne, żużel',
-      '412W': 'drobnica, kruszywo, węgiel',
-      '412Z': 'kontenery',
-      '424Z': 'ładunki skupione, pojazdy, dłużyca',
-      '426S': 'drobnica',
-      '429W': 'towary masowe odporne na warunki atmosferyczne (węgiel, ruda)',
-      '441V': 'węgiel kamienny, żwir',
-      '627Z': 'kontenery',
-    } as { [key: string]: string },
   }),
 
   methods: {
@@ -191,6 +167,10 @@ export default defineComponent({
       this.isPreviewLoading = false;
     },
 
+    changeLoadableByDefault() {
+      this.loadableByDefault = !this.loadableByDefault;
+    },
+
     randomize() {
       if (this.chosenCarTypes.length == 0) {
         alert('Wybierz przynajmniej jeden rodzaj wagonów!');
@@ -254,7 +234,7 @@ export default defineComponent({
         if (randCar.length * count + totalStockLength >= this.chosenLength) break;
 
         let randCargo = undefined;
-        let randNum = Math.random();
+        let randNum = this.loadableByDefault ? 1 : Math.random();
         if (randCar.cargoList.length != 0 && randNum >= 0.6)
           randCargo = randCar.cargoList[Math.floor(Math.random() * randCar.cargoList.length)];
 

src/data/carUsage.json

@@ -0,0 +1,32 @@
+{
+    "Gor89": "wagon pasażerski",
+    "Gor77": "wagon pasażerski",
+    "Bau84": "wagon pasażerski",
+    "612a": "wagon pasażerski",
+    "504a": "wagon pasażerski",
+    "304c": "wagon pasażerski",
+    "159a": "wagon pasażerski",
+    "158a": "wagon pasażerski",
+    "154a": "wagon pasażerski",
+    "120a": "wagon pasażerski",
+    "113a": "wagon pasażerski",
+    "112a": "wagon pasażerski",
+    "111a": "wagon pasażerski",
+    "110a": "wagon pasażerski",
+    "101a": "wagon pasażerski",
+    "203V": "kruszywo, kamień wapienny, odpady kopalniane",
+    "208Kf": "drobnica, ładunki sypkie",
+    "209c": "wagon techniczny",
+    "29R": "produkty naftowe",
+    "304Ca": "pojazd specjalny",
+    "401Ka": "drobnica, ładunki sypkie",
+    "401Zb": "ładunki sypkie o dużej masie usypowej",
+    "408S": "cement, wapno, popioły lotne, żużel",
+    "412W": "drobnica, kruszywo, węgiel",
+    "412Z": "kontenery",
+    "424Z": "ładunki skupione, pojazdy, dłużyca",
+    "426S": "drobnica",
+    "429W": "towary masowe odporne na warunki atmosferyczne (węgiel, ruda)",
+    "441V": "węgiel kamienny, żwir",
+    "627Z": "kontenery"
+}