mirror of
https://github.com/Spythere/pojazdownik.git
synced 2026-05-03 05:18:10 +00:00
626 lines
15 KiB
Vue
626 lines
15 KiB
Vue
<template>
|
|
<div class="bottom">
|
|
<div class="bg-dimmer" v-if="isRandomizerCardOpen"></div>
|
|
|
|
<transition name="card-anim">
|
|
<randomizer-card v-if="isRandomizerCardOpen" />
|
|
</transition>
|
|
|
|
<section class="image">
|
|
<div class="image__wrapper">
|
|
<div
|
|
class="image__content"
|
|
:class="{
|
|
supporter: (store.chosenLoco || store.chosenCar)?.supportersOnly,
|
|
}"
|
|
>
|
|
<div class="no-img" v-if="!store.chosenCar && !store.chosenLoco">PODGLĄD WYBRANEGO POJAZDU</div>
|
|
<div class="empty-message" v-if="store.imageLoading">ŁADOWANIE OBRAZU...</div>
|
|
<img
|
|
v-if="store.chosenLoco || store.chosenCar"
|
|
:src="store.chosenLoco?.imageSrc || store.chosenCar?.imageSrc"
|
|
:alt="store.chosenLoco?.type || store.chosenCar?.type"
|
|
@load="onImageLoad"
|
|
@click="onImageClick"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="brief-info" v-if="store.chosenLoco || store.chosenCar">
|
|
<b class="text--accent">{{ (store.chosenLoco || store.chosenCar)?.type }}</b>
|
|
<div>{{ vehicleTypes[store.chosenLoco?.power || store.chosenCar?.useType || 'loco-e'] }}</div>
|
|
<div>
|
|
{{ (store.chosenCar || store.chosenLoco)?.length }}m | {{ (store.chosenCar || store.chosenLoco)?.mass }}t |
|
|
{{ (store.chosenCar || store.chosenLoco)?.maxSpeed }} km/h
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="spacer"></section>
|
|
|
|
<section class="stock-list">
|
|
<div class="stock-list_buttons">
|
|
<button class="btn" @click="downloadStock">POBIERZ POCIĄG</button>
|
|
<button class="btn" @click="resetStock">ZRESETUJ LISTĘ</button>
|
|
<span></span>
|
|
<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="warnings">
|
|
<div class="warning" v-if="warnings.locoNotSuitable.value">
|
|
Lokomotywy EP07 i EP08 są przeznaczone jedynie do ruchu pasażerskiego!
|
|
</div>
|
|
|
|
<div class="warning" v-if="warnings.trainTooLong.value">Ten skład jest za długi!</div>
|
|
|
|
<div class="warning" v-if="warnings.trainTooHeavy.value">Ten skład jest za ciężki!</div>
|
|
|
|
<div class="warning" v-if="warnings.tooManyLocos.value">Ten skład posiada za dużo pojazdów trakcyjnych!</div>
|
|
</div>
|
|
|
|
<ul>
|
|
<li v-if="store.stockList.length == 0" class="list-empty">
|
|
<div class="item-content">Lista pojazdów jest pusta!</div>
|
|
</li>
|
|
|
|
<li
|
|
v-for="(stock, i) in store.stockList"
|
|
:key="stock.type + i"
|
|
:class="{ loco: stock.isLoco }"
|
|
:data-id="i"
|
|
tabindex="0"
|
|
@focus="onListItemFocus(i)"
|
|
:ref="`item-${i}`"
|
|
>
|
|
<div
|
|
class="item-content"
|
|
@dragstart="onDragStart(i)"
|
|
@drop="onDrop($event, i)"
|
|
@dragover="allowDrop"
|
|
draggable="true"
|
|
>
|
|
<span class="stock__type" :class="{ supporter: stock.supportersOnly }">
|
|
{{ stock.isLoco ? stock.type : getCarSpecFromType(stock.type) }}
|
|
</span>
|
|
<span class="stock__cargo" v-if="stock.cargo"> {{ stock.cargo.id }} </span>
|
|
<span class="stock__length"> {{ stock.length }}m </span>
|
|
<span class="stock__mass">{{ stock.cargo ? stock.cargo.totalMass : stock.mass }}t </span>
|
|
<span class="stock__speed"> {{ stock.maxSpeed }}km/h </span>
|
|
</div>
|
|
|
|
<div class="item-actions">
|
|
<div class="count">
|
|
<button class="action-btn" @click="subStock(i)">
|
|
<img :src="icons.sub" alt="subtract vehicle count" />
|
|
</button>
|
|
<span>{{ stock.count }} </span>
|
|
<button class="action-btn" @click="addStock(i)">
|
|
<img :src="icons.add" alt="add vehicle count" />
|
|
</button>
|
|
</div>
|
|
<button class="action-btn" @click="moveUpStock(i)">
|
|
<img :src="icons.higher" alt="move up vehicle" />
|
|
</button>
|
|
<button class="action-btn" @click="moveDownStock(i)">
|
|
<img :src="icons.lower" alt="move down vehicle" />
|
|
</button>
|
|
<button class="action-btn" @click="removeStock(i)">
|
|
<img :src="icons.remove" alt="remove vehicle" />
|
|
</button>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { computed, ComputedRef, defineComponent, inject, provide, reactive, ref } from 'vue';
|
|
import { ICarWagon, ILocomotive, IStore } from '@/types';
|
|
import RandomizerCard from './RandomizerCard.vue';
|
|
|
|
export default defineComponent({
|
|
components: { RandomizerCard },
|
|
setup() {
|
|
const store = inject('Store') as IStore;
|
|
|
|
const isRandomizerCardOpen = ref(false);
|
|
|
|
provide('isCardOpen', isRandomizerCardOpen);
|
|
provide('chosenLength', ref(350));
|
|
provide('chosenMass', ref(1000));
|
|
provide('chosenLocoType', ref('loco-e'));
|
|
provide('chosenCarTypes', reactive([]));
|
|
provide('includeSupporterVehicles', ref(false));
|
|
|
|
return {
|
|
store,
|
|
locoDataList: inject('locoDataList') as ILocomotive[],
|
|
carDataList: inject('carDataList') as ICarWagon[],
|
|
isTrainPassenger: inject('isTrainPassenger') as boolean,
|
|
totalLength: inject('totalLength') as number,
|
|
totalMass: inject('totalMass') as number,
|
|
maxStockSpeed: inject('maxStockSpeed') as number,
|
|
maxAllowedSpeed: inject('maxAllowedSpeed') as number,
|
|
|
|
warnings: inject('warnings') as {
|
|
locoNotSuitable: ComputedRef<boolean>;
|
|
trainTooLong: ComputedRef<boolean>;
|
|
trainTooHeavy: ComputedRef<boolean>;
|
|
tooManyLocos: ComputedRef<boolean>;
|
|
},
|
|
|
|
isRandomizerCardOpen,
|
|
|
|
hasSupporterOnlyVehicle: computed(() => store.stockList.some((stock) => stock.supportersOnly)),
|
|
};
|
|
},
|
|
|
|
data: () => ({
|
|
icons: {
|
|
add: require('@/assets/add-icon.svg'),
|
|
sub: require('@/assets/sub-icon.svg'),
|
|
remove: require('@/assets/remove-icon.svg'),
|
|
lower: require('@/assets/lower-icon.svg'),
|
|
higher: require('@/assets/higher-icon.svg'),
|
|
},
|
|
|
|
imageOffsetY: 0,
|
|
|
|
draggedVehicleID: -1,
|
|
|
|
vehicleTypes: {
|
|
'loco-e': 'ELEKTROWÓZ',
|
|
'loco-s': 'SPALINOWÓZ',
|
|
'loco-ezt': 'ELEKTRYCZNY ZESP. TRAKCYJNY',
|
|
'loco-szt': 'SPALINOWY ZESP. TRAKCYJNY',
|
|
'car-passenger': 'WAGON PASAŻERSKI',
|
|
'car-cargo': 'WAGON TOWAROWY',
|
|
} as { [key: string]: string },
|
|
}),
|
|
|
|
methods: {
|
|
onListItemFocus(vehicleID: number) {
|
|
const vehicle = this.store.stockList[vehicleID];
|
|
|
|
if ((this.store.chosenCar || this.store.chosenLoco)?.imageSrc != vehicle.imgSrc) this.store.imageLoading = true;
|
|
|
|
if (this.store.showSupporter && !vehicle.supportersOnly) {
|
|
this.store.showSupporter = false;
|
|
}
|
|
|
|
if (vehicle.isLoco) {
|
|
this.store.chosenLocoPower = vehicle.useType;
|
|
|
|
this.store.chosenLoco = this.locoDataList.find((v) => v.type == vehicle.type) || null;
|
|
|
|
this.store.chosenCar = null;
|
|
this.store.chosenCargo = null;
|
|
|
|
return;
|
|
}
|
|
|
|
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;
|
|
},
|
|
|
|
getCarSpecFromType(typeStr: string) {
|
|
const specArray = typeStr.split('_');
|
|
|
|
if (specArray.length == 0) return null;
|
|
|
|
/* 111a_Grafitti_1 */
|
|
if (specArray.length == 3) return `${specArray[0]} ${specArray[1]}-${specArray[2]}`;
|
|
|
|
/* 111a_PKP_Bnouz_01 */
|
|
return `${specArray[0]} ${specArray[2]}-${specArray[3]} (${specArray[1]})`;
|
|
},
|
|
|
|
resetStock() {
|
|
this.store.stockList.length = 0;
|
|
},
|
|
|
|
addStock(index: number) {
|
|
this.store.stockList[index].count++;
|
|
},
|
|
|
|
subStock(index: number) {
|
|
if (this.store.stockList[index].count < 2) return;
|
|
|
|
this.store.stockList[index].count--;
|
|
},
|
|
|
|
removeStock(index: number) {
|
|
this.store.stockList = this.store.stockList.filter((stock, i) => i != index);
|
|
},
|
|
|
|
moveUpStock(index: number) {
|
|
if (index < 1) return;
|
|
|
|
const tempStock = this.store.stockList[index];
|
|
|
|
this.store.stockList[index] = this.store.stockList[index - 1];
|
|
this.store.stockList[index - 1] = tempStock;
|
|
},
|
|
|
|
moveDownStock(index: number) {
|
|
if (index > this.store.stockList.length - 2) return;
|
|
|
|
const tempStock = this.store.stockList[index];
|
|
|
|
this.store.stockList[index] = this.store.stockList[index + 1];
|
|
this.store.stockList[index + 1] = tempStock;
|
|
},
|
|
|
|
shuffleCars() {
|
|
const availableIndexes = this.store.stockList.reduce((acc, stock, i) => {
|
|
if (!stock.isLoco) acc.push(i);
|
|
|
|
return acc;
|
|
}, [] as number[]);
|
|
|
|
for (let i = 0; i < this.store.stockList.length; i++) {
|
|
if (!availableIndexes.includes(i)) continue;
|
|
|
|
availableIndexes.splice(i, -1);
|
|
|
|
const randAvailableIndex = availableIndexes[Math.floor(Math.random() * availableIndexes.length)];
|
|
const tempSwap = this.store.stockList[randAvailableIndex];
|
|
|
|
this.store.stockList[randAvailableIndex] = this.store.stockList[i];
|
|
this.store.stockList[i] = tempSwap;
|
|
}
|
|
},
|
|
|
|
openRandomizerCard() {
|
|
this.isRandomizerCardOpen = true;
|
|
},
|
|
|
|
downloadStock() {
|
|
if (Object.values(this.warnings).some((v) => v.value == true)) {
|
|
``;
|
|
const allowDownload = confirm(
|
|
'Jazda tym pociągiem może być niezgodna z regulaminem symulatora! Czy na pewno chcesz kontynuować?'
|
|
);
|
|
|
|
if (!allowDownload) return;
|
|
}
|
|
|
|
const fileName = prompt('Nazwij plik:', 'pociag');
|
|
|
|
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 file = fileName + '.con';
|
|
|
|
var e = document.createEvent('MouseEvents'),
|
|
a = document.createElement('a');
|
|
a.download = file;
|
|
a.href = window.URL.createObjectURL(blob);
|
|
a.dataset.downloadurl = ['', a.download, a.href].join(':');
|
|
e.initEvent('click', true, false);
|
|
a.dispatchEvent(e);
|
|
},
|
|
|
|
onDragStart(vehicleIndex: number) {
|
|
this.draggedVehicleID = vehicleIndex;
|
|
},
|
|
|
|
onDrop(e: DragEvent, vehicleIndex: number) {
|
|
e.preventDefault();
|
|
|
|
let targetEl: Element | null = this.$refs[`item-${vehicleIndex}`] as Element;
|
|
|
|
if (!targetEl) return;
|
|
|
|
const dataID = targetEl.attributes.getNamedItem('data-id')?.textContent;
|
|
|
|
if (!dataID) return;
|
|
|
|
const tempVehicle = this.store.stockList[Number(dataID)];
|
|
|
|
this.store.stockList[Number(dataID)] = this.store.stockList[this.draggedVehicleID];
|
|
this.store.stockList[this.draggedVehicleID] = tempVehicle;
|
|
},
|
|
|
|
allowDrop(e: DragEvent) {
|
|
e.preventDefault();
|
|
},
|
|
|
|
onImageLoad() {
|
|
this.store.imageLoading = false;
|
|
},
|
|
|
|
onImageClick() {
|
|
const chosenVehicle = this.store.chosenCar || this.store.chosenLoco;
|
|
|
|
if (!chosenVehicle) return;
|
|
|
|
this.store.vehiclePreviewSrc = chosenVehicle.imageSrc.replace('300', '800');
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '../styles/global';
|
|
|
|
.bg-dimmer {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
|
|
background: rgba(black, 0.85);
|
|
z-index: 100;
|
|
}
|
|
|
|
.bottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
margin-top: 2.5em;
|
|
|
|
@media screen and (max-width: 800px) {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.image {
|
|
display: flex;
|
|
padding: 0 0 2em 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.warnings {
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
.warning {
|
|
padding: 0.25em;
|
|
margin-top: 0.5em;
|
|
background: $accentColor;
|
|
color: black;
|
|
|
|
font-weight: bold;
|
|
}
|
|
|
|
.spacer {
|
|
flex: 2 1 10%;
|
|
}
|
|
|
|
.image {
|
|
flex-grow: 2;
|
|
padding: 0 1em 0 0;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
&__wrapper {
|
|
max-width: 380px;
|
|
width: 22em;
|
|
height: 13em;
|
|
}
|
|
|
|
&__content {
|
|
border: 1px solid white;
|
|
position: relative;
|
|
|
|
height: 100%;
|
|
|
|
&.supporter {
|
|
border: 1px solid salmon;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
cursor: pointer;
|
|
}
|
|
|
|
.empty-message,
|
|
.no-img {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0.3em 0;
|
|
}
|
|
|
|
.empty-message {
|
|
background: rgba(#000, 0.75);
|
|
}
|
|
}
|
|
}
|
|
|
|
.brief-info {
|
|
text-align: center;
|
|
|
|
margin: 1em 0;
|
|
|
|
font-size: 1.1em;
|
|
|
|
b {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
div {
|
|
margin: 0.25em 0;
|
|
}
|
|
}
|
|
|
|
.stock-list {
|
|
flex-grow: 3;
|
|
|
|
width: 100%;
|
|
|
|
&_buttons {
|
|
display: flex;
|
|
|
|
span {
|
|
flex-grow: 2;
|
|
}
|
|
|
|
button {
|
|
font-size: 0.9em;
|
|
padding: 0.4em 0.55em;
|
|
margin: 0 0.5em 1em 0;
|
|
|
|
&:nth-child(5) {
|
|
margin-right: 0;
|
|
}
|
|
|
|
&:focus {
|
|
color: $accentColor;
|
|
border-color: $accentColor;
|
|
}
|
|
}
|
|
}
|
|
|
|
ul {
|
|
margin-top: 1em;
|
|
|
|
max-height: 500px;
|
|
overflow: auto;
|
|
}
|
|
|
|
ul li {
|
|
outline: none;
|
|
cursor: pointer;
|
|
|
|
&.list-empty {
|
|
border: 1px solid whitesmoke;
|
|
padding: 0 0.5em;
|
|
}
|
|
|
|
&:focus .item-content {
|
|
color: $accentColor;
|
|
}
|
|
|
|
&:hover .item-content {
|
|
color: $accentColor;
|
|
}
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.item-content {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
color: white;
|
|
font-weight: 700;
|
|
margin: 0.5em 0;
|
|
|
|
transition: color 100ms;
|
|
|
|
span {
|
|
padding: 0.5em;
|
|
margin-right: 0.25em;
|
|
margin-top: 0.25em;
|
|
}
|
|
|
|
@media screen and (max-width: 800px) {
|
|
span {
|
|
padding: 0.25em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.count {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
margin-right: 0.5em;
|
|
|
|
span {
|
|
margin: 0 0.5em;
|
|
/* font-size: 1.25em; */
|
|
|
|
color: $accentColor;
|
|
}
|
|
}
|
|
|
|
img {
|
|
vertical-align: middle;
|
|
|
|
width: 1.3em;
|
|
height: 1.3em;
|
|
}
|
|
|
|
button {
|
|
margin: 0 0.25em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.stock {
|
|
&__type {
|
|
background-color: #222;
|
|
|
|
&.supporter {
|
|
background-color: #ff887b;
|
|
}
|
|
}
|
|
|
|
&__cargo {
|
|
background-color: #333;
|
|
}
|
|
|
|
&__length,
|
|
&__mass,
|
|
&__speed {
|
|
background-color: #555;
|
|
}
|
|
}
|
|
|
|
.card-anim {
|
|
&-enter {
|
|
opacity: 0;
|
|
}
|
|
|
|
&-enter-active,
|
|
&-leave-active {
|
|
transition: opacity 300ms;
|
|
}
|
|
|
|
&-leave-to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style>
|