mirror of
https://github.com/Spythere/pojazdownik.git
synced 2026-05-03 05:18:10 +00:00
Wersja 1.2.0
Wersja 1.2.0
This commit is contained in:
Spythere
+1
-1
@@ -1,7 +1,7 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
/dev-dist
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
|
||||
+7
-17
@@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
@@ -7,25 +7,15 @@
|
||||
|
||||
<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">
|
||||
<meta name="keywords" content="pojazdownik td2 train driver stacjownik spythere" />
|
||||
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png" />
|
||||
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png" />
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png" />
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png" />
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png" />
|
||||
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png" />
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png" />
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png" />
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<meta name="msapplication-TileColor" content="#ffffff" />
|
||||
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
|
||||
<meta name="theme-color" content="#ffffff" />
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
|
||||
<meta name="msapplication-TileColor" content="#da532c" />
|
||||
<meta name="theme-color" content="#e4c428" />
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
|
||||
Generated
+7713
-178
File diff suppressed because it is too large
Load Diff
+7
-6
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "pojazdownik",
|
||||
"version": "1.1.0",
|
||||
"version": "1.2.0dev",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
@@ -12,10 +12,11 @@
|
||||
"vue": "^3.2.37"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^3.0.0",
|
||||
"sass": "^1.26.5",
|
||||
"typescript": "^4.6.4",
|
||||
"vite": "^3.0.0",
|
||||
"vue-tsc": "^0.38.4"
|
||||
"@vitejs/plugin-vue": "^3.2.0",
|
||||
"sass": "^1.55.0",
|
||||
"typescript": "^4.8.4",
|
||||
"vite": "^3.2.1",
|
||||
"vite-plugin-pwa": "^0.13.3",
|
||||
"vue-tsc": "^1.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@@ -1,2 +1,9 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
|
||||
<browserconfig>
|
||||
<msapplication>
|
||||
<tile>
|
||||
<square150x150logo src="/mstile-150x150.png"/>
|
||||
<TileColor>#da532c</TileColor>
|
||||
</tile>
|
||||
</msapplication>
|
||||
</browserconfig>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 670 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 15 KiB |
+23
-39
@@ -1,41 +1,25 @@
|
||||
{
|
||||
"name": "App",
|
||||
"icons": [
|
||||
{
|
||||
"src": "\/android-icon-36x36.png",
|
||||
"sizes": "36x36",
|
||||
"type": "image\/png",
|
||||
"density": "0.75"
|
||||
},
|
||||
{
|
||||
"src": "\/android-icon-48x48.png",
|
||||
"sizes": "48x48",
|
||||
"type": "image\/png",
|
||||
"density": "1.0"
|
||||
},
|
||||
{
|
||||
"src": "\/android-icon-72x72.png",
|
||||
"sizes": "72x72",
|
||||
"type": "image\/png",
|
||||
"density": "1.5"
|
||||
},
|
||||
{
|
||||
"src": "\/android-icon-96x96.png",
|
||||
"sizes": "96x96",
|
||||
"type": "image\/png",
|
||||
"density": "2.0"
|
||||
},
|
||||
{
|
||||
"src": "\/android-icon-144x144.png",
|
||||
"sizes": "144x144",
|
||||
"type": "image\/png",
|
||||
"density": "3.0"
|
||||
},
|
||||
{
|
||||
"src": "\/android-icon-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image\/png",
|
||||
"density": "4.0"
|
||||
}
|
||||
]
|
||||
"name": "Pojazdownik TD2",
|
||||
"short_name": "Pojazdownik",
|
||||
"start_url": ".",
|
||||
"description": "Generator składów online dla symulatora Train Driver 2",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/android-chrome-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/android-chrome-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png",
|
||||
"purpose": "any maskable"
|
||||
}
|
||||
],
|
||||
"theme_color": "#2c3149",
|
||||
"background_color": "#2c3149",
|
||||
"display": "standalone"
|
||||
|
||||
|
||||
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
@@ -0,0 +1,26 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
<metadata>
|
||||
Created by potrace 1.14, written by Peter Selinger 2001-2017
|
||||
</metadata>
|
||||
<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M3220 6994 c-182 -20 -243 -29 -360 -50 -1015 -183 -1909 -826 -2421
|
||||
-1741 -214 -381 -346 -781 -416 -1258 -25 -173 -25 -717 0 -890 70 -477 202
|
||||
-877 417 -1260 280 -500 668 -916 1145 -1227 448 -292 919 -467 1465 -544 182
|
||||
-25 598 -30 800 -9 815 84 1548 432 2125 1010 579 578 923 1303 1011 2127 22
|
||||
212 15 635 -15 828 -72 467 -199 848 -410 1223 -499 892 -1352 1520 -2344
|
||||
1726 -253 53 -358 63 -672 66 -159 2 -306 1 -325 -1z m775 -1122 c963 -154
|
||||
1452 -722 1403 -1629 -35 -640 -367 -1094 -963 -1318 -296 -111 -566 -145
|
||||
-1147 -145 l-338 0 0 -437 c0 -473 -8 -624 -40 -748 -29 -116 -88 -230 -152
|
||||
-292 l-53 -52 -118 49 c-226 93 -490 250 -652 387 l-70 59 -3 1786 -2 1786 67
|
||||
57 c219 183 541 357 848 458 213 70 177 66 655 63 382 -3 451 -6 565 -24z"/>
|
||||
<path d="M2950 4344 l0 -745 393 4 c439 4 465 8 612 77 132 62 214 143 280
|
||||
275 58 118 79 225 79 405 0 131 -3 167 -22 235 -34 116 -86 208 -162 284 -76
|
||||
77 -149 122 -252 158 -133 46 -197 52 -575 53 l-353 0 0 -746z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "Pojazdownik TD2",
|
||||
"short_name": "Pojazdownik",
|
||||
"start_url": ".",
|
||||
"description": "Generator składów online dla symulatora Train Driver 2",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/android-chrome-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/android-chrome-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png",
|
||||
"purpose": "any maskable"
|
||||
}
|
||||
],
|
||||
"theme_color": "#2c3149",
|
||||
"background_color": "#2c3149",
|
||||
"display": "standalone"
|
||||
}
|
||||
|
||||
+13
-41
@@ -6,12 +6,6 @@
|
||||
<div class="g-card-dimmer" v-if="store.isRandomizerCardOpen" @click="store.isRandomizerCardOpen = false"></div>
|
||||
<div class="g-card-dimmer" v-if="store.isRealStockListCardOpen" @click="store.isRealStockListCardOpen = false"></div>
|
||||
|
||||
<keep-alive>
|
||||
<transition name="card-appear">
|
||||
<RandomizerCard />
|
||||
</transition>
|
||||
</keep-alive>
|
||||
|
||||
<keep-alive>
|
||||
<transition name="card-appear">
|
||||
<RealStockCard />
|
||||
@@ -26,8 +20,9 @@
|
||||
|
||||
<TrainImageSection />
|
||||
|
||||
<ListSection />
|
||||
<StockSection />
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="text--grayed" style="margin-bottom: 0.25em">
|
||||
Ta strona ma charakter informacyjny. Autor nie ponosi odpowiedzialności za tworzenie pociągów niezgodnych z
|
||||
@@ -52,20 +47,18 @@ import packageInfo from '.././package.json';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
import InputsSection from './components/InputsSection.vue';
|
||||
import ListSection from './components/ListSection.vue';
|
||||
|
||||
import { useStore } from './store';
|
||||
import TrainImageSection from './components/TrainImageSection.vue';
|
||||
import LogoSection from './components/LogoSection.vue';
|
||||
import RandomizerCard from './components/cards/RandomizerCard.vue';
|
||||
import RealStockCard from './components/cards/RealStockCard.vue';
|
||||
import StockSection from './components/StockSection.vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
ListSection,
|
||||
StockSection,
|
||||
InputsSection,
|
||||
TrainImageSection,
|
||||
RandomizerCard,
|
||||
LogoSection,
|
||||
RealStockCard,
|
||||
},
|
||||
@@ -100,6 +93,7 @@ export default defineComponent({
|
||||
margin: 0 auto;
|
||||
|
||||
color: $textColor;
|
||||
font-size: 1em;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -107,14 +101,6 @@ export default defineComponent({
|
||||
|
||||
/* HEADER SECTION */
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
width: 35em;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
margin-bottom: 0.5em;
|
||||
@@ -165,7 +151,8 @@ main {
|
||||
grid-template-columns: 1fr 2fr;
|
||||
grid-template-rows: auto 360px minmax(400px, 1fr);
|
||||
|
||||
padding: 0.5em;
|
||||
padding: 0 1em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
/* FOOTER SECTION */
|
||||
@@ -173,6 +160,7 @@ main {
|
||||
footer {
|
||||
margin-top: auto;
|
||||
text-align: center;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
/* MOBILE VIEWS */
|
||||
@@ -184,28 +172,12 @@ footer {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
#app {
|
||||
font-size: calc(0.75vw + 0.7rem);
|
||||
}
|
||||
|
||||
header {
|
||||
font-size: 0.85em;
|
||||
|
||||
img {
|
||||
width: 35em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $breakpointSm) {
|
||||
header {
|
||||
font-size: 0.75em;
|
||||
|
||||
img {
|
||||
width: 32em;
|
||||
}
|
||||
}
|
||||
}
|
||||
// @media screen and (max-width: $breakpointSm) {
|
||||
// header {
|
||||
// font-size: 0.75em;
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
|
||||
|
||||
@@ -18,8 +18,8 @@
|
||||
<select
|
||||
id="locomotives-list"
|
||||
v-model="store.chosenLoco"
|
||||
@focus="onVehicleSelect('loco')"
|
||||
@change="onVehicleSelect('loco')"
|
||||
@focus="previewVehicleByType('loco')"
|
||||
@change="previewVehicleByType('loco')"
|
||||
@keydown.enter.prevent="addOrSwitchVehicle"
|
||||
@keydown.backspace="removeVehicle"
|
||||
>
|
||||
@@ -45,8 +45,8 @@
|
||||
<select
|
||||
id="carwagons-list"
|
||||
v-model="store.chosenCar"
|
||||
@focus="onVehicleSelect('car')"
|
||||
@change="onVehicleSelect('car')"
|
||||
@focus="previewVehicleByType('car')"
|
||||
@change="previewVehicleByType('car')"
|
||||
@keydown.enter.prevent="addOrSwitchVehicle"
|
||||
@keydown.backspace="removeVehicle"
|
||||
>
|
||||
@@ -70,8 +70,8 @@
|
||||
data-select="cargo"
|
||||
data-ignore-outside="1"
|
||||
v-model="store.chosenCargo"
|
||||
@focus="onVehicleSelect('cargo')"
|
||||
@change="onVehicleSelect('cargo')"
|
||||
@focus="previewVehicleByType('cargo')"
|
||||
@change="previewVehicleByType('cargo')"
|
||||
@keydown.enter.prevent="addOrSwitchVehicle"
|
||||
@keydown.backspace="removeVehicle"
|
||||
>
|
||||
@@ -111,6 +111,7 @@ import { IStock } from '../types';
|
||||
import imageMixin from '../mixins/imageMixin';
|
||||
import { useStore } from '../store';
|
||||
import { isLocomotive } from '../utils/vehicleUtils';
|
||||
import stockPreviewMixin from '../mixins/stockPreviewMixin';
|
||||
|
||||
interface ILocoType {
|
||||
id: string;
|
||||
@@ -119,7 +120,7 @@ interface ILocoType {
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
mixins: [imageMixin],
|
||||
mixins: [imageMixin, stockPreviewMixin],
|
||||
|
||||
data: () => ({
|
||||
locomotiveTypeList: [
|
||||
@@ -167,49 +168,11 @@ export default defineComponent({
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
locoOptions() {
|
||||
return this.store.locoDataList
|
||||
.sort((a, b) => (a.type > b.type ? 1 : -1))
|
||||
.filter((loco) => loco.power == this.store.chosenLocoPower);
|
||||
},
|
||||
|
||||
carOptions() {
|
||||
return this.store.carDataList
|
||||
.sort((a, b) => (a.type > b.type ? 1 : -1))
|
||||
.filter((car) => car.useType == this.store.chosenCarUseType);
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
selectLocoType(locoTypeId: string) {
|
||||
this.store.chosenLocoPower = locoTypeId;
|
||||
this.store.chosenVehicle = this.locoOptions[0];
|
||||
this.store.chosenLoco = this.locoOptions[0];
|
||||
},
|
||||
|
||||
selectCarWagonType(carWagonTypeId: string) {
|
||||
this.store.chosenCarUseType = carWagonTypeId;
|
||||
this.store.chosenVehicle = this.carOptions[0];
|
||||
this.store.chosenCar = this.carOptions[0];
|
||||
this.store.chosenCargo = null;
|
||||
},
|
||||
|
||||
prepareSwapVehicles() {
|
||||
this.store.swapVehicles = true;
|
||||
},
|
||||
|
||||
onVehicleSelect(type: 'loco' | 'car' | 'cargo') {
|
||||
this.$nextTick(() => {
|
||||
if (!this.store.chosenLoco && !this.store.chosenCar) return;
|
||||
|
||||
this.store.chosenVehicle = type == 'loco' ? this.store.chosenLoco : this.store.chosenCar;
|
||||
|
||||
this.store.chosenCargo =
|
||||
this.store.chosenCar?.cargoList.find((cargo) => cargo.id == this.store.chosenCargo?.id) || null;
|
||||
});
|
||||
},
|
||||
|
||||
addOrSwitchVehicle() {
|
||||
if (this.store.chosenStockListIndex == -1) this.addVehicle();
|
||||
else this.switchVehicles();
|
||||
|
||||
@@ -24,10 +24,8 @@ export default {
|
||||
}
|
||||
|
||||
img {
|
||||
width: 25em;
|
||||
@media screen and (max-width: 400px) {
|
||||
width: 20em;
|
||||
}
|
||||
max-width: 25em;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -0,0 +1,372 @@
|
||||
<template>
|
||||
<div class="stock-generator">
|
||||
<div class="stock_actions">
|
||||
<h2>GENERATOR SKŁADU TOWAROWEGO</h2>
|
||||
<button class="btn" @click="() => (store.stockSectionMode = 'stock-list')">POWRÓT DO LISTY ></button>
|
||||
</div>
|
||||
|
||||
<div class="generator_content">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<h2>ŁADUNEK</h2>
|
||||
<p>Wybierz ładunki, którymi chcesz wypełnić dostępne wagony:</p>
|
||||
|
||||
<div class="generator_cargo">
|
||||
<button
|
||||
class="btn"
|
||||
:data-chosen="chosenCargoTypes.includes(k)"
|
||||
v-for="(v, k) in generatorData.cargo"
|
||||
@click="toggleCargoChosen(k, v)"
|
||||
>
|
||||
{{ k }}
|
||||
</button>
|
||||
</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>
|
||||
|
||||
<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 class="generator_vehicles">
|
||||
<button
|
||||
:data-chosen="true"
|
||||
:data-excluded="excludedCarTypes.includes(carType)"
|
||||
class="btn"
|
||||
v-for="carType in computedChosenCarTypes"
|
||||
:key="carType"
|
||||
@mouseover="onMouseHover(carType)"
|
||||
@mouseleave="onMouseLeave"
|
||||
@click="toggleCarExclusion(carType)"
|
||||
>
|
||||
{{ carType }}
|
||||
|
||||
<!-- <span>X</span> -->
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="generator_actions">
|
||||
<button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock()">
|
||||
WYGENERUJ
|
||||
</button>
|
||||
<button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock(true)">
|
||||
WYGENERUJ PRÓŻNE WAGONY
|
||||
</button>
|
||||
|
||||
<button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="resetChosenCargo">
|
||||
ZRESETUJ ŁADUNKI
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { useStore } from '../store';
|
||||
|
||||
import generatorData from '../data/generatorData.json';
|
||||
import stockMixin from '../mixins/stockMixin';
|
||||
import { ICargo, ICarWagon } from '../types';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'stock-generator',
|
||||
|
||||
setup() {
|
||||
return {
|
||||
store: useStore(),
|
||||
};
|
||||
},
|
||||
|
||||
mixins: [stockMixin],
|
||||
|
||||
data() {
|
||||
return {
|
||||
generatorData,
|
||||
chosenCarTypes: [] as string[],
|
||||
excludedCarTypes: [] as string[],
|
||||
|
||||
chosenCargoTypes: [] as string[],
|
||||
|
||||
previewTimeout: -1,
|
||||
|
||||
maxMass: 3000,
|
||||
maxLength: 650,
|
||||
maxCarCount: 50,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
computedChosenCarTypes() {
|
||||
return new Set<string>(this.chosenCarTypes.sort((c1, c2) => (c1 > c2 ? 1 : -1)));
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onMouseHover(type: string) {
|
||||
window.clearTimeout(this.previewTimeout);
|
||||
|
||||
this.previewTimeout = window.setTimeout(() => {
|
||||
this.previewCar(type);
|
||||
}, 400);
|
||||
},
|
||||
|
||||
onMouseLeave() {
|
||||
window.clearTimeout(this.previewTimeout);
|
||||
},
|
||||
|
||||
resetChosenCargo() {
|
||||
this.chosenCargoTypes.length = 0;
|
||||
this.chosenCarTypes.length = 0;
|
||||
this.excludedCarTypes.length = 0;
|
||||
},
|
||||
|
||||
generateStock(empty = false) {
|
||||
const generatedChosenStockList = this.chosenCargoTypes.reduce((acc, type) => {
|
||||
this.generatorData.cargo[type as keyof typeof this.generatorData.cargo]
|
||||
.filter((c) => !this.excludedCarTypes.includes(c.split(':')[0]))
|
||||
.forEach((c) => {
|
||||
const [type, cargoType] = c.split(':');
|
||||
const carWagonObjs = this.store.carDataList.filter((cw) => cw.type.startsWith(type));
|
||||
const cargoObjs = [] as (ICargo | undefined)[];
|
||||
|
||||
if (!cargoType || empty) cargoObjs.push(undefined);
|
||||
else if (cargoType == 'all') cargoObjs.push(...carWagonObjs[0]?.cargoList);
|
||||
else cargoObjs.push(carWagonObjs[0]?.cargoList.find((cargo) => cargo.id == cargoType));
|
||||
|
||||
// if (cargoType == 'all')
|
||||
// else if (cargoType)
|
||||
// else cargoObjs.push(undefined);
|
||||
|
||||
carWagonObjs.forEach((cw) => {
|
||||
cargoObjs.forEach((cargoObj) => {
|
||||
acc.push({ carWagon: cw, cargo: cargoObj });
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
return acc;
|
||||
}, [] as { carWagon: ICarWagon; cargo?: ICargo }[]);
|
||||
|
||||
this.store.stockList.length = this.store.stockList[0]?.isLoco ? 1 : 0;
|
||||
|
||||
new Array(this.maxCarCount).fill(0).forEach(() => {
|
||||
const { carWagon, cargo } = generatedChosenStockList[~~(Math.random() * generatedChosenStockList.length)];
|
||||
|
||||
if (this.store.totalMass + (cargo?.totalMass || carWagon.mass) > this.maxMass) return;
|
||||
if (this.store.totalLength + carWagon.length > this.maxLength) return;
|
||||
|
||||
this.addCarWagon(carWagon, cargo);
|
||||
});
|
||||
|
||||
this.store.stockSectionMode = 'stock-list';
|
||||
},
|
||||
|
||||
previewCar(type: string) {
|
||||
const c = this.store.carDataList.find((c) => c.type.startsWith(type)) || null;
|
||||
|
||||
this.store.chosenVehicle = c;
|
||||
this.store.chosenCar = c;
|
||||
this.store.chosenLoco = null;
|
||||
this.store.chosenCargo = null;
|
||||
|
||||
if (c) this.store.chosenCarUseType = c?.useType;
|
||||
},
|
||||
|
||||
toggleCargoChosen(cargoType: string, vehicles: string[]) {
|
||||
if (this.chosenCargoTypes.includes(cargoType)) {
|
||||
vehicles.forEach((v) => {
|
||||
const [type] = v.split(':');
|
||||
this.chosenCarTypes.splice(this.chosenCarTypes.indexOf(type), 1);
|
||||
});
|
||||
|
||||
this.chosenCargoTypes.splice(this.chosenCargoTypes.indexOf(cargoType), 1);
|
||||
return;
|
||||
}
|
||||
|
||||
this.chosenCargoTypes.push(cargoType);
|
||||
|
||||
vehicles.forEach((v) => {
|
||||
const [type] = v.split(':');
|
||||
this.chosenCarTypes.push(type);
|
||||
});
|
||||
},
|
||||
|
||||
toggleCarExclusion(type: string) {
|
||||
if (!this.excludedCarTypes.includes(type)) this.excludedCarTypes.push(type);
|
||||
else this.excludedCarTypes = this.excludedCarTypes.filter((c) => c != type);
|
||||
},
|
||||
},
|
||||
});
|
||||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
.generator_cargo,
|
||||
.generator_vehicles {
|
||||
display: grid;
|
||||
gap: 0.5em;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
|
||||
button {
|
||||
position: relative;
|
||||
padding: 0.5em;
|
||||
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
|
||||
background-color: $secondaryColor;
|
||||
|
||||
&[data-chosen='true'] {
|
||||
background-color: $accentColor;
|
||||
color: black;
|
||||
|
||||
box-shadow: 0 0 5px 1px $accentColor;
|
||||
}
|
||||
|
||||
&[data-excluded='true'] {
|
||||
background-color: gray;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
padding: 5px;
|
||||
|
||||
transform: translate(-8px, -50%);
|
||||
background-color: $bgColor;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.generator_vehicles {
|
||||
margin-top: 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 {
|
||||
background-color: $accentColor;
|
||||
padding: 0.5em;
|
||||
text-align: justify;
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 470px) {
|
||||
.generator_cargo,
|
||||
.generator_vehicles {
|
||||
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
|
||||
}
|
||||
|
||||
.generator_attributes {
|
||||
label {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
<template>
|
||||
<section class="stock-list-section">
|
||||
<div class="list_actions">
|
||||
<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>
|
||||
<span class="spacer"></span>
|
||||
<button class="btn" @click="shuffleCars">TASUJ WAGONY</button>
|
||||
<button class="btn" @click="store.isRandomizerCardOpen = true">LOSUJ SKŁAD</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_actions" :data-disabled="store.chosenStockListIndex == -1">
|
||||
<div class="stock_controls" :data-disabled="store.chosenStockListIndex == -1">
|
||||
<b class="no">
|
||||
POJAZD NR <span class="text--accent">{{ store.chosenStockListIndex + 1 }}</span>
|
||||
</b>
|
||||
@@ -118,6 +117,7 @@
|
||||
<div class="warning" v-if="tooManyLocomotives">Ten skład posiada za dużo pojazdów trakcyjnych!</div>
|
||||
</div>
|
||||
|
||||
<!-- Stock list -->
|
||||
<ul ref="list">
|
||||
<li v-if="store.stockList.length == 0" class="list-empty">
|
||||
<div class="stock-info">Lista pojazdów jest pusta!</div>
|
||||
@@ -172,11 +172,13 @@ import TrainImage from './TrainImageSection.vue';
|
||||
import { useStore } from '../store';
|
||||
import warningsMixin from '../mixins/warningsMixin';
|
||||
import imageMixin from '../mixins/imageMixin';
|
||||
import stockPreviewMixin from '../mixins/stockPreviewMixin';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'stock-list',
|
||||
components: { TrainImage },
|
||||
|
||||
mixins: [warningsMixin, imageMixin],
|
||||
mixins: [warningsMixin, imageMixin, stockPreviewMixin],
|
||||
|
||||
setup() {
|
||||
const store = useStore();
|
||||
@@ -217,10 +219,10 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
copyToClipboard() {
|
||||
if (this.stockHasWarnings()) {
|
||||
alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
|
||||
return;
|
||||
}
|
||||
// if (this.stockHasWarnings()) {
|
||||
// alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
|
||||
// return;
|
||||
// }
|
||||
|
||||
navigator.clipboard.writeText(this.stockString);
|
||||
|
||||
@@ -229,41 +231,20 @@ export default defineComponent({
|
||||
}, 20);
|
||||
},
|
||||
|
||||
onListItemClick(vehicleID: number) {
|
||||
const vehicle = this.store.stockList[vehicleID];
|
||||
onListItemClick(stockID: number) {
|
||||
const stock = this.store.stockList[stockID];
|
||||
|
||||
this.store.chosenStockListIndex =
|
||||
this.store.chosenStockListIndex == vehicleID && this.store.chosenVehicle?.type == vehicle.type ? -1 : vehicleID;
|
||||
this.store.chosenStockListIndex == stockID && this.store.chosenVehicle?.type == stock.type ? -1 : stockID;
|
||||
|
||||
if (this.store.chosenStockListIndex == -1) {
|
||||
this.store.chosenVehicle = null;
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.store.chosenVehicle?.imageSrc != vehicle.imgSrc) this.store.imageLoading = true;
|
||||
if (this.store.swapVehicles) this.store.swapVehicles = false;
|
||||
|
||||
if (this.store.showSupporter && !vehicle.supportersOnly) {
|
||||
this.store.showSupporter = false;
|
||||
}
|
||||
|
||||
if (vehicle.isLoco) {
|
||||
const chosenLoco = this.store.locoDataList.find((v) => v.type == vehicle.type) || null;
|
||||
this.store.chosenVehicle = chosenLoco;
|
||||
this.store.chosenLoco = chosenLoco;
|
||||
// this.store.chosenCargo = null;
|
||||
this.store.chosenLocoPower = vehicle.useType;
|
||||
} else {
|
||||
const chosenCar = this.store.carDataList.find((v) => v.type == vehicle.type) || null;
|
||||
this.store.chosenVehicle = chosenCar;
|
||||
this.store.chosenCar = chosenCar;
|
||||
|
||||
this.store.chosenCargo = vehicle.cargo || null;
|
||||
this.store.chosenCarUseType = vehicle.useType;
|
||||
}
|
||||
|
||||
if (this.store.swapVehicles) {
|
||||
this.store.swapVehicles = false;
|
||||
}
|
||||
this.previewStock(stock);
|
||||
},
|
||||
|
||||
getCarSpecFromType(typeStr: string) {
|
||||
@@ -349,8 +330,8 @@ export default defineComponent({
|
||||
downloadStock() {
|
||||
if (this.store.stockList.length == 0) return alert('Lista pojazdów jest pusta!');
|
||||
|
||||
if (this.stockHasWarnings())
|
||||
return alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
|
||||
// if (this.stockHasWarnings())
|
||||
// return alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
|
||||
|
||||
const fileName = prompt(
|
||||
'Nazwij plik, a następnie pobierz do folderu Presets (Dokumenty/TTSK/TrainDriver2):',
|
||||
@@ -417,28 +398,7 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
|
||||
.stock-list-section {
|
||||
grid-row: 1 / 4;
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.list_actions {
|
||||
display: flex;
|
||||
|
||||
.spacer {
|
||||
flex-grow: 2;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-right: 0.5em;
|
||||
|
||||
&:nth-child(5) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stock_actions {
|
||||
.stock_controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@@ -0,0 +1,76 @@
|
||||
<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>
|
||||
|
||||
@@ -116,7 +116,7 @@ export default defineComponent({
|
||||
grid-column: 1;
|
||||
|
||||
margin-top: 2em;
|
||||
height: 20em;
|
||||
height: 22em;
|
||||
}
|
||||
|
||||
.train-image {
|
||||
@@ -129,9 +129,8 @@ export default defineComponent({
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
width: 22em;
|
||||
max-width: 22em;
|
||||
height: 13em;
|
||||
|
||||
margin: 0 auto;
|
||||
|
||||
&.supporter {
|
||||
|
||||
@@ -1,647 +0,0 @@
|
||||
<template>
|
||||
<div class="randomizer-card g-card" v-if="store.isRandomizerCardOpen">
|
||||
<div class="g-card_bg" @click="store.isRandomizerCardOpen = false"></div>
|
||||
|
||||
<div class="card_content">
|
||||
<transition name="slide-top">
|
||||
<div class="warning-message" v-if="warningMessage">{{ warningMessage }}</div>
|
||||
</transition>
|
||||
|
||||
<div class="card_wrapper" ref="cardWrapper" tabindex="0">
|
||||
<h1><img :src="getIconURL('randomize')" alt="ikona losowania" /> LOSUJ SKŁAD</h1>
|
||||
|
||||
<div class="random-stock-selections">
|
||||
<div class="first-row">
|
||||
<h3>WŁAŚCIWOŚCI SKŁADU</h3>
|
||||
|
||||
<div class="max-values">
|
||||
<span>
|
||||
<label for="stock-mass">Maks. masa (t)</label>
|
||||
<input type="number" id="stock-mass" v-model="maxStockMass" />
|
||||
</span>
|
||||
<span>
|
||||
<label for="stock-mass">Maks. długość (m)</label>
|
||||
<input type="number" id="stock-mass" v-model="maxStockLength" />
|
||||
</span>
|
||||
<span>
|
||||
<label for="stock-count">Maks. liczba wagonów</label>
|
||||
<input type="number" id="stock-count" v-model="maxStockCount" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="second-row">
|
||||
<div class="select-box locos">
|
||||
<h3>LOKOMOTYWA</h3>
|
||||
|
||||
<select
|
||||
v-model="chosenLocomotive"
|
||||
@change="onLocomotivePreviewSelect()"
|
||||
@focus="onLocomotivePreviewSelect()"
|
||||
>
|
||||
<option :value="undefined">Wybierz lokomotywę</option>
|
||||
<option v-for="loco in store.locoDataList.filter((l) => !l.type.includes('EN'))" :value="loco">
|
||||
{{ loco.type }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="car-preview">
|
||||
<div v-if="isPreviewLoading" class="loading">ŁADOWANIE...</div>
|
||||
|
||||
<span class="preview-message" v-if="!previewVehicle">
|
||||
WYBIERZ POJAZD LUB WAGON, BY ZOBACZYĆ JEGO PODGLĄD
|
||||
</span>
|
||||
|
||||
<img v-else :src="previewVehicle.imageSrc" :alt="previewVehicle.type" />
|
||||
|
||||
<span class="preview-message info" v-if="previewVehicle">
|
||||
<button @click="prevPreviewIndex"><</button>
|
||||
|
||||
<span>
|
||||
{{ previewVehicle.type }}
|
||||
{{
|
||||
isLocomotive(previewVehicle)
|
||||
? ''
|
||||
: `(${previewIndex + 1} z ${focusedCarWagon?.availableCars.length})`
|
||||
}}
|
||||
</span>
|
||||
|
||||
<button @click="nextPreviewIndex">></button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="select-box carwagons">
|
||||
<h3>
|
||||
WAGONY
|
||||
|
||||
<button class="btn btn--text" @click="showRules = !showRules">[ zasady dodawania wagonów ]</button>
|
||||
</h3>
|
||||
|
||||
<div class="rules" v-if="showRules">
|
||||
<ul>
|
||||
<li>
|
||||
<b class="text--accent">Typ wagonu</b> musi zaczynać się typem konstrukcyjnym (np. <i>111a</i> lub
|
||||
<i>203V</i>), wariantem np. <i>111a Grafitti 1</i> lub jego początkiem, np. <i>111a PKPIC</i> (wtedy
|
||||
losowanie obejmuje wszystkie dostępne warianty typu o takim początku)
|
||||
</li>
|
||||
<li>
|
||||
<b class="text--accent">Ładunek</b> można wybrać po uprzednim wpisaniu typu konstrukcyjnego wagonu
|
||||
towarowego (zakładając, że je posiada)
|
||||
</li>
|
||||
<li>
|
||||
<b class="text--accent">Szansa</b> (waga) określa prawdopodobieństwo wylosowania danego typu wagonu.
|
||||
Im większa liczba względem reszty wag, tym bardziej prawdopodobne, że zostanie on wybrany
|
||||
</li>
|
||||
<li>
|
||||
<b class="text--accent">Warianty</b> pokazują liczbę możliwych wagonów w puli w ramach losowania
|
||||
danego typu
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="list-wrapper">
|
||||
<ul class="carwagon-list">
|
||||
<li class="text--accent" style="font-weight: bold">
|
||||
<div>Typ wagonu</div>
|
||||
<div>Ładunek</div>
|
||||
<div>Szansa</div>
|
||||
<div>Warianty</div>
|
||||
<div>Usuń</div>
|
||||
</li>
|
||||
<li v-for="(stockWagon, i) in chosenCarWagonList">
|
||||
<div>
|
||||
<input
|
||||
class="carwagon-type g-input"
|
||||
type="text"
|
||||
list="types-datalist"
|
||||
v-model="stockWagon.stockString"
|
||||
@input="onCarWagonTypeInput(stockWagon)"
|
||||
@focus="onCarWagonTypeFocus(stockWagon)"
|
||||
placeholder="Wybierz wagon..."
|
||||
/>
|
||||
<datalist id="types-datalist">
|
||||
<option value="">Wybierz wagon</option>
|
||||
<option v-for="carOptionType in allCarOptionsList" :value="carOptionType">
|
||||
{{ carOptionType }}
|
||||
</option>
|
||||
</datalist>
|
||||
</div>
|
||||
<div>
|
||||
<select class="carwagon-cargo" v-model="stockWagon.chosenCargo">
|
||||
<option :value="undefined">brak</option>
|
||||
<option
|
||||
:value="{ id: 'random', totalMass: 0 }"
|
||||
v-if="stockWagon.availableCargo && stockWagon.availableCargo.length > 0"
|
||||
>
|
||||
losowy
|
||||
</option>
|
||||
<option v-for="cargo in stockWagon.availableCargo" :value="cargo">
|
||||
{{ cargo.id }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<span class="carwagon-chance">
|
||||
<input type="number" v-model="stockWagon.chance" max="100" min="1" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="variant-count">{{ stockWagon.availableCars.length }}</div>
|
||||
<div class="carwagon-remove">
|
||||
<button @click="removeFromRandomStockList(i)">
|
||||
<img :src="getIconURL('remove')" alt="remove" />
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button class="btn btn--outline" style="margin-top: 0.5em;" @click="addToRandomStockList">+ NOWY WAGON</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stock-actions">
|
||||
<button class="btn" style="font-size: 1.15em; margin-top: 2em" @click="generateRandomStock">
|
||||
LOSUJ SKŁAD!
|
||||
</button>
|
||||
<button class="btn" style="font-size: 1.15em; margin-top: 2em" @click="store.isRandomizerCardOpen = false">
|
||||
ZAMKNIJ
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
import { ICargo, ICarWagon, ILocomotive, Vehicle } from '../../types';
|
||||
|
||||
import { useStore } from '../../store';
|
||||
import stockMixin from '../../mixins/stockMixin';
|
||||
import imageMixin from '../../mixins/imageMixin';
|
||||
import { isLocomotive } from '../../utils/vehicleUtils';
|
||||
|
||||
interface RandomStockCarWagon {
|
||||
stockString: string;
|
||||
chance: number;
|
||||
|
||||
availableCars: ICarWagon[];
|
||||
availableCargo?: ICargo[];
|
||||
chosenCargo?: ICargo;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const store = useStore();
|
||||
|
||||
return {
|
||||
store,
|
||||
};
|
||||
},
|
||||
|
||||
mixins: [stockMixin, imageMixin],
|
||||
|
||||
activated() {
|
||||
(this.$refs['cardWrapper'] as any).focus();
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
maxStockMass: 650,
|
||||
maxStockLength: 350,
|
||||
maxStockCount: 30,
|
||||
|
||||
chosenCarWagonList: [] as RandomStockCarWagon[],
|
||||
chosenLocomotive: undefined as ILocomotive | undefined,
|
||||
|
||||
warningMessage: '',
|
||||
|
||||
showRules: false,
|
||||
isPreviewLoading: false,
|
||||
|
||||
focusedCarWagon: undefined as RandomStockCarWagon | undefined,
|
||||
randomFocusedWagonVariant: undefined as ICarWagon | undefined,
|
||||
|
||||
previewVehicle: undefined as Vehicle | undefined,
|
||||
previewIndex: 0,
|
||||
}),
|
||||
|
||||
watch: {
|
||||
'focusedCarWagon.availableCars': {
|
||||
handler(cars?: RandomStockCarWagon['availableCars'], prevCars?: RandomStockCarWagon['availableCars']) {
|
||||
const prevAvailableCarsStr = prevCars?.map((car) => car.type).join(',') || '';
|
||||
const availableCarsStr = cars?.map((car) => car.type).join(',') || '';
|
||||
|
||||
if (prevAvailableCarsStr != availableCarsStr || (this.previewVehicle && isLocomotive(this.previewVehicle))) {
|
||||
this.previewIndex = 0;
|
||||
this.randomFocusedWagonVariant = this.focusedCarWagon?.availableCars[this.previewIndex];
|
||||
//~~(Math.random() * this.focusedCarWagon.availableCars.length)
|
||||
|
||||
this.previewVehicle = this.randomFocusedWagonVariant;
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
allCarOptionsList() {
|
||||
const list: string[] = [];
|
||||
|
||||
this.store.carDataList.forEach((carData) => {
|
||||
const splittedTypeList = carData.type.split('_');
|
||||
|
||||
for (let i = 0; i < splittedTypeList.length; i++) {
|
||||
const typeToCheck = carData.type
|
||||
.split('_', i + 1)
|
||||
.join('_')
|
||||
.replace(/_/g, ' ');
|
||||
|
||||
if (!list.includes(typeToCheck)) list.push(typeToCheck);
|
||||
}
|
||||
});
|
||||
|
||||
return list.sort((a, b) => (a > b ? 1 : -1));
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
isLocomotive,
|
||||
|
||||
nextPreviewIndex() {
|
||||
if (!this.focusedCarWagon || (this.previewVehicle && isLocomotive(this.previewVehicle))) return;
|
||||
if (this.previewIndex > this.focusedCarWagon.availableCars.length - 2) return;
|
||||
|
||||
this.randomFocusedWagonVariant = this.focusedCarWagon.availableCars[++this.previewIndex];
|
||||
this.previewVehicle = this.randomFocusedWagonVariant;
|
||||
},
|
||||
|
||||
prevPreviewIndex() {
|
||||
if (!this.focusedCarWagon || (this.previewVehicle && isLocomotive(this.previewVehicle))) return;
|
||||
if (this.previewIndex == 0) return;
|
||||
|
||||
this.randomFocusedWagonVariant = this.focusedCarWagon.availableCars[--this.previewIndex];
|
||||
this.previewVehicle = this.randomFocusedWagonVariant;
|
||||
},
|
||||
|
||||
onLocomotivePreviewSelect() {
|
||||
this.previewVehicle = this.chosenLocomotive;
|
||||
},
|
||||
|
||||
onCarWagonTypeInput(carWagon: RandomStockCarWagon) {
|
||||
const constructionType = carWagon.stockString.split(' ')[0];
|
||||
|
||||
const carWagonObj = this.store.carDataList.find((car) => car.constructionType == constructionType);
|
||||
|
||||
const allAvailableCars = this.store.carDataList.filter(
|
||||
(car) => car.type.startsWith(carWagon.stockString.replace(/ /g, '_')) && carWagon.stockString.length != 0
|
||||
);
|
||||
|
||||
carWagon.availableCars = allAvailableCars;
|
||||
carWagon.availableCargo = carWagonObj?.cargoList || undefined;
|
||||
|
||||
if (!carWagonObj?.cargoList) {
|
||||
carWagon.chosenCargo = undefined;
|
||||
}
|
||||
},
|
||||
|
||||
onCarWagonTypeFocus(carWagon: RandomStockCarWagon) {
|
||||
this.focusedCarWagon = carWagon;
|
||||
this.previewVehicle = this.randomFocusedWagonVariant;
|
||||
},
|
||||
|
||||
addToRandomStockList() {
|
||||
const randTypeList = this.allCarOptionsList.filter((carOption) =>
|
||||
/1|2/g.test(carOption.split(' ').length.toString())
|
||||
);
|
||||
// const randType = randTypeList[Math.floor(Math.random() * randTypeList.length)];
|
||||
|
||||
const randomStockCarWagon: RandomStockCarWagon = {
|
||||
stockString: '',
|
||||
chance: 10,
|
||||
chosenCargo: undefined,
|
||||
availableCargo: undefined,
|
||||
availableCars: [],
|
||||
};
|
||||
|
||||
this.chosenCarWagonList.push(randomStockCarWagon);
|
||||
},
|
||||
|
||||
removeFromRandomStockList(index: number) {
|
||||
this.chosenCarWagonList.splice(index, 1);
|
||||
},
|
||||
|
||||
validateCarWagonList() {
|
||||
return (
|
||||
this.chosenCarWagonList.length > 0 &&
|
||||
this.chosenCarWagonList.every((carWagon) => carWagon.availableCars.length > 0)
|
||||
);
|
||||
},
|
||||
|
||||
generateRandomStock() {
|
||||
let totalLength = 0;
|
||||
let totalMass = 0;
|
||||
|
||||
if (!this.chosenLocomotive) {
|
||||
this.warningMessage = 'Nie wybrano lokomotywy!';
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.validateCarWagonList()) {
|
||||
this.warningMessage = 'Wpisano niepoprawne wartości w liście wagonów!';
|
||||
return;
|
||||
}
|
||||
|
||||
this.store.stockList.length = 0;
|
||||
this.addLocomotive(this.chosenLocomotive);
|
||||
totalLength += this.chosenLocomotive.length;
|
||||
totalMass += this.chosenLocomotive.mass;
|
||||
|
||||
while (true) {
|
||||
const { carWagon, cargo } = this.getRandomStock();
|
||||
const totalMassAfter = totalMass + (cargo?.totalMass || carWagon.mass);
|
||||
const totalLengthAfter = totalLength + carWagon.length;
|
||||
|
||||
if (
|
||||
this.store.stockList.length > this.maxStockCount ||
|
||||
totalLengthAfter > this.maxStockLength ||
|
||||
totalMassAfter > this.maxStockMass
|
||||
)
|
||||
break;
|
||||
|
||||
this.addCarWagon(carWagon, cargo);
|
||||
|
||||
totalLength = totalLengthAfter;
|
||||
totalMass = totalMassAfter;
|
||||
}
|
||||
|
||||
this.store.isRandomizerCardOpen = false;
|
||||
this.warningMessage = '';
|
||||
},
|
||||
|
||||
getRandomStock(): { carWagon: ICarWagon; cargo?: ICargo } {
|
||||
const totalChancePot = this.chosenCarWagonList.reduce((total, car) => {
|
||||
total += car.chance;
|
||||
return total;
|
||||
}, 0);
|
||||
|
||||
let rand = Math.random() * totalChancePot;
|
||||
let randCarWagon: ICarWagon | undefined = undefined;
|
||||
let randCargo: ICargo | undefined = undefined;
|
||||
|
||||
for (let wagonItem of this.chosenCarWagonList) {
|
||||
if (rand < wagonItem.chance) {
|
||||
randCarWagon = { ...wagonItem.availableCars[Math.floor(Math.random() * wagonItem.availableCars.length)] };
|
||||
randCargo =
|
||||
wagonItem.chosenCargo?.id == 'random'
|
||||
? { ...wagonItem.availableCargo![~~(Math.random() * wagonItem.availableCargo!.length)] }
|
||||
: wagonItem.chosenCargo;
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
rand -= wagonItem.chance;
|
||||
}
|
||||
|
||||
return { carWagon: randCarWagon!, cargo: randCargo };
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../styles/global.scss';
|
||||
|
||||
h1 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
font-size: 2.5em;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
width: 1.75em;
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: $accentColor;
|
||||
margin: 0 0 0.5em 0;
|
||||
}
|
||||
|
||||
.card_content {
|
||||
overflow-y: hidden;
|
||||
border: 2px solid white;
|
||||
|
||||
width: 95vw;
|
||||
max-width: 750px;
|
||||
|
||||
height: 90vh;
|
||||
max-height: 900px;
|
||||
|
||||
background-color: #111;
|
||||
|
||||
border-radius: 1em;
|
||||
|
||||
z-index: 99;
|
||||
|
||||
.card_wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.warning-message {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
z-index: 101;
|
||||
|
||||
font-size: 1.2em;
|
||||
|
||||
text-align: center;
|
||||
padding: 0.25em;
|
||||
|
||||
background-color: #b2222288;
|
||||
}
|
||||
|
||||
.random-stock-selections {
|
||||
text-align: left;
|
||||
|
||||
.select-box {
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
}
|
||||
|
||||
.first-row > .max-values {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input {
|
||||
width: auto;
|
||||
margin: 0.25em 0.5em 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.second-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 1em;
|
||||
|
||||
.car-preview {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 180px;
|
||||
|
||||
border: 1px solid white;
|
||||
|
||||
.loading {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
width: 100%;
|
||||
padding: 0.5em 0;
|
||||
|
||||
z-index: 102;
|
||||
|
||||
background-color: rgba(black, 0.75);
|
||||
}
|
||||
|
||||
.preview-message {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
width: 100%;
|
||||
|
||||
padding: 0.5em;
|
||||
|
||||
&.info {
|
||||
button {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
background-color: #111111dd;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rules {
|
||||
margin: 0.5em 0;
|
||||
|
||||
ul {
|
||||
list-style: inside;
|
||||
border: 1px solid $accentColor;
|
||||
padding: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.list-wrapper {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.carwagon-list li {
|
||||
margin: 0.5em 0;
|
||||
min-width: 450px;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 2fr 1fr 1fr 3em;
|
||||
gap: 0 0.5em;
|
||||
align-items: center;
|
||||
|
||||
input,
|
||||
select,
|
||||
.variant-count {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.carwagon-chance input {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.carwagon-remove {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
button img {
|
||||
width: 1.15em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.variant-count {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.stock-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
margin-top: auto;
|
||||
padding: 1em 0;
|
||||
|
||||
.btn {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 650px) {
|
||||
.car-preview {
|
||||
width: 20em;
|
||||
height: 13em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h3 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.select-box {
|
||||
margin: 0.5em auto;
|
||||
}
|
||||
|
||||
.max-values {
|
||||
justify-content: center;
|
||||
|
||||
span {
|
||||
margin: 0.25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -91,9 +91,11 @@ export default defineComponent({
|
||||
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;
|
||||
|
||||
@@ -105,9 +107,6 @@ export default defineComponent({
|
||||
this.addVehicle(vehicle);
|
||||
});
|
||||
|
||||
this.store.chosenStockListIndex = -1;
|
||||
this.store.chosenVehicle = null;
|
||||
|
||||
this.store.isRealStockListCardOpen = false;
|
||||
},
|
||||
|
||||
@@ -180,7 +179,8 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
input {
|
||||
min-width: 250px;
|
||||
width: 100%;
|
||||
max-width: 250px;
|
||||
|
||||
&::placeholder {
|
||||
font-size: 0.9em;
|
||||
@@ -244,6 +244,10 @@ input {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"passenger": {
|
||||
"PKP_IC": [],
|
||||
"PKP_PR": [],
|
||||
"PKP_ALL": []
|
||||
},
|
||||
"cargo": {
|
||||
"kontenery": ["627Z:all", "412Z:all"],
|
||||
"drobnica": ["426S:all", "208Kf:all", "401Ka:all"],
|
||||
"węgiel": ["412W:coal_01", "413S:coal_Fas", "429W:coal_01"],
|
||||
"ruda": ["412W:ore_01", "401Zb:ore_35", "429W:ore_01"],
|
||||
"piasek": ["412W:sand_01", "412W:sand_02", "413S:sand_Fas", "401Zb:sand_30", "429W:sand_01", "429W:sand_02"],
|
||||
"kreda": ["413S:chalk_Fas"],
|
||||
"kamień": ["412W:stone_01", "412W:stone_50", "401Zb:stone_25", "429W:stone_01"],
|
||||
"złom": ["412W:scrap_01", "412W:scrap_02", "429W:scrap_01", "429W:scrap_02"],
|
||||
"paliwo": ["29R_CTLL:all", "29R_PKP:all"],
|
||||
"melasa": ["29R_PLPOL:all"],
|
||||
"żwir": ["441V"],
|
||||
"koła": ["424Z:wheels_01"],
|
||||
"drewno": ["424Z:woods_01", "424Z:woods_2"],
|
||||
"szyny": ["424Z:rails_01"],
|
||||
"kable": ["424Z:cables_01"],
|
||||
"cement": ["408S:all"],
|
||||
"kruszywo": ["203V"],
|
||||
"techniczne": ["209c", "304Ca"]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import { defineComponent } from 'vue';
|
||||
import { useStore } from '../store';
|
||||
import { IStock, Vehicle } from '../types';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
store: useStore(),
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
locoOptions() {
|
||||
return this.store.locoDataList
|
||||
.sort((a, b) => (a.type > b.type ? 1 : -1))
|
||||
.filter((loco) => loco.power == this.store.chosenLocoPower);
|
||||
},
|
||||
|
||||
carOptions() {
|
||||
return this.store.carDataList
|
||||
.sort((a, b) => (a.type > b.type ? 1 : -1))
|
||||
.filter((car) => car.useType == this.store.chosenCarUseType);
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
selectLocoType(locoTypeId: string) {
|
||||
this.store.chosenLocoPower = locoTypeId;
|
||||
this.store.chosenVehicle = this.locoOptions[0];
|
||||
this.store.chosenLoco = this.locoOptions[0];
|
||||
},
|
||||
|
||||
selectCarWagonType(carWagonTypeId: string) {
|
||||
this.store.chosenCarUseType = carWagonTypeId;
|
||||
this.store.chosenVehicle = this.carOptions[0];
|
||||
this.store.chosenCar = this.carOptions[0];
|
||||
this.store.chosenCargo = null;
|
||||
},
|
||||
|
||||
previewVehicleByType(type: 'loco' | 'car' | 'cargo') {
|
||||
this.$nextTick(() => {
|
||||
if (!this.store.chosenLoco && !this.store.chosenCar) return;
|
||||
|
||||
this.store.chosenVehicle = type == 'loco' ? this.store.chosenLoco : this.store.chosenCar;
|
||||
|
||||
this.store.chosenCargo =
|
||||
this.store.chosenCar?.cargoList.find((cargo) => cargo.id == this.store.chosenCargo?.id) || null;
|
||||
});
|
||||
},
|
||||
|
||||
previewStock(stock: IStock) {
|
||||
if (this.store.chosenVehicle?.imageSrc != stock.imgSrc) this.store.imageLoading = true;
|
||||
|
||||
if (stock.isLoco) {
|
||||
const chosenLoco = this.store.locoDataList.find((v) => v.type == stock.type) || null;
|
||||
this.store.chosenVehicle = chosenLoco;
|
||||
this.store.chosenLoco = chosenLoco;
|
||||
this.store.chosenCargo = null;
|
||||
this.store.chosenLocoPower = stock.useType;
|
||||
} else {
|
||||
const chosenCar = this.store.carDataList.find((v) => v.type == stock.type) || null;
|
||||
this.store.chosenVehicle = chosenCar;
|
||||
this.store.chosenCar = chosenCar;
|
||||
|
||||
this.store.chosenCargo = stock.cargo || null;
|
||||
this.store.chosenCarUseType = stock.useType;
|
||||
}
|
||||
},
|
||||
|
||||
resetPreview() {
|
||||
this.store.chosenVehicle = null;
|
||||
this.store.chosenCar = null;
|
||||
this.store.chosenCargo = null;
|
||||
this.store.chosenLoco = null;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
|
||||
@@ -30,6 +30,8 @@ export const useStore = defineStore({
|
||||
|
||||
vehiclePreviewSrc: '',
|
||||
|
||||
stockSectionMode: 'stock-list',
|
||||
|
||||
isRandomizerCardOpen: false,
|
||||
isRealStockListCardOpen: false,
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ $breakpointSm: 550px;
|
||||
$bgColor: #2c3149;
|
||||
$textColor: #fff;
|
||||
$secondaryColor: #222;
|
||||
$accentColor: #ffd600;
|
||||
$accentColor: #e4c428;
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 0.5rem;
|
||||
@@ -106,7 +106,8 @@ button.btn {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
opacity: 0.7;
|
||||
opacity: 0.75;
|
||||
background-color: #2b2b2b;
|
||||
}
|
||||
|
||||
&--text {
|
||||
@@ -146,6 +147,10 @@ input {
|
||||
&:focus-visible {
|
||||
border-color: $accentColor;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
option {
|
||||
@@ -165,7 +170,7 @@ ul {
|
||||
}
|
||||
|
||||
&--grayed {
|
||||
color: gray;
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
export type Vehicle = ILocomotive | ICarWagon;
|
||||
export type StockSectionMode = 'STOCK_LIST' | 'STOCK_GENERATOR';
|
||||
|
||||
export interface IStore {
|
||||
chosenCar: ICarWagon | null;
|
||||
@@ -25,6 +26,8 @@ export interface IStore {
|
||||
|
||||
isRandomizerCardOpen: boolean;
|
||||
isRealStockListCardOpen: boolean;
|
||||
|
||||
stockSectionMode: 'stock-list' | 'stock-generator';
|
||||
}
|
||||
|
||||
export interface IVehicleData {
|
||||
|
||||
+51
-2
@@ -1,7 +1,56 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
import { VitePWA } from "vite-plugin-pwa";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()]
|
||||
})
|
||||
plugins: [
|
||||
vue(),
|
||||
VitePWA({
|
||||
registerType: 'autoUpdate',
|
||||
workbox: {
|
||||
globPatterns: ['**/*.{js,css,html,png,svg,img}'],
|
||||
runtimeCaching: [
|
||||
{
|
||||
urlPattern: new RegExp(`^https://wiki.td2.info.pl/images/thumb\/.*`),
|
||||
handler: 'NetworkFirst',
|
||||
options: {
|
||||
cacheName: 'td2-images-cache',
|
||||
expiration: {
|
||||
maxEntries: 400,
|
||||
maxAgeSeconds: 60 * 60 * 24 * 14, // <== 14 days
|
||||
},
|
||||
cacheableResponse: {
|
||||
statuses: [0, 200],
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
urlPattern: new RegExp(`^https://spythere.github.io/api/readyStock.json`),
|
||||
handler: 'NetworkFirst',
|
||||
options: {
|
||||
cacheName: 'github-api-cache',
|
||||
expiration: {
|
||||
maxEntries: 400,
|
||||
maxAgeSeconds: 60 * 60 * 24 * 30, // <== 30 days
|
||||
},
|
||||
cacheableResponse: {
|
||||
statuses: [0, 200],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
devOptions: {
|
||||
enabled: true,
|
||||
},
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user