diff --git a/src/App.vue b/src/App.vue index baecdbd..7cf18aa 100644 --- a/src/App.vue +++ b/src/App.vue @@ -161,6 +161,7 @@ main { grid-template-rows: auto 360px minmax(400px, 1fr); padding: 0 1em; + margin-bottom: 2em; } /* FOOTER SECTION */ diff --git a/src/components/InputsSection.vue b/src/components/InputsSection.vue index a0a065f..7627fb3 100644 --- a/src/components/InputsSection.vue +++ b/src/components/InputsSection.vue @@ -18,8 +18,8 @@ @@ -70,8 +70,8 @@ data-select="cargo" data-ignore-outside="1" v-model="store.chosenCargo" - @focus="onVehicleSelect('cargo')" - @change="onVehicleSelect('cargo')" + @focus="previewVehicleByType('cargo')" + @change="previewVehicleByType('cargo')" @keydown.enter.prevent="addOrSwitchVehicle" @keydown.backspace="removeVehicle" > @@ -111,6 +111,7 @@ import { IStock } from '../types'; import imageMixin from '../mixins/imageMixin'; import { useStore } from '../store'; import { isLocomotive } from '../utils/vehicleUtils'; +import stockPreviewMixin from '../mixins/stockPreviewMixin'; interface ILocoType { id: string; @@ -119,7 +120,7 @@ interface ILocoType { } export default defineComponent({ - mixins: [imageMixin], + mixins: [imageMixin, stockPreviewMixin], data: () => ({ locomotiveTypeList: [ @@ -167,49 +168,11 @@ export default defineComponent({ }; }, - computed: { - locoOptions() { - return this.store.locoDataList - .sort((a, b) => (a.type > b.type ? 1 : -1)) - .filter((loco) => loco.power == this.store.chosenLocoPower); - }, - - carOptions() { - return this.store.carDataList - .sort((a, b) => (a.type > b.type ? 1 : -1)) - .filter((car) => car.useType == this.store.chosenCarUseType); - }, - }, - methods: { - selectLocoType(locoTypeId: string) { - this.store.chosenLocoPower = locoTypeId; - this.store.chosenVehicle = this.locoOptions[0]; - this.store.chosenLoco = this.locoOptions[0]; - }, - - selectCarWagonType(carWagonTypeId: string) { - this.store.chosenCarUseType = carWagonTypeId; - this.store.chosenVehicle = this.carOptions[0]; - this.store.chosenCar = this.carOptions[0]; - this.store.chosenCargo = null; - }, - prepareSwapVehicles() { this.store.swapVehicles = true; }, - onVehicleSelect(type: 'loco' | 'car' | 'cargo') { - this.$nextTick(() => { - if (!this.store.chosenLoco && !this.store.chosenCar) return; - - this.store.chosenVehicle = type == 'loco' ? this.store.chosenLoco : this.store.chosenCar; - - this.store.chosenCargo = - this.store.chosenCar?.cargoList.find((cargo) => cargo.id == this.store.chosenCargo?.id) || null; - }); - }, - addOrSwitchVehicle() { if (this.store.chosenStockListIndex == -1) this.addVehicle(); else this.switchVehicles(); diff --git a/src/components/StockGeneratorTab.vue b/src/components/StockGeneratorTab.vue index 78f6288..76ae638 100644 --- a/src/components/StockGeneratorTab.vue +++ b/src/components/StockGeneratorTab.vue @@ -33,11 +33,25 @@

WYBRANE WAGONY

-

Wagony posiadające wybrane ładunki. Kliknij na pojazd, aby został wyłączony z losowania.

+

+ Wagony posiadające wybrane ładunki. Najedź na nazwę, aby zobaczyć podgląd wagonu. Kliknij, aby wyłączyć z + losowania (tylko podświetlone nazwy będą uwzględnione). +

-
@@ -49,7 +63,6 @@ import { defineComponent } from 'vue'; import { useStore } from '../store'; import generatorData from '../data/generatorData.json'; -import { ICarWagon } from '../types'; export default defineComponent({ name: 'stock-generator', @@ -63,22 +76,52 @@ export default defineComponent({ data() { return { generatorData, - chosenCarTypes: new Set() as Set, + chosenCarTypes: [] as string[], + excludedCarTypes: [] as string[], + chosenCargoTypes: [] as string[], + + previewTimeout: -1, }; }, + computed: { + computedChosenCarTypes() { + return new Set(this.chosenCarTypes.sort((c1, c2) => (c1 > c2 ? 1 : -1))); + }, + }, + methods: { + onMouseHover(type: string) { + window.clearTimeout(this.previewTimeout); + + this.previewTimeout = window.setTimeout(() => { + this.previewCar(type); + }, 400); + }, + + onMouseLeave() { + window.clearTimeout(this.previewTimeout); + }, + previewCar(type: string) { - this.store.chosenCar = this.store.carDataList.find((c) => c.constructionType == type) || null; - this.store.chosenVehicle = this.store.chosenCar; + const c = this.store.carDataList.find((c) => c.type.startsWith(type)) || null; + + this.store.chosenVehicle = c; + this.store.chosenCar = c; + this.store.chosenLoco = null; + this.store.chosenCargo = null; + + if (c) this.store.chosenCarUseType = c?.useType; + + // this.store.chosenVehicle = this.store.chosenCar; }, toggleCargoChosen(cargoType: string, vehicles: string[]) { if (this.chosenCargoTypes.includes(cargoType)) { vehicles.forEach((v) => { const [type] = v.split(':'); - this.chosenCarTypes.delete(type); + this.chosenCarTypes.splice(this.chosenCarTypes.indexOf(type), 1); }); this.chosenCargoTypes.splice(this.chosenCargoTypes.indexOf(cargoType), 1); @@ -89,11 +132,16 @@ export default defineComponent({ vehicles.forEach((v) => { const [type] = v.split(':'); - const cars = this.store.carDataList.filter((c) => c.constructionType == type); + // const cars = this.store.carDataList.filter((c) => c.constructionType == type); - this.chosenCarTypes.add(type); + this.chosenCarTypes.push(type); }); }, + + toggleCarExclusion(type: string) { + if (!this.excludedCarTypes.includes(type)) this.excludedCarTypes.push(type); + else this.excludedCarTypes = this.excludedCarTypes.filter((c) => c != type); + }, }, }); @@ -128,25 +176,44 @@ h2 { } } -.generator_cargo, .generator_vehicles { +.generator_cargo, +.generator_vehicles { display: grid; gap: 0.5em; grid-template-columns: repeat(4, 1fr); - + button { + position: relative; padding: 0.5em; - + text-align: center; text-transform: uppercase; font-weight: bold; - + background-color: $secondaryColor; - + &[data-chosen='true'] { background-color: $accentColor; color: black; + + box-shadow: 0 0 5px 1px $accentColor; + } + + &[data-excluded='true'] { + background-color: gray; + box-shadow: none; + } + + span { + position: absolute; + right: 0; + top: 50%; + padding: 5px; + + transform: translate(-8px, -50%); + background-color: $bgColor; + color: white; } } } - diff --git a/src/components/StockListTab.vue b/src/components/StockListTab.vue index 564c7c1..9b383ad 100644 --- a/src/components/StockListTab.vue +++ b/src/components/StockListTab.vue @@ -118,6 +118,7 @@
Ten skład posiada za dużo pojazdów trakcyjnych!
+