From 60d8da95984d2e91050eae05e88f52a8fcac72aa Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sun, 14 Nov 2021 17:42:13 +0100
Subject: [PATCH] Update 1.0.4

---
 .firebase/hosting.ZGlzdA.cache   |  26 +--
 package.json                     |   2 +-
 src/App.vue                      |  57 ++++-
 src/components/InputsSection.vue | 375 +++++++++++++++++++------------
 src/components/ListSection.vue   | 146 ++++++------
 src/store.ts                     |  20 +-
 src/styles/global.scss           |  11 +-
 src/types.ts                     |   6 +
 vue.config.js                    |   3 +
 9 files changed, 405 insertions(+), 241 deletions(-)
 create mode 100644 vue.config.js

diff --git a/.firebase/hosting.ZGlzdA.cache b/.firebase/hosting.ZGlzdA.cache
index 57329bd..c34e936 100644
--- a/.firebase/hosting.ZGlzdA.cache
+++ b/.firebase/hosting.ZGlzdA.cache
@@ -1,13 +1,13 @@
-favicon.ico,1636827777911,665ba81c9556ba00abb1a0fa575fe801b3c35f23481b17528a211b8c3021f7cd
-index.html,1636827777911,fa8eaa2d6bd4e541427ec07347d7da71f50612ecf4ef3a45fdccaeace6928dc1
-css/app.0c78126f.css,1636827777919,1ebc7accdf21a47ba3ab8670b0418a2d02dbd8f3026a9dbb395d90e5e6892598
-img/add-icon.a0f313fe.svg,1636827777920,be43aa8b694c90777971ad2d7f611f52c7ee172131fe2e24a82348891bb6aa18
-img/higher-icon.68df973e.svg,1636827777920,258bcb0fc4c62a0ecd53681bfa4777451e0cb4b980e1094f68d89d4077fa657a
-img/lower-icon.7c306380.svg,1636827777911,286e1759ea8d4c11327f425f6d6af41603b329dab36c419b228acbea217c2080
-img/remove-icon.09c0dbc9.svg,1636827777919,1e01bccdf38cee755fc54c9768b4089fdb11d904a6b9aa86fcb20a2357dc8d61
-img/sub-icon.bfa10f67.svg,1636827777919,afa120d2f8afe18161a6ed011eb0482ef9604fd35c1d3be8cd93b1087b1138eb
-img/logo.c9fcc748.svg,1636827777919,59a9ce681c6123558f2b025931a262148f1d0bb47d5a3300a14a2e9020a85bc9
-js/app.78b717a5.js,1636827777919,ddc6792e8609c4c1f5d656e3a44976aa859459c5215fe845aba915abe52ce623
-js/app.78b717a5.js.map,1636827777919,b3a23756524af4e39c8f58e977f76d4696d81873ad5289b97329d3711ee0462f
-js/chunk-vendors.ed762bc1.js,1636827777919,38a7f26b89a6c5b680c0a97a5dc9687420e7a0b52b5259130ddd6a0ffbb21375
-js/chunk-vendors.ed762bc1.js.map,1636827777920,4e64727d5a57baffe7203fe67e814b80b4257060b5284f05e599e18037d18e33
+favicon.ico,1636839873685,665ba81c9556ba00abb1a0fa575fe801b3c35f23481b17528a211b8c3021f7cd
+index.html,1636839873685,2bfbcf0ae387abf043a6c4012c8383751c3df6bac2abb5fbfa00ecb7ec1e29ba
+css/app.e318326a.css,1636839873687,5f8edf44d0d80443531b74e2fba1c192d8f524f7a92daab577abd758c568eb73
+img/add-icon.a0f313fe.svg,1636839873690,be43aa8b694c90777971ad2d7f611f52c7ee172131fe2e24a82348891bb6aa18
+img/higher-icon.68df973e.svg,1636839873690,258bcb0fc4c62a0ecd53681bfa4777451e0cb4b980e1094f68d89d4077fa657a
+img/lower-icon.7c306380.svg,1636839873685,286e1759ea8d4c11327f425f6d6af41603b329dab36c419b228acbea217c2080
+img/remove-icon.09c0dbc9.svg,1636839873690,1e01bccdf38cee755fc54c9768b4089fdb11d904a6b9aa86fcb20a2357dc8d61
+img/logo.c9fcc748.svg,1636839873690,59a9ce681c6123558f2b025931a262148f1d0bb47d5a3300a14a2e9020a85bc9
+img/sub-icon.bfa10f67.svg,1636839873690,afa120d2f8afe18161a6ed011eb0482ef9604fd35c1d3be8cd93b1087b1138eb
+js/app.e79b9cbd.js,1636839873687,371740d1e17483c569dbfde222073ba25cca03b522d4af59c9dd617d3c5372e6
+js/app.e79b9cbd.js.map,1636839873691,2e93a681e3d233d413b4045488ba0fedd0cf40592570b9e743b52bd36d8b5c62
+js/chunk-vendors.e3e59fe7.js,1636839873690,b8da867c1596780117d35525b8065aeaa4337aa2caee1c5bc043834baf717406
+js/chunk-vendors.e3e59fe7.js.map,1636839873692,cdae68767a1b7010a6ccdcb43952d9fcd5d1d974617e4d02b4da5919d28dfbac
diff --git a/package.json b/package.json
index 33fee84..60bbd4a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pojazdownik",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
diff --git a/src/App.vue b/src/App.vue
index f460e0b..d106553 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,13 +5,17 @@
   </header>
 
   <main>
+    <div class="image-preview" v-if="store.vehiclePreviewSrc != ''" @click="() => (store.vehiclePreviewSrc = '')">
+      <img :src="store.vehiclePreviewSrc" alt="preview" />
+    </div>
+
     <inputs-section />
     <list-section />
   </main>
   <footer>
     <div class="text--grayed" style="margin-bottom: 0.25em">
-      Ta strona ma charakter informacyjny. Autor nie ponosi odpowiedzialności za
-      tworzenie pociągów niezgodnych z regulaminem symulatora Train Driver 2!
+      Ta strona ma charakter informacyjny. Autor nie ponosi odpowiedzialności za tworzenie pociągów niezgodnych z
+      regulaminem symulatora Train Driver 2!
     </div>
     &copy;
     <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
@@ -20,12 +24,13 @@
 </template>
 
 <script lang="ts">
-import packageInfo from ".././package.json";
+import packageInfo from '.././package.json';
 
-import { defineComponent } from "vue";
+import { defineComponent, inject } from 'vue';
 
-import ListSection from "@/components/ListSection.vue";
-import InputsSection from "@/components/InputsSection.vue";
+import ListSection from '@/components/ListSection.vue';
+import InputsSection from '@/components/InputsSection.vue';
+import { IStore } from './types';
 
 export default defineComponent({
   components: {
@@ -35,17 +40,30 @@ export default defineComponent({
   data: () => ({
     VERSION: packageInfo.version,
 
-    logoSVG: require("@/assets/logo.svg"),
+    logoSVG: require('@/assets/logo.svg'),
   }),
 
   setup() {
-    return {};
+    const store = inject('Store') as IStore;
+
+    return {
+      store,
+    };
+  },
+  mounted() {
+    window.addEventListener('keydown', (ev) => {
+      if (this.store.vehiclePreviewSrc == '') return;
+
+      if (ev.key.toLowerCase() == 'escape') this.store.vehiclePreviewSrc = '';
+    });
+
+    // window.focus();
   },
 });
 </script>
 
 <style lang="scss">
-@import "./styles/global";
+@import './styles/global';
 
 /* APP */
 #app {
@@ -91,6 +109,27 @@ h2 {
   font-size: 1.5em;
 }
 
+.image-preview {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 99;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 100%;
+  height: 100%;
+
+  background: rgba(black, 0.85);
+
+  img {
+    width: 90%;
+    max-width: 800px;
+  }
+}
+
 /* MAIN SECTION */
 
 main {
diff --git a/src/components/InputsSection.vue b/src/components/InputsSection.vue
index ec9539f..da23dfe 100644
--- a/src/components/InputsSection.vue
+++ b/src/components/InputsSection.vue
@@ -4,88 +4,74 @@
       <div class="input_container">
         <h2 class="input_header">LOKOMOTYWA / ZESP. TRAKCYJNY</h2>
         <div class="input_radio">
-          <label v-for="label in locoLabels" :for="label.id" :key="label.id">
-            <input
-              type="radio"
-              name="loco"
-              :id="label.id"
-              :value="label.id"
-              :checked="store.chosenLocoPower == label.id"
-              @change="onLocoPowerChange(label.id)"
-              v-model="store.chosenLocoPower"
-            />
-            <span>{{ label.title }}</span>
-          </label>
+          <button
+            v-for="label in locoLabels"
+            :key="label.id"
+            @click="onLocoPowerChange(label.id)"
+            :class="{ checked: store.chosenLocoPower == label.id }"
+          >
+            {{ label.title }}
+          </button>
         </div>
 
         <div class="input_list type">
           <select
             id="loco-select"
+            ref="loco-select"
             v-model="store.chosenLoco"
             @change="onLocoTypeChange"
+            data-select="loco"
           >
             <option :value="null" disabled>Wybierz pojazd z listy</option>
             <option v-for="loco in locoOptions" :value="loco" :key="loco.type">
+              {{ loco.supportersOnly ? '*S*' : '' }}
               {{ loco.type }}
             </option>
           </select>
 
-          <button @click="addVehicle">
+          <button class="btn--add" @click="addVehicle">
             <img :src="icons.add" alt="add vehicle" />
           </button>
         </div>
 
         <div class="input_checkbox">
-          <label for="supporter">
-            <input
-              type="checkbox"
-              id="supporter"
-              v-model="store.showSupporter"
-            />
-            <span>Pokaż pojazdy dla supporterów</span>
-          </label>
+          <button @click="onShowSupporterChange" :class="{ checked: this.store.showSupporter }">
+            Pokaż tylko pojazdy dla supporterów
+          </button>
         </div>
       </div>
     </div>
 
-    <div
-      class="input inputs_car"
-      :class="{
-        disabled:
-          store.chosenLocoPower == 'loco-ezt' ||
-          store.chosenLocoPower == 'loco-szt',
-      }"
-    >
+    <div class="input inputs_car">
       <div class="input_container">
         <h2 class="input_header">RODZAJ WAGONU</h2>
         <div class="input_radio">
-          <label v-for="label in carLabels" :for="label.id" :key="label.id">
-            <input
-              type="radio"
-              name="car"
-              :id="label.id"
-              :checked="store.chosenCarUseType == label.id"
-              :value="label.id"
-              v-model="store.chosenCarUseType"
-              @change="onCarUseTypeChange(label.id)"
-            />
-            <span>{{ label.title }}</span>
-          </label>
+          <button
+            v-for="label in carLabels"
+            :key="label.id"
+            @click="onCarUseTypeChange(label.id)"
+            :class="{ checked: store.chosenCarUseType == label.id }"
+          >
+            {{ label.title }}
+          </button>
         </div>
 
         <div class="input_list type">
           <select
             id="car-select"
+            ref="car-select"
             v-model="store.chosenCar"
             @change="onCarTypeChange"
+            data-select="car"
           >
             <option :value="null" disabled>Wybierz wagon z listy</option>
             <option v-for="car in carOptions" :value="car" :key="car.type">
+              {{ car.supportersOnly ? '*S*' : '' }}
               {{ car.type }}
             </option>
           </select>
 
-          <button @click="addVehicle">
+          <button class="btn--add" @click="addVehicle">
             <img :src="icons.add" alt="add vehicle" />
           </button>
         </div>
@@ -98,21 +84,13 @@
               (store.chosenCar && store.chosenCar.useType == 'car-passenger') ||
               !store.chosenCar
             "
+            data-select="cargo"
             v-model="store.chosenCargo"
           >
-            <option
-              :value="null"
-              v-if="!store.chosenCar || !store.chosenCar.loadable"
-            >
-              brak dostępnych ładunków
-            </option>
+            <option :value="null" v-if="!store.chosenCar || !store.chosenCar.loadable">brak dostępnych ładunków</option>
 
             <option :value="null" v-else>próżny</option>
-            <option
-              v-for="cargo in store.chosenCar?.cargoList"
-              :value="cargo"
-              :key="cargo.id"
-            >
+            <option v-for="cargo in store.chosenCar?.cargoList" :value="cargo" :key="cargo.id">
               {{ cargo.id }}
             </option>
           </select>
@@ -123,62 +101,153 @@
 </template>
 
 <script lang="ts">
-import { ICarWagon, ILocomotive, IStore } from "@/types";
-import { defineComponent, inject } from "vue";
+import { ICarWagon, ILocomotive, IStore } from '@/types';
+import { defineComponent, inject } from 'vue';
 
-function isLocomotive(
-  vehicle: ILocomotive | ICarWagon
-): vehicle is ILocomotive {
+function isLocomotive(vehicle: ILocomotive | ICarWagon): vehicle is ILocomotive {
   return (vehicle as ILocomotive).power !== undefined;
 }
 
 export default defineComponent({
   setup() {
-    const store = inject("Store") as IStore;
+    const store = inject('Store') as IStore;
 
     return {
       store,
-      locoDataList: inject("locoDataList") as ILocomotive[],
-      carDataList: inject("carDataList") as ICarWagon[],
-      isTrainPassenger: inject("isTrainPassenger") as boolean,
-      totalLength: inject("totalLength") as number,
-      totalMass: inject("totalMass") as number,
-      maxStockSpeed: inject("maxStockSpeed") as number,
-      maxAllowedSpeed: inject("maxAllowedSpeed") as number,
+      locoDataList: inject('locoDataList') as ILocomotive[],
+      carDataList: inject('carDataList') as ICarWagon[],
+      isTrainPassenger: inject('isTrainPassenger') as boolean,
+      totalLength: inject('totalLength') as number,
+      totalMass: inject('totalMass') as number,
+      maxStockSpeed: inject('maxStockSpeed') as number,
+      maxAllowedSpeed: inject('maxAllowedSpeed') as number,
     };
   },
 
+  mounted() {
+    document.addEventListener('wheel', (ev) => {
+      if (!ev.target) return;
+
+      const selectAttr = (ev.target as Element).attributes.getNamedItem('data-select');
+
+      if (!selectAttr) return;
+
+      if (selectAttr.value == 'loco') {
+        const chosenLoco = this.store.chosenLoco;
+
+        if (!chosenLoco) {
+          this.store.chosenLoco = this.locoOptions[0];
+          this.onLocoTypeChange();
+          return;
+        }
+
+        if (ev.deltaY > 0) {
+          const nextOptionIndex = this.locoOptions.findIndex((opt) => opt.type == chosenLoco.type) + 1;
+
+          if (nextOptionIndex >= this.locoOptions.length) return;
+
+          this.store.chosenLoco = this.locoOptions[nextOptionIndex];
+          this.onLocoTypeChange();
+        } else {
+          const prevOptionIndex = this.locoOptions.findIndex((opt) => opt.type == chosenLoco.type) - 1;
+
+          if (prevOptionIndex < 0) return;
+
+          this.store.chosenLoco = this.locoOptions[prevOptionIndex];
+          this.onLocoTypeChange();
+        }
+      }
+
+      if (selectAttr.value == 'car') {
+        const chosenCar = this.store.chosenCar;
+
+        if (!chosenCar) {
+          this.store.chosenCar = this.carOptions[0];
+          this.onCarTypeChange();
+
+          return;
+        }
+
+        if (ev.deltaY > 0) {
+          const nextOptionIndex = this.carOptions.findIndex((opt) => opt.type == chosenCar.type) + 1;
+
+          if (nextOptionIndex >= this.carOptions.length) return;
+
+          this.store.chosenCar = this.carOptions[nextOptionIndex];
+          this.onCarTypeChange();
+        } else {
+          const prevOptionIndex = this.carOptions.findIndex((opt) => opt.type == chosenCar.type) - 1;
+
+          if (prevOptionIndex < 0) return;
+
+          this.store.chosenCar = this.carOptions[prevOptionIndex];
+          this.onCarTypeChange();
+        }
+      }
+
+      if (selectAttr.value == 'cargo') {
+        if (!this.store.chosenCar) return;
+
+        if (!this.store.chosenCar.cargoList || this.store.chosenCar.cargoList.length == 0) return;
+
+        const chosenCargoList = this.store.chosenCar.cargoList;
+
+        if (!this.store.chosenCargo) {
+          this.store.chosenCargo = chosenCargoList[0];
+          return;
+        }
+
+        if (ev.deltaY > 0) {
+          const nextOptionIndex = chosenCargoList.findIndex((cargo) => cargo.id == this.store.chosenCargo?.id) + 1;
+
+          if (nextOptionIndex >= chosenCargoList.length) return;
+
+          this.store.chosenCargo = chosenCargoList[nextOptionIndex];
+        } else {
+          const prevOptionIndex = chosenCargoList.findIndex((cargo) => cargo.id == this.store.chosenCargo?.id) - 1;
+
+          if (prevOptionIndex < 0) return;
+
+          this.store.chosenCargo = chosenCargoList[prevOptionIndex];
+        }
+      }
+    });
+
+    this.onLocoPowerChange('loco-e');
+    this.onCarUseTypeChange('car-passenger');
+  },
+
   data: () => ({
     icons: {
-      add: require("@/assets/add-icon.svg"),
+      add: require('@/assets/add-icon.svg'),
     },
     locoLabels: [
       {
-        id: "loco-e",
-        title: "ELEKTROWÓZ",
+        id: 'loco-e',
+        title: 'ELEKTROWÓZ',
       },
       {
-        id: "loco-s",
-        title: "SPALINOWÓZ",
+        id: 'loco-s',
+        title: 'SPALINOWÓZ',
       },
       {
-        id: "loco-ezt",
-        title: "EZT",
+        id: 'loco-ezt',
+        title: 'EZT',
       },
       {
-        id: "loco-szt",
-        title: "SZT",
+        id: 'loco-szt',
+        title: 'SZT',
       },
     ],
 
     carLabels: [
       {
-        id: "car-passenger",
-        title: "PASAŻERSKI",
+        id: 'car-passenger',
+        title: 'PASAŻERSKI',
       },
       {
-        id: "car-cargo",
-        title: "TOWAROWY",
+        id: 'car-cargo',
+        title: 'TOWAROWY',
       },
     ],
   }),
@@ -187,28 +256,52 @@ export default defineComponent({
     locoOptions() {
       return this.locoDataList
         .filter((loco) => loco.power == this.store.chosenLocoPower)
-        .sort((a, b) => (a.type > b.type ? -1 : 1));
+        .sort((a, b) => (a.type > b.type ? 1 : -1))
+        .sort((a) => (a.supportersOnly ? 1 : -1));
     },
 
     carOptions() {
       return this.carDataList
         .filter((car) => car.useType == this.store.chosenCarUseType)
-        .sort((a, b) => (a.type > b.type ? 1 : -1));
+        .sort((a, b) => (a.type > b.type ? 1 : -1))
+        .sort((a) => (a.supportersOnly ? 1 : -1));
     },
   },
 
   methods: {
+    onShowSupporterChange() {
+      this.store.showSupporter = !this.store.showSupporter;
+
+      console.log(this.store.showSupporter);
+
+      if (this.store.showSupporter) {
+        const chosenVehicle = this.store.chosenCar || this.store.chosenLoco;
+
+        if (!chosenVehicle) return;
+
+        if (!chosenVehicle.supportersOnly) {
+          this.store.chosenCar = null;
+          this.store.chosenLoco = null;
+        }
+      }
+    },
+
     onLocoPowerChange(inputId: string) {
       this.store.chosenLoco = null;
       this.store.imageLoading = false;
+
+      this.store.chosenLocoPower = inputId;
+
+      (this.$refs['loco-select'] as HTMLElement).focus();
     },
 
     onCarUseTypeChange(inputId: string) {
       this.store.chosenCar = null;
-
-      if (inputId == "car-passenger") this.store.chosenCargo = null;
-
       this.store.imageLoading = false;
+
+      this.store.chosenCarUseType = inputId;
+
+      if (inputId == 'car-passenger') this.store.chosenCargo = null;
     },
 
     onCarTypeChange() {
@@ -231,15 +324,9 @@ export default defineComponent({
       if (!vehicle) return;
 
       const previousStock =
-        this.store.stockList.length > 0
-          ? this.store.stockList[this.store.stockList.length - 1]
-          : null;
+        this.store.stockList.length > 0 ? this.store.stockList[this.store.stockList.length - 1] : null;
 
-      if (
-        isLocomotive(vehicle) &&
-        previousStock &&
-        previousStock.type == vehicle.type
-      ) {
+      if (isLocomotive(vehicle) && previousStock && previousStock.type == vehicle.type) {
         this.store.stockList[this.store.stockList.length - 1].count++;
         return;
       }
@@ -262,33 +349,23 @@ export default defineComponent({
         maxSpeed: vehicle.maxSpeed,
         isLoco: isLocomotive(vehicle),
         cargo:
-          !isLocomotive(vehicle) && vehicle.loadable && this.store.chosenCargo
-            ? this.store.chosenCargo
-            : undefined,
+          !isLocomotive(vehicle) && vehicle.loadable && this.store.chosenCargo ? this.store.chosenCargo : undefined,
         count: 1,
         imgSrc: vehicle.imageSrc,
         useType: isLocomotive(vehicle) ? vehicle.power : vehicle.useType,
+        supportersOnly: vehicle.supportersOnly,
       };
 
-      if (
-        isLocomotive(vehicle) &&
-        this.store.stockList.length > 0 &&
-        !this.store.stockList[0].isLoco
-      )
+      if (isLocomotive(vehicle) && this.store.stockList.length > 0 && !this.store.stockList[0].isLoco)
         this.store.stockList.unshift(stockObj);
       else this.store.stockList.push(stockObj);
     },
   },
-
-  mounted() {
-    this.onLocoPowerChange("loco-e");
-    this.onCarUseTypeChange("car-passenger");
-  },
 });
 </script>
 
 <style lang="scss" scoped>
-@import "../styles/global";
+@import '../styles/global';
 
 .inputs {
   display: flex;
@@ -312,51 +389,60 @@ export default defineComponent({
   }
 
   &_radio {
-    label span {
+    button {
       padding: 0.25em 0.55em;
+      margin-right: 0.5em;
       border: 2px solid white;
+      color: white;
+      font-size: 1em;
+    }
+
+    button:focus {
+      color: $accentColor;
+    }
+
+    button.checked {
+      border-color: $accentColor;
+      color: $accentColor;
+      font-weight: bold;
     }
   }
 
-  &_checkbox {
-    label span {
-      /* padding: 0.25em 0.55em; */
-      /* border: 2px solid white; */
-      color: #aaa;
-
-      &::before {
-        content: "";
-        display: inline-block;
-
-        width: 1.5ex;
-        height: 1.5ex;
-        background: #aaa;
-
-        margin-right: 0.5em;
-      }
-    }
-
-    input:checked + span::before {
-      background-color: $accentColor;
-    }
-  }
-
-  &_radio,
   &_checkbox {
     margin: 1em 0;
 
-    label {
-      cursor: pointer;
-      margin-right: 0.5em;
+    padding: 0 1.5em;
 
-      input {
-        display: none;
+    button {
+      position: relative;
+      color: #999;
 
-        &:checked + span {
-          border-color: $accentColor;
-          color: $accentColor;
+      &::before {
+        content: '';
+        width: 1.5ch;
+        height: 1.5ch;
+
+        display: block;
+
+        position: absolute;
+        bottom: 0.2ch;
+        left: -1.5em;
+
+        background-color: #999;
+      }
+
+      &.checked {
+        color: white;
+        font-weight: bold;
+
+        &::before {
+          background-color: $accentColor;
         }
       }
+
+      &:focus {
+        outline: 1px solid $accentColor;
+      }
     }
   }
 
@@ -364,15 +450,24 @@ export default defineComponent({
     margin: 0.5em 0;
 
     display: flex;
+
+    select:focus {
+      border-color: $accentColor;
+    }
   }
 
   &_list button {
     margin-left: 0.5em;
+    font-size: 0.8em;
 
     &:hover img {
       border-color: $accentColor;
     }
 
+    &:focus img {
+      border-color: $accentColor;
+    }
+
     img {
       border: 2px solid white;
       padding: 0.25em;
@@ -400,4 +495,4 @@ export default defineComponent({
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/ListSection.vue b/src/components/ListSection.vue
index c5dbc87..d64a5fc 100644
--- a/src/components/ListSection.vue
+++ b/src/components/ListSection.vue
@@ -2,27 +2,28 @@
   <div class="bottom">
     <section class="image">
       <div class="image__wrapper">
-        <div class="image__content">
-          <div class="no-img" v-if="!store.chosenCar && !store.chosenLoco">
-            PODGLĄD WYBRANEGO POJAZDU
-          </div>
-          <div class="empty-message" v-if="store.imageLoading">
-            ŁADOWANIE OBRAZU...
-          </div>
+        <div
+          class="image__content"
+          :class="{
+            supporter: (store.chosenLoco || store.chosenCar)?.supportersOnly,
+          }"
+        >
+          <div class="no-img" v-if="!store.chosenCar && !store.chosenLoco">PODGLĄD WYBRANEGO POJAZDU</div>
+          <div class="empty-message" v-if="store.imageLoading">ŁADOWANIE OBRAZU...</div>
           <img
-            v-if="store.chosenLoco && !store.chosenCar"
-            :src="store.chosenLoco.imageSrc"
-            :alt="store.chosenLoco.type"
+            v-if="store.chosenLoco || store.chosenCar"
+            :src="store.chosenLoco?.imageSrc || store.chosenCar?.imageSrc"
+            :alt="store.chosenLoco?.type || store.chosenCar?.type"
             @load="onImageLoad"
             @click="onImageClick"
           />
-          <img
+          <!-- <img
             v-if="store.chosenCar"
             :src="store.chosenCar.imageSrc"
             :alt="store.chosenCar.type"
             @load="onImageLoad"
             @click="onImageClick"
-          />
+          /> -->
         </div>
       </div>
     </section>
@@ -31,9 +32,8 @@
 
     <section class="stock-list">
       <div class="stock-list_buttons">
-        <button class="btn btn--copy" @click="downloadStock">
-          POBIERZ POCIĄG
-        </button>
+        <button class="btn" @click="downloadStock">POBIERZ POCIĄG</button>
+        <button class="btn" @click="resetStock">ZRESETUJ LISTĘ</button>
       </div>
       <div class="stock-list_specs">
         Masa: <span class="text--accent">{{ totalMass }}</span> t | Długość:
@@ -46,13 +46,9 @@
           Lokomotywy EP07 i EP08 są przeznaczone jedynie do ruchu pasażerskiego!
         </div>
 
-        <div class="warning" v-if="warnings.trainTooLong.value">
-          Ten skład jest za długi!
-        </div>
+        <div class="warning" v-if="warnings.trainTooLong.value">Ten skład jest za długi!</div>
 
-        <div class="warning" v-if="warnings.trainTooHeavy.value">
-          Ten skład jest za ciężki!
-        </div>
+        <div class="warning" v-if="warnings.trainTooHeavy.value">Ten skład jest za ciężki!</div>
       </div>
 
       <ul>
@@ -76,6 +72,7 @@
             @dragover="allowDrop"
             draggable="true"
           >
+            <span v-if="stock.supportersOnly" style="color: salmon"> *S* </span>
             <span>
               {{ stock.isLoco ? stock.type : getCarSpecFromType(stock.type) }}
             </span>
@@ -113,38 +110,40 @@
 </template>
 
 <script lang="ts">
-import { ComputedRef, defineComponent, inject } from "vue";
-import { ICarWagon, ILocomotive, IStore } from "@/types";
+import { computed, ComputedRef, defineComponent, inject } from 'vue';
+import { ICarWagon, ILocomotive, IStore } from '@/types';
 
 export default defineComponent({
   setup() {
-    const store = inject("Store") as IStore;
+    const store = inject('Store') as IStore;
 
     return {
       store,
-      locoDataList: inject("locoDataList") as ILocomotive[],
-      carDataList: inject("carDataList") as ICarWagon[],
-      isTrainPassenger: inject("isTrainPassenger") as boolean,
-      totalLength: inject("totalLength") as number,
-      totalMass: inject("totalMass") as number,
-      maxStockSpeed: inject("maxStockSpeed") as number,
-      maxAllowedSpeed: inject("maxAllowedSpeed") as number,
+      locoDataList: inject('locoDataList') as ILocomotive[],
+      carDataList: inject('carDataList') as ICarWagon[],
+      isTrainPassenger: inject('isTrainPassenger') as boolean,
+      totalLength: inject('totalLength') as number,
+      totalMass: inject('totalMass') as number,
+      maxStockSpeed: inject('maxStockSpeed') as number,
+      maxAllowedSpeed: inject('maxAllowedSpeed') as number,
 
-      warnings: inject("warnings") as {
+      warnings: inject('warnings') as {
         locoNotSuitable: ComputedRef<boolean>;
         trainTooLong: ComputedRef<boolean>;
         trainTooHeavy: ComputedRef<boolean>;
       },
+
+      hasSupporterOnlyVehicle: computed(() => store.stockList.some((stock) => stock.supportersOnly)),
     };
   },
 
   data: () => ({
     icons: {
-      add: require("@/assets/add-icon.svg"),
-      sub: require("@/assets/sub-icon.svg"),
-      remove: require("@/assets/remove-icon.svg"),
-      lower: require("@/assets/lower-icon.svg"),
-      higher: require("@/assets/higher-icon.svg"),
+      add: require('@/assets/add-icon.svg'),
+      sub: require('@/assets/sub-icon.svg'),
+      remove: require('@/assets/remove-icon.svg'),
+      lower: require('@/assets/lower-icon.svg'),
+      higher: require('@/assets/higher-icon.svg'),
     },
 
     draggedVehicleID: -1,
@@ -154,11 +153,14 @@ export default defineComponent({
     onListItemFocus(vehicleID: number) {
       const vehicle = this.store.stockList[vehicleID];
 
+      if (this.store.showSupporter && !vehicle.supportersOnly) {
+        this.store.showSupporter = false;
+      }
+
       if (vehicle.isLoco) {
         this.store.chosenLocoPower = vehicle.useType;
 
-        this.store.chosenLoco =
-          this.locoDataList.find((v) => v.type == vehicle.type) || null;
+        this.store.chosenLoco = this.locoDataList.find((v) => v.type == vehicle.type) || null;
 
         this.store.chosenCar = null;
         this.store.chosenCargo = null;
@@ -170,26 +172,28 @@ export default defineComponent({
       this.store.chosenCarUseType = vehicle.useType;
 
       this.store.chosenLoco = null;
-      this.store.chosenCar =
-        this.carDataList.find((v) => v.type == vehicle.type) || null;
+      this.store.chosenCar = this.carDataList.find((v) => v.type == vehicle.type) || null;
       this.store.chosenCargo = vehicle.cargo || null;
 
       // this.chose = vehicle.useType;
     },
 
     getCarSpecFromType(typeStr: string) {
-      const specArray = typeStr.split("_");
+      const specArray = typeStr.split('_');
 
       if (specArray.length == 0) return null;
 
       /* 111a_Grafitti_1 */
-      if (specArray.length == 3)
-        return `${specArray[0]} ${specArray[1]}-${specArray[2]}`;
+      if (specArray.length == 3) return `${specArray[0]} ${specArray[1]}-${specArray[2]}`;
 
       /* 111a_PKP_Bnouz_01 */
       return `${specArray[0]} ${specArray[2]}-${specArray[3]} (${specArray[1]})`;
     },
 
+    resetStock() {
+      this.store.stockList.length = 0;
+    },
+
     addStock(index: number) {
       this.store.stockList[index].count++;
     },
@@ -201,9 +205,7 @@ export default defineComponent({
     },
 
     removeStock(index: number) {
-      this.store.stockList = this.store.stockList.filter(
-        (stock, i) => i != index
-      );
+      this.store.stockList = this.store.stockList.filter((stock, i) => i != index);
     },
 
     moveUpStock(index: number) {
@@ -232,39 +234,36 @@ export default defineComponent({
       ) {
         ``;
         const allowDownload = confirm(
-          "Jazda tym pociągiem może być niezgodna z regulaminem symulatora! Czy na pewno chcesz kontynuować?"
+          'Jazda tym pociągiem może być niezgodna z regulaminem symulatora! Czy na pewno chcesz kontynuować?'
         );
 
         if (!allowDownload) return;
       }
 
-      const fileName = prompt("Nazwij plik:", "pociag");
+      const fileName = prompt('Nazwij plik:', 'pociag');
 
       if (!fileName) return;
 
       const stockString = this.store.stockList
         .map((stock) => {
-          let s =
-            stock.isLoco || !stock.cargo
-              ? stock.type
-              : `${stock.type}:${stock.cargo.id}`;
+          let s = stock.isLoco || !stock.cargo ? stock.type : `${stock.type}:${stock.cargo.id}`;
 
           let final = s;
           for (let i = 0; i < stock.count - 1; i++) final += `;${s}`;
 
           return final;
         })
-        .join(";");
+        .join(';');
 
       const blob = new Blob([stockString]);
-      const file = fileName + ".con";
+      const file = fileName + '.con';
 
-      var e = document.createEvent("MouseEvents"),
-        a = document.createElement("a");
+      var e = document.createEvent('MouseEvents'),
+        a = document.createElement('a');
       a.download = file;
       a.href = window.URL.createObjectURL(blob);
-      a.dataset.downloadurl = ["", a.download, a.href].join(":");
-      e.initEvent("click", true, false);
+      a.dataset.downloadurl = ['', a.download, a.href].join(':');
+      e.initEvent('click', true, false);
       a.dispatchEvent(e);
     },
 
@@ -275,20 +274,17 @@ export default defineComponent({
     onDrop(e: DragEvent, vehicleIndex: number) {
       e.preventDefault();
 
-      let targetEl: Element | null = this.$refs[
-        `item-${vehicleIndex}`
-      ] as Element;
+      let targetEl: Element | null = this.$refs[`item-${vehicleIndex}`] as Element;
 
       if (!targetEl) return;
 
-      const dataID = targetEl.attributes.getNamedItem("data-id")?.textContent;
+      const dataID = targetEl.attributes.getNamedItem('data-id')?.textContent;
 
       if (!dataID) return;
 
       const tempVehicle = this.store.stockList[Number(dataID)];
 
-      this.store.stockList[Number(dataID)] =
-        this.store.stockList[this.draggedVehicleID];
+      this.store.stockList[Number(dataID)] = this.store.stockList[this.draggedVehicleID];
       this.store.stockList[this.draggedVehicleID] = tempVehicle;
     },
 
@@ -305,14 +301,14 @@ export default defineComponent({
 
       if (!chosenVehicle) return;
 
-      console.log(chosenVehicle.imageSrc.replace("300", "800"));
+      this.store.vehiclePreviewSrc = chosenVehicle.imageSrc.replace('300', '800');
     },
   },
 });
 </script>
 
 <style lang="scss" scoped>
-@import "../styles/global";
+@import '../styles/global';
 
 .bottom {
   display: flex;
@@ -364,6 +360,10 @@ export default defineComponent({
 
     height: 100%;
 
+    &.supporter {
+      border: 1px solid salmon;
+    }
+
     img {
       width: 100%;
       height: 100%;
@@ -396,10 +396,16 @@ export default defineComponent({
   width: 100%;
 
   &_buttons {
+    margin-bottom: 0.5em;
     button {
       font-size: 0.9em;
-      padding: 0.4em 0.5em;
-      margin-bottom: 0.5em;
+      padding: 0.4em 0.55em;
+      margin-right: 0.5em;
+
+      &:focus {
+        color: $accentColor;
+        border-color: $accentColor;
+      }
     }
   }
 
@@ -466,4 +472,4 @@ export default defineComponent({
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/store.ts b/src/store.ts
index 652a9d7..a668e8c 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -20,8 +20,13 @@ export const Store: IStore = reactive({
 
     stockList: [] as IStock[],
     cargoOptions: [] as any[][],
+    // locoOptions: [] as ILocomotive[],
+    // carOptions: [] as ICarWagon[],
+
+    vehiclePreviewSrc: ""
 })
 
+
 export const locoDataList = computed(() => Object.keys(vehicleDataJSON).reduce(
     (acc, vehicleTypeKey) => {
         if (!vehicleTypeKey.startsWith("loco")) return acc;
@@ -31,7 +36,7 @@ export const locoDataList = computed(() => Object.keys(vehicleDataJSON).reduce(
         ];
 
         locoVehiclesData.forEach((loco) => {
-            if (loco[4] && !Store.showSupporter) return;
+            if (Store.showSupporter && !loco[4]) return;
 
             const locoType = loco[0] as string;
 
@@ -117,7 +122,8 @@ export const carDataList = computed(() => Object.keys(vehicleDataJSON).reduce(
         ];
 
         carVehiclesData.forEach((car) => {
-            if (car[3] && !Store.showSupporter) return;
+            if (Store.showSupporter && !car[3]) return;
+
 
             const carPropsData = vehiclePropsJSON.find((v) =>
                 car[0].toString().includes(v.type)
@@ -132,10 +138,10 @@ export const carDataList = computed(() => Object.keys(vehicleDataJSON).reduce(
                 maxSpeed: Number(car[4] as string),
                 imageSrc: car[5] as string,
                 cargoList:
-                    carPropsData?.cargo.split(";").map((cargo) => ({
+                    carPropsData?.cargo.includes(";") ? carPropsData.cargo.split(";").map((cargo) => ({
                         id: cargo.split(":")[0],
                         totalMass: Number(cargo.split(":")[1]),
-                    })) || [],
+                    })) : [],
 
                 mass: carPropsData?.mass || 0,
                 length: carPropsData?.length || 0,
@@ -148,6 +154,7 @@ export const carDataList = computed(() => Object.keys(vehicleDataJSON).reduce(
 ));
 
 
+
 export const totalMass = computed(() => {
     return Store.stockList.reduce(
         (acc, stock) =>
@@ -244,7 +251,10 @@ export const warnings = {
     }),
 
     locoNotSuitable: computed(() => {
-        if (!isTrainPassenger.value && Store.stockList.length > 1 && Store.stockList.find(stock => stock.isLoco && stock.type.startsWith("EP"))) return true;
+        if (!isTrainPassenger.value
+            && Store.stockList.length > 1
+            && !Store.stockList.every(stock => stock.isLoco)
+            && Store.stockList.find(stock => stock.isLoco && stock.type.startsWith("EP"))) return true;
 
         return false;
     }),
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 3e643f8..8480bdb 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -49,7 +49,14 @@ button {
     padding: 0;
     margin: 0;
 
-    cursor: pointer;;
+    cursor: pointer;
+
+    font-size: 1em;
+    color: white;
+
+    &:hover {
+        color: $accentColor;
+    }
 }
 
 button.btn {
@@ -59,9 +66,7 @@ button.btn {
     border: 2px solid white;
     outline: none;
     background: none;
-    color: white;
 
-    font-size: 1em;
 
     transition: all 250ms;
 
diff --git a/src/types.ts b/src/types.ts
index 5ec2211..40ca1cb 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -11,6 +11,11 @@ export interface IStore {
 
   stockList: IStock[];
   cargoOptions: any[][];
+
+  // locoOptions: ILocomotive[];
+  // carOptions: ICarWagon[];
+
+  vehiclePreviewSrc: string;
 }
 
 export interface IVehicleData {
@@ -58,6 +63,7 @@ export interface IStock {
   maxSpeed: number;
   cargo?: { id: string; totalMass: number };
   isLoco: boolean;
+  supportersOnly: boolean;
   count: number;
   imgSrc: string;
 }
\ No newline at end of file
diff --git a/vue.config.js b/vue.config.js
new file mode 100644
index 0000000..9ed1f38
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  lintOnSave: false,
+};