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

Update 1.0.4

Browse Source
This commit is contained in:
Spythere
2021-11-14 17:42:13 +01:00
parent c94d946b2b
commit 60d8da9598
9 changed files with 405 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.firebase/hosting.ZGlzdA.cache
+13 -13
View File
@@ -1,13 +1,13 @@
favicon.ico,1636827777911,665ba81c9556ba00abb1a0fa575fe801b3c35f23481b17528a211b8c3021f7cd
index.html,1636827777911,fa8eaa2d6bd4e541427ec07347d7da71f50612ecf4ef3a45fdccaeace6928dc1
css/app.0c78126f.css,1636827777919,1ebc7accdf21a47ba3ab8670b0418a2d02dbd8f3026a9dbb395d90e5e6892598
img/add-icon.a0f313fe.svg,1636827777920,be43aa8b694c90777971ad2d7f611f52c7ee172131fe2e24a82348891bb6aa18
img/higher-icon.68df973e.svg,1636827777920,258bcb0fc4c62a0ecd53681bfa4777451e0cb4b980e1094f68d89d4077fa657a
img/lower-icon.7c306380.svg,1636827777911,286e1759ea8d4c11327f425f6d6af41603b329dab36c419b228acbea217c2080
img/remove-icon.09c0dbc9.svg,1636827777919,1e01bccdf38cee755fc54c9768b4089fdb11d904a6b9aa86fcb20a2357dc8d61
img/sub-icon.bfa10f67.svg,1636827777919,afa120d2f8afe18161a6ed011eb0482ef9604fd35c1d3be8cd93b1087b1138eb
img/logo.c9fcc748.svg,1636827777919,59a9ce681c6123558f2b025931a262148f1d0bb47d5a3300a14a2e9020a85bc9
js/app.78b717a5.js,1636827777919,ddc6792e8609c4c1f5d656e3a44976aa859459c5215fe845aba915abe52ce623
js/app.78b717a5.js.map,1636827777919,b3a23756524af4e39c8f58e977f76d4696d81873ad5289b97329d3711ee0462f
js/chunk-vendors.ed762bc1.js,1636827777919,38a7f26b89a6c5b680c0a97a5dc9687420e7a0b52b5259130ddd6a0ffbb21375
js/chunk-vendors.ed762bc1.js.map,1636827777920,4e64727d5a57baffe7203fe67e814b80b4257060b5284f05e599e18037d18e33
favicon.ico,1636839873685,665ba81c9556ba00abb1a0fa575fe801b3c35f23481b17528a211b8c3021f7cd
index.html,1636839873685,2bfbcf0ae387abf043a6c4012c8383751c3df6bac2abb5fbfa00ecb7ec1e29ba
css/app.e318326a.css,1636839873687,5f8edf44d0d80443531b74e2fba1c192d8f524f7a92daab577abd758c568eb73
img/add-icon.a0f313fe.svg,1636839873690,be43aa8b694c90777971ad2d7f611f52c7ee172131fe2e24a82348891bb6aa18
img/higher-icon.68df973e.svg,1636839873690,258bcb0fc4c62a0ecd53681bfa4777451e0cb4b980e1094f68d89d4077fa657a
img/lower-icon.7c306380.svg,1636839873685,286e1759ea8d4c11327f425f6d6af41603b329dab36c419b228acbea217c2080
img/remove-icon.09c0dbc9.svg,1636839873690,1e01bccdf38cee755fc54c9768b4089fdb11d904a6b9aa86fcb20a2357dc8d61
img/logo.c9fcc748.svg,1636839873690,59a9ce681c6123558f2b025931a262148f1d0bb47d5a3300a14a2e9020a85bc9
img/sub-icon.bfa10f67.svg,1636839873690,afa120d2f8afe18161a6ed011eb0482ef9604fd35c1d3be8cd93b1087b1138eb
js/app.e79b9cbd.js,1636839873687,371740d1e17483c569dbfde222073ba25cca03b522d4af59c9dd617d3c5372e6
js/app.e79b9cbd.js.map,1636839873691,2e93a681e3d233d413b4045488ba0fedd0cf40592570b9e743b52bd36d8b5c62
js/chunk-vendors.e3e59fe7.js,1636839873690,b8da867c1596780117d35525b8065aeaa4337aa2caee1c5bc043834baf717406
js/chunk-vendors.e3e59fe7.js.map,1636839873692,cdae68767a1b7010a6ccdcb43952d9fcd5d1d974617e4d02b4da5919d28dfbac
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "pojazdownik",
"version": "1.0.3",
"version": "1.0.4",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
src/App.vue
+48 -9
View File
@@ -5,13 +5,17 @@
</header>
<main>
<div class="image-preview" v-if="store.vehiclePreviewSrc != ''" @click="() => (store.vehiclePreviewSrc = '')">
<img :src="store.vehiclePreviewSrc" alt="preview" />
</div>
<inputs-section />
<list-section />
</main>
<footer>
<div class="text--grayed" style="margin-bottom: 0.25em">
Ta strona ma charakter informacyjny. Autor nie ponosi odpowiedzialności za
tworzenie pociągów niezgodnych z regulaminem symulatora Train Driver 2!
Ta strona ma charakter informacyjny. Autor nie ponosi odpowiedzialności za tworzenie pociągów niezgodnych z
regulaminem symulatora Train Driver 2!
</div>
&copy;
<a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
@@ -20,12 +24,13 @@
</template>
<script lang="ts">
import packageInfo from ".././package.json";
import packageInfo from '.././package.json';
import { defineComponent } from "vue";
import { defineComponent, inject } from 'vue';
import ListSection from "@/components/ListSection.vue";
import InputsSection from "@/components/InputsSection.vue";
import ListSection from '@/components/ListSection.vue';
import InputsSection from '@/components/InputsSection.vue';
import { IStore } from './types';
export default defineComponent({
components: {
@@ -35,17 +40,30 @@ export default defineComponent({
data: () => ({
VERSION: packageInfo.version,
logoSVG: require("@/assets/logo.svg"),
logoSVG: require('@/assets/logo.svg'),
}),
setup() {
return {};
const store = inject('Store') as IStore;
return {
store,
};
},
mounted() {
window.addEventListener('keydown', (ev) => {
if (this.store.vehiclePreviewSrc == '') return;
if (ev.key.toLowerCase() == 'escape') this.store.vehiclePreviewSrc = '';
});
// window.focus();
},
});
</script>
<style lang="scss">
@import "./styles/global";
@import './styles/global';
/* APP */
#app {
@@ -91,6 +109,27 @@ h2 {
font-size: 1.5em;
}
.image-preview {
position: fixed;
top: 0;
left: 0;
z-index: 99;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: rgba(black, 0.85);
img {
width: 90%;
max-width: 800px;
}
}
/* MAIN SECTION */
main {
src/components/InputsSection.vue
+235 -140
View File
@@ -4,88 +4,74 @@
<div class="input_container">
<h2 class="input_header">LOKOMOTYWA / ZESP. TRAKCYJNY</h2>
<div class="input_radio">
<label v-for="label in locoLabels" :for="label.id" :key="label.id">
<input
type="radio"
name="loco"
:id="label.id"
:value="label.id"
:checked="store.chosenLocoPower == label.id"
@change="onLocoPowerChange(label.id)"
v-model="store.chosenLocoPower"
/>
<span>{{ label.title }}</span>
</label>
<button
v-for="label in locoLabels"
:key="label.id"
@click="onLocoPowerChange(label.id)"
:class="{ checked: store.chosenLocoPower == label.id }"
>
{{ label.title }}
</button>
</div>
<div class="input_list type">
<select
id="loco-select"
ref="loco-select"
v-model="store.chosenLoco"
@change="onLocoTypeChange"
data-select="loco"
>
<option :value="null" disabled>Wybierz pojazd z listy</option>
<option v-for="loco in locoOptions" :value="loco" :key="loco.type">
{{ loco.supportersOnly ? '*S*' : '' }}
{{ loco.type }}
</option>
</select>
<button @click="addVehicle">
<button class="btn--add" @click="addVehicle">
<img :src="icons.add" alt="add vehicle" />
</button>
</div>
<div class="input_checkbox">
<label for="supporter">
<input
type="checkbox"
id="supporter"
v-model="store.showSupporter"
/>
<span>Pokaż pojazdy dla supporterów</span>
</label>
<button @click="onShowSupporterChange" :class="{ checked: this.store.showSupporter }">
Pokaż tylko pojazdy dla supporterów
</button>
</div>
</div>
</div>
<div
class="input inputs_car"
:class="{
disabled:
store.chosenLocoPower == 'loco-ezt' ||
store.chosenLocoPower == 'loco-szt',
}"
>
<div class="input inputs_car">
<div class="input_container">
<h2 class="input_header">RODZAJ WAGONU</h2>
<div class="input_radio">
<label v-for="label in carLabels" :for="label.id" :key="label.id">
<input
type="radio"
name="car"
:id="label.id"
:checked="store.chosenCarUseType == label.id"
:value="label.id"
v-model="store.chosenCarUseType"
@change="onCarUseTypeChange(label.id)"
/>
<span>{{ label.title }}</span>
</label>
<button
v-for="label in carLabels"
:key="label.id"
@click="onCarUseTypeChange(label.id)"
:class="{ checked: store.chosenCarUseType == label.id }"
>
{{ label.title }}
</button>
</div>
<div class="input_list type">
<select
id="car-select"
ref="car-select"
v-model="store.chosenCar"
@change="onCarTypeChange"
data-select="car"
>
<option :value="null" disabled>Wybierz wagon z listy</option>
<option v-for="car in carOptions" :value="car" :key="car.type">
{{ car.supportersOnly ? '*S*' : '' }}
{{ car.type }}
</option>
</select>
<button @click="addVehicle">
<button class="btn--add" @click="addVehicle">
<img :src="icons.add" alt="add vehicle" />
</button>
</div>
@@ -98,21 +84,13 @@
(store.chosenCar && store.chosenCar.useType == 'car-passenger') ||
!store.chosenCar
"
data-select="cargo"
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
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 }}
</option>
</select>
@@ -123,62 +101,153 @@
</template>
<script lang="ts">
import { ICarWagon, ILocomotive, IStore } from "@/types";
import { defineComponent, inject } from "vue";
import { ICarWagon, ILocomotive, IStore } from '@/types';
import { defineComponent, inject } from 'vue';
function isLocomotive(
vehicle: ILocomotive | ICarWagon
): vehicle is ILocomotive {
function isLocomotive(vehicle: ILocomotive | ICarWagon): vehicle is ILocomotive {
return (vehicle as ILocomotive).power !== undefined;
}
export default defineComponent({
setup() {
const store = inject("Store") as IStore;
const store = inject('Store') as IStore;
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,
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,
};
},
mounted() {
document.addEventListener('wheel', (ev) => {
if (!ev.target) return;
const selectAttr = (ev.target as Element).attributes.getNamedItem('data-select');
if (!selectAttr) return;
if (selectAttr.value == 'loco') {
const chosenLoco = this.store.chosenLoco;
if (!chosenLoco) {
this.store.chosenLoco = this.locoOptions[0];
this.onLocoTypeChange();
return;
}
if (ev.deltaY > 0) {
const nextOptionIndex = this.locoOptions.findIndex((opt) => opt.type == chosenLoco.type) + 1;
if (nextOptionIndex >= this.locoOptions.length) return;
this.store.chosenLoco = this.locoOptions[nextOptionIndex];
this.onLocoTypeChange();
} else {
const prevOptionIndex = this.locoOptions.findIndex((opt) => opt.type == chosenLoco.type) - 1;
if (prevOptionIndex < 0) return;
this.store.chosenLoco = this.locoOptions[prevOptionIndex];
this.onLocoTypeChange();
}
}
if (selectAttr.value == 'car') {
const chosenCar = this.store.chosenCar;
if (!chosenCar) {
this.store.chosenCar = this.carOptions[0];
this.onCarTypeChange();
return;
}
if (ev.deltaY > 0) {
const nextOptionIndex = this.carOptions.findIndex((opt) => opt.type == chosenCar.type) + 1;
if (nextOptionIndex >= this.carOptions.length) return;
this.store.chosenCar = this.carOptions[nextOptionIndex];
this.onCarTypeChange();
} else {
const prevOptionIndex = this.carOptions.findIndex((opt) => opt.type == chosenCar.type) - 1;
if (prevOptionIndex < 0) return;
this.store.chosenCar = this.carOptions[prevOptionIndex];
this.onCarTypeChange();
}
}
if (selectAttr.value == 'cargo') {
if (!this.store.chosenCar) return;
if (!this.store.chosenCar.cargoList || this.store.chosenCar.cargoList.length == 0) return;
const chosenCargoList = this.store.chosenCar.cargoList;
if (!this.store.chosenCargo) {
this.store.chosenCargo = chosenCargoList[0];
return;
}
if (ev.deltaY > 0) {
const nextOptionIndex = chosenCargoList.findIndex((cargo) => cargo.id == this.store.chosenCargo?.id) + 1;
if (nextOptionIndex >= chosenCargoList.length) return;
this.store.chosenCargo = chosenCargoList[nextOptionIndex];
} else {
const prevOptionIndex = chosenCargoList.findIndex((cargo) => cargo.id == this.store.chosenCargo?.id) - 1;
if (prevOptionIndex < 0) return;
this.store.chosenCargo = chosenCargoList[prevOptionIndex];
}
}
});
this.onLocoPowerChange('loco-e');
this.onCarUseTypeChange('car-passenger');
},
data: () => ({
icons: {
add: require("@/assets/add-icon.svg"),
add: require('@/assets/add-icon.svg'),
},
locoLabels: [
{
id: "loco-e",
title: "ELEKTROWÓZ",
id: 'loco-e',
title: 'ELEKTROWÓZ',
},
{
id: "loco-s",
title: "SPALINOWÓZ",
id: 'loco-s',
title: 'SPALINOWÓZ',
},
{
id: "loco-ezt",
title: "EZT",
id: 'loco-ezt',
title: 'EZT',
},
{
id: "loco-szt",
title: "SZT",
id: 'loco-szt',
title: 'SZT',
},
],
carLabels: [
{
id: "car-passenger",
title: "PASAŻERSKI",
id: 'car-passenger',
title: 'PASAŻERSKI',
},
{
id: "car-cargo",
title: "TOWAROWY",
id: 'car-cargo',
title: 'TOWAROWY',
},
],
}),
@@ -187,28 +256,52 @@ export default defineComponent({
locoOptions() {
return this.locoDataList
.filter((loco) => loco.power == this.store.chosenLocoPower)
.sort((a, b) => (a.type > b.type ? -1 : 1));
.sort((a, b) => (a.type > b.type ? 1 : -1))
.sort((a) => (a.supportersOnly ? 1 : -1));
},
carOptions() {
return this.carDataList
.filter((car) => car.useType == this.store.chosenCarUseType)
.sort((a, b) => (a.type > b.type ? 1 : -1));
.sort((a, b) => (a.type > b.type ? 1 : -1))
.sort((a) => (a.supportersOnly ? 1 : -1));
},
},
methods: {
onShowSupporterChange() {
this.store.showSupporter = !this.store.showSupporter;
console.log(this.store.showSupporter);
if (this.store.showSupporter) {
const chosenVehicle = this.store.chosenCar || this.store.chosenLoco;
if (!chosenVehicle) return;
if (!chosenVehicle.supportersOnly) {
this.store.chosenCar = null;
this.store.chosenLoco = null;
}
}
},
onLocoPowerChange(inputId: string) {
this.store.chosenLoco = null;
this.store.imageLoading = false;
this.store.chosenLocoPower = inputId;
(this.$refs['loco-select'] as HTMLElement).focus();
},
onCarUseTypeChange(inputId: string) {
this.store.chosenCar = null;
if (inputId == "car-passenger") this.store.chosenCargo = null;
this.store.imageLoading = false;
this.store.chosenCarUseType = inputId;
if (inputId == 'car-passenger') this.store.chosenCargo = null;
},
onCarTypeChange() {
@@ -231,15 +324,9 @@ export default defineComponent({
if (!vehicle) return;
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 (isLocomotive(vehicle) && previousStock && previousStock.type == vehicle.type) {
this.store.stockList[this.store.stockList.length - 1].count++;
return;
}
@@ -262,33 +349,23 @@ export default defineComponent({
maxSpeed: vehicle.maxSpeed,
isLoco: isLocomotive(vehicle),
cargo:
!isLocomotive(vehicle) && vehicle.loadable && this.store.chosenCargo
? this.store.chosenCargo
: undefined,
!isLocomotive(vehicle) && vehicle.loadable && this.store.chosenCargo ? this.store.chosenCargo : undefined,
count: 1,
imgSrc: vehicle.imageSrc,
useType: isLocomotive(vehicle) ? vehicle.power : vehicle.useType,
supportersOnly: vehicle.supportersOnly,
};
if (
isLocomotive(vehicle) &&
this.store.stockList.length > 0 &&
!this.store.stockList[0].isLoco
)
if (isLocomotive(vehicle) && this.store.stockList.length > 0 && !this.store.stockList[0].isLoco)
this.store.stockList.unshift(stockObj);
else this.store.stockList.push(stockObj);
},
},
mounted() {
this.onLocoPowerChange("loco-e");
this.onCarUseTypeChange("car-passenger");
},
});
</script>
<style lang="scss" scoped>
@import "../styles/global";
@import '../styles/global';
.inputs {
display: flex;
@@ -312,51 +389,60 @@ export default defineComponent({
}
&_radio {
label span {
button {
padding: 0.25em 0.55em;
margin-right: 0.5em;
border: 2px solid white;
color: white;
font-size: 1em;
}
button:focus {
color: $accentColor;
}
button.checked {
border-color: $accentColor;
color: $accentColor;
font-weight: bold;
}
}
&_checkbox {
label span {
/* padding: 0.25em 0.55em; */
/* border: 2px solid white; */
color: #aaa;
&::before {
content: "";
display: inline-block;
width: 1.5ex;
height: 1.5ex;
background: #aaa;
margin-right: 0.5em;
}
}
input:checked + span::before {
background-color: $accentColor;
}
}
&_radio,
&_checkbox {
margin: 1em 0;
label {
cursor: pointer;
margin-right: 0.5em;
padding: 0 1.5em;
input {
display: none;
button {
position: relative;
color: #999;
&:checked + span {
border-color: $accentColor;
color: $accentColor;
&::before {
content: '';
width: 1.5ch;
height: 1.5ch;
display: block;
position: absolute;
bottom: 0.2ch;
left: -1.5em;
background-color: #999;
}
&.checked {
color: white;
font-weight: bold;
&::before {
background-color: $accentColor;
}
}
&:focus {
outline: 1px solid $accentColor;
}
}
}
@@ -364,15 +450,24 @@ export default defineComponent({
margin: 0.5em 0;
display: flex;
select:focus {
border-color: $accentColor;
}
}
&_list button {
margin-left: 0.5em;
font-size: 0.8em;
&:hover img {
border-color: $accentColor;
}
&:focus img {
border-color: $accentColor;
}
img {
border: 2px solid white;
padding: 0.25em;
@@ -400,4 +495,4 @@ export default defineComponent({
}
}
}
</style>
</style>
src/components/ListSection.vue
+76 -70
View File
@@ -2,27 +2,28 @@
<div class="bottom">
<section class="image">
<div class="image__wrapper">
<div class="image__content">
<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>
<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"
:alt="store.chosenLoco.type"
v-if="store.chosenLoco || store.chosenCar"
:src="store.chosenLoco?.imageSrc || store.chosenCar?.imageSrc"
:alt="store.chosenLoco?.type || store.chosenCar?.type"
@load="onImageLoad"
@click="onImageClick"
/>
<img
<!-- <img
v-if="store.chosenCar"
:src="store.chosenCar.imageSrc"
:alt="store.chosenCar.type"
@load="onImageLoad"
@click="onImageClick"
/>
/> -->
</div>
</div>
</section>
@@ -31,9 +32,8 @@
<section class="stock-list">
<div class="stock-list_buttons">
<button class="btn btn--copy" @click="downloadStock">
POBIERZ POCIĄG
</button>
<button class="btn" @click="downloadStock">POBIERZ POCIĄG</button>
<button class="btn" @click="resetStock">ZRESETUJ LISTĘ</button>
</div>
<div class="stock-list_specs">
Masa: <span class="text--accent">{{ totalMass }}</span> t | Długość:
@@ -46,13 +46,9 @@
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.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.trainTooHeavy.value">Ten skład jest za ciężki!</div>
</div>
<ul>
@@ -76,6 +72,7 @@
@dragover="allowDrop"
draggable="true"
>
<span v-if="stock.supportersOnly" style="color: salmon"> *S* </span>
<span>
{{ stock.isLoco ? stock.type : getCarSpecFromType(stock.type) }}
</span>
@@ -113,38 +110,40 @@
</template>
<script lang="ts">
import { ComputedRef, defineComponent, inject } from "vue";
import { ICarWagon, ILocomotive, IStore } from "@/types";
import { computed, ComputedRef, defineComponent, inject } from 'vue';
import { ICarWagon, ILocomotive, IStore } from '@/types';
export default defineComponent({
setup() {
const store = inject("Store") as IStore;
const store = inject('Store') as IStore;
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,
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 {
warnings: inject('warnings') as {
locoNotSuitable: ComputedRef<boolean>;
trainTooLong: ComputedRef<boolean>;
trainTooHeavy: ComputedRef<boolean>;
},
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"),
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'),
},
draggedVehicleID: -1,
@@ -154,11 +153,14 @@ export default defineComponent({
onListItemFocus(vehicleID: number) {
const vehicle = this.store.stockList[vehicleID];
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.chosenLoco = this.locoDataList.find((v) => v.type == vehicle.type) || null;
this.store.chosenCar = null;
this.store.chosenCargo = null;
@@ -170,26 +172,28 @@ export default defineComponent({
this.store.chosenCarUseType = vehicle.useType;
this.store.chosenLoco = null;
this.store.chosenCar =
this.carDataList.find((v) => v.type == vehicle.type) || null;
this.store.chosenCar = this.carDataList.find((v) => v.type == vehicle.type) || null;
this.store.chosenCargo = vehicle.cargo || null;
// this.chose = vehicle.useType;
},
getCarSpecFromType(typeStr: string) {
const specArray = typeStr.split("_");
const specArray = typeStr.split('_');
if (specArray.length == 0) return null;
/* 111a_Grafitti_1 */
if (specArray.length == 3)
return `${specArray[0]} ${specArray[1]}-${specArray[2]}`;
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++;
},
@@ -201,9 +205,7 @@ export default defineComponent({
},
removeStock(index: number) {
this.store.stockList = this.store.stockList.filter(
(stock, i) => i != index
);
this.store.stockList = this.store.stockList.filter((stock, i) => i != index);
},
moveUpStock(index: number) {
@@ -232,39 +234,36 @@ export default defineComponent({
) {
``;
const allowDownload = confirm(
"Jazda tym pociągiem może być niezgodna z regulaminem symulatora! Czy na pewno chcesz kontynuować?"
'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");
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 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(";");
.join(';');
const blob = new Blob([stockString]);
const file = fileName + ".con";
const file = fileName + '.con';
var e = document.createEvent("MouseEvents"),
a = document.createElement("a");
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.dataset.downloadurl = ['', a.download, a.href].join(':');
e.initEvent('click', true, false);
a.dispatchEvent(e);
},
@@ -275,20 +274,17 @@ export default defineComponent({
onDrop(e: DragEvent, vehicleIndex: number) {
e.preventDefault();
let targetEl: Element | null = this.$refs[
`item-${vehicleIndex}`
] as Element;
let targetEl: Element | null = this.$refs[`item-${vehicleIndex}`] as Element;
if (!targetEl) return;
const dataID = targetEl.attributes.getNamedItem("data-id")?.textContent;
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[Number(dataID)] = this.store.stockList[this.draggedVehicleID];
this.store.stockList[this.draggedVehicleID] = tempVehicle;
},
@@ -305,14 +301,14 @@ export default defineComponent({
if (!chosenVehicle) return;
console.log(chosenVehicle.imageSrc.replace("300", "800"));
this.store.vehiclePreviewSrc = chosenVehicle.imageSrc.replace('300', '800');
},
},
});
</script>
<style lang="scss" scoped>
@import "../styles/global";
@import '../styles/global';
.bottom {
display: flex;
@@ -364,6 +360,10 @@ export default defineComponent({
height: 100%;
&.supporter {
border: 1px solid salmon;
}
img {
width: 100%;
height: 100%;
@@ -396,10 +396,16 @@ export default defineComponent({
width: 100%;
&_buttons {
margin-bottom: 0.5em;
button {
font-size: 0.9em;
padding: 0.4em 0.5em;
margin-bottom: 0.5em;
padding: 0.4em 0.55em;
margin-right: 0.5em;
&:focus {
color: $accentColor;
border-color: $accentColor;
}
}
}
@@ -466,4 +472,4 @@ export default defineComponent({
}
}
}
</style>
</style>
src/store.ts
+15 -5
View File
@@ -20,8 +20,13 @@ export const Store: IStore = reactive({
stockList: [] as IStock[],
cargoOptions: [] as any[][],
// locoOptions: [] as ILocomotive[],
// carOptions: [] as ICarWagon[],
vehiclePreviewSrc: ""
})
export const locoDataList = computed(() => Object.keys(vehicleDataJSON).reduce(
(acc, vehicleTypeKey) => {
if (!vehicleTypeKey.startsWith("loco")) return acc;
@@ -31,7 +36,7 @@ export const locoDataList = computed(() => Object.keys(vehicleDataJSON).reduce(
];
locoVehiclesData.forEach((loco) => {
if (loco[4] && !Store.showSupporter) return;
if (Store.showSupporter && !loco[4]) return;
const locoType = loco[0] as string;
@@ -117,7 +122,8 @@ export const carDataList = computed(() => Object.keys(vehicleDataJSON).reduce(
];
carVehiclesData.forEach((car) => {
if (car[3] && !Store.showSupporter) return;
if (Store.showSupporter && !car[3]) return;
const carPropsData = vehiclePropsJSON.find((v) =>
car[0].toString().includes(v.type)
@@ -132,10 +138,10 @@ export const carDataList = computed(() => Object.keys(vehicleDataJSON).reduce(
maxSpeed: Number(car[4] as string),
imageSrc: car[5] as string,
cargoList:
carPropsData?.cargo.split(";").map((cargo) => ({
carPropsData?.cargo.includes(";") ? carPropsData.cargo.split(";").map((cargo) => ({
id: cargo.split(":")[0],
totalMass: Number(cargo.split(":")[1]),
})) || [],
})) : [],
mass: carPropsData?.mass || 0,
length: carPropsData?.length || 0,
@@ -148,6 +154,7 @@ export const carDataList = computed(() => Object.keys(vehicleDataJSON).reduce(
));
export const totalMass = computed(() => {
return Store.stockList.reduce(
(acc, stock) =>
@@ -244,7 +251,10 @@ export const warnings = {
}),
locoNotSuitable: computed(() => {
if (!isTrainPassenger.value && Store.stockList.length > 1 && Store.stockList.find(stock => stock.isLoco && stock.type.startsWith("EP"))) return true;
if (!isTrainPassenger.value
&& Store.stockList.length > 1
&& !Store.stockList.every(stock => stock.isLoco)
&& Store.stockList.find(stock => stock.isLoco && stock.type.startsWith("EP"))) return true;
return false;
}),
src/styles/global.scss
+8 -3
View File
@@ -49,7 +49,14 @@ button {
padding: 0;
margin: 0;
cursor: pointer;;
cursor: pointer;
font-size: 1em;
color: white;
&:hover {
color: $accentColor;
}
}
button.btn {
@@ -59,9 +66,7 @@ button.btn {
border: 2px solid white;
outline: none;
background: none;
color: white;
font-size: 1em;
transition: all 250ms;
src/types.ts
+6
View File
@@ -11,6 +11,11 @@ export interface IStore {
stockList: IStock[];
cargoOptions: any[][];
// locoOptions: ILocomotive[];
// carOptions: ICarWagon[];
vehiclePreviewSrc: string;
}
export interface IVehicleData {
@@ -58,6 +63,7 @@ export interface IStock {
maxSpeed: number;
cargo?: { id: string; totalMass: number };
isLoco: boolean;
supportersOnly: boolean;
count: number;
imgSrc: string;
}
vue.config.js
+3
View File
@@ -0,0 +1,3 @@
module.exports = {
lintOnSave: false,
};