Przywrócono podział typów pojazdów w menu wyboru

src/App.vue

@@ -150,7 +150,7 @@ main {
   min-height: 75vh;
 
   grid-template-columns: 1fr 2fr;
-  grid-template-rows: 350px auto;
+  grid-template-rows: 330px minmax(400px, 1fr);
 
   padding: 0.5em;
 }

src/components/InputsSection.vue

@@ -4,7 +4,17 @@
       <h2 class="input_header">WYBIERZ POJAZDY / WAGONY</h2>
 
       <div class="input_list type">
-        <label for="locomotives-list">Pojazdy trakcyjne</label>
+        <div class="vehicle-types locos">
+          <button
+            v-for="locoType in locomotiveTypeList"
+            class="btn--choice"
+            :data-selected="locoType.id == store.chosenLocoPower"
+            @click="selectLocoType(locoType.id)"
+          >
+            {{ locoType.value }}
+          </button>
+        </div>
+
         <select
           id="locomotives-list"
           v-model="store.chosenLoco"
@@ -21,7 +31,16 @@
       </div>
 
       <div class="input_list type">
-        <label for="locomotives-list">Wagony</label>
+        <div class="vehicle-types carwagons">
+          <button
+            v-for="carType in carTypeList"
+            class="btn--choice"
+            :data-selected="carType.id == store.chosenCarUseType"
+            @click="selectCarWagonType(carType.id)"
+          >
+            {{ carType.value }}
+          </button>
+        </div>
 
         <select
           id="carwagons-list"
@@ -95,6 +114,12 @@ import imageMixin from '../mixins/imageMixin';
 import { useStore } from '../store';
 import { isLocomotive } from '../utils/vehicleUtils';
 
+interface ILocoType {
+  id: string;
+  value: string;
+  desc: string;
+}
+
 export default defineComponent({
   components: {
     ReadyStockList,
@@ -103,8 +128,41 @@ export default defineComponent({
   mixins: [imageMixin],
 
   data: () => ({
-    chosenLocomotiveType: '',
+    locomotiveTypeList: [
-    chosenCarWagonType: '',
+      {
+        id: 'loco-e',
+        value: 'ELEKTR',
+        desc: 'ELEKTRYCZNE',
+      },
+      {
+        id: 'loco-s',
+        value: 'SPAL',
+        desc: 'SPALINOWE',
+      },
+      {
+        id: 'loco-ezt',
+        value: 'EZT',
+        desc: 'ELEKTR. ZESPOŁY TRAKCYJNE',
+      },
+      {
+        id: 'loco-szt',
+        value: 'SZT',
+        desc: 'SPAL. ZESPOŁY TRAKCYJNE',
+      },
+    ] as ILocoType[],
+
+    carTypeList: [
+      {
+        id: 'car-passenger',
+        value: 'PAS',
+        desc: 'PASAŻERSKIE',
+      },
+      {
+        id: 'car-cargo',
+        value: 'TOW',
+        desc: 'TOWAROWE',
+      },
+    ],
   }),
 
   setup() {
@@ -115,36 +173,34 @@ export default defineComponent({
     };
   },
 
-  // mounted() {
-  //   document.addEventListener('keydown', (ev) => {
-  //     const keyName = ev.key.toLowerCase();
-  //     if (keyName == 'enter') {
-  //       ev.preventDefault();
-  //       this.addVehicle();
-  //     }
-
-  //     if (keyName == 'backspace') {
-  //       if (this.store.stockList.length == 0) return;
-
-  //       const lastStock = this.store.stockList.slice(-1)[0];
-
-  //       if (lastStock.count > 1) lastStock.count--;
-  //       else this.store.stockList.splice(-1);
-  //     }
-  //   });
-  // },
-
   computed: {
     locoOptions() {
-      return this.store.locoDataList.sort((a, b) => (a.type > b.type ? 1 : -1));
+      return this.store.locoDataList
+        .sort((a, b) => (a.type > b.type ? 1 : -1))
+        .filter((loco) => loco.power == this.store.chosenLocoPower);
     },
 
     carOptions() {
-      return this.store.carDataList.sort((a, b) => (a.type > b.type ? 1 : -1));
+      return this.store.carDataList
+        .sort((a, b) => (a.type > b.type ? 1 : -1))
+        .filter((car) => car.useType == this.store.chosenCarUseType);
     },
   },
 
   methods: {
+    selectLocoType(locoTypeId: string) {
+      this.store.chosenLocoPower = locoTypeId;
+      this.store.chosenVehicle = this.locoOptions[0];
+      this.store.chosenLoco = this.locoOptions[0];
+    },
+
+    selectCarWagonType(carWagonTypeId: string) {
+      this.store.chosenCarUseType = carWagonTypeId;
+      this.store.chosenVehicle = this.carOptions[0];
+      this.store.chosenCar = this.carOptions[0];
+      this.store.chosenCargo = null;
+    },
+
     prepareSwapVehicles() {
       this.store.swapVehicles = true;
     },
@@ -256,66 +312,53 @@ export default defineComponent({
 
   grid-row: 1;
   grid-column: 1;
+}
 
-  &_car {
+.input_header {
-    &.disabled {
+  margin-bottom: 1em;
-      opacity: 0.75;
+}
-      pointer-events: none;
+
-    }
+.btn--choice {
+  margin-right: 0.5em;
+  font-weight: bold;
+
+  background-color: #444;
+
+  &[data-selected='true'] {
+    background-color: $accentColor;
+    color: black;
+  }
+
+  transition: all 120ms ease;
+}
+
+.input_list {
+  margin: 0.5em 0;
+
+  label {
+    display: block;
+
+    font-weight: bold;
+    color: $accentColor;
+    margin-bottom: 0.3em;
+  }
+
+  select:focus {
+    border-color: $accentColor;
   }
 }
 
-.input {
+.input_actions {
-  &_header {
+  display: flex;
-    margin-bottom: 1em;
+  flex-wrap: wrap;
+
+  button {
+    margin: 0.5em 0.5em 0 0;
   }
+}
 
-  &_list {
+.vehicle-types {
-    margin: 0.5em 0;
+  margin-bottom: 0.5em;
-
-    label {
-      display: block;
-
-      font-weight: bold;
-      color: $accentColor;
-      margin-bottom: 0.3em;
-    }
-
-    select:focus {
-      border-color: $accentColor;
-    }
-  }
-
-  &_list button {
-    margin-left: 0.5em;
-    font-weight: bold;
-
-    &:hover img {
-      border-color: $accentColor;
-    }
-
-    &:focus img {
-      border-color: $accentColor;
-    }
-
-    img {
-      border: 2px solid white;
-      padding: 0.25em;
-
-      height: 2.35em;
-
-      vertical-align: middle;
-    }
-  }
-
-  &_actions {
-    display: flex;
-    flex-wrap: wrap;
-
-    button {
-      margin: 0.5em 0.5em 0 0;
-    }
-  }
 }
 
 @media screen and (max-width: $breakpointMd) {

src/components/ListSection.vue

@@ -8,43 +8,70 @@
       <button class="btn" @click="store.isRandomizerCardOpen = true">LOSUJ SKŁAD</button>
     </div>
 
-    <div class="stock_actions" v-if="chosenStockVehicle">
+    <div class="stock_actions" :data-disabled="store.chosenStockListIndex == -1">
       <b class="no">
         POJAZD NR <span class="text--accent">{{ store.chosenStockListIndex + 1 }}</span> &nbsp;
       </b>
 
       <div class="count">
-        <button class="action-btn" @click="subStock(store.chosenStockListIndex)">
+        <button
+          class="action-btn"
+          :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
+          @click="subStock(store.chosenStockListIndex)"
+        >
           <img :src="icons.sub" alt="subtract vehicle count" />
           1
         </button>
 
-        <input type="number" min="1" name="stock-count" id="stock-count" v-model="chosenStockVehicle.count" />
+        <input
+          v-if="chosenStockVehicle"
+          v-model="chosenStockVehicle.count"
+          type="number"
+          min="1"
+          name="stock-count"
+          id="stock-count"
+        />
 
-        <button class="action-btn" @click="addStock(store.chosenStockListIndex)">
+        <input v-else id="stock-count" type="number" value="0" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" />
+
+        <button
+          class="action-btn"
+          :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
+          @click="addStock(store.chosenStockListIndex)"
+        >
           <img :src="icons.add" alt="add vehicle count" />
           1
         </button>
       </div>
 
-      <button class="action-btn" @click="moveUpStock(store.chosenStockListIndex)">
+      <button
+        class="action-btn"
+        :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
+        @click="moveUpStock(store.chosenStockListIndex)"
+      >
         <img :src="icons.higher" alt="move up vehicle" />
         Przenieś wyżej
       </button>
 
-      <button class="action-btn" @click="moveDownStock(store.chosenStockListIndex)">
+      <button
+        class="action-btn"
+        :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
+        @click="moveDownStock(store.chosenStockListIndex)"
+      >
         <img :src="icons.lower" alt="move down vehicle" />
         Przenieś niżej
       </button>
 
-      <button class="action-btn" @click="removeStock(store.chosenStockListIndex)">
+      <button
+        class="action-btn"
+        :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
+        @click="removeStock(store.chosenStockListIndex)"
+      >
         <img :src="icons.remove" alt="remove vehicle" />
         Usuń
       </button>
     </div>
 
-    <div class="stock_actions no-chosen-vehicle" v-else>Wybierz pojazd z listy poniżej, aby pokazać opcje</div>
-
     <div class="stock_specs">
       <div>
         Masa: <span class="text--accent">{{ store.totalMass }}t</span> | Długość:
@@ -234,14 +261,15 @@ export default defineComponent({
         const chosenLoco = this.store.locoDataList.find((v) => v.type == vehicle.type) || null;
         this.store.chosenVehicle = chosenLoco;
         this.store.chosenLoco = chosenLoco;
-
         // this.store.chosenCargo = null;
+        this.store.chosenLocoPower = vehicle.useType;
       } else {
         const chosenCar = this.store.carDataList.find((v) => v.type == vehicle.type) || null;
         this.store.chosenVehicle = chosenCar;
         this.store.chosenCar = chosenCar;
 
         this.store.chosenCargo = vehicle.cargo || null;
+        this.store.chosenCarUseType = vehicle.useType;
       }
 
       if (this.store.swapVehicles) {
@@ -436,6 +464,16 @@ export default defineComponent({
   margin: 1em 0;
   outline: 1px solid white;
 
+  &[data-disabled='true'] {
+    opacity: 0.8;
+
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+
+    pointer-events: none;
+  }
+
   &.no-chosen-vehicle {
     font-size: 1.05em;
     padding: 0.5em;
@@ -454,16 +492,13 @@ export default defineComponent({
     margin: 0.25em;
     padding: 0.25em;
 
-    border: 2px solid gray;
-    border-radius: 0.25em;
-
     &:focus-visible {
       outline: 1px solid white;
     }
 
     img {
       vertical-align: text-bottom;
-      margin-right: 0.5em;
+      margin-right: 0.25em;
 
       width: 1.1em;
       height: 1.1em;
@@ -479,13 +514,11 @@ export default defineComponent({
 ul {
   position: relative;
 
-  overflow-y: auto;
+  overflow: auto;
-  overflow-x: hidden;
 
   height: 50vh;
   min-height: 500px;
   margin-top: 1em;
-  padding: 0.25em;
 }
 
 ul > li {
@@ -503,7 +536,7 @@ ul > li {
   }
 
   &.list-empty {
-    outline: 1px solid white;
+    border: 1px solid white;
     padding: 0.5em;
   }
 }

src/components/TrainImageSection.vue

@@ -14,15 +14,14 @@
       </div>
 
       <div class="train-image__info" v-if="store.chosenVehicle">
-        <b class="text--accent">{{ store.chosenVehicle.type }} </b>
+        <b class="text--accent">{{ store.chosenVehicle.type }}</b> &bull;
+        <b style="color: #ccc">{{
+          vehicleTypes[
+            isLocomotive(store.chosenVehicle) ? store.chosenVehicle.power : store.chosenVehicle.useType || 'loco-e'
+          ]
+        }}</b>
 
         <div style="color: #ccc">
-          <b>{{
-            vehicleTypes[
-              isLocomotive(store.chosenVehicle) ? store.chosenVehicle.power : store.chosenVehicle.useType || 'loco-e'
-            ]
-          }}</b>
-
           <div>
             {{ store.chosenVehicle.length }}m | {{ store.chosenVehicle.mass }}t |
             {{ store.chosenVehicle.maxSpeed }} km/h
@@ -103,13 +102,12 @@ export default defineComponent({
   grid-row: 2;
   grid-column: 1;
 
-  display: flex;
+  margin-top: 2em;
 }
 
 .train-image {
   &__wrapper {
     text-align: center;
-    
   }
 
   &__content {
@@ -156,6 +154,7 @@ export default defineComponent({
 .train-image__info {
   margin: 1em 0;
   font-size: 1.1em;
+  padding: 0 1em;
 
   b {
     font-size: 1.1em;

src/styles/global.scss

@@ -113,6 +113,18 @@ button.btn {
     font-weight: bold;
     transition: all 250ms;
     border: none;
+
+    &:focus-visible {
+      outline: 1px solid white;
+    }
+  }
+
+  &--choice {
+    padding: 0.25em 0.3em;
+
+    &:focus-visible {
+      outline: 1px solid white;
+    }
   }
 }