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

eslint & prettier update; api fetching from static server

Browse Source
This commit is contained in:
Spythere
2024-03-27 16:10:53 +01:00
parent f9276f6c71
commit 337425d21c
37 changed files with 636 additions and 565 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+9 -8
View File
@@ -5,28 +5,29 @@
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { useStore } from "./store";
import ImageFullscreenPreview from "./components/utils/ImageFullscreenPreview.vue";
import AppContainerView from "./views/AppContainerView.vue";
import AppModals from "./components/app/AppModals.vue";
import { defineComponent } from 'vue';
import { useStore } from './store';
import ImageFullscreenPreview from './components/utils/ImageFullscreenPreview.vue';
import AppContainerView from './views/AppContainerView.vue';
import AppModals from './components/app/AppModals.vue';
export default defineComponent({
components: { ImageFullscreenPreview, AppContainerView, AppModals },
data() {
return {
store: useStore(),
};
},
async created() {
this.store.fetchStockInfoData();
this.store.handleRouting();
this.store.setupAPIData();
},
components: { ImageFullscreenPreview, AppContainerView, AppModals },
});
</script>
<style lang="scss">
@import "./styles/global.scss";
@import './styles/global.scss';
/* APP */
#app {
src/components/app/AppModals.vue
+3 -3
View File
@@ -7,9 +7,9 @@
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { useStore } from "../../store";
import RealStockCard from "../cards/RealStockCard.vue";
import { defineComponent } from 'vue';
import { useStore } from '../../store';
import RealStockCard from '../cards/RealStockCard.vue';
export default defineComponent({
components: { RealStockCard },
src/components/app/Footer.vue
+9 -12
View File
@@ -3,35 +3,32 @@
<i18n-t keypath="footer.disclaimer" tag="div" class="text--grayed">
<template #tos>
<a style="color: #ccc" :href="$t('footer.tos-href')" target="_blank">
{{ $t("footer.tos") }}
{{ $t('footer.tos') }}
</a>
</template>
</i18n-t>
<div class="text--grayed" v-if="store.stockData">
{{ $t("footer.version-check", { version: store.stockData.version }) }}
<div class="text--grayed" v-if="store.vehiclesAPIData">
{{ $t('footer.version-check', { version: store.vehiclesAPIData.version }) }}
</div>
<div>
&copy;
<a href="https://td2.info.pl/profile/?u=20777" target="_blank"
>Spythere</a
>
{{ new Date().getUTCFullYear() }} | v{{ VERSION
}}{{ !isOnProductionHost ? "dev" : "" }}
<a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
{{ new Date().getUTCFullYear() }} | v{{ VERSION }}{{ !isOnProductionHost ? 'dev' : '' }}
</div>
</footer>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import packageInfo from "../../../package.json";
import { useStore } from "../../store";
import { defineComponent } from 'vue';
import packageInfo from '../../../package.json';
import { useStore } from '../../store';
export default defineComponent({
data() {
return {
isOnProductionHost: location.hostname == "pojazdownik-td2.web.app",
isOnProductionHost: location.hostname == 'pojazdownik-td2.web.app',
VERSION: packageInfo.version,
store: useStore(),
};
src/components/app/MainContainer.vue
+6 -6
View File
@@ -8,11 +8,11 @@
</template>
<script lang="ts">
import { defineComponent } from "vue";
import LogoSection from "../sections/LogoSection.vue";
import InputsSection from "../sections/InputsSection.vue";
import TrainImageSection from "../sections/TrainImageSection.vue";
import StockSection from "../sections/StockSection.vue";
import { defineComponent } from 'vue';
import LogoSection from '../sections/LogoSection.vue';
import InputsSection from '../sections/InputsSection.vue';
import TrainImageSection from '../sections/TrainImageSection.vue';
import StockSection from '../sections/StockSection.vue';
export default defineComponent({
components: { LogoSection, InputsSection, TrainImageSection, StockSection },
@@ -20,7 +20,7 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import "../../styles/global.scss";
@import '../../styles/global.scss';
main {
display: grid;
src/components/cards/RealStockCard.vue
+42 -97
View File
@@ -1,23 +1,15 @@
<template>
<div
class="real-stock-card g-card"
@keydown.esc="store.isRealStockListCardOpen = false"
>
<div class="real-stock-card g-card" @keydown.esc="store.isRealStockListCardOpen = false">
<div class="g-card_bg" @click="store.isRealStockListCardOpen = false"></div>
<div class="card_content">
<div class="card_nav">
<div class="top-pane">
<h1>
{{ $t("realstock.title") }}
<a href="https://td2.info.pl/profile/?u=17708" target="_blank"
>Railtrains997</a
>
{{ $t('realstock.title') }}
<a href="https://td2.info.pl/profile/?u=17708" target="_blank">Railtrains997</a>
</h1>
<button
class="btn exit-btn"
@click="store.isRealStockListCardOpen = false"
>
<button class="btn exit-btn" @click="store.isRealStockListCardOpen = false">
&Cross;
</button>
</div>
@@ -31,7 +23,7 @@
<datalist id="readyStockDataList">
<option
v-for="stock in store.readyStockList"
v-for="stock in store.realCompositionList"
:value="stock.stockId"
:key="stock.name"
>
@@ -56,31 +48,22 @@
</datalist>
<button class="btn" @click="resetStockFilters">
{{ $t("realstock.action-reset") }}
{{ $t('realstock.action-reset') }}
</button>
</div>
</div>
<ul class="card_list" ref="list" @scroll="onListScroll">
<li
v-for="rStock in computedReadyStockList"
:key="rStock.stockId"
:data-last-selected="store.chosenRealStockName === rStock.stockId"
>
<li v-for="rStock in computedReadyStockList" :key="rStock.stockId">
<!-- :data-last-selected="store.ch === rStock.stockId" -->
<div
class="stock-title"
tabindex="0"
@click="chooseStock(rStock)"
@keydown.enter="chooseStock(rStock)"
>
<img
class="stock-icon"
:src="getIconURL(rStock.type)"
:alt="rStock.type"
/>
<b class="text--accent" style="margin-left: 5px">
{{ rStock.name }}</b
>
<img class="stock-icon" :src="getIconURL(rStock.type)" :alt="rStock.type" />
<b class="text--accent" style="margin-left: 5px"> {{ rStock.name }}</b>
<div>{{ rStock.number }}</div>
</div>
@@ -111,24 +94,19 @@
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { defineComponent } from 'vue';
import { useStore } from "../../store";
import imageMixin from "../../mixins/imageMixin";
import stockMixin from "../../mixins/stockMixin";
import { useStore } from '../../store';
import imageMixin from '../../mixins/imageMixin';
import stockMixin from '../../mixins/stockMixin';
import { IReadyStockItem } from "../../types";
import http from "../../http";
interface ResponseJSONData {
[key: string]: string;
}
import { IRealComposition } from '../../types';
function getVehicleType(stockType: string) {
if (/^E/.test(stockType)) return "loco-e";
if (/^S/.test(stockType)) return "loco-s";
if (/^E/.test(stockType)) return 'loco-e';
if (/^S/.test(stockType)) return 'loco-s';
return "car-passenger";
return 'car-passenger';
}
export default defineComponent({
@@ -136,55 +114,51 @@ export default defineComponent({
data: () => ({
store: useStore(),
responseStatus: "loading",
responseStatus: 'loading',
isMobile:
"ontouchstart" in document.documentElement &&
navigator.userAgent.match(/Mobi/)
'ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/)
? true
: false,
observer: null as IntersectionObserver | null,
searchedReadyStockName: "",
searchedReadyStockString: "",
searchedReadyStockName: '',
searchedReadyStockString: '',
visibleIndexesTo: 0,
lastSelectedStockId: null as string | null,
scrollTop: 0,
}),
async mounted() {
mounted() {
this.mountObserver();
this.fetchStockListData();
},
activated() {
(this.$refs["focus"] as HTMLElement).focus();
(this.$refs['focus'] as HTMLElement).focus();
(this.$refs["list"] as HTMLElement).scrollTo({
(this.$refs['list'] as HTMLElement).scrollTo({
top: this.scrollTop,
behavior: "auto",
behavior: 'auto',
});
},
computed: {
computedReadyStockList() {
if (this.searchedReadyStockName == null) return this.store.readyStockList;
return this.store.readyStockList
computedReadyStockList(): IRealComposition[] {
return this.store.realCompositionList
.filter(
(rs) =>
rs.stockId
(rc) =>
rc.stockId
.toLocaleLowerCase()
.includes(this.searchedReadyStockName.toLocaleLowerCase()) &&
rs.stockString
rc.stockString
.toLocaleLowerCase()
.includes(this.searchedReadyStockString.toLocaleLowerCase()),
.includes(this.searchedReadyStockString.toLocaleLowerCase())
)
.filter((_, i) => i <= this.visibleIndexesTo);
},
computedAvailableStockTypes() {
return this.store.readyStockList
return this.store.realCompositionList
.reduce((acc, rs) => {
rs.stockString.split(";").forEach((s) => {
rs.stockString.split(';').forEach((s) => {
if (!acc.includes(s)) acc.push(s);
});
@@ -198,7 +172,7 @@ export default defineComponent({
computedReadyStockList(curr, prev) {
if (curr.length < prev.length) {
this.visibleIndexesTo = 20;
(this.$refs["list"] as HTMLElement).scrollTo({
(this.$refs['list'] as HTMLElement).scrollTo({
top: 0,
});
}
@@ -206,41 +180,12 @@ export default defineComponent({
},
methods: {
async fetchStockListData() {
const readyStockJSONData = (
await http.get<ResponseJSONData>("td2/data/readyStock.json")
).data;
if (!readyStockJSONData) {
this.responseStatus = "error";
return;
}
for (let stockKey in readyStockJSONData) {
const [type, number, ...name] = stockKey.split(" ");
const obj = {
number: number.replace(/_/g, "/"),
name: name.join(" "),
stockString: readyStockJSONData[stockKey],
type,
};
this.store.readyStockList.push({
...obj,
stockId: `${obj.type} ${obj.number} ${obj.name}`,
});
}
this.responseStatus = "loaded";
},
mountObserver() {
this.observer = new IntersectionObserver((entries) => {
if (entries[0].intersectionRatio > 0) this.visibleIndexesTo += 20;
});
this.observer.observe(this.$refs["bottom"] as HTMLElement);
this.observer.observe(this.$refs['bottom'] as HTMLElement);
},
getImageUrl(name: string) {
@@ -248,11 +193,11 @@ export default defineComponent({
},
resetStockFilters() {
this.searchedReadyStockName = "";
this.searchedReadyStockString = "";
this.searchedReadyStockName = '';
this.searchedReadyStockString = '';
},
chooseStock(stockItem: IReadyStockItem) {
chooseStock(stockItem: IRealComposition) {
this.loadStockFromString(stockItem.stockString);
this.lastSelectedStockId = stockItem.stockId;
this.store.isRealStockListCardOpen = false;
@@ -261,7 +206,7 @@ export default defineComponent({
onStockItemError(e: Event, stockType: string) {
const imageEl = e.target as HTMLImageElement;
imageEl.src = `images/${getVehicleType(stockType)}-unknown.png`;
imageEl.style.opacity = "1";
imageEl.style.opacity = '1';
},
onListScroll(e: Event) {
@@ -275,7 +220,7 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import "../../styles/global.scss";
@import '../../styles/global.scss';
.exit-btn {
font-size: 1.2em;
@@ -361,7 +306,7 @@ ul {
gap: 1rem;
padding: 0.1em;
&[data-last-selected="true"] .stock-title {
&[data-last-selected='true'] .stock-title {
border: 1px solid $accentColor;
}
src/components/common/Checkbox.vue
+2 -2
View File
@@ -27,7 +27,7 @@ div {
user-select: none;
&::before {
content: "\2716";
content: '\2716';
margin-right: 0.5em;
color: #aaa;
}
@@ -51,7 +51,7 @@ input {
&::before {
color: palegreen;
content: "\2714";
content: '\2714';
}
}
}
src/components/sections/InputsSection.vue
+21 -6
View File
@@ -27,7 +27,9 @@
<option :value="null" disabled>
{{ $t('inputs.input-vehicle') }}
</option>
<option v-for="loco in locoOptions" :value="loco" :key="loco.type">{{ loco.type }}<b v-if="loco.isSponsorsOnly">*</b></option>
<option v-for="loco in locoOptions" :value="loco" :key="loco.type">
{{ loco.type }}<b v-if="loco.isSponsorsOnly">*</b>
</option>
</select>
</div>
@@ -56,7 +58,9 @@
{{ $t('inputs.input-carwagon') }}
</option>
<option v-for="car in carOptions" :value="car" :key="car.type">{{ car.type }}<b v-if="car.isSponsorsOnly">*</b></option>
<option v-for="car in carOptions" :value="car" :key="car.type">
{{ car.type }}<b v-if="car.isSponsorsOnly">*</b>
</option>
</select>
</div>
@@ -65,7 +69,9 @@
<select
id="cargo-select"
:disabled="
(store.chosenCar && !store.chosenCar.loadable) || (store.chosenCar && store.chosenCar.useType == 'car-passenger') || !store.chosenCar
(store.chosenCar && !store.chosenCar.loadable) ||
(store.chosenCar && store.chosenCar.useType == 'car-passenger') ||
!store.chosenCar
"
data-select="cargo"
data-ignore-outside="1"
@@ -90,7 +96,12 @@
<button class="btn" @click="addVehicle(store.chosenVehicle, store.chosenCargo)">
{{ $t('inputs.action-add') }}
</button>
<button class="btn" @click="switchVehicles" :disabled="store.chosenStockListIndex == -1" :data-disabled="store.chosenStockListIndex == -1">
<button
class="btn"
@click="switchVehicles"
:disabled="store.chosenStockListIndex == -1"
:data-disabled="store.chosenStockListIndex == -1"
>
{{ $t('inputs.action-swap') }}
<b class="text--accent">
{{ store.chosenStockListIndex == -1 ? '' : `${store.chosenStockListIndex + 1}.` }}
@@ -173,7 +184,8 @@ export default defineComponent({
addOrSwitchVehicle() {
if (!this.store.chosenVehicle) return;
if (this.store.chosenStockListIndex == -1) this.addVehicle(this.store.chosenVehicle, this.store.chosenCargo);
if (this.store.chosenStockListIndex == -1)
this.addVehicle(this.store.chosenVehicle, this.store.chosenCargo);
else this.switchVehicles();
},
@@ -216,7 +228,10 @@ export default defineComponent({
this.store.chosenVehicle = type == 'loco' ? this.store.chosenLoco : this.store.chosenCar;
this.store.chosenCargo = this.store.chosenCar?.cargoTypes.find((cargo) => cargo.id == this.store.chosenCargo?.id) || null;
this.store.chosenCargo =
this.store.chosenCar?.cargoTypes.find(
(cargo) => cargo.id == this.store.chosenCargo?.id
) || null;
});
},
},
src/components/sections/LogoSection.vue
+9 -13
View File
@@ -1,10 +1,6 @@
<template>
<section class="logo-section">
<img
:src="`/logo-${$i18n.locale}.svg`"
alt="logo pojazdownik"
@click="navigate"
/>
<img :src="`/logo-${$i18n.locale}.svg`" alt="logo pojazdownik" @click="navigate" />
<div class="actions">
<button
@@ -26,31 +22,31 @@ export default {
return {
localeActions: [
{
name: "POLSKI",
locale: "pl",
name: 'POLSKI',
locale: 'pl',
},
{
name: "ENGLISH",
locale: "en",
name: 'ENGLISH',
locale: 'en',
},
],
};
},
methods: {
navigate() {
window.location.pathname = "";
window.location.pathname = '';
},
chooseLocale(locale: string) {
this.$i18n.locale = locale;
window.localStorage.setItem("locale", locale);
window.localStorage.setItem('locale', locale);
},
},
};
</script>
<style lang="scss" scoped>
@import "../../styles/global.scss";
@import '../../styles/global.scss';
.logo-section {
grid-row: 1;
@@ -69,7 +65,7 @@ export default {
display: flex;
gap: 0.5em;
button[data-selected="true"] {
button[data-selected='true'] {
font-weight: bold;
color: $accentColor;
text-decoration: underline;
src/components/sections/StockSection.vue
+19 -19
View File
@@ -23,12 +23,12 @@
</template>
<script lang="ts" setup>
import { computed, onMounted, ref } from "vue";
import { useStore } from "../../store";
import StockListTab from "../tabs/StockListTab.vue";
import StockGeneratorTab from "../tabs/StockGeneratorTab.vue";
import NumberGeneratorTab from "../tabs/NumberGeneratorTab.vue";
import WikiListTab from "../tabs/WikiListTab.vue";
import { computed, onMounted, ref } from 'vue';
import { useStore } from '../../store';
import StockListTab from '../tabs/StockListTab.vue';
import StockGeneratorTab from '../tabs/StockGeneratorTab.vue';
import NumberGeneratorTab from '../tabs/NumberGeneratorTab.vue';
import WikiListTab from '../tabs/WikiListTab.vue';
const sectionButtonRefs = ref([]);
@@ -36,36 +36,36 @@ const store = useStore();
type SectionMode = typeof store.stockSectionMode;
const sectionModes: SectionMode[] = [
"stock-list",
"wiki-list",
"number-generator",
"stock-generator",
'stock-list',
'wiki-list',
'number-generator',
'stock-generator',
];
onMounted(() => {
window.addEventListener("keydown", (e) => {
window.addEventListener('keydown', (e) => {
if (e.target instanceof HTMLInputElement) return;
if (/[1234]/.test(e.key)) {
const keyNum = Number(e.key);
store.stockSectionMode = sectionModes[keyNum - 1];
(sectionButtonRefs.value[keyNum - 1] as HTMLButtonElement).focus();
(sectionButtonRefs.value[keyNum - 1] as HTMLButtonElement)?.focus();
}
});
});
const chosenSectionComponent = computed(() => {
switch (store.stockSectionMode) {
case "stock-list":
case 'stock-list':
return StockListTab;
case "wiki-list":
case 'wiki-list':
return WikiListTab;
case "stock-generator":
case 'stock-generator':
return StockGeneratorTab;
case "number-generator":
case 'number-generator':
return NumberGeneratorTab;
default:
@@ -79,7 +79,7 @@ function chooseSection(sectionId: SectionMode) {
</script>
<style lang="scss">
@import "../../styles/global.scss";
@import '../../styles/global.scss';
// Tab change animation
.tab-change {
@@ -121,14 +121,14 @@ function chooseSection(sectionId: SectionMode) {
left: 50%;
transform: translateX(-50%);
content: "";
content: '';
width: 0;
height: 2px;
transition: all 100ms;
background-color: $accentColor;
}
&[data-selected="true"]::after {
&[data-selected='true']::after {
width: 100%;
}
}
src/components/sections/TrainImageSection.vue
+23 -8
View File
@@ -3,7 +3,11 @@
<div class="train-image__content" :class="{ sponsor: store.chosenVehicle?.isSponsorsOnly }">
<img
tabindex="0"
:src="store.chosenVehicle ? getThumbnailURL(store.chosenVehicle.type, 'small') : '/images/placeholder.jpg'"
:src="
store.chosenVehicle
? getThumbnailURL(store.chosenVehicle.type, 'small')
: '/images/placeholder.jpg'
"
@click="onImageClick"
@keydown.enter="onImageClick"
@error="onImageError"
@@ -14,13 +18,22 @@
<div class="train-image__info" v-if="store.chosenVehicle">
<b class="text--accent">{{ store.chosenVehicle.type }}</b> &bull;
<b style="color: #ccc">
{{ $t(`preview.${isLocomotive(store.chosenVehicle) ? store.chosenVehicle.power : store.chosenVehicle.useType}`) }}
{{
$t(
`preview.${isLocomotive(store.chosenVehicle) ? store.chosenVehicle.power : store.chosenVehicle.useType}`
)
}}
</b>
<div style="color: #ccc">
<div>{{ store.chosenVehicle.length }}m | {{ (store.chosenVehicle.weight / 1000).toFixed(1) }}t | {{ store.chosenVehicle.maxSpeed }} km/h</div>
<div>
{{ store.chosenVehicle.length }}m | {{ (store.chosenVehicle.weight / 1000).toFixed(1) }}t
| {{ store.chosenVehicle.maxSpeed }} km/h
</div>
<div v-if="isLocomotive(store.chosenVehicle)">{{ $t('preview.cabin') }} {{ store.chosenVehicle.cabinType }}</div>
<div v-if="isLocomotive(store.chosenVehicle)">
{{ $t('preview.cabin') }} {{ store.chosenVehicle.cabinType }}
</div>
<div v-else>
{{
@@ -32,7 +45,9 @@
<b style="color: salmon" v-if="store.chosenVehicle.isSponsorsOnly">{{
$t('preview.sponsor-only', [
new Date(store.chosenVehicle.sponsorsOnlyTimestamp).toLocaleDateString($i18n.locale == 'pl' ? 'pl-PL' : 'en-GB'),
new Date(store.chosenVehicle.sponsorsOnlyTimestamp).toLocaleDateString(
$i18n.locale == 'pl' ? 'pl-PL' : 'en-GB'
),
])
}}</b>
</div>
@@ -46,7 +61,7 @@
import { computed, defineComponent } from 'vue';
import { useStore } from '../../store';
import { isLocomotive } from '../../utils/vehicleUtils';
import { ILocomotive, Vehicle } from '../../types';
import { ILocomotive, IVehicle } from '../../types';
import imageMixin from '../../mixins/imageMixin';
export default defineComponent({
@@ -68,7 +83,7 @@ export default defineComponent({
},
watch: {
chosenVehicle(vehicle: Vehicle, prevVehicle: Vehicle) {
chosenVehicle(vehicle: IVehicle, prevVehicle: IVehicle) {
if (vehicle && vehicle.type != prevVehicle?.type) {
this.store.imageLoading = true;
}
@@ -87,7 +102,7 @@ export default defineComponent({
el.src = '/images/placeholder.jpg';
},
isLocomotive(vehicle: Vehicle): vehicle is ILocomotive {
isLocomotive(vehicle: IVehicle): vehicle is ILocomotive {
return isLocomotive(vehicle);
},
src/components/tabs/NumberGeneratorTab.vue
+48 -87
View File
@@ -1,20 +1,16 @@
<template>
<div class="number-generator tab">
<div class="tab_header">
<h2>{{ $t("numgen.title") }}</h2>
<h3>{{ $t("numgen.subtitle") }}</h3>
<h2>{{ $t('numgen.title') }}</h2>
<h3>{{ $t('numgen.subtitle') }}</h3>
</div>
<div class="tab_content">
<div class="category-select">
<label for="category"> {{ $t("numgen.train-category") }}</label>
<select
id="category"
v-model="chosenCategory"
@change="randomizeTrainNumber()"
>
<label for="category"> {{ $t('numgen.train-category') }}</label>
<select id="category" v-model="chosenCategory" @change="randomizeTrainNumber()">
<option :value="null" disabled>
{{ $t("numgen.train-category") }}
{{ $t('numgen.train-category') }}
</option>
<option
v-for="(_, category) in genData.categoriesRules"
@@ -28,40 +24,24 @@
<div class="regions-select">
<div>
<label for="begin-region"> {{ $t("numgen.start-region") }}</label>
<select
id="begin-region"
v-model="beginRegionName"
@change="randomizeTrainNumber()"
>
<label for="begin-region"> {{ $t('numgen.start-region') }}</label>
<select id="begin-region" v-model="beginRegionName" @change="randomizeTrainNumber()">
<option :value="null" disabled>
{{ $t("numgen.start-region") }}
{{ $t('numgen.start-region') }}
</option>
<option
v-for="(_, name) in genData.regionNumbers"
:key="name"
:value="name"
>
<option v-for="(_, name) in genData.regionNumbers" :key="name" :value="name">
{{ name }}
</option>
</select>
</div>
<div>
<label for="end-region"> {{ $t("numgen.end-region") }}</label>
<select
id="end-region"
v-model="endRegionName"
@change="randomizeTrainNumber()"
>
<label for="end-region"> {{ $t('numgen.end-region') }}</label>
<select id="end-region" v-model="endRegionName" @change="randomizeTrainNumber()">
<option :value="null" disabled>
{{ $t("numgen.end-region") }}
{{ $t('numgen.end-region') }}
</option>
<option
v-for="(_, name) in genData.regionNumbers"
:key="name"
:value="name"
>
<option v-for="(_, name) in genData.regionNumbers" :key="name" :value="name">
{{ name }}
</option>
</select>
@@ -70,71 +50,58 @@
<div class="generated-number" @click="copyNumber">
<span v-if="trainNumber">
{{ $t("numgen.number-info") }}
{{ $t('numgen.number-info') }}
<b class="text--accent">{{ trainNumber }}</b>
</span>
<span v-else>{{ $t("numgen.warning") }}</span>
<span v-else>{{ $t('numgen.warning') }}</span>
</div>
<div
class="category-rules"
v-if="chosenCategory && categoryRules && trainNumber"
>
<div class="category-rules" v-if="chosenCategory && categoryRules && trainNumber">
<!-- First & second digit (the same regions) -->
<div
v-if="
beginRegionName && endRegionName && beginRegionName == endRegionName
"
>
<b>{{ $t("numgen.rules.two-first-digits") }}</b>
{{ $t("numgen.rules.from-pool") }}
<b class="text--accent">{{
genData.sameRegions[beginRegionName].join(", ")
}}</b>
{{ $t("numgen.rules.for-region") }} {{ beginRegionName }}
<div v-if="beginRegionName && endRegionName && beginRegionName == endRegionName">
<b>{{ $t('numgen.rules.two-first-digits') }}</b>
{{ $t('numgen.rules.from-pool') }}
<b class="text--accent">{{ genData.sameRegions[beginRegionName].join(', ') }}</b>
{{ $t('numgen.rules.for-region') }} {{ beginRegionName }}
</div>
<!-- First & second digit (different regions) -->
<div v-else>
<div>
<b>
{{ $t("numgen.rules.first-digit") }}
{{ $t('numgen.rules.first-digit') }}
<span class="text--accent">{{ trainNumber[0] }}</span>
</b>
{{ $t("numgen.rules.for-region-begin") }} {{ beginRegionName }}
{{ $t('numgen.rules.for-region-begin') }} {{ beginRegionName }}
</div>
<div>
<b>
{{ $t("numgen.rules.second-digit") }}
{{ $t('numgen.rules.second-digit') }}
<span class="text--accent">{{ trainNumber[1] }} </span>
</b>
{{ $t("numgen.rules.for-region-end") }} {{ endRegionName }}
{{ $t('numgen.rules.for-region-end') }} {{ endRegionName }}
</div>
</div>
<!-- Third digit (non-passenger only) -->
<div v-if="categoryRules[0] != null">
<b>
{{ $t("numgen.rules.third-digit") }}
{{ $t('numgen.rules.third-digit') }}
<span class="text--accent">{{ categoryRules[0] }}</span>
</b>
{{ $t("numgen.rules.for-category") }} {{ chosenCategory }}
{{ $t('numgen.rules.for-category') }} {{ chosenCategory }}
</div>
<!-- Last digits -->
<div>
<b>
{{
$t(
`numgen.rules.${categoryRules[1]?.length == 3 ? "three" : "two"}-last-digits`,
)
$t(`numgen.rules.${categoryRules[1]?.length == 3 ? 'three' : 'two'}-last-digits`)
}}</b
>
{{ $t("numgen.rules.from-range") }}
<b class="text--accent"
>{{ categoryRules[1] }}-{{ categoryRules[2] }}</b
>
{{ $t('numgen.rules.from-range') }}
<b class="text--accent">{{ categoryRules[1] }}-{{ categoryRules[2] }}</b>
</div>
</div>
@@ -142,7 +109,7 @@
<div class="tab_links">
<a :href="$t('numgen.td2-wiki-link')" target="_blank">
{{ $t("numgen.td2-wiki") }}
{{ $t('numgen.td2-wiki') }}
</a>
</div>
@@ -150,15 +117,15 @@
<div class="tab_actions">
<button class="btn" @click="randomizeTrainNumber(true)">
{{ $t("numgen.action-random-region") }}
{{ $t('numgen.action-random-region') }}
</button>
<button class="btn" @click="randomizeCategory">
{{ $t("numgen.action-random-category") }}
{{ $t('numgen.action-random-category') }}
</button>
<button class="btn" @click="randomizeTrainNumber(false)">
{{ $t("numgen.action-random-number") }}
{{ $t('numgen.action-random-number') }}
</button>
</div>
</div>
@@ -166,11 +133,11 @@
</template>
<script setup lang="ts">
import { Ref, ref } from "vue";
import { useI18n } from "vue-i18n";
import { Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import genData from "../../constants/numberGeneratorData.json";
import { computed } from "vue";
import genData from '../../constants/numberGeneratorData.json';
import { computed } from 'vue';
const i18n = useI18n();
type RegionName = keyof typeof genData.regionNumbers;
@@ -185,7 +152,7 @@ const trainNumber = ref(null) as Ref<string | null>;
const copyNumber = () => {
if (trainNumber.value) {
navigator.clipboard.writeText(trainNumber.value);
alert(i18n.t("numgen.alert"));
alert(i18n.t('numgen.alert'));
}
};
@@ -208,16 +175,12 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
const regionKeys = Object.keys(genData.regionNumbers);
if (beginRegionName.value == null || randomizeRegions)
beginRegionName.value = regionKeys[
(regionKeys.length * Math.random()) << 0
] as RegionName;
beginRegionName.value = regionKeys[(regionKeys.length * Math.random()) << 0] as RegionName;
if (endRegionName.value == null || randomizeRegions)
endRegionName.value = regionKeys[
(regionKeys.length * Math.random()) << 0
] as RegionName;
endRegionName.value = regionKeys[(regionKeys.length * Math.random()) << 0] as RegionName;
let number = "";
let number = '';
// Two first numbers (begin & end regions)
if (beginRegionName.value == endRegionName.value) {
@@ -239,22 +202,20 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
}
// Choose default category if it's not chosen
if (chosenCategory.value == null) chosenCategory.value = "EI";
if (chosenCategory.value == null) chosenCategory.value = 'EI';
// Get category rules
const [thirdNumber, minRange, maxRange] = categoryRules.value!;
// Third number
number += thirdNumber ?? "";
number += thirdNumber ?? '';
// Remaining numbers
const rangeNums = minRange!.length;
const randRange = Math.floor(
Math.random() * (Number(maxRange) - Number(minRange)) + Number(minRange),
Math.random() * (Number(maxRange) - Number(minRange)) + Number(minRange)
).toString();
const leadingZeros = new Array(Math.abs(randRange.length - rangeNums))
.fill("0")
.join("");
const leadingZeros = new Array(Math.abs(randRange.length - rangeNums)).fill('0').join('');
number += `${leadingZeros}${randRange}`;
@@ -263,8 +224,8 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
</script>
<style lang="scss" scoped>
@import "../../styles/tab.scss";
@import "../../styles/global.scss";
@import '../../styles/tab.scss';
@import '../../styles/global.scss';
label {
display: block;
src/components/tabs/StockGeneratorTab.vue
+34 -12
View File
@@ -85,15 +85,27 @@
<hr />
<div class="tab_actions">
<button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock()">
<button
class="btn"
:data-disabled="computedChosenCarTypes.size == 0"
@click="generateStock()"
>
{{ $t('stockgen.action-generate') }}
</button>
<button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock(true)">
<button
class="btn"
:data-disabled="computedChosenCarTypes.size == 0"
@click="generateStock(true)"
>
{{ $t('stockgen.action-generate-empty') }}
</button>
<button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="resetChosenCargo">
<button
class="btn"
:data-disabled="computedChosenCarTypes.size == 0"
@click="resetChosenCargo"
>
{{ $t('stockgen.action-reset') }}
</button>
</div>
@@ -138,9 +150,9 @@ export default defineComponent({
},
computedCargoData() {
if (!this.store.stockData?.generator.cargo) return [];
if (!this.store.vehiclesAPIData?.generator.cargo) return [];
const cargoGeneratorData = this.store.stockData.generator.cargo;
const cargoGeneratorData = this.store.vehiclesAPIData.generator.cargo;
return Object.keys(cargoGeneratorData)
.sort((v1, v2) => this.$t(`cargo.${v1}`).localeCompare(this.$t(`cargo.${v2}`)))
@@ -175,14 +187,16 @@ export default defineComponent({
if (!this.isCarGroupingEnabled) return false;
stockList.sort((s1, s2) => {
return (s1.constructionType + s1.cargo?.id).localeCompare(s2.constructionType + s2.cargo?.id);
return (s1.constructionType + s1.cargo?.id).localeCompare(
s2.constructionType + s2.cargo?.id
);
});
},
generateStock(empty = false) {
const generatedChosenStockList = this.chosenCargoTypes.reduce(
(acc, type) => {
this.store.stockData?.generator.cargo[type]
this.store.vehiclesAPIData?.generator.cargo[type]
.filter((c) => !this.excludedCarTypes.includes(c.split(':')[0]))
.forEach((c) => {
const [type, cargoType] = c.split(':');
@@ -192,11 +206,14 @@ export default defineComponent({
if (!cargoType || empty) cargoObjs.push(undefined);
else if (cargoType == 'all') cargoObjs.push(...carWagonObjs[0]!.cargoTypes);
else cargoObjs.push(carWagonObjs[0]?.cargoTypes.find((cargo) => cargo.id == cargoType));
else
cargoObjs.push(carWagonObjs[0]?.cargoTypes.find((cargo) => cargo.id == cargoType));
carWagonObjs.forEach((cw) => {
cargoObjs.forEach((cargoObj) => {
const chosenStock = acc.find((a) => a.constructionType.includes(cw.constructionType));
const chosenStock = acc.find((a) =>
a.constructionType.includes(cw.constructionType)
);
if (!chosenStock)
acc.push({
@@ -225,12 +242,17 @@ export default defineComponent({
this.store.stockList.splice(this.store.stockList[0]?.isLoco ? 1 : 0);
let carCount = 0;
const maxWeight = this.store.acceptableWeight > 0 ? Math.min(this.store.acceptableWeight, this.maxTons * 1000) : this.maxTons * 1000;
const maxWeight =
this.store.acceptableWeight > 0
? Math.min(this.store.acceptableWeight, this.maxTons * 1000)
: this.maxTons * 1000;
// eslint-disable-next-line no-constant-condition
while (true) {
const randomStockType = generatedChosenStockList[~~(Math.random() * generatedChosenStockList.length)];
const { carWagon, cargo } = randomStockType.carPool[~~(Math.random() * randomStockType.carPool.length)];
const randomStockType =
generatedChosenStockList[~~(Math.random() * generatedChosenStockList.length)];
const { carWagon, cargo } =
randomStockType.carPool[~~(Math.random() * randomStockType.carPool.length)];
if (
this.store.totalWeight + (carWagon.weight + (cargo?.weight ?? 0)) > maxWeight ||
src/components/tabs/StockListTab.vue
+93 -25
View File
@@ -11,57 +11,92 @@
{{ $t('stocklist.action-upload') }}
</button>
<button class="btn btn--image" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="downloadStock">
<button
class="btn btn--image"
:data-disabled="stockIsEmpty"
:disabled="stockIsEmpty"
@click="downloadStock"
>
<img src="/images/icon-download.svg" alt="download icon" />
{{ $t('stocklist.action-download') }}
</button>
<button class="btn btn--image" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="copyToClipboard">
<button
class="btn btn--image"
:data-disabled="stockIsEmpty"
:disabled="stockIsEmpty"
@click="copyToClipboard"
>
<img src="/images/icon-copy.svg" alt="copy icon" />
{{ $t('stocklist.action-copy') }}
</button>
<button class="btn btn--image" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="resetStock">
<button
class="btn btn--image"
:data-disabled="stockIsEmpty"
:disabled="stockIsEmpty"
@click="resetStock"
>
<img src="/images/icon-reset.svg" alt="reset icon" />
{{ $t('stocklist.action-reset') }}
</button>
<button class="btn btn--image" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="shuffleCars">
<button
class="btn btn--image"
:data-disabled="stockIsEmpty"
:disabled="stockIsEmpty"
@click="shuffleCars"
>
<img src="/images/icon-shuffle.svg" alt="shuffle icon" />
{{ $t('stocklist.action-shuffle') }}
</button>
</div>
<div class="stock_controls" :data-disabled="store.chosenStockListIndex == -1">
<button class="btn btn--image" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" @click="moveUpStock(store.chosenStockListIndex)">
<button
class="btn btn--image"
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
@click="moveUpStock(store.chosenStockListIndex)"
>
<img :src="getIconURL('higher')" alt="move up vehicle" />
{{ $t('stocklist.action-move-up') }}
</button>
<button class="btn btn--image" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" @click="moveDownStock(store.chosenStockListIndex)">
<button
class="btn btn--image"
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
@click="moveDownStock(store.chosenStockListIndex)"
>
<img :src="getIconURL('lower')" alt="move down vehicle" />
{{ $t('stocklist.action-move-down') }}
</button>
<button class="btn btn--image" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" @click="removeStock(store.chosenStockListIndex)">
<button
class="btn btn--image"
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
@click="removeStock(store.chosenStockListIndex)"
>
<img :src="getIconURL('remove')" alt="remove vehicle" />
{{ $t('stocklist.action-remove') }}
</button>
</div>
<div class="stock_specs">
<b class="real-stock-info" v-if="store.chosenRealStock">
<b class="real-stock-info" v-if="chosenRealComposition">
<span class="text--accent">
<img :src="getIconURL(store.chosenRealStock.type)" :alt="store.chosenRealStock.type" />
{{ store.chosenRealStock.number }} {{ store.chosenRealStock.name }}
<img :src="getIconURL(chosenRealComposition.type)" :alt="chosenRealComposition.type" />
{{ chosenRealComposition.number }} {{ chosenRealComposition.name }}
</span>
|
</b>
<span>
{{ $t('stocklist.mass') }}
<span class="text--accent">{{ (store.totalWeight / 1000).toFixed(1) }}t</span> ({{ $t('stocklist.mass-accepted') }}:
<span class="text--accent">{{ store.acceptableWeight ? `${~~(store.acceptableWeight / 1000)}t` : '-' }}</span
<span class="text--accent">{{ (store.totalWeight / 1000).toFixed(1) }}t</span>
({{ $t('stocklist.mass-accepted') }}:
<span class="text--accent">{{
store.acceptableWeight ? `${~~(store.acceptableWeight / 1000)}t` : '-'
}}</span
>) - {{ $t('stocklist.length') }}:
<span class="text--accent">{{ store.totalLength }}m</span>
- {{ $t('stocklist.vmax') }}:
@@ -80,17 +115,26 @@
</div>
<div class="stock_warnings" v-if="stockHasWarnings">
<div class="warning" v-if="locoNotSuitable">(!) {{ $t('stocklist.warning-not-suitable') }}</div>
<div class="warning" v-if="locoNotSuitable">
(!) {{ $t('stocklist.warning-not-suitable') }}
</div>
<div class="warning" v-if="trainTooLong && store.isTrainPassenger">(!) {{ $t('stocklist.warning-passenger-too-long') }}</div>
<div class="warning" v-if="trainTooLong && store.isTrainPassenger">
(!) {{ $t('stocklist.warning-passenger-too-long') }}
</div>
<div class="warning" v-if="trainTooLong && !store.isTrainPassenger">(!) {{ $t('stocklist.warning-freight-too-long') }}</div>
<div class="warning" v-if="trainTooLong && !store.isTrainPassenger">
(!) {{ $t('stocklist.warning-freight-too-long') }}
</div>
<div class="warning" v-if="trainTooHeavy">
(!)
<i18n-t keypath="stocklist.warning-too-heavy">
<template #href>
<a target="_blank" href="https://docs.google.com/spreadsheets/d/1KVa5vn2d8XGkXQFwbavVudwKqUQxbLOucHWs2VYqAUE">
<a
target="_blank"
href="https://docs.google.com/spreadsheets/d/1KVa5vn2d8XGkXQFwbavVudwKqUQxbLOucHWs2VYqAUE"
>
{{ $t('stocklist.acceptable-mass-docs') }}
</a>
</template>
@@ -123,7 +167,13 @@
@keydown.backspace="removeStock(i)"
ref="itemRefs"
>
<div class="stock-info" @dragstart="onDragStart(i)" @drop="onDrop($event, i)" @dragover="allowDrop" draggable="true">
<div
class="stock-info"
@dragstart="onDragStart(i)"
@drop="onDrop($event, i)"
@dragover="allowDrop"
draggable="true"
>
<span class="stock-info__no" :data-selected="i == store.chosenStockListIndex">
<span v-if="i == store.chosenStockListIndex">&bull;&nbsp;</span>
{{ i + 1 }}.
@@ -137,7 +187,9 @@
{{ stock.cargo.id }}
</span>
<span class="stock-info__length">{{ stock.length }}m</span>
<span class="stock-info__mass">{{ ((stock.weight + (stock.cargo?.weight ?? 0)) / 1000).toFixed(1) }}t</span>
<span class="stock-info__mass"
>{{ ((stock.weight + (stock.cargo?.weight ?? 0)) / 1000).toFixed(1) }}t</span
>
<span class="stock-info__speed">{{ stock.maxSpeed }}km/h</span>
</div>
</li>
@@ -184,11 +236,13 @@ export default defineComponent({
if (this.store.stockList.length == 0) return '';
const includeColdStart = this.store.isColdStart && this.store.stockSupportsColdStart;
const includeDoubleManned = this.store.isDoubleManned && this.store.stockSupportsDoubleManning;
const includeDoubleManned =
this.store.isDoubleManned && this.store.stockSupportsDoubleManning;
return this.store.stockList
.map((stock, i) => {
let stockTypeStr = stock.isLoco || !stock.cargo ? stock.type : `${stock.type}:${stock.cargo.id}`;
let stockTypeStr =
stock.isLoco || !stock.cargo ? stock.type : `${stock.type}:${stock.cargo.id}`;
if (i == 0 && (includeColdStart || includeDoubleManned))
return `${stockTypeStr},${includeColdStart ? 'c' : ''}${includeDoubleManned ? 'd' : ''}`;
@@ -203,11 +257,21 @@ export default defineComponent({
},
chosenStockVehicle() {
return this.store.chosenStockListIndex == -1 ? undefined : this.store.stockList[this.store.chosenStockListIndex];
return this.store.chosenStockListIndex == -1
? undefined
: this.store.stockList[this.store.chosenStockListIndex];
},
stockHasWarnings() {
return this.tooManyLocomotives || this.trainTooHeavy || this.trainTooLong || this.locoNotSuitable;
return (
this.tooManyLocomotives || this.trainTooHeavy || this.trainTooLong || this.locoNotSuitable
);
},
chosenRealComposition() {
const currentStockString = this.store.stockList.map((s) => s.type).join(';');
return this.store.realCompositionList.find((rc) => rc.stockString == currentStockString);
},
},
@@ -227,7 +291,10 @@ export default defineComponent({
onListItemClick(stockID: number) {
const stock = this.store.stockList[stockID];
this.store.chosenStockListIndex = this.store.chosenStockListIndex == stockID && this.store.chosenVehicle?.type == stock.type ? -1 : stockID;
this.store.chosenStockListIndex =
this.store.chosenStockListIndex == stockID && this.store.chosenVehicle?.type == stock.type
? -1
: stockID;
if (this.store.chosenStockListIndex == -1) {
this.store.chosenVehicle = null;
@@ -313,7 +380,8 @@ export default defineComponent({
availableIndexes.splice(i, -1);
const randAvailableIndex = availableIndexes[Math.floor(Math.random() * availableIndexes.length)];
const randAvailableIndex =
availableIndexes[Math.floor(Math.random() * availableIndexes.length)];
const tempSwap = this.store.stockList[randAvailableIndex];
this.store.stockList[randAvailableIndex] = this.store.stockList[i];
@@ -324,7 +392,7 @@ export default defineComponent({
downloadStock() {
if (this.store.stockList.length == 0) return alert(this.$t('stocklist.alert-empty'));
const defaultName = `${this.store.chosenRealStockName || this.store.stockList[0].type} ${(this.store.totalWeight / 1000).toFixed(1)}t; ${
const defaultName = `${this.chosenRealComposition ? this.chosenRealComposition.stockId + ' ' : ''}${this.store.stockList[0].type} ${(this.store.totalWeight / 1000).toFixed(1)}t; ${
this.store.totalLength
}m; vmax ${this.store.maxStockSpeed}`;
src/components/tabs/WikiListTab.vue
+30 -8
View File
@@ -7,10 +7,18 @@
<div class="tab_content">
<div class="actions-panel">
<div class="actions-panel_vehicles">
<button class="btn" :data-chosen="currentFilterMode == 'tractions'" @click="toggleFilter('tractions')">
<button
class="btn"
:data-chosen="currentFilterMode == 'tractions'"
@click="toggleFilter('tractions')"
>
{{ $t('wiki.action-vehicles') }}
</button>
<button class="btn" :data-chosen="currentFilterMode == 'carriages'" @click="toggleFilter('carriages')">
<button
class="btn"
:data-chosen="currentFilterMode == 'carriages'"
@click="toggleFilter('carriages')"
>
{{ $t('wiki.action-carriages') }}
</button>
</div>
@@ -88,12 +96,21 @@
import { defineComponent } from 'vue';
import { useStore } from '../../store';
import stockPreviewMixin from '../../mixins/stockPreviewMixin';
import { Vehicle } from '../../types';
import { IVehicle } from '../../types';
import { isLocomotive } from '../../utils/vehicleUtils';
import stockMixin from '../../mixins/stockMixin';
import imageMixin from '../../mixins/imageMixin';
type SorterID = 'type' | 'constructionType' | 'image' | 'length' | 'weight' | 'maxSpeed' | 'cargoCount' | 'group' | 'coldStart';
type SorterID =
| 'type'
| 'constructionType'
| 'image'
| 'length'
| 'weight'
| 'maxSpeed'
| 'cargoCount'
| 'group'
| 'coldStart';
interface IWikiHeader {
id: SorterID;
@@ -102,7 +119,7 @@ interface IWikiHeader {
}
interface IWikiRow {
vehicle: Vehicle;
vehicle: IVehicle;
show: boolean;
}
@@ -170,7 +187,9 @@ export default defineComponent({
case 'type':
case 'constructionType':
case 'group':
return direction == 1 ? row1.vehicle[id].localeCompare(row2.vehicle[id]) : row2.vehicle[id].localeCompare(row1.vehicle[id]);
return direction == 1
? row1.vehicle[id].localeCompare(row2.vehicle[id])
: row2.vehicle[id].localeCompare(row1.vehicle[id]);
case 'weight':
case 'length':
@@ -185,7 +204,8 @@ export default defineComponent({
case 'coldStart':
return (
((isLocomotive(row1.vehicle) && row1.vehicle.coldStart ? 1 : -1) - (isLocomotive(row2.vehicle) && row2.vehicle.coldStart ? 1 : -1)) *
((isLocomotive(row1.vehicle) && row1.vehicle.coldStart ? 1 : -1) -
(isLocomotive(row2.vehicle) && row2.vehicle.coldStart ? 1 : -1)) *
direction
);
@@ -193,7 +213,9 @@ export default defineComponent({
break;
}
return direction == 1 ? row1.vehicle.type.localeCompare(row2.vehicle.type) : row2.vehicle.type.localeCompare(row1.vehicle.type);
return direction == 1
? row1.vehicle.type.localeCompare(row2.vehicle.type)
: row2.vehicle.type.localeCompare(row1.vehicle.type);
},
},
src/components/utils/ImageFullscreenPreview.vue
+2 -2
View File
@@ -10,8 +10,8 @@
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { useStore } from "../../store";
import { defineComponent } from 'vue';
import { useStore } from '../../store';
export default defineComponent({
data() {
src/components/utils/StockThumbnails.vue
+12 -14
View File
@@ -28,18 +28,18 @@
</template>
<script setup lang="ts">
import { Ref, computed, nextTick, ref, watch } from "vue";
import { useStore } from "../../store";
import { IStock } from "../../types";
import { Ref, computed, nextTick, ref, watch } from 'vue';
import { useStore } from '../../store';
import { IStock } from '../../types';
const store = useStore();
const emit = defineEmits(["listItemClick"]);
const emit = defineEmits(['listItemClick']);
const thumbnailsRef = ref() as Ref<HTMLElement>;
const draggedIndex = ref(-1);
const onListItemClick = (index: number) => {
emit("listItemClick", index);
emit('listItemClick', index);
};
const stockImageError = (e: Event, stock: IStock) => {
@@ -55,12 +55,12 @@ watch(
(thumbnailsRef.value as HTMLElement)
.querySelector(`div:nth-child(${index + 1})`)
?.scrollIntoView({
block: "nearest",
inline: "start",
behavior: "smooth",
block: 'nearest',
inline: 'start',
behavior: 'smooth',
});
});
},
}
);
// Dragging images
@@ -71,9 +71,7 @@ const onDragStart = (vehicleIndex: number) => {
const onDrop = (e: DragEvent, vehicleIndex: number) => {
e.preventDefault();
let targetEl = thumbnailsRef.value.querySelector(
`div:nth-child(${vehicleIndex + 1})`,
);
let targetEl = thumbnailsRef.value.querySelector(`div:nth-child(${vehicleIndex + 1})`);
if (!targetEl && draggedIndex.value != -1) return;
@@ -114,7 +112,7 @@ const allowDrop = (e: DragEvent) => {
-moz-user-select: none;
-webkit-user-select: none;
&[data-selected="true"] {
&[data-selected='true'] {
background-color: rebeccapurple;
}
@@ -123,7 +121,7 @@ const allowDrop = (e: DragEvent) => {
margin: 0 1em;
}
&[data-sponsor="true"] > b {
&[data-sponsor='true'] > b {
color: salmon;
}
src/constants/numberGeneratorData.json
+2 -1
View File
@@ -12,7 +12,8 @@
},
"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
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 (1)": [10, 11, 19, 91, 93, 97, 99],
"Lublin (2)": [20, 22, 29],
src/enums/EVehicleUseType.ts
+6 -6
View File
@@ -1,9 +1,9 @@
export const enum EVehicleUseType {
LOCO_ELECTRICAL = "loco-e",
LOCO_DIESEL = "loco-s",
EMU = "loco-ezt",
DMU = "loco-szt",
LOCO_ELECTRICAL = 'loco-e',
LOCO_DIESEL = 'loco-s',
EMU = 'loco-ezt',
DMU = 'loco-szt',
CAR_PASSENGER = "car-passenger",
CAR_CARGO = "car-cargo",
CAR_PASSENGER = 'car-passenger',
CAR_CARGO = 'car-cargo',
}
src/http.ts
+4 -4
View File
@@ -1,10 +1,10 @@
import axios from "axios";
import axios from 'axios';
const http = axios.create({
baseURL:
import.meta.env.VITE_API_DEV === "1" && import.meta.env.DEV
? "http://localhost:5500"
: "https://spythere.github.io/api",
import.meta.env.VITE_API_DEV === '1' && import.meta.env.DEV
? 'http://localhost:5500'
: 'https://static.spythere.eu',
});
export default http;
src/i18n-setup.ts
+8 -17
View File
@@ -1,10 +1,9 @@
import localePL from "./locales/pl.json";
import localeEN from "./locales/en.json";
import { createI18n } from "vue-i18n";
import http from "./http";
import localePL from './locales/pl.json';
import localeEN from './locales/en.json';
import { createI18n } from 'vue-i18n';
type LocaleMessageSchema = typeof localePL;
type LocaleKey = "en" | "pl";
type LocaleKey = 'en' | 'pl';
const locales: { [key in LocaleKey]: LocaleMessageSchema } = {
en: localeEN,
@@ -12,24 +11,16 @@ const locales: { [key in LocaleKey]: LocaleMessageSchema } = {
};
const locale =
window.localStorage.getItem("locale") ||
(/^pl\b/.test(navigator.language) ? "pl" : "en");
window.localStorage.getItem('locale') || (/^pl\b/.test(navigator.language) ? 'pl' : 'en');
const i18n = createI18n<[LocaleMessageSchema], "en" | "pl">({
const i18n = createI18n<[LocaleMessageSchema], 'en' | 'pl'>({
locale,
fallbackLocale: "pl",
fallbackLocale: 'pl',
legacy: false,
globalInjection: true,
messages: locales,
});
async function fetchBackendTranslations() {
const localeData = (await http.get(`td2/data/locales.json`)).data;
i18n.global.mergeLocaleMessage("pl", localeData.pl);
i18n.global.mergeLocaleMessage("en", localeData.en);
}
fetchBackendTranslations();
// fetchBackendTranslations();
export default i18n;
src/main.ts
+5 -5
View File
@@ -1,8 +1,8 @@
import { createApp } from "vue";
import { createPinia } from "pinia";
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from "./App.vue";
import i18n from "./i18n-setup";
import App from './App.vue';
import i18n from './i18n-setup';
const pinia = createPinia();
createApp(App).use(pinia).use(i18n).mount("#app");
createApp(App).use(pinia).use(i18n).mount('#app');
src/mixins/imageMixin.ts
+7 -7
View File
@@ -1,17 +1,17 @@
import { defineComponent } from "vue";
import { defineComponent } from 'vue';
export default defineComponent({
methods: {
getIconURL(name: string, ext = "svg"): string {
getIconURL(name: string, ext = 'svg'): string {
return `/images/icon-${name}.${ext}`;
},
getThumbnailURL(vehicleType: string, size: "small" | "large") {
getThumbnailURL(vehicleType: string, size: 'small' | 'large') {
return `${
import.meta.env.VITE_API_DEV === "1"
? "http://localhost:5500"
: "https://spythere.github.io/api"
}/td2/images/${vehicleType}--${size == "small" ? 300 : 800}px.jpg`;
import.meta.env.VITE_API_DEV === '1'
? 'http://localhost:5500'
: 'https://static.spythere.eu'
}/images/${vehicleType}--${size == 'small' ? 300 : 800}px.jpg`;
},
},
});
src/mixins/stockMixin.ts
+6 -5
View File
@@ -1,6 +1,6 @@
import { defineComponent } from 'vue';
import { useStore } from '../store';
import { ICarWagon, ILocomotive, IStock, ICargo, Vehicle } from '../types';
import { ICarWagon, ILocomotive, IStock, ICargo, IVehicle } from '../types';
import { isLocomotive } from '../utils/vehicleUtils';
export default defineComponent({
@@ -15,7 +15,7 @@ export default defineComponent({
return `${Math.random().toString(36).slice(5)}`;
},
getStockObject(vehicle: Vehicle, cargo?: ICargo | null, count = 1): IStock {
getStockObject(vehicle: IVehicle, cargo?: ICargo | null, count = 1): IStock {
const isLoco = isLocomotive(vehicle);
return {
@@ -35,7 +35,7 @@ export default defineComponent({
};
},
addVehicle(vehicle: Vehicle | null, cargo?: ICargo | null) {
addVehicle(vehicle: IVehicle | null, cargo?: ICargo | null) {
if (!vehicle) return;
const stock = this.getStockObject(vehicle, cargo);
@@ -47,7 +47,8 @@ export default defineComponent({
addLocomotive(loco: ILocomotive) {
const stockObj = this.getStockObject(loco);
if (this.store.stockList.length > 0 && !this.store.stockList[0].isLoco) this.store.stockList.unshift(stockObj);
if (this.store.stockList.length > 0 && !this.store.stockList[0].isLoco)
this.store.stockList.unshift(stockObj);
else this.store.stockList.push(stockObj);
},
@@ -70,7 +71,7 @@ export default defineComponent({
this.store.swapVehicles = false;
stockArray.forEach((type, i) => {
let vehicle: Vehicle | null = null;
let vehicle: IVehicle | null = null;
let vehicleCargo: ICargo | null = null;
const isLoco = /^(EU|EP|ET|SM|EN|2EN|SN)/.test(type);
src/mixins/stockPreviewMixin.ts
+2 -2
View File
@@ -1,6 +1,6 @@
import { defineComponent } from 'vue';
import { useStore } from '../store';
import { ICarWagon, ILocomotive, IStock, Vehicle } from '../types';
import { ICarWagon, ILocomotive, IStock, IVehicle } from '../types';
import { isLocomotive } from '../utils/vehicleUtils';
export default defineComponent({
@@ -46,7 +46,7 @@ export default defineComponent({
this.store.chosenCargo = null;
},
previewVehicle(vehicle: Vehicle) {
previewVehicle(vehicle: IVehicle) {
if (isLocomotive(vehicle)) this.previewLocomotive(vehicle);
else this.previewCarWagon(vehicle);
},
src/mixins/warningsMixin.ts
+4 -1
View File
@@ -11,7 +11,10 @@ export default defineComponent({
},
computed: {
trainTooLong() {
return (this.store.totalLength > 350 && this.store.isTrainPassenger) || (this.store.totalLength > 650 && !this.store.isTrainPassenger);
return (
(this.store.totalLength > 350 && this.store.isTrainPassenger) ||
(this.store.totalLength > 650 && !this.store.isTrainPassenger)
);
},
trainTooHeavy() {
src/store.ts
+114 -43
View File
@@ -1,9 +1,16 @@
import { IStockData, IStore } from './types';
import {
IVehiclesAPI,
ICarWagon,
ILocomotive,
ICargo,
IVehicle,
IStock,
IRealComposition,
} from './types';
import { defineStore } from 'pinia';
import {
acceptableMass as acceptableWeight,
acceptableWeight,
carDataList,
chosenRealStock,
isTrainPassenger,
locoDataList,
maxStockSpeed,
@@ -11,57 +18,97 @@ import {
totalWeight,
} from './utils/vehicleUtils';
import http from './http';
import i18n from './i18n-setup';
export const useStore = defineStore({
id: 'store',
state: () =>
({
chosenCar: null,
chosenLoco: null,
chosenCargo: null,
chosenVehicle: null,
state: () => ({
chosenCar: null as ICarWagon | null,
chosenLoco: null as ILocomotive | null,
chosenCargo: null as ICargo | null,
chosenVehicle: null as IVehicle | null,
isColdStart: false,
isDoubleManned: false,
isColdStart: false,
isDoubleManned: false,
showSupporter: false,
imageLoading: false,
imageLoading: false,
chosenLocoPower: 'loco-e',
chosenCarUseType: 'car-passenger',
chosenLocoPower: 'loco-e',
chosenCarUseType: 'car-passenger',
stockList: [],
cargoOptions: [],
stockList: [] as IStock[],
cargoOptions: [] as any[][],
readyStockList: [],
swapVehicles: false,
swapVehicles: false,
chosenStockListIndex: -1,
chosenStockListIndex: -1,
chosenRealStockName: undefined,
vehiclePreviewSrc: '',
vehiclePreviewSrc: '',
stockSectionMode: 'stock-list',
stockSectionMode: 'stock-list',
isRandomizerCardOpen: false,
isRealStockListCardOpen: false,
isRandomizerCardOpen: false,
isRealStockListCardOpen: false,
vehiclesAPIData: undefined as IVehiclesAPI | undefined,
stockData: undefined,
lastFocusedElement: null,
}) as IStore,
lastFocusedElement: null as HTMLElement | null,
}),
getters: {
locoDataList: (state) => locoDataList(state),
carDataList: (state) => carDataList(state),
vehicleDataList: (state) => [...locoDataList(state), ...carDataList(state)],
totalWeight: (state) => totalWeight(state),
totalLength: (state) => totalLength(state),
maxStockSpeed: (state) => maxStockSpeed(state),
isTrainPassenger: (state) => isTrainPassenger(state),
chosenRealStock: (state) => chosenRealStock(state),
acceptableWeight: (state) => acceptableWeight(state),
locoDataList: (state) => locoDataList(state.vehiclesAPIData),
carDataList: (state) => carDataList(state.vehiclesAPIData),
vehicleDataList: (state) => [
...locoDataList(state.vehiclesAPIData),
...carDataList(state.vehiclesAPIData),
],
totalWeight: (state) => totalWeight(state.stockList),
totalLength: (state) => totalLength(state.stockList),
maxStockSpeed: (state) => maxStockSpeed(state.stockList),
isTrainPassenger: (state) => isTrainPassenger(state.stockList),
acceptableWeight: (state) => acceptableWeight(state.stockList),
// chosenRealStock: (state) => {
// const currentStockString = state.stockList
// .reduce((acc, stock) => {
// for (let i = 0; i < stock.count; i++) acc.push(stock.type);
// return acc;
// }, [] as string[])
// .join(';');
// // const realStockObj = vehilcesData.realCompositions.find((readyStock) => readyStock.stockString == currentStockString);
// // state.chosenRealStockName = realStockObj?.stockId ?? undefined;
// state
// // return state.r.find((readyStock) => readyStock.stockString == currentStockString);
// },
realCompositionList: (state) => {
if (!state.vehiclesAPIData) return [];
return Object.keys(state.vehiclesAPIData.realCompositions).reduce<IRealComposition[]>(
(acc, key) => {
const [type, number, ...name] = key.split(' ');
const obj = {
number: number.replace(/_/g, '/'),
name: name.join(' '),
stockString: state.vehiclesAPIData!.realCompositions[key],
type,
};
acc.push({
stockId: `${obj.type} ${obj.number} ${obj.name}`,
...obj,
});
return acc;
},
[]
);
},
stockSupportsColdStart: (state) => {
if (state.stockList.length == 0) return false;
@@ -69,7 +116,11 @@ export const useStore = defineStore({
const headingLoco = state.stockList[0];
return state.stockData?.props.find((stock) => stock.type == headingLoco.constructionType)?.coldStart ?? false;
return (
state.vehiclesAPIData?.vehicleProps.find(
(stock) => stock.type == headingLoco.constructionType
)?.coldStart ?? false
);
},
stockSupportsDoubleManning: (state) => {
@@ -78,14 +129,34 @@ export const useStore = defineStore({
const headingLoco = state.stockList[0];
return state.stockData?.props.find((stock) => stock.type == headingLoco.constructionType)?.doubleManned ?? false;
return (
state.vehiclesAPIData?.vehicleProps.find(
(stock) => stock.type == headingLoco.constructionType
)?.doubleManned ?? false
);
},
},
actions: {
async fetchStockInfoData() {
const stockData = (await http.get<IStockData>('td2/data/stockInfo.json')).data;
this.stockData = stockData;
async fetchVehiclesAPI() {
try {
const vehiclesData = (await http.get<IVehiclesAPI>('/vehicles.json')).data;
this.vehiclesAPIData = vehiclesData;
} catch (error) {
console.error(error);
}
},
async setupAPIData() {
await this.fetchVehiclesAPI();
this.mergeBackendTranslations();
},
async mergeBackendTranslations() {
if (!this.vehiclesAPIData) return;
i18n.global.mergeLocaleMessage('pl', this.vehiclesAPIData.vehicleLocales.pl);
i18n.global.mergeLocaleMessage('en', this.vehiclesAPIData.vehicleLocales.en);
},
handleRouting() {
src/styles/global.scss
+13 -13
View File
@@ -7,30 +7,30 @@ $secondaryColor: #1b1b1b;
$accentColor: #e4c428;
@font-face {
font-family: "Lato";
font-family: 'Lato';
src:
url("/fonts/Lato-Light.woff2") format("woff2"),
url("/fonts/Lato-Light.woff") format("woff");
url('/fonts/Lato-Light.woff2') format('woff2'),
url('/fonts/Lato-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Lato";
font-family: 'Lato';
src:
url("/fonts/Lato-Bold.woff2") format("woff2"),
url("/fonts/Lato-Bold.woff") format("woff");
url('/fonts/Lato-Bold.woff2') format('woff2'),
url('/fonts/Lato-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Lato";
font-family: 'Lato';
src:
url("/fonts/Lato-Regular.woff2") format("woff2"),
url("/fonts/Lato-Regular.woff") format("woff");
url('/fonts/Lato-Regular.woff2') format('woff2'),
url('/fonts/Lato-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
@@ -141,14 +141,14 @@ button {
outline: 1px solid white;
}
&[data-chosen="true"] {
&[data-chosen='true'] {
background-color: $accentColor;
color: black;
box-shadow: 0 0 5px 1px $accentColor;
}
&[data-disabled="true"] {
&[data-disabled='true'] {
user-select: none;
pointer-events: none;
-moz-user-select: none;
@@ -183,8 +183,8 @@ button {
}
select,
input[type="text"],
input[type="number"] {
input[type='text'],
input[type='number'] {
background: $bgColor;
border: 2px solid #aaa;
outline: none;
src/styles/tab.scss
+1 -1
View File
@@ -1,4 +1,4 @@
@import "./global.scss";
@import './global.scss';
.tab {
height: 100%;
src/types.ts
+18 -40
View File
@@ -1,40 +1,6 @@
export type Vehicle = ILocomotive | ICarWagon;
export type IVehicle = ILocomotive | ICarWagon;
export type StockSectionMode = 'STOCK_LIST' | 'STOCK_GENERATOR';
export interface IStore {
chosenCar: ICarWagon | null;
chosenLoco: ILocomotive | null;
chosenCargo: ICargo | null;
chosenVehicle: Vehicle | null;
isColdStart: boolean;
isDoubleManned: boolean;
showSupporter: boolean;
imageLoading: boolean;
chosenLocoPower: string;
chosenCarUseType: string;
stockList: IStock[];
readyStockList: IReadyStockItem[];
cargoOptions: any[][];
chosenStockListIndex: number;
chosenRealStockName?: string;
swapVehicles: boolean;
vehiclePreviewSrc: string;
isRandomizerCardOpen: boolean;
isRealStockListCardOpen: boolean;
stockSectionMode: 'stock-list' | 'stock-generator' | 'number-generator' | 'wiki-list';
stockData?: IStockData;
lastFocusedElement: HTMLElement | null;
}
export type TLocoGroup = 'loco-e' | 'loco-s' | 'loco-ezt' | 'loco-szt';
export type TCarWagonGroup = 'car-passenger' | 'car-cargo';
@@ -54,17 +20,16 @@ export interface ICargo {
weight: number;
}
export interface IStockData {
export interface IVehiclesAPI {
version: string;
generator: {
passenger: any;
cargo: {
[key: string]: string[];
};
};
info: {
vehicleInfo: {
'car-cargo': [string, string, boolean, number | null, string][];
'car-passenger': [string, string, boolean, number | null, string][];
'loco-e': [string, string, string, string, number | null][];
@@ -73,7 +38,20 @@ export interface IStockData {
'loco-ezt': [string, string, string, string, number | null][];
};
props: IStockProps[];
vehicleProps: IStockProps[];
vehicleLocales: {
pl: {
cargo: Record<string, string>;
usage: Record<string, string>;
};
en: {
cargo: Record<string, string>;
usage: Record<string, string>;
};
};
realCompositions: Record<string, string>;
}
export interface ILocomotive {
@@ -124,7 +102,7 @@ export interface IStock {
imgSrc?: string;
}
export interface IReadyStockItem {
export interface IRealComposition {
stockId: string;
stockString: string;
type: string;
src/utils/vehicleLimitsUtils.ts
+8 -2
View File
@@ -4,7 +4,12 @@ import massLimits from '../constants/massLimits.json';
export type SpeedLimitLocoType = keyof typeof speedLimits;
export type MassLimitLocoType = keyof typeof massLimits;
export function calculateSpeedLimit(locoType: SpeedLimitLocoType, stockTotalWeight: number, stockCount: number, isTrainPassenger: boolean) {
export function calculateSpeedLimit(
locoType: SpeedLimitLocoType,
stockTotalWeight: number,
stockCount: number,
isTrainPassenger: boolean
) {
if (speedLimits[locoType] === undefined) return 0;
if (stockCount == 1) return speedLimits[locoType]['none'];
@@ -15,7 +20,8 @@ export function calculateSpeedLimit(locoType: SpeedLimitLocoType, stockTotalWeig
if (!speedTable) return undefined;
let speedLimit = 0;
for (const mass in speedTable) if (stockTotalWeight > Number(mass)) speedLimit = (speedTable as any)[mass];
for (const mass in speedTable)
if (stockTotalWeight > Number(mass)) speedLimit = (speedTable as any)[mass];
return speedLimit;
}
src/utils/vehicleUtils.ts
+57 -50
View File
@@ -1,26 +1,29 @@
import { EVehicleUseType } from '../enums/EVehicleUseType';
import { ICarWagon, ILocomotive, IStore, TCarWagonGroup, TLocoGroup } from '../types';
import { MassLimitLocoType, SpeedLimitLocoType, calculateMassLimit, calculateSpeedLimit } from './vehicleLimitsUtils';
import { ICarWagon, ILocomotive, IStock, IVehiclesAPI, TCarWagonGroup, TLocoGroup } from '../types';
import {
MassLimitLocoType,
SpeedLimitLocoType,
calculateMassLimit,
calculateSpeedLimit,
} from './vehicleLimitsUtils';
export function isLocomotive(vehicle: ILocomotive | ICarWagon): vehicle is ILocomotive {
return (vehicle as ILocomotive).power !== undefined;
}
export function locoDataList(state: IStore) {
if (!state.stockData) return [];
export function locoDataList(vehiclesData: IVehiclesAPI | undefined) {
if (!vehiclesData) return [];
const stockData = state.stockData;
return Object.keys(stockData.info).reduce((acc, vehiclePower) => {
return Object.keys(vehiclesData.vehicleInfo).reduce((acc, vehiclePower) => {
if (!vehiclePower.startsWith('loco')) return acc;
const locoVehiclesData = stockData.info[vehiclePower as TLocoGroup];
const locoVehiclesData = vehiclesData.vehicleInfo[vehiclePower as TLocoGroup];
locoVehiclesData.forEach((loco) => {
if (state.showSupporter && !loco[4]) return;
// if (!loco[4]) return;
const [type, constructionType, cabinType, maxSpeed, sponsorsTimestamp] = loco;
const locoProps = stockData.props.find((prop) => constructionType == prop.type);
const locoProps = vehiclesData.vehicleProps.find((prop) => constructionType == prop.type);
acc.push({
power: vehiclePower as TLocoGroup,
@@ -33,7 +36,10 @@ export function locoDataList(state: IStore) {
sponsorsOnlyTimestamp: Number(sponsorsTimestamp),
imageSrc: '',
length: locoProps?.length && type.startsWith('2EN') ? locoProps.length * 2 : locoProps?.length ?? 0,
length:
locoProps?.length && type.startsWith('2EN')
? locoProps.length * 2
: locoProps?.length ?? 0,
weight: locoProps?.weight && type.startsWith('2EN') ? 253000 : locoProps?.weight ?? 0,
coldStart: locoProps?.coldStart ?? false,
@@ -45,22 +51,22 @@ export function locoDataList(state: IStore) {
}, [] as ILocomotive[]);
}
export function carDataList(state: IStore) {
if (!state.stockData) return [];
export function carDataList(vehiclesData: IVehiclesAPI | undefined) {
if (!vehiclesData) return [];
const stockData = state.stockData;
return Object.keys(stockData.info).reduce((acc, vehicleUseType) => {
return Object.keys(vehiclesData.vehicleInfo).reduce((acc, vehicleUseType) => {
if (!vehicleUseType.startsWith('car')) return acc;
const carVehiclesData = stockData.info[vehicleUseType as TCarWagonGroup];
const carVehiclesData = vehiclesData.vehicleInfo[vehicleUseType as TCarWagonGroup];
carVehiclesData.forEach((car) => {
const [type, constructionType, loadable, sponsorsOnlyTimestamp, maxSpeed] = car;
if (state.showSupporter && Number(sponsorsOnlyTimestamp) <= Date.now()) return;
if (sponsorsOnlyTimestamp && Number(sponsorsOnlyTimestamp) <= Date.now()) return;
const carPropsData = stockData.props.find((v) => type.toString().startsWith(v.type));
const carPropsData = vehiclesData.vehicleProps.find((v) =>
type.toString().startsWith(v.type)
);
acc.push({
useType: vehicleUseType as TCarWagonGroup,
@@ -83,17 +89,23 @@ export function carDataList(state: IStore) {
}, [] as ICarWagon[]);
}
export function totalWeight(state: IStore) {
return state.stockList.reduce((acc, stock) => acc + (stock.weight + (stock.cargo?.weight ?? 0)) * stock.count, 0);
export function totalWeight(stockList: IStock[]) {
return stockList.reduce(
(acc, stock) => acc + (stock.weight + (stock.cargo?.weight ?? 0)) * stock.count,
0
);
}
export function totalLength(state: IStore) {
return state.stockList.reduce((acc, stock) => acc + stock.length * stock.count, 0);
export function totalLength(stockList: IStock[]) {
return stockList.reduce((acc, stock) => acc + stock.length * stock.count, 0);
}
export function maxStockSpeed(state: IStore) {
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;
export function maxStockSpeed(stockList: IStock[]) {
const stockSpeedLimit = stockList.reduce(
(acc, stock) => (stock.maxSpeed < acc || acc == 0 ? stock.maxSpeed : acc),
0
);
const headingLoco = stockList[0]?.isLoco ? stockList[0] : undefined;
if (!headingLoco) return stockSpeedLimit;
@@ -101,39 +113,34 @@ export function maxStockSpeed(state: IStore) {
if (/^(EN|2EN|SN)/.test(locoType)) return stockSpeedLimit;
const speedLimitByMass = calculateSpeedLimit(locoType as SpeedLimitLocoType, totalWeight(state), state.stockList.length, isTrainPassenger(state));
const speedLimitByMass = calculateSpeedLimit(
locoType as SpeedLimitLocoType,
totalWeight(stockList),
stockList.length,
isTrainPassenger(stockList)
);
return speedLimitByMass ? Math.min(stockSpeedLimit, speedLimitByMass) : stockSpeedLimit;
}
export function acceptableMass(state: IStore) {
if (state.stockList.length == 0 || !state.stockList[0].isLoco) return 0;
export function acceptableWeight(stockList: IStock[]) {
if (stockList.length == 0 || !stockList[0].isLoco) return 0;
const activeLocomotiveType = state.stockList[0].type.split('-')[0];
const activeLocomotiveType = stockList[0].type.split('-')[0];
const locoMassLimit = calculateMassLimit(activeLocomotiveType as MassLimitLocoType, isTrainPassenger(state));
const locoMassLimit = calculateMassLimit(
activeLocomotiveType as MassLimitLocoType,
isTrainPassenger(stockList)
);
return locoMassLimit;
}
export function isTrainPassenger(state: IStore) {
if (state.stockList.length == 0) return false;
if (state.stockList.every((stock) => stock.isLoco)) return false;
export function isTrainPassenger(stockList: IStock[]) {
if (stockList.length == 0) return false;
if (stockList.every((stock) => stock.isLoco)) return false;
return state.stockList.filter((stock) => !stock.isLoco).every((stock) => stock.useType === EVehicleUseType.CAR_PASSENGER);
}
export function chosenRealStock(state: IStore) {
const currentStockString = state.stockList
.reduce((acc, stock) => {
for (let i = 0; i < stock.count; i++) acc.push(stock.type);
return acc;
}, [] as string[])
.join(';');
const realStockObj = state.readyStockList.find((readyStock) => readyStock.stockString == currentStockString);
state.chosenRealStockName = realStockObj?.stockId ?? undefined;
return realStockObj;
return stockList
.filter((stock) => !stock.isLoco)
.every((stock) => stock.useType === EVehicleUseType.CAR_PASSENGER);
}
src/views/AppContainerView.vue
+4 -4
View File
@@ -6,11 +6,11 @@
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { useStore } from "../store";
import { defineComponent } from 'vue';
import { useStore } from '../store';
import MainContainer from "../components/app/MainContainer.vue";
import FooterVue from "../components/app/Footer.vue";
import MainContainer from '../components/app/MainContainer.vue';
import FooterVue from '../components/app/Footer.vue';
export default defineComponent({
components: {
src/vite-env.d.ts
Vendored
+2 -2
View File
@@ -1,7 +1,7 @@
/// <reference types="vite/client" />
declare module "*.vue" {
import type { DefineComponent } from "vue";
declare module '*.vue' {
import type { DefineComponent } from 'vue';
const component: DefineComponent<{}, {}, any>;
export default component;
}