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

Wersja 1.3.0

Browse Source 
Merge do wersji 1.3.0
This commit is contained in:
Spythere
2023-03-02 01:00:12 +01:00
committed by GitHub
parent b1ca0f407b 44171e616b
commit 7a80c87d1a
30 changed files with 932 additions and 732 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1 -2
View File
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="pl">
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -7,7 +7,6 @@
<title>Pojazdownik</title>
<meta name="description" content="Edytor pociągów online do symulatora Train Driver 2" />
<meta name="keywords" content="pojazdownik td2 train driver stacjownik spythere" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "pojazdownik",
"version": "1.2.3",
"version": "1.3.0",
"private": true,
"scripts": {
"dev": "vite",
public/images/car-cargo-unknown.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 932 B

public/images/car-passenger-unknown.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 953 B

public/images/loco-e-unknown.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

public/images/loco-ezt-unknown.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

public/images/loco-s-unknown.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1020 B

public/images/unknown.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

src/App.vue
+14 -17
View File
@@ -34,6 +34,7 @@
regulaminem symulatora Train Driver 2</a
>!
</div>
<div class="text--grayed" style="margin-bottom: 0.25em">Strona jest kompletna dla wersji 2022.2.2 symulatora TD2</div>
&copy;
<a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
{{ new Date().getUTCFullYear() }} | v{{ VERSION }}
@@ -46,13 +47,13 @@ import packageInfo from '.././package.json';
import { defineComponent } from 'vue';
import InputsSection from './components/InputsSection.vue';
import InputsSection from './components/sections/InputsSection.vue';
import { useStore } from './store';
import TrainImageSection from './components/TrainImageSection.vue';
import LogoSection from './components/LogoSection.vue';
import TrainImageSection from './components/sections/TrainImageSection.vue';
import LogoSection from './components/sections/LogoSection.vue';
import RealStockCard from './components/cards/RealStockCard.vue';
import StockSection from './components/StockSection.vue';
import StockSection from './components/sections/StockSection.vue';
export default defineComponent({
components: {
@@ -70,7 +71,7 @@ export default defineComponent({
async created() {
const stockData = await (
await fetch(`https://spythere.github.io/api/td2/data/stockData.json?t=${Math.floor(Date.now() / 60000)}`)
await fetch(`https://spythere.github.io/api/td2/data/stockInfo.json?t=${Math.floor(Date.now() / 60000)}`)
).json();
this.store.stockData = stockData;
@@ -86,7 +87,7 @@ export default defineComponent({
display: flex;
flex-direction: column;
padding: 1em;
align-items: center;
}
/* APP */
@@ -95,9 +96,7 @@ export default defineComponent({
color: $textColor;
font-size: 1em;
display: flex;
justify-content: center;
padding: 1em 0.5em;
}
/* HEADER SECTION */
@@ -145,14 +144,14 @@ main {
display: grid;
gap: 1em 3em;
width: 100vw;
width: 100%;
max-width: 1300px;
min-height: 75vh;
grid-template-columns: 1fr 2fr;
grid-template-rows: auto 360px minmax(400px, 1fr);
padding: 0 1em;
// padding: 0 1em;
margin-bottom: 2em;
}
@@ -167,6 +166,10 @@ footer {
/* MOBILE VIEWS */
@media screen and (max-width: $breakpointMd) {
#app {
font-size: calc(0.7rem + 0.75vw);
}
main {
display: flex;
flex-direction: column;
@@ -174,11 +177,5 @@ footer {
grid-template-rows: 1fr;
}
}
// @media screen and (max-width: $breakpointSm) {
// header {
// font-size: 0.75em;
// }
// }
</style>
src/components/StockSection.vue
-76
View File
@@ -1,76 +0,0 @@
<template>
<div class="stock-section">
<transition name="tab-change" mode="out-in">
<keep-alive>
<component :is="chosenSectionComponent" :key="chosenSectionComponent"></component>
</keep-alive>
</transition>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { useStore } from '../store';
import StockListTab from './StockListTab.vue';
import StockGeneratorTab from './StockGeneratorTab.vue';
export default defineComponent({
setup() {
return {
store: useStore(),
};
},
computed: {
chosenSectionComponent() {
switch (this.store.stockSectionMode) {
case 'stock-list':
return StockListTab;
case 'stock-generator':
return StockGeneratorTab;
default:
return StockListTab;
}
},
},
});
</script>
<style lang="scss">
// Tab change animation
.tab-change {
&-enter-from,
&-leave-to {
opacity: 0;
}
&-enter-active,
&-leave-active {
transition: all 100ms ease-in-out;
}
}
// Section styles
.stock-section {
grid-row: 1 / 4;
grid-column: 2;
}
// Stock tabs styles
.stock_actions {
display: flex;
gap: 0.5em;
@media only screen and (max-width: 450px) {
flex-wrap: wrap;
button {
width: 100%;
}
}
}
</style>
src/components/cards/RealStockCard.vue
+5 -51
View File
@@ -41,18 +41,18 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { Vehicle, IStock, IReadyStockList } from '../../types';
import { Vehicle, IReadyStockList } from '../../types';
import { useStore } from '../../store';
import { isLocomotive } from '../../utils/vehicleUtils';
import imageMixin from '../../mixins/imageMixin';
import stockMixin from '../../mixins/stockMixin';
interface ResponseJSONData {
[key: string]: string;
}
export default defineComponent({
mixins: [imageMixin],
mixins: [imageMixin, stockMixin],
setup() {
return {
@@ -88,60 +88,14 @@ export default defineComponent({
},
choseStock(name: string, type: string, number: string, stockString: string) {
const stockArray = stockString.split(';');
this.store.stockList.length = 0;
this.store.chosenVehicle = null;
this.store.chosenCar = null;
this.store.chosenCargo = null;
this.store.chosenLoco = null;
this.store.chosenStockListIndex = -1;
this.store.swapVehicles = false;
stockArray.forEach((type, i) => {
let vehicle: Vehicle | null = null;
if (i == 0) vehicle = this.store.locoDataList.find((loco) => loco.type == stockArray[0]) || null;
else vehicle = this.store.carDataList.find((car) => car.type == type) || null;
this.addVehicle(vehicle);
});
this.loadStockFromString(stockString);
this.store.isRealStockListCardOpen = false;
},
addVehicle(vehicle: Vehicle | null) {
if (!vehicle) return;
const stockObj: IStock = {
id: `${Date.now() + this.store.stockList.length}`,
type: vehicle.type,
length: vehicle.length,
mass: vehicle.mass,
maxSpeed: vehicle.maxSpeed,
isLoco: isLocomotive(vehicle),
cargo: undefined,
count: 1,
imgSrc: vehicle.imageSrc,
useType: isLocomotive(vehicle) ? vehicle.power : vehicle.useType,
supportersOnly: vehicle.supportersOnly,
};
const previousStock =
this.store.stockList.length > 0 ? this.store.stockList[this.store.stockList.length - 1] : null;
if (previousStock && previousStock.type == vehicle.type) {
this.store.stockList[this.store.stockList.length - 1].count++;
return;
}
this.store.stockList.push(stockObj);
},
},
async mounted() {
const readyStockJSONData: ResponseJSONData = await (
await fetch(`https://spythere.github.io/api/readyStock.json?t=${Math.floor(Date.now() / 60000)}`)
await fetch(`https://spythere.github.io/api/td2/data/readyStock.json?t=${Math.floor(Date.now() / 60000)}`)
).json();
if (!readyStockJSONData) {
src/components/InputsSection.vue → src/components/sections/InputsSection.vue
+27 -66
View File
@@ -7,7 +7,7 @@
<div class="vehicle-types locos">
<button
v-for="locoType in locomotiveTypeList"
class="btn--choice"
class="btn btn--choice"
:data-selected="locoType.id == store.chosenLocoPower"
@click="selectLocoType(locoType.id)"
>
@@ -34,7 +34,7 @@
<div class="vehicle-types carwagons">
<button
v-for="carType in carTypeList"
class="btn--choice"
class="btn btn--choice"
:data-selected="carType.id == store.chosenCarUseType"
@click="selectCarWagonType(carType.id)"
>
@@ -85,7 +85,7 @@
</div>
<div class="input_actions">
<button class="btn" @click="addVehicle">DODAJ NOWY</button>
<button class="btn" @click="addVehicle(store.chosenVehicle, store.chosenCargo)">DODAJ NOWY</button>
<button
class="btn"
@click="switchVehicles"
@@ -107,11 +107,12 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { IStock } from '../types';
import imageMixin from '../mixins/imageMixin';
import { useStore } from '../store';
import { isLocomotive } from '../utils/vehicleUtils';
import stockPreviewMixin from '../mixins/stockPreviewMixin';
import { IStock } from '../../types';
import imageMixin from '../../mixins/imageMixin';
import { useStore } from '../../store';
import { isLocomotive } from '../../utils/vehicleUtils';
import stockPreviewMixin from '../../mixins/stockPreviewMixin';
import stockMixin from '../../mixins/stockMixin';
interface ILocoType {
id: string;
@@ -120,7 +121,7 @@ interface ILocoType {
}
export default defineComponent({
mixins: [imageMixin, stockPreviewMixin],
mixins: [imageMixin, stockPreviewMixin, stockMixin],
data: () => ({
locomotiveTypeList: [
@@ -174,7 +175,9 @@ export default defineComponent({
},
addOrSwitchVehicle() {
if (this.store.chosenStockListIndex == -1) this.addVehicle();
if (!this.store.chosenVehicle) return;
if (this.store.chosenStockListIndex == -1) this.addVehicle(this.store.chosenVehicle, this.store.chosenCargo);
else this.switchVehicles();
},
@@ -211,60 +214,16 @@ export default defineComponent({
this.store.stockList[this.store.chosenStockListIndex] = stockObj;
},
addVehicle() {
const vehicle = this.store.chosenVehicle;
if (!vehicle) return;
const stockObj: IStock = {
id: `${Date.now()}`,
useType: isLocomotive(vehicle) ? vehicle.power : vehicle.useType,
type: vehicle.type,
length: vehicle.length,
mass: vehicle.mass,
maxSpeed: vehicle.maxSpeed,
isLoco: isLocomotive(vehicle),
cargo:
!isLocomotive(vehicle) && vehicle.loadable && this.store.chosenCargo ? this.store.chosenCargo : undefined,
count: 1,
imgSrc: vehicle.imageSrc,
supportersOnly: vehicle.supportersOnly,
};
const previousStock =
this.store.stockList.length > 0 ? this.store.stockList[this.store.stockList.length - 1] : null;
if (isLocomotive(vehicle) && previousStock && previousStock.type == vehicle.type) {
this.store.stockList[this.store.stockList.length - 1].count++;
return;
}
if (
!isLocomotive(vehicle) &&
previousStock &&
previousStock.type == vehicle.type &&
previousStock.cargo?.id == this.store.chosenCargo?.id
) {
this.store.stockList[this.store.stockList.length - 1].count++;
return;
}
if (isLocomotive(vehicle) && this.store.stockList.length > 0 && !this.store.stockList[0].isLoco)
this.store.stockList.unshift(stockObj);
else this.store.stockList.push(stockObj);
},
},
});
</script>
<style lang="scss" scoped>
@import '../styles/global';
@import '../../styles/global';
.inputs-section {
display: flex;
justify-content: space-between;
justify-content: center;
grid-row: 2;
grid-column: 1;
@@ -274,11 +233,9 @@ export default defineComponent({
margin-bottom: 1em;
}
.btn--choice {
margin-right: 0.5em;
font-weight: bold;
background-color: #444;
button.btn--choice {
font-size: 0.9em;
padding: 0.3em 0.6em;
&[data-selected='true'] {
background-color: $accentColor;
@@ -305,15 +262,19 @@ export default defineComponent({
}
.input_actions {
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5em;
button {
margin: 0.5em 0.5em 0 0;
button:nth-child(3) {
grid-column: 1 / 3;
}
}
.vehicle-types {
display: flex;
gap: 0.25em;
margin-bottom: 0.5em;
}
@@ -323,7 +284,7 @@ export default defineComponent({
text-align: center;
}
.input_actions {
.vehicle-types {
justify-content: center;
}
}
src/components/LogoSection.vue → src/components/sections/LogoSection.vue
View File
src/components/sections/StockSection.vue
+114
View File
@@ -0,0 +1,114 @@
<template>
<section class="stock-section">
<div class="section_modes">
<button
class="btn"
v-for="(id, name) in sectionModes"
@click="chooseSection(id)"
:data-selected="store.stockSectionMode == id"
>
{{ name }}
</button>
</div>
<transition name="tab-change" mode="out-in">
<keep-alive>
<component :is="chosenSectionComponent" :key="chosenSectionComponent"></component>
</keep-alive>
</transition>
</section>
</template>
<script lang="ts" setup>
import { computed, KeepAlive } from 'vue';
import { useStore } from '../../store';
import StockListTab from '../tabs/StockListTab.vue';
import StockGeneratorTab from '../tabs/StockGeneratorTab.vue';
import NumberGeneratorTab from '../tabs/NumberGeneratorTab.vue';
const store = useStore();
type SectionMode = typeof store.stockSectionMode;
const sectionModes: { [key: string]: SectionMode } = {
SKŁAD: 'stock-list',
'GNR. NUMERU': 'number-generator',
'GNR. SKŁADU': 'stock-generator',
};
const chosenSectionComponent = computed(() => {
switch (store.stockSectionMode) {
case 'stock-list':
return StockListTab;
case 'stock-generator':
return StockGeneratorTab;
case 'number-generator':
return NumberGeneratorTab;
default:
return StockListTab;
}
});
function chooseSection(sectionId: SectionMode) {
store.stockSectionMode = sectionId;
}
</script>
<style lang="scss">
@import '../../styles/global.scss';
// Tab change animation
.tab-change {
&-enter-from,
&-leave-to {
opacity: 0;
}
&-enter-active,
&-leave-active {
transition: all 100ms ease-in-out;
}
}
// Section styles
.stock-section {
grid-row: 1 / 4;
grid-column: 2;
overflow: hidden;
padding: 1px;
}
.section_modes {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5em;
margin-bottom: 0.5em;
button {
position: relative;
border-radius: 0.5em 0.5em 0 0;
&::after {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
content: '';
width: 0;
height: 2px;
transition: all 100ms;
background-color: $accentColor;
}
&[data-selected='true']::after {
width: 100%;
}
}
}
</style>
src/components/TrainImageSection.vue → src/components/sections/TrainImageSection.vue
+4 -6
View File
@@ -54,9 +54,9 @@
<script lang="ts">
import { computed, defineComponent } from 'vue';
import { useStore } from '../store';
import { isLocomotive } from '../utils/vehicleUtils';
import { ILocomotive, Vehicle } from '../types';
import { useStore } from '../../store';
import { isLocomotive } from '../../utils/vehicleUtils';
import { ILocomotive, Vehicle } from '../../types';
export default defineComponent({
setup() {
@@ -83,8 +83,6 @@ export default defineComponent({
watch: {
chosenVehicle(vehicle: Vehicle, prevVehicle: Vehicle) {
console.log(vehicle);
if (vehicle && vehicle.type != prevVehicle?.type) {
this.store.imageLoading = true;
}
@@ -112,7 +110,7 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../styles/global.scss';
@import '../../styles/global.scss';
.train-image-section {
grid-row: 3;
src/components/tabs/NumberGeneratorTab.vue
+133
View File
@@ -0,0 +1,133 @@
<template>
<div class="number-generator tab">
<div class="tab_header">
<h2>GENERATOR NUMERU POCIĄGU</h2>
</div>
<div class="tab_content">
<div class="options">
<select v-model="beginRegionName" @change="randomizeTrainNumber">
<option :value="null" disabled>Początkowy obszar konstrukcyjny</option>
<option v-for="(_, name) in genData.regionNumbers" :value="name">{{ name }}</option>
</select>
<select v-model="endRegionName" @change="randomizeTrainNumber">
<option :value="null" disabled>Końcowy obszar konstrukcyjny</option>
<option v-for="(_, name) in genData.regionNumbers" :value="name">{{ name }}</option>
</select>
<select v-model="categoryRules" @change="randomizeTrainNumber">
<option :value="null" disabled>Kategoria pociągu</option>
<option v-for="(rules, category) in genData.categories" :value="rules">{{ category }}</option>
</select>
</div>
<div class="generated-number">
<span v-if="trainNumber">Wygenerowany numer pociągu: <b class="text--accent">{{ trainNumber }}</b></span>
<span v-else>Wybierz obszary konstrukcyjne i kategorię!</span>
</div>
<hr>
<div class="tab_actions">
<button class="btn" @click="randomizeTrainNumber">PRZELOSUJ</button>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { Ref, ref } from 'vue';
import genData from '../../constants/numberGeneratorData.json';
type RegionName = keyof typeof genData.regionNumbers;
const beginRegionName = ref(null) as Ref<RegionName | null>;
const endRegionName = ref(null) as Ref<RegionName | null>;
const categoryRules = ref(null) as Ref<string | null>;
const trainNumber = ref(null) as Ref<string | null>;
const randomizeTrainNumber = () => {
if (beginRegionName.value == null || endRegionName.value == null || categoryRules.value == null) return '';
let number = '';
if (beginRegionName.value == endRegionName.value) {
const sameRegionsNumbers = genData.sameRegions[beginRegionName.value];
const randRegionNumber = sameRegionsNumbers[Math.floor(Math.random() * sameRegionsNumbers.length)];
number += randRegionNumber.toString();
} else {
const beginRegionNumber = genData.regionNumbers[beginRegionName.value];
const endRegionNumber = genData.regionNumbers[endRegionName.value];
number += `${beginRegionNumber}${endRegionNumber}`;
}
const rulesArray = categoryRules.value.split(';').map((r) => ({
index: r.split(':')[0],
rule: r.split(':')[1],
nums: Number(r.split(':')[2] || '1'),
}));
rulesArray.forEach((r) => {
const range = r.rule.split('-');
if (range.length == 1) number += r.rule;
else {
const [minRange, maxRange] = range;
const randRange = Math.floor(Math.random() * (Number(maxRange) - Number(minRange)) + Number(minRange)).toString();
number += new Array(Math.abs(randRange.length - r.nums)).fill('0').join('') + randRange;
}
});
trainNumber.value = number;
};
</script>
<style lang="scss" scoped>
@import '../../styles/tab.scss';
@import '../../styles/global.scss';
.options {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
select {
width: calc(50% - 0.5em);
}
}
.generated-number {
font-size: 1.3em;
font-weight: bold;
margin: 0.5em 0;
padding: 0.5em;
background-color: $secondaryColor;
}
.tab_actions {
margin-top: 0.5em;
button {
grid-column: 3;
}
}
@media screen and (max-width: $breakpointMd) {
.number-generator {
min-height: 100vh;
}
}
@media screen and (max-width: $breakpointSm) {
.options select {
width: 100%;
}
}
</style>
src/components/StockGeneratorTab.vue → src/components/tabs/StockGeneratorTab.vue
+60 -126
View File
@@ -1,58 +1,67 @@
<template>
<div class="stock-generator">
<div class="stock_actions">
<div class="stock-generator tab">
<div class="tab_header">
<h2>GENERATOR SKŁADU TOWAROWEGO</h2>
<button class="btn" @click="() => (store.stockSectionMode = 'stock-list')">POWRÓT DO LISTY &gt;</button>
</div>
<div class="generator_content">
<h2>WŁAŚCIWOŚCI SKŁADU</h2>
<div class="tab_content">
<div>
<h2>WŁAŚCIWOŚCI SKŁADU</h2>
<div class="generator_attributes">
<label>
Maksymalna masa (t)
<input type="number" v-model="maxMass" step="100" max="4000" min="0" />
</label>
<b class="text--accent">
&lArr; Dodaj lokomotywę na pierwsze miejsce listy, aby uwzględnić ją przy losowaniu składu!
</b>
<label>
Maks. długość (m)
<input type="number" v-model="maxLength" step="25" max="650" min="0" />
</label>
<div class="tab_attributes">
<label>
Maksymalna masa (t)
<input type="number" v-model="maxMass" step="100" max="4000" min="0" />
</label>
<label>
Maks. liczba wagonów
<input type="number" v-model="maxCarCount" step="1" max="60" min="1" />
</label>
<label>
Maks. długość (m)
<input type="number" v-model="maxLength" step="25" max="650" min="0" />
</label>
<label>
Maks. liczba wagonów
<input type="number" v-model="maxCarCount" step="1" max="60" min="1" />
</label>
</div>
</div>
<h2>ŁADUNEK</h2>
<p>Wybierz ładunki, którymi chcesz wypełnić dostępne wagony:</p>
<div>
<h2>ŁADUNEK</h2>
<b>Wybierz ładunki, którymi chcesz wypełnić dostępne wagony:</b>
</div>
<div class="generator_cargo">
<button
class="btn"
:data-chosen="chosenCargoTypes.includes(k as string)"
:data-chosen="chosenCargoTypes.includes(k.toString())"
v-for="(v, k) in store.stockData?.generator.cargo"
@click="toggleCargoChosen(k as string, v)"
@click="toggleCargoChosen(k.toString(), v)"
>
{{ k }}
</button>
</div>
<h2>WAGONY Z WYBRANYMI ŁADUNKAMI</h2>
<div>
<h2>WAGONY Z WYBRANYMI ŁADUNKAMI</h2>
<div class="warning">
<span v-if="computedChosenCarTypes.size == 0">
Wybierz co najmniej jeden ładunek, aby zobaczyć wagony, które go posiadają!
</span>
<div class="generator_warning">
<span v-if="computedChosenCarTypes.size == 0">
Wybierz co najmniej jeden ładunek, aby zobaczyć wagony, które go posiadają!
</span>
<span v-else>
Wagony posiadające wybrane ładunki. Najedź na nazwę, aby zobaczyć podgląd wagonu. Kliknij, aby wyłączyć z
losowania (tylko podświetlone nazwy będą uwzględnione).
</span>
<span v-else>
Wagony posiadające wybrane ładunki. Najedź na nazwę, aby zobaczyć podgląd wagonu. Kliknij, aby wyłączyć z
losowania (tylko podświetlone nazwy będą uwzględnione).
</span>
</div>
</div>
<div class="generator_vehicles">
<div class="generator_vehicles" v-if="computedChosenCarTypes.size != 0">
<button
:data-chosen="true"
:data-excluded="excludedCarTypes.includes(carType)"
@@ -64,14 +73,12 @@
@click="toggleCarExclusion(carType)"
>
{{ carType }}
<!-- <span>X</span> -->
</button>
</div>
<hr />
<div class="generator_actions">
<div class="tab_actions">
<button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock()">
WYGENERUJ
</button>
@@ -89,15 +96,16 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { useStore } from '../store';
import { useStore } from '../../store';
import stockMixin from '../mixins/stockMixin';
import { ICargo, ICarWagon } from '../types';
import stockMixin from '../../mixins/stockMixin';
import { ICargo, ICarWagon } from '../../types';
import warningsMixin from '../../mixins/warningsMixin';
export default defineComponent({
name: 'stock-generator',
mixins: [stockMixin],
mixins: [stockMixin, warningsMixin],
data() {
return {
@@ -172,13 +180,16 @@ export default defineComponent({
return acc;
}, [] as { constructionType: string; carPool: { carWagon: ICarWagon; cargo?: ICargo }[] }[]);
this.store.stockList.length = this.store.stockList[0]?.isLoco ? 1 : 0;
const headingLoco = this.store.stockList[0]?.isLoco ? this.store.stockList[0] : undefined;
this.store.stockList.length = headingLoco ? 1 : 0;
const maxMass = this.store.acceptableMass || this.maxMass;
new Array(this.maxCarCount).fill(0).forEach(() => {
const randomStockType = generatedChosenStockList[~~(Math.random() * generatedChosenStockList.length)];
const {carWagon, cargo} = randomStockType.carPool[~~(Math.random() * randomStockType.carPool.length)];
const { carWagon, cargo } = randomStockType.carPool[~~(Math.random() * randomStockType.carPool.length)];
if (this.store.totalMass + (cargo?.totalMass || carWagon.mass) > this.maxMass) return;
if (this.store.totalMass + (cargo?.totalMass || carWagon.mass) > maxMass) return;
if (this.store.totalLength + carWagon.length > this.maxLength) return;
this.addCarWagon(carWagon, cargo);
@@ -226,51 +237,8 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../styles/global.scss';
.stock_actions {
align-items: center;
h2 {
margin: 0;
color: white;
font-size: 1.35em;
text-align: center;
}
button {
margin-left: auto;
}
}
.stock-generator {
height: 100%;
}
.generator_content {
margin-top: 1em;
height: 100%;
}
h2 {
margin: 1em 0;
}
.generator_attributes {
display: flex;
flex-wrap: wrap;
gap: 1em;
label {
display: flex;
flex-direction: column;
}
input {
max-width: 250px;
margin-top: 0.5em;
}
}
@import '../../styles/global.scss';
@import '../../styles/tab.scss';
.generator_cargo,
.generator_vehicles {
@@ -313,36 +281,13 @@ h2 {
}
}
.generator_vehicles {
margin-top: 1em;
.tab_content {
display: flex;
flex-direction: column;
gap: 1em;
}
hr {
height: 3px;
background-color: white;
outline: none;
margin: 15px 0;
}
.generator_actions {
display: grid;
gap: 0.5em;
grid-template-columns: repeat(3, 1fr);
button {
background-color: #131313;
padding: 0.5em;
font-weight: bold;
}
&[data-disabled] button {
opacity: 0.75;
}
}
.warning {
.generator_warning {
background-color: $accentColor;
padding: 0.5em;
text-align: justify;
@@ -355,17 +300,6 @@ hr {
.generator_vehicles {
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.generator_attributes {
label {
width: 100%;
}
input {
max-width: 100%;
width: 100%;
}
}
}
</style>
src/components/StockListTab.vue → src/components/tabs/StockListTab.vue
+104 -88
View File
@@ -1,78 +1,53 @@
<template>
<section class="stock-list">
<div class="stock_actions">
<button class="btn" @click="downloadStock">POBIERZ POCIĄG</button>
<button class="btn" @click="resetStock">ZRESETUJ LISTĘ</button>
<button class="btn" style="margin-left: auto" @click="shuffleCars">TASUJ WAGONY</button>
<button class="btn" @click="store.stockSectionMode = 'stock-generator'">LOSUJ SKŁAD</button>
</div>
<div class="stock_controls" :data-disabled="store.chosenStockListIndex == -1">
<b class="no">
POJAZD NR <span class="text--accent">{{ store.chosenStockListIndex + 1 }}</span> &nbsp;
</b>
<div class="count">
<button
class="action-btn"
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
@click="subStock(store.chosenStockListIndex)"
>
<img :src="getIconURL('sub')" alt="subtract vehicle count" />
1
</button>
<input
v-if="chosenStockVehicle"
v-model="chosenStockVehicle.count"
type="number"
min="1"
name="stock-count"
id="stock-count"
/>
<input v-else id="stock-count" type="number" value="0" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" />
<button
class="action-btn"
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
@click="addStock(store.chosenStockListIndex)"
>
<img :src="getIconURL('add')" alt="add vehicle count" />
1
</button>
</div>
<button
class="action-btn"
class="btn"
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
@click="moveUpStock(store.chosenStockListIndex)"
>
<img :src="getIconURL('higher')" alt="move up vehicle" />
Przenieś wyżej
PRZENIEŚ WYŻEJ
</button>
<button
class="action-btn"
class="btn"
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
@click="moveDownStock(store.chosenStockListIndex)"
>
<img :src="getIconURL('lower')" alt="move down vehicle" />
Przenieś niżej
PRZENIEŚ NIŻEJ
</button>
<button
class="action-btn"
class="btn"
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
@click="removeStock(store.chosenStockListIndex)"
>
<img :src="getIconURL('remove')" alt="remove vehicle" />
Usuń
USUŃ
</button>
</div>
<div class="stock_clipboard-text" v-if="store.stockList.length > 0">
<button class="btn" @click="copyToClipboard">Skopiuj tekst składu do schowka</button>
<div class="stock_actions">
<label class="file-label">
<div class="btn">WCZYTAJ</div>
<input type="file" @change="uploadStock" ref="conFile" accept=".con,.txt" />
</label>
<button class="btn" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="downloadStock">POBIERZ</button>
<button class="btn" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="copyToClipboard">
SKOPIUJ
</button>
<button class="btn" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="resetStock">ZRESETUJ</button>
<button class="btn" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="shuffleCars">PRZETASUJ</button>
</div>
<div class="stock_specs">
@@ -85,9 +60,11 @@
</b>
<span>
Masa: <span class="text--accent">{{ store.totalMass }}t</span> - Długość:
Masa: <span class="text--accent">{{ store.totalMass }}t</span> (dopuszczalna:
<span class="text--accent">{{ store.acceptableMass ? store.acceptableMass + 't' : '-' }}</span
>) - Długość:
<span class="text--accent">{{ store.totalLength }}m</span>
- Vmax pociągu: <span class="text--accent">{{ store.maxStockSpeed }} km/h</span>
- vMax: <span class="text--accent">{{ store.maxStockSpeed }} km/h</span>
</span>
</div>
@@ -117,13 +94,15 @@
<div class="warning" v-if="tooManyLocomotives">Ten skład posiada za dużo pojazdów trakcyjnych!</div>
</div>
<StockThumbnails :onListItemClick="onListItemClick" :onStockImageError="stockImageError" />
<!-- Stock list -->
<ul ref="list">
<li v-if="store.stockList.length == 0" class="list-empty">
<ul ref="stock_list">
<li v-if="stockIsEmpty" class="list-empty">
<div class="stock-info">Lista pojazdów jest pusta!</div>
</li>
<transition-group name="stock-list-anim">
<TransitionGroup name="stock-list-anim">
<li
v-for="(stock, i) in store.stockList"
:key="stock.id"
@@ -156,29 +135,30 @@
<span class="stock-info__length"> {{ stock.length }}m </span>
<span class="stock-info__mass">{{ stock.cargo ? stock.cargo.totalMass : stock.mass }}t </span>
<span class="stock-info__speed"> {{ stock.maxSpeed }}km/h </span>
<span class="stock-info__count"> x{{ stock.count }} </span>
</div>
</li>
</transition-group>
</TransitionGroup>
</ul>
</section>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import TrainImage from './TrainImageSection.vue';
import TrainImage from '../sections/TrainImageSection.vue';
import { useStore } from '../store';
import warningsMixin from '../mixins/warningsMixin';
import imageMixin from '../mixins/imageMixin';
import stockPreviewMixin from '../mixins/stockPreviewMixin';
import { useStore } from '../../store';
import warningsMixin from '../../mixins/warningsMixin';
import imageMixin from '../../mixins/imageMixin';
import stockPreviewMixin from '../../mixins/stockPreviewMixin';
import { IStock } from '../../types';
import StockThumbnails from '../utils/StockThumbnails.vue';
import stockMixin from '../../mixins/stockMixin';
export default defineComponent({
name: 'stock-list',
components: { TrainImage },
components: { TrainImage, StockThumbnails },
mixins: [warningsMixin, imageMixin, stockPreviewMixin],
mixins: [warningsMixin, imageMixin, stockMixin, stockPreviewMixin],
setup() {
const store = useStore();
@@ -208,6 +188,10 @@ export default defineComponent({
.join(';');
},
stockIsEmpty() {
return this.store.stockList.length == 0;
},
chosenStockVehicle() {
return this.store.chosenStockListIndex == -1 ? undefined : this.store.stockList[this.store.chosenStockListIndex];
},
@@ -218,6 +202,10 @@ export default defineComponent({
return this.tooManyLocomotives || this.trainTooHeavy || this.trainTooLong || this.locoNotSuitable;
},
stockImageError(e: Event, stock: IStock): void {
(e.target as HTMLImageElement).src = `images/${stock.useType}-unknown.png`;
},
copyToClipboard() {
// if (this.stockHasWarnings()) {
// alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
@@ -282,6 +270,8 @@ export default defineComponent({
if (index == -1) return;
this.store.stockList = this.store.stockList.filter((stock, i) => i != index);
if (this.store.stockList.length < index + 1) this.store.chosenStockListIndex = -1;
},
moveUpStock(index: number) {
@@ -333,9 +323,13 @@ export default defineComponent({
// if (this.stockHasWarnings())
// return alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
const defaultName = `${this.store.chosenRealStockName || this.store.stockList[0].type} ${
this.store.totalMass
}t; ${this.store.totalLength}m; vmax ${this.store.maxStockSpeed}`;
const fileName = prompt(
'Nazwij plik, a następnie pobierz do folderu Presets (Dokumenty/TTSK/TrainDriver2):',
`${this.store.chosenRealStockName || this.store.stockList[0].type}`
defaultName
);
if (!fileName) return;
@@ -352,6 +346,29 @@ export default defineComponent({
a.dispatchEvent(e);
},
uploadStock() {
const inputEl = this.$refs['conFile'] as HTMLInputElement;
const files = inputEl.files;
if (files?.length != 1) return;
if (!/\.con$/.test(files[0].name)) return;
const reader = new FileReader();
reader.readAsText(files[0]);
reader.onload = (res) => {
const stockString = res.target?.result;
if (!stockString || typeof stockString !== 'string') return;
this.loadStockFromString(stockString);
};
reader.onerror = (err) => console.log(err);
inputEl.value = '';
},
onDragStart(vehicleIndex: number) {
this.draggedVehicleID = vehicleIndex;
},
@@ -379,11 +396,7 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../styles/global';
.stock_warnings {
margin-top: 1em;
}
@import '../../styles/global';
.warning {
padding: 0.25em;
@@ -403,12 +416,13 @@ export default defineComponent({
justify-content: center;
align-items: center;
gap: 0.5em;
flex-wrap: wrap;
margin: 1em 0;
border: 1px solid white;
padding: 0.5em;
margin-bottom: 1em;
padding: 0 0.3em;
background-color: #353a57;
&[data-disabled='true'] {
opacity: 0.8;
@@ -430,28 +444,26 @@ export default defineComponent({
}
button {
margin: 0.25em;
padding: 0.25em;
&:focus-visible {
outline: 1px solid white;
}
img {
vertical-align: text-bottom;
margin-right: 0.25em;
width: 1.1em;
height: 1.1em;
}
}
}
.stock_clipboard-text {
font-weight: bold;
.stock_actions {
display: grid;
gap: 0.5em;
margin-bottom: 1em;
& > .btn {
margin: 0 0.5em 0.5em 0;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
label.file-label {
text-align: center;
cursor: pointer;
input {
display: none;
}
}
}
@@ -466,8 +478,7 @@ ul {
overflow: auto;
height: 70vh;
margin-top: 1em;
height: 500px;
}
ul > li {
@@ -487,7 +498,8 @@ ul > li {
&.list-empty {
background-color: $secondaryColor;
padding: 0.5em;
border-radius: 0.5em;
padding: 0.75em;
}
}
@@ -509,6 +521,10 @@ li > .stock-info {
}
}
.stock_warnings {
margin: 0.5em 0;
}
.stock-info {
&__no,
&__type {
src/components/utils/StockThumbnails.vue
+124
View File
@@ -0,0 +1,124 @@
<template>
<div class="stock_thumbnails" ref="thumbnailsRef">
<div
v-for="(stock, stockIndex) in store.stockList"
:data-selected="store.chosenStockListIndex == stockIndex"
draggable="true"
@dragstart="onDragStart(stockIndex)"
@drop="onDrop($event, stockIndex)"
@dragover="allowDrop"
>
<span @click="onListItemClick(stockIndex)" :key="stock.id">
<b>
{{ stock.type }}
</b>
<span>
<img
draggable="false"
:src="`https://rj.td2.info.pl/dist/img/thumbnails/${stock.type}.png`"
:alt="stock.type"
:title="stock.type"
@error="stockImageError($event, stock)"
/>
</span>
</span>
</div>
</div>
</template>
<script setup lang="ts">
import { Ref, computed, nextTick, ref, watch } from 'vue';
import { useStore } from '../../store';
import { IStock } from '../../types';
const store = useStore();
const emit = defineEmits(['listItemClick', 'stockImageError']);
const thumbnailsRef = ref() as Ref<HTMLElement>;
const draggedIndex = ref(-1);
const onListItemClick = (index: number) => {
emit('listItemClick', index);
};
const stockImageError = (e: Event, stock: IStock) => {
emit('stockImageError', e, stock);
};
watch(
computed(() => store.chosenStockListIndex),
(index) => {
if (index < 0) return;
nextTick(() => {
(thumbnailsRef.value as HTMLElement)
.querySelector(`div:nth-child(${index + 1})`)
?.scrollIntoView({ block: 'nearest', inline: 'start', behavior: 'smooth' });
});
}
);
// Dragging images
const onDragStart = (vehicleIndex: number) => {
draggedIndex.value = vehicleIndex;
};
const onDrop = (e: DragEvent, vehicleIndex: number) => {
e.preventDefault();
let targetEl = thumbnailsRef.value.querySelector(`div:nth-child(${vehicleIndex + 1})`);
if (!targetEl && draggedIndex.value != -1) return;
const tempVehicle = store.stockList[vehicleIndex];
store.stockList[vehicleIndex] = store.stockList[draggedIndex.value];
store.stockList[draggedIndex.value] = tempVehicle;
store.chosenStockListIndex = vehicleIndex;
};
const allowDrop = (e: DragEvent) => {
e.preventDefault();
};
</script>
<style lang="scss" scoped>
.stock_thumbnails {
display: flex;
margin: 1em 0;
overflow: auto;
background-color: #353a57;
> div {
display: flex;
align-items: flex-end;
cursor: pointer;
min-height: 100px;
&[data-selected='true'] {
background-color: rebeccapurple;
}
> span {
display: flex;
flex-direction: column;
gap: 0.5em;
padding: 0.5em 0;
text-align: center;
font-size: 0.85em;
user-select: none;
-moz-user-select: none;
}
}
img {
max-height: 60px;
}
}
</style>
src/constants/numberGeneratorData.json
+39
View File
@@ -0,0 +1,39 @@
{
"regionNumbers": {
"Warszawa": 1,
"Lublin": 2,
"Kraków": 3,
"Sosnowiec": 4,
"Gdańsk": 5,
"Wrocław": 6,
"Poznań": 7,
"Szczecin": 8,
"Rezerwa": 9
},
"sameRegions": {
"Losowy": [
10, 11, 19, 91, 93, 97, 99, 20, 22, 29, 30, 33, 39, 40, 44, 49, 94, 50, 55, 59, 90, 95, 96, 66, 60, 69, 77, 70,
79, 88, 80, 89, 92, 98
],
"Warszawa": [10, 11, 19, 91, 93, 97, 99],
"Lublin": [20, 22, 29],
"Kraków": [30, 33, 39],
"Sosnowiec": [40, 44, 49, 94],
"Gdańsk": [50, 55, 59, 90, 95, 96],
"Wrocław": [66, 60, 69],
"Poznań": [77, 70, 79],
"Szczecin": [88, 80],
"Rezerwa": [89, 92, 98]
},
"categories": {
"ekspres krajowy (EI)": "2:00-99:2",
"międzywojewódzki pośpieszny (MP)": "2:050-169:3",
"wojewódzki pośpieszny (RP)": "2:050-169:3",
"wojewódzki osobowy (RO)": "2:200-999:3",
"próżny \"służbowy\" (PW)": "2:6;3:0-899:3",
"towarowy do przewozów masowych (TM)": "2:4;3:0-899:3",
"towarowy do obsługi stacji (TK)": "2:3;3:0-899:3",
"lokomotywa luzem (LT)": "2:5;3:0-899:3"
}
}
src/constants/speedLimits.json
+53
View File
@@ -0,0 +1,53 @@
{
"EU07": {
"passenger": {
"650": 125
},
"cargo": {
"2000": 70
}
},
"EP07": {
"passenger": {
"650": 125
},
"cargo": null
},
"EP08": {
"passenger": {
"650": 140
},
"cargo": null
},
"ET41": {
"passenger": {
"700": 125
},
"cargo": {
"4000": 70
}
},
"SM42": {
"passenger": {
"95": 90,
"200": 80,
"300": 70,
"450": 60,
"750": 50,
"1130": 40,
"1720": 30,
"2400": 20
},
"cargo": {
"95": 90,
"200": 80,
"300": 70,
"450": 60,
"750": 50,
"1130": 40,
"1720": 30,
"2400": 20
}
}
}
src/main.ts
+1 -5
View File
@@ -7,11 +7,7 @@ import App from './App.vue';
const pinia = createPinia();
const updateSW = registerSW({
onOfflineReady() {},
onNeedRefresh() {
console.log('Need refresh!');
},
immediate: true,
});
createApp(App).use(pinia).mount('#app');
src/mixins/stockMixin.ts
+55 -13
View File
@@ -15,7 +15,7 @@ export default defineComponent({
return `${Math.random().toString(36).slice(5)}`;
},
getStockObject(vehicle: Vehicle, cargo?: ICargo, count = 1): IStock {
getStockObject(vehicle: Vehicle, cargo?: ICargo | null, count = 1): IStock {
const isLoco = isLocomotive(vehicle);
return {
@@ -33,13 +33,22 @@ export default defineComponent({
};
},
addVehicle(vehicle: Vehicle | null, cargo?: ICargo | null) {
if (!vehicle) return;
const stock = this.getStockObject(vehicle, cargo);
if (stock.isLoco && !this.store.stockList[0]?.isLoco) this.store.stockList.unshift(stock);
else this.store.stockList.push(stock);
},
addLocomotive(loco: ILocomotive) {
const previousStock =
this.store.stockList.length > 0 ? this.store.stockList[this.store.stockList.length - 1] : null;
if (previousStock && previousStock.type == loco.type) {
this.store.stockList[this.store.stockList.length - 1].count++;
return;
}
// const previousStock =
// this.store.stockList.length > 0 ? this.store.stockList[this.store.stockList.length - 1] : null;
// if (previousStock && previousStock.type == loco.type) {
// this.store.stockList[this.store.stockList.length - 1].count++;
// return;
// }
const stockObj = this.getStockObject(loco);
@@ -48,18 +57,51 @@ export default defineComponent({
},
addCarWagon(car: ICarWagon, cargo?: ICargo) {
const previousStock =
this.store.stockList.length > 0 ? this.store.stockList[this.store.stockList.length - 1] : null;
// const previousStock =
// this.store.stockList.length > 0 ? this.store.stockList[this.store.stockList.length - 1] : null;
if (previousStock && previousStock.type == car.type && previousStock.cargo?.id == cargo?.id) {
this.store.stockList[this.store.stockList.length - 1].count++;
// if (previousStock && previousStock.type == car.type && previousStock.cargo?.id == cargo?.id) {
// this.store.stockList[this.store.stockList.length - 1].count++;
return;
}
// return;
// }
const stockObj = this.getStockObject(car, cargo);
this.store.stockList.push(stockObj);
},
loadStockFromString(stockString: string) {
const stockArray = stockString.trim().split(';');
this.store.stockList.length = 0;
this.store.chosenVehicle = null;
this.store.chosenCar = null;
this.store.chosenCargo = null;
this.store.chosenLoco = null;
this.store.chosenStockListIndex = -1;
this.store.swapVehicles = false;
stockArray.forEach((type) => {
let vehicle: Vehicle | null = null;
let vehicleCargo: ICargo | null = null;
if (/^(EU|EP|ET|SM|EN|2EN|SN)/.test(type)) {
const [locoType, coldStart] = type.split(',');
vehicle = this.store.locoDataList.find((loco) => loco.type == locoType) || null;
} else {
const [carType, cargo] = type.split(':');
vehicle = this.store.carDataList.find((car) => car.type == carType) || null;
if (cargo) vehicleCargo = vehicle?.cargoList.find((c) => c.id == cargo) || null;
}
if (!vehicle) console.log('Brak pojazdu:', type);
this.addVehicle(vehicle, vehicleCargo);
});
},
},
});
src/mixins/warningsMixin.ts
+1 -26
View File
@@ -18,32 +18,7 @@ export default defineComponent({
},
trainTooHeavy() {
const totalMass = this.store.totalMass;
const isTrainPassenger = this.store.isTrainPassenger;
const stockList = this.store.stockList;
if (stockList.length == 0 || !stockList[0].isLoco) return false;
const activeLocomotiveType = stockList[0].type;
// Spalinowy SM
if (/^SM/.test(activeLocomotiveType) && totalMass > 2400) return true;
// Elektryczne EU07 / EP07 / EP08 / ET41
// Pasażerski elektr.
if (isTrainPassenger) {
if (/^(EU|EP)/.test(activeLocomotiveType) && totalMass > 650) return true;
if (/^ET/.test(activeLocomotiveType) && totalMass > 700) return true;
return false;
}
// Towarowy / inny elektr.
if (/^EU/.test(activeLocomotiveType) && totalMass > 2000) return true;
if (/^ET/.test(activeLocomotiveType) && totalMass > 4000) return true;
return false;
return this.store.acceptableMass && this.store.totalMass > this.store.acceptableMass;
},
locoNotSuitable() {
src/store.ts
+2
View File
@@ -1,6 +1,7 @@
import { IStore } from './types';
import { defineStore } from 'pinia';
import {
acceptableMass,
carDataList,
chosenRealStock,
isTrainPassenger,
@@ -53,6 +54,7 @@ export const useStore = defineStore({
maxStockSpeed: (state) => maxStockSpeed(state),
isTrainPassenger: (state) => isTrainPassenger(state),
chosenRealStock: (state) => chosenRealStock(state),
acceptableMass: (state) => acceptableMass(state),
},
});
src/styles/global.scss
+14 -14
View File
@@ -3,14 +3,14 @@
$breakpointMd: 960px;
$breakpointSm: 550px;
$bgColor: #2c3149;
$bgColor: #2b3552;
$textColor: #fff;
$secondaryColor: #222;
$accentColor: #e4c428;
::-webkit-scrollbar {
width: 0.5rem;
height: 0.5rem;
width: 7px;
height: 7px;
&-track {
background: #222;
@@ -21,6 +21,10 @@ $accentColor: #e4c428;
border-radius: 1rem;
background: #777;
}
&-corner {
background: #222;
}
}
body,
@@ -31,7 +35,6 @@ html {
font-family: 'Lato', sans-serif;
background-color: $bgColor;
width: 100vw;
overflow-x: hidden;
}
@@ -81,14 +84,20 @@ button {
}
}
button.btn {
.btn {
padding: 0.4em 0.75em;
outline: none;
background-color: #222;
border-radius: 8px;
font-weight: bold;
transition: all 250ms;
&:hover {
color: $accentColor;
}
&.btn--outline {
background: none;
font-weight: bold;
@@ -120,15 +129,6 @@ button.btn {
outline: 1px solid white;
}
}
&--choice {
padding: 0.25em 0.3em;
background-color: #222;
&:focus-visible {
outline: 1px solid white;
}
}
}
select,
src/styles/tab.scss
+80
View File
@@ -0,0 +1,80 @@
@import './global.scss';
.tab {
height: 100%;
margin-top: 1px;
&_header {
padding: 0.5em 1em;
background-color: $secondaryColor;
h2 {
margin: 0;
color: white;
font-size: 1.35em;
text-align: center;
}
button {
margin-left: auto;
}
}
&_content {
margin-top: 1em;
height: 100%;
}
&_attributes {
display: flex;
flex-wrap: wrap;
gap: 1em;
label {
display: flex;
flex-direction: column;
}
input {
max-width: 250px;
margin-top: 0.5em;
}
}
&_actions {
display: grid;
gap: 0.5em;
grid-template-columns: repeat(3, 1fr);
button {
padding: 0.5em;
font-weight: bold;
}
&[data-disabled] button {
opacity: 0.75;
}
}
}
hr {
height: 3px;
background-color: white;
outline: none;
margin: 0;
}
@media only screen and (max-width: 470px) {
.tab_attributes {
label {
width: 100%;
}
input {
max-width: 100%;
width: 100%;
}
}
}
src/types.ts
+11 -2
View File
@@ -27,7 +27,7 @@ export interface IStore {
isRandomizerCardOpen: boolean;
isRealStockListCardOpen: boolean;
stockSectionMode: 'stock-list' | 'stock-generator';
stockSectionMode: 'stock-list' | 'stock-generator' | 'number-generator';
stockData?: IStockData;
}
@@ -49,7 +49,12 @@ export interface IStockData {
};
info: {
[key in TStockInfoKey]: any[];
'car-cargo': [string, string, boolean, boolean, string][];
'car-passenger': [string, string, boolean, boolean, string][];
'loco-e': [string, string, string, string, boolean][];
'loco-s': [string, string, string, string, boolean][];
'loco-szt': [string, string, string, string, boolean][];
'loco-ezt': [string, string, string, string, boolean][];
};
props: IStockProps[];
@@ -108,3 +113,7 @@ export interface IReadyStockList {
[key: string]: { stockString: string; type: string; number: string; name: string };
}
src/utils/speedLimitUtils.ts
+14
View File
@@ -0,0 +1,14 @@
import speedLimitTable from '../constants/speedLimits.json';
export type LocoType = keyof typeof speedLimitTable;
export const calculateSpeedLimit = (locoType: LocoType, stockMass: number, isTrainPassenger: boolean) => {
const speedTable = speedLimitTable[locoType][isTrainPassenger ? 'passenger' : 'cargo'];
if (!speedTable) return undefined;
let speedLimit = 0;
for (let mass in speedTable) if (stockMass > Number(mass)) speedLimit = (speedTable as any)[mass];
return speedLimit;
};
src/utils/vehicleUtils.ts
+75 -239
View File
@@ -1,35 +1,6 @@
import { EVehicleUseType } from '../enums/EVehicleUseType';
import { ICarWagon, ILocomotive, IStore, TStockInfoKey } from '../types';
// rodzaj: [tMaxPas, vMaxPas, tMaxTow, vMaxTow] | SM42: [tMax, vMax, ...]
const maxAllowedSpeedTable = {
EU07: [
[650, 125],
[2000, 70],
],
EP07: [
[650, 125],
[0, 0],
],
EP08: [
[650, 140],
[0, 0],
],
ET41: [
[700, 125],
[4000, 70],
],
SM42: [
[95, 90],
[200, 80],
[300, 70],
[450, 60],
[750, 50],
[1130, 40],
[1720, 30],
[2400, 20],
],
};
import { LocoType, calculateSpeedLimit } from './speedLimitUtils';
export function isLocomotive(vehicle: ILocomotive | ICarWagon): vehicle is ILocomotive {
return (vehicle as ILocomotive).power !== undefined;
@@ -40,84 +11,28 @@ export function locoDataList(state: IStore) {
const stockData = state.stockData;
return Object.keys(stockData.info).reduce((acc, vehicleTypeKey) => {
if (!vehicleTypeKey.startsWith('loco')) return acc;
return Object.keys(stockData.info).reduce((acc, vehiclePower) => {
if (!vehiclePower.startsWith('loco')) return acc;
const locoVehiclesData = stockData.info[vehicleTypeKey as TStockInfoKey];
const locoVehiclesData = stockData.info[vehiclePower as 'loco-e' | 'loco-s' | 'loco-ezt' | 'loco-szt'];
locoVehiclesData.forEach((loco) => {
if (state.showSupporter && !loco[4]) return;
const locoType = loco[0] as string;
let length = 0,
mass = 0;
// Elektrowozy
if (vehicleTypeKey.startsWith('loco-e')) {
// 32m dla ET41, reszta 16
length = locoType.startsWith('ET') ? 32 : 16;
// 80t dla wszystkich EU06, EP08
mass = 80;
// 83t dla: EU07 o nr większych niż 300 & dla wszystkich EP07 oprócz nr 135,242,1002,1048
const locoNumber = Number(locoType.split('-')[1]);
if (
(locoType.startsWith('EU') && locoNumber > 300) ||
(locoType.startsWith('EP') && ![242, 135, 1002, 1048].includes(locoNumber))
) {
mass = 83;
}
if (locoType.startsWith('ET')) {
mass = 167;
}
}
// Spalinowozy
if (vehicleTypeKey.startsWith('loco-s')) {
length = 14;
mass = 74;
}
// EZT
if (vehicleTypeKey.startsWith('loco-ezt')) {
// EN57
length = 65;
mass = 126;
// EN71
if (locoType.startsWith('EN71')) {
length = 86;
mass = 182;
}
// 2xEN57
if (locoType.startsWith('2EN57')) {
length = 130;
mass = 253;
}
}
// SZT
if (vehicleTypeKey.startsWith('loco-szt')) {
length = 14;
mass = 23;
}
const [type, constructionType, cabinType, maxSpeed, supportersOnly] = loco;
const locoProps = stockData.props.find((prop) => constructionType == prop.type);
acc.push({
power: vehicleTypeKey,
type: loco[0] as string,
constructionType: loco[1] as string,
cabinType: loco[2] as string,
maxSpeed: Number(loco[3] as string),
supportersOnly: loco[4] as boolean,
imageSrc: loco[5] as string,
power: vehiclePower,
type,
constructionType,
cabinType,
maxSpeed: Number(maxSpeed),
supportersOnly,
imageSrc: '',
length,
mass,
length: locoProps?.length && type.startsWith('2EN') ? locoProps.length * 2 : locoProps?.length || 0,
mass: locoProps?.mass && type.startsWith('2EN') ? 253 : locoProps?.mass || 0,
});
});
@@ -130,10 +45,10 @@ export function carDataList(state: IStore) {
const stockData = state.stockData;
return Object.keys(stockData.info).reduce((acc, vehicleTypeKey) => {
if (!vehicleTypeKey.startsWith('car')) return acc;
return Object.keys(stockData.info).reduce((acc, vehicleUseType) => {
if (!vehicleUseType.startsWith('car')) return acc;
const carVehiclesData = stockData.info[vehicleTypeKey as TStockInfoKey];
const carVehiclesData = stockData.info[vehicleUseType as 'car-passenger' | 'car-cargo'];
carVehiclesData.forEach((car) => {
if (state.showSupporter && !car[3]) return;
@@ -141,19 +56,21 @@ export function carDataList(state: IStore) {
const carPropsData = stockData.props.find((v) => car[0].toString().startsWith(v.type));
acc.push({
useType: vehicleTypeKey as 'car-passenger' | 'car-cargo',
type: car[0] as string,
constructionType: car[1] as string,
loadable: car[2] as boolean,
supportersOnly: car[3] as boolean,
maxSpeed: Number(car[4] as string),
imageSrc: car[5] as string,
cargoList: carPropsData?.cargo.split(';').filter((s) => s.length > 0)
? carPropsData.cargo.split(';').map((cargo) => ({
id: cargo.split(':')[0],
totalMass: Number(cargo.split(':')[1]),
}))
: [],
useType: vehicleUseType as 'car-passenger' | 'car-cargo',
type: car[0],
constructionType: car[1],
loadable: car[2],
supportersOnly: car[3],
maxSpeed: Number(car[4]),
imageSrc: '',
cargoList:
!carPropsData || carPropsData.cargo === null
? []
: carPropsData.cargo.split(';').map((cargo) => ({
id: cargo.split(':')[0],
totalMass: Number(cargo.split(':')[1]),
})),
mass: carPropsData?.mass || 0,
length: carPropsData?.length || 0,
});
@@ -164,7 +81,7 @@ export function carDataList(state: IStore) {
}
export function totalMass(state: IStore) {
return state.stockList.reduce(
return ~~state.stockList.reduce(
(acc, stock) => acc + (stock.cargo ? stock.cargo.totalMass : stock.mass) * stock.count,
0
);
@@ -175,7 +92,47 @@ export function totalLength(state: IStore) {
}
export function maxStockSpeed(state: IStore) {
return state.stockList.reduce((acc, stock) => (stock.maxSpeed < acc || acc == 0 ? stock.maxSpeed : acc), 0);
const stockSpeedLimit = state.stockList.reduce(
(acc, stock) => (stock.maxSpeed < acc || acc == 0 ? stock.maxSpeed : acc),
0
);
const headingLoco = state.stockList[0]?.isLoco ? state.stockList[0] : undefined;
if (!headingLoco) return stockSpeedLimit;
const locoType = headingLoco.type.split('-')[0];
if (/^(EN|2EN|SN)/.test(locoType)) return stockSpeedLimit;
const stockMass = totalMass(state);
const speedLimitByMass = calculateSpeedLimit(locoType as LocoType, stockMass, isTrainPassenger(state));
return speedLimitByMass ? Math.min(stockSpeedLimit, speedLimitByMass) : stockSpeedLimit;
}
export function acceptableMass(state: IStore) {
if (state.stockList.length == 0 || !state.stockList[0].isLoco) return 0;
const activeLocomotiveType = state.stockList[0].type;
if (/^SM/.test(activeLocomotiveType)) return 2400;
// Elektryczne EU07 / EP07 / EP08 / ET41
// Pasażerski elektr.
if (isTrainPassenger(state)) {
if (/^(EU|EP)/.test(activeLocomotiveType)) return 650;
if (/^ET/.test(activeLocomotiveType)) return 700;
return 0;
}
// Towarowy / inny elektr.
if (/^EU/.test(activeLocomotiveType)) return 2000;
if (/^ET/.test(activeLocomotiveType)) return 4000;
if (/^EP/.test(activeLocomotiveType)) return 650;
return 0;
}
export function isTrainPassenger(state: IStore) {
@@ -206,124 +163,3 @@ export function chosenRealStock(state: IStore) {
return realStockObj;
}
// export function maxAllowedSpeed(state: IStore) {
// const headLocoType = state.stockList[0]?.isLoco ? state.stockList[0].type : undefined;
// if (!headLocoType) return 0;
// const isPassenger = isTrainPassenger(state);
// const stockMass = totalMass(state);
// // const maxSpeed = maxAllowedSpeedTable[headLocoType];
// // if()
// }
// export function maxAllowedSpeed(state: IStore) {
// if (state.stockList.length < 1) return -1;
// if (!state.stockList[0].isLoco) return -1;
// const headingLoco = state.stockList[0];
// const isPassenger = isTrainPassenger(state);
// if (headingLoco.type.startsWith('EU07')) {
// if (isPassenger && totalMass.value <= 650) return 125;
// if (!isPassenger && totalMass.value <= 2000) return 70;
// return -1;
// }
// if (headingLoco.type.startsWith('EP07')) {
// if (isPassenger && totalMass.value <= 650) return 125;
// if (!isPassenger) return -1;
// return -1;
// }
// if (headingLoco.type.startsWith('EP08')) {
// if (isPassenger && totalMass.value <= 650) return 140;
// if (!isPassenger) return -1;
// return -1;
// }
// if (headingLoco.type.startsWith('ET41')) {
// if (isPassenger && totalMass.value <= 700) return 125;
// if (!isPassenger && totalMass.value <= 4000) return 70;
// return -1;
// }
// if (headingLoco.type.startsWith('SM42')) {
// if (totalMass.value <= 95) return 90;
// if (totalMass.value <= 200) return 80;
// if (totalMass.value <= 300) return 70;
// if (totalMass.value <= 450) return 60;
// if (totalMass.value <= 750) return 50;
// if (totalMass.value <= 1130) return 40;
// if (totalMass.value <= 1720) return 30;
// if (totalMass.value <= 2400) return 20;
// return -1;
// }
// return Store.stockList.reduce((acc, stock) => (stock.maxSpeed < acc || acc == 0 ? stock.maxSpeed : acc), 0);
// });
// export const warnings = {
// trainTooLong: computed(() => {
// if (isTrainPassenger.value && totalLength.value > 350) return true;
// if (!isTrainPassenger.value && totalLength.value > 650) return true;
// return false;
// }),
// locoNotSuitable: computed(() => {
// 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;
// }),
// trainTooHeavy: computed(() => {
// if (Store.stockList.length == 0 || !Store.stockList[0].isLoco) return false;
// const headingLoco = Store.stockList[0];
// if (
// isTrainPassenger.value &&
// (headingLoco.type.startsWith('EU') || headingLoco.type.startsWith('EP')) &&
// totalMass.value > 650
// )
// return true;
// if (isTrainPassenger.value && headingLoco.type.startsWith('ET') && totalMass.value > 700) return true;
// if (!isTrainPassenger.value && headingLoco.type.startsWith('EU') && totalMass.value > 2000) return true;
// if (!isTrainPassenger.value && headingLoco.type.startsWith('ET') && totalMass.value > 4000) return true;
// if (headingLoco.type.startsWith('SM') && totalMass.value > 2400) return true;
// return false;
// }),
// tooManyLocos: computed(() => {
// if (
// Store.stockList.reduce((acc, stock) => {
// if (!stock.isLoco) return acc;
// acc += stock.count;
// return acc;
// }, 0) > 2
// )
// return true;
// return false;
// }),
// };