mirror of
https://github.com/Spythere/pojazdownik.git
synced 2026-05-04 03:58:11 +00:00
Kopiowanie składu do schowka; możliwość losowania wagonów pasażerskich
This commit is contained in:
@@ -1,14 +1,15 @@
|
|||||||
favicon.ico,1637155006386,665ba81c9556ba00abb1a0fa575fe801b3c35f23481b17528a211b8c3021f7cd
|
favicon.ico,1637599368236,665ba81c9556ba00abb1a0fa575fe801b3c35f23481b17528a211b8c3021f7cd
|
||||||
index.html,1637155006386,db0e3a5201498b61a9c05ec7db6d9239e4316f7de42b8d2e9f5b2d9e78518fe4
|
index.html,1637599368236,ac716cd88526d5b7886cb5ed16e8cc3ebd3937446cf960e7a839075b132c7ed4
|
||||||
img/add-icon.a0f313fe.svg,1637155006391,be43aa8b694c90777971ad2d7f611f52c7ee172131fe2e24a82348891bb6aa18
|
img/add-icon.a0f313fe.svg,1637599368241,be43aa8b694c90777971ad2d7f611f52c7ee172131fe2e24a82348891bb6aa18
|
||||||
img/higher-icon.68df973e.svg,1637155006391,258bcb0fc4c62a0ecd53681bfa4777451e0cb4b980e1094f68d89d4077fa657a
|
img/higher-icon.68df973e.svg,1637599368241,258bcb0fc4c62a0ecd53681bfa4777451e0cb4b980e1094f68d89d4077fa657a
|
||||||
css/app.f7fd863f.css,1637155006388,e76f0ed9937b7881360700747e4ac7f568ff4de3d756f60ddf7f4c7b61b867f4
|
css/app.597ea605.css,1637599368238,42ecbe19eb686f2518b6618f385643f32452745016bb127455507aa5ae6975ca
|
||||||
img/lower-icon.7c306380.svg,1637155006386,286e1759ea8d4c11327f425f6d6af41603b329dab36c419b228acbea217c2080
|
img/lower-icon.7c306380.svg,1637599368241,286e1759ea8d4c11327f425f6d6af41603b329dab36c419b228acbea217c2080
|
||||||
img/sub-icon.bfa10f67.svg,1637155006391,afa120d2f8afe18161a6ed011eb0482ef9604fd35c1d3be8cd93b1087b1138eb
|
img/remove-icon.09c0dbc9.svg,1637599368241,1e01bccdf38cee755fc54c9768b4089fdb11d904a6b9aa86fcb20a2357dc8d61
|
||||||
img/remove-icon.09c0dbc9.svg,1637155006391,1e01bccdf38cee755fc54c9768b4089fdb11d904a6b9aa86fcb20a2357dc8d61
|
img/sub-icon.bfa10f67.svg,1637599368241,afa120d2f8afe18161a6ed011eb0482ef9604fd35c1d3be8cd93b1087b1138eb
|
||||||
img/logo.c9fcc748.svg,1637155006391,59a9ce681c6123558f2b025931a262148f1d0bb47d5a3300a14a2e9020a85bc9
|
img/randomize-icon.07a5b5e4.svg,1637599368243,4bda1cbd316c62073c0f5d97b5be7796b3e061d2e877a91025045957c33a9cd5
|
||||||
img/randomize-icon.07a5b5e4.svg,1637155006391,4bda1cbd316c62073c0f5d97b5be7796b3e061d2e877a91025045957c33a9cd5
|
img/swap-icon.c8ef8416.svg,1637599368236,b1c1d418526746e20b13076cc97cd4aa1b8f87956d38dfa71f3fb17d1df5c236
|
||||||
js/app.a278fff6.js,1637155006389,53197104f371b75e8c84828d1f3563fcd334182ed8609f69735dd263f1550c76
|
img/logo.c9fcc748.svg,1637599368241,59a9ce681c6123558f2b025931a262148f1d0bb47d5a3300a14a2e9020a85bc9
|
||||||
js/app.a278fff6.js.map,1637155006391,a59665607fc04be6127c958b2471a403cdaf1f0cecf56490fe10827d98161474
|
js/app.4cdf2238.js,1637599368238,956f55702e5894d47552349b19df6b7ae23d3faeb46e5f21e5c61dc7672809c1
|
||||||
js/chunk-vendors.c62977c4.js,1637155006391,7acc01b3da3406d5051323043fd4255883a8fd560be399c3791f4449f75b3e23
|
js/app.4cdf2238.js.map,1637599368243,a1dea43f2819347d7013bbd0fbc6951be3a541e8bf0b2a6efd498a4300ebd209
|
||||||
js/chunk-vendors.c62977c4.js.map,1637155006392,9e67209b70ab93a9d5cf3b1d7ffe8277f7ba8054e5a9b240bbf60f5ddb11db56
|
js/chunk-vendors.c62977c4.js,1637599368243,7acc01b3da3406d5051323043fd4255883a8fd560be399c3791f4449f75b3e23
|
||||||
|
js/chunk-vendors.c62977c4.js.map,1637599368243,9e67209b70ab93a9d5cf3b1d7ffe8277f7ba8054e5a9b240bbf60f5ddb11db56
|
||||||
|
|||||||
Binary file not shown.
@@ -0,0 +1,5 @@
|
|||||||
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M9.12308 1V3.58625V6.06907L13 3.58625L9.12308 1Z" fill="white"/>
|
||||||
|
<path d="M5.24615 7.9309V10.4137V13L1 10.4137L5.24615 7.9309Z" fill="white"/>
|
||||||
|
<path d="M1 3.58623C2.73032 3.58623 5.43077 3.58623 5.43077 3.58623L9.12308 3.58625M9.12308 3.58625V1L13 3.58625L9.12308 6.06907V3.58625ZM13 10.4137H6.16923H5.24615M5.24615 10.4137V7.9309L1 10.4137L5.24615 13V10.4137Z" stroke="white" stroke-width="0.714286"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 515 B |
@@ -29,9 +29,13 @@
|
|||||||
</option>
|
</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<button class="btn--add" @click="addVehicle">
|
<button class="btn--add" @click="addVehicle" title="Dodaj pojazd">
|
||||||
<img :src="icons.add" alt="add vehicle" />
|
<img :src="icons.add" alt="add vehicle" />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
<!-- <button class="btn--swap" @click="prepareSwapVehicles" title="Zamień pojazdy">
|
||||||
|
<img :src="icons.swap" alt="swap vehicle" />
|
||||||
|
</button> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="input_checkbox">
|
<div class="input_checkbox">
|
||||||
@@ -42,6 +46,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="spacer"></div>
|
||||||
|
|
||||||
<div class="input inputs_car">
|
<div class="input inputs_car">
|
||||||
<div class="input_container">
|
<div class="input_container">
|
||||||
<h2 class="input_header">RODZAJ WAGONU</h2>
|
<h2 class="input_header">RODZAJ WAGONU</h2>
|
||||||
@@ -71,9 +77,13 @@
|
|||||||
</option>
|
</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<button class="btn--add" @click="addVehicle">
|
<button class="btn--add" @click="addVehicle" title="Dodaj pojazd">
|
||||||
<img :src="icons.add" alt="add vehicle" />
|
<img :src="icons.add" alt="add vehicle" />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
<!-- <button class="btn--swap" @click="prepareSwapVehicles" title="Zamień pojazdy">
|
||||||
|
<img :src="icons.swap" alt="swap vehicle" />
|
||||||
|
</button> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="input_list cargo">
|
<div class="input_list cargo">
|
||||||
@@ -88,8 +98,8 @@
|
|||||||
v-model="store.chosenCargo"
|
v-model="store.chosenCargo"
|
||||||
>
|
>
|
||||||
<option :value="null" v-if="!store.chosenCar || !store.chosenCar.loadable">brak dostępnych ładunków</option>
|
<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 :value="null" v-else>próżny</option>
|
||||||
|
|
||||||
<option v-for="cargo in store.chosenCar?.cargoList" :value="cargo" :key="cargo.id">
|
<option v-for="cargo in store.chosenCar?.cargoList" :value="cargo" :key="cargo.id">
|
||||||
{{ cargo.id }}
|
{{ cargo.id }}
|
||||||
</option>
|
</option>
|
||||||
@@ -104,10 +114,6 @@
|
|||||||
import { ICarWagon, ILocomotive, IStore } from '@/types';
|
import { ICarWagon, ILocomotive, IStore } from '@/types';
|
||||||
import { defineComponent, inject } from 'vue';
|
import { defineComponent, inject } from 'vue';
|
||||||
|
|
||||||
function isLocomotive(vehicle: ILocomotive | ICarWagon): vehicle is ILocomotive {
|
|
||||||
return (vehicle as ILocomotive).power !== undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
setup() {
|
setup() {
|
||||||
const store = inject('Store') as IStore;
|
const store = inject('Store') as IStore;
|
||||||
@@ -121,6 +127,7 @@ export default defineComponent({
|
|||||||
totalMass: inject('totalMass') as number,
|
totalMass: inject('totalMass') as number,
|
||||||
maxStockSpeed: inject('maxStockSpeed') as number,
|
maxStockSpeed: inject('maxStockSpeed') as number,
|
||||||
maxAllowedSpeed: inject('maxAllowedSpeed') 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: () => ({
|
data: () => ({
|
||||||
icons: {
|
icons: {
|
||||||
add: require('@/assets/add-icon.svg'),
|
add: require('@/assets/add-icon.svg'),
|
||||||
|
swap: require('@/assets/swap-icon.svg'),
|
||||||
},
|
},
|
||||||
locoLabels: [
|
locoLabels: [
|
||||||
{
|
{
|
||||||
@@ -207,11 +215,13 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
prepareSwapVehicles() {
|
||||||
|
this.store.swapVehicles = true;
|
||||||
|
},
|
||||||
|
|
||||||
onShowSupporterChange() {
|
onShowSupporterChange() {
|
||||||
this.store.showSupporter = !this.store.showSupporter;
|
this.store.showSupporter = !this.store.showSupporter;
|
||||||
|
|
||||||
console.log(this.store.showSupporter);
|
|
||||||
|
|
||||||
if (this.store.showSupporter) {
|
if (this.store.showSupporter) {
|
||||||
const chosenVehicle = this.store.chosenCar || this.store.chosenLoco;
|
const chosenVehicle = this.store.chosenCar || this.store.chosenLoco;
|
||||||
|
|
||||||
@@ -229,6 +239,7 @@ export default defineComponent({
|
|||||||
this.store.imageLoading = false;
|
this.store.imageLoading = false;
|
||||||
|
|
||||||
this.store.chosenLocoPower = inputId;
|
this.store.chosenLocoPower = inputId;
|
||||||
|
this.store.chosenStockListIndex = -1;
|
||||||
|
|
||||||
(this.$refs['loco-select'] as HTMLElement).focus();
|
(this.$refs['loco-select'] as HTMLElement).focus();
|
||||||
},
|
},
|
||||||
@@ -238,6 +249,7 @@ export default defineComponent({
|
|||||||
this.store.imageLoading = false;
|
this.store.imageLoading = false;
|
||||||
|
|
||||||
this.store.chosenCarUseType = inputId;
|
this.store.chosenCarUseType = inputId;
|
||||||
|
this.store.chosenStockListIndex = -1;
|
||||||
|
|
||||||
if (inputId == 'car-passenger') this.store.chosenCargo = null;
|
if (inputId == 'car-passenger') this.store.chosenCargo = null;
|
||||||
},
|
},
|
||||||
@@ -245,6 +257,7 @@ export default defineComponent({
|
|||||||
onCarTypeChange() {
|
onCarTypeChange() {
|
||||||
this.store.chosenCargo = null;
|
this.store.chosenCargo = null;
|
||||||
this.store.chosenLoco = null;
|
this.store.chosenLoco = null;
|
||||||
|
this.store.chosenStockListIndex = -1;
|
||||||
|
|
||||||
this.store.imageLoading = true;
|
this.store.imageLoading = true;
|
||||||
},
|
},
|
||||||
@@ -252,6 +265,7 @@ export default defineComponent({
|
|||||||
onLocoTypeChange() {
|
onLocoTypeChange() {
|
||||||
this.store.chosenCargo = null;
|
this.store.chosenCargo = null;
|
||||||
this.store.chosenCar = null;
|
this.store.chosenCar = null;
|
||||||
|
this.store.chosenStockListIndex = -1;
|
||||||
|
|
||||||
this.store.imageLoading = true;
|
this.store.imageLoading = true;
|
||||||
},
|
},
|
||||||
@@ -264,13 +278,13 @@ export default defineComponent({
|
|||||||
const previousStock =
|
const previousStock =
|
||||||
this.store.stockList.length > 0 ? this.store.stockList[this.store.stockList.length - 1] : null;
|
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++;
|
this.store.stockList[this.store.stockList.length - 1].count++;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (
|
if (
|
||||||
!isLocomotive(vehicle) &&
|
!this.isLocomotive(vehicle) &&
|
||||||
previousStock &&
|
previousStock &&
|
||||||
previousStock.type == vehicle.type &&
|
previousStock.type == vehicle.type &&
|
||||||
previousStock.cargo?.id == this.store.chosenCargo?.id
|
previousStock.cargo?.id == this.store.chosenCargo?.id
|
||||||
@@ -285,16 +299,18 @@ export default defineComponent({
|
|||||||
length: vehicle.length,
|
length: vehicle.length,
|
||||||
mass: vehicle.mass,
|
mass: vehicle.mass,
|
||||||
maxSpeed: vehicle.maxSpeed,
|
maxSpeed: vehicle.maxSpeed,
|
||||||
isLoco: isLocomotive(vehicle),
|
isLoco: this.isLocomotive(vehicle),
|
||||||
cargo:
|
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,
|
count: 1,
|
||||||
imgSrc: vehicle.imageSrc,
|
imgSrc: vehicle.imageSrc,
|
||||||
useType: isLocomotive(vehicle) ? vehicle.power : vehicle.useType,
|
useType: this.isLocomotive(vehicle) ? vehicle.power : vehicle.useType,
|
||||||
supportersOnly: vehicle.supportersOnly,
|
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);
|
this.store.stockList.unshift(stockObj);
|
||||||
else this.store.stockList.push(stockObj);
|
else this.store.stockList.push(stockObj);
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -46,12 +46,19 @@
|
|||||||
<button class="btn" @click="shuffleCars">TASUJ WAGONY</button>
|
<button class="btn" @click="shuffleCars">TASUJ WAGONY</button>
|
||||||
<button class="btn" @click="openRandomizerCard">LOSUJ SKŁAD</button>
|
<button class="btn" @click="openRandomizerCard">LOSUJ SKŁAD</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stock-list_specs">
|
<div class="stock-list_specs">
|
||||||
Masa: <span class="text--accent">{{ totalMass }}t</span> | Długość:
|
Masa: <span class="text--accent">{{ totalMass }}t</span> | Długość:
|
||||||
<span class="text--accent">{{ totalLength }}m</span>
|
<span class="text--accent">{{ totalLength }}m</span>
|
||||||
| Vmax pociągu: <span class="text--accent">{{ maxStockSpeed }} km/h</span>
|
| Vmax pociągu: <span class="text--accent">{{ maxStockSpeed }} km/h</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="stock-list_string">
|
||||||
|
<button class="btn--text" v-if="store.stockList.length > 0" @click="copyToClipboard">
|
||||||
|
Skopiuj pociąg w formie tekstowej do schowka
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="warnings">
|
<div class="warnings">
|
||||||
<div class="warning" v-if="warnings.locoNotSuitable.value">
|
<div class="warning" v-if="warnings.locoNotSuitable.value">
|
||||||
Lokomotywy EP07 i EP08 są przeznaczone jedynie do ruchu pasażerskiego!
|
Lokomotywy EP07 i EP08 są przeznaczone jedynie do ruchu pasażerskiego!
|
||||||
@@ -64,7 +71,7 @@
|
|||||||
<div class="warning" v-if="warnings.tooManyLocos.value">Ten skład posiada za dużo pojazdów trakcyjnych!</div>
|
<div class="warning" v-if="warnings.tooManyLocos.value">Ten skład posiada za dużo pojazdów trakcyjnych!</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ul>
|
<ul ref="stock-list">
|
||||||
<li v-if="store.stockList.length == 0" class="list-empty">
|
<li v-if="store.stockList.length == 0" class="list-empty">
|
||||||
<div class="item-content">Lista pojazdów jest pusta!</div>
|
<div class="item-content">Lista pojazdów jest pusta!</div>
|
||||||
</li>
|
</li>
|
||||||
@@ -72,7 +79,7 @@
|
|||||||
<li
|
<li
|
||||||
v-for="(stock, i) in store.stockList"
|
v-for="(stock, i) in store.stockList"
|
||||||
:key="stock.type + i"
|
:key="stock.type + i"
|
||||||
:class="{ loco: stock.isLoco }"
|
:class="{ loco: stock.isLoco, selected: store.chosenStockListIndex == i }"
|
||||||
:data-id="i"
|
:data-id="i"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
@focus="onListItemFocus(i)"
|
@focus="onListItemFocus(i)"
|
||||||
@@ -127,6 +134,7 @@ import RandomizerCard from './RandomizerCard.vue';
|
|||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: { RandomizerCard },
|
components: { RandomizerCard },
|
||||||
|
|
||||||
setup() {
|
setup() {
|
||||||
const store = inject('Store') as IStore;
|
const store = inject('Store') as IStore;
|
||||||
|
|
||||||
@@ -185,10 +193,33 @@ export default defineComponent({
|
|||||||
} as { [key: string]: string },
|
} as { [key: string]: string },
|
||||||
}),
|
}),
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
stockString() {
|
||||||
|
return 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(';');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
copyToClipboard() {
|
||||||
|
navigator.clipboard.writeText(this.stockString);
|
||||||
|
|
||||||
|
alert('Pociąg został skopiowany do schowka!');
|
||||||
|
},
|
||||||
|
|
||||||
onListItemFocus(vehicleID: number) {
|
onListItemFocus(vehicleID: number) {
|
||||||
const vehicle = this.store.stockList[vehicleID];
|
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.chosenCar || this.store.chosenLoco)?.imageSrc != vehicle.imgSrc) this.store.imageLoading = true;
|
||||||
|
|
||||||
if (this.store.showSupporter && !vehicle.supportersOnly) {
|
if (this.store.showSupporter && !vehicle.supportersOnly) {
|
||||||
@@ -202,15 +233,17 @@ export default defineComponent({
|
|||||||
|
|
||||||
this.store.chosenCar = null;
|
this.store.chosenCar = null;
|
||||||
this.store.chosenCargo = 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;
|
if (this.store.swapVehicles) {
|
||||||
|
this.store.swapVehicles = false;
|
||||||
this.store.chosenLoco = null;
|
}
|
||||||
this.store.chosenCar = this.carDataList.find((v) => v.type == vehicle.type) || null;
|
|
||||||
this.store.chosenCargo = vehicle.cargo || null;
|
|
||||||
},
|
},
|
||||||
|
|
||||||
getCarSpecFromType(typeStr: string) {
|
getCarSpecFromType(typeStr: string) {
|
||||||
@@ -299,18 +332,7 @@ export default defineComponent({
|
|||||||
|
|
||||||
if (!fileName) return;
|
if (!fileName) return;
|
||||||
|
|
||||||
const stockString = this.store.stockList
|
const blob = new Blob([this.stockString]);
|
||||||
.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 file = fileName + '.con';
|
const file = fileName + '.con';
|
||||||
|
|
||||||
var e = document.createEvent('MouseEvents'),
|
var e = document.createEvent('MouseEvents'),
|
||||||
@@ -482,6 +504,11 @@ export default defineComponent({
|
|||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
|
&_string {
|
||||||
|
margin-top: 1em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
&_buttons {
|
&_buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
@@ -521,6 +548,10 @@ export default defineComponent({
|
|||||||
padding: 0 0.5em;
|
padding: 0 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.selected .item-content {
|
||||||
|
color: $accentColor;
|
||||||
|
}
|
||||||
|
|
||||||
&:focus .item-content {
|
&:focus .item-content {
|
||||||
color: $accentColor;
|
color: $accentColor;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,12 +3,12 @@
|
|||||||
<!-- <button class="btn" @click="closeCard">X</button> -->
|
<!-- <button class="btn" @click="closeCard">X</button> -->
|
||||||
|
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<h1>LOSUJ SKŁAD TOWAROWY <img :src="icons.randomize" alt="losuj skład" /></h1>
|
<!-- <h1>LOSUJ SKŁAD <img :src="icons.randomize" alt="losuj skład" /></h1>
|
||||||
|
|
||||||
<h3>
|
<h3>
|
||||||
Skład zostanie dołączony do dodanej na liście lokomotywy czołowej bądź wygenerowany z losową w przypadku jej
|
Skład zostanie dołączony do dodanej na liście lokomotywy czołowej bądź wygenerowany z losową w przypadku jej
|
||||||
braku
|
braku
|
||||||
</h3>
|
</h3> -->
|
||||||
|
|
||||||
<div class="car-preview">
|
<div class="car-preview">
|
||||||
<div class="image-wrapper">
|
<div class="image-wrapper">
|
||||||
@@ -20,7 +20,7 @@
|
|||||||
</b>
|
</b>
|
||||||
<b v-else>Podgląd typu wagonu</b>
|
<b v-else>Podgląd typu wagonu</b>
|
||||||
|
|
||||||
<div v-if="focusedCar">{{ cargoUsage[focusedCar.type.split('_')[0]] }}</div>
|
<div v-if="focusedCar">{{ carUsage[focusedCar.type.split('_')[0]] }}</div>
|
||||||
<div v-else>Najedź na rodzaj wagonu aby wyświetlić informacje</div>
|
<div v-else>Najedź na rodzaj wagonu aby wyświetlić informacje</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -29,7 +29,20 @@
|
|||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
class="btn choice-btn"
|
class="btn choice-btn"
|
||||||
v-for="carType in cargoTypeList"
|
v-for="carType in carTypeList.filter((_, i) => i < 15)"
|
||||||
|
:key="carType"
|
||||||
|
@click="toggleCarType(carType)"
|
||||||
|
@mouseenter="displayPreview(carType)"
|
||||||
|
:class="{ chosen: chosenCarTypes.includes(carType) }"
|
||||||
|
>
|
||||||
|
{{ carType }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-top: 0.5em">
|
||||||
|
<button
|
||||||
|
class="btn choice-btn"
|
||||||
|
v-for="carType in carTypeList.filter((_, i) => i >= 15)"
|
||||||
:key="carType"
|
:key="carType"
|
||||||
@click="toggleCarType(carType)"
|
@click="toggleCarType(carType)"
|
||||||
@mouseenter="displayPreview(carType)"
|
@mouseenter="displayPreview(carType)"
|
||||||
@@ -99,11 +112,11 @@ export default defineComponent({
|
|||||||
locoDataList: inject('locoDataList') as ILocomotive[],
|
locoDataList: inject('locoDataList') as ILocomotive[],
|
||||||
chosenLength: inject('chosenLength') as number,
|
chosenLength: inject('chosenLength') as number,
|
||||||
chosenMass: inject('chosenMass') as number,
|
chosenMass: inject('chosenMass') as number,
|
||||||
cargoCarList: carDataList.value.filter((car) => car.useType == 'car-cargo'),
|
carDataList,
|
||||||
cargoTypeList: carDataList.value.reduce((list, car) => {
|
carTypeList: carDataList.value.reduce((list, car) => {
|
||||||
const type = car.type.split('_')[0];
|
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);
|
list.push(type);
|
||||||
|
|
||||||
@@ -125,7 +138,22 @@ export default defineComponent({
|
|||||||
focusedCar: null as ICarWagon | null,
|
focusedCar: null as ICarWagon | null,
|
||||||
isPreviewLoading: false,
|
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',
|
'203V': 'kruszywo, kamień wapienny, odpady kopalniane',
|
||||||
'208Kf': 'drobnica, ładunki sypkie',
|
'208Kf': 'drobnica, ładunki sypkie',
|
||||||
'209c': 'wagon techniczny',
|
'209c': 'wagon techniczny',
|
||||||
@@ -150,7 +178,7 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
|
|
||||||
displayPreview(carType: string) {
|
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);
|
const randIndex = Math.floor(Math.random() * list.length);
|
||||||
|
|
||||||
if (this.focusedCar?.type == list[randIndex].type) return;
|
if (this.focusedCar?.type == list[randIndex].type) return;
|
||||||
@@ -196,7 +224,7 @@ export default defineComponent({
|
|||||||
this.store.stockList.length = 0;
|
this.store.stockList.length = 0;
|
||||||
|
|
||||||
const locoSet = this.locoDataList
|
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));
|
.filter((loco) => (!this.includeSupporterVehicles && loco.supportersOnly ? false : true));
|
||||||
|
|
||||||
const randLoco = locoSet[Math.floor(Math.random() * locoSet.length)];
|
const randLoco = locoSet[Math.floor(Math.random() * locoSet.length)];
|
||||||
@@ -207,7 +235,7 @@ export default defineComponent({
|
|||||||
totalStockLength += this.store.stockList[0].length;
|
totalStockLength += this.store.stockList[0].length;
|
||||||
totalStockMass += this.store.stockList[0].mass;
|
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.includeSupporterVehicles && cargoCar.supportersOnly) return false;
|
||||||
|
|
||||||
if (this.chosenCarTypes.find((carType) => cargoCar.type.includes(carType))) return true;
|
if (this.chosenCarTypes.find((carType) => cargoCar.type.includes(carType))) return true;
|
||||||
@@ -365,6 +393,19 @@ input {
|
|||||||
font-size: 1.2em;
|
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 {
|
button.choice-btn {
|
||||||
color: gray;
|
color: gray;
|
||||||
border-color: gray;
|
border-color: gray;
|
||||||
|
|||||||
+18
-2
@@ -1,10 +1,25 @@
|
|||||||
import { createApp } from "vue";
|
import { createApp, Directive } from "vue";
|
||||||
import App from "./App.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)
|
createApp(App)
|
||||||
.provide('Store', Store)
|
.provide('Store', Store)
|
||||||
|
.provide('isLocomotive', isLocomotive)
|
||||||
.provide('locoDataList', locoDataList)
|
.provide('locoDataList', locoDataList)
|
||||||
.provide('carDataList', carDataList)
|
.provide('carDataList', carDataList)
|
||||||
.provide('totalMass', totalMass)
|
.provide('totalMass', totalMass)
|
||||||
@@ -13,4 +28,5 @@ createApp(App)
|
|||||||
.provide('maxAllowedSpeed', maxAllowedSpeed)
|
.provide('maxAllowedSpeed', maxAllowedSpeed)
|
||||||
.provide('isTrainPassenger', isTrainPassenger)
|
.provide('isTrainPassenger', isTrainPassenger)
|
||||||
.provide('warnings', warnings)
|
.provide('warnings', warnings)
|
||||||
|
.directive('click-outside', clickOutsideDirective)
|
||||||
.mount("#app");
|
.mount("#app");
|
||||||
|
|||||||
@@ -20,12 +20,19 @@ export const Store: IStore = reactive({
|
|||||||
|
|
||||||
stockList: [] as IStock[],
|
stockList: [] as IStock[],
|
||||||
cargoOptions: [] as any[][],
|
cargoOptions: [] as any[][],
|
||||||
|
|
||||||
|
swapVehicles: false,
|
||||||
|
|
||||||
|
chosenStockListIndex: -1,
|
||||||
// locoOptions: [] as ILocomotive[],
|
// locoOptions: [] as ILocomotive[],
|
||||||
// carOptions: [] as ICarWagon[],
|
// carOptions: [] as ICarWagon[],
|
||||||
|
|
||||||
vehiclePreviewSrc: ""
|
vehiclePreviewSrc: ""
|
||||||
})
|
})
|
||||||
|
|
||||||
|
export function isLocomotive(vehicle: ILocomotive | ICarWagon): vehicle is ILocomotive {
|
||||||
|
return (vehicle as ILocomotive).power !== undefined;
|
||||||
|
}
|
||||||
|
|
||||||
export const locoDataList = computed(() => Object.keys(vehicleDataJSON).reduce(
|
export const locoDataList = computed(() => Object.keys(vehicleDataJSON).reduce(
|
||||||
(acc, vehicleTypeKey) => {
|
(acc, vehicleTypeKey) => {
|
||||||
|
|||||||
@@ -75,15 +75,21 @@ button.btn {
|
|||||||
outline: none;
|
outline: none;
|
||||||
background: none;
|
background: none;
|
||||||
|
|
||||||
|
|
||||||
transition: all 250ms;
|
transition: all 250ms;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $accentColor;
|
color: $accentColor;
|
||||||
border-color: $accentColor;
|
border-color: $accentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&--text {
|
||||||
|
font-weight: bold;
|
||||||
|
transition: all 250ms;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
button.btn-rect {
|
button.btn-rect {
|
||||||
width: 1.5em;
|
width: 1.5em;
|
||||||
height: 1.5em;
|
height: 1.5em;
|
||||||
@@ -116,7 +122,7 @@ select {
|
|||||||
color: white;
|
color: white;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
|
|
||||||
width: 20em;
|
width: 18em;
|
||||||
}
|
}
|
||||||
|
|
||||||
option {
|
option {
|
||||||
|
|||||||
+2
-2
@@ -12,9 +12,9 @@ export interface IStore {
|
|||||||
stockList: IStock[];
|
stockList: IStock[];
|
||||||
cargoOptions: any[][];
|
cargoOptions: any[][];
|
||||||
|
|
||||||
// locoOptions: ILocomotive[];
|
chosenStockListIndex: number;
|
||||||
// carOptions: ICarWagon[];
|
|
||||||
|
|
||||||
|
swapVehicles: boolean;
|
||||||
vehiclePreviewSrc: string;
|
vehiclePreviewSrc: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -11,7 +11,6 @@ export const verifyTrainSpec = (stockList: IStock[], vehicleMass: number, vehicl
|
|||||||
const headLoco = stockList[0];
|
const headLoco = stockList[0];
|
||||||
const carList = stockList.filter(stock => !stock.isLoco);
|
const carList = stockList.filter(stock => !stock.isLoco);
|
||||||
|
|
||||||
console.log(carList, vehicleUseType);
|
|
||||||
|
|
||||||
|
|
||||||
const isTrainPassenger = carList.length != 0
|
const isTrainPassenger = carList.length != 0
|
||||||
@@ -19,6 +18,5 @@ export const verifyTrainSpec = (stockList: IStock[], vehicleMass: number, vehicl
|
|||||||
&& vehicleUseType == EVehicleUseType.CAR_PASSENGER
|
&& vehicleUseType == EVehicleUseType.CAR_PASSENGER
|
||||||
: false;
|
: false;
|
||||||
|
|
||||||
console.log("Skład pasażerski: " + isTrainPassenger);
|
|
||||||
console.log("Skład towarowy: " + !isTrainPassenger);
|
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user