Poprawki reaktywności

src/components/InputsSection.vue

@@ -19,7 +19,7 @@
           id="locomotives-list"
           v-model="store.chosenLoco"
           @focus="onVehicleSelect('loco')"
-          @input="onVehicleSelect('loco')"
+          @change="onVehicleSelect('loco')"
           @keydown.enter="addOrSwitchVehicle"
           @keydown.backspace="removeVehicle"
         >
@@ -46,7 +46,7 @@
           id="carwagons-list"
           v-model="store.chosenCar"
           @focus="onVehicleSelect('car')"
-          @input="onVehicleSelect('car')"
+          @change="onVehicleSelect('car')"
           @keydown.enter="addOrSwitchVehicle"
           @keydown.backspace="removeVehicle"
         >
@@ -71,7 +71,7 @@
           data-ignore-outside="1"
           v-model="store.chosenCargo"
           @focus="onVehicleSelect('car')"
-          @input="onVehicleSelect('car')"
+          @change="onVehicleSelect('car')"
           @keydown.enter="addOrSwitchVehicle"
           @keydown.backspace="removeVehicle"
         >

src/components/RandomizerCard.vue

@@ -1,89 +1,51 @@
 <template>
   <div class="card">
-    <div class="wrapper" ref="cardWrapper" tabindex="0">
+    <div class="card_wrapper" ref="cardWrapper" tabindex="0">
-      <!-- <h1>LOSUJ SKŁAD <img :src="icons.randomize" alt="losuj skład" /></h1>
+      <h1>LOSUJ SKŁAD</h1>
-
-      <h3>
-        Skład zostanie dołączony do dodanej na liście lokomotywy czołowej bądź wygenerowany z losową w przypadku jej
-        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" />
+
+          <span class="preview-message" v-else>WYBIERZ POJAZD LUB WAGON, BY ZOBACZYĆ JEGO PODGLĄD</span>
         </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">{{ carUsage[focusedCar.type.split('_')[0]] }}</div>
-        <div v-else>Najedź na rodzaj wagonu aby wyświetlić informacje</div>
       </div>
 
-      <div class="car-choice">
+      <div class="random-stock-selections">
-        <p>Dobierz rodzaje wagonów</p>
+        <div class="select-box locos">
-        <div>
+          <h3>LOKOMOTYWA</h3>
-          <button
+
-            class="btn choice-btn"
+          <select>
-            v-for="carType in passengerCarTypeList"
+            <option value="test">Test</option>
-            :key="carType"
+          </select>
-            @click="toggleCarType(carType)"
-            @mouseenter="displayPreview(carType)"
-            @focus="displayPreview(carType)"
-            :data-selected="chosenCarTypes.includes(carType)"
-          >
-            {{ carType }}
-          </button>
         </div>
 
-        <div style="margin-top: 0.5em">
+        <div class="select-box carwagons">
-          <button
+          <h3>WAGONY</h3>
-            class="btn choice-btn"
-            v-for="carType in cargoCarTypeList"
-            :key="carType"
-            @click="toggleCarType(carType)"
-            @mouseenter="displayPreview(carType)"
-            @focus="displayPreview(carType)"
-            :data-selected="chosenCarTypes.includes(carType)"
-          >
-            {{ carType }}
-          </button>
-        </div>
-      </div>
 
-      <div class="length-choice">
+          <ul class="carwagons-list">
-        <p>Wybierz preferowaną długość składu (m) i (opcjonalnie) max. masę (t)</p>
+            <li>
-        <input
+              <select class="select-type">
-          type="number"
+                <option value="test">Test</option>
-          v-model="randomStockLength"
+              </select>
-          name="length"
-          max="650"
-          min="20"
-          step="10"
-          title="Długość składu (m)"
-        />
-        <input
-          type="number"
-          v-model="randomStockMass"
-          name="mass"
-          max="4000"
-          min="100"
-          step="100"
-          title="Masa składu (t)"
-        />
-      </div>
 
-      <div class="cargo-filling g-choice" style="margin: 1em 0">
+              <select class="select-paint">
-        <button
+                <option value="test">Test</option>
-          class="btn choice-btn"
+              </select>
-          v-for="mode in cargoFillModeList"
+
-          :data-selected="mode.id == chosenCargoFillMode"
+              <select class="select-cargo">
-          @click="changeCargoFillMode(mode.id)"
+                <option value="test">Test</option>
-        >
+              </select>
-          {{ mode.value }}
+              
-        </button>
+              <input class="carwagon-chance" type="number" value="5" max="100" min="1" />
+            </li>
+          </ul>
+        </div>
       </div>
 
       <button class="btn" style="font-size: 1.15em; margin-top: 2em" @click="randomize">LOSUJ SKŁAD!</button>
@@ -383,17 +345,15 @@ export default defineComponent({
 
   z-index: 100;
 
-  display: flex;
-  justify-content: center;
-
-  text-align: center;
-
   border: 2px solid white;
 
   width: 700px;
-  padding: 2em 1em;
+  padding: 0.5em 1em;
 
-  background: rgba(black, 0.95);
+  height: 90vh;
+  max-height: 900px;
+
+  background: #242424;
 
   @media screen and (max-width: 700px) {
     width: 95%;
@@ -407,30 +367,13 @@ p {
 }
 
 h1 {
-  display: flex;
+  text-align: center;
-  justify-content: center;
+  color: $accentColor;
-  flex-wrap: wrap;
-
-  margin: 0;
-
-  img {
-    margin-left: 0.5em;
-    width: 2em;
-  }
 }
 
 h3 {
-  margin: 0 0 2em 0;
+  color: $accentColor;
-  color: #999;
+  margin: 0 0 0.5em 0;
-}
-
-button,
-input {
-  margin: 0.25em;
-}
-
-input {
-  font-size: 1.2em;
 }
 
 .car-choice div {
@@ -444,22 +387,6 @@ input {
   }
 }
 
-button.choice-btn {
-  color: gray;
-  border-color: gray;
-
-  &[data-selected='true'] {
-    color: $accentColor;
-    border-color: $accentColor;
-  }
-
-  &:focus-visible {
-    border-color: white;
-  }
-
-  user-select: none;
-}
-
 .car-preview {
   display: flex;
   justify-content: center;
@@ -492,6 +419,17 @@ button.choice-btn {
       background-color: rgba(black, 0.75);
     }
 
+    .preview-message {
+      font-weight: bold;
+      text-align: center;
+      position: absolute;
+      bottom: 0.5em;
+      left: 50%;
+      transform: translateX(-50%);
+
+      width: 100%;
+    }
+
     img {
       width: 100%;
       height: 100%;
@@ -499,6 +437,35 @@ button.choice-btn {
   }
 }
 
+.random-stock-selections {
+  text-align: left;
+
+  .select-box {
+    padding: 0.5em 0;
+  }
+}
+
+ul.carwagons-list li select {
+  margin: 0.5em 0.5em 0 0;
+  &.select-type {
+    width: 80px;
+  }
+
+  &.select-paint {
+    width: 150px;
+  }
+
+  &.select-cargo {
+    width: 100px;
+  }
+}
+
+input.carwagon-chance {
+    background-color: $accentColor;
+    border: none;
+    font-weight: bold;
+}
+
 @media screen and (max-width: 600px) {
   .car-preview .image-wrapper {
     width: 20em;

src/components/TrainImageSection.vue

@@ -46,10 +46,10 @@
 
 <script lang="ts">
 import carUsage from '../data/carUsage.json';
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
 import { useStore } from '../store';
 import { isLocomotive } from '../utils/vehicleUtils';
-import { ILocomotive, Vehicle } from '../types';
+import { ILocomotive, IVehicleData, Vehicle } from '../types';
 
 export default defineComponent({
   setup() {
@@ -57,6 +57,7 @@ export default defineComponent({
 
     return {
       store,
+      chosenVehicle: computed(() => store.chosenVehicle),
     };
   },
 
@@ -75,6 +76,14 @@ export default defineComponent({
     };
   },
 
+  watch: {
+    chosenVehicle(vehicle: Vehicle, prevVehicle: Vehicle) {
+      if (vehicle?.type != prevVehicle?.type) {
+        this.store.imageLoading = true;
+      }
+    },
+  },
+
   methods: {
     onImageLoad() {
       this.store.imageLoading = false;