From e0d8aabfd964cbbaf0eb6a95deb28de03362a137 Mon Sep 17 00:00:00 2001 From: Spythere Date: Sun, 6 Nov 2022 19:08:48 +0100 Subject: [PATCH] =?UTF-8?q?Wyb=C3=B3r=20=C5=82adunku,=20podgl=C4=85d=20i?= =?UTF-8?q?=20wy=C5=82=C4=85czanie=20z=20losowania?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 1 + src/components/InputsSection.vue | 53 +++----------- src/components/StockGeneratorTab.vue | 99 +++++++++++++++++++++----- src/components/StockListTab.vue | 35 +++------ src/components/TrainImageSection.vue | 2 +- src/components/cards/RealStockCard.vue | 7 +- src/mixins/stockPreviewMixin.ts | 80 +++++++++++++++++++++ 7 files changed, 184 insertions(+), 93 deletions(-) create mode 100644 src/mixins/stockPreviewMixin.ts 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!
+
  • Lista pojazdów jest pusta!
    @@ -172,12 +173,13 @@ import TrainImage from './TrainImageSection.vue'; import { useStore } from '../store'; import warningsMixin from '../mixins/warningsMixin'; import imageMixin from '../mixins/imageMixin'; +import stockPreviewMixin from '../mixins/stockPreviewMixin'; export default defineComponent({ name: 'stock-list', components: { TrainImage }, - mixins: [warningsMixin, imageMixin], + mixins: [warningsMixin, imageMixin, stockPreviewMixin], setup() { const store = useStore(); @@ -230,41 +232,20 @@ export default defineComponent({ }, 20); }, - onListItemClick(vehicleID: number) { - const vehicle = this.store.stockList[vehicleID]; + onListItemClick(stockID: number) { + const stock = this.store.stockList[stockID]; this.store.chosenStockListIndex = - this.store.chosenStockListIndex == vehicleID && this.store.chosenVehicle?.type == vehicle.type ? -1 : vehicleID; + this.store.chosenStockListIndex == stockID && this.store.chosenVehicle?.type == stock.type ? -1 : stockID; if (this.store.chosenStockListIndex == -1) { this.store.chosenVehicle = null; return; } - if (this.store.chosenVehicle?.imageSrc != vehicle.imgSrc) this.store.imageLoading = true; + if (this.store.swapVehicles) this.store.swapVehicles = false; - if (this.store.showSupporter && !vehicle.supportersOnly) { - this.store.showSupporter = false; - } - - if (vehicle.isLoco) { - const chosenLoco = this.store.locoDataList.find((v) => v.type == vehicle.type) || null; - this.store.chosenVehicle = chosenLoco; - this.store.chosenLoco = chosenLoco; - // this.store.chosenCargo = null; - this.store.chosenLocoPower = vehicle.useType; - } else { - const chosenCar = this.store.carDataList.find((v) => v.type == vehicle.type) || null; - this.store.chosenVehicle = chosenCar; - this.store.chosenCar = chosenCar; - - this.store.chosenCargo = vehicle.cargo || null; - this.store.chosenCarUseType = vehicle.useType; - } - - if (this.store.swapVehicles) { - this.store.swapVehicles = false; - } + this.previewStock(stock); }, getCarSpecFromType(typeStr: string) { diff --git a/src/components/TrainImageSection.vue b/src/components/TrainImageSection.vue index da9b19f..37d9853 100644 --- a/src/components/TrainImageSection.vue +++ b/src/components/TrainImageSection.vue @@ -116,7 +116,7 @@ export default defineComponent({ grid-column: 1; margin-top: 2em; - height: 20em; + height: 22em; } .train-image { diff --git a/src/components/cards/RealStockCard.vue b/src/components/cards/RealStockCard.vue index eec001d..6314277 100644 --- a/src/components/cards/RealStockCard.vue +++ b/src/components/cards/RealStockCard.vue @@ -91,10 +91,12 @@ export default defineComponent({ const stockArray = stockString.split(';'); this.store.stockList.length = 0; + this.store.chosenVehicle = null; this.store.chosenCar = null; this.store.chosenCargo = null; this.store.chosenLoco = null; - + this.store.chosenStockListIndex = -1; + this.store.swapVehicles = false; stockArray.forEach((type, i) => { @@ -105,9 +107,6 @@ export default defineComponent({ this.addVehicle(vehicle); }); - this.store.chosenStockListIndex = -1; - this.store.chosenVehicle = null; - this.store.isRealStockListCardOpen = false; }, diff --git a/src/mixins/stockPreviewMixin.ts b/src/mixins/stockPreviewMixin.ts new file mode 100644 index 0000000..979b9f9 --- /dev/null +++ b/src/mixins/stockPreviewMixin.ts @@ -0,0 +1,80 @@ +import { defineComponent } from 'vue'; +import { useStore } from '../store'; +import { IStock, Vehicle } from '../types'; + +export default defineComponent({ + setup() { + return { + store: useStore(), + }; + }, + + 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; + }, + + 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.chosenCargo = + 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 (stock.isLoco) { + 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; + this.store.chosenVehicle = chosenCar; + this.store.chosenCar = chosenCar; + + this.store.chosenCargo = stock.cargo || null; + this.store.chosenCarUseType = stock.useType; + } + }, + + resetPreview() { + this.store.chosenVehicle = null; + this.store.chosenCar = null; + this.store.chosenCargo = null; + this.store.chosenLoco = null; + } + }, +}); + + +