feature: miniaturki składu

src/components/InputsSection.vue

@@ -7,7 +7,7 @@
         <div class="vehicle-types locos">
           <button
             v-for="locoType in locomotiveTypeList"
-            class="btn--choice"
+            class="btn btn--choice"
             :data-selected="locoType.id == store.chosenLocoPower"
             @click="selectLocoType(locoType.id)"
           >
@@ -34,7 +34,7 @@
         <div class="vehicle-types carwagons">
           <button
             v-for="carType in carTypeList"
-            class="btn--choice"
+            class="btn btn--choice"
             :data-selected="carType.id == store.chosenCarUseType"
             @click="selectCarWagonType(carType.id)"
           >
@@ -274,11 +274,10 @@ export default defineComponent({
   margin-bottom: 1em;
 }
 
-.btn--choice {
-  margin-right: 0.5em;
+button.btn--choice {
   font-weight: bold;
-
-  background-color: #444;
+  font-size: 0.9em;
+  padding: 0.15em 0.6em;
 
   &[data-selected='true'] {
     background-color: $accentColor;
@@ -314,6 +313,9 @@ export default defineComponent({
 }
 
 .vehicle-types {
+  display: flex;
+  gap: 0.25em;
+
   margin-bottom: 0.5em;
 }
 
@@ -326,6 +328,10 @@ export default defineComponent({
   .input_actions {
     justify-content: center;
   }
+
+  .vehicle-types {
+    justify-content: center;
+  }
 }
 </style>
 

src/components/StockListTab.vue

@@ -14,7 +14,7 @@
 
       <div class="count">
         <button
-          class="action-btn"
+          class="btn action-btn"
           :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
           @click="subStock(store.chosenStockListIndex)"
         >
@@ -34,7 +34,7 @@
         <input v-else id="stock-count" type="number" value="0" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" />
 
         <button
-          class="action-btn"
+          class="btn action-btn"
           :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
           @click="addStock(store.chosenStockListIndex)"
         >
@@ -44,7 +44,7 @@
       </div>
 
       <button
-        class="action-btn"
+        class="btn action-btn"
         :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
         @click="moveUpStock(store.chosenStockListIndex)"
       >
@@ -53,7 +53,7 @@
       </button>
 
       <button
-        class="action-btn"
+        class="btn action-btn"
         :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
         @click="moveDownStock(store.chosenStockListIndex)"
       >
@@ -62,7 +62,7 @@
       </button>
 
       <button
-        class="action-btn"
+        class="btn action-btn"
         :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
         @click="removeStock(store.chosenStockListIndex)"
       >
@@ -91,6 +91,22 @@
       </span>
     </div>
 
+    <div class="stock_thumbnails" ref="thumbnails">
+      <div v-for="(stock, stockIndex) in store.stockList" :data-selected="store.chosenStockListIndex == stockIndex">
+        <img
+          v-for="i in stock.count"
+          @click="onListItemClick(stockIndex)"
+          :key="stock.id"
+          :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stock.type}.png`"
+          :alt="stock.type"
+          :title="stock.type"
+          @error="stockImageError($event, stock)"
+        />
+
+        <!-- <b>{{ stock.type }}</b> -->
+      </div>
+    </div>
+
     <div class="stock_warnings">
       <div class="warning" v-if="locoNotSuitable">
         Lokomotywy EP07 i EP08 są przeznaczone jedynie do ruchu pasażerskiego!
@@ -173,6 +189,7 @@ import { useStore } from '../store';
 import warningsMixin from '../mixins/warningsMixin';
 import imageMixin from '../mixins/imageMixin';
 import stockPreviewMixin from '../mixins/stockPreviewMixin';
+import { IStock } from '../types';
 
 export default defineComponent({
   name: 'stock-list',
@@ -194,6 +211,16 @@ export default defineComponent({
     draggedVehicleID: -1,
   }),
 
+  watch: {
+    'store.chosenStockListIndex': {
+      handler(id: number) {
+        (this.$refs['thumbnails'] as HTMLElement)
+          .querySelector(`div:nth-child(${id + 1})`)
+          ?.scrollIntoView({ block: 'nearest', inline: 'start', behavior: 'smooth' });
+      },
+    },
+  },
+
   computed: {
     stockString() {
       return this.store.stockList
@@ -218,6 +245,10 @@ export default defineComponent({
       return this.tooManyLocomotives || this.trainTooHeavy || this.trainTooLong || this.locoNotSuitable;
     },
 
+    stockImageError(e: Event, stock: IStock): void {
+      (e.target as HTMLImageElement).src = `images/${stock.useType}-unknown.png`;
+    },
+
     copyToClipboard() {
       // if (this.stockHasWarnings()) {
       //   alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
@@ -381,10 +412,6 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../styles/global';
 
-.stock_warnings {
-  margin-top: 1em;
-}
-
 .warning {
   padding: 0.25em;
   background: $accentColor;
@@ -403,12 +430,12 @@ export default defineComponent({
   justify-content: center;
   align-items: center;
 
+  gap: 0.5em;
   flex-wrap: wrap;
 
   margin: 1em 0;
-  border: 1px solid white;
-
-  padding: 0 0.3em;
+  padding: 0.5em;
+  background-color: #353a57;
 
   &[data-disabled='true'] {
     opacity: 0.8;
@@ -430,12 +457,7 @@ export default defineComponent({
   }
 
   button {
-    margin: 0.25em;
-    padding: 0.25em;
-
-    &:focus-visible {
-      outline: 1px solid white;
-    }
+    padding: 0.25em 0.5em;
 
     img {
       vertical-align: text-bottom;
@@ -467,7 +489,6 @@ ul {
   overflow: auto;
 
   height: 70vh;
-  margin-top: 1em;
 }
 
 ul > li {
@@ -560,6 +581,31 @@ 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;
+    }
+  }
+
+  img {
+    margin: 0.5em 0;
+
+    // max-width: 150px;
+    max-height: 60px;
+  }
+}
+
 @media screen and (max-width: $breakpointMd) {
   ul {
     min-height: auto;

src/components/StockSection.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="stock-section">
+  <section class="stock-section">
     <transition name="tab-change" mode="out-in">
       <keep-alive>
         <component :is="chosenSectionComponent" :key="chosenSectionComponent"></component>
       </keep-alive>
     </transition>
-  </div>
+  </section>
 </template>
 
 <script lang="ts">
@@ -56,6 +56,8 @@ export default defineComponent({
 .stock-section {
   grid-row: 1 / 4;
   grid-column: 2;
+
+  overflow: hidden;
 }
 
 // Stock tabs styles
@@ -70,7 +72,6 @@ export default defineComponent({
       width: 100%;
     }
   }
- 
 }
 </style>
 

src/components/TrainImageSection.vue

@@ -83,8 +83,6 @@ export default defineComponent({
 
   watch: {
     chosenVehicle(vehicle: Vehicle, prevVehicle: Vehicle) {
-      console.log(vehicle);
-
       if (vehicle && vehicle.type != prevVehicle?.type) {
         this.store.imageLoading = true;
       }

src/styles/global.scss

@@ -3,7 +3,7 @@
 $breakpointMd: 960px;
 $breakpointSm: 550px;
 
-$bgColor: #2c3149;
+$bgColor: #2b3552;
 $textColor: #fff;
 $secondaryColor: #222;
 $accentColor: #e4c428;
@@ -86,6 +86,8 @@ button.btn {
 
   outline: none;
   background-color: #222;
+  border-radius: 8px;
+  font-weight: bold;
 
   transition: all 250ms;
 
@@ -120,15 +122,6 @@ button.btn {
       outline: 1px solid white;
     }
   }
-
-  &--choice {
-    padding: 0.25em 0.3em;
-    background-color: #222;
-
-    &:focus-visible {
-      outline: 1px solid white;
-    }
-  }
 }
 
 select,