Migracja store'a

src/components/InputsSection.vue

@@ -38,8 +38,10 @@
 import { defineComponent, inject, provide, ref } from 'vue';
 
 import ReadyStockList from './ReadyStockList.vue';
-import { IStore, ILocomotive, ICarWagon } from '../types';
+import { IStore, ILocomotive, ICarWagon, IStock } from '../types';
 import imageMixin from '../mixins/imageMixin';
+import { useStore } from '../store';
+import { isLocomotive } from '../utils/vehicleUtils';
 
 export default defineComponent({
   components: {
@@ -54,7 +56,7 @@ export default defineComponent({
   }),
 
   setup() {
-    const store = inject('Store') as IStore;
+    const store = useStore();
 
     const isReadyStockListOpen = ref(false);
 
@@ -63,14 +65,6 @@ export default defineComponent({
     return {
       store,
       isReadyStockListOpen,
-      locoDataList: inject('locoDataList') as ILocomotive[],
-      carDataList: inject('carDataList') as ICarWagon[],
-      isTrainPassenger: inject('isTrainPassenger') as boolean,
-      totalLength: inject('totalLength') as number,
-      totalMass: inject('totalMass') as number,
-      maxStockSpeed: inject('maxStockSpeed') as number,
-      maxAllowedSpeed: inject('maxAllowedSpeed') as number,
-      isLocomotive: inject('isLocomotive') as (vehicle: ILocomotive | ICarWagon) => vehicle is ILocomotive,
     };
   },
 
@@ -95,11 +89,13 @@ export default defineComponent({
 
   computed: {
     locoOptions() {
-      return this.locoDataList.sort((a, b) => (a.type > b.type ? 1 : -1)).sort((a) => (a.supportersOnly ? 1 : -1));
+      return this.store.locoDataList
+        .sort((a, b) => (a.type > b.type ? 1 : -1))
+        .sort((a) => (a.supportersOnly ? 1 : -1));
     },
 
     carOptions() {
-      return this.carDataList.sort((a, b) => (a.type > b.type ? 1 : -1)).sort((a) => (a.supportersOnly ? 1 : -1));
+      return this.store.carDataList.sort((a, b) => (a.type > b.type ? 1 : -1)).sort((a) => (a.supportersOnly ? 1 : -1));
     },
   },
 
@@ -117,32 +113,30 @@ export default defineComponent({
 
       if (!vehicle) return;
 
-      const stockObj = {
+      const stockObj: IStock = {
+        useType: isLocomotive(vehicle) ? vehicle.power : vehicle.useType,
         type: vehicle.type,
         length: vehicle.length,
         mass: vehicle.mass,
         maxSpeed: vehicle.maxSpeed,
-        isLoco: this.isLocomotive(vehicle),
+        isLoco: isLocomotive(vehicle),
         cargo:
-          !this.isLocomotive(vehicle) && vehicle.loadable && this.store.chosenCargo
-            ? this.store.chosenCargo
-            : undefined,
+          !isLocomotive(vehicle) && vehicle.loadable && this.store.chosenCargo ? this.store.chosenCargo : undefined,
         count: 1,
         imgSrc: vehicle.imageSrc,
-        useType: this.isLocomotive(vehicle) ? vehicle.power : vehicle.useType,
         supportersOnly: vehicle.supportersOnly,
       };
 
       if (this.store.chosenStockListIndex != -1) {
         let currentStock = this.store.stockList[this.store.chosenStockListIndex];
 
-        if (this.isLocomotive(vehicle) && currentStock && currentStock.type == vehicle.type) {
+        if (isLocomotive(vehicle) && currentStock && currentStock.type == vehicle.type) {
           this.store.stockList[this.store.chosenStockListIndex].count++;
           return;
         }
 
         if (
-          !this.isLocomotive(vehicle) &&
+          !isLocomotive(vehicle) &&
           currentStock &&
           currentStock.type == vehicle.type &&
           currentStock.cargo?.id == this.store.chosenCargo?.id
@@ -159,13 +153,13 @@ export default defineComponent({
       const previousStock =
         this.store.stockList.length > 0 ? this.store.stockList[this.store.stockList.length - 1] : null;
 
-      if (this.isLocomotive(vehicle) && previousStock && previousStock.type == vehicle.type) {
+      if (isLocomotive(vehicle) && previousStock && previousStock.type == vehicle.type) {
         this.store.stockList[this.store.stockList.length - 1].count++;
         return;
       }
 
       if (
-        !this.isLocomotive(vehicle) &&
+        !isLocomotive(vehicle) &&
         previousStock &&
         previousStock.type == vehicle.type &&
         previousStock.cargo?.id == this.store.chosenCargo?.id
@@ -175,7 +169,7 @@ export default defineComponent({
         return;
       }
 
-      if (this.isLocomotive(vehicle) && this.store.stockList.length > 0 && !this.store.stockList[0].isLoco)
+      if (isLocomotive(vehicle) && this.store.stockList.length > 0 && !this.store.stockList[0].isLoco)
         this.store.stockList.unshift(stockObj);
       else this.store.stockList.push(stockObj);
     },

src/components/ListSection.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="bottom">
-    <div class="bg-dimmer" v-if="isRandomizerCardOpen"></div>
+    <div class="bg-dimmer" v-if="store.isRandomizerCardOpen"></div>
 
     <train-image />
 
@@ -12,18 +12,18 @@
         <button class="btn" @click="resetStock">ZRESETUJ LISTĘ</button>
         <span></span>
         <button class="btn" @click="shuffleCars">TASUJ WAGONY</button>
-        <button class="btn" @click="openRandomizerCard">LOSUJ SKŁAD</button>
+        <button class="btn" @click="store.isRandomizerCardOpen = true">LOSUJ SKŁAD</button>
 
         <transition name="card-anim">
-          <randomizer-card v-if="isRandomizerCardOpen" />
+          <randomizer-card v-if="store.isRandomizerCardOpen" />
         </transition>
       </div>
 
       <div class="stock-list_specs">
         <div>
-          Masa: <span class="text--accent">{{ totalMass }}t</span> | Długość:
-          <span class="text--accent">{{ totalLength }}m</span>
-          | Vmax pociągu: <span class="text--accent">{{ maxStockSpeed }} km/h</span>
+          Masa: <span class="text--accent">{{ store.totalMass }}t</span> | Długość:
+          <span class="text--accent">{{ store.totalLength }}m</span>
+          | Vmax pociągu: <span class="text--accent">{{ store.maxStockSpeed }} km/h</span>
         </div>
 
         <!-- <div v-if="store.chosenRealStockName" style="margin-top: 0.25rem">
@@ -37,7 +37,7 @@
         </button>
       </div>
 
-      <div class="warnings">
+      <!-- <div class="warnings">
         <div class="warning" v-if="warnings.locoNotSuitable.value">
           Lokomotywy EP07 i EP08 są przeznaczone jedynie do ruchu pasażerskiego!
         </div>
@@ -57,7 +57,7 @@
         </div>
 
         <div class="warning" v-if="warnings.tooManyLocos.value">Ten skład posiada za dużo pojazdów trakcyjnych!</div>
-      </div>
+      </div> -->
 
       <ul ref="list" data-ignore-outside="1">
         <li v-if="store.stockList.length == 0" class="list-empty">
@@ -131,42 +131,16 @@ 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';
+import { useStore } from '../store';
 
 export default defineComponent({
   components: { RandomizerCard, TrainImage },
 
   setup() {
-    const store = inject('Store') as IStore;
-
-    const isRandomizerCardOpen = ref(false);
-
-    provide('isCardOpen', isRandomizerCardOpen);
-    provide('chosenLength', ref(350));
-    provide('chosenMass', ref(1000));
-    provide('chosenLocoType', ref('loco-e'));
-    provide('chosenCarTypes', reactive([]));
-    provide('includeSupporterVehicles', ref(false));
+    const store = useStore();
 
     return {
       store,
-      locoDataList: inject('locoDataList') as ILocomotive[],
-      carDataList: inject('carDataList') as ICarWagon[],
-      isTrainPassenger: inject('isTrainPassenger') as boolean,
-      totalLength: inject('totalLength') as number,
-      totalMass: inject('totalMass') as number,
-      maxStockSpeed: inject('maxStockSpeed') as number,
-      maxAllowedSpeed: inject('maxAllowedSpeed') as number,
-
-      warnings: inject('warnings') as {
-        locoNotSuitable: ComputedRef<boolean>;
-        trainTooLong: ComputedRef<boolean>;
-        trainTooHeavy: ComputedRef<boolean>;
-        tooManyLocos: ComputedRef<boolean>;
-      },
-
-      isRandomizerCardOpen,
-
-      hasSupporterOnlyVehicle: computed(() => store.stockList.some((stock) => stock.supportersOnly)),
     };
   },
 
@@ -221,10 +195,10 @@ export default defineComponent({
 
   methods: {
     copyToClipboard() {
-      if (Object.values(this.warnings).some((v) => v.value == true)) {
-        alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
-        return;
-      }
+      // if (Object.values(this.warnings).some((v) => v.value == true)) {
+      //   alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
+      //   return;
+      // }
 
       navigator.clipboard.writeText(this.stockString);
 
@@ -247,7 +221,7 @@ export default defineComponent({
       if (vehicle.isLoco) {
         this.store.chosenLocoPower = vehicle.useType;
 
-        this.store.chosenLoco = this.locoDataList.find((v) => v.type == vehicle.type) || null;
+        this.store.chosenLoco = this.store.locoDataList.find((v) => v.type == vehicle.type) || null;
 
         this.store.chosenCar = null;
         this.store.chosenCargo = null;
@@ -255,7 +229,7 @@ export default defineComponent({
         this.store.chosenCarUseType = vehicle.useType;
 
         this.store.chosenLoco = null;
-        this.store.chosenCar = this.carDataList.find((v) => v.type == vehicle.type) || null;
+        this.store.chosenCar = this.store.carDataList.find((v) => v.type == vehicle.type) || null;
         this.store.chosenCargo = vehicle.cargo || null;
       }
 
@@ -333,15 +307,11 @@ export default defineComponent({
       }
     },
 
-    openRandomizerCard() {
-      this.isRandomizerCardOpen = true;
-    },
-
     downloadStock() {
-      if (Object.values(this.warnings).some((v) => v.value == true)) {
-        alert('Jazda tym pociągiem może być niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
-        return;
-      }
+      // if (Object.values(this.warnings).some((v) => v.value == true)) {
+      //   alert('Jazda tym pociągiem może być niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
+      //   return;
+      // }
 
       const fileName = prompt('Nazwij plik:', 'pociag');
 

src/components/RandomizerCard.vue

@@ -57,7 +57,7 @@
         <p>Wybierz preferowaną długość składu (m) i (opcjonalnie) max. masę (t)</p>
         <input
           type="number"
-          v-model="chosenLength"
+          v-model="randomStockLength"
           name="length"
           max="650"
           min="20"
@@ -66,8 +66,8 @@
         />
         <input
           type="number"
-          v-model="chosenMass"
-          name="length"
+          v-model="randomStockMass"
+          name="mass"
           max="4000"
           min="100"
           step="100"
@@ -82,34 +82,30 @@
       </div>
 
       <button class="btn" style="font-size: 1.15em; margin-top: 2em" @click="randomize">LOSUJ SKŁAD!</button>
-      <button class="btn" style="font-size: 1.15em; margin-top: 2em" @click="closeCard">ZAMKNIJ</button>
+      <button class="btn" style="font-size: 1.15em; margin-top: 2em" @click="store.isRandomizerCardOpen = false">
+        ZAMKNIJ
+      </button>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { ComputedRef, defineComponent, inject } from 'vue';
+import { defineComponent, inject } from 'vue';
 
 import carUsage from '../data/carUsage.json';
-import { IStore, ICarWagon, ILocomotive, ICargo } from '../types';
+import { ICarWagon, ILocomotive, ICargo } from '../types';
 
 import randomizeIcon from '../assets/randomize-icon.svg';
+import { useStore } from '../store';
 
 export default defineComponent({
   setup() {
-    const isCardOpen = inject('isCardOpen') as boolean;
-    const store = inject('Store') as IStore;
-
-    const carDataList = inject('carDataList') as ComputedRef<ICarWagon[]>;
+    const store = useStore();
 
     return {
-      isCardOpen,
       store,
-      locoDataList: inject('locoDataList') as ILocomotive[],
-      chosenLength: inject('chosenLength') as number,
-      chosenMass: inject('chosenMass') as number,
-      carDataList,
-      carTypeList: carDataList.value.reduce((list, car) => {
+
+      carTypeList: store.carDataList.reduce((list, car) => {
         const type = car.type.split('_')[0];
 
         if (list.includes(type)) return list;
@@ -119,14 +115,15 @@ export default defineComponent({
         return list;
       }, [] as string[]),
 
-      chosenLocoType: inject('chosenLocoType') as string,
-      chosenCarTypes: inject('chosenCarTypes') as string[],
-
       includeSupporterVehicles: inject('includeSupporterVehicles') as boolean,
     };
   },
 
   data: () => ({
+    randomStockMass: 1500,
+    randomStockLength: 650,
+    chosenCarTypes: [] as string[],
+
     icons: {
       randomize: randomizeIcon,
     },
@@ -160,12 +157,8 @@ export default defineComponent({
   }),
 
   methods: {
-    closeCard() {
-      this.isCardOpen = false;
-    },
-
     displayPreview(carType: string) {
-      const list = this.carDataList.filter((car) => car.type.includes(carType));
+      const list = this.store.carDataList.filter((car) => car.type.includes(carType));
       const randIndex = Math.floor(Math.random() * list.length);
 
       if (this.focusedCar?.type == list[randIndex].type) return;
@@ -188,17 +181,17 @@ export default defineComponent({
         return;
       }
 
-      if (this.chosenLength <= 20) {
+      if (this.randomStockLength <= 20) {
         alert('Długość składu musi być większa niż 20m!');
         return;
       }
 
-      if (this.chosenMass <= 100) {
+      if (this.randomStockMass <= 100) {
         alert('Masa składu musi być większa niż 100t!');
         return;
       }
 
-      if (this.chosenLength > 650) {
+      if (this.randomStockLength > 650) {
         alert('Długość składu nie może przekraczać 650m dla pociągów towarowych!');
         return;
       }
@@ -209,7 +202,7 @@ export default defineComponent({
       if (this.store.stockList.length == 0 || !this.store.stockList[0].isLoco) {
         this.store.stockList.length = 0;
 
-        let locoSet = this.locoDataList
+        let locoSet = this.store.locoDataList
           .filter((loco) => loco.power == 'loco-e' || loco.power == 'loco-s')
           .filter((loco) => (!this.includeSupporterVehicles && loco.supportersOnly ? false : true));
 
@@ -224,7 +217,7 @@ export default defineComponent({
       totalStockLength += this.store.stockList[0].length;
       totalStockMass += this.store.stockList[0].mass;
 
-      let availableCarsSet = this.carDataList.filter((cargoCar) => {
+      let availableCarsSet = this.store.carDataList.filter((cargoCar) => {
         if (!this.includeSupporterVehicles && cargoCar.supportersOnly) return false;
 
         if (this.chosenCarTypes.find((carType) => cargoCar.type.includes(carType))) return true;
@@ -232,7 +225,7 @@ export default defineComponent({
         return false;
       });
 
-      while (totalStockLength < this.chosenLength && totalStockMass < this.chosenMass) {
+      while (totalStockLength < this.randomStockLength && totalStockMass < this.randomStockMass) {
         const randCarIndex = Math.floor(Math.random() * availableCarsSet.length);
 
         const randCar = availableCarsSet[randCarIndex];
@@ -240,14 +233,14 @@ export default defineComponent({
         // const count = Math.random() < 0.25 ? Math.floor(Math.random() * 2) + 1 : 1;
         const count = 1;
 
-        if (randCar.length * count + totalStockLength >= this.chosenLength) break;
+        if (randCar.length * count + totalStockLength >= this.randomStockLength) break;
 
         let randCargo = undefined;
         let randNum = this.loadableByDefault ? 1 : Math.random();
         if (randCar.cargoList.length != 0 && randNum >= 0.6)
           randCargo = randCar.cargoList[Math.floor(Math.random() * randCar.cargoList.length)];
 
-        if ((randCargo?.totalMass || randCar.mass) * count + totalStockMass >= this.chosenMass) break;
+        if ((randCargo?.totalMass || randCar.mass) * count + totalStockMass >= this.randomStockMass) break;
 
         for (let i = 0; i < count; i++) this.addCar(randCar, randCargo);
 
@@ -255,7 +248,7 @@ export default defineComponent({
         totalStockMass += randCargo?.totalMass || randCar.mass;
       }
 
-      this.isCardOpen = false;
+      this.store.isRandomizerCardOpen = false;
     },
 
     toggleCarType(carType: string) {

src/components/ReadyStockList.vue

@@ -44,6 +44,8 @@ import { IStore, ILocomotive, ICarWagon } from '../types';
 import iconEIC from '../assets/EIC.png';
 import iconIC from '../assets/IC.svg';
 import iconTLK from '../assets/TLK.png';
+import { useStore } from '../store';
+import { isLocomotive } from '../utils/vehicleUtils';
 
 interface ReadyStockList {
   [key: string]: { stockString: string; type: string; number: string; name: string };
@@ -56,17 +58,14 @@ interface ResponseJSONData {
 export default defineComponent({
   setup() {
     return {
-      isOpen: inject('isReadyStockListOpen'),
-      store: inject('Store') as IStore,
-      locoDataList: inject('locoDataList') as ILocomotive[],
-      carDataList: inject('carDataList') as ICarWagon[],
-      isLocomotive: inject('isLocomotive') as (vehicle: ILocomotive | ICarWagon) => vehicle is ILocomotive,
+      store: useStore(),
     };
   },
 
   data: () => ({
     responseStatus: 'loading',
     isMobile: 'ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/) ? true : false,
+    isOpen: false,
 
     readyStockList: {} as ReadyStockList,
     searchedReadyStockName: '',
@@ -129,8 +128,8 @@ export default defineComponent({
 
       stockArray.forEach((type, i) => {
         let vehicle;
-        if (i == 0) vehicle = this.locoDataList.find((loco) => loco.type == stockArray[0]);
-        else vehicle = this.carDataList.find((car) => car.type == type);
+        if (i == 0) vehicle = this.store.locoDataList.find((loco) => loco.type == stockArray[0]);
+        else vehicle = this.store.carDataList.find((car) => car.type == type);
 
         this.addVehicle(vehicle);
       });
@@ -146,11 +145,11 @@ export default defineComponent({
         length: vehicle.length,
         mass: vehicle.mass,
         maxSpeed: vehicle.maxSpeed,
-        isLoco: this.isLocomotive(vehicle),
+        isLoco: isLocomotive(vehicle),
         cargo: undefined,
         count: 1,
         imgSrc: vehicle.imageSrc,
-        useType: this.isLocomotive(vehicle) ? vehicle.power : vehicle.useType,
+        useType: isLocomotive(vehicle) ? vehicle.power : vehicle.useType,
         supportersOnly: vehicle.supportersOnly,
       };
 

src/components/TrainImage.vue

@@ -24,7 +24,7 @@
 
       <div style="color: #ccc">
         <b>{{ vehicleTypes[store.chosenLoco?.power || store.chosenCar?.useType || 'loco-e'] }}</b>
-        
+
         <div>
           {{ (store.chosenCar || store.chosenLoco)?.length }}m | {{ (store.chosenCar || store.chosenLoco)?.mass }}t |
           {{ (store.chosenCar || store.chosenLoco)?.maxSpeed }} km/h
@@ -48,12 +48,12 @@
 
 <script lang="ts">
 import carUsage from '../data/carUsage.json';
-import { defineComponent, inject } from 'vue';
-import { IStore } from '../types';
+import { defineComponent } from 'vue';
+import { useStore } from '../store';
 
 export default defineComponent({
   setup() {
-    const store = inject('Store') as IStore;
+    const store = useStore();
 
     return {
       store,
@@ -161,3 +161,4 @@ export default defineComponent({
   }
 }
 </style>
+