format; linting; aktualizacja do 2023.2.1

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">
-            {{ $t('inputs.no-cargo-available') }}
+          <option
+            :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)">
-          {{ $t('inputs.action-add') }}
+        <button
+          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 { useStore } from '../../store';
-import stockPreviewMixin from '../../mixins/stockPreviewMixin';
-import stockMixin from '../../mixins/stockMixin';
+import imageMixin from "../../mixins/imageMixin";
+import { useStore } from "../../store";
+import stockPreviewMixin from "../../mixins/stockPreviewMixin";
+import stockMixin from "../../mixins/stockMixin";
 
 export default defineComponent({
   mixins: [imageMixin, stockPreviewMixin, stockMixin],
@@ -124,31 +144,31 @@ export default defineComponent({
   data: () => ({
     locomotiveTypeList: [
       {
-        id: 'loco-e',
-        desc: 'ELEKTRYCZNE',
+        id: "loco-e",
+        desc: "ELEKTRYCZNE",
       },
       {
-        id: 'loco-s',
-        desc: 'SPALINOWE',
+        id: "loco-s",
+        desc: "SPALINOWE",
       },
       {
-        id: 'loco-ezt',
-        desc: 'ELEKTR. ZESPOŁY TRAKCYJNE',
+        id: "loco-ezt",
+        desc: "ELEKTR. ZESPOŁY TRAKCYJNE",
       },
       {
-        id: 'loco-szt',
-        desc: 'SPAL. ZESPOŁY TRAKCYJNE',
+        id: "loco-szt",
+        desc: "SPAL. ZESPOŁY TRAKCYJNE",
       },
     ],
 
     carTypeList: [
       {
-        id: 'car-passenger',
-        desc: 'PASAŻERSKIE',
+        id: "car-passenger",
+        desc: "PASAŻERSKIE",
       },
       {
-        id: 'car-cargo',
-        desc: 'TOWAROWE',
+        id: "car-cargo",
+        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',
-          locale: 'pl',
+          name: "POLSKI",
+          locale: "pl",
         },
         {
-          name: 'ENGLISH',
-          locale: 'en',
+          name: "ENGLISH",
+          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 { useStore } from '../../store';
-import StockListTab from '../tabs/StockListTab.vue';
-import StockGeneratorTab from '../tabs/StockGeneratorTab.vue';
-import NumberGeneratorTab from '../tabs/NumberGeneratorTab.vue';
-import WikiListTab from '../tabs/WikiListTab.vue';
+import { computed, onMounted, ref } from "vue";
+import { useStore } from "../../store";
+import StockListTab from "../tabs/StockListTab.vue";
+import StockGeneratorTab from "../tabs/StockGeneratorTab.vue";
+import NumberGeneratorTab from "../tabs/NumberGeneratorTab.vue";
+import WikiListTab from "../tabs/WikiListTab.vue";
 
 const sectionButtonRefs = ref([]);
 
 const store = useStore();
 type SectionMode = typeof store.stockSectionMode;
 
-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">
-            {{ $t('preview.loading') }}
+          <div
+            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.maxSpeed }} km/h
+            {{ store.chosenVehicle.length }}m | {{ store.chosenVehicle.mass }}t
+            | {{ 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 { useStore } from '../../store';
-import { isLocomotive } from '../../utils/vehicleUtils';
-import { ILocomotive, Vehicle } from '../../types';
+import { computed, defineComponent } from "vue";
+import { useStore } from "../../store";
+import { isLocomotive } from "../../utils/vehicleUtils";
+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>
-