Zmieniono działanie losowania składu

.firebase/hosting.ZGlzdA.cache

@@ -1,13 +1,14 @@
-favicon.ico,1636908703056,665ba81c9556ba00abb1a0fa575fe801b3c35f23481b17528a211b8c3021f7cd
-index.html,1636908703056,6894914497fb85a5fd56e07601efb80d51eb8459397f3c98753f4f29f2a1cbd1
-img/higher-icon.68df973e.svg,1636908703060,258bcb0fc4c62a0ecd53681bfa4777451e0cb4b980e1094f68d89d4077fa657a
-css/app.e6df6391.css,1636908703060,649cf1518bfa2a52c89ec8e6703b22bc462b9f1942de6706855febed1f734241
-img/add-icon.a0f313fe.svg,1636908703060,be43aa8b694c90777971ad2d7f611f52c7ee172131fe2e24a82348891bb6aa18
-img/lower-icon.7c306380.svg,1636908703059,286e1759ea8d4c11327f425f6d6af41603b329dab36c419b228acbea217c2080
-img/sub-icon.bfa10f67.svg,1636908703060,afa120d2f8afe18161a6ed011eb0482ef9604fd35c1d3be8cd93b1087b1138eb
-img/remove-icon.09c0dbc9.svg,1636908703060,1e01bccdf38cee755fc54c9768b4089fdb11d904a6b9aa86fcb20a2357dc8d61
-img/logo.c9fcc748.svg,1636908703060,59a9ce681c6123558f2b025931a262148f1d0bb47d5a3300a14a2e9020a85bc9
-js/app.68f816df.js,1636908703060,2c887f2145b31dee1596c41b6aa4e0bd67ad5c590dbeeacc9f1aa2fd1eba37e9
-js/app.68f816df.js.map,1636908703061,a3bb3a6d8b76b0ab08428bd9a098b4d9c1ae55e895ceda9e88dcea1bf18e4d40
-js/chunk-vendors.1cf1afd1.js,1636908703061,138b204e055fd02583bb465dcac5481d5f10484aa9765cf40c69997e045f4a7d
-js/chunk-vendors.1cf1afd1.js.map,1636908703061,46aa56f02ef6c577f5ed79d5c3e58f06306595c6c83d1652e9bfea77fb303321
+favicon.ico,1637155006386,665ba81c9556ba00abb1a0fa575fe801b3c35f23481b17528a211b8c3021f7cd
+index.html,1637155006386,db0e3a5201498b61a9c05ec7db6d9239e4316f7de42b8d2e9f5b2d9e78518fe4
+img/add-icon.a0f313fe.svg,1637155006391,be43aa8b694c90777971ad2d7f611f52c7ee172131fe2e24a82348891bb6aa18
+img/higher-icon.68df973e.svg,1637155006391,258bcb0fc4c62a0ecd53681bfa4777451e0cb4b980e1094f68d89d4077fa657a
+css/app.f7fd863f.css,1637155006388,e76f0ed9937b7881360700747e4ac7f568ff4de3d756f60ddf7f4c7b61b867f4
+img/lower-icon.7c306380.svg,1637155006386,286e1759ea8d4c11327f425f6d6af41603b329dab36c419b228acbea217c2080
+img/sub-icon.bfa10f67.svg,1637155006391,afa120d2f8afe18161a6ed011eb0482ef9604fd35c1d3be8cd93b1087b1138eb
+img/remove-icon.09c0dbc9.svg,1637155006391,1e01bccdf38cee755fc54c9768b4089fdb11d904a6b9aa86fcb20a2357dc8d61
+img/logo.c9fcc748.svg,1637155006391,59a9ce681c6123558f2b025931a262148f1d0bb47d5a3300a14a2e9020a85bc9
+img/randomize-icon.07a5b5e4.svg,1637155006391,4bda1cbd316c62073c0f5d97b5be7796b3e061d2e877a91025045957c33a9cd5
+js/app.a278fff6.js,1637155006389,53197104f371b75e8c84828d1f3563fcd334182ed8609f69735dd263f1550c76
+js/app.a278fff6.js.map,1637155006391,a59665607fc04be6127c958b2471a403cdaf1f0cecf56490fe10827d98161474
+js/chunk-vendors.c62977c4.js,1637155006391,7acc01b3da3406d5051323043fd4255883a8fd560be399c3791f4449f75b3e23
+js/chunk-vendors.c62977c4.js.map,1637155006392,9e67209b70ab93a9d5cf3b1d7ffe8277f7ba8054e5a9b240bbf60f5ddb11db56

src/components/InputsSection.vue

@@ -140,6 +140,15 @@ export default defineComponent({
         if (lastStock.count > 1) lastStock.count--;
         else this.store.stockList.splice(-1);
       }
+
+      // if (keyName == 'arrowdown') {
+      //   const chosenVehicle = this.store.chosenCar || this.store.chosenLoco;
+
+      //   if(!chosenVehicle) return;
+
+      //   ev.preventDefault();
+
+      // }
     });
 
     this.onLocoPowerChange('loco-e');

src/components/RandomizerCard.vue

@@ -10,17 +10,32 @@
         braku
       </h3>
 
+      <div class="car-preview">
+        <div class="image-wrapper">
+          <div v-if="isPreviewLoading" class="loading">ŁADOWANIE...</div>
+          <img v-if="focusedCar" :src="focusedCar?.imageSrc" :alt="focusedCar.type" @load="onPreviewLoaded" />
+        </div>
+        <b class="text--accent" v-if="focusedCar">
+          {{ focusedCar.type.split('_')[0] }} {{ focusedCar.type.split('_')[2] }}
+        </b>
+        <b v-else>Podgląd typu wagonu</b>
+
+        <div v-if="focusedCar">{{ cargoUsage[focusedCar.type.split('_')[0]] }}</div>
+        <div v-else>Najedź na rodzaj wagonu aby wyświetlić informacje</div>
+      </div>
+
       <div class="car-choice">
         <p>Dobierz rodzaje wagonów</p>
         <div>
           <button
             class="btn choice-btn"
-            v-for="car in carList"
-            :key="car.id"
-            @click="toggleCarType(car.id)"
-            :class="{ chosen: chosenCarTypes.includes(car.id) }"
+            v-for="carType in cargoTypeList"
+            :key="carType"
+            @click="toggleCarType(carType)"
+            @mouseenter="displayPreview(carType)"
+            :class="{ chosen: chosenCarTypes.includes(carType) }"
           >
-            {{ car.title }}
+            {{ carType }}
           </button>
         </div>
       </div>
@@ -47,7 +62,7 @@
         />
       </div>
 
-      <div style="margin-top: 1em">
+      <div style="margin: 1em 0">
         <button
           class="btn choice-btn"
           :class="{ chosen: includeSupporterVehicles }"
@@ -69,20 +84,31 @@
 
 <script lang="ts">
 import { ICargo, ICarWagon, ILocomotive, IStore } from '@/types';
-import { defineComponent, inject } from 'vue';
+import { ComputedRef, defineComponent, inject } from 'vue';
 
 export default defineComponent({
   setup() {
     const isCardOpen = inject('isCardOpen') as boolean;
     const store = inject('Store') as IStore;
 
+    const carDataList = inject('carDataList') as ComputedRef<ICarWagon[]>;
+
     return {
       isCardOpen,
       store,
       locoDataList: inject('locoDataList') as ILocomotive[],
-      carDataList: inject('carDataList') as ICarWagon[],
       chosenLength: inject('chosenLength') as number,
       chosenMass: inject('chosenMass') as number,
+      cargoCarList: carDataList.value.filter((car) => car.useType == 'car-cargo'),
+      cargoTypeList: carDataList.value.reduce((list, car) => {
+        const type = car.type.split('_')[0];
+
+        if (car.useType != 'car-cargo' || list.includes(type)) return list;
+
+        list.push(type);
+
+        return list;
+      }, [] as string[]),
 
       chosenLocoType: inject('chosenLocoType') as string,
       chosenCarTypes: inject('chosenCarTypes') as string[],
@@ -96,38 +122,26 @@ export default defineComponent({
       randomize: require('@/assets/randomize-icon.svg'),
     },
 
-    carList: [
-      {
-        id: 'cisterns',
-        title: 'CYSTERNY',
-        types: ['29R'],
-      },
-      {
-        id: 'coal-cars',
-        title: 'WĘGLARKI',
-        types: ['412W', '429W'],
-      },
-      {
-        id: 'conteners',
-        title: 'KONTENEROWCE',
-        types: ['412Z', '424Z', '627Z'],
-      },
-      {
-        id: 'special-cars',
-        title: 'SPECJALNE',
-        types: ['441V', '426S', '304Ca', '209c'],
-      },
-      {
-        id: 'tanks',
-        title: 'ZBIORNIKOWE',
-        types: ['408S'],
-      },
-      {
-        id: 'covered-cars',
-        title: 'KRYTE',
-        types: ['203V'],
-      },
-    ],
+    focusedCar: null as ICarWagon | null,
+    isPreviewLoading: false,
+
+    cargoUsage: {
+      '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: {
@@ -135,6 +149,20 @@ export default defineComponent({
       this.isCardOpen = false;
     },
 
+    displayPreview(carType: string) {
+      const list = this.cargoCarList.filter((car) => car.type.includes(carType));
+      const randIndex = Math.floor(Math.random() * list.length);
+
+      if (this.focusedCar?.type == list[randIndex].type) return;
+
+      this.focusedCar = list[randIndex];
+      this.isPreviewLoading = true;
+    },
+
+    onPreviewLoaded() {
+      this.isPreviewLoading = false;
+    },
+
     randomize() {
       if (this.chosenCarTypes.length == 0) {
         alert('Wybierz przynajmniej jeden rodzaj wagonów!');
@@ -179,11 +207,10 @@ export default defineComponent({
       totalStockLength += this.store.stockList[0].length;
       totalStockMass += this.store.stockList[0].mass;
 
-      let availableCarsSet = this.carDataList.filter((car) => {
-        if (!this.includeSupporterVehicles && car.supportersOnly) return false;
+      let availableCarsSet = this.cargoCarList.filter((cargoCar) => {
+        if (!this.includeSupporterVehicles && cargoCar.supportersOnly) return false;
 
-        if (this.carList.find((c) => c.types.includes(car.constructionType) && this.chosenCarTypes.includes(c.id)))
-          return true;
+        if (this.chosenCarTypes.find((carType) => cargoCar.type.includes(carType))) return true;
 
         return false;
       });
@@ -214,9 +241,9 @@ export default defineComponent({
       this.isCardOpen = false;
     },
 
-    toggleCarType(id: string) {
-      if (this.chosenCarTypes.includes(id)) this.chosenCarTypes.splice(this.chosenCarTypes.indexOf(id), 1);
-      else this.chosenCarTypes.push(id);
+    toggleCarType(carType: string) {
+      if (this.chosenCarTypes.includes(carType)) this.chosenCarTypes.splice(this.chosenCarTypes.indexOf(carType), 1);
+      else this.chosenCarTypes.push(carType);
     },
 
     addLoco(loco: ILocomotive) {
@@ -283,6 +310,9 @@ export default defineComponent({
   left: 50%;
   transform: translate(-50%, -50%);
 
+  overflow: auto;
+  max-height: 95vh;
+
   z-index: 100;
 
   display: flex;
@@ -352,4 +382,50 @@ button.chosen {
   border-color: gold;
   color: gold;
 }
+
+.car-preview {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  flex-direction: column;
+
+  b {
+    font-size: 1.3em;
+  }
+
+  .image-wrapper {
+    position: relative;
+    width: 300px;
+    height: 180px;
+
+    border: 1px solid white;
+    margin-bottom: 1em;
+
+    .loading {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+
+      width: 100%;
+      padding: 0.5em 0;
+
+      z-index: 102;
+
+      background-color: rgba(black, 0.75);
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .car-preview .image-wrapper {
+    width: 20em;
+    height: 13em;
+  }
+}
 </style>