Wersja 1.2.0

2026-05-05 20:38:12 +00:00 · 2022-11-15 00:39:14 +01:00
parent 414a539468 f22c261d9d
commit f2603f10d6
58 changed files with 11179 additions and 1441 deletions
@@ -1,7 +1,7 @@
 .DS_Store
 node_modules
 /dist
-
+/dev-dist
 # local env files
 .env.local
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="pl">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -7,25 +7,15 @@
    <title>Pojazdownik</title>
    <meta name="description" content="Edytor pociągów online do symulatora Train Driver 2" />
-    <meta name="keywords" content="pojazdownik td2 train driver stacjownik spythere">
+    <meta name="keywords" content="pojazdownik td2 train driver stacjownik spythere" />
-    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png" />
    <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png" />
    <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png" />
    <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png" />
    <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png" />
    <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-    <link rel="manifest" href="/manifest.json" />
+    <link rel="manifest" href="/site.webmanifest" />
-    <meta name="msapplication-TileColor" content="#ffffff" />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
-    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
+    <meta name="msapplication-TileColor" content="#da532c" />
-    <meta name="theme-color" content="#ffffff" />
+    <meta name="theme-color" content="#e4c428" />
  </head>
  <body>
    <noscript>
@@ -1,6 +1,6 @@
 {
  "name": "pojazdownik",
-  "version": "1.1.0",
+  "version": "1.2.0dev",
  "private": true,
  "scripts": {
    "dev": "vite",
@@ -12,10 +12,11 @@
    "vue": "^3.2.37"
  },
  "devDependencies": {
-    "@vitejs/plugin-vue": "^3.0.0",
+    "@vitejs/plugin-vue": "^3.2.0",
-    "sass": "^1.26.5",
+    "sass": "^1.55.0",
-    "typescript": "^4.6.4",
+    "typescript": "^4.8.4",
-    "vite": "^3.0.0",
+    "vite": "^3.2.1",
-    "vue-tsc": "^0.38.4"
+    "vite-plugin-pwa": "^0.13.3",
    "vue-tsc": "^1.0.9"
  }
 }
@@ -1,2 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
-<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
+<browserconfig>
    <msapplication>
        <tile>
            <square150x150logo src="/mstile-150x150.png"/>
            <TileColor>#da532c</TileColor>
        </tile>
    </msapplication>
 </browserconfig>
@@ -1,41 +1,25 @@
 {
- "name": "App",
+  "name": "Pojazdownik TD2",
- "icons": [
+  "short_name": "Pojazdownik",
-  {
+  "start_url": ".",
-   "src": "\/android-icon-36x36.png",
+  "description": "Generator składów online dla symulatora Train Driver 2",
-   "sizes": "36x36",
+  "icons": [
-   "type": "image\/png",
+    {
-   "density": "0.75"
+      "src": "/android-chrome-192x192.png",
-  },
+      "sizes": "192x192",
-  {
+      "type": "image/png"
-   "src": "\/android-icon-48x48.png",
+    },
-   "sizes": "48x48",
+    {
-   "type": "image\/png",
+      "src": "/android-chrome-512x512.png",
-   "density": "1.0"
+      "sizes": "512x512",
-  },
+      "type": "image/png",
-  {
+      "purpose": "any maskable"
-   "src": "\/android-icon-72x72.png",
+    }
-   "sizes": "72x72",
+  ],
-   "type": "image\/png",
+  "theme_color": "#2c3149",
-   "density": "1.5"
+  "background_color": "#2c3149",
-  },
+  "display": "standalone"
-  {
+
-   "src": "\/android-icon-96x96.png",
+
-   "sizes": "96x96",
+
   "type": "image\/png",
   "density": "2.0"
  },
  {
   "src": "\/android-icon-144x144.png",
   "sizes": "144x144",
   "type": "image\/png",
   "density": "3.0"
  },
  {
   "src": "\/android-icon-192x192.png",
   "sizes": "192x192",
   "type": "image\/png",
   "density": "4.0"
  }
 ]
 }
@@ -0,0 +1,26 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
 preserveAspectRatio="xMidYMid meet">
 <metadata>
 Created by potrace 1.14, written by Peter Selinger 2001-2017
 </metadata>
 <g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
 fill="#000000" stroke="none">
 <path d="M3220 6994 c-182 -20 -243 -29 -360 -50 -1015 -183 -1909 -826 -2421
 -1741 -214 -381 -346 -781 -416 -1258 -25 -173 -25 -717 0 -890 70 -477 202
 -877 417 -1260 280 -500 668 -916 1145 -1227 448 -292 919 -467 1465 -544 182
 -25 598 -30 800 -9 815 84 1548 432 2125 1010 579 578 923 1303 1011 2127 22
 212 15 635 -15 828 -72 467 -199 848 -410 1223 -499 892 -1352 1520 -2344
 1726 -253 53 -358 63 -672 66 -159 2 -306 1 -325 -1z m775 -1122 c963 -154
 1452 -722 1403 -1629 -35 -640 -367 -1094 -963 -1318 -296 -111 -566 -145
 -1147 -145 l-338 0 0 -437 c0 -473 -8 -624 -40 -748 -29 -116 -88 -230 -152
 -292 l-53 -52 -118 49 c-226 93 -490 250 -652 387 l-70 59 -3 1786 -2 1786 67
 57 c219 183 541 357 848 458 213 70 177 66 655 63 382 -3 451 -6 565 -24z"/>
 <path d="M2950 4344 l0 -745 393 4 c439 4 465 8 612 77 132 62 214 143 280
 275 58 118 79 225 79 405 0 131 -3 167 -22 235 -34 116 -86 208 -162 284 -76
 77 -149 122 -252 158 -133 46 -197 52 -575 53 l-353 0 0 -746z"/>
 </g>
 </svg>
@@ -0,0 +1,23 @@
 {
  "name": "Pojazdownik TD2",
  "short_name": "Pojazdownik",
  "start_url": ".",
  "description": "Generator składów online dla symulatora Train Driver 2",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "theme_color": "#2c3149",
  "background_color": "#2c3149",
  "display": "standalone"
 }
@@ -6,12 +6,6 @@
  <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>
    <transition name="card-appear">
      <RandomizerCard />
    </transition>
  </keep-alive>
  <keep-alive>
    <transition name="card-appear">
      <RealStockCard />
@@ -26,8 +20,9 @@
      <TrainImageSection />
-      <ListSection />
+      <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
@@ -52,20 +47,18 @@ import packageInfo from '.././package.json';
 import { defineComponent } from 'vue';
 import InputsSection from './components/InputsSection.vue';
 import ListSection from './components/ListSection.vue';
 import { useStore } from './store';
 import TrainImageSection from './components/TrainImageSection.vue';
 import LogoSection from './components/LogoSection.vue';
 import RandomizerCard from './components/cards/RandomizerCard.vue';
 import RealStockCard from './components/cards/RealStockCard.vue';
 import StockSection from './components/StockSection.vue';
 export default defineComponent({
  components: {
-    ListSection,
+    StockSection,
    InputsSection,
    TrainImageSection,
    RandomizerCard,
    LogoSection,
    RealStockCard,
  },
@@ -100,6 +93,7 @@ export default defineComponent({
  margin: 0 auto;
  color: $textColor;
  font-size: 1em;
  display: flex;
  justify-content: center;
@@ -107,14 +101,6 @@ export default defineComponent({
 /* HEADER SECTION */
 header {
  text-align: center;
  img {
    width: 35em;
  }
 }
 h2 {
  margin: 0;
  margin-bottom: 0.5em;
@@ -165,7 +151,8 @@ main {
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto 360px minmax(400px, 1fr);
-  padding: 0.5em;
+  padding: 0 1em;
  margin-bottom: 2em;
 }
 /* FOOTER SECTION */
@@ -173,6 +160,7 @@ main {
 footer {
  margin-top: auto;
  text-align: center;
  padding: 0 1em;
 }
 /* MOBILE VIEWS */
@@ -184,28 +172,12 @@ footer {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  #app {
    font-size: calc(0.75vw + 0.7rem);
  }
  header {
    font-size: 0.85em;
    img {
      width: 35em;
    }
  }
 }
-@media screen and (max-width: $breakpointSm) {
+// @media screen and (max-width: $breakpointSm) {
-  header {
+//   header {
-    font-size: 0.75em;
+//     font-size: 0.75em;
-
+//   }
-    img {
+// }
      width: 32em;
    }
  }
 }
 </style>
@@ -18,8 +18,8 @@
        <select
          id="locomotives-list"
          v-model="store.chosenLoco"
-          @focus="onVehicleSelect('loco')"
+          @focus="previewVehicleByType('loco')"
-          @change="onVehicleSelect('loco')"
+          @change="previewVehicleByType('loco')"
          @keydown.enter.prevent="addOrSwitchVehicle"
          @keydown.backspace="removeVehicle"
        >
@@ -45,8 +45,8 @@
        <select
          id="carwagons-list"
          v-model="store.chosenCar"
-          @focus="onVehicleSelect('car')"
+          @focus="previewVehicleByType('car')"
-          @change="onVehicleSelect('car')"
+          @change="previewVehicleByType('car')"
          @keydown.enter.prevent="addOrSwitchVehicle"
          @keydown.backspace="removeVehicle"
        >
@@ -70,8 +70,8 @@
          data-select="cargo"
          data-ignore-outside="1"
          v-model="store.chosenCargo"
-          @focus="onVehicleSelect('cargo')"
+          @focus="previewVehicleByType('cargo')"
-          @change="onVehicleSelect('cargo')"
+          @change="previewVehicleByType('cargo')"
          @keydown.enter.prevent="addOrSwitchVehicle"
          @keydown.backspace="removeVehicle"
        >
@@ -111,6 +111,7 @@ import { IStock } from '../types';
 import imageMixin from '../mixins/imageMixin';
 import { useStore } from '../store';
 import { isLocomotive } from '../utils/vehicleUtils';
 import stockPreviewMixin from '../mixins/stockPreviewMixin';
 interface ILocoType {
  id: string;
@@ -119,7 +120,7 @@ interface ILocoType {
 }
 export default defineComponent({
-  mixins: [imageMixin],
+  mixins: [imageMixin, stockPreviewMixin],
  data: () => ({
    locomotiveTypeList: [
@@ -167,49 +168,11 @@ export default defineComponent({
    };
  },
  computed: {
    locoOptions() {
      return this.store.locoDataList
        .sort((a, b) => (a.type > b.type ? 1 : -1))
        .filter((loco) => loco.power == this.store.chosenLocoPower);
    },
    carOptions() {
      return this.store.carDataList
        .sort((a, b) => (a.type > b.type ? 1 : -1))
        .filter((car) => car.useType == this.store.chosenCarUseType);
    },
  },
  methods: {
    selectLocoType(locoTypeId: string) {
      this.store.chosenLocoPower = locoTypeId;
      this.store.chosenVehicle = this.locoOptions[0];
      this.store.chosenLoco = this.locoOptions[0];
    },
    selectCarWagonType(carWagonTypeId: string) {
      this.store.chosenCarUseType = carWagonTypeId;
      this.store.chosenVehicle = this.carOptions[0];
      this.store.chosenCar = this.carOptions[0];
      this.store.chosenCargo = null;
    },
    prepareSwapVehicles() {
      this.store.swapVehicles = true;
    },
    onVehicleSelect(type: 'loco' | 'car' | 'cargo') {
      this.$nextTick(() => {
        if (!this.store.chosenLoco && !this.store.chosenCar) return;
        this.store.chosenVehicle = type == 'loco' ? this.store.chosenLoco : this.store.chosenCar;
        this.store.chosenCargo =
          this.store.chosenCar?.cargoList.find((cargo) => cargo.id == this.store.chosenCargo?.id) || null;
      });
    },
    addOrSwitchVehicle() {
      if (this.store.chosenStockListIndex == -1) this.addVehicle();
      else this.switchVehicles();
@@ -24,10 +24,8 @@ export default {
 }
 img {
-  width: 25em;
+  max-width: 25em;
-  @media screen and (max-width: 400px) {
+  width: 100%;    
    width: 20em;
  }
 }
 </style>
@@ -0,0 +1,372 @@
 <template>
  <div class="stock-generator">
    <div class="stock_actions">
      <h2>GENERATOR SKŁADU TOWAROWEGO</h2>
      <button class="btn" @click="() => (store.stockSectionMode = 'stock-list')">POWRÓT DO LISTY &gt;</button>
    </div>
    <div class="generator_content">
      <h2>WŁAŚCIWOŚCI SKŁADU</h2>
      <div class="generator_attributes">
        <label>
          Maksymalna masa (t)
          <input type="number" v-model="maxMass" step="100" max="4000" min="0" />
        </label>
        <label>
          Maks. długość (m)
          <input type="number" v-model="maxLength" step="25" max="650" min="0" />
        </label>
        <label>
          Maks. liczba wagonów
          <input type="number" v-model="maxCarCount" step="1" max="60" min="1" />
        </label>
      </div>
      <h2>ŁADUNEK</h2>
      <p>Wybierz ładunki, którymi chcesz wypełnić dostępne wagony:</p>
      <div class="generator_cargo">
        <button
          class="btn"
          :data-chosen="chosenCargoTypes.includes(k)"
          v-for="(v, k) in generatorData.cargo"
          @click="toggleCargoChosen(k, v)"
        >
          {{ k }}
        </button>
      </div>
      <h2>WAGONY Z WYBRANYMI ŁADUNKAMI</h2>
      <div class="warning">
        <span v-if="computedChosenCarTypes.size == 0">
          Wybierz co najmniej jeden ładunek, aby zobaczyć wagony, które go posiadają!
        </span>
        <span v-else>
          Wagony posiadające wybrane ładunki. Najedź na nazwę, aby zobaczyć podgląd wagonu. Kliknij, aby wyłączyć z
          losowania (tylko podświetlone nazwy będą uwzględnione).
        </span>
      </div>
      <div class="generator_vehicles">
        <button
          :data-chosen="true"
          :data-excluded="excludedCarTypes.includes(carType)"
          class="btn"
          v-for="carType in computedChosenCarTypes"
          :key="carType"
          @mouseover="onMouseHover(carType)"
          @mouseleave="onMouseLeave"
          @click="toggleCarExclusion(carType)"
        >
          {{ carType }}
          <!-- <span>X</span> -->
        </button>
      </div>
      <hr />
      <div class="generator_actions">
        <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock()">
          WYGENERUJ
        </button>
        <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock(true)">
          WYGENERUJ PRÓŻNE WAGONY
        </button>
        <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="resetChosenCargo">
          ZRESETUJ ŁADUNKI
        </button>
      </div>
    </div>
  </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { useStore } from '../store';
 import generatorData from '../data/generatorData.json';
 import stockMixin from '../mixins/stockMixin';
 import { ICargo, ICarWagon } from '../types';
 export default defineComponent({
  name: 'stock-generator',
  setup() {
    return {
      store: useStore(),
    };
  },
  mixins: [stockMixin],
  data() {
    return {
      generatorData,
      chosenCarTypes: [] as string[],
      excludedCarTypes: [] as string[],
      chosenCargoTypes: [] as string[],
      previewTimeout: -1,
      maxMass: 3000,
      maxLength: 650,
      maxCarCount: 50,
    };
  },
  computed: {
    computedChosenCarTypes() {
      return new Set<string>(this.chosenCarTypes.sort((c1, c2) => (c1 > c2 ? 1 : -1)));
    },
  },
  methods: {
    onMouseHover(type: string) {
      window.clearTimeout(this.previewTimeout);
      this.previewTimeout = window.setTimeout(() => {
        this.previewCar(type);
      }, 400);
    },
    onMouseLeave() {
      window.clearTimeout(this.previewTimeout);
    },
    resetChosenCargo() {
      this.chosenCargoTypes.length = 0;
      this.chosenCarTypes.length = 0;
      this.excludedCarTypes.length = 0;
    },
    generateStock(empty = false) {
      const generatedChosenStockList = this.chosenCargoTypes.reduce((acc, type) => {
        this.generatorData.cargo[type as keyof typeof this.generatorData.cargo]
          .filter((c) => !this.excludedCarTypes.includes(c.split(':')[0]))
          .forEach((c) => {
            const [type, cargoType] = c.split(':');
            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));
            // if (cargoType == 'all')
            // else if (cargoType)
            // else cargoObjs.push(undefined);
            carWagonObjs.forEach((cw) => {
              cargoObjs.forEach((cargoObj) => {
                acc.push({ carWagon: cw, cargo: cargoObj });
              });
            });
          });
        return acc;
      }, [] as { carWagon: ICarWagon; cargo?: ICargo }[]);
      this.store.stockList.length = this.store.stockList[0]?.isLoco ? 1 : 0;
      new Array(this.maxCarCount).fill(0).forEach(() => {
        const { carWagon, cargo } = generatedChosenStockList[~~(Math.random() * generatedChosenStockList.length)];
        if (this.store.totalMass + (cargo?.totalMass || carWagon.mass) > this.maxMass) return;
        if (this.store.totalLength + carWagon.length > this.maxLength) return;
        this.addCarWagon(carWagon, cargo);
      });
      this.store.stockSectionMode = 'stock-list';
    },
    previewCar(type: string) {
      const c = this.store.carDataList.find((c) => c.type.startsWith(type)) || null;
      this.store.chosenVehicle = c;
      this.store.chosenCar = c;
      this.store.chosenLoco = null;
      this.store.chosenCargo = null;
      if (c) this.store.chosenCarUseType = c?.useType;
    },
    toggleCargoChosen(cargoType: string, vehicles: string[]) {
      if (this.chosenCargoTypes.includes(cargoType)) {
        vehicles.forEach((v) => {
          const [type] = v.split(':');
          this.chosenCarTypes.splice(this.chosenCarTypes.indexOf(type), 1);
        });
        this.chosenCargoTypes.splice(this.chosenCargoTypes.indexOf(cargoType), 1);
        return;
      }
      this.chosenCargoTypes.push(cargoType);
      vehicles.forEach((v) => {
        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);
    },
  },
 });
 </script>
 <style lang="scss" scoped>
@import '../styles/global.scss';
 .stock_actions {
  align-items: center;
  h2 {
    margin: 0;
    color: white;
    font-size: 1.35em;
    text-align: center;
  }
  button {
    margin-left: auto;
  }
 }
 .stock-generator {
  height: 100%;
 }
 .generator_content {
  margin-top: 1em;
  height: 100%;
 }
 h2 {
  margin: 1em 0;
 }
 .generator_attributes {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  label {
    display: flex;
    flex-direction: column;
  }
  input {
    max-width: 250px;
    margin-top: 0.5em;
  }
 }
 .generator_cargo,
 .generator_vehicles {
  display: grid;
  gap: 0.5em;
  grid-template-columns: repeat(4, 1fr);
  button {
    position: relative;
    padding: 0.5em;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    background-color: $secondaryColor;
    &[data-chosen='true'] {
      background-color: $accentColor;
      color: black;
      box-shadow: 0 0 5px 1px $accentColor;
    }
    &[data-excluded='true'] {
      background-color: gray;
      box-shadow: none;
    }
    span {
      position: absolute;
      right: 0;
      top: 50%;
      padding: 5px;
      transform: translate(-8px, -50%);
      background-color: $bgColor;
      color: white;
    }
  }
 }
 .generator_vehicles {
  margin-top: 1em;
 }
 hr {
  height: 3px;
  background-color: white;
  outline: none;
  margin: 15px 0;
 }
 .generator_actions {
  display: grid;
  gap: 0.5em;
  grid-template-columns: repeat(3, 1fr);
  button {
    background-color: #131313;
    padding: 0.5em;
    font-weight: bold;
  }
  &[data-disabled] button {
    opacity: 0.75;
  }
 }
 .warning {
  background-color: $accentColor;
  padding: 0.5em;
  text-align: justify;
  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));
  }
  .generator_attributes {
    label {
      width: 100%;
    }
    input {
      max-width: 100%;
      width: 100%;
    }
  }
 }
 </style>
@@ -1,14 +1,13 @@
 <template>
-  <section class="stock-list-section">
+  <section class="stock-list">
-    <div class="list_actions">
+    <div class="stock_actions">
      <button class="btn" @click="downloadStock">POBIERZ POCIĄG</button>
      <button class="btn" @click="resetStock">ZRESETUJ LISTĘ</button>
-      <span class="spacer"></span>
+      <button class="btn" style="margin-left: auto" @click="shuffleCars">TASUJ WAGONY</button>
-      <button class="btn" @click="shuffleCars">TASUJ WAGONY</button>
+      <button class="btn" @click="store.stockSectionMode = 'stock-generator'">LOSUJ SKŁAD</button>
      <button class="btn" @click="store.isRandomizerCardOpen = true">LOSUJ SKŁAD</button>
    </div>
-    <div class="stock_actions" :data-disabled="store.chosenStockListIndex == -1">
+    <div class="stock_controls" :data-disabled="store.chosenStockListIndex == -1">
      <b class="no">
        POJAZD NR <span class="text--accent">{{ store.chosenStockListIndex + 1 }}</span> &nbsp;
      </b>
@@ -118,6 +117,7 @@
      <div class="warning" v-if="tooManyLocomotives">Ten skład posiada za dużo pojazdów trakcyjnych!</div>
    </div>
    <!-- Stock list -->
    <ul ref="list">
      <li v-if="store.stockList.length == 0" class="list-empty">
        <div class="stock-info">Lista pojazdów jest pusta!</div>
@@ -172,11 +172,13 @@ import TrainImage from './TrainImageSection.vue';
 import { useStore } from '../store';
 import warningsMixin from '../mixins/warningsMixin';
 import imageMixin from '../mixins/imageMixin';
 import stockPreviewMixin from '../mixins/stockPreviewMixin';
 export default defineComponent({
  name: 'stock-list',
  components: { TrainImage },
-  mixins: [warningsMixin, imageMixin],
+  mixins: [warningsMixin, imageMixin, stockPreviewMixin],
  setup() {
    const store = useStore();
@@ -217,10 +219,10 @@ export default defineComponent({
    },
    copyToClipboard() {
-      if (this.stockHasWarnings()) {
+      // if (this.stockHasWarnings()) {
-        alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
+      //   alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
-        return;
+      //   return;
-      }
+      // }
      navigator.clipboard.writeText(this.stockString);
@@ -229,41 +231,20 @@ export default defineComponent({
      }, 20);
    },
-    onListItemClick(vehicleID: number) {
+    onListItemClick(stockID: number) {
-      const vehicle = this.store.stockList[vehicleID];
+      const stock = this.store.stockList[stockID];
      this.store.chosenStockListIndex =
-        this.store.chosenStockListIndex == vehicleID && this.store.chosenVehicle?.type == vehicle.type ? -1 : vehicleID;
+        this.store.chosenStockListIndex == stockID && this.store.chosenVehicle?.type == stock.type ? -1 : stockID;
      if (this.store.chosenStockListIndex == -1) {
        this.store.chosenVehicle = null;
        return;
      }
-      if (this.store.chosenVehicle?.imageSrc != vehicle.imgSrc) this.store.imageLoading = true;
+      if (this.store.swapVehicles) this.store.swapVehicles = false;
-      if (this.store.showSupporter && !vehicle.supportersOnly) {
+      this.previewStock(stock);
        this.store.showSupporter = false;
      }
      if (vehicle.isLoco) {
        const chosenLoco = this.store.locoDataList.find((v) => v.type == vehicle.type) || null;
        this.store.chosenVehicle = chosenLoco;
        this.store.chosenLoco = chosenLoco;
        // this.store.chosenCargo = null;
        this.store.chosenLocoPower = vehicle.useType;
      } else {
        const chosenCar = this.store.carDataList.find((v) => v.type == vehicle.type) || null;
        this.store.chosenVehicle = chosenCar;
        this.store.chosenCar = chosenCar;
        this.store.chosenCargo = vehicle.cargo || null;
        this.store.chosenCarUseType = vehicle.useType;
      }
      if (this.store.swapVehicles) {
        this.store.swapVehicles = false;
      }
    },
    getCarSpecFromType(typeStr: string) {
@@ -349,8 +330,8 @@ export default defineComponent({
    downloadStock() {
      if (this.store.stockList.length == 0) return alert('Lista pojazdów jest pusta!');
-      if (this.stockHasWarnings())
+      // if (this.stockHasWarnings())
-        return alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
+      //   return alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
      const fileName = prompt(
        'Nazwij plik, a następnie pobierz do folderu Presets (Dokumenty/TTSK/TrainDriver2):',
@@ -417,28 +398,7 @@ export default defineComponent({
  }
 }
-.stock-list-section {
+.stock_controls {
  grid-row: 1 / 4;
  grid-column: 2;
 }
 .list_actions {
  display: flex;
  .spacer {
    flex-grow: 2;
  }
  button {
    margin-right: 0.5em;
    &:nth-child(5) {
      margin-right: 0;
    }
  }
 }
 .stock_actions {
  display: flex;
  justify-content: center;
  align-items: center;
@@ -0,0 +1,76 @@
 <template>
  <div class="stock-section">
    <transition name="tab-change" mode="out-in">
      <keep-alive>
        <component :is="chosenSectionComponent" :key="chosenSectionComponent"></component>
      </keep-alive>
    </transition>
  </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { useStore } from '../store';
 import StockListTab from './StockListTab.vue';
 import StockGeneratorTab from './StockGeneratorTab.vue';
 export default defineComponent({
  setup() {
    return {
      store: useStore(),
    };
  },
  computed: {
    chosenSectionComponent() {
      switch (this.store.stockSectionMode) {
        case 'stock-list':
          return StockListTab;
        case 'stock-generator':
          return StockGeneratorTab;
        default:
          return StockListTab;
      }
    },
  },
 });
 </script>
 <style lang="scss">
 // Tab change animation
 .tab-change {
  &-enter-from,
  &-leave-to {
    opacity: 0;
  }
  &-enter-active,
  &-leave-active {
    transition: all 100ms ease-in-out;
  }
 }
 // Section styles
 .stock-section {
  grid-row: 1 / 4;
  grid-column: 2;
 }
 // Stock tabs styles
 .stock_actions {
  display: flex;
  gap: 0.5em;
  @media only screen and (max-width: 450px) {
    flex-wrap: wrap;
    button {
      width: 100%;
    }
  }
 }
 </style>
@@ -116,7 +116,7 @@ export default defineComponent({
  grid-column: 1;
  margin-top: 2em;
-  height: 20em;
+  height: 22em;
 }
 .train-image {
@@ -129,9 +129,8 @@ export default defineComponent({
    position: relative;
    overflow: hidden;
-    width: 22em;
+    max-width: 22em;
    height: 13em;
    margin: 0 auto;
    &.supporter {
@@ -1,647 +0,0 @@
 <template>
  <div class="randomizer-card g-card" v-if="store.isRandomizerCardOpen">
    <div class="g-card_bg" @click="store.isRandomizerCardOpen = false"></div>
    <div class="card_content">
      <transition name="slide-top">
        <div class="warning-message" v-if="warningMessage">{{ warningMessage }}</div>
      </transition>
      <div class="card_wrapper" ref="cardWrapper" tabindex="0">
        <h1><img :src="getIconURL('randomize')" alt="ikona losowania" /> LOSUJ SKŁAD</h1>
        <div class="random-stock-selections">
          <div class="first-row">
            <h3>WŁAŚCIWOŚCI SKŁADU</h3>
            <div class="max-values">
              <span>
                <label for="stock-mass">Maks. masa (t)</label>
                <input type="number" id="stock-mass" v-model="maxStockMass" />
              </span>
              <span>
                <label for="stock-mass">Maks. długość (m)</label>
                <input type="number" id="stock-mass" v-model="maxStockLength" />
              </span>
              <span>
                <label for="stock-count">Maks. liczba wagonów</label>
                <input type="number" id="stock-count" v-model="maxStockCount" />
              </span>
            </div>
          </div>
          <div class="second-row">
            <div class="select-box locos">
              <h3>LOKOMOTYWA</h3>
              <select
                v-model="chosenLocomotive"
                @change="onLocomotivePreviewSelect()"
                @focus="onLocomotivePreviewSelect()"
              >
                <option :value="undefined">Wybierz lokomotywę</option>
                <option v-for="loco in store.locoDataList.filter((l) => !l.type.includes('EN'))" :value="loco">
                  {{ loco.type }}
                </option>
              </select>
            </div>
            <div class="car-preview">
              <div v-if="isPreviewLoading" class="loading">ŁADOWANIE...</div>
              <span class="preview-message" v-if="!previewVehicle">
                WYBIERZ POJAZD LUB WAGON, BY ZOBACZYĆ JEGO PODGLĄD
              </span>
              <img v-else :src="previewVehicle.imageSrc" :alt="previewVehicle.type" />
              <span class="preview-message info" v-if="previewVehicle">
                <button @click="prevPreviewIndex">&lt;</button>
                <span>
                  {{ previewVehicle.type }}
                  {{
                    isLocomotive(previewVehicle)
                      ? ''
                      : `(${previewIndex + 1} z ${focusedCarWagon?.availableCars.length})`
                  }}
                </span>
                <button @click="nextPreviewIndex">&gt;</button>
              </span>
            </div>
          </div>
          <div class="select-box carwagons">
            <h3>
              WAGONY
              <button class="btn btn--text" @click="showRules = !showRules">[ zasady dodawania wagonów ]</button>
            </h3>
            <div class="rules" v-if="showRules">
              <ul>
                <li>
                  <b class="text--accent">Typ wagonu</b> musi zaczynać się typem konstrukcyjnym (np. <i>111a</i> lub
                  <i>203V</i>), wariantem np. <i>111a Grafitti 1</i> lub jego początkiem, np. <i>111a PKPIC</i> (wtedy
                  losowanie obejmuje wszystkie dostępne warianty typu o takim początku)
                </li>
                <li>
                  <b class="text--accent">Ładunek</b> można wybrać po uprzednim wpisaniu typu konstrukcyjnego wagonu
                  towarowego (zakładając, że je posiada)
                </li>
                <li>
                  <b class="text--accent">Szansa</b> (waga) określa prawdopodobieństwo wylosowania danego typu wagonu.
                  Im większa liczba względem reszty wag, tym bardziej prawdopodobne, że zostanie on wybrany
                </li>
                <li>
                  <b class="text--accent">Warianty</b> pokazują liczbę możliwych wagonów w puli w ramach losowania
                  danego typu
                </li>
              </ul>
            </div>
            <div class="list-wrapper">
              <ul class="carwagon-list">
                <li class="text--accent" style="font-weight: bold">
                  <div>Typ wagonu</div>
                  <div>Ładunek</div>
                  <div>Szansa</div>
                  <div>Warianty</div>
                  <div>Usuń</div>
                </li>
                <li v-for="(stockWagon, i) in chosenCarWagonList">
                  <div>
                    <input
                      class="carwagon-type g-input"
                      type="text"
                      list="types-datalist"
                      v-model="stockWagon.stockString"
                      @input="onCarWagonTypeInput(stockWagon)"
                      @focus="onCarWagonTypeFocus(stockWagon)"
                      placeholder="Wybierz wagon..."
                    />
                    <datalist id="types-datalist">
                      <option value="">Wybierz wagon</option>
                      <option v-for="carOptionType in allCarOptionsList" :value="carOptionType">
                        {{ carOptionType }}
                      </option>
                    </datalist>
                  </div>
                  <div>
                    <select class="carwagon-cargo" v-model="stockWagon.chosenCargo">
                      <option :value="undefined">brak</option>
                      <option
                        :value="{ id: 'random', totalMass: 0 }"
                        v-if="stockWagon.availableCargo && stockWagon.availableCargo.length > 0"
                      >
                        losowy
                      </option>
                      <option v-for="cargo in stockWagon.availableCargo" :value="cargo">
                        {{ cargo.id }}
                      </option>
                    </select>
                  </div>
                  <div>
                    <span class="carwagon-chance">
                      <input type="number" v-model="stockWagon.chance" max="100" min="1" />
                    </span>
                  </div>
                  <div class="variant-count">{{ stockWagon.availableCars.length }}</div>
                  <div class="carwagon-remove">
                    <button @click="removeFromRandomStockList(i)">
                      <img :src="getIconURL('remove')" alt="remove" />
                    </button>
                  </div>
                </li>
              </ul>
            </div>
            <button class="btn btn--outline" style="margin-top: 0.5em;" @click="addToRandomStockList">+ NOWY WAGON</button>
          </div>
        </div>
        <div class="stock-actions">
          <button class="btn" style="font-size: 1.15em; margin-top: 2em" @click="generateRandomStock">
            LOSUJ SKŁAD!
          </button>
          <button class="btn" style="font-size: 1.15em; margin-top: 2em" @click="store.isRandomizerCardOpen = false">
            ZAMKNIJ
          </button>
        </div>
      </div>
    </div>
  </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { ICargo, ICarWagon, ILocomotive, Vehicle } from '../../types';
 import { useStore } from '../../store';
 import stockMixin from '../../mixins/stockMixin';
 import imageMixin from '../../mixins/imageMixin';
 import { isLocomotive } from '../../utils/vehicleUtils';
 interface RandomStockCarWagon {
  stockString: string;
  chance: number;
  availableCars: ICarWagon[];
  availableCargo?: ICargo[];
  chosenCargo?: ICargo;
 }
 export default defineComponent({
  setup() {
    const store = useStore();
    return {
      store,
    };
  },
  mixins: [stockMixin, imageMixin],
  activated() {
    (this.$refs['cardWrapper'] as any).focus();
  },
  data: () => ({
    maxStockMass: 650,
    maxStockLength: 350,
    maxStockCount: 30,
    chosenCarWagonList: [] as RandomStockCarWagon[],
    chosenLocomotive: undefined as ILocomotive | undefined,
    warningMessage: '',
    showRules: false,
    isPreviewLoading: false,
    focusedCarWagon: undefined as RandomStockCarWagon | undefined,
    randomFocusedWagonVariant: undefined as ICarWagon | undefined,
    previewVehicle: undefined as Vehicle | undefined,
    previewIndex: 0,
  }),
  watch: {
    'focusedCarWagon.availableCars': {
      handler(cars?: RandomStockCarWagon['availableCars'], prevCars?: RandomStockCarWagon['availableCars']) {
        const prevAvailableCarsStr = prevCars?.map((car) => car.type).join(',') || '';
        const availableCarsStr = cars?.map((car) => car.type).join(',') || '';
        if (prevAvailableCarsStr != availableCarsStr || (this.previewVehicle && isLocomotive(this.previewVehicle))) {
          this.previewIndex = 0;
          this.randomFocusedWagonVariant = this.focusedCarWagon?.availableCars[this.previewIndex];
          //~~(Math.random() * this.focusedCarWagon.availableCars.length)
          this.previewVehicle = this.randomFocusedWagonVariant;
        }
      },
    },
  },
  computed: {
    allCarOptionsList() {
      const list: string[] = [];
      this.store.carDataList.forEach((carData) => {
        const splittedTypeList = carData.type.split('_');
        for (let i = 0; i < splittedTypeList.length; i++) {
          const typeToCheck = carData.type
            .split('_', i + 1)
            .join('_')
            .replace(/_/g, ' ');
          if (!list.includes(typeToCheck)) list.push(typeToCheck);
        }
      });
      return list.sort((a, b) => (a > b ? 1 : -1));
    },
  },
  methods: {
    isLocomotive,
    nextPreviewIndex() {
      if (!this.focusedCarWagon || (this.previewVehicle && isLocomotive(this.previewVehicle))) return;
      if (this.previewIndex > this.focusedCarWagon.availableCars.length - 2) return;
      this.randomFocusedWagonVariant = this.focusedCarWagon.availableCars[++this.previewIndex];
      this.previewVehicle = this.randomFocusedWagonVariant;
    },
    prevPreviewIndex() {
      if (!this.focusedCarWagon || (this.previewVehicle && isLocomotive(this.previewVehicle))) return;
      if (this.previewIndex == 0) return;
      this.randomFocusedWagonVariant = this.focusedCarWagon.availableCars[--this.previewIndex];
      this.previewVehicle = this.randomFocusedWagonVariant;
    },
    onLocomotivePreviewSelect() {
      this.previewVehicle = this.chosenLocomotive;
    },
    onCarWagonTypeInput(carWagon: RandomStockCarWagon) {
      const constructionType = carWagon.stockString.split(' ')[0];
      const carWagonObj = this.store.carDataList.find((car) => car.constructionType == constructionType);
      const allAvailableCars = this.store.carDataList.filter(
        (car) => car.type.startsWith(carWagon.stockString.replace(/ /g, '_')) && carWagon.stockString.length != 0
      );
      carWagon.availableCars = allAvailableCars;
      carWagon.availableCargo = carWagonObj?.cargoList || undefined;
      if (!carWagonObj?.cargoList) {
        carWagon.chosenCargo = undefined;
      }
    },
    onCarWagonTypeFocus(carWagon: RandomStockCarWagon) {
      this.focusedCarWagon = carWagon;
      this.previewVehicle = this.randomFocusedWagonVariant;
    },
    addToRandomStockList() {
      const randTypeList = this.allCarOptionsList.filter((carOption) =>
        /1|2/g.test(carOption.split(' ').length.toString())
      );
      // const randType = randTypeList[Math.floor(Math.random() * randTypeList.length)];
      const randomStockCarWagon: RandomStockCarWagon = {
        stockString: '',
        chance: 10,
        chosenCargo: undefined,
        availableCargo: undefined,
        availableCars: [],
      };
      this.chosenCarWagonList.push(randomStockCarWagon);
    },
    removeFromRandomStockList(index: number) {
      this.chosenCarWagonList.splice(index, 1);
    },
    validateCarWagonList() {
      return (
        this.chosenCarWagonList.length > 0 &&
        this.chosenCarWagonList.every((carWagon) => carWagon.availableCars.length > 0)
      );
    },
    generateRandomStock() {
      let totalLength = 0;
      let totalMass = 0;
      if (!this.chosenLocomotive) {
        this.warningMessage = 'Nie wybrano lokomotywy!';
        return;
      }
      if (!this.validateCarWagonList()) {
        this.warningMessage = 'Wpisano niepoprawne wartości w liście wagonów!';
        return;
      }
      this.store.stockList.length = 0;
      this.addLocomotive(this.chosenLocomotive);
      totalLength += this.chosenLocomotive.length;
      totalMass += this.chosenLocomotive.mass;
      while (true) {
        const { carWagon, cargo } = this.getRandomStock();
        const totalMassAfter = totalMass + (cargo?.totalMass || carWagon.mass);
        const totalLengthAfter = totalLength + carWagon.length;
        if (
          this.store.stockList.length > this.maxStockCount ||
          totalLengthAfter > this.maxStockLength ||
          totalMassAfter > this.maxStockMass
        )
          break;
        this.addCarWagon(carWagon, cargo);
        totalLength = totalLengthAfter;
        totalMass = totalMassAfter;
      }
      this.store.isRandomizerCardOpen = false;
      this.warningMessage = '';
    },
    getRandomStock(): { carWagon: ICarWagon; cargo?: ICargo } {
      const totalChancePot = this.chosenCarWagonList.reduce((total, car) => {
        total += car.chance;
        return total;
      }, 0);
      let rand = Math.random() * totalChancePot;
      let randCarWagon: ICarWagon | undefined = undefined;
      let randCargo: ICargo | undefined = undefined;
      for (let wagonItem of this.chosenCarWagonList) {
        if (rand < wagonItem.chance) {
          randCarWagon = { ...wagonItem.availableCars[Math.floor(Math.random() * wagonItem.availableCars.length)] };
          randCargo =
            wagonItem.chosenCargo?.id == 'random'
              ? { ...wagonItem.availableCargo![~~(Math.random() * wagonItem.availableCargo!.length)] }
              : wagonItem.chosenCargo;
          break;
        }
        rand -= wagonItem.chance;
      }
      return { carWagon: randCarWagon!, cargo: randCargo };
    },
  },
 });
 </script>
 <style lang="scss" scoped>
@import '../../styles/global.scss';
 h1 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.5em;
  text-align: center;
  img {
    width: 1.75em;
    margin-right: 0.25em;
  }
 }
 h3 {
  color: $accentColor;
  margin: 0 0 0.5em 0;
 }
 .card_content {
  overflow-y: hidden;
  border: 2px solid white;
  width: 95vw;
  max-width: 750px;
  height: 90vh;
  max-height: 900px;
  background-color: #111;
  border-radius: 1em;
  z-index: 99;
  .card_wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5em 1em;
  }
 }
 .warning-message {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 101;
  font-size: 1.2em;
  text-align: center;
  padding: 0.25em;
  background-color: #b2222288;
 }
 .random-stock-selections {
  text-align: left;
  .select-box {
    padding: 0.5em 0;
  }
 }
 .first-row > .max-values {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  label {
    display: block;
  }
  input {
    width: auto;
    margin: 0.25em 0.5em 0 0;
  }
 }
 .second-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 1em;
  .car-preview {
    position: relative;
    width: 300px;
    height: 180px;
    border: 1px solid white;
    .loading {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      padding: 0.5em 0;
      z-index: 102;
      background-color: rgba(black, 0.75);
    }
    .preview-message {
      font-weight: bold;
      text-align: center;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      padding: 0.5em;
      &.info {
        button {
          font-size: 1.2em;
        }
        background-color: #111111dd;
        display: flex;
        justify-content: space-between;
        text-align: center;
      }
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
 }
 .rules {
  margin: 0.5em 0;
  ul {
    list-style: inside;
    border: 1px solid $accentColor;
    padding: 0.5em;
  }
 }
 .list-wrapper {
  overflow: auto;
 }
 .carwagon-list li {
  margin: 0.5em 0;
  min-width: 450px;
  display: grid;
  grid-template-columns: 3fr 2fr 1fr 1fr 3em;
  gap: 0 0.5em;
  align-items: center;
  input,
  select,
  .variant-count {
    width: 100%;
    height: 35px;
  }
  .carwagon-chance input {
    font-weight: bold;
  }
  .carwagon-remove {
    display: flex;
    justify-content: center;
    align-items: center;
    button img {
      width: 1.15em;
      vertical-align: middle;
    }
  }
  .variant-count {
    display: flex;
    align-items: center;
    font-weight: bold;
  }
 }
 .stock-actions {
  display: flex;
  justify-content: center;
  margin-top: auto;
  padding: 1em 0;
  .btn {
    margin-right: 0.5em;
  }
 }
@media screen and (max-width: 650px) {
  .car-preview {
    width: 20em;
    height: 13em;
    margin: 0 auto;
  }
  h3 {
    text-align: center;
  }
  .select-box {
    margin: 0.5em auto;
  }
  .max-values {
    justify-content: center;
    span {
      margin: 0.25em;
    }
  }
 }
 </style>
@@ -91,9 +91,11 @@ export default defineComponent({
      const stockArray = stockString.split(';');
      this.store.stockList.length = 0;
      this.store.chosenVehicle = null;
      this.store.chosenCar = null;
      this.store.chosenCargo = null;
      this.store.chosenLoco = null;
      this.store.chosenStockListIndex = -1;
      this.store.swapVehicles = false;
@@ -105,9 +107,6 @@ export default defineComponent({
        this.addVehicle(vehicle);
      });
      this.store.chosenStockListIndex = -1;
      this.store.chosenVehicle = null;
      this.store.isRealStockListCardOpen = false;
    },
@@ -180,7 +179,8 @@ export default defineComponent({
 }
 input {
-  min-width: 250px;
+  width: 100%;
  max-width: 250px;
  &::placeholder {
    font-size: 0.9em;
@@ -244,6 +244,10 @@ input {
      grid-template-columns: repeat(2, 1fr);
    }
    @media screen and (max-width: 400px) {
      grid-template-columns: repeat(1, 1fr);
    }
    margin-bottom: 1em;
  }
@@ -0,0 +1,27 @@
 {
  "passenger": {
    "PKP_IC": [],
    "PKP_PR": [],
    "PKP_ALL": []
  },
  "cargo": {
    "kontenery": ["627Z:all", "412Z:all"],
    "drobnica": ["426S:all", "208Kf:all", "401Ka:all"],
    "węgiel": ["412W:coal_01", "413S:coal_Fas", "429W:coal_01"],
    "ruda": ["412W:ore_01", "401Zb:ore_35", "429W:ore_01"],
    "piasek": ["412W:sand_01", "412W:sand_02", "413S:sand_Fas", "401Zb:sand_30", "429W:sand_01", "429W:sand_02"],
    "kreda": ["413S:chalk_Fas"],
    "kamień": ["412W:stone_01", "412W:stone_50", "401Zb:stone_25", "429W:stone_01"],
    "złom": ["412W:scrap_01", "412W:scrap_02", "429W:scrap_01", "429W:scrap_02"],
    "paliwo": ["29R_CTLL:all", "29R_PKP:all"],
    "melasa": ["29R_PLPOL:all"],
    "żwir": ["441V"],
    "koła": ["424Z:wheels_01"],
    "drewno": ["424Z:woods_01", "424Z:woods_2"],
    "szyny": ["424Z:rails_01"],
    "kable": ["424Z:cables_01"],
    "cement": ["408S:all"],
    "kruszywo": ["203V"],
    "techniczne": ["209c", "304Ca"]
  }
 }
@@ -0,0 +1,80 @@
 import { defineComponent } from 'vue';
 import { useStore } from '../store';
 import { IStock, Vehicle } from '../types';
 export default defineComponent({
  setup() {
    return {
      store: useStore(),
    };
  },
  computed: {
    locoOptions() {
      return this.store.locoDataList
        .sort((a, b) => (a.type > b.type ? 1 : -1))
        .filter((loco) => loco.power == this.store.chosenLocoPower);
    },
    carOptions() {
      return this.store.carDataList
        .sort((a, b) => (a.type > b.type ? 1 : -1))
        .filter((car) => car.useType == this.store.chosenCarUseType);
    },
  },
  methods: {
    selectLocoType(locoTypeId: string) {
      this.store.chosenLocoPower = locoTypeId;
      this.store.chosenVehicle = this.locoOptions[0];
      this.store.chosenLoco = this.locoOptions[0];
    },
    selectCarWagonType(carWagonTypeId: string) {
      this.store.chosenCarUseType = carWagonTypeId;
      this.store.chosenVehicle = this.carOptions[0];
      this.store.chosenCar = this.carOptions[0];
      this.store.chosenCargo = null;
    },
    previewVehicleByType(type: 'loco' | 'car' | 'cargo') {
      this.$nextTick(() => {
        if (!this.store.chosenLoco && !this.store.chosenCar) return;
        this.store.chosenVehicle = type == 'loco' ? this.store.chosenLoco : this.store.chosenCar;
        this.store.chosenCargo =
          this.store.chosenCar?.cargoList.find((cargo) => cargo.id == this.store.chosenCargo?.id) || null;
      });
    },
    previewStock(stock: IStock) {
      if (this.store.chosenVehicle?.imageSrc != stock.imgSrc) this.store.imageLoading = true;
      if (stock.isLoco) {
        const chosenLoco = this.store.locoDataList.find((v) => v.type == stock.type) || null;
        this.store.chosenVehicle = chosenLoco;
        this.store.chosenLoco = chosenLoco;
        this.store.chosenCargo = null;
        this.store.chosenLocoPower = stock.useType;
      } else {
        const chosenCar = this.store.carDataList.find((v) => v.type == stock.type) || null;
        this.store.chosenVehicle = chosenCar;
        this.store.chosenCar = chosenCar;
        this.store.chosenCargo = stock.cargo || null;
        this.store.chosenCarUseType = stock.useType;
      }
    },
    resetPreview() {
        this.store.chosenVehicle = null;
        this.store.chosenCar = null;
        this.store.chosenCargo = null;
        this.store.chosenLoco = null;
    }
  },
 });
@@ -30,6 +30,8 @@ export const useStore = defineStore({
      vehiclePreviewSrc: '',
      stockSectionMode: 'stock-list',
      isRandomizerCardOpen: false,
      isRealStockListCardOpen: false,
@@ -6,7 +6,7 @@ $breakpointSm: 550px;
 $bgColor: #2c3149;
 $textColor: #fff;
 $secondaryColor: #222;
-$accentColor: #ffd600;
+$accentColor: #e4c428;
 ::-webkit-scrollbar {
  width: 0.5rem;
@@ -106,7 +106,8 @@ button.btn {
    -moz-user-select: none;
    -webkit-user-select: none;
-    opacity: 0.7;
+    opacity: 0.75;
    background-color: #2b2b2b;
  }
  &--text {
@@ -146,6 +147,10 @@ input {
  &:focus-visible {
    border-color: $accentColor;
  }
  &::placeholder {
    color: #aaa;
  }
 }
 option {
@@ -165,7 +170,7 @@ ul {
  }
  &--grayed {
-    color: gray;
+    color: #aaa;
  }
 }
@@ -1,4 +1,5 @@
 export type Vehicle = ILocomotive | ICarWagon;
 export type StockSectionMode = 'STOCK_LIST' | 'STOCK_GENERATOR';
 export interface IStore {
  chosenCar: ICarWagon | null;
@@ -25,6 +26,8 @@ export interface IStore {
  isRandomizerCardOpen: boolean;
  isRealStockListCardOpen: boolean;
  stockSectionMode: 'stock-list' | 'stock-generator';
 }
 export interface IVehicleData {
@@ -1,7 +1,56 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import { VitePWA } from "vite-plugin-pwa";
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()]
+  plugins: [
-})
+    vue(),
    VitePWA({
      registerType: 'autoUpdate',
      workbox: {
        globPatterns: ['**/*.{js,css,html,png,svg,img}'],
        runtimeCaching: [
          {
            urlPattern: new RegExp(`^https://wiki.td2.info.pl/images/thumb\/.*`),
            handler: 'NetworkFirst',
            options: {
              cacheName: 'td2-images-cache',
              expiration: {
                maxEntries: 400,
                maxAgeSeconds: 60 * 60 * 24 * 14, // <== 14 days
              },
              cacheableResponse: {
                statuses: [0, 200],
              },
            },
          },
          {
            urlPattern: new RegExp(`^https://spythere.github.io/api/readyStock.json`),
            handler: 'NetworkFirst',
            options: {
              cacheName: 'github-api-cache',
              expiration: {
                maxEntries: 400,
                maxAgeSeconds: 60 * 60 * 24 * 30, // <== 30 days
              },
              cacheableResponse: {
                statuses: [0, 200],
              },
            },
          },
        ],
      },
      devOptions: {
        enabled: true,
      },
    }),
  ],
 });