diff --git a/.firebase/hosting.ZGlzdA.cache b/.firebase/hosting.ZGlzdA.cache index f49a466..c9bf654 100644 --- a/.firebase/hosting.ZGlzdA.cache +++ b/.firebase/hosting.ZGlzdA.cache @@ -1,14 +1,15 @@ -favicon.ico,1637155006386,665ba81c9556ba00abb1a0fa575fe801b3c35f23481b17528a211b8c3021f7cd -index.html,1637155006386,db0e3a5201498b61a9c05ec7db6d9239e4316f7de42b8d2e9f5b2d9e78518fe4 -img/add-icon.a0f313fe.svg,1637155006391,be43aa8b694c90777971ad2d7f611f52c7ee172131fe2e24a82348891bb6aa18 -img/higher-icon.68df973e.svg,1637155006391,258bcb0fc4c62a0ecd53681bfa4777451e0cb4b980e1094f68d89d4077fa657a -css/app.f7fd863f.css,1637155006388,e76f0ed9937b7881360700747e4ac7f568ff4de3d756f60ddf7f4c7b61b867f4 -img/lower-icon.7c306380.svg,1637155006386,286e1759ea8d4c11327f425f6d6af41603b329dab36c419b228acbea217c2080 -img/sub-icon.bfa10f67.svg,1637155006391,afa120d2f8afe18161a6ed011eb0482ef9604fd35c1d3be8cd93b1087b1138eb -img/remove-icon.09c0dbc9.svg,1637155006391,1e01bccdf38cee755fc54c9768b4089fdb11d904a6b9aa86fcb20a2357dc8d61 -img/logo.c9fcc748.svg,1637155006391,59a9ce681c6123558f2b025931a262148f1d0bb47d5a3300a14a2e9020a85bc9 -img/randomize-icon.07a5b5e4.svg,1637155006391,4bda1cbd316c62073c0f5d97b5be7796b3e061d2e877a91025045957c33a9cd5 -js/app.a278fff6.js,1637155006389,53197104f371b75e8c84828d1f3563fcd334182ed8609f69735dd263f1550c76 -js/app.a278fff6.js.map,1637155006391,a59665607fc04be6127c958b2471a403cdaf1f0cecf56490fe10827d98161474 -js/chunk-vendors.c62977c4.js,1637155006391,7acc01b3da3406d5051323043fd4255883a8fd560be399c3791f4449f75b3e23 -js/chunk-vendors.c62977c4.js.map,1637155006392,9e67209b70ab93a9d5cf3b1d7ffe8277f7ba8054e5a9b240bbf60f5ddb11db56 +favicon.ico,1637599368236,665ba81c9556ba00abb1a0fa575fe801b3c35f23481b17528a211b8c3021f7cd +index.html,1637599368236,ac716cd88526d5b7886cb5ed16e8cc3ebd3937446cf960e7a839075b132c7ed4 +img/add-icon.a0f313fe.svg,1637599368241,be43aa8b694c90777971ad2d7f611f52c7ee172131fe2e24a82348891bb6aa18 +img/higher-icon.68df973e.svg,1637599368241,258bcb0fc4c62a0ecd53681bfa4777451e0cb4b980e1094f68d89d4077fa657a +css/app.597ea605.css,1637599368238,42ecbe19eb686f2518b6618f385643f32452745016bb127455507aa5ae6975ca +img/lower-icon.7c306380.svg,1637599368241,286e1759ea8d4c11327f425f6d6af41603b329dab36c419b228acbea217c2080 +img/remove-icon.09c0dbc9.svg,1637599368241,1e01bccdf38cee755fc54c9768b4089fdb11d904a6b9aa86fcb20a2357dc8d61 +img/sub-icon.bfa10f67.svg,1637599368241,afa120d2f8afe18161a6ed011eb0482ef9604fd35c1d3be8cd93b1087b1138eb +img/randomize-icon.07a5b5e4.svg,1637599368243,4bda1cbd316c62073c0f5d97b5be7796b3e061d2e877a91025045957c33a9cd5 +img/swap-icon.c8ef8416.svg,1637599368236,b1c1d418526746e20b13076cc97cd4aa1b8f87956d38dfa71f3fb17d1df5c236 +img/logo.c9fcc748.svg,1637599368241,59a9ce681c6123558f2b025931a262148f1d0bb47d5a3300a14a2e9020a85bc9 +js/app.4cdf2238.js,1637599368238,956f55702e5894d47552349b19df6b7ae23d3faeb46e5f21e5c61dc7672809c1 +js/app.4cdf2238.js.map,1637599368243,a1dea43f2819347d7013bbd0fbc6951be3a541e8bf0b2a6efd498a4300ebd209 +js/chunk-vendors.c62977c4.js,1637599368243,7acc01b3da3406d5051323043fd4255883a8fd560be399c3791f4449f75b3e23 +js/chunk-vendors.c62977c4.js.map,1637599368243,9e67209b70ab93a9d5cf3b1d7ffe8277f7ba8054e5a9b240bbf60f5ddb11db56 diff --git a/.ionide/symbolCache.db b/.ionide/symbolCache.db new file mode 100644 index 0000000..8a73c4f Binary files /dev/null and b/.ionide/symbolCache.db differ diff --git a/src/assets/swap-icon.svg b/src/assets/swap-icon.svg new file mode 100644 index 0000000..4694a65 --- /dev/null +++ b/src/assets/swap-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/InputsSection.vue b/src/components/InputsSection.vue index aed60e4..debae7f 100644 --- a/src/components/InputsSection.vue +++ b/src/components/InputsSection.vue @@ -29,9 +29,13 @@ - + + + @@ -42,6 +46,8 @@ + + RODZAJ WAGONU @@ -71,9 +77,13 @@ - + + + @@ -88,8 +98,8 @@ v-model="store.chosenCargo" > brak dostępnych ładunków - próżny + {{ cargo.id }} @@ -104,10 +114,6 @@ import { ICarWagon, ILocomotive, IStore } from '@/types'; import { defineComponent, inject } from 'vue'; -function isLocomotive(vehicle: ILocomotive | ICarWagon): vehicle is ILocomotive { - return (vehicle as ILocomotive).power !== undefined; -} - export default defineComponent({ setup() { const store = inject('Store') as IStore; @@ -121,6 +127,7 @@ export default defineComponent({ 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, }; }, @@ -158,6 +165,7 @@ export default defineComponent({ data: () => ({ icons: { add: require('@/assets/add-icon.svg'), + swap: require('@/assets/swap-icon.svg'), }, locoLabels: [ { @@ -207,11 +215,13 @@ export default defineComponent({ }, methods: { + prepareSwapVehicles() { + this.store.swapVehicles = true; + }, + onShowSupporterChange() { this.store.showSupporter = !this.store.showSupporter; - console.log(this.store.showSupporter); - if (this.store.showSupporter) { const chosenVehicle = this.store.chosenCar || this.store.chosenLoco; @@ -229,6 +239,7 @@ export default defineComponent({ this.store.imageLoading = false; this.store.chosenLocoPower = inputId; + this.store.chosenStockListIndex = -1; (this.$refs['loco-select'] as HTMLElement).focus(); }, @@ -238,6 +249,7 @@ export default defineComponent({ this.store.imageLoading = false; this.store.chosenCarUseType = inputId; + this.store.chosenStockListIndex = -1; if (inputId == 'car-passenger') this.store.chosenCargo = null; }, @@ -245,6 +257,7 @@ export default defineComponent({ onCarTypeChange() { this.store.chosenCargo = null; this.store.chosenLoco = null; + this.store.chosenStockListIndex = -1; this.store.imageLoading = true; }, @@ -252,6 +265,7 @@ export default defineComponent({ onLocoTypeChange() { this.store.chosenCargo = null; this.store.chosenCar = null; + this.store.chosenStockListIndex = -1; this.store.imageLoading = true; }, @@ -264,13 +278,13 @@ export default defineComponent({ const previousStock = this.store.stockList.length > 0 ? this.store.stockList[this.store.stockList.length - 1] : null; - if (isLocomotive(vehicle) && previousStock && previousStock.type == vehicle.type) { + if (this.isLocomotive(vehicle) && previousStock && previousStock.type == vehicle.type) { this.store.stockList[this.store.stockList.length - 1].count++; return; } if ( - !isLocomotive(vehicle) && + !this.isLocomotive(vehicle) && previousStock && previousStock.type == vehicle.type && previousStock.cargo?.id == this.store.chosenCargo?.id @@ -285,16 +299,18 @@ export default defineComponent({ length: vehicle.length, mass: vehicle.mass, maxSpeed: vehicle.maxSpeed, - isLoco: isLocomotive(vehicle), + isLoco: this.isLocomotive(vehicle), cargo: - !isLocomotive(vehicle) && vehicle.loadable && this.store.chosenCargo ? this.store.chosenCargo : undefined, + !this.isLocomotive(vehicle) && vehicle.loadable && this.store.chosenCargo + ? this.store.chosenCargo + : undefined, count: 1, imgSrc: vehicle.imageSrc, - useType: isLocomotive(vehicle) ? vehicle.power : vehicle.useType, + useType: this.isLocomotive(vehicle) ? vehicle.power : vehicle.useType, supportersOnly: vehicle.supportersOnly, }; - if (isLocomotive(vehicle) && this.store.stockList.length > 0 && !this.store.stockList[0].isLoco) + if (this.isLocomotive(vehicle) && this.store.stockList.length > 0 && !this.store.stockList[0].isLoco) this.store.stockList.unshift(stockObj); else this.store.stockList.push(stockObj); }, diff --git a/src/components/ListSection.vue b/src/components/ListSection.vue index b5c407f..6726b10 100644 --- a/src/components/ListSection.vue +++ b/src/components/ListSection.vue @@ -46,12 +46,19 @@ TASUJ WAGONY LOSUJ SKŁAD + Masa: {{ totalMass }}t | Długość: {{ totalLength }}m | Vmax pociągu: {{ maxStockSpeed }} km/h + + + Skopiuj pociąg w formie tekstowej do schowka + + + Lokomotywy EP07 i EP08 są przeznaczone jedynie do ruchu pasażerskiego! @@ -64,7 +71,7 @@ Ten skład posiada za dużo pojazdów trakcyjnych! - + Lista pojazdów jest pusta! @@ -72,7 +79,7 @@ { + let s = stock.isLoco || !stock.cargo ? stock.type : `${stock.type}:${stock.cargo.id}`; + + let final = s; + for (let i = 0; i < stock.count - 1; i++) final += `;${s}`; + + return final; + }) + .join(';'); + }, + }, + methods: { + copyToClipboard() { + navigator.clipboard.writeText(this.stockString); + + alert('Pociąg został skopiowany do schowka!'); + }, + onListItemFocus(vehicleID: number) { const vehicle = this.store.stockList[vehicleID]; + this.store.chosenStockListIndex = vehicleID; + if ((this.store.chosenCar || this.store.chosenLoco)?.imageSrc != vehicle.imgSrc) this.store.imageLoading = true; if (this.store.showSupporter && !vehicle.supportersOnly) { @@ -202,15 +233,17 @@ export default defineComponent({ this.store.chosenCar = null; this.store.chosenCargo = null; + } else { + this.store.chosenCarUseType = vehicle.useType; - return; + this.store.chosenLoco = null; + this.store.chosenCar = this.carDataList.find((v) => v.type == vehicle.type) || null; + this.store.chosenCargo = vehicle.cargo || null; } - this.store.chosenCarUseType = vehicle.useType; - - this.store.chosenLoco = null; - this.store.chosenCar = this.carDataList.find((v) => v.type == vehicle.type) || null; - this.store.chosenCargo = vehicle.cargo || null; + if (this.store.swapVehicles) { + this.store.swapVehicles = false; + } }, getCarSpecFromType(typeStr: string) { @@ -299,18 +332,7 @@ export default defineComponent({ if (!fileName) return; - const stockString = this.store.stockList - .map((stock) => { - let s = stock.isLoco || !stock.cargo ? stock.type : `${stock.type}:${stock.cargo.id}`; - - let final = s; - for (let i = 0; i < stock.count - 1; i++) final += `;${s}`; - - return final; - }) - .join(';'); - - const blob = new Blob([stockString]); + const blob = new Blob([this.stockString]); const file = fileName + '.con'; var e = document.createEvent('MouseEvents'), @@ -482,6 +504,11 @@ export default defineComponent({ width: 100%; + &_string { + margin-top: 1em; + font-weight: bold; + } + &_buttons { display: flex; @@ -521,6 +548,10 @@ export default defineComponent({ padding: 0 0.5em; } + &.selected .item-content { + color: $accentColor; + } + &:focus .item-content { color: $accentColor; } diff --git a/src/components/RandomizerCard.vue b/src/components/RandomizerCard.vue index 679c319..7445be2 100644 --- a/src/components/RandomizerCard.vue +++ b/src/components/RandomizerCard.vue @@ -3,12 +3,12 @@ - LOSUJ SKŁAD TOWAROWY + @@ -20,7 +20,7 @@ Podgląd typu wagonu - {{ cargoUsage[focusedCar.type.split('_')[0]] }} + {{ carUsage[focusedCar.type.split('_')[0]] }} Najedź na rodzaj wagonu aby wyświetlić informacje @@ -29,7 +29,20 @@ + {{ carType }} + + + + + car.useType == 'car-cargo'), - cargoTypeList: carDataList.value.reduce((list, car) => { + carDataList, + carTypeList: carDataList.value.reduce((list, car) => { const type = car.type.split('_')[0]; - if (car.useType != 'car-cargo' || list.includes(type)) return list; + if (list.includes(type)) return list; list.push(type); @@ -125,7 +138,22 @@ export default defineComponent({ focusedCar: null as ICarWagon | null, isPreviewLoading: false, - cargoUsage: { + carUsage: { + Gor89: 'wagon pasażerski', + Gor77: 'wagon pasażerski', + Bau84: 'wagon pasażerski', + '612a': 'wagon pasażerski', + '504a': 'wagon pasażerski', + '304c': 'wagon pasażerski', + '159a': 'wagon pasażerski', + '158a': 'wagon pasażerski', + '154a': 'wagon pasażerski', + '120a': 'wagon pasażerski', + '113a': 'wagon pasażerski', + '112a': 'wagon pasażerski', + '111a': 'wagon pasażerski', + '110a': 'wagon pasażerski', + '101a': 'wagon pasażerski', '203V': 'kruszywo, kamień wapienny, odpady kopalniane', '208Kf': 'drobnica, ładunki sypkie', '209c': 'wagon techniczny', @@ -150,7 +178,7 @@ export default defineComponent({ }, displayPreview(carType: string) { - const list = this.cargoCarList.filter((car) => car.type.includes(carType)); + const list = this.carDataList.filter((car) => car.type.includes(carType)); const randIndex = Math.floor(Math.random() * list.length); if (this.focusedCar?.type == list[randIndex].type) return; @@ -196,7 +224,7 @@ export default defineComponent({ this.store.stockList.length = 0; const locoSet = this.locoDataList - .filter((loco) => !loco.type.startsWith('EP') && (loco.power == 'loco-e' || loco.power == 'loco-s')) + .filter((loco) => loco.power == 'loco-e' || loco.power == 'loco-s') .filter((loco) => (!this.includeSupporterVehicles && loco.supportersOnly ? false : true)); const randLoco = locoSet[Math.floor(Math.random() * locoSet.length)]; @@ -207,7 +235,7 @@ export default defineComponent({ totalStockLength += this.store.stockList[0].length; totalStockMass += this.store.stockList[0].mass; - let availableCarsSet = this.cargoCarList.filter((cargoCar) => { + let availableCarsSet = this.carDataList.filter((cargoCar) => { if (!this.includeSupporterVehicles && cargoCar.supportersOnly) return false; if (this.chosenCarTypes.find((carType) => cargoCar.type.includes(carType))) return true; @@ -365,6 +393,19 @@ input { font-size: 1.2em; } +.car-choice div { + display: grid; + + grid-template-columns: repeat(5, 1fr); + justify-content: center; + + @media screen and (max-width: 800px) { + /* display: flex; */ + /* flex-wrap: wrap; */ + grid-template-columns: repeat(4, 1fr); + } +} + button.choice-btn { color: gray; border-color: gray; diff --git a/src/main.ts b/src/main.ts index b32d3e6..dc9035b 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,10 +1,25 @@ -import { createApp } from "vue"; +import { createApp, Directive } from "vue"; import App from "./App.vue"; -import { Store, locoDataList, carDataList, totalLength, totalMass, maxAllowedSpeed, maxStockSpeed, isTrainPassenger, warnings } from "./store"; +import { Store, isLocomotive, locoDataList, carDataList, totalLength, totalMass, maxAllowedSpeed, maxStockSpeed, isTrainPassenger, warnings } from "./store"; + +const clickOutsideDirective: Directive = { + beforeMount(el, binding) { + + el.clickOutsideEvent = (event: Event) => { + if (!(el == event.target || el.contains(event.target))) { + binding.value(); + } + }; + + document.addEventListener("click", el.clickOutsideEvent); + }, +} + createApp(App) .provide('Store', Store) + .provide('isLocomotive', isLocomotive) .provide('locoDataList', locoDataList) .provide('carDataList', carDataList) .provide('totalMass', totalMass) @@ -13,4 +28,5 @@ createApp(App) .provide('maxAllowedSpeed', maxAllowedSpeed) .provide('isTrainPassenger', isTrainPassenger) .provide('warnings', warnings) + .directive('click-outside', clickOutsideDirective) .mount("#app"); diff --git a/src/store.ts b/src/store.ts index 3069745..ea7bd51 100644 --- a/src/store.ts +++ b/src/store.ts @@ -20,12 +20,19 @@ export const Store: IStore = reactive({ stockList: [] as IStock[], cargoOptions: [] as any[][], + + swapVehicles: false, + + chosenStockListIndex: -1, // locoOptions: [] as ILocomotive[], // carOptions: [] as ICarWagon[], vehiclePreviewSrc: "" }) +export function isLocomotive(vehicle: ILocomotive | ICarWagon): vehicle is ILocomotive { + return (vehicle as ILocomotive).power !== undefined; +} export const locoDataList = computed(() => Object.keys(vehicleDataJSON).reduce( (acc, vehicleTypeKey) => { diff --git a/src/styles/global.scss b/src/styles/global.scss index 705a254..05eb61c 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -75,15 +75,21 @@ button.btn { outline: none; background: none; - transition: all 250ms; &:hover { color: $accentColor; border-color: $accentColor; } + + &--text { + font-weight: bold; + transition: all 250ms; + } } + + button.btn-rect { width: 1.5em; height: 1.5em; @@ -116,7 +122,7 @@ select { color: white; font-size: 1em; - width: 20em; + width: 18em; } option { diff --git a/src/types.ts b/src/types.ts index 40ca1cb..25c92a3 100644 --- a/src/types.ts +++ b/src/types.ts @@ -12,9 +12,9 @@ export interface IStore { stockList: IStock[]; cargoOptions: any[][]; - // locoOptions: ILocomotive[]; - // carOptions: ICarWagon[]; + chosenStockListIndex: number; + swapVehicles: boolean; vehiclePreviewSrc: string; } diff --git a/src/utils/statsUtils.ts b/src/utils/statsUtils.ts index 97c499b..b59e643 100644 --- a/src/utils/statsUtils.ts +++ b/src/utils/statsUtils.ts @@ -11,7 +11,6 @@ export const verifyTrainSpec = (stockList: IStock[], vehicleMass: number, vehicl const headLoco = stockList[0]; const carList = stockList.filter(stock => !stock.isLoco); - console.log(carList, vehicleUseType); const isTrainPassenger = carList.length != 0 @@ -19,6 +18,5 @@ export const verifyTrainSpec = (stockList: IStock[], vehicleMass: number, vehicl && vehicleUseType == EVehicleUseType.CAR_PASSENGER : false; - console.log("Skład pasażerski: " + isTrainPassenger); - console.log("Skład towarowy: " + !isTrainPassenger); + } \ No newline at end of file