From 45b2bd01a29364f7eaa8371abc5c35095b80053f Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 26 Oct 2023 00:55:13 +0200
Subject: [PATCH] enhanced wiki list

---
 src/components/tabs/StockGeneratorTab.vue | 173 +++++-----------
 src/components/tabs/WikiListTab.vue       | 230 +++++++++-------------
 src/locales/en.json                       |   6 +-
 src/locales/pl.json                       |   4 +-
 src/store.ts                              |   1 +
 src/styles/global.scss                    |  23 ++-
 6 files changed, 173 insertions(+), 264 deletions(-)

diff --git a/src/components/tabs/StockGeneratorTab.vue b/src/components/tabs/StockGeneratorTab.vue
index 626776e..d30da1f 100644
--- a/src/components/tabs/StockGeneratorTab.vue
+++ b/src/components/tabs/StockGeneratorTab.vue
@@ -1,56 +1,38 @@
 <template>
   <div class="stock-generator tab">
     <div class="tab_header">
-      <h2>{{ $t("stockgen.title") }}</h2>
+      <h2>{{ $t('stockgen.title') }}</h2>
     </div>
 
     <div class="tab_content">
       <div>
-        <h2>{{ $t("stockgen.properties-title") }}</h2>
+        <h2>{{ $t('stockgen.properties-title') }}</h2>
 
         <b class="text--accent">
-          {{ $t("stockgen.properties-desc") }}
+          {{ $t('stockgen.properties-desc') }}
         </b>
 
         <div class="tab_attributes">
           <label>
-            {{ $t("stockgen.input-mass") }}
-            <input
-              type="number"
-              v-model="maxMass"
-              step="100"
-              max="4000"
-              min="0"
-            />
+            {{ $t('stockgen.input-mass') }}
+            <input type="number" v-model="maxMass" step="100" max="4000" min="0" />
           </label>
 
           <label>
-            {{ $t("stockgen.input-length") }}
-            <input
-              type="number"
-              v-model="maxLength"
-              step="25"
-              max="650"
-              min="0"
-            />
+            {{ $t('stockgen.input-length') }}
+            <input type="number" v-model="maxLength" step="25" max="650" min="0" />
           </label>
 
           <label>
-            {{ $t("stockgen.input-carcount") }}
-            <input
-              type="number"
-              v-model="maxCarCount"
-              step="1"
-              max="60"
-              min="1"
-            />
+            {{ $t('stockgen.input-carcount') }}
+            <input type="number" v-model="maxCarCount" step="1" max="60" min="1" />
           </label>
         </div>
       </div>
 
       <div>
-        <h2>{{ $t("stockgen.cargo-title") }}</h2>
-        <b>{{ $t("stockgen.cargo-desc") }}</b>
+        <h2>{{ $t('stockgen.cargo-title') }}</h2>
+        <b>{{ $t('stockgen.cargo-desc') }}</b>
       </div>
 
       <div class="generator_cargo">
@@ -66,15 +48,15 @@
       </div>
 
       <div>
-        <h2>{{ $t("stockgen.chosen-title") }}</h2>
+        <h2>{{ $t('stockgen.chosen-title') }}</h2>
 
         <div class="generator_warning">
           <span v-if="computedChosenCarTypes.size == 0">
-            {{ $t("stockgen.chosen-empty-warning") }}
+            {{ $t('stockgen.chosen-empty-warning') }}
           </span>
 
           <span v-else>
-            {{ $t("stockgen.chosen-warning") }}
+            {{ $t('stockgen.chosen-warning') }}
           </span>
         </div>
       </div>
@@ -97,28 +79,16 @@
       <hr />
 
       <div class="tab_actions">
-        <button
-          class="btn"
-          :data-disabled="computedChosenCarTypes.size == 0"
-          @click="generateStock()"
-        >
-          {{ $t("stockgen.action-generate") }}
+        <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock()">
+          {{ $t('stockgen.action-generate') }}
         </button>
 
-        <button
-          class="btn"
-          :data-disabled="computedChosenCarTypes.size == 0"
-          @click="generateStock(true)"
-        >
-          {{ $t("stockgen.action-generate-empty") }}
+        <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock(true)">
+          {{ $t('stockgen.action-generate-empty') }}
         </button>
 
-        <button
-          class="btn"
-          :data-disabled="computedChosenCarTypes.size == 0"
-          @click="resetChosenCargo"
-        >
-          {{ $t("stockgen.action-reset") }}
+        <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="resetChosenCargo">
+          {{ $t('stockgen.action-reset') }}
         </button>
       </div>
     </div>
@@ -126,15 +96,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
-import { useStore } from "../../store";
+import { defineComponent } from 'vue';
+import { useStore } from '../../store';
 
-import stockMixin from "../../mixins/stockMixin";
-import { ICargo, ICarWagon, IStock } from "../../types";
-import warningsMixin from "../../mixins/warningsMixin";
+import stockMixin from '../../mixins/stockMixin';
+import { ICargo, ICarWagon, IStock } from '../../types';
+import warningsMixin from '../../mixins/warningsMixin';
 
 export default defineComponent({
-  name: "stock-generator",
+  name: 'stock-generator',
 
   mixins: [stockMixin, warningsMixin],
 
@@ -157,9 +127,7 @@ export default defineComponent({
 
   computed: {
     computedChosenCarTypes() {
-      return new Set<string>(
-        this.chosenCarTypes.slice().sort((c1, c2) => (c1 > c2 ? 1 : -1)),
-      );
+      return new Set<string>(this.chosenCarTypes.slice().sort((c1, c2) => (c1 > c2 ? 1 : -1)));
     },
   },
 
@@ -186,38 +154,27 @@ export default defineComponent({
       const generatedChosenStockList = this.chosenCargoTypes.reduce(
         (acc, type) => {
           this.store.stockData?.generator.cargo[type]
-            .filter((c) => !this.excludedCarTypes.includes(c.split(":")[0]))
+            .filter((c) => !this.excludedCarTypes.includes(c.split(':')[0]))
             .forEach((c) => {
-              const [type, cargoType] = c.split(":");
+              const [type, cargoType] = c.split(':');
 
-              const carWagonObjs = this.store.carDataList.filter((cw) =>
-                cw.type.startsWith(type),
-              );
+              const carWagonObjs = this.store.carDataList.filter((cw) => cw.type.startsWith(type));
               const cargoObjs = [] as (ICargo | undefined)[];
 
               if (!cargoType || empty) cargoObjs.push(undefined);
-              else if (cargoType == "all")
-                cargoObjs.push(...carWagonObjs[0]!.cargoList);
-              else
-                cargoObjs.push(
-                  carWagonObjs[0]?.cargoList.find(
-                    (cargo) => cargo.id == cargoType,
-                  ),
-                );
+              else if (cargoType == 'all') cargoObjs.push(...carWagonObjs[0]!.cargoList);
+              else cargoObjs.push(carWagonObjs[0]?.cargoList.find((cargo) => cargo.id == cargoType));
 
               carWagonObjs.forEach((cw) => {
                 cargoObjs.forEach((cargoObj) => {
-                  const chosenStock = acc.find((a) =>
-                    a.constructionType.includes(cw.constructionType),
-                  );
+                  const chosenStock = acc.find((a) => a.constructionType.includes(cw.constructionType));
 
                   if (!chosenStock)
                     acc.push({
                       constructionType: cw.constructionType,
                       carPool: [{ carWagon: cw, cargo: cargoObj }],
                     });
-                  else
-                    chosenStock.carPool.push({ carWagon: cw, cargo: cargoObj });
+                  else chosenStock.carPool.push({ carWagon: cw, cargo: cargoObj });
                 });
               });
             });
@@ -227,7 +184,7 @@ export default defineComponent({
         [] as {
           constructionType: string;
           carPool: { carWagon: ICarWagon; cargo?: ICargo }[];
-        }[],
+        }[]
       );
 
       let bestGeneration: { stockList: IStock[]; value: number } = {
@@ -236,31 +193,19 @@ export default defineComponent({
       };
 
       for (let i = 0; i < 10; i++) {
-        const headingLoco = this.store.stockList[0]?.isLoco
-          ? this.store.stockList[0]
-          : undefined;
+        const headingLoco = this.store.stockList[0]?.isLoco ? this.store.stockList[0] : undefined;
         this.store.stockList.length = headingLoco ? 1 : 0;
 
-        const maxMass =
-          this.store.acceptableMass > 0
-            ? Math.min(this.store.acceptableMass, this.maxMass)
-            : this.maxMass;
+        const maxMass = this.store.acceptableMass > 0 ? Math.min(this.store.acceptableMass, this.maxMass) : this.maxMass;
 
         let exceeded = false;
 
         while (!exceeded) {
-          const randomStockType =
-            generatedChosenStockList[
-              ~~(Math.random() * generatedChosenStockList.length)
-            ];
-          const { carWagon, cargo } =
-            randomStockType.carPool[
-              ~~(Math.random() * randomStockType.carPool.length)
-            ];
+          const randomStockType = generatedChosenStockList[~~(Math.random() * generatedChosenStockList.length)];
+          const { carWagon, cargo } = randomStockType.carPool[~~(Math.random() * randomStockType.carPool.length)];
 
           if (
-            this.store.totalMass + (cargo?.totalMass || carWagon.mass) >
-              maxMass ||
+            this.store.totalMass + (cargo?.totalMass || carWagon.mass) > maxMass ||
             this.store.totalLength + carWagon.length > this.maxLength ||
             this.store.stockList.length > this.maxCarCount
           ) {
@@ -271,10 +216,7 @@ export default defineComponent({
           this.addCarWagon(carWagon, cargo);
         }
 
-        const currentGenerationValue =
-          this.store.totalLength +
-          this.store.totalMass +
-          this.store.stockList.length;
+        const currentGenerationValue = this.store.totalLength + this.store.totalMass + this.store.stockList.length;
 
         if (bestGeneration.value < currentGenerationValue) {
           bestGeneration.stockList = this.store.stockList;
@@ -283,12 +225,11 @@ export default defineComponent({
       }
 
       this.store.stockList = bestGeneration.stockList;
-      this.store.stockSectionMode = "stock-list";
+      this.store.stockSectionMode = 'stock-list';
     },
 
     previewCar(type: string) {
-      const c =
-        this.store.carDataList.find((c) => c.type.startsWith(type)) || null;
+      const c = this.store.carDataList.find((c) => c.type.startsWith(type)) || null;
 
       this.store.chosenVehicle = c;
       this.store.chosenCar = c;
@@ -301,38 +242,33 @@ export default defineComponent({
     toggleCargoChosen(cargoType: string, vehicles: string[]) {
       if (this.chosenCargoTypes.includes(cargoType)) {
         vehicles.forEach((v) => {
-          const [type] = v.split(":");
+          const [type] = v.split(':');
           this.chosenCarTypes.splice(this.chosenCarTypes.indexOf(type), 1);
         });
 
-        this.chosenCargoTypes.splice(
-          this.chosenCargoTypes.indexOf(cargoType),
-          1,
-        );
+        this.chosenCargoTypes.splice(this.chosenCargoTypes.indexOf(cargoType), 1);
         return;
       }
 
       this.chosenCargoTypes.push(cargoType);
 
       vehicles.forEach((v) => {
-        const [type] = v.split(":");
+        const [type] = v.split(':');
         this.chosenCarTypes.push(type);
       });
     },
 
     toggleCarExclusion(type: string) {
-      if (!this.excludedCarTypes.includes(type))
-        this.excludedCarTypes.push(type);
-      else
-        this.excludedCarTypes = this.excludedCarTypes.filter((c) => c != type);
+      if (!this.excludedCarTypes.includes(type)) this.excludedCarTypes.push(type);
+      else this.excludedCarTypes = this.excludedCarTypes.filter((c) => c != type);
     },
   },
 });
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/global.scss";
-@import "../../styles/tab.scss";
+@import '../../styles/global.scss';
+@import '../../styles/tab.scss';
 
 .generator_cargo,
 .generator_vehicles {
@@ -350,14 +286,7 @@ export default defineComponent({
 
     background-color: $secondaryColor;
 
-    &[data-chosen="true"] {
-      background-color: $accentColor;
-      color: black;
-
-      box-shadow: 0 0 5px 1px $accentColor;
-    }
-
-    &[data-excluded="true"] {
+    &[data-excluded='true'] {
       background-color: gray;
       box-shadow: none;
     }
diff --git a/src/components/tabs/WikiListTab.vue b/src/components/tabs/WikiListTab.vue
index 46b01be..1d19400 100644
--- a/src/components/tabs/WikiListTab.vue
+++ b/src/components/tabs/WikiListTab.vue
@@ -7,10 +7,10 @@
     <div class="tab_content">
       <div class="actions-panel">
         <div class="actions-panel_vehicles">
-          <button class="btn btn--choice" @click="changeWikiMode('locomotives')">
+          <button class="btn" :data-chosen="filters.tractions" @click="toggleFilter('tractions')">
             {{ $t('wiki.action-vehicles') }}
           </button>
-          <button class="btn btn--choice" @click="changeWikiMode('carWagons')">
+          <button class="btn" :data-chosen="filters.carriages" @click="toggleFilter('carriages')">
             {{ $t('wiki.action-carriages') }}
           </button>
         </div>
@@ -20,79 +20,52 @@
         </div>
       </div>
 
-      <div class="table-wrapper" @scroll="scrollEvent" ref="table-wrapper">
+      <div class="table-wrapper" ref="table-wrapper">
         <table>
           <thead>
             <tr>
-              <th v-for="header in wikiMode == 'locomotives' ? locoHeaders : carHeaders" @click="toggleSorter(header)" :key="header.id">
+              <th v-for="header in visibleHeaders" @click="toggleSorter(header)" :key="header.id">
                 {{ $t(`wiki.header.${header.id}`) }}
 
-                <span v-if="currentModeSorter.id == header.id">
-                  {{ currentModeSorter.direction == 1 ? `&uArr;` : `&dArr;` }}
+                <span v-if="currentSorter.id == header.id">
+                  {{ currentSorter.direction == 1 ? `&uArr;` : `&dArr;` }}
                 </span>
               </th>
             </tr>
           </thead>
 
-          <tbody v-if="wikiMode == 'locomotives'">
-            <tr
-              v-for="loco in computedLocoList"
-              :key="loco.type"
-              @click="previewLocomotive(loco)"
-              @keydown.enter="previewLocomotive(loco)"
-              @dblclick="addLocomotive(loco)"
-              tabindex="0"
-            >
-              <td>
-                <object :data="getThumbnailURL(loco.type, 'small')" type="image/jpeg">
-                  <!-- <img src="default.jpg" /> -->
-                  <div>?</div>
-                </object>
-              </td>
-
-              <td>{{ loco.type }}</td>
-              <td>{{ $t(`wiki.${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"
-              :key="car.type"
-              @keydow.enter="previewCarWagon(car)"
-              @click="previewCarWagon(car)"
-              @dblclick="addCarWagon(car)"
-              tabindex="0"
-            >
-              <td>
-                <!-- <img
-                  :src="getThumbnailURL(car.type, 'small')"
+          <!--     @click="previewLocomotive(vehicle)"
+              @keydown.enter="previewLocomotive(vehicle)"
+              @dblclick="addLocomotive(vehicle)"
+             -->
+          <tbody>
+            <tr v-for="vehicle in computedVehicleList" v-show="vehicle.show" :key="vehicle.type" tabindex="0">
+              <td style="width: 120px">
+                <img
+                  width="120"
+                  :src="getThumbnailURL(vehicle.type, 'small')"
+                  :alt="`${vehicle.type}`"
                   loading="lazy"
-                  :alt="`${car.type}`"
-                /> -->
-                <object :data="getThumbnailURL(car.type, 'small')" type="image/jpeg" loading="lazy">
-                  <!-- <img src="default.jpg" /> -->
-                  <div>?</div>
-                </object>
+                  @error="(e) => ((e.target as HTMLElement).style.display = 'none')"
+                />
               </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>{{ vehicle.type }}</td>
+              <!-- <td>{{ $t(`wiki.${vehicle.power || vehicle.}`) }}</td> -->
+              <td v-if="isLocomotive(vehicle)">{{ $t(`wiki.${vehicle.power}`) }}</td>
+              <td v-else>{{ $t(`wiki.${vehicle.useType}`) }}</td>
+              <td>{{ vehicle.constructionType }}</td>
+              <td>{{ vehicle.length }}m</td>
+              <td>{{ vehicle.mass }}t</td>
+              <td>{{ vehicle.maxSpeed }}km/h</td>
+              <td v-if="!filters.tractions && filters.carriages">{{ !isLocomotive(vehicle) ? vehicle.cargoList.length ?? '---' : 'niedost.' }}</td>
+              <td v-if="filters.tractions && !filters.carriages">
+                {{ isLocomotive(vehicle) ? (locoSupportsColdStart(vehicle.constructionType) ? `&check;` : '&cross;') : '---' }}
               </td>
             </tr>
           </tbody>
+
+          <span ref="table-bottom"></span>
         </table>
       </div>
     </div>
@@ -109,34 +82,35 @@ import stockMixin from '../../mixins/stockMixin';
 import imageMixin from '../../mixins/imageMixin';
 import { locoSupportsColdStart } from '../../utils/locoUtils';
 
-type WikiMode = 'locomotives' | 'carWagons';
 type SorterID = 'type' | 'constructionType' | 'image' | 'length' | 'mass' | 'maxSpeed' | 'cargoCount' | 'power' | 'coldStart';
 
 interface WikiHeader {
   id: SorterID;
   sortable: boolean;
+  for: 'all' | 'carriages' | 'tractions';
 }
 
-const locoHeaders: WikiHeader[] = [
-  { id: 'image', sortable: false },
-  { id: 'type', sortable: true },
-  { id: 'power', sortable: true },
-  { id: 'constructionType', sortable: true },
-  { id: 'coldStart', sortable: true },
-  { id: 'length', sortable: true },
-  { id: 'mass', sortable: true },
-  { id: 'maxSpeed', sortable: true },
+const headers: WikiHeader[] = [
+  { id: 'image', sortable: false, for: 'all' },
+  { id: 'type', sortable: true, for: 'all' },
+  { id: 'power', sortable: true, for: 'all' },
+  { id: 'constructionType', sortable: true, for: 'all' },
+  { id: 'length', sortable: true, for: 'all' },
+  { id: 'mass', sortable: true, for: 'all' },
+  { id: 'maxSpeed', sortable: true, for: 'all' },
+  { id: 'coldStart', sortable: true, for: 'tractions' },
+  { id: 'cargoCount', sortable: true, for: 'carriages' },
 ];
 
-const carHeaders: WikiHeader[] = [
-  { id: 'image', sortable: false },
-  { id: 'type', sortable: true },
-  { id: 'constructionType', sortable: true },
-  { id: 'length', sortable: true },
-  { id: 'mass', sortable: true },
-  { id: 'maxSpeed', sortable: true },
-  { id: 'cargoCount', sortable: true },
-];
+// const carHeaders: WikiHeader[] = [
+//   { id: 'image', sortable: false },
+//   { id: 'type', sortable: true },
+//   { id: 'constructionType', sortable: true },
+//   { id: 'length', sortable: true },
+//   { id: 'mass', sortable: true },
+//   { id: 'maxSpeed', sortable: true },
+//   { id: 'cargoCount', sortable: true },
+// ];
 
 export default defineComponent({
   mixins: [stockPreviewMixin, stockMixin, imageMixin],
@@ -144,58 +118,50 @@ export default defineComponent({
   data() {
     return {
       store: useStore(),
-      locoHeaders,
-      carHeaders,
+      headers,
 
       locosScrollTop: 0,
       carsScrollTop: 0,
 
-      wikiMode: 'locomotives' as WikiMode,
       searchedVehicleTypeName: '',
 
-      currentLocoSorter: {
+      currentSorter: {
         id: 'type' as SorterID,
         direction: 1,
       },
 
-      currentCarSorter: {
-        id: 'type' as SorterID,
-        direction: 1,
+      filters: {
+        tractions: true,
+        carriages: true,
       },
     };
   },
 
   activated() {
     const tableWrapperRef = this.$refs['table-wrapper'] as HTMLElement;
-    tableWrapperRef.scrollTo({
-      top: this.wikiMode == 'locomotives' ? this.locosScrollTop : this.carsScrollTop,
-    });
+
+    // tableWrapperRef.scrollTo({
+    //   top: this.wikiMode == 'locomotives' ? this.locosScrollTop : this.carsScrollTop,
+    // });
   },
 
   methods: {
     locoSupportsColdStart,
+    isLocomotive,
 
-    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;
+    toggleFilter(name: keyof typeof this.filters) {
+      this.filters[name] = !this.filters[name];
     },
 
     toggleSorter(header: WikiHeader) {
       if (!header.sortable) return;
 
-      if (header.id == this.currentModeSorter.id) this.currentModeSorter.direction *= -1;
-      this.currentModeSorter.id = header.id;
+      if (header.id == this.currentSorter.id) this.currentSorter.direction *= -1;
+      this.currentSorter.id = header.id;
     },
 
     sortVehicles(vA: Vehicle, vB: Vehicle) {
-      const { id, direction } = this.currentModeSorter;
+      const { id, direction } = this.currentSorter;
       const vehiclesAreLocos = isLocomotive(vA) && isLocomotive(vB);
       const vehiclesAreCars = !isLocomotive(vA) && !isLocomotive(vB);
 
@@ -226,21 +192,33 @@ export default defineComponent({
   },
 
   computed: {
-    currentModeSorter() {
-      return this.wikiMode == 'carWagons' ? this.currentCarSorter : this.currentLocoSorter;
+    computedVehicleList() {
+      return this.store.vehicleDataList
+        .map((vehicle) => ({
+          ...vehicle,
+          show:
+            new RegExp(`${this.searchedVehicleTypeName.trim()}`, 'i').test(vehicle.type) &&
+            ((this.filters.tractions && isLocomotive(vehicle)) || (this.filters.carriages && !isLocomotive(vehicle))),
+        }))
+        .sort(this.sortVehicles);
     },
 
-    computedLocoList() {
-      const trimmedSearchValue = this.searchedVehicleTypeName.trim();
+    visibleHeaders() {
+      const filtersActive =
+        this.filters.carriages && this.filters.tractions ? 'all' : this.filters.carriages ? 'carriages' : this.filters.tractions ? 'tractions' : null;
 
-      return this.store.locoDataList.filter((loco) => new RegExp(`${trimmedSearchValue}`, 'i').test(loco.type)).sort(this.sortVehicles);
+      console.log(filtersActive);
+
+      return this.headers.filter((header) => header.for == 'all' || header.for == filtersActive);
     },
 
-    computedCarList() {
-      const trimmedSearchValue = this.searchedVehicleTypeName.trim();
+    // computedCarList() {
+    //   const trimmedSearchValue = this.searchedVehicleTypeName.trim();
 
-      return this.store.carDataList.filter((car) => new RegExp(`${trimmedSearchValue}`, 'i').test(car.type)).sort(this.sortVehicles);
-    },
+    //   return this.store.carDataList.map((car) =>({
+
+    //   })).sort(this.sortVehicles);
+    // },
   },
 });
 </script>
@@ -297,6 +275,10 @@ export default defineComponent({
     cursor: pointer;
     background-color: #333;
 
+    &:first-child {
+      min-width: 120px;
+    }
+
     &:nth-child(odd) {
       background-color: #444;
     }
@@ -308,34 +290,18 @@ export default defineComponent({
 
   td {
     text-align: center;
-    padding: 0.25em;
-    height: 85px;
-  }
-
-  td:first-child {
-    width: 120px;
-  }
-
-  td object[type='image/jpeg'] {
-    display: flex;
-    max-width: 120px;
-    min-height: 60px;
-
-    div {
-      margin: auto;
-    }
+    height: 70px;
   }
 }
 
 @media screen and (max-width: $breakpointMd) {
   .wiki-list table {
-    td {
-      width: 100px;
-      height: auto;
+    th {
+      min-width: 100px;
+    }
 
-      img {
-        width: 6em;
-      }
+    img {
+      max-width: 100px;
     }
   }
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index 0111ccc..25b5abd 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -35,7 +35,7 @@
     "loco-ezt": "ELECTRIC M.U.",
     "loco-szt": "DIESEL M.U.",
     "car-passenger": "PASSENGER CARRIAGE",
-    "car-cargo": "FREIGHT CAR",
+    "car-cargo": "FREIGHT CARRIAGE",
     "cabin": "Cabin type:",
     "construction": "Construction type:"
   },
@@ -139,7 +139,9 @@
     "loco-ezt": "EMU",
     "loco-szt": "DMU",
     "loco-s": "Diesel locomotive",
-    "loco-e": "Electric locomotive"
+    "loco-e": "Electric locomotive",
+    "car-passenger": "Passenger carriage",
+    "car-cargo": "Frieght carriage"
   },
   "realstock": {
     "title": "POLISH TRAIN COMPOSITIONS by",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index 8763b9e..0fa9b4c 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -139,7 +139,9 @@
     "loco-ezt": "EZT",
     "loco-szt": "SZT",
     "loco-s": "Spalinowóz",
-    "loco-e": "Elektrowóz"
+    "loco-e": "Elektrowóz",
+    "car-passenger": "Wagon pasażerski",
+    "car-cargo": "Wagon towarowy" 
   },
   "realstock": {
     "title": "ZESTAWIENIA REALNE by",
diff --git a/src/store.ts b/src/store.ts
index 9756248..f6f692b 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -52,6 +52,7 @@ export const useStore = defineStore({
   getters: {
     locoDataList: (state) => locoDataList(state),
     carDataList: (state) => carDataList(state),
+    vehicleDataList: (state) => ([...locoDataList(state), ...carDataList(state)]),
     totalMass: (state) => totalMass(state),
     totalLength: (state) => totalLength(state),
     maxStockSpeed: (state) => maxStockSpeed(state),
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 721fbc3..b5f9711 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');
 
 $breakpointMd: 960px;
 $breakpointSm: 550px;
@@ -32,7 +32,7 @@ html {
   margin: 0;
   padding: 0;
 
-  font-family: "Lato", sans-serif;
+  font-family: 'Lato', sans-serif;
 
   background-color: $bgColor;
   overflow-x: hidden;
@@ -64,7 +64,7 @@ select,
 option,
 input,
 button {
-  font-family: "Lato", sans-serif;
+  font-family: 'Lato', sans-serif;
   font-size: 1em;
 }
 
@@ -94,7 +94,9 @@ button {
   border-radius: 8px;
   font-weight: bold;
 
-  transition: all 250ms;
+  transition:
+    color 150ms,
+    background-color 150ms;
 
   &:hover {
     color: $accentColor;
@@ -111,7 +113,14 @@ button {
     outline: 1px solid white;
   }
 
-  &[data-disabled="true"] {
+  &[data-chosen='true'] {
+    background-color: $accentColor;
+    color: black;
+
+    box-shadow: 0 0 5px 1px $accentColor;
+  }
+
+  &[data-disabled='true'] {
     user-select: none;
     pointer-events: none;
     -moz-user-select: none;
@@ -146,8 +155,8 @@ button {
 }
 
 select,
-input[type="text"],
-input[type="number"] {
+input[type='text'],
+input[type='number'] {
   background: none;
   border: 2px solid #aaa;
   outline: none;