From d46362a751e0193b5439250b8f066a2c248f8a04 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Mon, 22 Nov 2021 17:45:16 +0100
Subject: [PATCH] =?UTF-8?q?Kopiowanie=20sk=C5=82adu=20do=20schowka;=20mo?=
 =?UTF-8?q?=C5=BCliwo=C5=9B=C4=87=20losowania=20wagon=C3=B3w=20pasa=C5=BCe?=
 =?UTF-8?q?rskich?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .firebase/hosting.ZGlzdA.cache    |  29 ++++++------
 .ionide/symbolCache.db            | Bin 0 -> 8192 bytes
 src/assets/swap-icon.svg          |   5 +++
 src/components/InputsSection.vue  |  46 ++++++++++++-------
 src/components/ListSection.vue    |  71 +++++++++++++++++++++---------
 src/components/RandomizerCard.vue |  63 +++++++++++++++++++++-----
 src/main.ts                       |  20 ++++++++-
 src/store.ts                      |   7 +++
 src/styles/global.scss            |  10 ++++-
 src/types.ts                      |   4 +-
 src/utils/statsUtils.ts           |   4 +-
 11 files changed, 190 insertions(+), 69 deletions(-)
 create mode 100644 .ionide/symbolCache.db
 create mode 100644 src/assets/swap-icon.svg

diff --git a/.firebase/hosting.ZGlzdA.cache b/.firebase/hosting.ZGlzdA.cache
index f49a466..c9bf654 100644
--- a/.firebase/hosting.ZGlzdA.cache
+++ b/.firebase/hosting.ZGlzdA.cache
@@ -1,14 +1,15 @@
-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
+favicon.ico,1637599368236,665ba81c9556ba00abb1a0fa575fe801b3c35f23481b17528a211b8c3021f7cd
+index.html,1637599368236,ac716cd88526d5b7886cb5ed16e8cc3ebd3937446cf960e7a839075b132c7ed4
+img/add-icon.a0f313fe.svg,1637599368241,be43aa8b694c90777971ad2d7f611f52c7ee172131fe2e24a82348891bb6aa18
+img/higher-icon.68df973e.svg,1637599368241,258bcb0fc4c62a0ecd53681bfa4777451e0cb4b980e1094f68d89d4077fa657a
+css/app.597ea605.css,1637599368238,42ecbe19eb686f2518b6618f385643f32452745016bb127455507aa5ae6975ca
+img/lower-icon.7c306380.svg,1637599368241,286e1759ea8d4c11327f425f6d6af41603b329dab36c419b228acbea217c2080
+img/remove-icon.09c0dbc9.svg,1637599368241,1e01bccdf38cee755fc54c9768b4089fdb11d904a6b9aa86fcb20a2357dc8d61
+img/sub-icon.bfa10f67.svg,1637599368241,afa120d2f8afe18161a6ed011eb0482ef9604fd35c1d3be8cd93b1087b1138eb
+img/randomize-icon.07a5b5e4.svg,1637599368243,4bda1cbd316c62073c0f5d97b5be7796b3e061d2e877a91025045957c33a9cd5
+img/swap-icon.c8ef8416.svg,1637599368236,b1c1d418526746e20b13076cc97cd4aa1b8f87956d38dfa71f3fb17d1df5c236
+img/logo.c9fcc748.svg,1637599368241,59a9ce681c6123558f2b025931a262148f1d0bb47d5a3300a14a2e9020a85bc9
+js/app.4cdf2238.js,1637599368238,956f55702e5894d47552349b19df6b7ae23d3faeb46e5f21e5c61dc7672809c1
+js/app.4cdf2238.js.map,1637599368243,a1dea43f2819347d7013bbd0fbc6951be3a541e8bf0b2a6efd498a4300ebd209
+js/chunk-vendors.c62977c4.js,1637599368243,7acc01b3da3406d5051323043fd4255883a8fd560be399c3791f4449f75b3e23
+js/chunk-vendors.c62977c4.js.map,1637599368243,9e67209b70ab93a9d5cf3b1d7ffe8277f7ba8054e5a9b240bbf60f5ddb11db56
diff --git a/.ionide/symbolCache.db b/.ionide/symbolCache.db
new file mode 100644
index 0000000000000000000000000000000000000000..8a73c4f77ed2b2c7b869d888125b966bab395731
GIT binary patch
literal 8192
zcmeI#O-sWt7zglV2!b&1=3$rIR1h!v0qnL63T4x^2d~-8SRiRi`xM;Wiyy%6Yw9-e
zZLMedKQx3iPtxSqT#`N{hO}7u(kT)*?38iN?u1~B@lbl9?4xNP?Hi$P+Filf^{wcK
zEZ%=(;XyzE0uX=z1Rwwb2tWV=5P-mEftNKuJ{t`9>p7`~)#=79ysdUsZ#0)tCPfwv
z6Df8tFZw6qTTG1AQ{}YC<YRXAvp*$OQetu~;_1Quk+-$W4`j&vsbzfVZ5<s~lhV7f
zUYXpG@wphzW{HfZzbti|8WELdQHR@VSLVpOq9)bMDxZr|SJhwUADgOBv|OjwQ|t<>
zozAzDbbjz&5$Upf3)!Y<TmANDPHJmgf857$XjW_0raLjN62DY-zlW~};j+1#hf6;K
a0uX=z1Rwwb2tWV=5P$##AOL}XEbtCJ*`SjE

literal 0
HcmV?d00001

diff --git a/src/assets/swap-icon.svg b/src/assets/swap-icon.svg
new file mode 100644
index 0000000..4694a65
--- /dev/null
+++ b/src/assets/swap-icon.svg
@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.12308 1V3.58625V6.06907L13 3.58625L9.12308 1Z" fill="white"/>
+<path d="M5.24615 7.9309V10.4137V13L1 10.4137L5.24615 7.9309Z" fill="white"/>
+<path d="M1 3.58623C2.73032 3.58623 5.43077 3.58623 5.43077 3.58623L9.12308 3.58625M9.12308 3.58625V1L13 3.58625L9.12308 6.06907V3.58625ZM13 10.4137H6.16923H5.24615M5.24615 10.4137V7.9309L1 10.4137L5.24615 13V10.4137Z" stroke="white" stroke-width="0.714286"/>
+</svg>
diff --git a/src/components/InputsSection.vue b/src/components/InputsSection.vue
index aed60e4..debae7f 100644
--- a/src/components/InputsSection.vue
+++ b/src/components/InputsSection.vue
@@ -29,9 +29,13 @@
             </option>
           </select>
 
-          <button class="btn--add" @click="addVehicle">
+          <button class="btn--add" @click="addVehicle" title="Dodaj pojazd">
             <img :src="icons.add" alt="add vehicle" />
           </button>
+
+          <!-- <button class="btn--swap" @click="prepareSwapVehicles" title="Zamień pojazdy">
+            <img :src="icons.swap" alt="swap vehicle" />
+          </button> -->
         </div>
 
         <div class="input_checkbox">
@@ -42,6 +46,8 @@
       </div>
     </div>
 
+    <div class="spacer"></div>
+
     <div class="input inputs_car">
       <div class="input_container">
         <h2 class="input_header">RODZAJ WAGONU</h2>
@@ -71,9 +77,13 @@
             </option>
           </select>
 
-          <button class="btn--add" @click="addVehicle">
+          <button class="btn--add" @click="addVehicle" title="Dodaj pojazd">
             <img :src="icons.add" alt="add vehicle" />
           </button>
+
+          <!-- <button class="btn--swap" @click="prepareSwapVehicles" title="Zamień pojazdy">
+            <img :src="icons.swap" alt="swap vehicle" />
+          </button> -->
         </div>
 
         <div class="input_list cargo">
@@ -88,8 +98,8 @@
             v-model="store.chosenCargo"
           >
             <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">
               {{ cargo.id }}
             </option>
@@ -104,10 +114,6 @@
 import { ICarWagon, ILocomotive, IStore } from '@/types';
 import { defineComponent, inject } from 'vue';
 
-function isLocomotive(vehicle: ILocomotive | ICarWagon): vehicle is ILocomotive {
-  return (vehicle as ILocomotive).power !== undefined;
-}
-
 export default defineComponent({
   setup() {
     const store = inject('Store') as IStore;
@@ -121,6 +127,7 @@ export default defineComponent({
       totalMass: inject('totalMass') as number,
       maxStockSpeed: inject('maxStockSpeed') as number,
       maxAllowedSpeed: inject('maxAllowedSpeed') as number,
+      isLocomotive: inject('isLocomotive') as (vehicle: ILocomotive | ICarWagon) => vehicle is ILocomotive,
     };
   },
 
@@ -158,6 +165,7 @@ export default defineComponent({
   data: () => ({
     icons: {
       add: require('@/assets/add-icon.svg'),
+      swap: require('@/assets/swap-icon.svg'),
     },
     locoLabels: [
       {
@@ -207,11 +215,13 @@ export default defineComponent({
   },
 
   methods: {
+    prepareSwapVehicles() {
+      this.store.swapVehicles = true;
+    },
+
     onShowSupporterChange() {
       this.store.showSupporter = !this.store.showSupporter;
 
-      console.log(this.store.showSupporter);
-
       if (this.store.showSupporter) {
         const chosenVehicle = this.store.chosenCar || this.store.chosenLoco;
 
@@ -229,6 +239,7 @@ export default defineComponent({
       this.store.imageLoading = false;
 
       this.store.chosenLocoPower = inputId;
+      this.store.chosenStockListIndex = -1;
 
       (this.$refs['loco-select'] as HTMLElement).focus();
     },
@@ -238,6 +249,7 @@ export default defineComponent({
       this.store.imageLoading = false;
 
       this.store.chosenCarUseType = inputId;
+      this.store.chosenStockListIndex = -1;
 
       if (inputId == 'car-passenger') this.store.chosenCargo = null;
     },
@@ -245,6 +257,7 @@ export default defineComponent({
     onCarTypeChange() {
       this.store.chosenCargo = null;
       this.store.chosenLoco = null;
+      this.store.chosenStockListIndex = -1;
 
       this.store.imageLoading = true;
     },
@@ -252,6 +265,7 @@ export default defineComponent({
     onLocoTypeChange() {
       this.store.chosenCargo = null;
       this.store.chosenCar = null;
+      this.store.chosenStockListIndex = -1;
 
       this.store.imageLoading = true;
     },
@@ -264,13 +278,13 @@ export default defineComponent({
       const previousStock =
         this.store.stockList.length > 0 ? this.store.stockList[this.store.stockList.length - 1] : null;
 
-      if (isLocomotive(vehicle) && previousStock && previousStock.type == vehicle.type) {
+      if (this.isLocomotive(vehicle) && previousStock && previousStock.type == vehicle.type) {
         this.store.stockList[this.store.stockList.length - 1].count++;
         return;
       }
 
       if (
-        !isLocomotive(vehicle) &&
+        !this.isLocomotive(vehicle) &&
         previousStock &&
         previousStock.type == vehicle.type &&
         previousStock.cargo?.id == this.store.chosenCargo?.id
@@ -285,16 +299,18 @@ export default defineComponent({
         length: vehicle.length,
         mass: vehicle.mass,
         maxSpeed: vehicle.maxSpeed,
-        isLoco: isLocomotive(vehicle),
+        isLoco: this.isLocomotive(vehicle),
         cargo:
-          !isLocomotive(vehicle) && vehicle.loadable && this.store.chosenCargo ? this.store.chosenCargo : undefined,
+          !this.isLocomotive(vehicle) && vehicle.loadable && this.store.chosenCargo
+            ? this.store.chosenCargo
+            : undefined,
         count: 1,
         imgSrc: vehicle.imageSrc,
-        useType: isLocomotive(vehicle) ? vehicle.power : vehicle.useType,
+        useType: this.isLocomotive(vehicle) ? vehicle.power : vehicle.useType,
         supportersOnly: vehicle.supportersOnly,
       };
 
-      if (isLocomotive(vehicle) && this.store.stockList.length > 0 && !this.store.stockList[0].isLoco)
+      if (this.isLocomotive(vehicle) && this.store.stockList.length > 0 && !this.store.stockList[0].isLoco)
         this.store.stockList.unshift(stockObj);
       else this.store.stockList.push(stockObj);
     },
diff --git a/src/components/ListSection.vue b/src/components/ListSection.vue
index b5c407f..6726b10 100644
--- a/src/components/ListSection.vue
+++ b/src/components/ListSection.vue
@@ -46,12 +46,19 @@
         <button class="btn" @click="shuffleCars">TASUJ WAGONY</button>
         <button class="btn" @click="openRandomizerCard">LOSUJ SKŁAD</button>
       </div>
+
       <div class="stock-list_specs">
         Masa: <span class="text--accent">{{ totalMass }}t</span> | Długość:
         <span class="text--accent">{{ totalLength }}m</span>
         | Vmax pociągu: <span class="text--accent">{{ maxStockSpeed }} km/h</span>
       </div>
 
+      <div class="stock-list_string">
+        <button class="btn--text" v-if="store.stockList.length > 0" @click="copyToClipboard">
+          Skopiuj pociąg w formie tekstowej do schowka
+        </button>
+      </div>
+
       <div class="warnings">
         <div class="warning" v-if="warnings.locoNotSuitable.value">
           Lokomotywy EP07 i EP08 są przeznaczone jedynie do ruchu pasażerskiego!
@@ -64,7 +71,7 @@
         <div class="warning" v-if="warnings.tooManyLocos.value">Ten skład posiada za dużo pojazdów trakcyjnych!</div>
       </div>
 
-      <ul>
+      <ul ref="stock-list">
         <li v-if="store.stockList.length == 0" class="list-empty">
           <div class="item-content">Lista pojazdów jest pusta!</div>
         </li>
@@ -72,7 +79,7 @@
         <li
           v-for="(stock, i) in store.stockList"
           :key="stock.type + i"
-          :class="{ loco: stock.isLoco }"
+          :class="{ loco: stock.isLoco, selected: store.chosenStockListIndex == i }"
           :data-id="i"
           tabindex="0"
           @focus="onListItemFocus(i)"
@@ -127,6 +134,7 @@ import RandomizerCard from './RandomizerCard.vue';
 
 export default defineComponent({
   components: { RandomizerCard },
+
   setup() {
     const store = inject('Store') as IStore;
 
@@ -185,10 +193,33 @@ export default defineComponent({
     } as { [key: string]: string },
   }),
 
+  computed: {
+    stockString() {
+      return this.store.stockList
+        .map((stock) => {
+          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(';');
+    },
+  },
+
   methods: {
+    copyToClipboard() {
+      navigator.clipboard.writeText(this.stockString);
+
+      alert('Pociąg został skopiowany do schowka!');
+    },
+
     onListItemFocus(vehicleID: number) {
       const vehicle = this.store.stockList[vehicleID];
 
+      this.store.chosenStockListIndex = vehicleID;
+
       if ((this.store.chosenCar || this.store.chosenLoco)?.imageSrc != vehicle.imgSrc) this.store.imageLoading = true;
 
       if (this.store.showSupporter && !vehicle.supportersOnly) {
@@ -202,15 +233,17 @@ export default defineComponent({
 
         this.store.chosenCar = null;
         this.store.chosenCargo = null;
+      } else {
+        this.store.chosenCarUseType = vehicle.useType;
 
-        return;
+        this.store.chosenLoco = null;
+        this.store.chosenCar = this.carDataList.find((v) => v.type == vehicle.type) || null;
+        this.store.chosenCargo = vehicle.cargo || null;
       }
 
-      this.store.chosenCarUseType = vehicle.useType;
-
-      this.store.chosenLoco = null;
-      this.store.chosenCar = this.carDataList.find((v) => v.type == vehicle.type) || null;
-      this.store.chosenCargo = vehicle.cargo || null;
+      if (this.store.swapVehicles) {
+        this.store.swapVehicles = false;
+      }
     },
 
     getCarSpecFromType(typeStr: string) {
@@ -299,18 +332,7 @@ export default defineComponent({
 
       if (!fileName) return;
 
-      const stockString = this.store.stockList
-        .map((stock) => {
-          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(';');
-
-      const blob = new Blob([stockString]);
+      const blob = new Blob([this.stockString]);
       const file = fileName + '.con';
 
       var e = document.createEvent('MouseEvents'),
@@ -482,6 +504,11 @@ export default defineComponent({
 
   width: 100%;
 
+  &_string {
+    margin-top: 1em;
+    font-weight: bold;
+  }
+
   &_buttons {
     display: flex;
 
@@ -521,6 +548,10 @@ export default defineComponent({
       padding: 0 0.5em;
     }
 
+    &.selected .item-content {
+      color: $accentColor;
+    }
+
     &:focus .item-content {
       color: $accentColor;
     }
diff --git a/src/components/RandomizerCard.vue b/src/components/RandomizerCard.vue
index 679c319..7445be2 100644
--- a/src/components/RandomizerCard.vue
+++ b/src/components/RandomizerCard.vue
@@ -3,12 +3,12 @@
     <!-- <button class="btn" @click="closeCard">X</button> -->
 
     <div class="wrapper">
-      <h1>LOSUJ SKŁAD TOWAROWY <img :src="icons.randomize" alt="losuj skład" /></h1>
+      <!-- <h1>LOSUJ SKŁAD <img :src="icons.randomize" alt="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>
+      </h3> -->
 
       <div class="car-preview">
         <div class="image-wrapper">
@@ -20,7 +20,7 @@
         </b>
         <b v-else>Podgląd typu wagonu</b>
 
-        <div v-if="focusedCar">{{ cargoUsage[focusedCar.type.split('_')[0]] }}</div>
+        <div v-if="focusedCar">{{ carUsage[focusedCar.type.split('_')[0]] }}</div>
         <div v-else>Najedź na rodzaj wagonu aby wyświetlić informacje</div>
       </div>
 
@@ -29,7 +29,20 @@
         <div>
           <button
             class="btn choice-btn"
-            v-for="carType in cargoTypeList"
+            v-for="carType in carTypeList.filter((_, i) => i < 15)"
+            :key="carType"
+            @click="toggleCarType(carType)"
+            @mouseenter="displayPreview(carType)"
+            :class="{ chosen: chosenCarTypes.includes(carType) }"
+          >
+            {{ carType }}
+          </button>
+        </div>
+
+        <div style="margin-top: 0.5em">
+          <button
+            class="btn choice-btn"
+            v-for="carType in carTypeList.filter((_, i) => i >= 15)"
             :key="carType"
             @click="toggleCarType(carType)"
             @mouseenter="displayPreview(carType)"
@@ -99,11 +112,11 @@ export default defineComponent({
       locoDataList: inject('locoDataList') as ILocomotive[],
       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) => {
+      carDataList,
+      carTypeList: carDataList.value.reduce((list, car) => {
         const type = car.type.split('_')[0];
 
-        if (car.useType != 'car-cargo' || list.includes(type)) return list;
+        if (list.includes(type)) return list;
 
         list.push(type);
 
@@ -125,7 +138,22 @@ export default defineComponent({
     focusedCar: null as ICarWagon | null,
     isPreviewLoading: false,
 
-    cargoUsage: {
+    carUsage: {
+      Gor89: 'wagon pasażerski',
+      Gor77: 'wagon pasażerski',
+      Bau84: 'wagon pasażerski',
+      '612a': 'wagon pasażerski',
+      '504a': 'wagon pasażerski',
+      '304c': 'wagon pasażerski',
+      '159a': 'wagon pasażerski',
+      '158a': 'wagon pasażerski',
+      '154a': 'wagon pasażerski',
+      '120a': 'wagon pasażerski',
+      '113a': 'wagon pasażerski',
+      '112a': 'wagon pasażerski',
+      '111a': 'wagon pasażerski',
+      '110a': 'wagon pasażerski',
+      '101a': 'wagon pasażerski',
       '203V': 'kruszywo, kamień wapienny, odpady kopalniane',
       '208Kf': 'drobnica, ładunki sypkie',
       '209c': 'wagon techniczny',
@@ -150,7 +178,7 @@ export default defineComponent({
     },
 
     displayPreview(carType: string) {
-      const list = this.cargoCarList.filter((car) => car.type.includes(carType));
+      const list = this.carDataList.filter((car) => car.type.includes(carType));
       const randIndex = Math.floor(Math.random() * list.length);
 
       if (this.focusedCar?.type == list[randIndex].type) return;
@@ -196,7 +224,7 @@ export default defineComponent({
         this.store.stockList.length = 0;
 
         const locoSet = this.locoDataList
-          .filter((loco) => !loco.type.startsWith('EP') && (loco.power == 'loco-e' || loco.power == 'loco-s'))
+          .filter((loco) => loco.power == 'loco-e' || loco.power == 'loco-s')
           .filter((loco) => (!this.includeSupporterVehicles && loco.supportersOnly ? false : true));
 
         const randLoco = locoSet[Math.floor(Math.random() * locoSet.length)];
@@ -207,7 +235,7 @@ export default defineComponent({
       totalStockLength += this.store.stockList[0].length;
       totalStockMass += this.store.stockList[0].mass;
 
-      let availableCarsSet = this.cargoCarList.filter((cargoCar) => {
+      let availableCarsSet = this.carDataList.filter((cargoCar) => {
         if (!this.includeSupporterVehicles && cargoCar.supportersOnly) return false;
 
         if (this.chosenCarTypes.find((carType) => cargoCar.type.includes(carType))) return true;
@@ -365,6 +393,19 @@ input {
   font-size: 1.2em;
 }
 
+.car-choice div {
+  display: grid;
+
+  grid-template-columns: repeat(5, 1fr);
+  justify-content: center;
+
+  @media screen and (max-width: 800px) {
+    /* display: flex; */
+    /* flex-wrap: wrap; */
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
 button.choice-btn {
   color: gray;
   border-color: gray;
diff --git a/src/main.ts b/src/main.ts
index b32d3e6..dc9035b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,10 +1,25 @@
-import { createApp } from "vue";
+import { createApp, Directive } from "vue";
 import App from "./App.vue";
 
-import { Store, locoDataList, carDataList, totalLength, totalMass, maxAllowedSpeed, maxStockSpeed, isTrainPassenger, warnings } from "./store";
+import { Store, isLocomotive, locoDataList, carDataList, totalLength, totalMass, maxAllowedSpeed, maxStockSpeed, isTrainPassenger, warnings } from "./store";
+
+const clickOutsideDirective: Directive = {
+    beforeMount(el, binding) {
+
+        el.clickOutsideEvent = (event: Event) => {
+            if (!(el == event.target || el.contains(event.target))) {
+                binding.value();
+            }
+        };
+
+        document.addEventListener("click", el.clickOutsideEvent);
+    },
+}
+
 
 createApp(App)
     .provide('Store', Store)
+    .provide('isLocomotive', isLocomotive)
     .provide('locoDataList', locoDataList)
     .provide('carDataList', carDataList)
     .provide('totalMass', totalMass)
@@ -13,4 +28,5 @@ createApp(App)
     .provide('maxAllowedSpeed', maxAllowedSpeed)
     .provide('isTrainPassenger', isTrainPassenger)
     .provide('warnings', warnings)
+    .directive('click-outside', clickOutsideDirective)
     .mount("#app");
diff --git a/src/store.ts b/src/store.ts
index 3069745..ea7bd51 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -20,12 +20,19 @@ export const Store: IStore = reactive({
 
     stockList: [] as IStock[],
     cargoOptions: [] as any[][],
+
+    swapVehicles: false,
+
+    chosenStockListIndex: -1,
     // locoOptions: [] as ILocomotive[],
     // carOptions: [] as ICarWagon[],
 
     vehiclePreviewSrc: ""
 })
 
+export function isLocomotive(vehicle: ILocomotive | ICarWagon): vehicle is ILocomotive {
+    return (vehicle as ILocomotive).power !== undefined;
+}
 
 export const locoDataList = computed(() => Object.keys(vehicleDataJSON).reduce(
     (acc, vehicleTypeKey) => {
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 705a254..05eb61c 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -75,15 +75,21 @@ button.btn {
     outline: none;
     background: none;
 
-
     transition: all 250ms;
 
     &:hover {
         color: $accentColor;
         border-color: $accentColor;
     }
+
+    &--text {
+        font-weight: bold;
+        transition: all 250ms;
+    }
 }
 
+
+
 button.btn-rect {
     width: 1.5em;
     height: 1.5em;
@@ -116,7 +122,7 @@ select {
     color: white;
     font-size: 1em;
 
-    width: 20em;
+    width: 18em;
 }
 
 option {
diff --git a/src/types.ts b/src/types.ts
index 40ca1cb..25c92a3 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -12,9 +12,9 @@ export interface IStore {
   stockList: IStock[];
   cargoOptions: any[][];
 
-  // locoOptions: ILocomotive[];
-  // carOptions: ICarWagon[];
+  chosenStockListIndex: number;
 
+  swapVehicles: boolean;
   vehiclePreviewSrc: string;
 }
 
diff --git a/src/utils/statsUtils.ts b/src/utils/statsUtils.ts
index 97c499b..b59e643 100644
--- a/src/utils/statsUtils.ts
+++ b/src/utils/statsUtils.ts
@@ -11,7 +11,6 @@ export const verifyTrainSpec = (stockList: IStock[], vehicleMass: number, vehicl
     const headLoco = stockList[0];
     const carList = stockList.filter(stock => !stock.isLoco);
 
-    console.log(carList, vehicleUseType);
 
 
     const isTrainPassenger = carList.length != 0
@@ -19,6 +18,5 @@ export const verifyTrainSpec = (stockList: IStock[], vehicleMass: number, vehicl
         && vehicleUseType == EVehicleUseType.CAR_PASSENGER
         : false;
 
-    console.log("Skład pasażerski: " + isTrainPassenger);
-    console.log("Skład towarowy: " + !isTrainPassenger);
+
 }
\ No newline at end of file