Spythere/pojazdownik
1
0
Fork 0
mirror of https://github.com/Spythere/pojazdownik.git synced 2026-05-03 05:18:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Kopiowanie składu do schowka; możliwość losowania wagonów pasażerskich

Browse Source
This commit is contained in:
Spythere
2021-11-22 17:45:16 +01:00
parent 2d65c90e94
commit d46362a751
11 changed files with 190 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/InputsSection.vue
+31 -15
View File
@@ -29,9 +29,13 @@
</option>
</select>
<button class="btn--add" @click="addVehicle">
<button class="btn--add" @click="addVehicle" title="Dodaj pojazd">
<img :src="icons.add" alt="add vehicle" />
</button>
<!-- <button class="btn--swap" @click="prepareSwapVehicles" title="Zamień pojazdy">
<img :src="icons.swap" alt="swap vehicle" />
</button> -->
</div>
<div class="input_checkbox">
@@ -42,6 +46,8 @@
</div>
</div>
<div class="spacer"></div>
<div class="input inputs_car">
<div class="input_container">
<h2 class="input_header">RODZAJ WAGONU</h2>
@@ -71,9 +77,13 @@
</option>
</select>
<button class="btn--add" @click="addVehicle">
<button class="btn--add" @click="addVehicle" title="Dodaj pojazd">
<img :src="icons.add" alt="add vehicle" />
</button>
<!-- <button class="btn--swap" @click="prepareSwapVehicles" title="Zamień pojazdy">
<img :src="icons.swap" alt="swap vehicle" />
</button> -->
</div>
<div class="input_list cargo">
@@ -88,8 +98,8 @@
v-model="store.chosenCargo"
>
<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 v-for="cargo in store.chosenCar?.cargoList" :value="cargo" :key="cargo.id">
{{ cargo.id }}
</option>
@@ -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);
},
src/components/ListSection.vue
+51 -20
View File
@@ -46,12 +46,19 @@
<button class="btn" @click="shuffleCars">TASUJ WAGONY</button>
<button class="btn" @click="openRandomizerCard">LOSUJ SKŁAD</button>
</div>
<div class="stock-list_specs">
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>
</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="warning" v-if="warnings.locoNotSuitable.value">
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>
<ul>
<ul ref="stock-list">
<li v-if="store.stockList.length == 0" class="list-empty">
<div class="item-content">Lista pojazdów jest pusta!</div>
</li>
@@ -72,7 +79,7 @@
<li
v-for="(stock, i) in store.stockList"
:key="stock.type + i"
:class="{ loco: stock.isLoco }"
:class="{ loco: stock.isLoco, selected: store.chosenStockListIndex == i }"
:data-id="i"
tabindex="0"
@focus="onListItemFocus(i)"
@@ -127,6 +134,7 @@ import RandomizerCard from './RandomizerCard.vue';
export default defineComponent({
components: { RandomizerCard },
setup() {
const store = inject('Store') as IStore;
@@ -185,10 +193,33 @@ export default defineComponent({
} 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: {
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;
}
src/components/RandomizerCard.vue
+52 -11
View File
@@ -3,12 +3,12 @@
<!-- <button class="btn" @click="closeCard">X</button> -->
<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>
Skład zostanie dołączony do dodanej na liście lokomotywy czołowej bądź wygenerowany z losową w przypadku jej
braku
</h3>
</h3> -->
<div class="car-preview">
<div class="image-wrapper">
@@ -20,7 +20,7 @@
</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>
@@ -29,7 +29,20 @@
<div>
<button
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"
@click="toggleCarType(carType)"
@mouseenter="displayPreview(carType)"
@@ -99,11 +112,11 @@ export default defineComponent({
locoDataList: inject('locoDataList') as ILocomotive[],
chosenLength: inject('chosenLength') as number,
chosenMass: inject('chosenMass') as number,
cargoCarList: carDataList.value.filter((car) => 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;