Migracja na Vite

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <header>
-    <img :src="logoSVG" alt="logo pojazdownik" />
+    <img :src="logoImage" alt="logo pojazdownik" />
   </header>
 
   <main>
@@ -8,8 +8,8 @@
       <img :src="store.vehiclePreviewSrc" alt="preview" />
     </div>
 
-    <inputs-section />
-    <list-section />
+    <InputsSection />
+    <ListSection />
   </main>
   <footer>
     <div class="text--grayed" style="margin-bottom: 0.25em">
@@ -27,26 +27,27 @@ import packageInfo from '.././package.json';
 
 import { defineComponent, inject } from 'vue';
 
-import ListSection from '@/components/ListSection.vue';
-import InputsSection from '@/components/InputsSection.vue';
 import { IStore } from './types';
+import InputsSection from './components/InputsSection.vue';
+import ListSection from './components/ListSection.vue';
+
+import logoImage from './assets/logo.svg';
 
 export default defineComponent({
   components: {
     ListSection,
     InputsSection,
   },
+
   data: () => ({
     VERSION: packageInfo.version,
 
-    logoSVG: require('@/assets/logo.svg'),
+    logoImage,
   }),
 
   setup() {
     const store = inject('Store') as IStore;
 
-    // const readyStockJSON = await (await fetch('https://spythere.github.io/api/readyStock.json')).json();
-
     return {
       store,
     };
@@ -173,3 +174,4 @@ footer {
   }
 }
 </style>
+

src/components/InputsSection.vue

@@ -2,134 +2,57 @@
   <section class="inputs">
     <div class="input inputs_loco">
       <div class="input_container">
-        <h2 class="input_header">LOKOMOTYWA / ZESP. TRAKCYJNY</h2>
-        <div class="input_radio">
-          <button
-            v-for="label in locoLabels"
-            :key="label.id"
-            @click="onLocoPowerChange(label.id)"
-            :class="{ checked: store.chosenLocoPower == label.id }"
-            data-ignore-outside="1"
-          >
-            {{ label.title }}
-          </button>
-        </div>
+        <h2 class="input_header">WYBIERZ POJAZDY / WAGONY</h2>
 
         <div class="input_list type">
-          <select
-            id="loco-select"
-            ref="loco-select"
-            v-model="store.chosenLoco"
-            @change="onLocoTypeChange"
-            data-select="loco"
-            data-ignore-outside="1"
-          >
-            <option :value="null" disabled>Wybierz pojazd z listy</option>
+          <select id="locomotives-list" v-model="store.chosenLoco">
+            <option :value="null" disabled>Wybierz pojazd trakcyjny</option>
             <option v-for="loco in locoOptions" :value="loco" :key="loco.type">
-              {{ loco.supportersOnly ? '*W*' : '' }}
               {{ loco.type }}
             </option>
           </select>
 
-          <button class="btn--add" @click="addVehicle" title="Dodaj pojazd">
-            <img :src="icons.add" alt="add vehicle" data-ignore-outside="1" />
-          </button>
+          <button class="btn" @click="addVehicle" title="Dodaj pojazd">DODAJ</button>
+        </div>
 
-          <!-- <button class="btn--swap" @click="prepareSwapVehicles" title="Zamień pojazdy">
-            <img :src="icons.swap" alt="swap vehicle" />
-          </button> -->
+        <div class="input_list type">
+          <select id="carwagons-list" v-model="store.chosenCar">
+            <option :value="null" disabled>Wybierz wagon</option>
+
+            <option v-for="car in carOptions" :value="car" :key="car.type">
+              {{ car.type }}
+            </option>
+          </select>
         </div>
 
         <div class="input_ready-stock">
           <button class="btn" @click="setReadyStockList(true)"><b>REALNE ZESTAWIENIA</b></button>
           <ready-stock-list />
         </div>
-
-        <div class="input_checkbox">
-          <!-- <button @click="onShowSupporterChange" :class="{ checked: this.store.showSupporter }" data-ignore-outside="1">
-            Pokaż tylko pojazdy dla weteranów
-          </button> -->
-        </div>
-      </div>
-    </div>
-
-    <div class="spacer"></div>
-
-    <div class="input inputs_car">
-      <div class="input_container">
-        <h2 class="input_header">RODZAJ WAGONU</h2>
-        <div class="input_radio">
-          <button
-            v-for="label in carLabels"
-            :key="label.id"
-            @click="onCarUseTypeChange(label.id)"
-            :class="{ checked: store.chosenCarUseType == label.id }"
-            data-ignore-outside="1"
-          >
-            {{ label.title }}
-          </button>
-        </div>
-
-        <div class="input_list type">
-          <select
-            id="car-select"
-            ref="car-select"
-            v-model="store.chosenCar"
-            @change="onCarTypeChange"
-            data-select="car"
-            data-ignore-outside="1"
-          >
-            <option :value="null" disabled>Wybierz wagon z listy</option>
-            <option v-for="car in carOptions" :value="car" :key="car.type">
-              {{ car.supportersOnly ? '*W*' : '' }}
-              {{ car.type }}
-            </option>
-          </select>
-
-          <button class="btn--add" @click="addVehicle" title="Dodaj pojazd">
-            <img :src="icons.add" alt="add vehicle" data-ignore-outside="1" />
-          </button>
-
-          <!-- <button class="btn--swap" @click="prepareSwapVehicles" title="Zamień pojazdy">
-            <img :src="icons.swap" alt="swap vehicle" />
-          </button> -->
-        </div>
-
-        <div class="input_list cargo">
-          <select
-            id="cargo-select"
-            :disabled="
-              (store.chosenCar && !store.chosenCar.loadable) ||
-              (store.chosenCar && store.chosenCar.useType == 'car-passenger') ||
-              !store.chosenCar
-            "
-            data-select="cargo"
-            data-ignore-outside="1"
-            v-model="store.chosenCargo"
-          >
-            <option :value="null" v-if="!store.chosenCar || !store.chosenCar.loadable">brak dostępnych ładunków</option>
-            <option :value="null" v-else>próżny</option>
-
-            <option v-for="cargo in store.chosenCar?.cargoList" :value="cargo" :key="cargo.id">
-              {{ cargo.id }}
-            </option>
-          </select>
-        </div>
       </div>
     </div>
   </section>
 </template>
 
 <script lang="ts">
-import { ICarWagon, ILocomotive, IStore } from '@/types';
 import { defineComponent, inject, provide, ref } from 'vue';
 
-import ReadyStockList from '@/components/ReadyStockList.vue';
+import ReadyStockList from './ReadyStockList.vue';
+import { IStore, ILocomotive, ICarWagon } from '../types';
+import imageMixin from '../mixins/imageMixin';
 
 export default defineComponent({
   components: {
     ReadyStockList,
   },
+
+  mixins: [imageMixin],
+
+  data: () => ({
+    chosenLocomotiveType: '',
+    chosenCarWagonType: '',
+  }),
+
   setup() {
     const store = inject('Store') as IStore;
 
@@ -167,70 +90,16 @@ export default defineComponent({
         if (lastStock.count > 1) lastStock.count--;
         else this.store.stockList.splice(-1);
       }
-
-      // if (keyName == 'arrowdown') {
-      //   const chosenVehicle = this.store.chosenCar || this.store.chosenLoco;
-
-      //   if(!chosenVehicle) return;
-
-      //   ev.preventDefault();
-
-      // }
     });
-
-    this.onLocoPowerChange('loco-e');
-    this.onCarUseTypeChange('car-passenger');
   },
 
-  data: () => ({
-    icons: {
-      add: require('@/assets/add-icon.svg'),
-      swap: require('@/assets/swap-icon.svg'),
-    },
-    locoLabels: [
-      {
-        id: 'loco-e',
-        title: 'ELEKTROWÓZ',
-      },
-      {
-        id: 'loco-s',
-        title: 'SPALINOWÓZ',
-      },
-      {
-        id: 'loco-ezt',
-        title: 'EZT',
-      },
-      {
-        id: 'loco-szt',
-        title: 'SZT',
-      },
-    ],
-
-    carLabels: [
-      {
-        id: 'car-passenger',
-        title: 'PASAŻERSKI',
-      },
-      {
-        id: 'car-cargo',
-        title: 'TOWAROWY',
-      },
-    ],
-  }),
-
   computed: {
     locoOptions() {
-      return this.locoDataList
-        .filter((loco) => loco.power == this.store.chosenLocoPower)
-        .sort((a, b) => (a.type > b.type ? 1 : -1))
-        .sort((a) => (a.supportersOnly ? 1 : -1));
+      return this.locoDataList.sort((a, b) => (a.type > b.type ? 1 : -1)).sort((a) => (a.supportersOnly ? 1 : -1));
     },
 
     carOptions() {
-      return this.carDataList
-        .filter((car) => car.useType == this.store.chosenCarUseType)
-        .sort((a, b) => (a.type > b.type ? 1 : -1))
-        .sort((a) => (a.supportersOnly ? 1 : -1));
+      return this.carDataList.sort((a, b) => (a.type > b.type ? 1 : -1)).sort((a) => (a.supportersOnly ? 1 : -1));
     },
   },
 
@@ -243,57 +112,6 @@ export default defineComponent({
       this.isReadyStockListOpen = bool;
     },
 
-    onShowSupporterChange() {
-      this.store.showSupporter = !this.store.showSupporter;
-
-      if (this.store.showSupporter) {
-        const chosenVehicle = this.store.chosenCar || this.store.chosenLoco;
-
-        if (!chosenVehicle) return;
-
-        if (!chosenVehicle.supportersOnly) {
-          this.store.chosenCar = null;
-          this.store.chosenLoco = null;
-        }
-      }
-    },
-
-    onLocoPowerChange(inputId: string) {
-      this.store.chosenLoco = null;
-      this.store.imageLoading = false;
-
-      this.store.chosenLocoPower = inputId;
-      // this.store.chosenStockListIndex = -1;
-
-      (this.$refs['loco-select'] as HTMLElement).focus();
-    },
-
-    onCarUseTypeChange(inputId: string) {
-      this.store.chosenCar = null;
-      this.store.imageLoading = false;
-
-      this.store.chosenCarUseType = inputId;
-      // this.store.chosenStockListIndex = -1;
-
-      if (inputId == 'car-passenger') this.store.chosenCargo = null;
-    },
-
-    onCarTypeChange() {
-      this.store.chosenCargo = null;
-      this.store.chosenLoco = null;
-      // this.store.chosenStockListIndex = -1;
-
-      this.store.imageLoading = true;
-    },
-
-    onLocoTypeChange() {
-      this.store.chosenCargo = null;
-      this.store.chosenCar = null;
-      // this.store.chosenStockListIndex = -1
-
-      this.store.imageLoading = true;
-    },
-
     addVehicle() {
       const vehicle = this.store.chosenCar || this.store.chosenLoco;
 
@@ -495,3 +313,4 @@ export default defineComponent({
   }
 }
 </style>
+

src/components/ListSection.vue

@@ -48,7 +48,10 @@
 
         <div class="warning" v-if="warnings.trainTooHeavy.value">
           Ten skład jest za ciężki! Sprawdź
-          <a target="_blank" href="https://docs.google.com/spreadsheets/d/1bFXUsHsAu4youmNz-46Q1HslZaaoklvfoBDS553TnNk/edit">
+          <a
+            target="_blank"
+            href="https://docs.google.com/spreadsheets/d/1bFXUsHsAu4youmNz-46Q1HslZaaoklvfoBDS553TnNk/edit"
+          >
             dopuszczalne masy składów
           </a>
         </div>
@@ -119,11 +122,16 @@
 
 <script lang="ts">
 import { computed, ComputedRef, defineComponent, inject, provide, reactive, ref } from 'vue';
-import { ICarWagon, ILocomotive, IStore } from '@/types';
+import { IStore, ILocomotive, ICarWagon } from '../types';
 import RandomizerCard from './RandomizerCard.vue';
-
 import TrainImage from './TrainImage.vue';
 
+import addIcon from '../assets/add-icon.svg';
+import subIcon from '../assets/sub-icon.svg';
+import removeIcon from '../assets/remove-icon.svg';
+import lowerIcon from '../assets/lower-icon.svg';
+import higherIcon from '../assets/higher-icon.svg';
+
 export default defineComponent({
   components: { RandomizerCard, TrainImage },
 
@@ -184,11 +192,11 @@ export default defineComponent({
 
   data: () => ({
     icons: {
-      add: require('@/assets/add-icon.svg'),
-      sub: require('@/assets/sub-icon.svg'),
-      remove: require('@/assets/remove-icon.svg'),
-      lower: require('@/assets/lower-icon.svg'),
-      higher: require('@/assets/higher-icon.svg'),
+      add: addIcon,
+      sub: subIcon,
+      remove: removeIcon,
+      lower: lowerIcon,
+      higher: higherIcon,
     },
 
     imageOffsetY: 0,
@@ -591,3 +599,4 @@ export default defineComponent({
   }
 }
 </style>
+

src/components/RandomizerCard.vue

@@ -88,10 +88,12 @@
 </template>
 
 <script lang="ts">
-import { ICargo, ICarWagon, ILocomotive, IStore } from '@/types';
 import { ComputedRef, defineComponent, inject } from 'vue';
 
-import carUsage from '@/data/carUsage.json';
+import carUsage from '../data/carUsage.json';
+import { IStore, ICarWagon, ILocomotive, ICargo } from '../types';
+
+import randomizeIcon from '../assets/randomize-icon.svg';
 
 export default defineComponent({
   setup() {
@@ -126,7 +128,7 @@ export default defineComponent({
 
   data: () => ({
     icons: {
-      randomize: require('@/assets/randomize-icon.svg'),
+      randomize: randomizeIcon,
     },
 
     focusedCar: null as ICarWagon | null,
@@ -456,3 +458,4 @@ button.chosen {
   }
 }
 </style>
+

src/components/ReadyStockList.vue

@@ -38,8 +38,12 @@
 </template>
 
 <script lang="ts">
-import { ICarWagon, ILocomotive, IStore } from '@/types';
 import { defineComponent, inject } from 'vue';
+import { IStore, ILocomotive, ICarWagon } from '../types';
+
+import iconEIC from '../assets/EIC.png';
+import iconIC from '../assets/IC.svg';
+import iconTLK from '../assets/TLK.png';
 
 interface ReadyStockList {
   [key: string]: { stockString: string; type: string; number: string; name: string };
@@ -68,9 +72,9 @@ export default defineComponent({
     searchedReadyStockName: '',
 
     icons: {
-      EIC: require('@/assets/EIC.png'),
-      IC: require('@/assets/IC.svg'),
-      TLK: require('@/assets/TLK.png'),
+      EIC: iconEIC,
+      IC: iconIC,
+      TLK: iconTLK,
     } as { [key: string]: string },
   }),
 
@@ -90,6 +94,10 @@ export default defineComponent({
   },
 
   methods: {
+    getImageUrl(name: string) {
+      return new URL(`./dir/${name}.png`, import.meta.url).href;
+    },
+
     exit() {
       this.isOpen = false;
     },
@@ -296,3 +304,4 @@ input {
   }
 }
 </style>
+

src/components/TrainImage.vue

@@ -47,9 +47,9 @@
 </template>
 
 <script lang="ts">
-import carUsage from '@/data/carUsage.json';
-import { IStore } from '@/types';
+import carUsage from '../data/carUsage.json';
 import { defineComponent, inject } from 'vue';
+import { IStore } from '../types';
 
 export default defineComponent({
   setup() {

src/main.ts

@@ -17,7 +17,6 @@ const clickOutsideDirective: Directive = {
 
 }
 
-
 createApp(App)
     .provide('Store', Store)
     .provide('isLocomotive', isLocomotive)

src/mixins/imageMixin.ts

@@ -0,0 +1,9 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  methods: {
+    getIcon(name: string) {
+      return new URL(`./assets/${name}.svg`, import.meta.url).href;
+    },
+  },
+});

src/store.ts

@@ -2,8 +2,8 @@
 import { ICargo, ICarWagon, ILocomotive, IStock, IStore, IVehicleData } from "./types";
 import { reactive } from "@vue/reactivity";
 
-import vehicleDataJSON from "@/data/vehicleData.json";
-import vehiclePropsJSON from "@/data/vehicleProps.json";
+import vehicleDataJSON from "./data/vehicleData.json";
+import vehiclePropsJSON from "./data/vehicleProps.json";
 import { EVehicleUseType } from "./enums/EVehicleUseType";
 import { computed } from "vue";
 

src/utils/statsUtils.ts

@@ -1,5 +1,5 @@
-import { EVehicleUseType } from "@/enums/EVehicleUseType";
-import { ICarWagon, ILocomotive, IStock } from "@/types";
+import { EVehicleUseType } from "../enums/EVehicleUseType";
+import { IStock } from "../types";
 
 export const verifyTrainSpec = (stockList: IStock[], vehicleMass: number, vehicleUseType: string) => {
     const hasHeadLoco = stockList.length > 0

src/vite-env.d.ts

@@ -1,4 +1,5 @@
-/* eslint-disable */
+/// <reference types="vite/client" />
+
 declare module '*.vue' {
   import type { DefineComponent } from 'vue'
   const component: DefineComponent<{}, {}, any>