From 1e92c64ae645714a29b5c1cb99cb6fd3c4aa70a4 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 6 Jul 2023 22:14:40 +0200
Subject: [PATCH 01/12] feature: tabela z pojazdami i wagonami

---
 src/components/sections/StockSection.vue |   7 +-
 src/components/tabs/WikiListTab.vue      | 174 +++++++++++++++++++++++
 src/mixins/stockPreviewMixin.ts          |  30 ++--
 src/store.ts                             |   2 +-
 src/types.ts                             |   4 +-
 5 files changed, 204 insertions(+), 13 deletions(-)
 create mode 100644 src/components/tabs/WikiListTab.vue

diff --git a/src/components/sections/StockSection.vue b/src/components/sections/StockSection.vue
index d6dfb39..483e849 100644
--- a/src/components/sections/StockSection.vue
+++ b/src/components/sections/StockSection.vue
@@ -25,12 +25,14 @@ import { useStore } from '../../store';
 import StockListTab from '../tabs/StockListTab.vue';
 import StockGeneratorTab from '../tabs/StockGeneratorTab.vue';
 import NumberGeneratorTab from '../tabs/NumberGeneratorTab.vue';
+import WikiListTab from '../tabs/WikiListTab.vue';
 
 const store = useStore();
 type SectionMode = typeof store.stockSectionMode;
 
 const sectionModes: { [key: string]: SectionMode } = {
   SKŁAD: 'stock-list',
+  POJAZDY: 'wiki-list',
   'GNR NUMERU': 'number-generator',
   'GNR SKŁADU': 'stock-generator',
 };
@@ -40,6 +42,9 @@ const chosenSectionComponent = computed(() => {
     case 'stock-list':
       return StockListTab;
 
+    case 'wiki-list':
+      return WikiListTab;
+
     case 'stock-generator':
       return StockGeneratorTab;
 
@@ -83,7 +88,7 @@ function chooseSection(sectionId: SectionMode) {
 
 .section_modes {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(4, 1fr);
   gap: 0.5em;
 
   margin-bottom: 0.5em;
diff --git a/src/components/tabs/WikiListTab.vue b/src/components/tabs/WikiListTab.vue
new file mode 100644
index 0000000..ac72c6b
--- /dev/null
+++ b/src/components/tabs/WikiListTab.vue
@@ -0,0 +1,174 @@
+<template>
+  <section class="wiki-list">
+    <div class="actions-panel">
+      <div class="actions-panel_vehicles">
+        <button class="btn btn--choice" @click="changeWikiMode('locomotives')">POJ. TRAKCYJNE</button>
+        <button class="btn btn--choice" @click="changeWikiMode('carWagons')">WAGONY</button>
+      </div>
+
+      <div class="actions-panel_search">
+        <input type="text" placeholder="Wyszukaj pojazd..." v-model="searchedVehicleTypeName" />
+      </div>
+    </div>
+
+    <div class="table-wrapper">
+      <table>
+        <thead>
+          <tr>
+            <th>Zdjęcie</th>
+            <th>Nazwa</th>
+            <th>Typ</th>
+            <th>Długość</th>
+            <th>Masa</th>
+            <th>Prędkość</th>
+          </tr>
+        </thead>
+
+        <tbody v-if="wikiMode == 'locomotives'">
+          <tr v-for="loco in computedLocoList" @click="previewLocomotive(loco)">
+            <td>
+              <img
+                :src="`https://spythere.github.io/api/td2/images/${loco.type}--300px.jpg`"
+                width="170"
+                loading="lazy"
+                :alt="`Lokomotywa ${loco.type}`"
+              />
+            </td>
+
+            <td>{{ loco.type }}</td>
+            <td>{{ loco.cabinType }}</td>
+            <td>{{ loco.length }}m</td>
+            <td>{{ loco.mass }}t</td>
+            <td>{{ loco.maxSpeed }}km/h</td>
+          </tr>
+        </tbody>
+
+        <tbody v-else>
+          <tr v-for="car in computedCarList" @click="previewCarWagon(car)">
+            <td>
+              <img
+                :src="`https://spythere.github.io/api/td2/images/${car.type}--300px.jpg`"
+                width="170"
+                loading="lazy"
+                :alt="`Lokomotywa ${car.type}`"
+              />
+            </td>
+
+            <td>{{ car.type }}</td>
+            <td>{{ car.constructionType }}</td>
+            <td>{{ car.length }}m</td>
+            <td>{{ car.mass }}t</td>
+            <td>{{ car.maxSpeed }}km/h</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../../store';
+import stockPreviewMixin from '../../mixins/stockPreviewMixin';
+import { ICarWagon, ILocomotive } from '../../types';
+
+type WikiMode = 'locomotives' | 'carWagons';
+
+export default defineComponent({
+  mixins: [stockPreviewMixin],
+
+  data() {
+    return {
+      store: useStore(),
+      wikiMode: 'locomotives' as WikiMode,
+      searchedVehicleTypeName: '',
+    };
+  },
+
+  methods: {
+    changeWikiMode(wikiMode: WikiMode) {
+      this.searchedVehicleTypeName = '';
+      this.wikiMode = wikiMode;
+    },
+  },
+
+  computed: {
+    computedLocoList() {
+      const trimmedSearchValue = this.searchedVehicleTypeName.trim();
+      if (trimmedSearchValue == '') return this.store.locoDataList;
+
+      return this.store.locoDataList.filter((loco) => new RegExp(`${trimmedSearchValue}`, 'i').test(loco.type));
+    },
+
+    computedCarList() {
+      const trimmedSearchValue = this.searchedVehicleTypeName.trim();
+      if (trimmedSearchValue == '') return this.store.carDataList;
+
+      return this.store.carDataList.filter((car) => new RegExp(`${trimmedSearchValue}`, 'i').test(car.type));
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.actions-panel {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  flex-wrap: wrap;
+  gap: 0.5em;
+
+  margin: 0.5em 0;
+}
+
+.actions-panel_vehicles {
+  display: flex;
+  gap: 0.5em;
+}
+
+.actions-panel_search {
+  input {
+    width: auto;
+  }
+}
+
+.table-wrapper {
+  overflow: auto;
+  height: 750px;
+}
+
+.wiki-list table {
+  border-collapse: collapse;
+  width: 100%;
+
+  thead {
+    position: sticky;
+    top: 0;
+  }
+
+  th {
+    background-color: #111;
+    padding: 0.5em;
+  }
+
+  tr {
+    background-color: #333;
+
+    &:nth-child(odd) {
+      background-color: #444;
+    }
+  }
+
+  td {
+    text-align: center;
+    height: 100px;
+  }
+
+  td img {
+    display: block;
+    margin: 0 auto;
+    object-fit: cover;
+  }
+}
+</style>
diff --git a/src/mixins/stockPreviewMixin.ts b/src/mixins/stockPreviewMixin.ts
index 844025c..30a8781 100644
--- a/src/mixins/stockPreviewMixin.ts
+++ b/src/mixins/stockPreviewMixin.ts
@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import { useStore } from '../store';
-import { IStock, Vehicle } from '../types';
+import { ICarWagon, ILocomotive, IStock, Vehicle } from '../types';
 
 export default defineComponent({
   setup() {
@@ -48,7 +48,7 @@ export default defineComponent({
       });
     },
 
-    previewStock(stock: IStock) {      
+    previewStock(stock: IStock) {
       if (this.store.chosenVehicle?.imageSrc != stock.imgSrc) this.store.imageLoading = true;
 
       if (stock.isLoco) {
@@ -67,14 +67,26 @@ export default defineComponent({
       }
     },
 
+    previewLocomotive(loco: ILocomotive) {
+      this.store.chosenLoco = loco;
+      this.store.chosenVehicle = loco;
+      this.store.chosenLocoPower = loco.power;
+    },
+
+    previewCarWagon(carWagon: ICarWagon) {
+      this.store.chosenCar = carWagon;
+      this.store.chosenCarUseType = carWagon.useType;
+      this.store.chosenVehicle = carWagon;
+
+      this.store.chosenCargo = null;
+    },
+
     resetPreview() {
-        this.store.chosenVehicle = null;
-        this.store.chosenCar = null;
-        this.store.chosenCargo = null;
-        this.store.chosenLoco = null;
-    }
+      this.store.chosenVehicle = null;
+      this.store.chosenCar = null;
+      this.store.chosenCargo = null;
+      this.store.chosenLoco = null;
+    },
   },
 });
 
-
-
diff --git a/src/store.ts b/src/store.ts
index c35932c..2cf714e 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -38,7 +38,7 @@ export const useStore = defineStore({
 
       vehiclePreviewSrc: '',
 
-      stockSectionMode: 'stock-list',
+      stockSectionMode: 'wiki-list',
 
       isRandomizerCardOpen: false,
       isRealStockListCardOpen: false,
diff --git a/src/types.ts b/src/types.ts
index 711fc89..d1bad05 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -27,7 +27,7 @@ export interface IStore {
   isRandomizerCardOpen: boolean;
   isRealStockListCardOpen: boolean;
 
-  stockSectionMode: 'stock-list' | 'stock-generator' | 'number-generator';
+  stockSectionMode: 'stock-list' | 'stock-generator' | 'number-generator' | 'wiki-list';
   stockData?: IStockData;
 }
 
@@ -42,7 +42,7 @@ export interface IStockProps {
 
 export interface IStockData {
   version: string;
-  
+
   generator: {
     passenger: any;
     cargo: {

From e532c9f2daffa2732b6c803f167584cd6af5237d Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 6 Jul 2023 22:15:35 +0200
Subject: [PATCH 02/12] bump: 1.5.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index bbef498..626619b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pojazdownik",
-  "version": "1.4.3",
+  "version": "1.5.0",
   "private": true,
   "scripts": {
     "dev": "vite",

From 073288c8a96704a62793a6160b4d92a2cfdc7733 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Mon, 10 Jul 2023 13:47:09 +0200
Subject: [PATCH 03/12] =?UTF-8?q?enkapsulacja=20i=20uporz=C4=85dkowanie=20?=
 =?UTF-8?q?komponent=C3=B3w?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   | 155 ++----------------
 src/components/app/AppModals.vue              |  24 +++
 src/components/app/Footer.vue                 |  51 ++++++
 src/components/app/MainContainer.vue          |  45 +++++
 src/components/cards/RealStockCard.vue        |   2 +
 .../utils/ImageFullscreenPreview.vue          |  41 +++++
 src/store.ts                                  |  20 +++
 src/views/AppContainerView.vue                |  35 ++++
 8 files changed, 230 insertions(+), 143 deletions(-)
 create mode 100644 src/components/app/AppModals.vue
 create mode 100644 src/components/app/Footer.vue
 create mode 100644 src/components/app/MainContainer.vue
 create mode 100644 src/components/utils/ImageFullscreenPreview.vue
 create mode 100644 src/views/AppContainerView.vue

diff --git a/src/App.vue b/src/App.vue
index 5c35709..7a5266d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,111 +1,35 @@
 <template>
-  <div class="image-preview" v-if="store.vehiclePreviewSrc != ''" @click="() => (store.vehiclePreviewSrc = '')">
-    <img :src="store.vehiclePreviewSrc" alt="preview" />
-  </div>
-
-  <div class="g-card-dimmer" v-if="store.isRandomizerCardOpen" @click="store.isRandomizerCardOpen = false"></div>
-  <div class="g-card-dimmer" v-if="store.isRealStockListCardOpen" @click="store.isRealStockListCardOpen = false"></div>
-
-  <keep-alive>
-    <RealStockCard v-if="store.isRealStockListCardOpen" />
-  </keep-alive>
-  <!-- <transition name="card-appear"> -->
-  <!-- </transition> -->
-
-  <div class="app_container">
-    <main>
-      <LogoSection />
-
-      <InputsSection />
-
-      <TrainImageSection />
-
-      <StockSection />
-    </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
-        <a
-          style="color: #ccc"
-          href="https://docs.google.com/document/d/1UAAPUtN0d_RoS4RgOzEzllJZJhA0VcizzCzKW4QylbY/edit"
-          target="_blank"
-        >
-          regulaminem symulatora Train Driver 2</a
-        >!
-      </div>
-      <div class="text--grayed" style="margin-bottom: 0.25em" v-if="store.stockData">
-        Strona jest kompletna dla wersji {{ store.stockData.version }} symulatora TD2
-      </div>
-      &copy;
-      <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
-      {{ new Date().getUTCFullYear() }} | v{{ VERSION }}{{ !isOnProductionHost ? 'dev' : '' }}
-    </footer>
-  </div>
+  <ImageFullscreenPreview />
+  <AppContainerView />
 </template>
 
 <script lang="ts">
-import packageInfo from '.././package.json';
-
 import { defineComponent } from 'vue';
-
-import InputsSection from './components/sections/InputsSection.vue';
-
 import { useStore } from './store';
-import TrainImageSection from './components/sections/TrainImageSection.vue';
-import LogoSection from './components/sections/LogoSection.vue';
-import RealStockCard from './components/cards/RealStockCard.vue';
-import StockSection from './components/sections/StockSection.vue';
+import ImageFullscreenPreview from './components/utils/ImageFullscreenPreview.vue';
+import AppContainerView from './views/AppContainerView.vue';
 
 export default defineComponent({
-  components: {
-    StockSection,
-    InputsSection,
-    TrainImageSection,
-    LogoSection,
-    RealStockCard,
+  data() {
+    return {
+      store: useStore(),
+    };
   },
-
-  data: () => ({
-    VERSION: packageInfo.version,
-    store: useStore(),
-    isOnProductionHost: location.hostname == 'pojazdownik-td2.web.app',
-  }),
-
   async created() {
     /* dev info testing */
     // if (import.meta.env['VITE_STOCK_DEV'] == '1') {
     //   const data = await import('../stockInfoDev.json');
     //   this.store.stockData = data.default as any;
     // }
-    const stockData = await (await fetch(`https://spythere.github.io/api/td2/data/stockInfo.json`)).json();
-    this.store.stockData = stockData;
-
-    // routing
-    switch (window.location.pathname) {
-      case '/numgnr':
-        this.store.stockSectionMode = 'number-generator';
-        break;
-      case '/stockgnr':
-        this.store.stockSectionMode = 'stock-generator';
-        break;
-      default:
-        break;
-    }
+    this.store.fetchStockInfoData();
+    this.store.handleRouting();
   },
+  components: { ImageFullscreenPreview, AppContainerView },
 });
 </script>
 
 <style lang="scss">
-@import './styles/global';
-
-.app_container {
-  min-height: 100vh;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
+@import './styles/global.scss';
 
 /* APP */
 #app {
@@ -134,65 +58,10 @@ h2 {
   color: #d1d1d1;
 }
 
-.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 {
-  display: grid;
-  gap: 1em 3em;
-
-  width: 100%;
-  max-width: 1300px;
-  min-height: 75vh;
-
-  grid-template-columns: 1fr 2fr;
-  grid-template-rows: auto 360px minmax(400px, 1fr);
-
-  // padding: 0 1em;
-  margin-bottom: 2em;
-}
-
-/* FOOTER SECTION */
-
-footer {
-  margin-top: auto;
-  text-align: center;
-  padding: 0 1em;
-}
-
-/* MOBILE VIEWS */
-
 @media screen and (max-width: $breakpointMd) {
   #app {
     font-size: calc(0.7rem + 0.75vw);
   }
-
-  main {
-    display: flex;
-    flex-direction: column;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-  }
 }
 </style>
 
diff --git a/src/components/app/AppModals.vue b/src/components/app/AppModals.vue
new file mode 100644
index 0000000..8037d76
--- /dev/null
+++ b/src/components/app/AppModals.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <keep-alive>
+      <RealStockCard v-if="store.isRealStockListCardOpen" />
+    </keep-alive>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../../store';
+import RealStockCard from '../cards/RealStockCard.vue';
+
+export default defineComponent({
+  components: { RealStockCard },
+  data() {
+    return {
+      store: useStore(),
+    };
+  },
+});
+</script>
+
+<style scoped></style>
diff --git a/src/components/app/Footer.vue b/src/components/app/Footer.vue
new file mode 100644
index 0000000..b3544ad
--- /dev/null
+++ b/src/components/app/Footer.vue
@@ -0,0 +1,51 @@
+<template>
+  <footer>
+    <div class="text--grayed">
+      Ta strona ma charakter informacyjny. Autor nie ponosi odpowiedzialności za tworzenie pociągów niezgodnych z
+      <a
+        style="color: #ccc"
+        href="https://docs.google.com/document/d/1UAAPUtN0d_RoS4RgOzEzllJZJhA0VcizzCzKW4QylbY/edit"
+        target="_blank"
+      >
+        regulaminem symulatora Train Driver 2 </a
+      >!
+    </div>
+
+    <div class="text--grayed" v-if="store.stockData">
+      Strona jest kompletna dla wersji {{ store.stockData.version }} symulatora TD2
+    </div>
+
+    <div>
+      &copy;
+      <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
+      {{ new Date().getUTCFullYear() }} | v{{ VERSION }}{{ !isOnProductionHost ? 'dev' : '' }}
+    </div>
+  </footer>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import packageInfo from '../../../package.json';
+import { useStore } from '../../store';
+
+export default defineComponent({
+  data() {
+    return {
+      isOnProductionHost: location.hostname == 'pojazdownik-td2.web.app',
+      VERSION: packageInfo.version,
+      store: useStore(),
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+footer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+
+  text-align: center;
+  padding: 1em 1em 0 1em;
+}
+</style>
diff --git a/src/components/app/MainContainer.vue b/src/components/app/MainContainer.vue
new file mode 100644
index 0000000..663e411
--- /dev/null
+++ b/src/components/app/MainContainer.vue
@@ -0,0 +1,45 @@
+<template>
+  <main>
+    <LogoSection />
+    <InputsSection />
+    <TrainImageSection />
+    <StockSection />
+  </main>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import LogoSection from '../sections/LogoSection.vue';
+import InputsSection from '../sections/InputsSection.vue';
+import TrainImageSection from '../sections/TrainImageSection.vue';
+import StockSection from '../sections/StockSection.vue';
+
+export default defineComponent({
+  components: { LogoSection, InputsSection, TrainImageSection, StockSection },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/global.scss';
+
+main {
+  display: grid;
+  gap: 1em;
+
+  width: 100%;
+  max-width: 1500px;
+  min-height: 75vh;
+
+  grid-template-columns: 1fr 2fr;
+  grid-template-rows: auto 360px minmax(400px, 1fr);
+}
+
+@media screen and (max-width: $breakpointMd) {
+  main {
+    display: flex;
+    flex-direction: column;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+  }
+}
+</style>
diff --git a/src/components/cards/RealStockCard.vue b/src/components/cards/RealStockCard.vue
index 42c3401..3e87798 100644
--- a/src/components/cards/RealStockCard.vue
+++ b/src/components/cards/RealStockCard.vue
@@ -1,4 +1,6 @@
 <template>
+  <div class="g-card-dimmer" @click="store.isRealStockListCardOpen = false"></div>
+
   <div class="real-stock-card g-card" @keydown.esc="store.isRealStockListCardOpen = false">
     <div class="g-card_bg" @click="store.isRealStockListCardOpen = false"></div>
 
diff --git a/src/components/utils/ImageFullscreenPreview.vue b/src/components/utils/ImageFullscreenPreview.vue
new file mode 100644
index 0000000..a3a05c3
--- /dev/null
+++ b/src/components/utils/ImageFullscreenPreview.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="image-preview" v-if="store.vehiclePreviewSrc">
+    <img :src="store.vehiclePreviewSrc" alt="preview" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../../store';
+
+export default defineComponent({
+  data() {
+    return {
+      store: useStore(),
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.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;
+  }
+}
+</style>
diff --git a/src/store.ts b/src/store.ts
index 2cf714e..af19b13 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -56,5 +56,25 @@ export const useStore = defineStore({
     chosenRealStock: (state) => chosenRealStock(state),
     acceptableMass: (state) => acceptableMass(state),
   },
+
+  actions: {
+    async fetchStockInfoData() {
+      const stockData = await (await fetch(`https://spythere.github.io/api/td2/data/stockInfo.json`)).json();
+      this.stockData = stockData;
+    },
+
+    handleRouting() {
+      switch (window.location.pathname) {
+        case '/numgnr':
+          this.stockSectionMode = 'number-generator';
+          break;
+        case '/stockgnr':
+          this.stockSectionMode = 'stock-generator';
+          break;
+        default:
+          break;
+      }
+    },
+  },
 });
 
diff --git a/src/views/AppContainerView.vue b/src/views/AppContainerView.vue
new file mode 100644
index 0000000..da98b4c
--- /dev/null
+++ b/src/views/AppContainerView.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="app-container">
+    <MainContainer />
+    <Footer />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../store';
+
+import MainContainer from '../components/app/MainContainer.vue';
+import Footer from '../components/app/Footer.vue';
+
+export default defineComponent({
+  components: {
+    MainContainer,
+    Footer,
+  },
+
+  data: () => ({
+    store: useStore(),
+  }),
+});
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  min-height: 100vh;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+</style>

From dda67ad993ff132a3ec14b5351c23d83d52ad5ae Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Mon, 10 Jul 2023 17:47:44 +0200
Subject: [PATCH 04/12] =?UTF-8?q?funkcjonalno=C5=9Bci=20listy=20pojazd?=
 =?UTF-8?q?=C3=B3w?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/sections/StockSection.vue |   1 +
 src/components/tabs/WikiListTab.vue      | 150 ++++++++++++++++++++---
 src/styles/global.scss                   |   6 +-
 3 files changed, 134 insertions(+), 23 deletions(-)

diff --git a/src/components/sections/StockSection.vue b/src/components/sections/StockSection.vue
index 483e849..18625c7 100644
--- a/src/components/sections/StockSection.vue
+++ b/src/components/sections/StockSection.vue
@@ -8,6 +8,7 @@
         :data-selected="store.stockSectionMode == id"
       >
         {{ name }}
+        <span v-if="id == 'stock-list'">({{ store.stockList.length }})</span>
       </button>
     </div>
 
diff --git a/src/components/tabs/WikiListTab.vue b/src/components/tabs/WikiListTab.vue
index ac72c6b..149f5ad 100644
--- a/src/components/tabs/WikiListTab.vue
+++ b/src/components/tabs/WikiListTab.vue
@@ -11,32 +11,33 @@
       </div>
     </div>
 
-    <div class="table-wrapper">
+    <div class="table-wrapper" @scroll="scrollEvent" ref="table-wrapper">
       <table>
         <thead>
           <tr>
-            <th>Zdjęcie</th>
-            <th>Nazwa</th>
-            <th>Typ</th>
-            <th>Długość</th>
-            <th>Masa</th>
-            <th>Prędkość</th>
+            <th v-for="header in wikiMode == 'locomotives' ? locoHeaders : carHeaders" @click="toggleSorter(header.id)">
+              {{ header.name }}
+
+              <span v-if="currentModeSorter.id == header.id">
+                {{ currentModeSorter.direction == 1 ? `&uArr;` : `&dArr;` }}
+              </span>
+            </th>
           </tr>
         </thead>
 
         <tbody v-if="wikiMode == 'locomotives'">
-          <tr v-for="loco in computedLocoList" @click="previewLocomotive(loco)">
+          <tr v-for="loco in computedLocoList" @click="previewLocomotive(loco)" @dblclick="addLocomotive(loco)">
             <td>
               <img
                 :src="`https://spythere.github.io/api/td2/images/${loco.type}--300px.jpg`"
-                width="170"
                 loading="lazy"
                 :alt="`Lokomotywa ${loco.type}`"
               />
             </td>
 
             <td>{{ loco.type }}</td>
-            <td>{{ loco.cabinType }}</td>
+            <td>{{ vehicleTypes[loco.power] }}</td>
+            <td>{{ loco.constructionType }}</td>
             <td>{{ loco.length }}m</td>
             <td>{{ loco.mass }}t</td>
             <td>{{ loco.maxSpeed }}km/h</td>
@@ -44,11 +45,10 @@
         </tbody>
 
         <tbody v-else>
-          <tr v-for="car in computedCarList" @click="previewCarWagon(car)">
+          <tr v-for="car in computedCarList" @click="previewCarWagon(car)" @dblclick="addCarWagon(car)">
             <td>
               <img
                 :src="`https://spythere.github.io/api/td2/images/${car.type}--300px.jpg`"
-                width="170"
                 loading="lazy"
                 :alt="`Lokomotywa ${car.type}`"
               />
@@ -59,6 +59,7 @@
             <td>{{ car.length }}m</td>
             <td>{{ car.mass }}t</td>
             <td>{{ car.maxSpeed }}km/h</td>
+            <td>{{ car.cargoList.length == 0 ? '-' : car.cargoList.length }}</td>
           </tr>
         </tbody>
       </table>
@@ -70,41 +71,138 @@
 import { defineComponent } from 'vue';
 import { useStore } from '../../store';
 import stockPreviewMixin from '../../mixins/stockPreviewMixin';
-import { ICarWagon, ILocomotive } from '../../types';
+import { Vehicle } from '../../types';
+import { isLocomotive } from '../../utils/vehicleUtils';
+import stockMixin from '../../mixins/stockMixin';
 
 type WikiMode = 'locomotives' | 'carWagons';
+type SorterID = 'type' | 'constructionType' | 'image' | 'length' | 'mass' | 'maxSpeed' | 'cargoCount' | 'power';
+
+const locoHeaders: { name: string; id: SorterID }[] = [
+  { name: 'Zdjęcie', id: 'image' },
+  { name: 'Nazwa', id: 'type' },
+  { name: 'Rodzaj', id: 'power' },
+  { name: 'Konstrukcja', id: 'constructionType' },
+  { name: 'Długość', id: 'length' },
+  { name: 'Masa', id: 'mass' },
+  { name: 'Prędkość', id: 'maxSpeed' },
+];
+
+const carHeaders: { name: string; id: SorterID }[] = [
+  { name: 'Zdjęcie', id: 'image' },
+  { name: 'Nazwa', id: 'type' },
+  { name: 'Konstrukcja', id: 'constructionType' },
+  { name: 'Długość', id: 'length' },
+  { name: 'Masa', id: 'mass' },
+  { name: 'Prędkość', id: 'maxSpeed' },
+  { name: 'Ładunki', id: 'cargoCount' },
+];
+
+const vehicleTypes: { [key: string]: string } = {
+  'loco-ezt': 'EZT',
+  'loco-szt': 'SZT',
+  'loco-s': 'Spalinowóz',
+  'loco-e': 'Elektrowóz',
+};
 
 export default defineComponent({
-  mixins: [stockPreviewMixin],
+  mixins: [stockPreviewMixin, stockMixin],
 
   data() {
     return {
       store: useStore(),
+      locoHeaders,
+      carHeaders,
+      vehicleTypes,
+
+      locosScrollTop: 0,
+      carsScrollTop: 0,
+
       wikiMode: 'locomotives' as WikiMode,
       searchedVehicleTypeName: '',
+
+      currentLocoSorter: {
+        id: 'type' as SorterID,
+        direction: 1,
+      },
+
+      currentCarSorter: {
+        id: 'type' as SorterID,
+        direction: 1,
+      },
     };
   },
 
+  activated() {
+    const tableWrapperRef = this.$refs['table-wrapper'] as HTMLElement;
+    tableWrapperRef.scrollTo({ top: this.wikiMode == 'locomotives' ? this.locosScrollTop : this.carsScrollTop });
+  },
+
   methods: {
+    scrollEvent(e: Event) {
+      const tableScrollTop = (e.target as HTMLElement).scrollTop;
+
+      if (this.wikiMode == 'locomotives') this.locosScrollTop = tableScrollTop;
+      else this.carsScrollTop = tableScrollTop;
+    },
+
     changeWikiMode(wikiMode: WikiMode) {
       this.searchedVehicleTypeName = '';
       this.wikiMode = wikiMode;
     },
+
+    toggleSorter(id: SorterID) {
+      if (id == this.currentModeSorter.id) this.currentModeSorter.direction = -this.currentModeSorter.direction;
+      this.currentModeSorter.id = id;
+    },
+
+    sortVehicles(vA: Vehicle, vB: Vehicle) {
+      const { id, direction } = this.currentModeSorter;
+      // const vehiclesAreLocos = isLocomotive(vA) && isLocomotive(vB);
+      const vehiclesAreCars = !isLocomotive(vA) && !isLocomotive(vB);
+
+      switch (id) {
+        case 'type':
+        case 'constructionType':
+          return direction == 1 ? vA[id].localeCompare(vB[id]) : vB[id].localeCompare(vA[id]);
+
+        case 'mass':
+        case 'length':
+        case 'maxSpeed':
+          return Math.sign(vA[id] - vB[id]) * direction;
+
+        case 'cargoCount':
+          if (vehiclesAreCars) return Math.sign((vA.cargoList.length || -1) - (vB.cargoList.length || -1)) * direction;
+
+        default:
+          break;
+      }
+
+      return direction == 1 ? vA.type.localeCompare(vB.type) : vB.type.localeCompare(vA.type);
+    },
   },
 
   computed: {
+    currentModeSorter() {
+      console.log(this.wikiMode);
+
+      return this.wikiMode == 'carWagons' ? this.currentCarSorter : this.currentLocoSorter;
+    },
+
     computedLocoList() {
       const trimmedSearchValue = this.searchedVehicleTypeName.trim();
-      if (trimmedSearchValue == '') return this.store.locoDataList;
 
-      return this.store.locoDataList.filter((loco) => new RegExp(`${trimmedSearchValue}`, 'i').test(loco.type));
+      return this.store.locoDataList
+        .filter((loco) => new RegExp(`${trimmedSearchValue}`, 'i').test(loco.type))
+        .sort(this.sortVehicles);
     },
 
     computedCarList() {
       const trimmedSearchValue = this.searchedVehicleTypeName.trim();
-      if (trimmedSearchValue == '') return this.store.carDataList;
 
-      return this.store.carDataList.filter((car) => new RegExp(`${trimmedSearchValue}`, 'i').test(car.type));
+      return this.store.carDataList
+        .filter((car) => new RegExp(`${trimmedSearchValue}`, 'i').test(car.type))
+        .sort(this.sortVehicles);
     },
   },
 });
@@ -150,25 +248,37 @@ export default defineComponent({
   th {
     background-color: #111;
     padding: 0.5em;
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
   }
 
   tr {
+    cursor: pointer;
     background-color: #333;
 
     &:nth-child(odd) {
       background-color: #444;
     }
+
+    &:hover {
+      background-color: #666;
+    }
   }
 
   td {
     text-align: center;
+    padding: 0.25em;
     height: 100px;
   }
 
+  td:first-child {
+    width: 150px;
+  }
+
   td img {
     display: block;
-    margin: 0 auto;
-    object-fit: cover;
+    width: 150px;
   }
 }
 </style>
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 1160b4e..ec188e0 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -135,8 +135,8 @@ button {
 
 select,
 input {
-  background: none;
-  border: 2px solid white;
+  background: $bgColor;
+  border: 2px solid #aaa;
   outline: none;
 
   padding: 0.25em 0.35em;
@@ -156,7 +156,7 @@ input {
 }
 
 option {
-  color: black;
+  color: white;
   border: none;
 }
 

From cb561395ffad22f9c8c20563af7297521f0c249f Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Wed, 12 Jul 2023 01:20:22 +0200
Subject: [PATCH 05/12] =?UTF-8?q?hotfixy=20komponent=C3=B3w?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  6 ++++--
 src/components/cards/RealStockCard.vue        |  2 --
 src/components/sections/StockSection.vue      | 21 ++++++++++++++++---
 src/components/sections/TrainImageSection.vue |  2 +-
 src/components/tabs/WikiListTab.vue           | 16 ++++++++++++--
 .../utils/ImageFullscreenPreview.vue          | 17 ++++++++++++---
 6 files changed, 51 insertions(+), 13 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 7a5266d..c862502 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,6 @@
 <template>
-  <ImageFullscreenPreview />
+  <AppModals />
+  <ImageFullscreenPreview v-if="store.vehiclePreviewSrc" />
   <AppContainerView />
 </template>
 
@@ -8,6 +9,7 @@ import { defineComponent } from 'vue';
 import { useStore } from './store';
 import ImageFullscreenPreview from './components/utils/ImageFullscreenPreview.vue';
 import AppContainerView from './views/AppContainerView.vue';
+import AppModals from './components/app/AppModals.vue';
 
 export default defineComponent({
   data() {
@@ -24,7 +26,7 @@ export default defineComponent({
     this.store.fetchStockInfoData();
     this.store.handleRouting();
   },
-  components: { ImageFullscreenPreview, AppContainerView },
+  components: { ImageFullscreenPreview, AppContainerView, AppModals },
 });
 </script>
 
diff --git a/src/components/cards/RealStockCard.vue b/src/components/cards/RealStockCard.vue
index 3e87798..42c3401 100644
--- a/src/components/cards/RealStockCard.vue
+++ b/src/components/cards/RealStockCard.vue
@@ -1,6 +1,4 @@
 <template>
-  <div class="g-card-dimmer" @click="store.isRealStockListCardOpen = false"></div>
-
   <div class="real-stock-card g-card" @keydown.esc="store.isRealStockListCardOpen = false">
     <div class="g-card_bg" @click="store.isRealStockListCardOpen = false"></div>
 
diff --git a/src/components/sections/StockSection.vue b/src/components/sections/StockSection.vue
index 18625c7..9848f68 100644
--- a/src/components/sections/StockSection.vue
+++ b/src/components/sections/StockSection.vue
@@ -3,11 +3,11 @@
     <div class="section_modes">
       <button
         class="btn"
-        v-for="(id, name) in sectionModes"
+        v-for="(id, name, i) in sectionModes"
         @click="chooseSection(id)"
         :data-selected="store.stockSectionMode == id"
       >
-        {{ name }}
+        <span class="text--accent">{{ i + 1 }}.</span> {{ name }}
         <span v-if="id == 'stock-list'">({{ store.stockList.length }})</span>
       </button>
     </div>
@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, KeepAlive } from 'vue';
+import { computed, KeepAlive, onMounted } from 'vue';
 import { useStore } from '../../store';
 import StockListTab from '../tabs/StockListTab.vue';
 import StockGeneratorTab from '../tabs/StockGeneratorTab.vue';
@@ -38,6 +38,13 @@ const sectionModes: { [key: string]: SectionMode } = {
   'GNR SKŁADU': 'stock-generator',
 };
 
+const sectionKeyIndexes: { [key: string]: SectionMode } = {
+  '1': 'stock-list',
+  '2': 'wiki-list',
+  '3': 'number-generator',
+  '4': 'stock-generator',
+};
+
 const chosenSectionComponent = computed(() => {
   switch (store.stockSectionMode) {
     case 'stock-list':
@@ -60,6 +67,14 @@ const chosenSectionComponent = computed(() => {
 function chooseSection(sectionId: SectionMode) {
   store.stockSectionMode = sectionId;
 }
+
+onMounted(() => {
+  window.addEventListener('keydown', (e) => {
+    if (e.key == '1' || e.key == '2' || e.key == '3' || e.key == '4') {
+      store.stockSectionMode = sectionKeyIndexes[e.key];
+    }
+  });
+});
 </script>
 
 <style lang="scss">
diff --git a/src/components/sections/TrainImageSection.vue b/src/components/sections/TrainImageSection.vue
index ed3784e..cf5452c 100644
--- a/src/components/sections/TrainImageSection.vue
+++ b/src/components/sections/TrainImageSection.vue
@@ -144,7 +144,7 @@ export default defineComponent({
       width: 100%;
       height: 100%;
 
-      cursor: pointer;
+      cursor: zoom-in;
     }
 
     .empty-message,
diff --git a/src/components/tabs/WikiListTab.vue b/src/components/tabs/WikiListTab.vue
index 149f5ad..72396dc 100644
--- a/src/components/tabs/WikiListTab.vue
+++ b/src/components/tabs/WikiListTab.vue
@@ -26,7 +26,13 @@
         </thead>
 
         <tbody v-if="wikiMode == 'locomotives'">
-          <tr v-for="loco in computedLocoList" @click="previewLocomotive(loco)" @dblclick="addLocomotive(loco)">
+          <tr
+            v-for="loco in computedLocoList"
+            @click="previewLocomotive(loco)"
+            @keydown.enter="previewLocomotive(loco)"
+            @dblclick="addLocomotive(loco)"
+            tabindex="0"
+          >
             <td>
               <img
                 :src="`https://spythere.github.io/api/td2/images/${loco.type}--300px.jpg`"
@@ -45,7 +51,13 @@
         </tbody>
 
         <tbody v-else>
-          <tr v-for="car in computedCarList" @click="previewCarWagon(car)" @dblclick="addCarWagon(car)">
+          <tr
+            v-for="car in computedCarList"
+            @keydow.enter="previewCarWagon(car)"
+            @click="previewCarWagon(car)"
+            @dblclick="addCarWagon(car)"
+            tabindex="0"
+          >
             <td>
               <img
                 :src="`https://spythere.github.io/api/td2/images/${car.type}--300px.jpg`"
diff --git a/src/components/utils/ImageFullscreenPreview.vue b/src/components/utils/ImageFullscreenPreview.vue
index a3a05c3..d10cd64 100644
--- a/src/components/utils/ImageFullscreenPreview.vue
+++ b/src/components/utils/ImageFullscreenPreview.vue
@@ -1,5 +1,10 @@
 <template>
-  <div class="image-preview" v-if="store.vehiclePreviewSrc">
+  <div
+    class="image-preview"
+    @click="store.vehiclePreviewSrc = ''"
+    @keydown.esc="store.vehiclePreviewSrc = ''"
+    tabindex="0"
+  >
     <img :src="store.vehiclePreviewSrc" alt="preview" />
   </div>
 </template>
@@ -14,6 +19,10 @@ export default defineComponent({
       store: useStore(),
     };
   },
+
+  mounted() {
+    this.$el.focus();
+  },
 });
 </script>
 
@@ -32,10 +41,12 @@ export default defineComponent({
   height: 100%;
 
   background: rgba(black, 0.85);
+  cursor: zoom-out;
 
   img {
-    width: 90%;
-    max-width: 800px;
+    max-width: 100%;
+    height: auto;
+    max-height: 100%;
   }
 }
 </style>

From 6cfea4c9b8a6f2a71fe58cc535457c0d4fd3d9a2 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Wed, 12 Jul 2023 01:22:45 +0200
Subject: [PATCH 06/12] =?UTF-8?q?responsywno=C5=9B=C4=87;=20domy=C5=9Blny?=
 =?UTF-8?q?=20tab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/tabs/StockGeneratorTab.vue | 9 +--------
 src/store.ts                              | 2 +-
 2 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/src/components/tabs/StockGeneratorTab.vue b/src/components/tabs/StockGeneratorTab.vue
index 09a2cf7..673a835 100644
--- a/src/components/tabs/StockGeneratorTab.vue
+++ b/src/components/tabs/StockGeneratorTab.vue
@@ -265,7 +265,7 @@ export default defineComponent({
 .generator_vehicles {
   display: grid;
   gap: 0.5em;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
 
   button {
     position: relative;
@@ -315,12 +315,5 @@ export default defineComponent({
   font-weight: bold;
   color: black;
 }
-
-@media only screen and (max-width: 470px) {
-  .generator_cargo,
-  .generator_vehicles {
-    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-  }
-}
 </style>
 
diff --git a/src/store.ts b/src/store.ts
index af19b13..33aa5b0 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -38,7 +38,7 @@ export const useStore = defineStore({
 
       vehiclePreviewSrc: '',
 
-      stockSectionMode: 'wiki-list',
+      stockSectionMode: 'stock-list',
 
       isRandomizerCardOpen: false,
       isRealStockListCardOpen: false,

From 17266248e389fc9b5e796b9f7618035757c55408 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Wed, 12 Jul 2023 01:40:39 +0200
Subject: [PATCH 07/12] keydown hotfix

---
 src/components/sections/StockSection.vue | 37 +++++++++++++++---------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/components/sections/StockSection.vue b/src/components/sections/StockSection.vue
index 9848f68..3563493 100644
--- a/src/components/sections/StockSection.vue
+++ b/src/components/sections/StockSection.vue
@@ -3,6 +3,7 @@
     <div class="section_modes">
       <button
         class="btn"
+        ref="sectionButtonRefs"
         v-for="(id, name, i) in sectionModes"
         @click="chooseSection(id)"
         :data-selected="store.stockSectionMode == id"
@@ -21,13 +22,15 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, KeepAlive, onMounted } from 'vue';
+import { computed, KeepAlive, onMounted, ref } from 'vue';
 import { useStore } from '../../store';
 import StockListTab from '../tabs/StockListTab.vue';
 import StockGeneratorTab from '../tabs/StockGeneratorTab.vue';
 import NumberGeneratorTab from '../tabs/NumberGeneratorTab.vue';
 import WikiListTab from '../tabs/WikiListTab.vue';
 
+const sectionButtonRefs = ref([]);
+
 const store = useStore();
 type SectionMode = typeof store.stockSectionMode;
 
@@ -38,13 +41,27 @@ const sectionModes: { [key: string]: SectionMode } = {
   'GNR SKŁADU': 'stock-generator',
 };
 
-const sectionKeyIndexes: { [key: string]: SectionMode } = {
-  '1': 'stock-list',
-  '2': 'wiki-list',
-  '3': 'number-generator',
-  '4': 'stock-generator',
+const sectionKeyIndexes: { [key: number]: SectionMode } = {
+  1: 'stock-list',
+  2: 'wiki-list',
+  3: 'number-generator',
+  4: 'stock-generator',
 };
 
+onMounted(() => {
+  console.log(sectionButtonRefs.value);
+
+  window.addEventListener('keydown', (e) => {
+    if (e.target instanceof HTMLInputElement) return;
+
+    if (e.key == '1' || e.key == '2' || e.key == '3' || e.key == '4') {
+      const keyNum = Number(e.key);
+      store.stockSectionMode = sectionKeyIndexes[keyNum];
+      (sectionButtonRefs.value[keyNum - 1] as HTMLButtonElement).focus();
+    }
+  });
+});
+
 const chosenSectionComponent = computed(() => {
   switch (store.stockSectionMode) {
     case 'stock-list':
@@ -67,14 +84,6 @@ const chosenSectionComponent = computed(() => {
 function chooseSection(sectionId: SectionMode) {
   store.stockSectionMode = sectionId;
 }
-
-onMounted(() => {
-  window.addEventListener('keydown', (e) => {
-    if (e.key == '1' || e.key == '2' || e.key == '3' || e.key == '4') {
-      store.stockSectionMode = sectionKeyIndexes[e.key];
-    }
-  });
-});
 </script>
 
 <style lang="scss">

From 7362d4ffbdf211d6d844aef5537b5a8a9c17e01d Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 13 Jul 2023 14:37:46 +0200
Subject: [PATCH 08/12] ts hotfix

---
 src/components/tabs/WikiListTab.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/tabs/WikiListTab.vue b/src/components/tabs/WikiListTab.vue
index 72396dc..5c800e8 100644
--- a/src/components/tabs/WikiListTab.vue
+++ b/src/components/tabs/WikiListTab.vue
@@ -196,8 +196,6 @@ export default defineComponent({
 
   computed: {
     currentModeSorter() {
-      console.log(this.wikiMode);
-
       return this.wikiMode == 'carWagons' ? this.currentCarSorter : this.currentLocoSorter;
     },
 

From cbe983f96c6f503cfee0b97aaecf0c0b2957ac80 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 13 Jul 2023 17:51:09 +0200
Subject: [PATCH 09/12] support zimnego startu lokomotyw

---
 src/components/sections/InputsSection.vue | 20 +------
 src/components/sections/StockSection.vue  |  4 +-
 src/components/tabs/StockListTab.vue      | 59 +++++++++---------
 src/components/tabs/WikiListTab.vue       | 73 ++++++++++++++++-------
 src/components/utils/StockThumbnails.vue  |  3 -
 src/mixins/stockMixin.ts                  |  5 +-
 src/mixins/warningsMixin.ts               |  2 +-
 src/store.ts                              |  6 ++
 src/styles/global.scss                    |  6 +-
 src/types.ts                              |  6 +-
 src/utils/locoUtils.ts                    |  5 ++
 11 files changed, 108 insertions(+), 81 deletions(-)
 create mode 100644 src/utils/locoUtils.ts

diff --git a/src/components/sections/InputsSection.vue b/src/components/sections/InputsSection.vue
index 7aac727..1ffcf91 100644
--- a/src/components/sections/InputsSection.vue
+++ b/src/components/sections/InputsSection.vue
@@ -107,10 +107,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
-import { IStock } from '../../types';
 import imageMixin from '../../mixins/imageMixin';
 import { useStore } from '../../store';
-import { isLocomotive } from '../../utils/vehicleUtils';
 import stockPreviewMixin from '../../mixins/stockPreviewMixin';
 import stockMixin from '../../mixins/stockMixin';
 
@@ -197,22 +195,8 @@ export default defineComponent({
 
       if (!vehicle) return;
 
-      const stockObj: IStock = {
-        id: `${Date.now()}`,
-        useType: isLocomotive(vehicle) ? vehicle.power : vehicle.useType,
-        type: vehicle.type,
-        length: vehicle.length,
-        mass: vehicle.mass,
-        maxSpeed: vehicle.maxSpeed,
-        isLoco: isLocomotive(vehicle),
-        cargo:
-          !isLocomotive(vehicle) && vehicle.loadable && this.store.chosenCargo ? this.store.chosenCargo : undefined,
-        count: 1,
-        imgSrc: vehicle.imageSrc,
-        supportersOnly: vehicle.supportersOnly,
-      };
-
-      this.store.stockList[this.store.chosenStockListIndex] = stockObj;
+      const stockObject = this.getStockObject(vehicle, this.store.chosenCargo);
+      this.store.stockList[this.store.chosenStockListIndex] = stockObject;
     },
   },
 });
diff --git a/src/components/sections/StockSection.vue b/src/components/sections/StockSection.vue
index 3563493..769d3cd 100644
--- a/src/components/sections/StockSection.vue
+++ b/src/components/sections/StockSection.vue
@@ -49,12 +49,10 @@ const sectionKeyIndexes: { [key: number]: SectionMode } = {
 };
 
 onMounted(() => {
-  console.log(sectionButtonRefs.value);
-
   window.addEventListener('keydown', (e) => {
     if (e.target instanceof HTMLInputElement) return;
 
-    if (e.key == '1' || e.key == '2' || e.key == '3' || e.key == '4') {
+    if (/[1234]/.test(e.key)) {
       const keyNum = Number(e.key);
       store.stockSectionMode = sectionKeyIndexes[keyNum];
       (sectionButtonRefs.value[keyNum - 1] as HTMLButtonElement).focus();
diff --git a/src/components/tabs/StockListTab.vue b/src/components/tabs/StockListTab.vue
index 06e14c9..dbf5855 100644
--- a/src/components/tabs/StockListTab.vue
+++ b/src/components/tabs/StockListTab.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="stock-list">
+  <section class="stock-list-tab">
     <div class="stock_controls" :data-disabled="store.chosenStockListIndex == -1">
       <b class="no">
         POJAZD NR <span class="text--accent">{{ store.chosenStockListIndex + 1 }}</span> &nbsp;
@@ -68,7 +68,18 @@
       </span>
     </div>
 
-    <div class="stock_warnings">
+    <div class="stock_cold-start">
+      <label>
+        <input
+          type="checkbox"
+          v-model="store.isColdStart"
+          :disabled="!locoSupportsColdStart(store.stockList[0]?.constructionType || '')"
+        />
+        Zimny start lokomotywy czołowej (tylko elektrowozy typów 303E i 203E)
+      </label>
+    </div>
+
+    <div class="stock_warnings" v-if="stockHasWarnings">
       <div class="warning" v-if="locoNotSuitable">
         Lokomotywy EP07 i EP08 są przeznaczone jedynie do ruchu pasażerskiego!
       </div>
@@ -147,10 +158,11 @@ import { defineComponent } from 'vue';
 import TrainImage from '../sections/TrainImageSection.vue';
 
 import { useStore } from '../../store';
+
+import { locoSupportsColdStart } from '../../utils/locoUtils';
 import warningsMixin from '../../mixins/warningsMixin';
 import imageMixin from '../../mixins/imageMixin';
 import stockPreviewMixin from '../../mixins/stockPreviewMixin';
-import { IStock } from '../../types';
 import StockThumbnails from '../utils/StockThumbnails.vue';
 import stockMixin from '../../mixins/stockMixin';
 
@@ -162,8 +174,7 @@ export default defineComponent({
 
   setup() {
     const store = useStore();
-    
-    
+
     return {
       store,
     };
@@ -178,13 +189,12 @@ export default defineComponent({
   computed: {
     stockString() {
       return this.store.stockList
-        .map((stock) => {
-          let s = stock.isLoco || !stock.cargo ? stock.type : `${stock.type}:${stock.cargo.id}`;
+        .map((stock, i) => {
+          let stockTypeStr = stock.isLoco || !stock.cargo ? stock.type : `${stock.type}:${stock.cargo.id}`;
+          let coldStart =
+            i == 0 && this.store.isColdStart && locoSupportsColdStart(stock.constructionType || '') ? ',c' : '';
 
-          let final = s;
-          for (let i = 0; i < stock.count - 1; i++) final += `;${s}`;
-
-          return final;
+          return stockTypeStr + coldStart;
         })
         .join(';');
     },
@@ -196,19 +206,16 @@ export default defineComponent({
     chosenStockVehicle() {
       return this.store.chosenStockListIndex == -1 ? undefined : this.store.stockList[this.store.chosenStockListIndex];
     },
-  },
 
-  methods: {
     stockHasWarnings() {
       return this.tooManyLocomotives || this.trainTooHeavy || this.trainTooLong || this.locoNotSuitable;
     },
+  },
+
+  methods: {
+    locoSupportsColdStart,
 
     copyToClipboard() {
-      // if (this.stockHasWarnings()) {
-      //   alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
-      //   return;
-      // }
-
       navigator.clipboard.writeText(this.stockString);
 
       setTimeout(() => {
@@ -317,9 +324,6 @@ export default defineComponent({
     downloadStock() {
       if (this.store.stockList.length == 0) return alert('Lista pojazdów jest pusta!');
 
-      // if (this.stockHasWarnings())
-      //   return alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
-
       const defaultName = `${this.store.chosenRealStockName || this.store.stockList[0].type} ${
         this.store.totalMass
       }t; ${this.store.totalLength}m; vmax ${this.store.maxStockSpeed}`;
@@ -395,6 +399,11 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../../styles/global';
 
+.stock-list-tab {
+  display: grid;
+  grid-gap: 0.5em;
+}
+
 .warning {
   padding: 0.25em;
   background: $accentColor;
@@ -417,7 +426,6 @@ export default defineComponent({
   flex-wrap: wrap;
 
   padding: 0.5em;
-  margin-bottom: 1em;
 
   background-color: #353a57;
 
@@ -450,7 +458,6 @@ export default defineComponent({
 .stock_actions {
   display: grid;
   gap: 0.5em;
-  margin-bottom: 1em;
 
   grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
 
@@ -472,9 +479,7 @@ export default defineComponent({
 
 ul {
   position: relative;
-
   overflow: auto;
-
   height: 500px;
 }
 
@@ -518,10 +523,6 @@ li > .stock-info {
   }
 }
 
-.stock_warnings {
-  margin: 0.5em 0;
-}
-
 .supporter {
   color: salmon;
 }
diff --git a/src/components/tabs/WikiListTab.vue b/src/components/tabs/WikiListTab.vue
index 5c800e8..a67a735 100644
--- a/src/components/tabs/WikiListTab.vue
+++ b/src/components/tabs/WikiListTab.vue
@@ -15,7 +15,7 @@
       <table>
         <thead>
           <tr>
-            <th v-for="header in wikiMode == 'locomotives' ? locoHeaders : carHeaders" @click="toggleSorter(header.id)">
+            <th v-for="header in wikiMode == 'locomotives' ? locoHeaders : carHeaders" @click="toggleSorter(header)">
               {{ header.name }}
 
               <span v-if="currentModeSorter.id == header.id">
@@ -44,6 +44,7 @@
             <td>{{ loco.type }}</td>
             <td>{{ vehicleTypes[loco.power] }}</td>
             <td>{{ loco.constructionType }}</td>
+            <td>{{ locoSupportsColdStart(loco.constructionType) ? `&check;` : '&cross;' }}</td>
             <td>{{ loco.length }}m</td>
             <td>{{ loco.mass }}t</td>
             <td>{{ loco.maxSpeed }}km/h</td>
@@ -86,28 +87,45 @@ import stockPreviewMixin from '../../mixins/stockPreviewMixin';
 import { Vehicle } from '../../types';
 import { isLocomotive } from '../../utils/vehicleUtils';
 import stockMixin from '../../mixins/stockMixin';
+import { locoSupportsColdStart } from '../../utils/locoUtils';
 
 type WikiMode = 'locomotives' | 'carWagons';
-type SorterID = 'type' | 'constructionType' | 'image' | 'length' | 'mass' | 'maxSpeed' | 'cargoCount' | 'power';
+type SorterID =
+  | 'type'
+  | 'constructionType'
+  | 'image'
+  | 'length'
+  | 'mass'
+  | 'maxSpeed'
+  | 'cargoCount'
+  | 'power'
+  | 'coldStart';
 
-const locoHeaders: { name: string; id: SorterID }[] = [
-  { name: 'Zdjęcie', id: 'image' },
-  { name: 'Nazwa', id: 'type' },
-  { name: 'Rodzaj', id: 'power' },
-  { name: 'Konstrukcja', id: 'constructionType' },
-  { name: 'Długość', id: 'length' },
-  { name: 'Masa', id: 'mass' },
-  { name: 'Prędkość', id: 'maxSpeed' },
+interface WikiHeader {
+  name: string;
+  id: SorterID;
+  sortable: boolean;
+}
+
+const locoHeaders: WikiHeader[] = [
+  { name: 'Zdjęcie', id: 'image', sortable: false },
+  { name: 'Nazwa', id: 'type', sortable: true },
+  { name: 'Rodzaj', id: 'power', sortable: true },
+  { name: 'Konstrukcja', id: 'constructionType', sortable: true },
+  { name: 'Zimny start', id: 'coldStart', sortable: true },
+  { name: 'Długość', id: 'length', sortable: true },
+  { name: 'Masa', id: 'mass', sortable: true },
+  { name: 'Prędkość', id: 'maxSpeed', sortable: true },
 ];
 
-const carHeaders: { name: string; id: SorterID }[] = [
-  { name: 'Zdjęcie', id: 'image' },
-  { name: 'Nazwa', id: 'type' },
-  { name: 'Konstrukcja', id: 'constructionType' },
-  { name: 'Długość', id: 'length' },
-  { name: 'Masa', id: 'mass' },
-  { name: 'Prędkość', id: 'maxSpeed' },
-  { name: 'Ładunki', id: 'cargoCount' },
+const carHeaders: WikiHeader[] = [
+  { name: 'Zdjęcie', id: 'image', sortable: false },
+  { name: 'Nazwa', id: 'type', sortable: true },
+  { name: 'Konstrukcja', id: 'constructionType', sortable: true },
+  { name: 'Długość', id: 'length', sortable: true },
+  { name: 'Masa', id: 'mass', sortable: true },
+  { name: 'Prędkość', id: 'maxSpeed', sortable: true },
+  { name: 'Ładunki', id: 'cargoCount', sortable: true },
 ];
 
 const vehicleTypes: { [key: string]: string } = {
@@ -151,6 +169,8 @@ export default defineComponent({
   },
 
   methods: {
+    locoSupportsColdStart,
+
     scrollEvent(e: Event) {
       const tableScrollTop = (e.target as HTMLElement).scrollTop;
 
@@ -163,14 +183,16 @@ export default defineComponent({
       this.wikiMode = wikiMode;
     },
 
-    toggleSorter(id: SorterID) {
-      if (id == this.currentModeSorter.id) this.currentModeSorter.direction = -this.currentModeSorter.direction;
-      this.currentModeSorter.id = id;
+    toggleSorter(header: WikiHeader) {
+      if (!header.sortable) return;
+
+      if (header.id == this.currentModeSorter.id) this.currentModeSorter.direction *= -1;
+      this.currentModeSorter.id = header.id;
     },
 
     sortVehicles(vA: Vehicle, vB: Vehicle) {
       const { id, direction } = this.currentModeSorter;
-      // const vehiclesAreLocos = isLocomotive(vA) && isLocomotive(vB);
+      const vehiclesAreLocos = isLocomotive(vA) && isLocomotive(vB);
       const vehiclesAreCars = !isLocomotive(vA) && !isLocomotive(vB);
 
       switch (id) {
@@ -186,6 +208,13 @@ export default defineComponent({
         case 'cargoCount':
           if (vehiclesAreCars) return Math.sign((vA.cargoList.length || -1) - (vB.cargoList.length || -1)) * direction;
 
+        case 'coldStart':
+          if (vehiclesAreLocos)
+            return (
+              (locoSupportsColdStart(vA.constructionType) > locoSupportsColdStart(vB.constructionType) ? 1 : -1) *
+              direction
+            );
+
         default:
           break;
       }
diff --git a/src/components/utils/StockThumbnails.vue b/src/components/utils/StockThumbnails.vue
index 99d086d..cce0473 100644
--- a/src/components/utils/StockThumbnails.vue
+++ b/src/components/utils/StockThumbnails.vue
@@ -86,10 +86,7 @@ const allowDrop = (e: DragEvent) => {
 <style lang="scss" scoped>
 .stock_thumbnails {
   display: flex;
-  margin: 1em 0;
-
   overflow: auto;
-
   background-color: #353a57;
 
   > div {
diff --git a/src/mixins/stockMixin.ts b/src/mixins/stockMixin.ts
index 5b5565c..bcd08d9 100644
--- a/src/mixins/stockMixin.ts
+++ b/src/mixins/stockMixin.ts
@@ -30,6 +30,7 @@ export default defineComponent({
         imgSrc: vehicle.imageSrc,
         useType: isLoco ? vehicle.power : vehicle.useType,
         supportersOnly: vehicle.supportersOnly,
+        constructionType: vehicle.constructionType,
       };
     },
 
@@ -67,13 +68,15 @@ export default defineComponent({
 
       this.store.swapVehicles = false;
 
-      stockArray.forEach((type) => {
+      stockArray.forEach((type, i) => {
         let vehicle: Vehicle | null = null;
         let vehicleCargo: ICargo | null = null;
 
         if (/^(EU|EP|ET|SM|EN|2EN|SN)/.test(type)) {
           const [locoType, coldStart] = type.split(',');
           vehicle = this.store.locoDataList.find((loco) => loco.type == locoType) || null;
+
+          if (i == 0 && coldStart == 'c') this.store.isColdStart = true;
         } else {
           const [carType, cargo] = type.split(':');
           vehicle = this.store.carDataList.find((car) => car.type == carType) || null;
diff --git a/src/mixins/warningsMixin.ts b/src/mixins/warningsMixin.ts
index 0515d62..2c7095c 100644
--- a/src/mixins/warningsMixin.ts
+++ b/src/mixins/warningsMixin.ts
@@ -26,7 +26,7 @@ export default defineComponent({
         !this.store.isTrainPassenger &&
         this.store.stockList.length > 1 &&
         !this.store.stockList.every((stock) => stock.isLoco) &&
-        this.store.stockList.find((stock) => stock.isLoco && stock.type.startsWith('EP'))
+        this.store.stockList.some((stock) => stock.isLoco && stock.type.startsWith('EP'))
       );
     },
 
diff --git a/src/store.ts b/src/store.ts
index 33aa5b0..4922079 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -20,6 +20,8 @@ export const useStore = defineStore({
       chosenCargo: null,
       chosenVehicle: null,
 
+      isColdStart: false,
+
       showSupporter: false,
       imageLoading: false,
 
@@ -71,6 +73,9 @@ export const useStore = defineStore({
         case '/stockgnr':
           this.stockSectionMode = 'stock-generator';
           break;
+        case '/vehicles':
+          this.stockSectionMode = 'wiki-list';
+          break;
         default:
           break;
       }
@@ -78,3 +83,4 @@ export const useStore = defineStore({
   },
 });
 
+
diff --git a/src/styles/global.scss b/src/styles/global.scss
index ec188e0..50bde83 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -134,8 +134,9 @@ button {
 }
 
 select,
-input {
-  background: $bgColor;
+input[type="text"],
+input[type="number"] {
+  background: none;
   border: 2px solid #aaa;
   outline: none;
 
@@ -158,6 +159,7 @@ input {
 option {
   color: white;
   border: none;
+  background-color: $bgColor;
 }
 
 ul {
diff --git a/src/types.ts b/src/types.ts
index d1bad05..cea5c0c 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -5,9 +5,10 @@ export interface IStore {
   chosenCar: ICarWagon | null;
   chosenLoco: ILocomotive | null;
   chosenCargo: ICargo | null;
-
   chosenVehicle: Vehicle | null;
 
+  isColdStart: boolean;
+
   showSupporter: boolean;
   imageLoading: boolean;
 
@@ -99,8 +100,9 @@ export interface ICargo {
 
 export interface IStock {
   id: string;
-  useType: string;
   type: string;
+  useType: string;
+  constructionType: string;
   length: number;
   mass: number;
   maxSpeed: number;
diff --git a/src/utils/locoUtils.ts b/src/utils/locoUtils.ts
new file mode 100644
index 0000000..6a7f553
--- /dev/null
+++ b/src/utils/locoUtils.ts
@@ -0,0 +1,5 @@
+const supportedConstructions = ['303e', '203e'];
+
+export function locoSupportsColdStart(constructionType: string) {
+  return new RegExp(`(${supportedConstructions.join('|')})`).test(constructionType);
+}

From d932ebfa50295731d2959534a7ed9420afa3b0c3 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Fri, 14 Jul 2023 01:52:36 +0200
Subject: [PATCH 10/12] =?UTF-8?q?poprawki=20responsywno=C5=9Bci?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/sections/StockSection.vue |   7 +
 src/components/tabs/WikiListTab.vue      | 166 +++++++++++++----------
 2 files changed, 100 insertions(+), 73 deletions(-)

diff --git a/src/components/sections/StockSection.vue b/src/components/sections/StockSection.vue
index 769d3cd..cbb3446 100644
--- a/src/components/sections/StockSection.vue
+++ b/src/components/sections/StockSection.vue
@@ -112,6 +112,7 @@ function chooseSection(sectionId: SectionMode) {
 .section_modes {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
+
   gap: 0.5em;
 
   margin-bottom: 0.5em;
@@ -138,5 +139,11 @@ function chooseSection(sectionId: SectionMode) {
     }
   }
 }
+
+@media screen and (max-width: 650px) {
+  .section_modes {
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  }
+}
 </style>
 
diff --git a/src/components/tabs/WikiListTab.vue b/src/components/tabs/WikiListTab.vue
index a67a735..0b42a10 100644
--- a/src/components/tabs/WikiListTab.vue
+++ b/src/components/tabs/WikiListTab.vue
@@ -1,81 +1,87 @@
 <template>
-  <section class="wiki-list">
-    <div class="actions-panel">
-      <div class="actions-panel_vehicles">
-        <button class="btn btn--choice" @click="changeWikiMode('locomotives')">POJ. TRAKCYJNE</button>
-        <button class="btn btn--choice" @click="changeWikiMode('carWagons')">WAGONY</button>
-      </div>
-
-      <div class="actions-panel_search">
-        <input type="text" placeholder="Wyszukaj pojazd..." v-model="searchedVehicleTypeName" />
-      </div>
+  <section class="wiki-list tab">
+    <div class="tab_header">
+      <h2>LISTA DOSTĘPNYCH POJAZDÓW</h2>
     </div>
 
-    <div class="table-wrapper" @scroll="scrollEvent" ref="table-wrapper">
-      <table>
-        <thead>
-          <tr>
-            <th v-for="header in wikiMode == 'locomotives' ? locoHeaders : carHeaders" @click="toggleSorter(header)">
-              {{ header.name }}
+    <div class="tab_content">
+      <div class="actions-panel">
+        <div class="actions-panel_vehicles">
+          <button class="btn btn--choice" @click="changeWikiMode('locomotives')">POJ. TRAKCYJNE</button>
+          <button class="btn btn--choice" @click="changeWikiMode('carWagons')">WAGONY</button>
+        </div>
 
-              <span v-if="currentModeSorter.id == header.id">
-                {{ currentModeSorter.direction == 1 ? `&uArr;` : `&dArr;` }}
-              </span>
-            </th>
-          </tr>
-        </thead>
+        <div class="actions-panel_search">
+          <input type="text" placeholder="Wyszukaj pojazd..." v-model="searchedVehicleTypeName" />
+        </div>
+      </div>
 
-        <tbody v-if="wikiMode == 'locomotives'">
-          <tr
-            v-for="loco in computedLocoList"
-            @click="previewLocomotive(loco)"
-            @keydown.enter="previewLocomotive(loco)"
-            @dblclick="addLocomotive(loco)"
-            tabindex="0"
-          >
-            <td>
-              <img
-                :src="`https://spythere.github.io/api/td2/images/${loco.type}--300px.jpg`"
-                loading="lazy"
-                :alt="`Lokomotywa ${loco.type}`"
-              />
-            </td>
+      <div class="table-wrapper" @scroll="scrollEvent" ref="table-wrapper">
+        <table>
+          <thead>
+            <tr>
+              <th v-for="header in wikiMode == 'locomotives' ? locoHeaders : carHeaders" @click="toggleSorter(header)">
+                {{ header.name }}
 
-            <td>{{ loco.type }}</td>
-            <td>{{ vehicleTypes[loco.power] }}</td>
-            <td>{{ loco.constructionType }}</td>
-            <td>{{ locoSupportsColdStart(loco.constructionType) ? `&check;` : '&cross;' }}</td>
-            <td>{{ loco.length }}m</td>
-            <td>{{ loco.mass }}t</td>
-            <td>{{ loco.maxSpeed }}km/h</td>
-          </tr>
-        </tbody>
+                <span v-if="currentModeSorter.id == header.id">
+                  {{ currentModeSorter.direction == 1 ? `&uArr;` : `&dArr;` }}
+                </span>
+              </th>
+            </tr>
+          </thead>
 
-        <tbody v-else>
-          <tr
-            v-for="car in computedCarList"
-            @keydow.enter="previewCarWagon(car)"
-            @click="previewCarWagon(car)"
-            @dblclick="addCarWagon(car)"
-            tabindex="0"
-          >
-            <td>
-              <img
-                :src="`https://spythere.github.io/api/td2/images/${car.type}--300px.jpg`"
-                loading="lazy"
-                :alt="`Lokomotywa ${car.type}`"
-              />
-            </td>
+          <tbody v-if="wikiMode == 'locomotives'">
+            <tr
+              v-for="loco in computedLocoList"
+              @click="previewLocomotive(loco)"
+              @keydown.enter="previewLocomotive(loco)"
+              @dblclick="addLocomotive(loco)"
+              tabindex="0"
+            >
+              <td>
+                <img
+                  :src="`https://spythere.github.io/api/td2/images/${loco.type}--300px.jpg`"
+                  loading="lazy"
+                  :alt="`Lokomotywa ${loco.type}`"
+                />
+              </td>
 
-            <td>{{ car.type }}</td>
-            <td>{{ car.constructionType }}</td>
-            <td>{{ car.length }}m</td>
-            <td>{{ car.mass }}t</td>
-            <td>{{ car.maxSpeed }}km/h</td>
-            <td>{{ car.cargoList.length == 0 ? '-' : car.cargoList.length }}</td>
-          </tr>
-        </tbody>
-      </table>
+              <td>{{ loco.type }}</td>
+              <td>{{ vehicleTypes[loco.power] }}</td>
+              <td>{{ loco.constructionType }}</td>
+              <td>{{ locoSupportsColdStart(loco.constructionType) ? `&check;` : '&cross;' }}</td>
+              <td>{{ loco.length }}m</td>
+              <td>{{ loco.mass }}t</td>
+              <td>{{ loco.maxSpeed }}km/h</td>
+            </tr>
+          </tbody>
+
+          <tbody v-else>
+            <tr
+              v-for="car in computedCarList"
+              @keydow.enter="previewCarWagon(car)"
+              @click="previewCarWagon(car)"
+              @dblclick="addCarWagon(car)"
+              tabindex="0"
+            >
+              <td>
+                <img
+                  :src="`https://spythere.github.io/api/td2/images/${car.type}--300px.jpg`"
+                  loading="lazy"
+                  :alt="`Lokomotywa ${car.type}`"
+                />
+              </td>
+
+              <td>{{ car.type }}</td>
+              <td>{{ car.constructionType }}</td>
+              <td>{{ car.length }}m</td>
+              <td>{{ car.mass }}t</td>
+              <td>{{ car.maxSpeed }}km/h</td>
+              <td>{{ car.cargoList.length == 0 ? '-' : car.cargoList.length }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </section>
 </template>
@@ -248,6 +254,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@import '../../styles/tab.scss';
+
 .actions-panel {
   display: flex;
   justify-content: space-between;
@@ -308,16 +316,28 @@ export default defineComponent({
   td {
     text-align: center;
     padding: 0.25em;
-    height: 100px;
   }
 
   td:first-child {
-    width: 150px;
+    width: 120px;
   }
 
   td img {
     display: block;
-    width: 150px;
+    width: 120px;
+  }
+}
+
+@media screen and (max-width: $breakpointMd) {
+  .wiki-list table {
+    td {
+      width: 100px;
+      height: auto;
+
+      img {
+        width: 6em;
+      }
+    }
   }
 }
 </style>

From 428dd822a2338f63bf541ed99ce74b6a526be1b0 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Wed, 19 Jul 2023 13:30:17 +0200
Subject: [PATCH 11/12] footer hotfix

footer margin hotfix

hotfixy footera
---
 src/components/app/Footer.vue       |  3 ++-
 src/components/tabs/WikiListTab.vue | 17 +++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/components/app/Footer.vue b/src/components/app/Footer.vue
index b3544ad..86bc9a9 100644
--- a/src/components/app/Footer.vue
+++ b/src/components/app/Footer.vue
@@ -7,7 +7,7 @@
         href="https://docs.google.com/document/d/1UAAPUtN0d_RoS4RgOzEzllJZJhA0VcizzCzKW4QylbY/edit"
         target="_blank"
       >
-        regulaminem symulatora Train Driver 2 </a
+        regulaminem symulatora Train Driver 2</a
       >!
     </div>
 
@@ -47,5 +47,6 @@ footer {
 
   text-align: center;
   padding: 1em 1em 0 1em;
+  margin-top: auto;
 }
 </style>
diff --git a/src/components/tabs/WikiListTab.vue b/src/components/tabs/WikiListTab.vue
index 0b42a10..38dbc73 100644
--- a/src/components/tabs/WikiListTab.vue
+++ b/src/components/tabs/WikiListTab.vue
@@ -316,6 +316,7 @@ export default defineComponent({
   td {
     text-align: center;
     padding: 0.25em;
+    height: 85px;
   }
 
   td:first-child {
@@ -340,4 +341,20 @@ export default defineComponent({
     }
   }
 }
+
+@media screen and (max-width: $breakpointSm) {
+  .actions-panel {
+    align-items: stretch;
+    flex-direction: column;
+  }
+  
+  .actions-panel_vehicles {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .actions-panel_search {
+    display: grid;
+  }
+}
 </style>

From 0bc2ac1d153aff5816a376c5fc3b45734fcc5d91 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Wed, 19 Jul 2023 13:44:28 +0200
Subject: [PATCH 12/12] poprawki wikilist

---
 src/components/tabs/WikiListTab.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/tabs/WikiListTab.vue b/src/components/tabs/WikiListTab.vue
index 38dbc73..25354ff 100644
--- a/src/components/tabs/WikiListTab.vue
+++ b/src/components/tabs/WikiListTab.vue
@@ -281,6 +281,7 @@ export default defineComponent({
 .table-wrapper {
   overflow: auto;
   height: 750px;
+  max-height: 95vh;
 }
 
 .wiki-list table {