format; linting; aktualizacja do 2023.2.1

.eslintrc.cjs

@@ -0,0 +1,18 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier/skip-formatting'
+  ],
+  rules: {
+    'vue/multi-word-component-names': 'off'
+  },
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}

.eslintrc.js

@@ -1,20 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    node: true,
-  },
-  extends: [
-    "plugin:vue/vue3-essential",
-    "eslint:recommended",
-    "@vue/typescript/recommended",
-    "@vue/prettier",
-    "@vue/prettier/@typescript-eslint",
-  ],
-  parserOptions: {
-    ecmaVersion: 2020,
-  },
-  rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
-  },
-};

babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"],
-};

package.json

@@ -5,16 +5,26 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
-    "preview": "yarn build && vite preview --port 4174"
+    "preview": "yarn build && vite preview --port 4174",
+    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "format": "prettier --write src/"
   },
   "dependencies": {
     "axios": "^1.4.0",
     "pinia": "^2.0.17",
+    "prettier": "^3.0.3",
     "vue": "^3.2.37",
     "vue-i18n": "9"
   },
   "devDependencies": {
+    "@rushstack/eslint-patch": "^1.3.3",
     "@vitejs/plugin-vue": "^4.1.0",
+    "@vue/eslint-config-prettier": "^8.0.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/tsconfig": "^0.4.0",
+    "eslint": "^8.49.0",
+    "eslint-plugin-vue": "^9.17.0",
     "sass": "^1.59.3",
     "typescript": "^5.0.2",
     "vite": "^4.2.1",

src/App.vue

@@ -18,11 +18,6 @@ export default defineComponent({
     };
   },
   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;
-    // }
     this.store.fetchStockInfoData();
     this.store.handleRouting();
   },
@@ -66,4 +61,3 @@ h2 {
   }
 }
 </style>
-

src/components/app/AppModals.vue

@@ -7,9 +7,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
-import { useStore } from '../../store';
+import { useStore } from "../../store";
-import RealStockCard from '../cards/RealStockCard.vue';
+import RealStockCard from "../cards/RealStockCard.vue";
 
 export default defineComponent({
   components: { RealStockCard },

src/components/app/Footer.vue

@@ -3,32 +3,35 @@
     <i18n-t keypath="footer.disclaimer" tag="div" class="text--grayed">
       <template #tos>
         <a style="color: #ccc" :href="$t('footer.tos-href')" target="_blank">
-          {{ $t('footer.tos') }}
+          {{ $t("footer.tos") }}
         </a>
       </template>
     </i18n-t>
 
     <div class="text--grayed" v-if="store.stockData">
-      {{ $t('footer.version-check', { version: store.stockData.version }) }}
+      {{ $t("footer.version-check", { version: store.stockData.version }) }}
     </div>
 
     <div>
       &copy;
-      <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
+      <a href="https://td2.info.pl/profile/?u=20777" target="_blank"
-      {{ new Date().getUTCFullYear() }} | v{{ VERSION }}{{ !isOnProductionHost ? 'dev' : '' }}
+        >Spythere</a
+      >
+      {{ new Date().getUTCFullYear() }} | v{{ VERSION
+      }}{{ !isOnProductionHost ? "dev" : "" }}
     </div>
   </footer>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
-import packageInfo from '../../../package.json';
+import packageInfo from "../../../package.json";
-import { useStore } from '../../store';
+import { useStore } from "../../store";
 
 export default defineComponent({
   data() {
     return {
-      isOnProductionHost: location.hostname == 'pojazdownik-td2.web.app',
+      isOnProductionHost: location.hostname == "pojazdownik-td2.web.app",
       VERSION: packageInfo.version,
       store: useStore(),
     };

src/components/app/MainContainer.vue

@@ -8,11 +8,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
-import LogoSection from '../sections/LogoSection.vue';
+import LogoSection from "../sections/LogoSection.vue";
-import InputsSection from '../sections/InputsSection.vue';
+import InputsSection from "../sections/InputsSection.vue";
-import TrainImageSection from '../sections/TrainImageSection.vue';
+import TrainImageSection from "../sections/TrainImageSection.vue";
-import StockSection from '../sections/StockSection.vue';
+import StockSection from "../sections/StockSection.vue";
 
 export default defineComponent({
   components: { LogoSection, InputsSection, TrainImageSection, StockSection },
@@ -20,7 +20,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/global.scss';
+@import "../../styles/global.scss";
 
 main {
   display: grid;

src/components/cards/RealStockCard.vue

@@ -1,14 +1,25 @@
 <template>
-  <div class="real-stock-card g-card" @keydown.esc="store.isRealStockListCardOpen = false">
+  <div
+    class="real-stock-card g-card"
+    @keydown.esc="store.isRealStockListCardOpen = false"
+  >
     <div class="g-card_bg" @click="store.isRealStockListCardOpen = false"></div>
 
     <div class="card_content">
       <div class="card_nav">
         <div class="top-pane">
           <h1>
-            {{ $t('realstock.title') }} <a href="https://td2.info.pl/profile/?u=17708" target="_blank">Railtrains997</a>
+            {{ $t("realstock.title") }}
+            <a href="https://td2.info.pl/profile/?u=17708" target="_blank"
+              >Railtrains997</a
+            >
           </h1>
-          <button class="btn exit-btn" @click="store.isRealStockListCardOpen = false">&Cross;</button>
+          <button
+            class="btn exit-btn"
+            @click="store.isRealStockListCardOpen = false"
+          >
+            &Cross;
+          </button>
         </div>
 
         <div class="filters" ref="focus" tabindex="0">
@@ -19,7 +30,11 @@
           />
 
           <datalist id="readyStockDataList">
-            <option v-for="stock in store.readyStockList" :value="stock.stockId">
+            <option
+              v-for="stock in store.readyStockList"
+              :value="stock.stockId"
+              :key="stock.name"
+            >
               {{ stock.stockId }}
             </option>
           </datalist>
@@ -31,12 +46,18 @@
           />
 
           <datalist id="readyStockStringList">
-            <option v-for="stock in computedAvailableStockTypes" :value="stock">
+            <option
-              {{ stock }}
+              v-for="stockType in computedAvailableStockTypes"
+              :value="stockType"
+              :key="stockType"
+            >
+              {{ stockType }}
             </option>
           </datalist>
 
-          <button class="btn" @click="resetStockFilters">{{ $t('realstock.action-reset') }}</button>
+          <button class="btn" @click="resetStockFilters">
+            {{ $t("realstock.action-reset") }}
+          </button>
         </div>
       </div>
 
@@ -46,14 +67,29 @@
           :key="rStock.stockId"
           :data-last-selected="store.chosenRealStockName === rStock.stockId"
         >
-          <div class="stock-title" tabindex="0" @click="chooseStock(rStock)" @keydown.enter="chooseStock(rStock)">
+          <div
-            <img class="stock-icon" :src="getIconURL(rStock.type)" :alt="rStock.type" />
+            class="stock-title"
-            <b class="text--accent" style="margin-left: 5px"> {{ rStock.name }}</b>
+            tabindex="0"
+            @click="chooseStock(rStock)"
+            @keydown.enter="chooseStock(rStock)"
+          >
+            <img
+              class="stock-icon"
+              :src="getIconURL(rStock.type)"
+              :alt="rStock.type"
+            />
+            <b class="text--accent" style="margin-left: 5px">
+              {{ rStock.name }}</b
+            >
             <div>{{ rStock.number }}</div>
           </div>
 
           <div class="stock-thumbnails" ref="thumbnailsRef">
-            <div class="thumbnail-item" v-for="stockType in rStock.stockString.split(';')">
+            <div
+              class="thumbnail-item"
+              v-for="stockType in rStock.stockString.split(';')"
+              :key="stockType"
+            >
               <div class="thumbnail-container">
                 <div>{{ stockType }}</div>
                 <img
@@ -61,7 +97,7 @@
                   :title="stockType"
                   style="opacity: 0"
                   @error="(e) => onStockItemError(e, stockType)"
-                  @load="e => (e.target as HTMLElement).style.opacity = '1'"
+                  @load="(e) => ((e.target as HTMLElement).style.opacity = '1')"
                 />
               </div>
             </div>
@@ -75,23 +111,24 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
 
-import { useStore } from '../../store';
+import { useStore } from "../../store";
-import imageMixin from '../../mixins/imageMixin';
+import imageMixin from "../../mixins/imageMixin";
-import stockMixin from '../../mixins/stockMixin';
+import stockMixin from "../../mixins/stockMixin";
 
-import { IReadyStockItem } from '../../types';
+import { IReadyStockItem } from "../../types";
+import http from "../../http";
 
 interface ResponseJSONData {
   [key: string]: string;
 }
 
 function getVehicleType(stockType: string) {
-  if (/^E/.test(stockType)) return 'loco-e';
+  if (/^E/.test(stockType)) return "loco-e";
-  if (/^S/.test(stockType)) return 'loco-s';
+  if (/^S/.test(stockType)) return "loco-s";
 
-  return 'car-passenger';
+  return "car-passenger";
 }
 
 export default defineComponent({
@@ -99,11 +136,15 @@ export default defineComponent({
 
   data: () => ({
     store: useStore(),
-    responseStatus: 'loading',
+    responseStatus: "loading",
-    isMobile: 'ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/) ? true : false,
+    isMobile:
+      "ontouchstart" in document.documentElement &&
+      navigator.userAgent.match(/Mobi/)
+        ? true
+        : false,
     observer: null as IntersectionObserver | null,
-    searchedReadyStockName: '',
+    searchedReadyStockName: "",
-    searchedReadyStockString: '',
+    searchedReadyStockString: "",
     visibleIndexesTo: 0,
     lastSelectedStockId: null as string | null,
     scrollTop: 0,
@@ -115,11 +156,11 @@ export default defineComponent({
   },
 
   activated() {
-    (this.$refs['focus'] as HTMLElement).focus();
+    (this.$refs["focus"] as HTMLElement).focus();
 
-    (this.$refs['list'] as HTMLElement).scrollTo({
+    (this.$refs["list"] as HTMLElement).scrollTo({
       top: this.scrollTop,
-      behavior: 'auto',
+      behavior: "auto",
     });
   },
 
@@ -130,8 +171,12 @@ export default defineComponent({
       return this.store.readyStockList
         .filter(
           (rs) =>
-            rs.stockId.toLocaleLowerCase().includes(this.searchedReadyStockName.toLocaleLowerCase()) &&
+            rs.stockId
-            rs.stockString.toLocaleLowerCase().includes(this.searchedReadyStockString.toLocaleLowerCase())
+              .toLocaleLowerCase()
+              .includes(this.searchedReadyStockName.toLocaleLowerCase()) &&
+            rs.stockString
+              .toLocaleLowerCase()
+              .includes(this.searchedReadyStockString.toLocaleLowerCase()),
         )
         .filter((_, i) => i <= this.visibleIndexesTo);
     },
@@ -139,7 +184,7 @@ export default defineComponent({
     computedAvailableStockTypes() {
       return this.store.readyStockList
         .reduce((acc, rs) => {
-          rs.stockString.split(';').forEach((s) => {
+          rs.stockString.split(";").forEach((s) => {
             if (!acc.includes(s)) acc.push(s);
           });
 
@@ -153,7 +198,7 @@ export default defineComponent({
     computedReadyStockList(curr, prev) {
       if (curr.length < prev.length) {
         this.visibleIndexesTo = 20;
-        (this.$refs['list'] as HTMLElement).scrollTo({
+        (this.$refs["list"] as HTMLElement).scrollTo({
           top: 0,
         });
       }
@@ -162,21 +207,21 @@ export default defineComponent({
 
   methods: {
     async fetchStockListData() {
-      const readyStockJSONData: ResponseJSONData = await (
+      const readyStockJSONData = (
-        await fetch(`https://spythere.github.io/api/td2/data/readyStock.json?t=${Math.floor(Date.now() / 60000)}`)
+        await http.get<ResponseJSONData>("td2/data/readyStock.json")
-      ).json();
+      ).data;
 
       if (!readyStockJSONData) {
-        this.responseStatus = 'error';
+        this.responseStatus = "error";
         return;
       }
 
       for (let stockKey in readyStockJSONData) {
-        const [type, number, ...name] = stockKey.split(' ');
+        const [type, number, ...name] = stockKey.split(" ");
 
         const obj = {
-          number: number.replace(/_/g, '/'),
+          number: number.replace(/_/g, "/"),
-          name: name.join(' '),
+          name: name.join(" "),
           stockString: readyStockJSONData[stockKey],
           type,
         };
@@ -187,7 +232,7 @@ export default defineComponent({
         });
       }
 
-      this.responseStatus = 'loaded';
+      this.responseStatus = "loaded";
     },
 
     mountObserver() {
@@ -195,7 +240,7 @@ export default defineComponent({
         if (entries[0].intersectionRatio > 0) this.visibleIndexesTo += 20;
       });
 
-      this.observer.observe(this.$refs['bottom'] as HTMLElement);
+      this.observer.observe(this.$refs["bottom"] as HTMLElement);
     },
 
     getImageUrl(name: string) {
@@ -203,8 +248,8 @@ export default defineComponent({
     },
 
     resetStockFilters() {
-      this.searchedReadyStockName = '';
+      this.searchedReadyStockName = "";
-      this.searchedReadyStockString = '';
+      this.searchedReadyStockString = "";
     },
 
     chooseStock(stockItem: IReadyStockItem) {
@@ -216,7 +261,7 @@ export default defineComponent({
     onStockItemError(e: Event, stockType: string) {
       const imageEl = e.target as HTMLImageElement;
       imageEl.src = `images/${getVehicleType(stockType)}-unknown.png`;
-      imageEl.style.opacity = '1';
+      imageEl.style.opacity = "1";
     },
 
     onListScroll(e: Event) {
@@ -230,7 +275,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/global.scss';
+@import "../../styles/global.scss";
 
 .exit-btn {
   font-size: 1.2em;
@@ -316,7 +361,7 @@ ul {
     gap: 1rem;
     padding: 0.1em;
 
-    &[data-last-selected='true'] .stock-title {
+    &[data-last-selected="true"] .stock-title {
       border: 1px solid $accentColor;
     }
 
@@ -378,4 +423,3 @@ ul {
   padding: 1em;
 }
 </style>
-

src/components/sections/InputsSection.vue

@@ -1,12 +1,13 @@
 <template>
   <section class="inputs-section">
     <div class="input_container">
-      <h2 class="input_header">{{ $t('inputs.title') }}</h2>
+      <h2 class="input_header">{{ $t("inputs.title") }}</h2>
 
       <div class="input_list type">
         <div class="vehicle-types locos">
           <button
             v-for="locoType in locomotiveTypeList"
+            :key="locoType.id"
             class="btn btn--choice"
             :data-selected="locoType.id == store.chosenLocoPower"
             @click="selectLocoType(locoType.id)"
@@ -23,7 +24,9 @@
           @keydown.enter.prevent="addOrSwitchVehicle"
           @keydown.backspace="removeVehicle"
         >
-          <option :value="null" disabled>{{ $t('inputs.input-vehicle') }}</option>
+          <option :value="null" disabled>
+            {{ $t("inputs.input-vehicle") }}
+          </option>
           <option v-for="loco in locoOptions" :value="loco" :key="loco.type">
             {{ loco.type }}<b v-if="loco.supportersOnly">*</b>
           </option>
@@ -34,6 +37,7 @@
         <div class="vehicle-types carwagons">
           <button
             v-for="carType in carTypeList"
+            :key="carType.id"
             class="btn btn--choice"
             :data-selected="carType.id == store.chosenCarUseType"
             @click="selectCarWagonType(carType.id)"
@@ -50,7 +54,9 @@
           @keydown.enter.prevent="addOrSwitchVehicle"
           @keydown.backspace="removeVehicle"
         >
-          <option :value="null" disabled>{{ $t('inputs.input-carwagon') }}</option>
+          <option :value="null" disabled>
+            {{ $t("inputs.input-carwagon") }}
+          </option>
 
           <option v-for="car in carOptions" :value="car" :key="car.type">
             {{ car.type }}<b v-if="car.supportersOnly">*</b>
@@ -59,7 +65,7 @@
       </div>
 
       <div class="input_list cargo">
-        <label for="cargo-select">{{ $t('inputs.cargo-title') }}</label>
+        <label for="cargo-select">{{ $t("inputs.cargo-title") }}</label>
         <select
           id="cargo-select"
           :disabled="
@@ -75,20 +81,30 @@
           @keydown.enter.prevent="addOrSwitchVehicle"
           @keydown.backspace="removeVehicle"
         >
-          <option :value="null" v-if="!store.chosenCar || !store.chosenCar.loadable">
+          <option
-            {{ $t('inputs.no-cargo-available') }}
+            :value="null"
+            v-if="!store.chosenCar || !store.chosenCar.loadable"
+          >
+            {{ $t("inputs.no-cargo-available") }}
           </option>
-          <option :value="null" v-else>{{ $t('inputs.cargo-empty') }}</option>
+          <option :value="null" v-else>{{ $t("inputs.cargo-empty") }}</option>
 
-          <option v-for="cargo in store.chosenCar?.cargoList" :value="cargo" :key="cargo.id">
+          <option
+            v-for="cargo in store.chosenCar?.cargoList"
+            :value="cargo"
+            :key="cargo.id"
+          >
             {{ cargo.id }}
           </option>
         </select>
       </div>
 
       <div class="input_actions">
-        <button class="btn" @click="addVehicle(store.chosenVehicle, store.chosenCargo)">
+        <button
-          {{ $t('inputs.action-add') }}
+          class="btn"
+          @click="addVehicle(store.chosenVehicle, store.chosenCargo)"
+        >
+          {{ $t("inputs.action-add") }}
         </button>
         <button
           class="btn"
@@ -96,14 +112,18 @@
           :disabled="store.chosenStockListIndex == -1"
           :data-disabled="store.chosenStockListIndex == -1"
         >
-          {{ $t('inputs.action-swap') }}
+          {{ $t("inputs.action-swap") }}
           <b class="text--accent">
-            {{ store.chosenStockListIndex == -1 ? '' : `${store.chosenStockListIndex + 1}.` }}
+            {{
+              store.chosenStockListIndex == -1
+                ? ""
+                : `${store.chosenStockListIndex + 1}.`
+            }}
           </b>
         </button>
 
         <button class="btn" @click="store.isRealStockListCardOpen = true">
-          <b>{{ $t('inputs.real-stock') }}</b>
+          <b>{{ $t("inputs.real-stock") }}</b>
         </button>
       </div>
     </div>
@@ -111,12 +131,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
 
-import imageMixin from '../../mixins/imageMixin';
+import imageMixin from "../../mixins/imageMixin";
-import { useStore } from '../../store';
+import { useStore } from "../../store";
-import stockPreviewMixin from '../../mixins/stockPreviewMixin';
+import stockPreviewMixin from "../../mixins/stockPreviewMixin";
-import stockMixin from '../../mixins/stockMixin';
+import stockMixin from "../../mixins/stockMixin";
 
 export default defineComponent({
   mixins: [imageMixin, stockPreviewMixin, stockMixin],
@@ -124,31 +144,31 @@ export default defineComponent({
   data: () => ({
     locomotiveTypeList: [
       {
-        id: 'loco-e',
+        id: "loco-e",
-        desc: 'ELEKTRYCZNE',
+        desc: "ELEKTRYCZNE",
       },
       {
-        id: 'loco-s',
+        id: "loco-s",
-        desc: 'SPALINOWE',
+        desc: "SPALINOWE",
       },
       {
-        id: 'loco-ezt',
+        id: "loco-ezt",
-        desc: 'ELEKTR. ZESPOŁY TRAKCYJNE',
+        desc: "ELEKTR. ZESPOŁY TRAKCYJNE",
       },
       {
-        id: 'loco-szt',
+        id: "loco-szt",
-        desc: 'SPAL. ZESPOŁY TRAKCYJNE',
+        desc: "SPAL. ZESPOŁY TRAKCYJNE",
       },
     ],
 
     carTypeList: [
       {
-        id: 'car-passenger',
+        id: "car-passenger",
-        desc: 'PASAŻERSKIE',
+        desc: "PASAŻERSKIE",
       },
       {
-        id: 'car-cargo',
+        id: "car-cargo",
-        desc: 'TOWAROWE',
+        desc: "TOWAROWE",
       },
     ],
   }),
@@ -169,7 +189,8 @@ export default defineComponent({
     addOrSwitchVehicle() {
       if (!this.store.chosenVehicle) return;
 
-      if (this.store.chosenStockListIndex == -1) this.addVehicle(this.store.chosenVehicle, this.store.chosenCargo);
+      if (this.store.chosenStockListIndex == -1)
+        this.addVehicle(this.store.chosenVehicle, this.store.chosenCargo);
       else this.switchVehicles();
     },
 
@@ -197,7 +218,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/global';
+@import "../../styles/global";
 
 .inputs-section {
   display: flex;
@@ -215,7 +236,7 @@ button.btn--choice {
   font-size: 0.9em;
   padding: 0.3em 0.6em;
 
-  &[data-selected='true'] {
+  &[data-selected="true"] {
     background-color: $accentColor;
     color: black;
   }
@@ -267,4 +288,3 @@ button.btn--choice {
   }
 }
 </style>
-

src/components/sections/LogoSection.vue

@@ -1,11 +1,16 @@
 <template>
   <section class="logo-section">
-    <img :src="`/logo-${$i18n.locale}.svg`" alt="logo pojazdownik" @click="navigate" />
+    <img
+      :src="`/logo-${$i18n.locale}.svg`"
+      alt="logo pojazdownik"
+      @click="navigate"
+    />
 
     <div class="actions">
       <button
-        class="btn btn--text"
         v-for="action in localeActions"
+        :key="action.name"
+        class="btn btn--text"
         :data-selected="$i18n.locale == action.locale"
         @click="chooseLocale(action.locale)"
       >
@@ -21,31 +26,31 @@ export default {
     return {
       localeActions: [
         {
-          name: 'POLSKI',
+          name: "POLSKI",
-          locale: 'pl',
+          locale: "pl",
         },
         {
-          name: 'ENGLISH',
+          name: "ENGLISH",
-          locale: 'en',
+          locale: "en",
         },
       ],
     };
   },
   methods: {
     navigate() {
-      window.location.pathname = '';
+      window.location.pathname = "";
     },
 
     chooseLocale(locale: string) {
       this.$i18n.locale = locale;
-      window.localStorage.setItem('locale', locale);
+      window.localStorage.setItem("locale", locale);
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/global.scss';
+@import "../../styles/global.scss";
 
 .logo-section {
   grid-row: 1;
@@ -64,7 +69,7 @@ export default {
   display: flex;
   gap: 0.5em;
 
-  button[data-selected='true'] {
+  button[data-selected="true"] {
     font-weight: bold;
     color: $accentColor;
     text-decoration: underline;
@@ -76,4 +81,3 @@ img {
   width: 100%;
 }
 </style>
-

src/components/sections/StockSection.vue

@@ -2,9 +2,10 @@
   <section class="stock-section">
     <div class="section_modes">
       <button
+        v-for="(id, i) in sectionModes"
+        :key="id"
         class="btn"
         ref="sectionButtonRefs"
-        v-for="(id, i) in sectionModes"
         @click="chooseSection(id)"
         :data-selected="store.stockSectionMode == id"
       >
@@ -15,29 +16,37 @@
 
     <transition name="tab-change" mode="out-in">
       <keep-alive>
-        <component :is="chosenSectionComponent" :key="chosenSectionComponent"></component>
+        <component
+          :is="chosenSectionComponent"
+          :key="chosenSectionComponent"
+        ></component>
       </keep-alive>
     </transition>
   </section>
 </template>
 
 <script lang="ts" setup>
-import { computed, KeepAlive, onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from "vue";
-import { useStore } from '../../store';
+import { useStore } from "../../store";
-import StockListTab from '../tabs/StockListTab.vue';
+import StockListTab from "../tabs/StockListTab.vue";
-import StockGeneratorTab from '../tabs/StockGeneratorTab.vue';
+import StockGeneratorTab from "../tabs/StockGeneratorTab.vue";
-import NumberGeneratorTab from '../tabs/NumberGeneratorTab.vue';
+import NumberGeneratorTab from "../tabs/NumberGeneratorTab.vue";
-import WikiListTab from '../tabs/WikiListTab.vue';
+import WikiListTab from "../tabs/WikiListTab.vue";
 
 const sectionButtonRefs = ref([]);
 
 const store = useStore();
 type SectionMode = typeof store.stockSectionMode;
 
-const sectionModes: SectionMode[] = ['stock-list', 'wiki-list', 'number-generator', 'stock-generator'];
+const sectionModes: SectionMode[] = [
+  "stock-list",
+  "wiki-list",
+  "number-generator",
+  "stock-generator",
+];
 
 onMounted(() => {
-  window.addEventListener('keydown', (e) => {
+  window.addEventListener("keydown", (e) => {
     if (e.target instanceof HTMLInputElement) return;
 
     if (/[1234]/.test(e.key)) {
@@ -50,16 +59,16 @@ onMounted(() => {
 
 const chosenSectionComponent = computed(() => {
   switch (store.stockSectionMode) {
-    case 'stock-list':
+    case "stock-list":
       return StockListTab;
 
-    case 'wiki-list':
+    case "wiki-list":
       return WikiListTab;
 
-    case 'stock-generator':
+    case "stock-generator":
       return StockGeneratorTab;
 
-    case 'number-generator':
+    case "number-generator":
       return NumberGeneratorTab;
 
     default:
@@ -73,7 +82,7 @@ function chooseSection(sectionId: SectionMode) {
 </script>
 
 <style lang="scss">
-@import '../../styles/global.scss';
+@import "../../styles/global.scss";
 
 // Tab change animation
 .tab-change {
@@ -115,14 +124,14 @@ function chooseSection(sectionId: SectionMode) {
       left: 50%;
       transform: translateX(-50%);
 
-      content: '';
+      content: "";
       width: 0;
       height: 2px;
       transition: all 100ms;
       background-color: $accentColor;
     }
 
-    &[data-selected='true']::after {
+    &[data-selected="true"]::after {
       width: 100%;
     }
   }
@@ -134,4 +143,3 @@ function chooseSection(sectionId: SectionMode) {
   }
 }
 </style>
-

src/components/sections/TrainImageSection.vue

@@ -1,18 +1,26 @@
 <template>
   <section class="train-image-section">
     <div class="train-image__wrapper">
-      <div class="train-image__content" :class="{ supporter: store.chosenVehicle?.supportersOnly }">
+      <div
+        class="train-image__content"
+        :class="{ supporter: store.chosenVehicle?.supportersOnly }"
+      >
         <transition name="img-message-anim">
-          <div class="empty-message" v-if="store.imageLoading && store.chosenVehicle?.imageSrc">
+          <div
-            {{ $t('preview.loading') }}
+            class="empty-message"
+            v-if="store.imageLoading && store.chosenVehicle?.imageSrc"
+          >
+            {{ $t("preview.loading") }}
           </div>
         </transition>
 
-        <div class="no-img" v-if="!store.chosenVehicle">{{ $t('preview.title') }}</div>
+        <div class="no-img" v-if="!store.chosenVehicle">
+          {{ $t("preview.title") }}
+        </div>
 
         <img
           v-if="store.chosenVehicle"
-          :src="`https://spythere.github.io/api/td2/images/${store.chosenVehicle.type}--300px.jpg`"
+          :src="getThumbnailURL(store.chosenVehicle.type, 'small')"
           :alt="store.chosenVehicle.type"
           @load="onImageLoad"
           @click="onImageClick"
@@ -25,44 +33,57 @@
         <b class="text--accent">{{ store.chosenVehicle.type }}</b> &bull;
         <b style="color: #ccc">
           {{
-            $t(`preview.${isLocomotive(store.chosenVehicle) ? store.chosenVehicle.power : store.chosenVehicle.useType}`)
+            $t(
+              `preview.${
+                isLocomotive(store.chosenVehicle)
+                  ? store.chosenVehicle.power
+                  : store.chosenVehicle.useType
+              }`,
+            )
           }}
         </b>
 
         <div style="color: #ccc">
           <div>
-            {{ store.chosenVehicle.length }}m | {{ store.chosenVehicle.mass }}t |
+            {{ store.chosenVehicle.length }}m | {{ store.chosenVehicle.mass }}t
-            {{ store.chosenVehicle.maxSpeed }} km/h
+            | {{ store.chosenVehicle.maxSpeed }} km/h
           </div>
 
           <div v-if="isLocomotive(store.chosenVehicle)">
-            {{ $t('preview.cabin') }} {{ store.chosenVehicle.cabinType }}
+            {{ $t("preview.cabin") }} {{ store.chosenVehicle.cabinType }}
           </div>
 
           <div v-else>
             {{
-              store.chosenVehicle.useType == 'car-cargo' // ? store.stockData?.usage[store.chosenVehicle.constructionType]
+              store.chosenVehicle.useType == "car-cargo" // ? store.stockData?.usage[store.chosenVehicle.constructionType]
                 ? $t(`usage.${store.chosenVehicle.constructionType}`)
-                : `${$t('preview.construction')} ${store.chosenVehicle.constructionType}`
+                : `${$t("preview.construction")} ${
+                    store.chosenVehicle.constructionType
+                  }`
             }}
           </div>
 
-          <b style="color: salmon" v-if="store.chosenVehicle.supportersOnly">{{ $t('preview.sponsor-only') }}</b>
+          <b style="color: salmon" v-if="store.chosenVehicle.supportersOnly">{{
+            $t("preview.sponsor-only")
+          }}</b>
         </div>
       </div>
 
-      <div class="train-image__info" v-else>{{ $t('preview.desc') }}</div>
+      <div class="train-image__info" v-else>{{ $t("preview.desc") }}</div>
     </div>
   </section>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue';
+import { computed, defineComponent } from "vue";
-import { useStore } from '../../store';
+import { useStore } from "../../store";
-import { isLocomotive } from '../../utils/vehicleUtils';
+import { isLocomotive } from "../../utils/vehicleUtils";
-import { ILocomotive, Vehicle } from '../../types';
+import { ILocomotive, Vehicle } from "../../types";
+import imageMixin from "../../mixins/imageMixin";
 
 export default defineComponent({
+  mixins: [imageMixin],
+
   setup() {
     const store = useStore();
 
@@ -94,14 +115,17 @@ export default defineComponent({
 
       if (!chosenVehicle) return;
 
-      this.store.vehiclePreviewSrc = `https://spythere.github.io/api/td2/images/${chosenVehicle.type}--800px.jpg`;
+      this.store.vehiclePreviewSrc = this.getThumbnailURL(
+        chosenVehicle.type,
+        "large",
+      );
     },
   },
 });
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/global.scss';
+@import "../../styles/global.scss";
 
 .train-image-section {
   grid-row: 3;
@@ -185,4 +209,3 @@ export default defineComponent({
   }
 }
 </style>
-

src/components/tabs/NumberGeneratorTab.vue

@@ -1,34 +1,55 @@
 <template>
   <div class="number-generator tab">
     <div class="tab_header">
-      <h2>{{ $t('numgen.title') }}</h2>
+      <h2>{{ $t("numgen.title") }}</h2>
     </div>
 
     <div class="tab_content">
       <div class="options">
         <select v-model="chosenCategory" @change="randomizeTrainNumber()">
-          <option :value="null" disabled>{{ $t('numgen.train-category') }}</option>
+          <option :value="null" disabled>
-          <option v-for="(_, category) in genData.categories" :value="category">
+            {{ $t("numgen.train-category") }}
+          </option>
+          <option
+            v-for="(_, category) in genData.categories"
+            :key="category"
+            :value="category"
+          >
             {{ $t(`numgen.categories.${category}`) }}
           </option>
         </select>
 
         <select v-model="beginRegionName" @change="randomizeTrainNumber()">
-          <option :value="null" disabled>{{ $t('numgen.start-region') }}</option>
+          <option :value="null" disabled>
-          <option v-for="(_, name) in genData.regionNumbers" :value="name">{{ name }}</option>
+            {{ $t("numgen.start-region") }}
+          </option>
+          <option
+            v-for="(_, name) in genData.regionNumbers"
+            :key="name"
+            :value="name"
+          >
+            {{ name }}
+          </option>
         </select>
 
         <select v-model="endRegionName" @change="randomizeTrainNumber()">
-          <option :value="null" disabled>{{ $t('numgen.end-region') }}</option>
+          <option :value="null" disabled>{{ $t("numgen.end-region") }}</option>
-          <option v-for="(_, name) in genData.regionNumbers" :value="name">{{ name }}</option>
+          <option
+            v-for="(_, name) in genData.regionNumbers"
+            :key="name"
+            :value="name"
+          >
+            {{ name }}
+          </option>
         </select>
       </div>
 
       <div class="generated-number" @click="copyNumber">
         <span v-if="trainNumber">
-          {{ $t('numgen.number-info') }} <b class="text--accent">{{ trainNumber }}</b>
+          {{ $t("numgen.number-info") }}
+          <b class="text--accent">{{ trainNumber }}</b>
         </span>
-        <span v-else>{{ $t('numgen.warning') }}</span>
+        <span v-else>{{ $t("numgen.warning") }}</span>
       </div>
 
       <!-- <div v-if="chosenCategory">
@@ -50,25 +71,29 @@
 
       <div class="tab_links">
         <a :href="$t('numgen.td2-wiki-link')" target="_blank">
-          {{ $t('numgen.td2-wiki') }}
+          {{ $t("numgen.td2-wiki") }}
         </a>
       </div>
 
       <hr />
 
       <div class="tab_actions">
-        <button class="btn" @click="randomizeTrainNumber(true)">{{ $t('numgen.action-random-region') }}</button>
+        <button class="btn" @click="randomizeTrainNumber(true)">
-        <button class="btn" @click="randomizeTrainNumber(false)">{{ $t('numgen.action-random-number') }}</button>
+          {{ $t("numgen.action-random-region") }}
+        </button>
+        <button class="btn" @click="randomizeTrainNumber(false)">
+          {{ $t("numgen.action-random-number") }}
+        </button>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { Ref, ref } from 'vue';
+import { Ref, ref } from "vue";
-import { useI18n } from 'vue-i18n';
+import { useI18n } from "vue-i18n";
 
-import genData from '../../constants/numberGeneratorData.json';
+import genData from "../../constants/numberGeneratorData.json";
 
 const i18n = useI18n();
 type RegionName = keyof typeof genData.regionNumbers;
@@ -83,7 +108,7 @@ const trainNumber = ref(null) as Ref<string | null>;
 const copyNumber = () => {
   if (trainNumber.value) {
     navigator.clipboard.writeText(trainNumber.value);
-    alert(i18n.t('numgen.alert'));
+    alert(i18n.t("numgen.alert"));
   }
 };
 
@@ -93,16 +118,21 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
   const regionKeys = Object.keys(genData.regionNumbers);
 
   if (beginRegionName.value == null || randomizeRegions)
-    beginRegionName.value = regionKeys[(regionKeys.length * Math.random()) << 0] as RegionName;
+    beginRegionName.value = regionKeys[
+      (regionKeys.length * Math.random()) << 0
+    ] as RegionName;
 
   if (endRegionName.value == null || randomizeRegions)
-    endRegionName.value = regionKeys[(regionKeys.length * Math.random()) << 0] as RegionName;
+    endRegionName.value = regionKeys[
+      (regionKeys.length * Math.random()) << 0
+    ] as RegionName;
 
-  let number = '';
+  let number = "";
 
   if (beginRegionName.value == endRegionName.value) {
     const sameRegionsNumbers = genData.sameRegions[beginRegionName.value!];
-    const randRegionNumber = sameRegionsNumbers[Math.floor(Math.random() * sameRegionsNumbers.length)];
+    const randRegionNumber =
+      sameRegionsNumbers[Math.floor(Math.random() * sameRegionsNumbers.length)];
     number += randRegionNumber.toString();
   } else {
     const beginRegionNumber = genData.regionNumbers[beginRegionName.value!];
@@ -117,23 +147,30 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
     return;
   }
 
-  if (chosenCategory.value == null) chosenCategory.value = 'EI';
+  if (chosenCategory.value == null) chosenCategory.value = "EI";
 
-  const rulesArray = genData.categories[chosenCategory.value].split(';').map((r) => ({
+  const rulesArray = genData.categories[chosenCategory.value]
-    index: r.split(':')[0],
+    .split(";")
-    rule: r.split(':')[1],
+    .map((r) => ({
-    nums: Number(r.split(':')[2] || '1'),
+      index: r.split(":")[0],
+      rule: r.split(":")[1],
+      nums: Number(r.split(":")[2] || "1"),
     }));
 
   rulesArray.forEach((r) => {
-    const range = r.rule.split('-');
+    const range = r.rule.split("-");
 
     if (range.length == 1) number += r.rule;
     else {
       const [minRange, maxRange] = range;
-      const randRange = Math.floor(Math.random() * (Number(maxRange) - Number(minRange)) + Number(minRange)).toString();
+      const randRange = Math.floor(
+        Math.random() * (Number(maxRange) - Number(minRange)) +
+          Number(minRange),
+      ).toString();
 
-      number += new Array(Math.abs(randRange.length - r.nums)).fill('0').join('') + randRange;
+      number +=
+        new Array(Math.abs(randRange.length - r.nums)).fill("0").join("") +
+        randRange;
     }
   });
 
@@ -142,8 +179,8 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/tab.scss';
+@import "../../styles/tab.scss";
-@import '../../styles/global.scss';
+@import "../../styles/global.scss";
 
 .options {
   display: grid;
@@ -189,4 +226,3 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
   }
 }
 </style>
-

src/components/tabs/StockGeneratorTab.vue

@@ -1,45 +1,64 @@
 <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') }}
+            {{ $t("stockgen.input-mass") }}
-            <input type="number" v-model="maxMass" step="100" max="4000" min="0" />
+            <input
+              type="number"
+              v-model="maxMass"
+              step="100"
+              max="4000"
+              min="0"
+            />
           </label>
 
           <label>
-            {{ $t('stockgen.input-length') }}
+            {{ $t("stockgen.input-length") }}
-            <input type="number" v-model="maxLength" step="25" max="650" min="0" />
+            <input
+              type="number"
+              v-model="maxLength"
+              step="25"
+              max="650"
+              min="0"
+            />
           </label>
 
           <label>
-            {{ $t('stockgen.input-carcount') }}
+            {{ $t("stockgen.input-carcount") }}
-            <input type="number" v-model="maxCarCount" step="1" max="60" min="1" />
+            <input
+              type="number"
+              v-model="maxCarCount"
+              step="1"
+              max="60"
+              min="1"
+            />
           </label>
         </div>
       </div>
 
       <div>
-        <h2>{{ $t('stockgen.cargo-title') }}</h2>
+        <h2>{{ $t("stockgen.cargo-title") }}</h2>
-        <b>{{ $t('stockgen.cargo-desc') }}</b>
+        <b>{{ $t("stockgen.cargo-desc") }}</b>
       </div>
 
       <div class="generator_cargo">
         <button
+          v-for="(cargoArray, cargoName) in store.stockData?.generator.cargo"
+          :key="cargoName"
           class="btn"
           :data-chosen="chosenCargoTypes.includes(cargoName.toString())"
-          v-for="(cargoArray, cargoName) in store.stockData?.generator.cargo"
           @click="toggleCargoChosen(cargoName.toString(), cargoArray)"
         >
           {{ $t(`cargo.${cargoName}`) }}
@@ -47,15 +66,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>
@@ -78,16 +97,28 @@
       <hr />
 
       <div class="tab_actions">
-        <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock()">
+        <button
-          {{ $t('stockgen.action-generate') }}
+          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)">
+        <button
-          {{ $t('stockgen.action-generate-empty') }}
+          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">
+        <button
-          {{ $t('stockgen.action-reset') }}
+          class="btn"
+          :data-disabled="computedChosenCarTypes.size == 0"
+          @click="resetChosenCargo"
+        >
+          {{ $t("stockgen.action-reset") }}
         </button>
       </div>
     </div>
@@ -95,15 +126,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
-import { useStore } from '../../store';
+import { useStore } from "../../store";
 
-import stockMixin from '../../mixins/stockMixin';
+import stockMixin from "../../mixins/stockMixin";
-import { ICargo, ICarWagon, IStock } from '../../types';
+import { ICargo, ICarWagon, IStock } from "../../types";
-import warningsMixin from '../../mixins/warningsMixin';
+import warningsMixin from "../../mixins/warningsMixin";
 
 export default defineComponent({
-  name: 'stock-generator',
+  name: "stock-generator",
 
   mixins: [stockMixin, warningsMixin],
 
@@ -126,7 +157,9 @@ export default defineComponent({
 
   computed: {
     computedChosenCarTypes() {
-      return new Set<string>(this.chosenCarTypes.sort((c1, c2) => (c1 > c2 ? 1 : -1)));
+      return new Set<string>(
+        this.chosenCarTypes.slice().sort((c1, c2) => (c1 > c2 ? 1 : -1)),
+      );
     },
   },
 
@@ -150,53 +183,84 @@ export default defineComponent({
     },
 
     generateStock(empty = false) {
-      const generatedChosenStockList = this.chosenCargoTypes.reduce((acc, type) => {
+      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 if (cargoType == "all")
-            else cargoObjs.push(carWagonObjs[0]?.cargoList.find((cargo) => cargo.id == cargoType));
+                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 });
                 });
               });
             });
 
           return acc;
-      }, [] as { constructionType: string; carPool: { carWagon: ICarWagon; cargo?: ICargo }[] }[]);
+        },
+        [] as {
+          constructionType: string;
+          carPool: { carWagon: ICarWagon; cargo?: ICargo }[];
+        }[],
+      );
 
-      let bestGeneration: { stockList: IStock[]; value: number } = { stockList: [], value: 0 };
+      let bestGeneration: { stockList: IStock[]; value: number } = {
+        stockList: [],
+        value: 0,
+      };
 
       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;
+          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 randomStockType =
-          const { carWagon, cargo } = randomStockType.carPool[~~(Math.random() * randomStockType.carPool.length)];
+            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
           ) {
@@ -207,7 +271,10 @@ 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;
@@ -216,11 +283,12 @@ 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;
@@ -233,33 +301,38 @@ 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);
+      if (!this.excludedCarTypes.includes(type))
-      else this.excludedCarTypes = this.excludedCarTypes.filter((c) => c != 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/global.scss";
-@import '../../styles/tab.scss';
+@import "../../styles/tab.scss";
 
 .generator_cargo,
 .generator_vehicles {
@@ -277,14 +350,14 @@ export default defineComponent({
 
     background-color: $secondaryColor;
 
-    &[data-chosen='true'] {
+    &[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;
     }
@@ -316,4 +389,3 @@ export default defineComponent({
   color: black;
 }
 </style>
-

src/components/tabs/StockListTab.vue

@@ -1,47 +1,77 @@
 <template>
   <section class="stock-list-tab">
     <div class="tab_header">
-      <h2>{{ $t('stocklist.title') }}</h2>
+      <h2>{{ $t("stocklist.title") }}</h2>
     </div>
 
     <div class="stock_actions">
       <label class="file-label">
         <div class="btn btn--image">
           <img src="/images/icon-upload.svg" alt="" />
-          {{ $t('stocklist.action-upload') }}
+          {{ $t("stocklist.action-upload") }}
         </div>
 
-        <input type="file" @change="uploadStock" ref="conFile" accept=".con,.txt" />
+        <input
+          type="file"
+          @change="uploadStock"
+          ref="conFile"
+          accept=".con,.txt"
+        />
       </label>
 
-      <button class="btn btn--image" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="downloadStock">
+      <button
+        class="btn btn--image"
+        :data-disabled="stockIsEmpty"
+        :disabled="stockIsEmpty"
+        @click="downloadStock"
+      >
         <img src="/images/icon-download.svg" alt="download icon" />
-        {{ $t('stocklist.action-download') }}
+        {{ $t("stocklist.action-download") }}
       </button>
 
-      <button class="btn btn--image" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="copyToClipboard">
+      <button
+        class="btn btn--image"
+        :data-disabled="stockIsEmpty"
+        :disabled="stockIsEmpty"
+        @click="copyToClipboard"
+      >
         <img src="/images/icon-copy.svg" alt="copy icon" />
-        {{ $t('stocklist.action-copy') }}
+        {{ $t("stocklist.action-copy") }}
       </button>
 
-      <button class="btn btn--image" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="resetStock">
+      <button
+        class="btn btn--image"
+        :data-disabled="stockIsEmpty"
+        :disabled="stockIsEmpty"
+        @click="resetStock"
+      >
         <img src="/images/icon-reset.svg" alt="reset icon" />
-        {{ $t('stocklist.action-reset') }}
+        {{ $t("stocklist.action-reset") }}
       </button>
 
-      <button class="btn btn--image" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="shuffleCars">
+      <button
+        class="btn btn--image"
+        :data-disabled="stockIsEmpty"
+        :disabled="stockIsEmpty"
+        @click="shuffleCars"
+      >
         <img src="/images/icon-shuffle.svg" alt="shuffle icon" />
-        {{ $t('stocklist.action-shuffle') }}
+        {{ $t("stocklist.action-shuffle") }}
       </button>
     </div>
 
-    <div class="stock_controls" :data-disabled="store.chosenStockListIndex == -1">
+    <div
+      class="stock_controls"
+      :data-disabled="store.chosenStockListIndex == -1"
+    >
       <b v-if="store.chosenStockListIndex >= 0">
-        {{ $t('stocklist.vehicle-no') }} <span class="text--accent">{{ store.chosenStockListIndex + 1 }}</span> &nbsp;
+        {{ $t("stocklist.vehicle-no") }}
+        <span class="text--accent">{{ store.chosenStockListIndex + 1 }}</span>
+        &nbsp;
       </b>
 
       <b v-else>
-        {{ $t('stocklist.no-vehicle-chosen') }}
+        {{ $t("stocklist.no-vehicle-chosen") }}
       </b>
 
       <button
@@ -50,7 +80,7 @@
         @click="moveUpStock(store.chosenStockListIndex)"
       >
         <img :src="getIconURL('higher')" alt="move up vehicle" />
-        {{ $t('stocklist.action-move-up') }}
+        {{ $t("stocklist.action-move-up") }}
       </button>
 
       <button
@@ -59,7 +89,7 @@
         @click="moveDownStock(store.chosenStockListIndex)"
       >
         <img :src="getIconURL('lower')" alt="move down vehicle" />
-        {{ $t('stocklist.action-move-down') }}
+        {{ $t("stocklist.action-move-down") }}
       </button>
 
       <button
@@ -68,26 +98,34 @@
         @click="removeStock(store.chosenStockListIndex)"
       >
         <img :src="getIconURL('remove')" alt="remove vehicle" />
-        {{ $t('stocklist.action-remove') }}
+        {{ $t("stocklist.action-remove") }}
       </button>
     </div>
 
     <div class="stock_specs">
       <b class="real-stock-info" v-if="store.chosenRealStock">
         <span class="text--accent">
-          <img :src="getIconURL(store.chosenRealStock.type)" :alt="store.chosenRealStock.type" />
+          <img
+            :src="getIconURL(store.chosenRealStock.type)"
+            :alt="store.chosenRealStock.type"
+          />
           {{ store.chosenRealStock.number }} {{ store.chosenRealStock.name }}
         </span>
         |
       </b>
 
       <span>
-        {{ $t('stocklist.mass') }} <span class="text--accent">{{ store.totalMass }}t</span> ({{
+        {{ $t("stocklist.mass") }}
-          $t('stocklist.mass-accepted')
+        <span class="text--accent">{{ store.totalMass }}t</span> ({{
-        }}: <span class="text--accent">{{ store.acceptableMass ? store.acceptableMass + 't' : '-' }}</span
+          $t("stocklist.mass-accepted")
-        >) - {{ $t('stocklist.length') }}:
+        }}:
+        <span class="text--accent">{{
+          store.acceptableMass ? store.acceptableMass + "t" : "-"
+        }}</span
+        >) - {{ $t("stocklist.length") }}:
         <span class="text--accent">{{ store.totalLength }}m</span>
-        - {{ $t('stocklist.vmax') }}: <span class="text--accent">{{ store.maxStockSpeed }} km/h</span>
+        - {{ $t("stocklist.vmax") }}:
+        <span class="text--accent">{{ store.maxStockSpeed }} km/h</span>
       </span>
     </div>
 
@@ -96,21 +134,25 @@
         <input
           type="checkbox"
           v-model="store.isColdStart"
-          :disabled="!locoSupportsColdStart(store.stockList[0]?.constructionType || '')"
+          :disabled="
+            !locoSupportsColdStart(store.stockList[0]?.constructionType || '')
+          "
         />
-        {{ $t('stocklist.coldstart-info') }}
+        {{ $t("stocklist.coldstart-info") }}
       </label>
     </div>
 
     <div class="stock_warnings" v-if="stockHasWarnings">
-      <div class="warning" v-if="locoNotSuitable">(!) {{ $t('stocklist.warning-not-suitable') }}</div>
+      <div class="warning" v-if="locoNotSuitable">
+        (!) {{ $t("stocklist.warning-not-suitable") }}
+      </div>
 
       <div class="warning" v-if="trainTooLong && store.isTrainPassenger">
-        (!) {{ $t('stocklist.warning-passenger-too-long') }}
+        (!) {{ $t("stocklist.warning-passenger-too-long") }}
       </div>
 
       <div class="warning" v-if="trainTooLong && !store.isTrainPassenger">
-        (!) {{ $t('stocklist.warning-freight-too-long') }}
+        (!) {{ $t("stocklist.warning-freight-too-long") }}
       </div>
 
       <div class="warning" v-if="trainTooHeavy">
@@ -121,14 +163,14 @@
               target="_blank"
               href="https://docs.google.com/spreadsheets/d/1bFXUsHsAu4youmNz-46Q1HslZaaoklvfoBDS553TnNk/edit"
             >
-              {{ $t('stocklist.acceptable-mass-docs') }}
+              {{ $t("stocklist.acceptable-mass-docs") }}
             </a>
           </template>
         </i18n-t>
       </div>
 
       <div class="warning" v-if="tooManyLocomotives">
-        {{ $t('stocklist.warning-too-many-locos') }}
+        {{ $t("stocklist.warning-too-many-locos") }}
       </div>
     </div>
 
@@ -137,7 +179,7 @@
     <!-- Stock list -->
     <ul ref="stock_list">
       <li v-if="stockIsEmpty" class="list-empty">
-        <div class="stock-info">{{ $t('stocklist.list-empty') }}</div>
+        <div class="stock-info">{{ $t("stocklist.list-empty") }}</div>
       </li>
 
       <TransitionGroup name="stock-list-anim">
@@ -160,18 +202,28 @@
             @dragover="allowDrop"
             draggable="true"
           >
-            <span class="stock-info__no" :data-selected="i == store.chosenStockListIndex">
+            <span
+              class="stock-info__no"
+              :data-selected="i == store.chosenStockListIndex"
+            >
               <span v-if="i == store.chosenStockListIndex">&bull;&nbsp;</span>
               {{ i + 1 }}.
             </span>
 
-            <span class="stock-info__type" :class="{ supporter: stock.supportersOnly }">
+            <span
+              class="stock-info__type"
+              :class="{ supporter: stock.supportersOnly }"
+            >
               {{ stock.isLoco ? stock.type : getCarSpecFromType(stock.type) }}
             </span>
 
-            <span class="stock-info__cargo" v-if="stock.cargo"> {{ stock.cargo.id }} </span>
+            <span class="stock-info__cargo" v-if="stock.cargo">
+              {{ stock.cargo.id }}
+            </span>
             <span class="stock-info__length"> {{ stock.length }}m </span>
-            <span class="stock-info__mass">{{ stock.cargo ? stock.cargo.totalMass : stock.mass }}t </span>
+            <span class="stock-info__mass"
+              >{{ stock.cargo ? stock.cargo.totalMass : stock.mass }}t
+            </span>
             <span class="stock-info__speed"> {{ stock.maxSpeed }}km/h </span>
           </div>
         </li>
@@ -181,21 +233,20 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
-import TrainImage from '../sections/TrainImageSection.vue';
 
-import { useStore } from '../../store';
+import { useStore } from "../../store";
 
-import { locoSupportsColdStart } from '../../utils/locoUtils';
+import { locoSupportsColdStart } from "../../utils/locoUtils";
-import warningsMixin from '../../mixins/warningsMixin';
+import warningsMixin from "../../mixins/warningsMixin";
-import imageMixin from '../../mixins/imageMixin';
+import imageMixin from "../../mixins/imageMixin";
-import stockPreviewMixin from '../../mixins/stockPreviewMixin';
+import stockPreviewMixin from "../../mixins/stockPreviewMixin";
-import StockThumbnails from '../utils/StockThumbnails.vue';
+import StockThumbnails from "../utils/StockThumbnails.vue";
-import stockMixin from '../../mixins/stockMixin';
+import stockMixin from "../../mixins/stockMixin";
 
 export default defineComponent({
-  name: 'stock-list',
+  name: "stock-list",
-  components: { TrainImage, StockThumbnails },
+  components: { StockThumbnails },
 
   mixins: [warningsMixin, imageMixin, stockMixin, stockPreviewMixin],
 
@@ -218,13 +269,20 @@ export default defineComponent({
     stockString() {
       return this.store.stockList
         .map((stock, i) => {
-          let stockTypeStr = stock.isLoco || !stock.cargo ? stock.type : `${stock.type}:${stock.cargo.id}`;
+          let stockTypeStr =
+            stock.isLoco || !stock.cargo
+              ? stock.type
+              : `${stock.type}:${stock.cargo.id}`;
           let coldStart =
-            i == 0 && this.store.isColdStart && locoSupportsColdStart(stock.constructionType || '') ? ',c' : '';
+            i == 0 &&
+            this.store.isColdStart &&
+            locoSupportsColdStart(stock.constructionType || "")
+              ? ",c"
+              : "";
 
           return stockTypeStr + coldStart;
         })
-        .join(';');
+        .join(";");
     },
 
     stockIsEmpty() {
@@ -232,11 +290,18 @@ export default defineComponent({
     },
 
     chosenStockVehicle() {
-      return this.store.chosenStockListIndex == -1 ? undefined : this.store.stockList[this.store.chosenStockListIndex];
+      return this.store.chosenStockListIndex == -1
+        ? undefined
+        : this.store.stockList[this.store.chosenStockListIndex];
     },
 
     stockHasWarnings() {
-      return this.tooManyLocomotives || this.trainTooHeavy || this.trainTooLong || this.locoNotSuitable;
+      return (
+        this.tooManyLocomotives ||
+        this.trainTooHeavy ||
+        this.trainTooLong ||
+        this.locoNotSuitable
+      );
     },
   },
 
@@ -247,7 +312,7 @@ export default defineComponent({
       navigator.clipboard.writeText(this.stockString);
 
       setTimeout(() => {
-        alert(this.$t('stocklist.alert-copied'));
+        alert(this.$t("stocklist.alert-copied"));
       }, 20);
     },
 
@@ -255,7 +320,10 @@ export default defineComponent({
       const stock = this.store.stockList[stockID];
 
       this.store.chosenStockListIndex =
-        this.store.chosenStockListIndex == stockID && this.store.chosenVehicle?.type == stock.type ? -1 : stockID;
+        this.store.chosenStockListIndex == stockID &&
+        this.store.chosenVehicle?.type == stock.type
+          ? -1
+          : stockID;
 
       if (this.store.chosenStockListIndex == -1) {
         this.store.chosenVehicle = null;
@@ -268,12 +336,13 @@ export default defineComponent({
     },
 
     getCarSpecFromType(typeStr: string) {
-      const specArray = typeStr.split('_');
+      const specArray = typeStr.split("_");
 
       if (specArray.length == 0) return null;
 
       /* 111a_Grafitti_1 */
-      if (specArray.length == 3) return `${specArray[0]} ${specArray[1]}-${specArray[2]}`;
+      if (specArray.length == 3)
+        return `${specArray[0]} ${specArray[1]}-${specArray[2]}`;
 
       /* 111a_PKP_Bnouz_01 */
       return `${specArray[0]} ${specArray[2]}-${specArray[3]} (${specArray[1]})`;
@@ -301,9 +370,12 @@ export default defineComponent({
     removeStock(index: number) {
       if (index == -1) return;
 
-      this.store.stockList = this.store.stockList.filter((stock, i) => i != index);
+      this.store.stockList = this.store.stockList.filter(
+        (stock, i) => i != index,
+      );
 
-      if (this.store.stockList.length < index + 1) this.store.chosenStockListIndex = -1;
+      if (this.store.stockList.length < index + 1)
+        this.store.chosenStockListIndex = -1;
     },
 
     moveUpStock(index: number) {
@@ -341,7 +413,8 @@ export default defineComponent({
 
         availableIndexes.splice(i, -1);
 
-        const randAvailableIndex = availableIndexes[Math.floor(Math.random() * availableIndexes.length)];
+        const randAvailableIndex =
+          availableIndexes[Math.floor(Math.random() * availableIndexes.length)];
         const tempSwap = this.store.stockList[randAvailableIndex];
 
         this.store.stockList[randAvailableIndex] = this.store.stockList[i];
@@ -350,30 +423,33 @@ export default defineComponent({
     },
 
     downloadStock() {
-      if (this.store.stockList.length == 0) return alert(this.$t('stocklist.alert-empty'));
+      if (this.store.stockList.length == 0)
+        return alert(this.$t("stocklist.alert-empty"));
 
-      const defaultName = `${this.store.chosenRealStockName || this.store.stockList[0].type} ${
+      const defaultName = `${
-        this.store.totalMass
+        this.store.chosenRealStockName || this.store.stockList[0].type
-      }t; ${this.store.totalLength}m; vmax ${this.store.maxStockSpeed}`;
+      } ${this.store.totalMass}t; ${this.store.totalLength}m; vmax ${
+        this.store.maxStockSpeed
+      }`;
 
-      const fileName = prompt(this.$t('stocklist.prompt-file'), defaultName);
+      const fileName = prompt(this.$t("stocklist.prompt-file"), defaultName);
 
       if (!fileName) return;
 
       const blob = new Blob([this.stockString]);
-      const file = fileName + '.con';
+      const file = fileName + ".con";
 
-      var e = document.createEvent('MouseEvents'),
+      var e = document.createEvent("MouseEvents"),
-        a = document.createElement('a');
+        a = document.createElement("a");
       a.download = file;
       a.href = window.URL.createObjectURL(blob);
-      a.dataset.downloadurl = ['', a.download, a.href].join(':');
+      a.dataset.downloadurl = ["", a.download, a.href].join(":");
-      e.initEvent('click', true, false);
+      e.initEvent("click", true, false);
       a.dispatchEvent(e);
     },
 
     uploadStock() {
-      const inputEl = this.$refs['conFile'] as HTMLInputElement;
+      const inputEl = this.$refs["conFile"] as HTMLInputElement;
       const files = inputEl.files;
 
       if (files?.length != 1) return;
@@ -385,14 +461,14 @@ export default defineComponent({
       reader.onload = (res) => {
         const stockString = res.target?.result;
 
-        if (!stockString || typeof stockString !== 'string') return;
+        if (!stockString || typeof stockString !== "string") return;
 
         this.loadStockFromString(stockString);
       };
 
       reader.onerror = (err) => console.log(err);
 
-      inputEl.value = '';
+      inputEl.value = "";
     },
 
     onDragStart(vehicleIndex: number) {
@@ -402,13 +478,14 @@ export default defineComponent({
     onDrop(e: DragEvent, vehicleIndex: number) {
       e.preventDefault();
 
-      let targetEl = (this.$refs['itemRefs'] as Element[])[vehicleIndex];
+      let targetEl = (this.$refs["itemRefs"] as Element[])[vehicleIndex];
 
       if (!targetEl) return;
 
       const tempVehicle = this.store.stockList[vehicleIndex];
 
-      this.store.stockList[vehicleIndex] = this.store.stockList[this.draggedVehicleID];
+      this.store.stockList[vehicleIndex] =
+        this.store.stockList[this.draggedVehicleID];
       this.store.stockList[this.draggedVehicleID] = tempVehicle;
 
       this.store.chosenStockListIndex = vehicleIndex;
@@ -422,8 +499,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/global';
+@import "../../styles/global";
-@import '../../styles/tab.scss';
+@import "../../styles/tab.scss";
 
 .stock-list-tab {
   display: grid;
@@ -455,7 +532,7 @@ export default defineComponent({
 
   background-color: #353a57;
 
-  &[data-disabled='true'] {
+  &[data-disabled="true"] {
     opacity: 0.8;
 
     user-select: none;
@@ -567,7 +644,7 @@ li > .stock-info {
     min-width: 3.5em;
     text-align: right;
 
-    &[data-selected='true'] {
+    &[data-selected="true"] {
       color: $accentColor;
     }
   }
@@ -610,4 +687,3 @@ li > .stock-info {
   }
 }
 </style>
-

src/components/tabs/WikiListTab.vue

@@ -24,7 +24,7 @@
         <table>
           <thead>
             <tr>
-              <th v-for="header in wikiMode == 'locomotives' ? locoHeaders : carHeaders" @click="toggleSorter(header)">
+              <th v-for="header in wikiMode == 'locomotives' ? locoHeaders : carHeaders" @click="toggleSorter(header)" :key="header.id">
                 {{ $t(`wiki.header.${header.id}`) }}
 
                 <span v-if="currentModeSorter.id == header.id">
@@ -37,23 +37,25 @@
           <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>
-                <img
+                <object :data="getThumbnailURL(loco.type, 'small')" type="image/jpeg">
-                  :src="`https://spythere.github.io/api/td2/images/${loco.type}--300px.jpg`"
+                  <!-- <img src="default.jpg" /> -->
-                  loading="lazy"
+                  <div>?</div>
-                  :alt="`Lokomotywa ${loco.type}`"
+                </object>
-                />
               </td>
 
               <td>{{ loco.type }}</td>
               <td>{{ $t(`wiki.${loco.power}`) }}</td>
               <td>{{ loco.constructionType }}</td>
-              <td>{{ locoSupportsColdStart(loco.constructionType) ? `&check;` : '&cross;' }}</td>
+              <td>
+                {{ locoSupportsColdStart(loco.constructionType) ? `&check;` : '&cross;' }}
+              </td>
               <td>{{ loco.length }}m</td>
               <td>{{ loco.mass }}t</td>
               <td>{{ loco.maxSpeed }}km/h</td>
@@ -63,17 +65,22 @@
           <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
+                <!-- <img
-                  :src="`https://spythere.github.io/api/td2/images/${car.type}--300px.jpg`"
+                  :src="getThumbnailURL(car.type, 'small')"
                   loading="lazy"
-                  :alt="`Lokomotywa ${car.type}`"
+                  :alt="`${car.type}`"
-                />
+                /> -->
+                <object :data="getThumbnailURL(car.type, 'small')" type="image/jpeg" loading="lazy">
+                  <!-- <img src="default.jpg" /> -->
+                  <div>?</div>
+                </object>
               </td>
 
               <td>{{ car.type }}</td>
@@ -81,7 +88,9 @@
               <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>
+              <td>
+                {{ car.cargoList.length == 0 ? '-' : car.cargoList.length }}
+              </td>
             </tr>
           </tbody>
         </table>
@@ -97,19 +106,11 @@ import stockPreviewMixin from '../../mixins/stockPreviewMixin';
 import { Vehicle } from '../../types';
 import { isLocomotive } from '../../utils/vehicleUtils';
 import stockMixin from '../../mixins/stockMixin';
+import imageMixin from '../../mixins/imageMixin';
 import { locoSupportsColdStart } from '../../utils/locoUtils';
 
 type WikiMode = 'locomotives' | 'carWagons';
-type SorterID =
+type SorterID = 'type' | 'constructionType' | 'image' | 'length' | 'mass' | 'maxSpeed' | 'cargoCount' | 'power' | 'coldStart';
-  | 'type'
-  | 'constructionType'
-  | 'image'
-  | 'length'
-  | 'mass'
-  | 'maxSpeed'
-  | 'cargoCount'
-  | 'power'
-  | 'coldStart';
 
 interface WikiHeader {
   id: SorterID;
@@ -138,7 +139,7 @@ const carHeaders: WikiHeader[] = [
 ];
 
 export default defineComponent({
-  mixins: [stockPreviewMixin, stockMixin],
+  mixins: [stockPreviewMixin, stockMixin, imageMixin],
 
   data() {
     return {
@@ -166,7 +167,9 @@ export default defineComponent({
 
   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: {
@@ -208,13 +211,11 @@ export default defineComponent({
 
         case 'cargoCount':
           if (vehiclesAreCars) return Math.sign((vA.cargoList.length || -1) - (vB.cargoList.length || -1)) * direction;
+          break;
 
         case 'coldStart':
-          if (vehiclesAreLocos)
+          if (vehiclesAreLocos) return (locoSupportsColdStart(vA.constructionType) > locoSupportsColdStart(vB.constructionType) ? 1 : -1) * direction;
-            return (
+          break;
-              (locoSupportsColdStart(vA.constructionType) > locoSupportsColdStart(vB.constructionType) ? 1 : -1) *
-              direction
-            );
 
         default:
           break;
@@ -232,17 +233,13 @@ export default defineComponent({
     computedLocoList() {
       const trimmedSearchValue = this.searchedVehicleTypeName.trim();
 
-      return this.store.locoDataList
+      return this.store.locoDataList.filter((loco) => new RegExp(`${trimmedSearchValue}`, 'i').test(loco.type)).sort(this.sortVehicles);
-        .filter((loco) => new RegExp(`${trimmedSearchValue}`, 'i').test(loco.type))
-        .sort(this.sortVehicles);
     },
 
     computedCarList() {
       const trimmedSearchValue = this.searchedVehicleTypeName.trim();
 
-      return this.store.carDataList
+      return this.store.carDataList.filter((car) => new RegExp(`${trimmedSearchValue}`, 'i').test(car.type)).sort(this.sortVehicles);
-        .filter((car) => new RegExp(`${trimmedSearchValue}`, 'i').test(car.type))
-        .sort(this.sortVehicles);
     },
   },
 });
@@ -319,9 +316,14 @@ export default defineComponent({
     width: 120px;
   }
 
-  td img {
+  td object[type='image/jpeg'] {
-    display: block;
+    display: flex;
-    width: 120px;
+    max-width: 120px;
+    min-height: 60px;
+
+    div {
+      margin: auto;
+    }
   }
 }
 

src/components/utils/ImageFullscreenPreview.vue

@@ -10,8 +10,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
-import { useStore } from '../../store';
+import { useStore } from "../../store";
 
 export default defineComponent({
   data() {

src/components/utils/StockThumbnails.vue

@@ -2,6 +2,7 @@
   <div class="stock_thumbnails" ref="thumbnailsRef">
     <div
       v-for="(stock, stockIndex) in store.stockList"
+      :key="stockIndex"
       :data-selected="store.chosenStockListIndex == stockIndex"
       draggable="true"
       @dragstart="onDragStart(stockIndex)"
@@ -28,18 +29,18 @@
 </template>
 
 <script setup lang="ts">
-import { Ref, computed, nextTick, ref, watch } from 'vue';
+import { Ref, computed, nextTick, ref, watch } from "vue";
-import { useStore } from '../../store';
+import { useStore } from "../../store";
-import { IStock } from '../../types';
+import { IStock } from "../../types";
 
 const store = useStore();
-const emit = defineEmits(['listItemClick']);
+const emit = defineEmits(["listItemClick"]);
 
 const thumbnailsRef = ref() as Ref<HTMLElement>;
 const draggedIndex = ref(-1);
 
 const onListItemClick = (index: number) => {
-  emit('listItemClick', index);
+  emit("listItemClick", index);
 };
 
 const stockImageError = (e: Event, stock: IStock) => {
@@ -54,9 +55,13 @@ watch(
     nextTick(() => {
       (thumbnailsRef.value as HTMLElement)
         .querySelector(`div:nth-child(${index + 1})`)
-        ?.scrollIntoView({ block: 'nearest', inline: 'start', behavior: 'smooth' });
+        ?.scrollIntoView({
+          block: "nearest",
+          inline: "start",
+          behavior: "smooth",
         });
-  }
+    });
+  },
 );
 
 // Dragging images
@@ -67,7 +72,9 @@ const onDragStart = (vehicleIndex: number) => {
 const onDrop = (e: DragEvent, vehicleIndex: number) => {
   e.preventDefault();
 
-  let targetEl = thumbnailsRef.value.querySelector(`div:nth-child(${vehicleIndex + 1})`);
+  let targetEl = thumbnailsRef.value.querySelector(
+    `div:nth-child(${vehicleIndex + 1})`,
+  );
 
   if (!targetEl && draggedIndex.value != -1) return;
 
@@ -95,7 +102,7 @@ const allowDrop = (e: DragEvent) => {
     cursor: pointer;
     min-height: 100px;
 
-    &[data-selected='true'] {
+    &[data-selected="true"] {
       background-color: rebeccapurple;
     }
 
@@ -122,4 +129,3 @@ const allowDrop = (e: DragEvent) => {
   color: salmon;
 }
 </style>
-

src/constants/numberGeneratorData.json

@@ -12,8 +12,8 @@
   },
   "sameRegions": {
     "Losowy": [
-      10, 11, 19, 91, 93, 97, 99, 20, 22, 29, 30, 33, 39, 40, 44, 49, 94, 50, 55, 59, 90, 95, 96, 66, 60, 69, 77, 70,
+      10, 11, 19, 91, 93, 97, 99, 20, 22, 29, 30, 33, 39, 40, 44, 49, 94, 50,
-      79, 88, 80, 89, 92, 98
+      55, 59, 90, 95, 96, 66, 60, 69, 77, 70, 79, 88, 80, 89, 92, 98
     ],
     "Warszawa": [10, 11, 19, 91, 93, 97, 99],
     "Lublin": [20, 22, 29],
@@ -35,4 +35,3 @@
     "LT": "2:5;3:0-899:3"
   }
 }
-

src/constants/speedLimits.json

@@ -27,6 +27,12 @@
     },
     "cargo": null
   },
+  "EP09": {
+    "passenger": {
+      "650": 160
+    },
+    "cargo": null
+  },
   "ET41": {
     "passenger": {
       "700": 125
@@ -58,5 +64,3 @@
     }
   }
 }
-
-

src/enums/EVehicleUseType.ts

@@ -1,9 +1,9 @@
 export const enum EVehicleUseType {
-    LOCO_ELECTRICAL = 'loco-e',
+  LOCO_ELECTRICAL = "loco-e",
   LOCO_DIESEL = "loco-s",
   EMU = "loco-ezt",
   DMU = "loco-szt",
 
   CAR_PASSENGER = "car-passenger",
-    CAR_CARGO = "car-cargo"
+  CAR_CARGO = "car-cargo",
 }

src/http.ts

@@ -0,0 +1,10 @@
+import axios from "axios";
+
+const http = axios.create({
+  baseURL:
+    import.meta.env.VITE_API_DEV === "1"
+      ? "http://localhost:5500"
+      : "https://spythere.github.io/api",
+});
+
+export default http;

src/i18n-setup.ts

@@ -1,31 +1,33 @@
-import localePL from './locales/pl.json';
+import localePL from "./locales/pl.json";
-import localeEN from './locales/en.json';
+import localeEN from "./locales/en.json";
-import { createI18n } from 'vue-i18n';
+import { createI18n } from "vue-i18n";
-import axios from 'axios';
+import http from "./http";
 
 type LocaleMessageSchema = typeof localePL;
-type LocaleKey = 'en' | 'pl';
+type LocaleKey = "en" | "pl";
 
 const locales: { [key in LocaleKey]: LocaleMessageSchema } = {
   en: localeEN,
   pl: localePL,
 };
 
-const locale = window.localStorage.getItem('locale') || (/^pl\b/.test(navigator.language) ? 'pl' : 'en');
+const locale =
+  window.localStorage.getItem("locale") ||
+  (/^pl\b/.test(navigator.language) ? "pl" : "en");
 
-const i18n = createI18n<[LocaleMessageSchema], 'en' | 'pl'>({
+const i18n = createI18n<[LocaleMessageSchema], "en" | "pl">({
   locale,
-  fallbackLocale: 'pl',
+  fallbackLocale: "pl",
   legacy: false,
   globalInjection: true,
   messages: locales,
 });
 
 async function fetchBackendTranslations() {
-  const localeData = (await axios.get(`https://spythere.github.io/api/td2/data/locales.json`)).data;
+  const localeData = (await http.get(`td2/data/locales.json`)).data;
 
-  i18n.global.mergeLocaleMessage('pl', localeData.pl);
+  i18n.global.mergeLocaleMessage("pl", localeData.pl);
-  i18n.global.mergeLocaleMessage('en', localeData.en);
+  i18n.global.mergeLocaleMessage("en", localeData.en);
 }
 
 fetchBackendTranslations();

src/main.ts

@@ -1,14 +1,13 @@
-import { createApp } from 'vue';
+import { createApp } from "vue";
-import { createPinia } from 'pinia';
+import { createPinia } from "pinia";
-import { registerSW } from 'virtual:pwa-register';
+import { registerSW } from "virtual:pwa-register";
 
-import App from './App.vue';
+import App from "./App.vue";
-import i18n from './i18n-setup';
+import i18n from "./i18n-setup";
 const pinia = createPinia();
 
 registerSW({
   immediate: true,
 });
 
-createApp(App).use(pinia).use(i18n).mount('#app');
+createApp(App).use(pinia).use(i18n).mount("#app");
-

src/mixins/imageMixin.ts

@@ -1,9 +1,17 @@
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
 
 export default defineComponent({
   methods: {
-    getIconURL(name: string, ext = 'svg'): string {
+    getIconURL(name: string, ext = "svg"): string {
       return `/images/icon-${name}.${ext}`;
     },
+
+    getThumbnailURL(vehicleType: string, size: "small" | "large") {
+      return `${
+        import.meta.env.VITE_API_DEV === "1"
+          ? "http://localhost:5500"
+          : "https://spythere.github.io/api"
+      }/td2/images/${vehicleType}--${size == "small" ? 300 : 800}px.jpg`;
+    },
   },
 });

src/mixins/stockMixin.ts

@@ -1,7 +1,7 @@
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
-import { useStore } from '../store';
+import { useStore } from "../store";
-import { ICargo, ICarWagon, ILocomotive, IStock, Vehicle } from '../types';
+import { ICargo, ICarWagon, ILocomotive, IStock, Vehicle } from "../types";
-import { isLocomotive } from '../utils/vehicleUtils';
+import { isLocomotive } from "../utils/vehicleUtils";
 
 export default defineComponent({
   setup() {
@@ -39,14 +39,16 @@ export default defineComponent({
 
       const stock = this.getStockObject(vehicle, cargo);
 
-      if (stock.isLoco && !this.store.stockList[0]?.isLoco) this.store.stockList.unshift(stock);
+      if (stock.isLoco && !this.store.stockList[0]?.isLoco)
+        this.store.stockList.unshift(stock);
       else this.store.stockList.push(stock);
     },
 
     addLocomotive(loco: ILocomotive) {
       const stockObj = this.getStockObject(loco);
 
-      if (this.store.stockList.length > 0 && !this.store.stockList[0].isLoco) this.store.stockList.unshift(stockObj);
+      if (this.store.stockList.length > 0 && !this.store.stockList[0].isLoco)
+        this.store.stockList.unshift(stockObj);
       else this.store.stockList.push(stockObj);
     },
 
@@ -57,7 +59,7 @@ export default defineComponent({
     },
 
     loadStockFromString(stockString: string) {
-      const stockArray = stockString.trim().split(';');
+      const stockArray = stockString.trim().split(";");
 
       this.store.stockList.length = 0;
       this.store.chosenVehicle = null;
@@ -73,22 +75,26 @@ export default defineComponent({
         let vehicleCargo: ICargo | null = null;
 
         if (/^(EU|EP|ET|SM|EN|2EN|SN)/.test(type)) {
-          const [locoType, coldStart] = type.split(',');
+          const [locoType, coldStart] = type.split(",");
-          vehicle = this.store.locoDataList.find((loco) => loco.type == locoType) || null;
+          vehicle =
+            this.store.locoDataList.find((loco) => loco.type == locoType) ||
+            null;
 
-          if (i == 0 && coldStart == 'c') this.store.isColdStart = true;
+          if (i == 0 && coldStart == "c") this.store.isColdStart = true;
         } else {
-          const [carType, cargo] = type.split(':');
+          const [carType, cargo] = type.split(":");
-          vehicle = this.store.carDataList.find((car) => car.type == carType) || null;
+          vehicle =
+            this.store.carDataList.find((car) => car.type == carType) || null;
 
-          if (cargo) vehicleCargo = vehicle?.cargoList.find((c) => c.id == cargo) || null;
+          if (cargo)
+            vehicleCargo =
+              vehicle?.cargoList.find((c) => c.id == cargo) || null;
         }
 
-        if (!vehicle) console.log('Brak pojazdu:', type);
+        if (!vehicle) console.log("Brak pojazdu:", type);
 
         this.addVehicle(vehicle, vehicleCargo);
       });
     },
   },
 });
-

src/mixins/stockPreviewMixin.ts

@@ -1,6 +1,6 @@
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
-import { useStore } from '../store';
+import { useStore } from "../store";
-import { ICarWagon, ILocomotive, IStock, Vehicle } from '../types';
+import { ICarWagon, ILocomotive, IStock } from "../types";
 
 export default defineComponent({
   setup() {
@@ -12,12 +12,14 @@ export default defineComponent({
   computed: {
     locoOptions() {
       return this.store.locoDataList
+        .slice()
         .sort((a, b) => (a.type > b.type ? 1 : -1))
         .filter((loco) => loco.power == this.store.chosenLocoPower);
     },
 
     carOptions() {
       return this.store.carDataList
+        .slice()
         .sort((a, b) => (a.type > b.type ? 1 : -1))
         .filter((car) => car.useType == this.store.chosenCarUseType);
     },
@@ -37,28 +39,34 @@ export default defineComponent({
       this.store.chosenCargo = null;
     },
 
-    previewVehicleByType(type: 'loco' | 'car' | 'cargo') {
+    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.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;
+          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 (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;
+        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;
+        const chosenCar =
+          this.store.carDataList.find((v) => v.type == stock.type) || null;
         this.store.chosenVehicle = chosenCar;
         this.store.chosenCar = chosenCar;
 
@@ -89,4 +97,3 @@ export default defineComponent({
     },
   },
 });
-

src/mixins/warningsMixin.ts

@@ -1,5 +1,5 @@
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
-import { useStore } from '../store';
+import { useStore } from "../store";
 
 export default defineComponent({
   setup() {
@@ -18,7 +18,10 @@ export default defineComponent({
     },
 
     trainTooHeavy() {
-      return this.store.acceptableMass && this.store.totalMass > this.store.acceptableMass;
+      return (
+        this.store.acceptableMass &&
+        this.store.totalMass > this.store.acceptableMass
+      );
     },
 
     locoNotSuitable() {
@@ -26,15 +29,19 @@ export default defineComponent({
         !this.store.isTrainPassenger &&
         this.store.stockList.length > 1 &&
         !this.store.stockList.every((stock) => stock.isLoco) &&
-        this.store.stockList.some((stock) => stock.isLoco && stock.type.startsWith('EP'))
+        this.store.stockList.some(
+          (stock) => stock.isLoco && stock.type.startsWith("EP"),
+        )
       );
     },
 
     tooManyLocomotives() {
-      return this.store.stockList.reduce((acc, stock) => {
+      return (
+        this.store.stockList.reduce((acc, stock) => {
           if (stock.isLoco) acc += stock.count;
           return acc;
-      }, 0) > 2;
+        }, 0) > 2
+      );
     },
   },
 });

src/store.ts

@@ -1,5 +1,5 @@
-import { IStore } from './types';
+import { IStockData, IStore } from "./types";
-import { defineStore } from 'pinia';
+import { defineStore } from "pinia";
 import {
   acceptableMass,
   carDataList,
@@ -9,10 +9,11 @@ import {
   maxStockSpeed,
   totalLength,
   totalMass,
-} from './utils/vehicleUtils';
+} from "./utils/vehicleUtils";
+import http from "./http";
 
 export const useStore = defineStore({
-  id: 'store',
+  id: "store",
   state: () =>
     ({
       chosenCar: null,
@@ -25,8 +26,8 @@ export const useStore = defineStore({
       showSupporter: false,
       imageLoading: false,
 
-      chosenLocoPower: 'loco-e',
+      chosenLocoPower: "loco-e",
-      chosenCarUseType: 'car-passenger',
+      chosenCarUseType: "car-passenger",
 
       stockList: [],
       cargoOptions: [],
@@ -38,15 +39,15 @@ export const useStore = defineStore({
       chosenStockListIndex: -1,
       chosenRealStockName: undefined,
 
-      vehiclePreviewSrc: '',
+      vehiclePreviewSrc: "",
 
-      stockSectionMode: 'stock-list',
+      stockSectionMode: "stock-list",
 
       isRandomizerCardOpen: false,
       isRealStockListCardOpen: false,
 
       stockData: undefined,
-    } as IStore),
+    }) as IStore,
 
   getters: {
     locoDataList: (state) => locoDataList(state),
@@ -61,20 +62,21 @@ export const useStore = defineStore({
 
   actions: {
     async fetchStockInfoData() {
-      const stockData = await (await fetch(`https://spythere.github.io/api/td2/data/stockInfo.json`)).json();
+      const stockData = (await http.get<IStockData>("td2/data/stockInfo.json"))
+        .data;
       this.stockData = stockData;
     },
 
     handleRouting() {
       switch (window.location.pathname) {
-        case '/numgnr':
+        case "/numgnr":
-          this.stockSectionMode = 'number-generator';
+          this.stockSectionMode = "number-generator";
           break;
-        case '/stockgnr':
+        case "/stockgnr":
-          this.stockSectionMode = 'stock-generator';
+          this.stockSectionMode = "stock-generator";
           break;
-        case '/vehicles':
+        case "/vehicles":
-          this.stockSectionMode = 'wiki-list';
+          this.stockSectionMode = "wiki-list";
           break;
         default:
           break;
@@ -82,5 +84,3 @@ export const useStore = defineStore({
     },
   },
 });
-
-

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;
 }
 
@@ -111,7 +111,7 @@ button {
     outline: 1px solid white;
   }
 
-  &[data-disabled='true'] {
+  &[data-disabled="true"] {
     user-select: none;
     pointer-events: none;
     -moz-user-select: none;
@@ -146,8 +146,8 @@ button {
 }
 
 select,
-input[type='text'],
+input[type="text"],
-input[type='number'] {
+input[type="number"] {
   background: none;
   border: 2px solid #aaa;
   outline: none;

src/styles/tab.scss

@@ -1,4 +1,4 @@
-@import './global.scss';
+@import "./global.scss";
 
 .tab {
   height: 100%;
@@ -77,4 +77,3 @@ hr {
     }
   }
 }
-

src/types.ts

@@ -1,5 +1,5 @@
 export type Vehicle = ILocomotive | ICarWagon;
-export type StockSectionMode = 'STOCK_LIST' | 'STOCK_GENERATOR';
+export type StockSectionMode = "STOCK_LIST" | "STOCK_GENERATOR";
 
 export interface IStore {
   chosenCar: ICarWagon | null;
@@ -28,11 +28,21 @@ export interface IStore {
   isRandomizerCardOpen: boolean;
   isRealStockListCardOpen: boolean;
 
-  stockSectionMode: 'stock-list' | 'stock-generator' | 'number-generator' | 'wiki-list';
+  stockSectionMode:
+    | "stock-list"
+    | "stock-generator"
+    | "number-generator"
+    | "wiki-list";
   stockData?: IStockData;
 }
 
-export type TStockInfoKey = 'loco-e' | 'loco-s' | 'loco-ezt' | 'loco-szt' | 'car-passenger' | 'car-cargo';
+export type TStockInfoKey =
+  | "loco-e"
+  | "loco-s"
+  | "loco-ezt"
+  | "loco-szt"
+  | "car-passenger"
+  | "car-cargo";
 
 export interface IStockProps {
   type: string;
@@ -52,12 +62,12 @@ export interface IStockData {
   };
 
   info: {
-    'car-cargo': [string, string, boolean, boolean, string][];
+    "car-cargo": [string, string, boolean, boolean, string][];
-    'car-passenger': [string, string, boolean, boolean, string][];
+    "car-passenger": [string, string, boolean, boolean, string][];
-    'loco-e': [string, string, string, string, boolean][];
+    "loco-e": [string, string, string, string, boolean][];
-    'loco-s': [string, string, string, string, boolean][];
+    "loco-s": [string, string, string, string, boolean][];
-    'loco-szt': [string, string, string, string, boolean][];
+    "loco-szt": [string, string, string, string, boolean][];
-    'loco-ezt': [string, string, string, string, boolean][];
+    "loco-ezt": [string, string, string, string, boolean][];
   };
 
   props: IStockProps[];
@@ -79,9 +89,8 @@ export interface ILocomotive {
 }
 
 export interface ICarWagon {
-  //"203V_PKPC_Fll_01","203V",true,false,"100",img
   type: string;
-  useType: 'car-passenger' | 'car-cargo';
+  useType: "car-passenger" | "car-cargo";
   constructionType: string;
   loadable: boolean;
   supportersOnly: boolean;
@@ -120,4 +129,3 @@ export interface IReadyStockItem {
   number: string;
   name: string;
 }
-

src/utils/locoUtils.ts

@@ -1,5 +1,7 @@
-const supportedConstructions = ['303e', '203e'];
+const supportedConstructions = ["303e", "203e"];
 
 export function locoSupportsColdStart(constructionType: string) {
-  return new RegExp(`(${supportedConstructions.join('|')})`).test(constructionType);
+  return new RegExp(`(${supportedConstructions.join("|")})`).test(
+    constructionType,
+  );
 }

src/utils/speedLimitUtils.ts

@@ -1,14 +1,19 @@
-import speedLimitTable from '../constants/speedLimits.json';
+import speedLimitTable from "../constants/speedLimits.json";
 export type LocoType = keyof typeof speedLimitTable;
 
-export const calculateSpeedLimit = (locoType: LocoType, stockMass: number, isTrainPassenger: boolean) => {
+export const calculateSpeedLimit = (
-  const speedTable = speedLimitTable[locoType][isTrainPassenger ? 'passenger' : 'cargo'];
+  locoType: LocoType,
+  stockMass: number,
+  isTrainPassenger: boolean,
+) => {
+  const speedTable =
+    speedLimitTable[locoType][isTrainPassenger ? "passenger" : "cargo"];
 
   if (!speedTable) return undefined;
 
   let speedLimit = 0;
-  for (let mass in speedTable) if (stockMass > Number(mass)) speedLimit = (speedTable as any)[mass];
+  for (const mass in speedTable)
+    if (stockMass > Number(mass)) speedLimit = (speedTable as any)[mass];
 
   return speedLimit;
 };
-

src/utils/vehicleUtils.ts

@@ -1,8 +1,10 @@
-import { EVehicleUseType } from '../enums/EVehicleUseType';
+import { EVehicleUseType } from "../enums/EVehicleUseType";
-import { ICarWagon, ILocomotive, IStore, TStockInfoKey } from '../types';
+import { ICarWagon, ILocomotive, IStore } from "../types";
-import { LocoType, calculateSpeedLimit } from './speedLimitUtils';
+import { LocoType, calculateSpeedLimit } from "./speedLimitUtils";
 
-export function isLocomotive(vehicle: ILocomotive | ICarWagon): vehicle is ILocomotive {
+export function isLocomotive(
+  vehicle: ILocomotive | ICarWagon,
+): vehicle is ILocomotive {
   return (vehicle as ILocomotive).power !== undefined;
 }
 
@@ -12,15 +14,21 @@ export function locoDataList(state: IStore) {
   const stockData = state.stockData;
 
   return Object.keys(stockData.info).reduce((acc, vehiclePower) => {
-    if (!vehiclePower.startsWith('loco')) return acc;
+    if (!vehiclePower.startsWith("loco")) return acc;
 
-    const locoVehiclesData = stockData.info[vehiclePower as 'loco-e' | 'loco-s' | 'loco-ezt' | 'loco-szt'];
+    const locoVehiclesData =
+      stockData.info[
+        vehiclePower as "loco-e" | "loco-s" | "loco-ezt" | "loco-szt"
+      ];
 
     locoVehiclesData.forEach((loco) => {
       if (state.showSupporter && !loco[4]) return;
 
-      const [type, constructionType, cabinType, maxSpeed, supportersOnly] = loco;
+      const [type, constructionType, cabinType, maxSpeed, supportersOnly] =
-      const locoProps = stockData.props.find((prop) => constructionType == prop.type);
+        loco;
+      const locoProps = stockData.props.find(
+        (prop) => constructionType == prop.type,
+      );
 
       acc.push({
         power: vehiclePower,
@@ -29,10 +37,16 @@ export function locoDataList(state: IStore) {
         cabinType,
         maxSpeed: Number(maxSpeed),
         supportersOnly,
-        imageSrc: '',
+        imageSrc: "",
 
-        length: locoProps?.length && type.startsWith('2EN') ? locoProps.length * 2 : locoProps?.length || 0,
+        length:
-        mass: locoProps?.mass && type.startsWith('2EN') ? 253 : locoProps?.mass || 0,
+          locoProps?.length && type.startsWith("2EN")
+            ? locoProps.length * 2
+            : locoProps?.length || 0,
+        mass:
+          locoProps?.mass && type.startsWith("2EN")
+            ? 253
+            : locoProps?.mass || 0,
       });
     });
 
@@ -46,29 +60,32 @@ export function carDataList(state: IStore) {
   const stockData = state.stockData;
 
   return Object.keys(stockData.info).reduce((acc, vehicleUseType) => {
-    if (!vehicleUseType.startsWith('car')) return acc;
+    if (!vehicleUseType.startsWith("car")) return acc;
 
-    const carVehiclesData = stockData.info[vehicleUseType as 'car-passenger' | 'car-cargo'];
+    const carVehiclesData =
+      stockData.info[vehicleUseType as "car-passenger" | "car-cargo"];
 
     carVehiclesData.forEach((car) => {
       if (state.showSupporter && !car[3]) return;
 
-      const carPropsData = stockData.props.find((v) => car[0].toString().startsWith(v.type));
+      const carPropsData = stockData.props.find((v) =>
+        car[0].toString().startsWith(v.type),
+      );
 
       acc.push({
-        useType: vehicleUseType as 'car-passenger' | 'car-cargo',
+        useType: vehicleUseType as "car-passenger" | "car-cargo",
         type: car[0],
         constructionType: car[1],
         loadable: car[2],
         supportersOnly: car[3],
         maxSpeed: Number(car[4]),
-        imageSrc: '',
+        imageSrc: "",
         cargoList:
           !carPropsData || carPropsData.cargo === null
             ? []
-            : carPropsData.cargo.split(';').map((cargo) => ({
+            : carPropsData.cargo.split(";").map((cargo) => ({
-                id: cargo.split(':')[0],
+                id: cargo.split(":")[0],
-                totalMass: Number(cargo.split(':')[1]),
+                totalMass: Number(cargo.split(":")[1]),
               })),
 
         mass: carPropsData?.mass || 0,
@@ -82,33 +99,45 @@ export function carDataList(state: IStore) {
 
 export function totalMass(state: IStore) {
   return ~~state.stockList.reduce(
-    (acc, stock) => acc + (stock.cargo ? stock.cargo.totalMass : stock.mass) * stock.count,
+    (acc, stock) =>
-    0
+      acc + (stock.cargo ? stock.cargo.totalMass : stock.mass) * stock.count,
+    0,
   );
 }
 
 export function totalLength(state: IStore) {
-  return state.stockList.reduce((acc, stock) => acc + stock.length * stock.count, 0);
+  return state.stockList.reduce(
+    (acc, stock) => acc + stock.length * stock.count,
+    0,
+  );
 }
 
 export function maxStockSpeed(state: IStore) {
   const stockSpeedLimit = state.stockList.reduce(
     (acc, stock) => (stock.maxSpeed < acc || acc == 0 ? stock.maxSpeed : acc),
-    0
+    0,
   );
-  const headingLoco = state.stockList[0]?.isLoco ? state.stockList[0] : undefined;
+  const headingLoco = state.stockList[0]?.isLoco
+    ? state.stockList[0]
+    : undefined;
 
   if (!headingLoco) return stockSpeedLimit;
 
-  const locoType = headingLoco.type.split('-')[0];
+  const locoType = headingLoco.type.split("-")[0];
 
   if (/^(EN|2EN|SN)/.test(locoType)) return stockSpeedLimit;
 
   const stockMass = totalMass(state);
 
-  const speedLimitByMass = calculateSpeedLimit(locoType as LocoType, stockMass, isTrainPassenger(state));
+  const speedLimitByMass = calculateSpeedLimit(
+    locoType as LocoType,
+    stockMass,
+    isTrainPassenger(state),
+  );
 
-  return speedLimitByMass ? Math.min(stockSpeedLimit, speedLimitByMass) : stockSpeedLimit;
+  return speedLimitByMass
+    ? Math.min(stockSpeedLimit, speedLimitByMass)
+    : stockSpeedLimit;
 }
 
 export function acceptableMass(state: IStore) {
@@ -150,12 +179,13 @@ export function chosenRealStock(state: IStore) {
       for (let i = 0; i < stock.count; i++) acc.push(stock.type);
       return acc;
     }, [] as string[])
-    .join(';');
+    .join(";");
 
-  const realStockObj = state.readyStockList.find((readyStock) => readyStock.stockString == currentStockString);
+  const realStockObj = state.readyStockList.find(
+    (readyStock) => readyStock.stockString == currentStockString,
+  );
 
   state.chosenRealStockName = realStockObj?.stockId ?? undefined;
 
   return realStockObj;
 }
-

src/views/AppContainerView.vue

@@ -1,21 +1,21 @@
 <template>
   <div class="app-container">
     <MainContainer />
-    <Footer />
+    <FooterVue />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
-import { useStore } from '../store';
+import { useStore } from "../store";
 
-import MainContainer from '../components/app/MainContainer.vue';
+import MainContainer from "../components/app/MainContainer.vue";
-import Footer from '../components/app/Footer.vue';
+import FooterVue from "../components/app/Footer.vue";
 
 export default defineComponent({
   components: {
     MainContainer,
-    Footer,
+    FooterVue,
   },
 
   data: () => ({

src/vite-env.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="vite/client" />
 
-declare module '*.vue' {
+declare module "*.vue" {
-  import type { DefineComponent } from 'vue'
+  import type { DefineComponent } from "vue";
-  const component: DefineComponent<{}, {}, any>
+  const component: DefineComponent<{}, {}, any>;
-  export default component
+  export default component;
 }