mirror of
https://github.com/Spythere/pojazdownik.git
synced 2026-05-03 11:45:34 +00:00
Compare commits
20 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Spythere
|
5b629833df | ||
 Spythere
|
b53201a7ff | ||
|
Spythere
|
f0ddd0e27f | ||
|
Spythere
|
94bfba2c49 | ||
|
Spythere
|
1e4541ef0d | ||
|
Spythere
|
c25a55a7d9 | ||
|
Spythere
|
bea3c59405 | ||
|
Spythere
|
8cd43adff3 | ||
|
Spythere
|
5ab1963117 | ||
|
Spythere
|
50d784a0de | ||
|
Spythere
|
f61135ce6b | ||
|
Spythere
|
5e43ece1aa | ||
|
Spythere
|
37e4149a34 | ||
|
Spythere
|
e515203557 | ||
|
Spythere
|
0d79c71eba | ||
|
Spythere
|
2bbf9a8ac3 | ||
|
Spythere
|
45b2bd01a2 | ||
|
Spythere
|
665ffb9dce | ||
|
Spythere
|
1c2a93fbd5 | ||
|
Spythere
|
57ab6cc02d |
@@ -0,0 +1,18 @@
|
|||||||
|
/* eslint-env node */
|
||||||
|
require('@rushstack/eslint-patch/modern-module-resolution')
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
extends: [
|
||||||
|
'plugin:vue/vue3-essential',
|
||||||
|
'eslint:recommended',
|
||||||
|
'@vue/eslint-config-typescript',
|
||||||
|
'@vue/eslint-config-prettier/skip-formatting'
|
||||||
|
],
|
||||||
|
rules: {
|
||||||
|
'vue/multi-word-component-names': 'off'
|
||||||
|
},
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 'latest'
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,20 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
root: true,
|
|
||||||
env: {
|
|
||||||
node: true,
|
|
||||||
},
|
|
||||||
extends: [
|
|
||||||
"plugin:vue/vue3-essential",
|
|
||||||
"eslint:recommended",
|
|
||||||
"@vue/typescript/recommended",
|
|
||||||
"@vue/prettier",
|
|
||||||
"@vue/prettier/@typescript-eslint",
|
|
||||||
],
|
|
||||||
parserOptions: {
|
|
||||||
ecmaVersion: 2020,
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
|
|
||||||
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@@ -26,3 +26,6 @@ node_modules
|
|||||||
|
|
||||||
# Dev files
|
# Dev files
|
||||||
stockInfoDev.json
|
stockInfoDev.json
|
||||||
|
|
||||||
|
# Lock files
|
||||||
|
yarn.lock
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
presets: ["@vue/cli-plugin-babel/preset"],
|
|
||||||
};
|
|
||||||
+8
-10
@@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
@@ -8,22 +8,20 @@
|
|||||||
<title>Pojazdownik</title>
|
<title>Pojazdownik</title>
|
||||||
<meta name="description" content="Edytor pociągów online do symulatora Train Driver 2" />
|
<meta name="description" content="Edytor pociągów online do symulatora Train Driver 2" />
|
||||||
|
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
<link rel="icon" href="/favicon.ico" sizes="any" />
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
|
||||||
<link rel="manifest" href="/site.webmanifest" />
|
|
||||||
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
|
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
|
||||||
|
<link rel="manifest" href="/site.webmanifest" />
|
||||||
|
|
||||||
<meta name="msapplication-TileColor" content="#da532c" />
|
<meta name="msapplication-TileColor" content="#da532c" />
|
||||||
<meta name="theme-color" content="#e4c428" />
|
<meta name="theme-color" content="#111" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
<strong>
|
<strong> We're sorry but Pojazdownik doesn't work properly without JavaScript enabled. Please enable it to continue. </strong>
|
||||||
We're sorry but Pojazdownik doesn't work properly without JavaScript enabled. Please enable it to continue.
|
|
||||||
</strong>
|
|
||||||
</noscript>
|
</noscript>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module" src="/src/main.ts"></script>
|
<script type="module" src="/src/main.ts"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|||||||
Generated
+9825
-1467
File diff suppressed because it is too large
Load Diff
+14
-3
@@ -1,24 +1,35 @@
|
|||||||
{
|
{
|
||||||
"name": "pojazdownik",
|
"name": "pojazdownik",
|
||||||
"version": "1.6.0",
|
"version": "1.7.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "vue-tsc --noEmit && vite build",
|
"build": "vue-tsc --noEmit && vite build",
|
||||||
"preview": "yarn build && vite preview --port 4174"
|
"preview": "yarn build && vite preview --port 4174",
|
||||||
|
"type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
|
||||||
|
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
|
||||||
|
"format": "prettier --write src/"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^1.4.0",
|
"axios": "^1.4.0",
|
||||||
"pinia": "^2.0.17",
|
"pinia": "^2.0.17",
|
||||||
|
"prettier": "^3.0.3",
|
||||||
"vue": "^3.2.37",
|
"vue": "^3.2.37",
|
||||||
"vue-i18n": "9"
|
"vue-i18n": "9"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@rushstack/eslint-patch": "^1.3.3",
|
||||||
|
"@vite-pwa/assets-generator": "^0.0.10",
|
||||||
"@vitejs/plugin-vue": "^4.1.0",
|
"@vitejs/plugin-vue": "^4.1.0",
|
||||||
|
"@vue/eslint-config-prettier": "^8.0.0",
|
||||||
|
"@vue/eslint-config-typescript": "^12.0.0",
|
||||||
|
"@vue/tsconfig": "^0.4.0",
|
||||||
|
"eslint": "^8.49.0",
|
||||||
|
"eslint-plugin-vue": "^9.17.0",
|
||||||
"sass": "^1.59.3",
|
"sass": "^1.59.3",
|
||||||
"typescript": "^5.0.2",
|
"typescript": "^5.0.2",
|
||||||
"vite": "^4.2.1",
|
"vite": "^4.2.1",
|
||||||
"vite-plugin-pwa": "^0.14.6",
|
"vite-plugin-pwa": "^0.16.5",
|
||||||
"vue-tsc": "^1.2.0"
|
"vue-tsc": "^1.2.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,24 @@
|
|||||||
|
<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<mask id="path-1-inside-1_102_63" fill="white">
|
||||||
|
<path d="M0 250C0 111.929 111.929 6.10352e-05 250 6.10352e-05C388.071 6.10352e-05 500 111.929 500 250C500 388.071 388.071 500 250 500C111.929 500 0 388.071 0 250Z"/>
|
||||||
|
</mask>
|
||||||
|
<path d="M0 250C0 111.929 111.929 6.10352e-05 250 6.10352e-05C388.071 6.10352e-05 500 111.929 500 250C500 388.071 388.071 500 250 500C111.929 500 0 388.071 0 250Z" fill="#242424"/>
|
||||||
|
<path d="M0 222.821C0 84.7503 111.929 -27.1785 250 -27.1785C388.071 -27.1785 500 84.7503 500 222.821V250C500 126.939 388.071 27.1787 250 27.1787C111.929 27.1787 0 126.939 0 250V222.821ZM500 277.179C500 415.25 388.071 527.179 250 527.179C111.929 527.179 0 415.25 0 277.179V250C0 373.061 111.929 472.821 250 472.821C388.071 472.821 500 373.061 500 250V277.179ZM0 500V6.10352e-05V500ZM500 6.10352e-05V500V6.10352e-05Z" fill="#FFD600" mask="url(#path-1-inside-1_102_63)"/>
|
||||||
|
<path d="M210.369 301.604C210.369 301.604 210.369 341.807 210.369 364.846C210.369 387.885 202.798 417.491 171.591 417.491C140.385 417.491 132.813 417.491 132.813 417.491L132.812 78.125L250.754 78.125C274.312 78.125 294.504 80.9665 311.331 86.6494C328.311 92.1788 342.232 99.8585 353.093 109.689C364.107 119.519 372.214 131.115 377.415 144.478C382.616 157.84 385.217 172.278 385.217 187.791C385.217 204.533 382.54 219.892 377.186 233.869C371.832 247.846 363.648 259.827 352.634 269.81C341.62 279.794 327.623 287.627 310.643 293.31C293.816 298.839 273.853 301.604 250.754 301.604L210.369 301.604ZM210.369 242.854L250.754 242.854C270.946 242.854 285.479 238.016 294.351 228.34C303.224 218.663 307.66 205.147 307.66 187.791C307.66 180.111 306.512 173.123 304.218 166.825C301.923 160.528 298.405 155.152 293.663 150.698C289.074 146.09 283.184 142.558 275.995 140.1C268.958 137.643 260.544 136.414 250.754 136.414L210.369 136.414L210.369 242.854Z" fill="url(#paint0_linear_102_63)"/>
|
||||||
|
<path d="M239.215 301.604C239.215 301.604 239.215 341.807 239.215 364.846C239.215 387.885 231.643 417.491 200.437 417.491C169.231 417.491 161.659 417.491 161.659 417.491L161.658 78.125L279.6 78.125C303.158 78.125 323.35 80.9665 340.177 86.6494C357.157 92.1788 371.077 99.8585 381.938 109.689C392.952 119.519 401.06 131.115 406.261 144.478C411.462 157.84 414.062 172.278 414.062 187.791C414.062 204.533 411.385 219.892 406.031 233.869C400.677 247.846 392.493 259.827 381.479 269.81C370.465 279.794 356.468 287.627 339.488 293.31C322.662 298.839 302.699 301.604 279.6 301.604L239.215 301.604ZM239.215 242.854L279.6 242.854C299.792 242.854 314.325 238.016 323.197 228.34C332.069 218.663 336.505 205.147 336.505 187.791C336.505 180.111 335.358 173.123 333.064 166.825C330.769 160.528 327.251 155.152 322.509 150.698C317.919 146.09 312.03 142.558 304.84 140.1C297.804 137.643 289.39 136.414 279.6 136.414L239.215 136.414L239.215 242.854Z" fill="url(#paint1_linear_102_63)"/>
|
||||||
|
<path d="M210.685 301.604C210.685 301.604 210.685 341.807 210.685 364.846C210.685 387.885 203.082 417.491 171.749 417.491C140.416 417.491 132.813 417.491 132.813 417.491L132.812 78.125L251.233 78.125C274.887 78.125 295.161 80.9665 312.057 86.6494C329.105 92.1788 343.083 99.8585 353.988 109.689C365.046 119.519 373.187 131.115 378.409 144.478C383.631 157.84 386.242 172.278 386.242 187.791C386.242 204.533 383.555 219.892 378.179 233.869C372.803 247.846 364.586 259.827 353.527 269.81C342.468 279.794 328.414 287.627 311.365 293.31C294.47 298.839 274.426 301.604 251.233 301.604L210.685 301.604ZM210.685 242.854L251.233 242.854C271.508 242.854 286.099 238.016 295.008 228.34C303.916 218.663 308.37 205.147 308.37 187.791C308.37 180.111 307.218 173.123 304.914 166.825C302.611 160.528 299.078 155.152 294.316 150.698C289.709 146.09 283.795 142.558 276.576 140.1C269.511 137.643 261.063 136.414 251.233 136.414L210.685 136.414L210.685 242.854Z" fill="url(#paint2_radial_102_63)"/>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="paint0_linear_102_63" x1="259.015" y1="78.125" x2="259.015" y2="417.491" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop offset="0.135417" stop-color="#FFD600"/>
|
||||||
|
<stop offset="1"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint1_linear_102_63" x1="287.86" y1="78.125" x2="287.86" y2="417.491" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop offset="0.135417" stop-color="#FFD600"/>
|
||||||
|
<stop offset="1"/>
|
||||||
|
</linearGradient>
|
||||||
|
<radialGradient id="paint2_radial_102_63" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(259.527 247.808) rotate(0.36307) scale(345.948 325.206)">
|
||||||
|
<stop offset="0.484375" stop-color="white"/>
|
||||||
|
<stop offset="1"/>
|
||||||
|
</radialGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
+14
-3
@@ -5,15 +5,26 @@
|
|||||||
"description": "Generator składów online dla symulatora Train Driver 2",
|
"description": "Generator składów online dla symulatora Train Driver 2",
|
||||||
"icons": [
|
"icons": [
|
||||||
{
|
{
|
||||||
"src": "/android-chrome-192x192.png",
|
"src": "pwa-64x64.png",
|
||||||
|
"sizes": "64x64",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "pwa-192x192.png",
|
||||||
"sizes": "192x192",
|
"sizes": "192x192",
|
||||||
"type": "image/png"
|
"type": "image/png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"src": "/android-chrome-512x512.png",
|
"src": "pwa-512x512.png",
|
||||||
"sizes": "512x512",
|
"sizes": "512x512",
|
||||||
"type": "image/png",
|
"type": "image/png",
|
||||||
"purpose": "any maskable"
|
"purpose": "any"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "maskable-icon-512x512.png",
|
||||||
|
"sizes": "512x512",
|
||||||
|
"type": "image/png",
|
||||||
|
"purpose": "maskable"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"theme_color": "#2c3149",
|
"theme_color": "#2c3149",
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
+14
-4
@@ -5,19 +5,29 @@
|
|||||||
"description": "Generator składów online dla symulatora Train Driver 2",
|
"description": "Generator składów online dla symulatora Train Driver 2",
|
||||||
"icons": [
|
"icons": [
|
||||||
{
|
{
|
||||||
"src": "/android-chrome-192x192.png",
|
"src": "pwa-64x64.png",
|
||||||
|
"sizes": "64x64",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "pwa-192x192.png",
|
||||||
"sizes": "192x192",
|
"sizes": "192x192",
|
||||||
"type": "image/png"
|
"type": "image/png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"src": "/android-chrome-512x512.png",
|
"src": "pwa-512x512.png",
|
||||||
"sizes": "512x512",
|
"sizes": "512x512",
|
||||||
"type": "image/png",
|
"type": "image/png",
|
||||||
"purpose": "any maskable"
|
"purpose": "any"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "maskable-icon-512x512.png",
|
||||||
|
"sizes": "512x512",
|
||||||
|
"type": "image/png",
|
||||||
|
"purpose": "maskable"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"theme_color": "#2c3149",
|
"theme_color": "#2c3149",
|
||||||
"background_color": "#2c3149",
|
"background_color": "#2c3149",
|
||||||
"display": "standalone"
|
"display": "standalone"
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
-30
@@ -18,11 +18,6 @@ export default defineComponent({
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
async created() {
|
async created() {
|
||||||
/* dev info testing */
|
|
||||||
// if (import.meta.env['VITE_STOCK_DEV'] == '1') {
|
|
||||||
// const data = await import('../stockInfoDev.json');
|
|
||||||
// this.store.stockData = data.default as any;
|
|
||||||
// }
|
|
||||||
this.store.fetchStockInfoData();
|
this.store.fetchStockInfoData();
|
||||||
this.store.handleRouting();
|
this.store.handleRouting();
|
||||||
},
|
},
|
||||||
@@ -41,29 +36,4 @@ export default defineComponent({
|
|||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
padding: 1em 0.5em;
|
padding: 1em 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* HEADER SECTION */
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
margin: 0;
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
|
|
||||||
color: $accentColor;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 1.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-bottom {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1.5em;
|
|
||||||
|
|
||||||
color: #d1d1d1;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: $breakpointMd) {
|
|
||||||
#app {
|
|
||||||
font-size: calc(0.7rem + 0.75vw);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@@ -7,9 +7,9 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from "vue";
|
||||||
import { useStore } from '../../store';
|
import { useStore } from "../../store";
|
||||||
import RealStockCard from '../cards/RealStockCard.vue';
|
import RealStockCard from "../cards/RealStockCard.vue";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: { RealStockCard },
|
components: { RealStockCard },
|
||||||
|
|||||||
@@ -3,32 +3,35 @@
|
|||||||
<i18n-t keypath="footer.disclaimer" tag="div" class="text--grayed">
|
<i18n-t keypath="footer.disclaimer" tag="div" class="text--grayed">
|
||||||
<template #tos>
|
<template #tos>
|
||||||
<a style="color: #ccc" :href="$t('footer.tos-href')" target="_blank">
|
<a style="color: #ccc" :href="$t('footer.tos-href')" target="_blank">
|
||||||
{{ $t('footer.tos') }}
|
{{ $t("footer.tos") }}
|
||||||
</a>
|
</a>
|
||||||
</template>
|
</template>
|
||||||
</i18n-t>
|
</i18n-t>
|
||||||
|
|
||||||
<div class="text--grayed" v-if="store.stockData">
|
<div class="text--grayed" v-if="store.stockData">
|
||||||
{{ $t('footer.version-check', { version: store.stockData.version }) }}
|
{{ $t("footer.version-check", { version: store.stockData.version }) }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
©
|
©
|
||||||
<a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
|
<a href="https://td2.info.pl/profile/?u=20777" target="_blank"
|
||||||
{{ new Date().getUTCFullYear() }} | v{{ VERSION }}{{ !isOnProductionHost ? 'dev' : '' }}
|
>Spythere</a
|
||||||
|
>
|
||||||
|
{{ new Date().getUTCFullYear() }} | v{{ VERSION
|
||||||
|
}}{{ !isOnProductionHost ? "dev" : "" }}
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from "vue";
|
||||||
import packageInfo from '../../../package.json';
|
import packageInfo from "../../../package.json";
|
||||||
import { useStore } from '../../store';
|
import { useStore } from "../../store";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
isOnProductionHost: location.hostname == 'pojazdownik-td2.web.app',
|
isOnProductionHost: location.hostname == "pojazdownik-td2.web.app",
|
||||||
VERSION: packageInfo.version,
|
VERSION: packageInfo.version,
|
||||||
store: useStore(),
|
store: useStore(),
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -8,11 +8,11 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from "vue";
|
||||||
import LogoSection from '../sections/LogoSection.vue';
|
import LogoSection from "../sections/LogoSection.vue";
|
||||||
import InputsSection from '../sections/InputsSection.vue';
|
import InputsSection from "../sections/InputsSection.vue";
|
||||||
import TrainImageSection from '../sections/TrainImageSection.vue';
|
import TrainImageSection from "../sections/TrainImageSection.vue";
|
||||||
import StockSection from '../sections/StockSection.vue';
|
import StockSection from "../sections/StockSection.vue";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: { LogoSection, InputsSection, TrainImageSection, StockSection },
|
components: { LogoSection, InputsSection, TrainImageSection, StockSection },
|
||||||
@@ -20,14 +20,14 @@ export default defineComponent({
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '../../styles/global.scss';
|
@import "../../styles/global.scss";
|
||||||
|
|
||||||
main {
|
main {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 1500px;
|
max-width: 1300px;
|
||||||
min-height: 75vh;
|
min-height: 75vh;
|
||||||
|
|
||||||
grid-template-columns: 1fr 2fr;
|
grid-template-columns: 1fr 2fr;
|
||||||
|
|||||||
@@ -1,14 +1,25 @@
|
|||||||
<template>
|
<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="g-card_bg" @click="store.isRealStockListCardOpen = false"></div>
|
||||||
|
|
||||||
<div class="card_content">
|
<div class="card_content">
|
||||||
<div class="card_nav">
|
<div class="card_nav">
|
||||||
<div class="top-pane">
|
<div class="top-pane">
|
||||||
<h1>
|
<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>
|
</h1>
|
||||||
<button class="btn exit-btn" @click="store.isRealStockListCardOpen = false">⨯</button>
|
<button
|
||||||
|
class="btn exit-btn"
|
||||||
|
@click="store.isRealStockListCardOpen = false"
|
||||||
|
>
|
||||||
|
⨯
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="filters" ref="focus" tabindex="0">
|
<div class="filters" ref="focus" tabindex="0">
|
||||||
@@ -19,7 +30,11 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<datalist id="readyStockDataList">
|
<datalist id="readyStockDataList">
|
||||||
<option v-for="stock in store.readyStockList" :value="stock.stockId">
|
<option
|
||||||
|
v-for="stock in store.readyStockList"
|
||||||
|
:value="stock.stockId"
|
||||||
|
:key="stock.name"
|
||||||
|
>
|
||||||
{{ stock.stockId }}
|
{{ stock.stockId }}
|
||||||
</option>
|
</option>
|
||||||
</datalist>
|
</datalist>
|
||||||
@@ -31,12 +46,18 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<datalist id="readyStockStringList">
|
<datalist id="readyStockStringList">
|
||||||
<option v-for="stock in computedAvailableStockTypes" :value="stock">
|
<option
|
||||||
{{ stock }}
|
v-for="stockType in computedAvailableStockTypes"
|
||||||
|
:value="stockType"
|
||||||
|
:key="stockType"
|
||||||
|
>
|
||||||
|
{{ stockType }}
|
||||||
</option>
|
</option>
|
||||||
</datalist>
|
</datalist>
|
||||||
|
|
||||||
<button class="btn" @click="resetStockFilters">{{ $t('realstock.action-reset') }}</button>
|
<button class="btn" @click="resetStockFilters">
|
||||||
|
{{ $t("realstock.action-reset") }}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -46,14 +67,29 @@
|
|||||||
:key="rStock.stockId"
|
:key="rStock.stockId"
|
||||||
:data-last-selected="store.chosenRealStockName === rStock.stockId"
|
:data-last-selected="store.chosenRealStockName === rStock.stockId"
|
||||||
>
|
>
|
||||||
<div class="stock-title" tabindex="0" @click="chooseStock(rStock)" @keydown.enter="chooseStock(rStock)">
|
<div
|
||||||
<img class="stock-icon" :src="getIconURL(rStock.type)" :alt="rStock.type" />
|
class="stock-title"
|
||||||
<b class="text--accent" style="margin-left: 5px"> {{ rStock.name }}</b>
|
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
|
||||||
|
>
|
||||||
<div>{{ rStock.number }}</div>
|
<div>{{ rStock.number }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stock-thumbnails" ref="thumbnailsRef">
|
<div class="stock-thumbnails" ref="thumbnailsRef">
|
||||||
<div class="thumbnail-item" v-for="stockType in rStock.stockString.split(';')">
|
<div
|
||||||
|
class="thumbnail-item"
|
||||||
|
v-for="stockType in rStock.stockString.split(';')"
|
||||||
|
:key="stockType"
|
||||||
|
>
|
||||||
<div class="thumbnail-container">
|
<div class="thumbnail-container">
|
||||||
<div>{{ stockType }}</div>
|
<div>{{ stockType }}</div>
|
||||||
<img
|
<img
|
||||||
@@ -61,7 +97,7 @@
|
|||||||
:title="stockType"
|
:title="stockType"
|
||||||
style="opacity: 0"
|
style="opacity: 0"
|
||||||
@error="(e) => onStockItemError(e, stockType)"
|
@error="(e) => onStockItemError(e, stockType)"
|
||||||
@load="e => (e.target as HTMLElement).style.opacity = '1'"
|
@load="(e) => ((e.target as HTMLElement).style.opacity = '1')"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -75,23 +111,24 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from "vue";
|
||||||
|
|
||||||
import { useStore } from '../../store';
|
import { useStore } from "../../store";
|
||||||
import imageMixin from '../../mixins/imageMixin';
|
import imageMixin from "../../mixins/imageMixin";
|
||||||
import stockMixin from '../../mixins/stockMixin';
|
import stockMixin from "../../mixins/stockMixin";
|
||||||
|
|
||||||
import { IReadyStockItem } from '../../types';
|
import { IReadyStockItem } from "../../types";
|
||||||
|
import http from "../../http";
|
||||||
|
|
||||||
interface ResponseJSONData {
|
interface ResponseJSONData {
|
||||||
[key: string]: string;
|
[key: string]: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
function getVehicleType(stockType: string) {
|
function getVehicleType(stockType: string) {
|
||||||
if (/^E/.test(stockType)) return 'loco-e';
|
if (/^E/.test(stockType)) return "loco-e";
|
||||||
if (/^S/.test(stockType)) return 'loco-s';
|
if (/^S/.test(stockType)) return "loco-s";
|
||||||
|
|
||||||
return 'car-passenger';
|
return "car-passenger";
|
||||||
}
|
}
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
@@ -99,11 +136,15 @@ export default defineComponent({
|
|||||||
|
|
||||||
data: () => ({
|
data: () => ({
|
||||||
store: useStore(),
|
store: useStore(),
|
||||||
responseStatus: 'loading',
|
responseStatus: "loading",
|
||||||
isMobile: 'ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/) ? true : false,
|
isMobile:
|
||||||
|
"ontouchstart" in document.documentElement &&
|
||||||
|
navigator.userAgent.match(/Mobi/)
|
||||||
|
? true
|
||||||
|
: false,
|
||||||
observer: null as IntersectionObserver | null,
|
observer: null as IntersectionObserver | null,
|
||||||
searchedReadyStockName: '',
|
searchedReadyStockName: "",
|
||||||
searchedReadyStockString: '',
|
searchedReadyStockString: "",
|
||||||
visibleIndexesTo: 0,
|
visibleIndexesTo: 0,
|
||||||
lastSelectedStockId: null as string | null,
|
lastSelectedStockId: null as string | null,
|
||||||
scrollTop: 0,
|
scrollTop: 0,
|
||||||
@@ -115,11 +156,11 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
|
|
||||||
activated() {
|
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,
|
top: this.scrollTop,
|
||||||
behavior: 'auto',
|
behavior: "auto",
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -130,8 +171,12 @@ export default defineComponent({
|
|||||||
return this.store.readyStockList
|
return this.store.readyStockList
|
||||||
.filter(
|
.filter(
|
||||||
(rs) =>
|
(rs) =>
|
||||||
rs.stockId.toLocaleLowerCase().includes(this.searchedReadyStockName.toLocaleLowerCase()) &&
|
rs.stockId
|
||||||
rs.stockString.toLocaleLowerCase().includes(this.searchedReadyStockString.toLocaleLowerCase())
|
.toLocaleLowerCase()
|
||||||
|
.includes(this.searchedReadyStockName.toLocaleLowerCase()) &&
|
||||||
|
rs.stockString
|
||||||
|
.toLocaleLowerCase()
|
||||||
|
.includes(this.searchedReadyStockString.toLocaleLowerCase()),
|
||||||
)
|
)
|
||||||
.filter((_, i) => i <= this.visibleIndexesTo);
|
.filter((_, i) => i <= this.visibleIndexesTo);
|
||||||
},
|
},
|
||||||
@@ -139,7 +184,7 @@ export default defineComponent({
|
|||||||
computedAvailableStockTypes() {
|
computedAvailableStockTypes() {
|
||||||
return this.store.readyStockList
|
return this.store.readyStockList
|
||||||
.reduce((acc, rs) => {
|
.reduce((acc, rs) => {
|
||||||
rs.stockString.split(';').forEach((s) => {
|
rs.stockString.split(";").forEach((s) => {
|
||||||
if (!acc.includes(s)) acc.push(s);
|
if (!acc.includes(s)) acc.push(s);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -153,7 +198,7 @@ export default defineComponent({
|
|||||||
computedReadyStockList(curr, prev) {
|
computedReadyStockList(curr, prev) {
|
||||||
if (curr.length < prev.length) {
|
if (curr.length < prev.length) {
|
||||||
this.visibleIndexesTo = 20;
|
this.visibleIndexesTo = 20;
|
||||||
(this.$refs['list'] as HTMLElement).scrollTo({
|
(this.$refs["list"] as HTMLElement).scrollTo({
|
||||||
top: 0,
|
top: 0,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -162,21 +207,21 @@ export default defineComponent({
|
|||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
async fetchStockListData() {
|
async fetchStockListData() {
|
||||||
const readyStockJSONData: ResponseJSONData = await (
|
const readyStockJSONData = (
|
||||||
await fetch(`https://spythere.github.io/api/td2/data/readyStock.json?t=${Math.floor(Date.now() / 60000)}`)
|
await http.get<ResponseJSONData>("td2/data/readyStock.json")
|
||||||
).json();
|
).data;
|
||||||
|
|
||||||
if (!readyStockJSONData) {
|
if (!readyStockJSONData) {
|
||||||
this.responseStatus = 'error';
|
this.responseStatus = "error";
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
for (let stockKey in readyStockJSONData) {
|
for (let stockKey in readyStockJSONData) {
|
||||||
const [type, number, ...name] = stockKey.split(' ');
|
const [type, number, ...name] = stockKey.split(" ");
|
||||||
|
|
||||||
const obj = {
|
const obj = {
|
||||||
number: number.replace(/_/g, '/'),
|
number: number.replace(/_/g, "/"),
|
||||||
name: name.join(' '),
|
name: name.join(" "),
|
||||||
stockString: readyStockJSONData[stockKey],
|
stockString: readyStockJSONData[stockKey],
|
||||||
type,
|
type,
|
||||||
};
|
};
|
||||||
@@ -187,7 +232,7 @@ export default defineComponent({
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
this.responseStatus = 'loaded';
|
this.responseStatus = "loaded";
|
||||||
},
|
},
|
||||||
|
|
||||||
mountObserver() {
|
mountObserver() {
|
||||||
@@ -195,7 +240,7 @@ export default defineComponent({
|
|||||||
if (entries[0].intersectionRatio > 0) this.visibleIndexesTo += 20;
|
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) {
|
getImageUrl(name: string) {
|
||||||
@@ -203,8 +248,8 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
|
|
||||||
resetStockFilters() {
|
resetStockFilters() {
|
||||||
this.searchedReadyStockName = '';
|
this.searchedReadyStockName = "";
|
||||||
this.searchedReadyStockString = '';
|
this.searchedReadyStockString = "";
|
||||||
},
|
},
|
||||||
|
|
||||||
chooseStock(stockItem: IReadyStockItem) {
|
chooseStock(stockItem: IReadyStockItem) {
|
||||||
@@ -216,7 +261,7 @@ export default defineComponent({
|
|||||||
onStockItemError(e: Event, stockType: string) {
|
onStockItemError(e: Event, stockType: string) {
|
||||||
const imageEl = e.target as HTMLImageElement;
|
const imageEl = e.target as HTMLImageElement;
|
||||||
imageEl.src = `images/${getVehicleType(stockType)}-unknown.png`;
|
imageEl.src = `images/${getVehicleType(stockType)}-unknown.png`;
|
||||||
imageEl.style.opacity = '1';
|
imageEl.style.opacity = "1";
|
||||||
},
|
},
|
||||||
|
|
||||||
onListScroll(e: Event) {
|
onListScroll(e: Event) {
|
||||||
@@ -230,7 +275,7 @@ export default defineComponent({
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '../../styles/global.scss';
|
@import "../../styles/global.scss";
|
||||||
|
|
||||||
.exit-btn {
|
.exit-btn {
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
@@ -316,7 +361,7 @@ ul {
|
|||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
padding: 0.1em;
|
padding: 0.1em;
|
||||||
|
|
||||||
&[data-last-selected='true'] .stock-title {
|
&[data-last-selected="true"] .stock-title {
|
||||||
border: 1px solid $accentColor;
|
border: 1px solid $accentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -378,4 +423,3 @@ ul {
|
|||||||
padding: 1em;
|
padding: 1em;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@@ -7,6 +7,7 @@
|
|||||||
<div class="vehicle-types locos">
|
<div class="vehicle-types locos">
|
||||||
<button
|
<button
|
||||||
v-for="locoType in locomotiveTypeList"
|
v-for="locoType in locomotiveTypeList"
|
||||||
|
:key="locoType.id"
|
||||||
class="btn btn--choice"
|
class="btn btn--choice"
|
||||||
:data-selected="locoType.id == store.chosenLocoPower"
|
:data-selected="locoType.id == store.chosenLocoPower"
|
||||||
@click="selectLocoType(locoType.id)"
|
@click="selectLocoType(locoType.id)"
|
||||||
@@ -23,10 +24,10 @@
|
|||||||
@keydown.enter.prevent="addOrSwitchVehicle"
|
@keydown.enter.prevent="addOrSwitchVehicle"
|
||||||
@keydown.backspace="removeVehicle"
|
@keydown.backspace="removeVehicle"
|
||||||
>
|
>
|
||||||
<option :value="null" disabled>{{ $t('inputs.input-vehicle') }}</option>
|
<option :value="null" disabled>
|
||||||
<option v-for="loco in locoOptions" :value="loco" :key="loco.type">
|
{{ $t('inputs.input-vehicle') }}
|
||||||
{{ loco.type }}<b v-if="loco.supportersOnly">*</b>
|
|
||||||
</option>
|
</option>
|
||||||
|
<option v-for="loco in locoOptions" :value="loco" :key="loco.type">{{ loco.type }}<b v-if="loco.isSponsorsOnly">*</b></option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -34,6 +35,7 @@
|
|||||||
<div class="vehicle-types carwagons">
|
<div class="vehicle-types carwagons">
|
||||||
<button
|
<button
|
||||||
v-for="carType in carTypeList"
|
v-for="carType in carTypeList"
|
||||||
|
:key="carType.id"
|
||||||
class="btn btn--choice"
|
class="btn btn--choice"
|
||||||
:data-selected="carType.id == store.chosenCarUseType"
|
:data-selected="carType.id == store.chosenCarUseType"
|
||||||
@click="selectCarWagonType(carType.id)"
|
@click="selectCarWagonType(carType.id)"
|
||||||
@@ -50,11 +52,11 @@
|
|||||||
@keydown.enter.prevent="addOrSwitchVehicle"
|
@keydown.enter.prevent="addOrSwitchVehicle"
|
||||||
@keydown.backspace="removeVehicle"
|
@keydown.backspace="removeVehicle"
|
||||||
>
|
>
|
||||||
<option :value="null" disabled>{{ $t('inputs.input-carwagon') }}</option>
|
<option :value="null" disabled>
|
||||||
|
{{ $t('inputs.input-carwagon') }}
|
||||||
<option v-for="car in carOptions" :value="car" :key="car.type">
|
|
||||||
{{ car.type }}<b v-if="car.supportersOnly">*</b>
|
|
||||||
</option>
|
</option>
|
||||||
|
|
||||||
|
<option v-for="car in carOptions" :value="car" :key="car.type">{{ car.type }}<b v-if="car.isSponsorsOnly">*</b></option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -63,9 +65,7 @@
|
|||||||
<select
|
<select
|
||||||
id="cargo-select"
|
id="cargo-select"
|
||||||
:disabled="
|
:disabled="
|
||||||
(store.chosenCar && !store.chosenCar.loadable) ||
|
(store.chosenCar && !store.chosenCar.loadable) || (store.chosenCar && store.chosenCar.useType == 'car-passenger') || !store.chosenCar
|
||||||
(store.chosenCar && store.chosenCar.useType == 'car-passenger') ||
|
|
||||||
!store.chosenCar
|
|
||||||
"
|
"
|
||||||
data-select="cargo"
|
data-select="cargo"
|
||||||
data-ignore-outside="1"
|
data-ignore-outside="1"
|
||||||
@@ -90,12 +90,7 @@
|
|||||||
<button class="btn" @click="addVehicle(store.chosenVehicle, store.chosenCargo)">
|
<button class="btn" @click="addVehicle(store.chosenVehicle, store.chosenCargo)">
|
||||||
{{ $t('inputs.action-add') }}
|
{{ $t('inputs.action-add') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button class="btn" @click="switchVehicles" :disabled="store.chosenStockListIndex == -1" :data-disabled="store.chosenStockListIndex == -1">
|
||||||
class="btn"
|
|
||||||
@click="switchVehicles"
|
|
||||||
:disabled="store.chosenStockListIndex == -1"
|
|
||||||
:data-disabled="store.chosenStockListIndex == -1"
|
|
||||||
>
|
|
||||||
{{ $t('inputs.action-swap') }}
|
{{ $t('inputs.action-swap') }}
|
||||||
<b class="text--accent">
|
<b class="text--accent">
|
||||||
{{ store.chosenStockListIndex == -1 ? '' : `${store.chosenStockListIndex + 1}.` }}
|
{{ store.chosenStockListIndex == -1 ? '' : `${store.chosenStockListIndex + 1}.` }}
|
||||||
@@ -122,6 +117,7 @@ export default defineComponent({
|
|||||||
mixins: [imageMixin, stockPreviewMixin, stockMixin],
|
mixins: [imageMixin, stockPreviewMixin, stockMixin],
|
||||||
|
|
||||||
data: () => ({
|
data: () => ({
|
||||||
|
store: useStore(),
|
||||||
locomotiveTypeList: [
|
locomotiveTypeList: [
|
||||||
{
|
{
|
||||||
id: 'loco-e',
|
id: 'loco-e',
|
||||||
@@ -153,12 +149,20 @@ export default defineComponent({
|
|||||||
],
|
],
|
||||||
}),
|
}),
|
||||||
|
|
||||||
setup() {
|
computed: {
|
||||||
const store = useStore();
|
locoOptions() {
|
||||||
|
return this.store.locoDataList
|
||||||
|
.slice()
|
||||||
|
.sort((a, b) => (a.type > b.type ? 1 : -1))
|
||||||
|
.filter((loco) => loco.power == this.store.chosenLocoPower);
|
||||||
|
},
|
||||||
|
|
||||||
return {
|
carOptions() {
|
||||||
store,
|
return this.store.carDataList
|
||||||
};
|
.slice()
|
||||||
|
.sort((a, b) => (a.type > b.type ? 1 : -1))
|
||||||
|
.filter((car) => car.useType == this.store.chosenCarUseType);
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
@@ -192,6 +196,29 @@ export default defineComponent({
|
|||||||
const stockObject = this.getStockObject(vehicle, this.store.chosenCargo);
|
const stockObject = this.getStockObject(vehicle, this.store.chosenCargo);
|
||||||
this.store.stockList[this.store.chosenStockListIndex] = stockObject;
|
this.store.stockList[this.store.chosenStockListIndex] = stockObject;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
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;
|
||||||
|
});
|
||||||
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
@@ -207,6 +234,11 @@ export default defineComponent({
|
|||||||
grid-column: 1;
|
grid-column: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.input_container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 380px;
|
||||||
|
}
|
||||||
|
|
||||||
.input_header {
|
.input_header {
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
@@ -226,6 +258,10 @@ button.btn--choice {
|
|||||||
.input_list {
|
.input_list {
|
||||||
margin: 0.5em 0;
|
margin: 0.5em 0;
|
||||||
|
|
||||||
|
select {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
@@ -267,4 +303,3 @@ button.btn--choice {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@@ -1,11 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<section class="logo-section">
|
<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">
|
<div class="actions">
|
||||||
<button
|
<button
|
||||||
class="btn btn--text"
|
|
||||||
v-for="action in localeActions"
|
v-for="action in localeActions"
|
||||||
|
:key="action.name"
|
||||||
|
class="btn btn--text"
|
||||||
:data-selected="$i18n.locale == action.locale"
|
:data-selected="$i18n.locale == action.locale"
|
||||||
@click="chooseLocale(action.locale)"
|
@click="chooseLocale(action.locale)"
|
||||||
>
|
>
|
||||||
@@ -21,31 +26,31 @@ export default {
|
|||||||
return {
|
return {
|
||||||
localeActions: [
|
localeActions: [
|
||||||
{
|
{
|
||||||
name: 'POLSKI',
|
name: "POLSKI",
|
||||||
locale: 'pl',
|
locale: "pl",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'ENGLISH',
|
name: "ENGLISH",
|
||||||
locale: 'en',
|
locale: "en",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
navigate() {
|
navigate() {
|
||||||
window.location.pathname = '';
|
window.location.pathname = "";
|
||||||
},
|
},
|
||||||
|
|
||||||
chooseLocale(locale: string) {
|
chooseLocale(locale: string) {
|
||||||
this.$i18n.locale = locale;
|
this.$i18n.locale = locale;
|
||||||
window.localStorage.setItem('locale', locale);
|
window.localStorage.setItem("locale", locale);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '../../styles/global.scss';
|
@import "../../styles/global.scss";
|
||||||
|
|
||||||
.logo-section {
|
.logo-section {
|
||||||
grid-row: 1;
|
grid-row: 1;
|
||||||
@@ -64,7 +69,7 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
gap: 0.5em;
|
gap: 0.5em;
|
||||||
|
|
||||||
button[data-selected='true'] {
|
button[data-selected="true"] {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $accentColor;
|
color: $accentColor;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
@@ -76,4 +81,3 @@ img {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@@ -2,9 +2,10 @@
|
|||||||
<section class="stock-section">
|
<section class="stock-section">
|
||||||
<div class="section_modes">
|
<div class="section_modes">
|
||||||
<button
|
<button
|
||||||
|
v-for="(id, i) in sectionModes"
|
||||||
|
:key="id"
|
||||||
class="btn"
|
class="btn"
|
||||||
ref="sectionButtonRefs"
|
ref="sectionButtonRefs"
|
||||||
v-for="(id, i) in sectionModes"
|
|
||||||
@click="chooseSection(id)"
|
@click="chooseSection(id)"
|
||||||
:data-selected="store.stockSectionMode == id"
|
:data-selected="store.stockSectionMode == id"
|
||||||
>
|
>
|
||||||
@@ -15,14 +16,14 @@
|
|||||||
|
|
||||||
<transition name="tab-change" mode="out-in">
|
<transition name="tab-change" mode="out-in">
|
||||||
<keep-alive>
|
<keep-alive>
|
||||||
<component :is="chosenSectionComponent" :key="chosenSectionComponent"></component>
|
<component :is="chosenSectionComponent"></component>
|
||||||
</keep-alive>
|
</keep-alive>
|
||||||
</transition>
|
</transition>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { computed, KeepAlive, onMounted, ref } from 'vue';
|
import { computed, onMounted, ref } from 'vue';
|
||||||
import { useStore } from '../../store';
|
import { useStore } from '../../store';
|
||||||
import StockListTab from '../tabs/StockListTab.vue';
|
import StockListTab from '../tabs/StockListTab.vue';
|
||||||
import StockGeneratorTab from '../tabs/StockGeneratorTab.vue';
|
import StockGeneratorTab from '../tabs/StockGeneratorTab.vue';
|
||||||
@@ -134,4 +135,3 @@ function chooseSection(sectionId: SectionMode) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@@ -1,58 +1,44 @@
|
|||||||
<template>
|
<template>
|
||||||
<section class="train-image-section">
|
<section class="train-image-section">
|
||||||
<div class="train-image__wrapper">
|
<div class="train-image__content" :class="{ sponsor: store.chosenVehicle?.isSponsorsOnly }">
|
||||||
<div class="train-image__content" :class="{ supporter: store.chosenVehicle?.supportersOnly }">
|
|
||||||
<transition name="img-message-anim">
|
|
||||||
<div class="empty-message" v-if="store.imageLoading && store.chosenVehicle?.imageSrc">
|
|
||||||
{{ $t('preview.loading') }}
|
|
||||||
</div>
|
|
||||||
</transition>
|
|
||||||
|
|
||||||
<div class="no-img" v-if="!store.chosenVehicle">{{ $t('preview.title') }}</div>
|
|
||||||
|
|
||||||
<img
|
<img
|
||||||
v-if="store.chosenVehicle"
|
tabindex="0"
|
||||||
:src="`https://spythere.github.io/api/td2/images/${store.chosenVehicle.type}--300px.jpg`"
|
:src="store.chosenVehicle ? getThumbnailURL(store.chosenVehicle.type, 'small') : '/images/placeholder.jpg'"
|
||||||
:alt="store.chosenVehicle.type"
|
|
||||||
@load="onImageLoad"
|
|
||||||
@click="onImageClick"
|
@click="onImageClick"
|
||||||
|
@keydown.enter="onImageClick"
|
||||||
|
@error="onImageError"
|
||||||
|
type="image/jpeg"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- <div class="empty-message" v-if="store.chosenVehicle && !store.chosenVehicle.imageSrc">Ten pojazd nie ma jeszcze podglądu!</div> -->
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="train-image__info" v-if="store.chosenVehicle">
|
<div class="train-image__info" v-if="store.chosenVehicle">
|
||||||
<b class="text--accent">{{ store.chosenVehicle.type }}</b> •
|
<b class="text--accent">{{ store.chosenVehicle.type }}</b> •
|
||||||
<b style="color: #ccc">
|
<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>
|
</b>
|
||||||
|
|
||||||
<div style="color: #ccc">
|
<div style="color: #ccc">
|
||||||
<div>
|
<div>{{ store.chosenVehicle.length }}m | {{ store.chosenVehicle.mass }}t | {{ store.chosenVehicle.maxSpeed }} km/h</div>
|
||||||
{{ store.chosenVehicle.length }}m | {{ store.chosenVehicle.mass }}t |
|
|
||||||
{{ store.chosenVehicle.maxSpeed }} km/h
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="isLocomotive(store.chosenVehicle)">
|
<div v-if="isLocomotive(store.chosenVehicle)">{{ $t('preview.cabin') }} {{ store.chosenVehicle.cabinType }}</div>
|
||||||
{{ $t('preview.cabin') }} {{ store.chosenVehicle.cabinType }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-else>
|
<div v-else>
|
||||||
{{
|
{{
|
||||||
store.chosenVehicle.useType == 'car-cargo' // ? store.stockData?.usage[store.chosenVehicle.constructionType]
|
store.chosenVehicle.useType == 'car-cargo'
|
||||||
? $t(`usage.${store.chosenVehicle.constructionType}`)
|
? $t(`usage.${store.chosenVehicle.constructionType}`)
|
||||||
: `${$t('preview.construction')} ${store.chosenVehicle.constructionType}`
|
: `${$t('preview.construction')} ${store.chosenVehicle.constructionType}`
|
||||||
}}
|
}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<b style="color: salmon" v-if="store.chosenVehicle.supportersOnly">{{ $t('preview.sponsor-only') }}</b>
|
<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'),
|
||||||
|
])
|
||||||
|
}}</b>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="train-image__info" v-else>{{ $t('preview.desc') }}</div>
|
<div class="train-image__info" v-else>{{ $t('preview.desc') }}</div>
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -61,8 +47,17 @@ import { computed, defineComponent } from 'vue';
|
|||||||
import { useStore } from '../../store';
|
import { useStore } from '../../store';
|
||||||
import { isLocomotive } from '../../utils/vehicleUtils';
|
import { isLocomotive } from '../../utils/vehicleUtils';
|
||||||
import { ILocomotive, Vehicle } from '../../types';
|
import { ILocomotive, Vehicle } from '../../types';
|
||||||
|
import imageMixin from '../../mixins/imageMixin';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
|
mixins: [imageMixin],
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
noImageAvailable: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
setup() {
|
setup() {
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
|
|
||||||
@@ -85,16 +80,26 @@ export default defineComponent({
|
|||||||
this.store.imageLoading = false;
|
this.store.imageLoading = false;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
onImageError(e: Event) {
|
||||||
|
const el = e.target as HTMLImageElement;
|
||||||
|
if (el.src == '/images/placeholder.jpg') return;
|
||||||
|
|
||||||
|
el.src = '/images/placeholder.jpg';
|
||||||
|
},
|
||||||
|
|
||||||
isLocomotive(vehicle: Vehicle): vehicle is ILocomotive {
|
isLocomotive(vehicle: Vehicle): vehicle is ILocomotive {
|
||||||
return isLocomotive(vehicle);
|
return isLocomotive(vehicle);
|
||||||
},
|
},
|
||||||
|
|
||||||
onImageClick() {
|
onImageClick(e: Event) {
|
||||||
|
const target = e.target as HTMLElement;
|
||||||
|
|
||||||
const chosenVehicle = this.store.chosenVehicle;
|
const chosenVehicle = this.store.chosenVehicle;
|
||||||
|
|
||||||
if (!chosenVehicle) return;
|
if (!chosenVehicle) return;
|
||||||
|
|
||||||
this.store.vehiclePreviewSrc = `https://spythere.github.io/api/td2/images/${chosenVehicle.type}--800px.jpg`;
|
this.store.lastFocusedElement = target;
|
||||||
|
this.store.vehiclePreviewSrc = this.getThumbnailURL(chosenVehicle.type, 'large');
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@@ -104,66 +109,45 @@ export default defineComponent({
|
|||||||
@import '../../styles/global.scss';
|
@import '../../styles/global.scss';
|
||||||
|
|
||||||
.train-image-section {
|
.train-image-section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
grid-row: 3;
|
grid-row: 3;
|
||||||
grid-column: 1;
|
grid-column: 1;
|
||||||
|
|
||||||
margin-top: 2em;
|
margin-top: 1em;
|
||||||
height: 22em;
|
height: 22em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.train-image {
|
.train-image {
|
||||||
&__wrapper {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__content {
|
&__content {
|
||||||
border: 1px solid white;
|
&.sponsor img {
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
max-width: 22em;
|
|
||||||
height: 13em;
|
|
||||||
margin: 0 auto;
|
|
||||||
|
|
||||||
&.supporter {
|
|
||||||
border: 1px solid salmon;
|
border: 1px solid salmon;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
|
max-width: 380px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
border: 1px solid white;
|
||||||
|
|
||||||
cursor: zoom-in;
|
cursor: zoom-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty-message,
|
|
||||||
.no-img {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
|
|
||||||
padding: 0.3em 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-message {
|
|
||||||
background: rgba(#000, 0.75);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.train-image__info {
|
.train-image__info {
|
||||||
margin: 1em 0;
|
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
padding: 0 1em;
|
padding: 0.5em;
|
||||||
|
margin: 0.5em auto;
|
||||||
|
line-height: 1.35;
|
||||||
|
|
||||||
b {
|
width: 100%;
|
||||||
font-size: 1.1em;
|
max-width: 380px;
|
||||||
}
|
|
||||||
|
|
||||||
div {
|
background-color: $secondaryColor;
|
||||||
margin: 0.25em 0;
|
font-weight: bold;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Transition animations
|
// Transition animations
|
||||||
@@ -185,4 +169,3 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@@ -1,34 +1,55 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="number-generator tab">
|
<div class="number-generator tab">
|
||||||
<div class="tab_header">
|
<div class="tab_header">
|
||||||
<h2>{{ $t('numgen.title') }}</h2>
|
<h2>{{ $t("numgen.title") }}</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="tab_content">
|
<div class="tab_content">
|
||||||
<div class="options">
|
<div class="options">
|
||||||
<select v-model="chosenCategory" @change="randomizeTrainNumber()">
|
<select v-model="chosenCategory" @change="randomizeTrainNumber()">
|
||||||
<option :value="null" disabled>{{ $t('numgen.train-category') }}</option>
|
<option :value="null" disabled>
|
||||||
<option v-for="(_, category) in genData.categories" :value="category">
|
{{ $t("numgen.train-category") }}
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
v-for="(_, category) in genData.categories"
|
||||||
|
:key="category"
|
||||||
|
:value="category"
|
||||||
|
>
|
||||||
{{ $t(`numgen.categories.${category}`) }}
|
{{ $t(`numgen.categories.${category}`) }}
|
||||||
</option>
|
</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<select v-model="beginRegionName" @change="randomizeTrainNumber()">
|
<select v-model="beginRegionName" @change="randomizeTrainNumber()">
|
||||||
<option :value="null" disabled>{{ $t('numgen.start-region') }}</option>
|
<option :value="null" disabled>
|
||||||
<option v-for="(_, name) in genData.regionNumbers" :value="name">{{ name }}</option>
|
{{ $t("numgen.start-region") }}
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
v-for="(_, name) in genData.regionNumbers"
|
||||||
|
:key="name"
|
||||||
|
:value="name"
|
||||||
|
>
|
||||||
|
{{ name }}
|
||||||
|
</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<select v-model="endRegionName" @change="randomizeTrainNumber()">
|
<select v-model="endRegionName" @change="randomizeTrainNumber()">
|
||||||
<option :value="null" disabled>{{ $t('numgen.end-region') }}</option>
|
<option :value="null" disabled>{{ $t("numgen.end-region") }}</option>
|
||||||
<option v-for="(_, name) in genData.regionNumbers" :value="name">{{ name }}</option>
|
<option
|
||||||
|
v-for="(_, name) in genData.regionNumbers"
|
||||||
|
:key="name"
|
||||||
|
:value="name"
|
||||||
|
>
|
||||||
|
{{ name }}
|
||||||
|
</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="generated-number" @click="copyNumber">
|
<div class="generated-number" @click="copyNumber">
|
||||||
<span v-if="trainNumber">
|
<span v-if="trainNumber">
|
||||||
{{ $t('numgen.number-info') }} <b class="text--accent">{{ trainNumber }}</b>
|
{{ $t("numgen.number-info") }}
|
||||||
|
<b class="text--accent">{{ trainNumber }}</b>
|
||||||
</span>
|
</span>
|
||||||
<span v-else>{{ $t('numgen.warning') }}</span>
|
<span v-else>{{ $t("numgen.warning") }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- <div v-if="chosenCategory">
|
<!-- <div v-if="chosenCategory">
|
||||||
@@ -50,25 +71,29 @@
|
|||||||
|
|
||||||
<div class="tab_links">
|
<div class="tab_links">
|
||||||
<a :href="$t('numgen.td2-wiki-link')" target="_blank">
|
<a :href="$t('numgen.td2-wiki-link')" target="_blank">
|
||||||
{{ $t('numgen.td2-wiki') }}
|
{{ $t("numgen.td2-wiki") }}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<div class="tab_actions">
|
<div class="tab_actions">
|
||||||
<button class="btn" @click="randomizeTrainNumber(true)">{{ $t('numgen.action-random-region') }}</button>
|
<button class="btn" @click="randomizeTrainNumber(true)">
|
||||||
<button class="btn" @click="randomizeTrainNumber(false)">{{ $t('numgen.action-random-number') }}</button>
|
{{ $t("numgen.action-random-region") }}
|
||||||
|
</button>
|
||||||
|
<button class="btn" @click="randomizeTrainNumber(false)">
|
||||||
|
{{ $t("numgen.action-random-number") }}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Ref, ref } from 'vue';
|
import { Ref, ref } from "vue";
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from "vue-i18n";
|
||||||
|
|
||||||
import genData from '../../constants/numberGeneratorData.json';
|
import genData from "../../constants/numberGeneratorData.json";
|
||||||
|
|
||||||
const i18n = useI18n();
|
const i18n = useI18n();
|
||||||
type RegionName = keyof typeof genData.regionNumbers;
|
type RegionName = keyof typeof genData.regionNumbers;
|
||||||
@@ -83,7 +108,7 @@ const trainNumber = ref(null) as Ref<string | null>;
|
|||||||
const copyNumber = () => {
|
const copyNumber = () => {
|
||||||
if (trainNumber.value) {
|
if (trainNumber.value) {
|
||||||
navigator.clipboard.writeText(trainNumber.value);
|
navigator.clipboard.writeText(trainNumber.value);
|
||||||
alert(i18n.t('numgen.alert'));
|
alert(i18n.t("numgen.alert"));
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -93,16 +118,21 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
|
|||||||
const regionKeys = Object.keys(genData.regionNumbers);
|
const regionKeys = Object.keys(genData.regionNumbers);
|
||||||
|
|
||||||
if (beginRegionName.value == null || randomizeRegions)
|
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)
|
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 = "";
|
||||||
|
|
||||||
if (beginRegionName.value == endRegionName.value) {
|
if (beginRegionName.value == endRegionName.value) {
|
||||||
const sameRegionsNumbers = genData.sameRegions[beginRegionName.value!];
|
const sameRegionsNumbers = genData.sameRegions[beginRegionName.value!];
|
||||||
const randRegionNumber = sameRegionsNumbers[Math.floor(Math.random() * sameRegionsNumbers.length)];
|
const randRegionNumber =
|
||||||
|
sameRegionsNumbers[Math.floor(Math.random() * sameRegionsNumbers.length)];
|
||||||
number += randRegionNumber.toString();
|
number += randRegionNumber.toString();
|
||||||
} else {
|
} else {
|
||||||
const beginRegionNumber = genData.regionNumbers[beginRegionName.value!];
|
const beginRegionNumber = genData.regionNumbers[beginRegionName.value!];
|
||||||
@@ -117,23 +147,30 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (chosenCategory.value == null) chosenCategory.value = 'EI';
|
if (chosenCategory.value == null) chosenCategory.value = "EI";
|
||||||
|
|
||||||
const rulesArray = genData.categories[chosenCategory.value].split(';').map((r) => ({
|
const rulesArray = genData.categories[chosenCategory.value]
|
||||||
index: r.split(':')[0],
|
.split(";")
|
||||||
rule: r.split(':')[1],
|
.map((r) => ({
|
||||||
nums: Number(r.split(':')[2] || '1'),
|
index: r.split(":")[0],
|
||||||
|
rule: r.split(":")[1],
|
||||||
|
nums: Number(r.split(":")[2] || "1"),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
rulesArray.forEach((r) => {
|
rulesArray.forEach((r) => {
|
||||||
const range = r.rule.split('-');
|
const range = r.rule.split("-");
|
||||||
|
|
||||||
if (range.length == 1) number += r.rule;
|
if (range.length == 1) number += r.rule;
|
||||||
else {
|
else {
|
||||||
const [minRange, maxRange] = range;
|
const [minRange, maxRange] = range;
|
||||||
const randRange = Math.floor(Math.random() * (Number(maxRange) - Number(minRange)) + Number(minRange)).toString();
|
const randRange = Math.floor(
|
||||||
|
Math.random() * (Number(maxRange) - Number(minRange)) +
|
||||||
|
Number(minRange),
|
||||||
|
).toString();
|
||||||
|
|
||||||
number += new Array(Math.abs(randRange.length - r.nums)).fill('0').join('') + randRange;
|
number +=
|
||||||
|
new Array(Math.abs(randRange.length - r.nums)).fill("0").join("") +
|
||||||
|
randRange;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -142,8 +179,8 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '../../styles/tab.scss';
|
@import "../../styles/tab.scss";
|
||||||
@import '../../styles/global.scss';
|
@import "../../styles/global.scss";
|
||||||
|
|
||||||
.options {
|
.options {
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -189,4 +226,3 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@@ -37,9 +37,10 @@
|
|||||||
|
|
||||||
<div class="generator_cargo">
|
<div class="generator_cargo">
|
||||||
<button
|
<button
|
||||||
|
v-for="(cargoArray, cargoName) in store.stockData?.generator.cargo"
|
||||||
|
:key="cargoName"
|
||||||
class="btn"
|
class="btn"
|
||||||
:data-chosen="chosenCargoTypes.includes(cargoName.toString())"
|
:data-chosen="chosenCargoTypes.includes(cargoName.toString())"
|
||||||
v-for="(cargoArray, cargoName) in store.stockData?.generator.cargo"
|
|
||||||
@click="toggleCargoChosen(cargoName.toString(), cargoArray)"
|
@click="toggleCargoChosen(cargoName.toString(), cargoArray)"
|
||||||
>
|
>
|
||||||
{{ $t(`cargo.${cargoName}`) }}
|
{{ $t(`cargo.${cargoName}`) }}
|
||||||
@@ -126,7 +127,7 @@ export default defineComponent({
|
|||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
computedChosenCarTypes() {
|
computedChosenCarTypes() {
|
||||||
return new Set<string>(this.chosenCarTypes.sort((c1, c2) => (c1 > c2 ? 1 : -1)));
|
return new Set<string>(this.chosenCarTypes.slice().sort((c1, c2) => (c1 > c2 ? 1 : -1)));
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -150,7 +151,8 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
|
|
||||||
generateStock(empty = false) {
|
generateStock(empty = false) {
|
||||||
const generatedChosenStockList = this.chosenCargoTypes.reduce((acc, type) => {
|
const generatedChosenStockList = this.chosenCargoTypes.reduce(
|
||||||
|
(acc, type) => {
|
||||||
this.store.stockData?.generator.cargo[type]
|
this.store.stockData?.generator.cargo[type]
|
||||||
.filter((c) => !this.excludedCarTypes.includes(c.split(':')[0]))
|
.filter((c) => !this.excludedCarTypes.includes(c.split(':')[0]))
|
||||||
.forEach((c) => {
|
.forEach((c) => {
|
||||||
@@ -160,7 +162,7 @@ export default defineComponent({
|
|||||||
const cargoObjs = [] as (ICargo | undefined)[];
|
const cargoObjs = [] as (ICargo | undefined)[];
|
||||||
|
|
||||||
if (!cargoType || empty) cargoObjs.push(undefined);
|
if (!cargoType || empty) cargoObjs.push(undefined);
|
||||||
else if (cargoType == 'all') cargoObjs.push(...carWagonObjs[0]?.cargoList);
|
else if (cargoType == 'all') cargoObjs.push(...carWagonObjs[0]!.cargoList);
|
||||||
else cargoObjs.push(carWagonObjs[0]?.cargoList.find((cargo) => cargo.id == cargoType));
|
else cargoObjs.push(carWagonObjs[0]?.cargoList.find((cargo) => cargo.id == cargoType));
|
||||||
|
|
||||||
carWagonObjs.forEach((cw) => {
|
carWagonObjs.forEach((cw) => {
|
||||||
@@ -178,16 +180,23 @@ export default defineComponent({
|
|||||||
});
|
});
|
||||||
|
|
||||||
return acc;
|
return acc;
|
||||||
}, [] as { constructionType: string; carPool: { carWagon: ICarWagon; cargo?: ICargo }[] }[]);
|
},
|
||||||
|
[] as {
|
||||||
|
constructionType: string;
|
||||||
|
carPool: { carWagon: ICarWagon; cargo?: ICargo }[];
|
||||||
|
}[]
|
||||||
|
);
|
||||||
|
|
||||||
let bestGeneration: { stockList: IStock[]; value: number } = { stockList: [], value: 0 };
|
let bestGeneration: { stockList: IStock[]; value: number } = {
|
||||||
|
stockList: [],
|
||||||
|
value: 0,
|
||||||
|
};
|
||||||
|
|
||||||
for (let i = 0; i < 10; i++) {
|
for (let i = 0; i < 10; i++) {
|
||||||
const headingLoco = this.store.stockList[0]?.isLoco ? this.store.stockList[0] : undefined;
|
const headingLoco = this.store.stockList[0]?.isLoco ? this.store.stockList[0] : undefined;
|
||||||
this.store.stockList.length = headingLoco ? 1 : 0;
|
this.store.stockList.length = headingLoco ? 1 : 0;
|
||||||
|
|
||||||
const maxMass =
|
const maxMass = this.store.acceptableMass > 0 ? Math.min(this.store.acceptableMass, this.maxMass) : this.maxMass;
|
||||||
this.store.acceptableMass > 0 ? Math.min(this.store.acceptableMass, this.maxMass) : this.maxMass;
|
|
||||||
|
|
||||||
let exceeded = false;
|
let exceeded = false;
|
||||||
|
|
||||||
@@ -277,13 +286,6 @@ export default defineComponent({
|
|||||||
|
|
||||||
background-color: $secondaryColor;
|
background-color: $secondaryColor;
|
||||||
|
|
||||||
&[data-chosen='true'] {
|
|
||||||
background-color: $accentColor;
|
|
||||||
color: black;
|
|
||||||
|
|
||||||
box-shadow: 0 0 5px 1px $accentColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[data-excluded='true'] {
|
&[data-excluded='true'] {
|
||||||
background-color: gray;
|
background-color: gray;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
@@ -316,4 +318,3 @@ export default defineComponent({
|
|||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@@ -5,14 +5,11 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stock_actions">
|
<div class="stock_actions">
|
||||||
<label class="file-label">
|
<button class="btn btn--image" @click="clickFileInput">
|
||||||
<div class="btn btn--image">
|
|
||||||
<img src="/images/icon-upload.svg" alt="" />
|
|
||||||
{{ $t('stocklist.action-upload') }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<input type="file" @change="uploadStock" ref="conFile" accept=".con,.txt" />
|
<input type="file" @change="uploadStock" ref="conFile" accept=".con,.txt" />
|
||||||
</label>
|
<img src="/images/icon-upload.svg" alt="upload icon" />
|
||||||
|
{{ $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" />
|
<img src="/images/icon-download.svg" alt="download icon" />
|
||||||
@@ -37,36 +34,26 @@
|
|||||||
|
|
||||||
<div class="stock_controls" :data-disabled="store.chosenStockListIndex == -1">
|
<div class="stock_controls" :data-disabled="store.chosenStockListIndex == -1">
|
||||||
<b v-if="store.chosenStockListIndex >= 0">
|
<b v-if="store.chosenStockListIndex >= 0">
|
||||||
{{ $t('stocklist.vehicle-no') }} <span class="text--accent">{{ store.chosenStockListIndex + 1 }}</span>
|
{{ $t('stocklist.vehicle-no') }}
|
||||||
|
<span class="text--accent">{{ store.chosenStockListIndex + 1 }}</span>
|
||||||
|
|
||||||
</b>
|
</b>
|
||||||
|
|
||||||
<b v-else>
|
<b v-else>
|
||||||
{{ $t('stocklist.no-vehicle-chosen') }}
|
{{ $t('stocklist.no-vehicle-chosen') }}
|
||||||
</b>
|
</b>
|
||||||
|
|
||||||
<button
|
<button class="btn" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" @click="moveUpStock(store.chosenStockListIndex)">
|
||||||
class="btn"
|
|
||||||
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
|
|
||||||
@click="moveUpStock(store.chosenStockListIndex)"
|
|
||||||
>
|
|
||||||
<img :src="getIconURL('higher')" alt="move up vehicle" />
|
<img :src="getIconURL('higher')" alt="move up vehicle" />
|
||||||
{{ $t('stocklist.action-move-up') }}
|
{{ $t('stocklist.action-move-up') }}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
<button class="btn" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" @click="moveDownStock(store.chosenStockListIndex)">
|
||||||
class="btn"
|
|
||||||
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
|
|
||||||
@click="moveDownStock(store.chosenStockListIndex)"
|
|
||||||
>
|
|
||||||
<img :src="getIconURL('lower')" alt="move down vehicle" />
|
<img :src="getIconURL('lower')" alt="move down vehicle" />
|
||||||
{{ $t('stocklist.action-move-down') }}
|
{{ $t('stocklist.action-move-down') }}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
<button class="btn" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" @click="removeStock(store.chosenStockListIndex)">
|
||||||
class="btn"
|
|
||||||
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
|
|
||||||
@click="removeStock(store.chosenStockListIndex)"
|
|
||||||
>
|
|
||||||
<img :src="getIconURL('remove')" alt="remove vehicle" />
|
<img :src="getIconURL('remove')" alt="remove vehicle" />
|
||||||
{{ $t('stocklist.action-remove') }}
|
{{ $t('stocklist.action-remove') }}
|
||||||
</button>
|
</button>
|
||||||
@@ -82,45 +69,40 @@
|
|||||||
</b>
|
</b>
|
||||||
|
|
||||||
<span>
|
<span>
|
||||||
{{ $t('stocklist.mass') }} <span class="text--accent">{{ store.totalMass }}t</span> ({{
|
{{ $t('stocklist.mass') }}
|
||||||
$t('stocklist.mass-accepted')
|
<span class="text--accent">{{ store.totalMass }}t</span> ({{ $t('stocklist.mass-accepted') }}:
|
||||||
}}: <span class="text--accent">{{ store.acceptableMass ? store.acceptableMass + 't' : '-' }}</span
|
<span class="text--accent">{{ store.acceptableMass ? store.acceptableMass + 't' : '-' }}</span
|
||||||
>) - {{ $t('stocklist.length') }}:
|
>) - {{ $t('stocklist.length') }}:
|
||||||
<span class="text--accent">{{ store.totalLength }}m</span>
|
<span class="text--accent">{{ store.totalLength }}m</span>
|
||||||
- {{ $t('stocklist.vmax') }}: <span class="text--accent">{{ store.maxStockSpeed }} km/h</span>
|
- {{ $t('stocklist.vmax') }}:
|
||||||
|
<span class="text--accent">{{ store.maxStockSpeed }} km/h</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stock_cold-start">
|
<div class="stock_spawn-settings">
|
||||||
<label>
|
<label v-if="store.stockSupportsColdStart" :data-checked="store.isColdStart">
|
||||||
<input
|
<input type="checkbox" v-model="store.isColdStart" />
|
||||||
type="checkbox"
|
|
||||||
v-model="store.isColdStart"
|
|
||||||
:disabled="!locoSupportsColdStart(store.stockList[0]?.constructionType || '')"
|
|
||||||
/>
|
|
||||||
{{ $t('stocklist.coldstart-info') }}
|
{{ $t('stocklist.coldstart-info') }}
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
|
<label v-if="store.stockSupportsDoubleManning" :data-checked="store.isDoubleManned">
|
||||||
|
<input type="checkbox" v-model="store.isDoubleManned" />
|
||||||
|
{{ $t('stocklist.doublemanning-info') }}
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stock_warnings" v-if="stockHasWarnings">
|
<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">
|
<div class="warning" v-if="trainTooLong && store.isTrainPassenger">(!) {{ $t('stocklist.warning-passenger-too-long') }}</div>
|
||||||
(!) {{ $t('stocklist.warning-passenger-too-long') }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="warning" v-if="trainTooLong && !store.isTrainPassenger">
|
<div class="warning" v-if="trainTooLong && !store.isTrainPassenger">(!) {{ $t('stocklist.warning-freight-too-long') }}</div>
|
||||||
(!) {{ $t('stocklist.warning-freight-too-long') }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="warning" v-if="trainTooHeavy">
|
<div class="warning" v-if="trainTooHeavy">
|
||||||
(!)
|
(!)
|
||||||
<i18n-t keypath="stocklist.warning-too-heavy">
|
<i18n-t keypath="stocklist.warning-too-heavy">
|
||||||
<template #href>
|
<template #href>
|
||||||
<a
|
<a target="_blank" href="https://docs.google.com/spreadsheets/d/1KVa5vn2d8XGkXQFwbavVudwKqUQxbLOucHWs2VYqAUE">
|
||||||
target="_blank"
|
|
||||||
href="https://docs.google.com/spreadsheets/d/1bFXUsHsAu4youmNz-46Q1HslZaaoklvfoBDS553TnNk/edit"
|
|
||||||
>
|
|
||||||
{{ $t('stocklist.acceptable-mass-docs') }}
|
{{ $t('stocklist.acceptable-mass-docs') }}
|
||||||
</a>
|
</a>
|
||||||
</template>
|
</template>
|
||||||
@@ -153,23 +135,19 @@
|
|||||||
@keydown.backspace="removeStock(i)"
|
@keydown.backspace="removeStock(i)"
|
||||||
ref="itemRefs"
|
ref="itemRefs"
|
||||||
>
|
>
|
||||||
<div
|
<div class="stock-info" @dragstart="onDragStart(i)" @drop="onDrop($event, i)" @dragover="allowDrop" draggable="true">
|
||||||
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 class="stock-info__no" :data-selected="i == store.chosenStockListIndex">
|
||||||
<span v-if="i == store.chosenStockListIndex">• </span>
|
<span v-if="i == store.chosenStockListIndex">• </span>
|
||||||
{{ i + 1 }}.
|
{{ i + 1 }}.
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<span class="stock-info__type" :class="{ supporter: stock.supportersOnly }">
|
<span class="stock-info__type" :class="{ sponsor: stock.isSponsorsOnly }">
|
||||||
{{ stock.isLoco ? stock.type : getCarSpecFromType(stock.type) }}
|
{{ stock.isLoco ? stock.type : getCarSpecFromType(stock.type) }}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<span class="stock-info__cargo" v-if="stock.cargo"> {{ stock.cargo.id }} </span>
|
<span class="stock-info__cargo" v-if="stock.cargo">
|
||||||
|
{{ stock.cargo.id }}
|
||||||
|
</span>
|
||||||
<span class="stock-info__length"> {{ stock.length }}m </span>
|
<span class="stock-info__length"> {{ stock.length }}m </span>
|
||||||
<span class="stock-info__mass">{{ stock.cargo ? stock.cargo.totalMass : stock.mass }}t </span>
|
<span class="stock-info__mass">{{ stock.cargo ? stock.cargo.totalMass : stock.mass }}t </span>
|
||||||
<span class="stock-info__speed"> {{ stock.maxSpeed }}km/h </span>
|
<span class="stock-info__speed"> {{ stock.maxSpeed }}km/h </span>
|
||||||
@@ -182,11 +160,9 @@
|
|||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
import TrainImage from '../sections/TrainImageSection.vue';
|
|
||||||
|
|
||||||
import { useStore } from '../../store';
|
import { useStore } from '../../store';
|
||||||
|
|
||||||
import { locoSupportsColdStart } from '../../utils/locoUtils';
|
|
||||||
import warningsMixin from '../../mixins/warningsMixin';
|
import warningsMixin from '../../mixins/warningsMixin';
|
||||||
import imageMixin from '../../mixins/imageMixin';
|
import imageMixin from '../../mixins/imageMixin';
|
||||||
import stockPreviewMixin from '../../mixins/stockPreviewMixin';
|
import stockPreviewMixin from '../../mixins/stockPreviewMixin';
|
||||||
@@ -195,7 +171,7 @@ import stockMixin from '../../mixins/stockMixin';
|
|||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'stock-list',
|
name: 'stock-list',
|
||||||
components: { TrainImage, StockThumbnails },
|
components: { StockThumbnails },
|
||||||
|
|
||||||
mixins: [warningsMixin, imageMixin, stockMixin, stockPreviewMixin],
|
mixins: [warningsMixin, imageMixin, stockMixin, stockPreviewMixin],
|
||||||
|
|
||||||
@@ -216,13 +192,19 @@ export default defineComponent({
|
|||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
stockString() {
|
stockString() {
|
||||||
|
if (this.store.stockList.length == 0) return '';
|
||||||
|
|
||||||
|
const includeColdStart = this.store.isColdStart && this.store.stockSupportsColdStart;
|
||||||
|
const includeDoubleManned = this.store.isDoubleManned && this.store.stockSupportsDoubleManning;
|
||||||
|
|
||||||
return this.store.stockList
|
return this.store.stockList
|
||||||
.map((stock, i) => {
|
.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}`;
|
||||||
let coldStart =
|
|
||||||
i == 0 && this.store.isColdStart && locoSupportsColdStart(stock.constructionType || '') ? ',c' : '';
|
|
||||||
|
|
||||||
return stockTypeStr + coldStart;
|
if (i == 0 && (includeColdStart || includeDoubleManned))
|
||||||
|
return `${stockTypeStr},${includeColdStart ? 'c' : ''}${includeDoubleManned ? 'd' : ''}`;
|
||||||
|
|
||||||
|
return stockTypeStr;
|
||||||
})
|
})
|
||||||
.join(';');
|
.join(';');
|
||||||
},
|
},
|
||||||
@@ -241,8 +223,6 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
locoSupportsColdStart,
|
|
||||||
|
|
||||||
copyToClipboard() {
|
copyToClipboard() {
|
||||||
navigator.clipboard.writeText(this.stockString);
|
navigator.clipboard.writeText(this.stockString);
|
||||||
|
|
||||||
@@ -251,11 +231,14 @@ export default defineComponent({
|
|||||||
}, 20);
|
}, 20);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
clickFileInput() {
|
||||||
|
(this.$refs['conFile'] as HTMLInputElement).click();
|
||||||
|
},
|
||||||
|
|
||||||
onListItemClick(stockID: number) {
|
onListItemClick(stockID: number) {
|
||||||
const stock = this.store.stockList[stockID];
|
const stock = this.store.stockList[stockID];
|
||||||
|
|
||||||
this.store.chosenStockListIndex =
|
this.store.chosenStockListIndex = this.store.chosenStockListIndex == stockID && this.store.chosenVehicle?.type == stock.type ? -1 : stockID;
|
||||||
this.store.chosenStockListIndex == stockID && this.store.chosenVehicle?.type == stock.type ? -1 : stockID;
|
|
||||||
|
|
||||||
if (this.store.chosenStockListIndex == -1) {
|
if (this.store.chosenStockListIndex == -1) {
|
||||||
this.store.chosenVehicle = null;
|
this.store.chosenVehicle = null;
|
||||||
@@ -352,9 +335,9 @@ export default defineComponent({
|
|||||||
downloadStock() {
|
downloadStock() {
|
||||||
if (this.store.stockList.length == 0) return alert(this.$t('stocklist.alert-empty'));
|
if (this.store.stockList.length == 0) return alert(this.$t('stocklist.alert-empty'));
|
||||||
|
|
||||||
const defaultName = `${this.store.chosenRealStockName || this.store.stockList[0].type} ${
|
const defaultName = `${this.store.chosenRealStockName || this.store.stockList[0].type} ${this.store.totalMass}t; ${
|
||||||
this.store.totalMass
|
this.store.totalLength
|
||||||
}t; ${this.store.totalLength}m; vmax ${this.store.maxStockSpeed}`;
|
}m; vmax ${this.store.maxStockSpeed}`;
|
||||||
|
|
||||||
const fileName = prompt(this.$t('stocklist.prompt-file'), defaultName);
|
const fileName = prompt(this.$t('stocklist.prompt-file'), defaultName);
|
||||||
|
|
||||||
@@ -487,12 +470,51 @@ export default defineComponent({
|
|||||||
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||||
|
|
||||||
label.file-label {
|
button {
|
||||||
text-align: center;
|
width: 100%;
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
input {
|
input {
|
||||||
display: none;
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stock_spawn-settings {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5em;
|
||||||
|
|
||||||
|
label > input {
|
||||||
|
position: absolute;
|
||||||
|
clip: rect(1px, 1px, 1px, 1px);
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
height: 1px;
|
||||||
|
width: 1px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
padding: 0.25em 0.5em;
|
||||||
|
border-radius: 0.25em;
|
||||||
|
background-color: #222;
|
||||||
|
color: #aaa;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
text-transform: uppercase;
|
||||||
|
transition: color 200ms;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '\2716';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
label[data-checked='true'] {
|
||||||
|
color: palegreen;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '\2714';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -549,7 +571,7 @@ li > .stock-info {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.supporter {
|
.sponsor {
|
||||||
color: salmon;
|
color: salmon;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -610,4 +632,3 @@ li > .stock-info {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
+108
-137
@@ -7,10 +7,10 @@
|
|||||||
<div class="tab_content">
|
<div class="tab_content">
|
||||||
<div class="actions-panel">
|
<div class="actions-panel">
|
||||||
<div class="actions-panel_vehicles">
|
<div class="actions-panel_vehicles">
|
||||||
<button class="btn btn--choice" @click="changeWikiMode('locomotives')">
|
<button class="btn" :data-chosen="currentFilterMode == 'tractions'" @click="toggleFilter('tractions')">
|
||||||
{{ $t('wiki.action-vehicles') }}
|
{{ $t('wiki.action-vehicles') }}
|
||||||
</button>
|
</button>
|
||||||
<button class="btn btn--choice" @click="changeWikiMode('carWagons')">
|
<button class="btn" :data-chosen="currentFilterMode == 'carriages'" @click="toggleFilter('carriages')">
|
||||||
{{ $t('wiki.action-carriages') }}
|
{{ $t('wiki.action-carriages') }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -20,70 +20,58 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table-wrapper" @scroll="scrollEvent" ref="table-wrapper">
|
<div class="table-wrapper" ref="table-wrapper">
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th v-for="header in wikiMode == 'locomotives' ? locoHeaders : carHeaders" @click="toggleSorter(header)">
|
<th v-for="header in visibleHeaders" @click="toggleSorter(header)" :key="header.id">
|
||||||
{{ $t(`wiki.header.${header.id}`) }}
|
{{ $t(`wiki.header.${header.id}`) }}
|
||||||
|
|
||||||
<span v-if="currentModeSorter.id == header.id">
|
<span v-if="currentSorter.id == header.id">
|
||||||
{{ currentModeSorter.direction == 1 ? `⇑` : `⇓` }}
|
{{ currentSorter.direction == 1 ? `⇑` : `⇓` }}
|
||||||
</span>
|
</span>
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
|
||||||
<tbody v-if="wikiMode == 'locomotives'">
|
<tbody>
|
||||||
<tr
|
<tr
|
||||||
v-for="loco in computedLocoList"
|
v-for="{ vehicle, show } in computedTableData"
|
||||||
@click="previewLocomotive(loco)"
|
|
||||||
@keydown.enter="previewLocomotive(loco)"
|
|
||||||
@dblclick="addLocomotive(loco)"
|
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
|
v-show="show"
|
||||||
|
:key="vehicle.type"
|
||||||
|
@click="previewVehicle(vehicle)"
|
||||||
|
@keydown.enter="previewVehicle(vehicle)"
|
||||||
|
@dblclick="addVehicle(vehicle)"
|
||||||
>
|
>
|
||||||
<td>
|
<td style="width: 120px">
|
||||||
<img
|
<img
|
||||||
:src="`https://spythere.github.io/api/td2/images/${loco.type}--300px.jpg`"
|
width="120"
|
||||||
|
:src="getThumbnailURL(vehicle.type, 'small')"
|
||||||
|
:alt="`${vehicle.type}`"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
:alt="`Lokomotywa ${loco.type}`"
|
@error="(e) => ((e.target as HTMLElement).style.display = 'none')"
|
||||||
/>
|
/>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td>{{ loco.type }}</td>
|
<td :data-sponsoronly="vehicle.isSponsorsOnly">{{ vehicle.type }}</td>
|
||||||
<td>{{ $t(`wiki.${loco.power}`) }}</td>
|
|
||||||
<td>{{ loco.constructionType }}</td>
|
|
||||||
<td>{{ locoSupportsColdStart(loco.constructionType) ? `✓` : '✗' }}</td>
|
|
||||||
<td>{{ loco.length }}m</td>
|
|
||||||
<td>{{ loco.mass }}t</td>
|
|
||||||
<td>{{ loco.maxSpeed }}km/h</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
|
|
||||||
<tbody v-else>
|
<td v-if="isLocomotive(vehicle)">{{ $t(`wiki.${vehicle.power}`) }}</td>
|
||||||
<tr
|
<td v-else>{{ $t(`wiki.${vehicle.useType}`) }}</td>
|
||||||
v-for="car in computedCarList"
|
|
||||||
@keydow.enter="previewCarWagon(car)"
|
<td>{{ vehicle.constructionType }}</td>
|
||||||
@click="previewCarWagon(car)"
|
<td>{{ vehicle.length }}m</td>
|
||||||
@dblclick="addCarWagon(car)"
|
<td>{{ vehicle.mass }}t</td>
|
||||||
tabindex="0"
|
<td>{{ vehicle.maxSpeed }}km/h</td>
|
||||||
>
|
|
||||||
<td>
|
<td v-if="currentFilterMode == 'carriages'">{{ !isLocomotive(vehicle) ? vehicle.cargoList.length : '---' }}</td>
|
||||||
<img
|
<td v-if="currentFilterMode == 'tractions'">
|
||||||
:src="`https://spythere.github.io/api/td2/images/${car.type}--300px.jpg`"
|
{{ isLocomotive(vehicle) ? (vehicle.coldStart ? `✓` : '✗') : '---' }}
|
||||||
loading="lazy"
|
|
||||||
:alt="`Lokomotywa ${car.type}`"
|
|
||||||
/>
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td>{{ car.type }}</td>
|
|
||||||
<td>{{ car.constructionType }}</td>
|
|
||||||
<td>{{ car.length }}m</td>
|
|
||||||
<td>{{ car.mass }}t</td>
|
|
||||||
<td>{{ car.maxSpeed }}km/h</td>
|
|
||||||
<td>{{ car.cargoList.length == 0 ? '-' : car.cargoList.length }}</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|
||||||
|
<span ref="table-bottom"></span>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -97,122 +85,101 @@ import stockPreviewMixin from '../../mixins/stockPreviewMixin';
|
|||||||
import { Vehicle } from '../../types';
|
import { Vehicle } from '../../types';
|
||||||
import { isLocomotive } from '../../utils/vehicleUtils';
|
import { isLocomotive } from '../../utils/vehicleUtils';
|
||||||
import stockMixin from '../../mixins/stockMixin';
|
import stockMixin from '../../mixins/stockMixin';
|
||||||
import { locoSupportsColdStart } from '../../utils/locoUtils';
|
import imageMixin from '../../mixins/imageMixin';
|
||||||
|
|
||||||
type WikiMode = 'locomotives' | 'carWagons';
|
type SorterID = 'type' | 'constructionType' | 'image' | 'length' | 'mass' | 'maxSpeed' | 'cargoCount' | 'group' | 'coldStart';
|
||||||
type SorterID =
|
|
||||||
| 'type'
|
|
||||||
| 'constructionType'
|
|
||||||
| 'image'
|
|
||||||
| 'length'
|
|
||||||
| 'mass'
|
|
||||||
| 'maxSpeed'
|
|
||||||
| 'cargoCount'
|
|
||||||
| 'power'
|
|
||||||
| 'coldStart';
|
|
||||||
|
|
||||||
interface WikiHeader {
|
interface IWikiHeader {
|
||||||
id: SorterID;
|
id: SorterID;
|
||||||
sortable: boolean;
|
sortable: boolean;
|
||||||
|
for: 'all' | 'carriages' | 'tractions';
|
||||||
}
|
}
|
||||||
|
|
||||||
const locoHeaders: WikiHeader[] = [
|
interface IWikiRow {
|
||||||
{ id: 'image', sortable: false },
|
vehicle: Vehicle;
|
||||||
{ id: 'type', sortable: true },
|
show: boolean;
|
||||||
{ id: 'power', sortable: true },
|
}
|
||||||
{ id: 'constructionType', sortable: true },
|
|
||||||
{ id: 'coldStart', sortable: true },
|
|
||||||
{ id: 'length', sortable: true },
|
|
||||||
{ id: 'mass', sortable: true },
|
|
||||||
{ id: 'maxSpeed', sortable: true },
|
|
||||||
];
|
|
||||||
|
|
||||||
const carHeaders: WikiHeader[] = [
|
const headers: IWikiHeader[] = [
|
||||||
{ id: 'image', sortable: false },
|
{ id: 'image', sortable: false, for: 'all' },
|
||||||
{ id: 'type', sortable: true },
|
{ id: 'type', sortable: true, for: 'all' },
|
||||||
{ id: 'constructionType', sortable: true },
|
{ id: 'group', sortable: true, for: 'all' },
|
||||||
{ id: 'length', sortable: true },
|
{ id: 'constructionType', sortable: true, for: 'all' },
|
||||||
{ id: 'mass', sortable: true },
|
{ id: 'length', sortable: true, for: 'all' },
|
||||||
{ id: 'maxSpeed', sortable: true },
|
{ id: 'mass', sortable: true, for: 'all' },
|
||||||
{ id: 'cargoCount', sortable: true },
|
{ id: 'maxSpeed', sortable: true, for: 'all' },
|
||||||
|
{ id: 'coldStart', sortable: true, for: 'tractions' },
|
||||||
|
{ id: 'cargoCount', sortable: true, for: 'carriages' },
|
||||||
];
|
];
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
mixins: [stockPreviewMixin, stockMixin],
|
mixins: [stockPreviewMixin, stockMixin, imageMixin],
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
store: useStore(),
|
store: useStore(),
|
||||||
locoHeaders,
|
headers,
|
||||||
carHeaders,
|
|
||||||
|
|
||||||
locosScrollTop: 0,
|
scrollTop: 0,
|
||||||
carsScrollTop: 0,
|
|
||||||
|
|
||||||
wikiMode: 'locomotives' as WikiMode,
|
|
||||||
searchedVehicleTypeName: '',
|
searchedVehicleTypeName: '',
|
||||||
|
|
||||||
currentLocoSorter: {
|
currentSorter: {
|
||||||
id: 'type' as SorterID,
|
id: 'type' as SorterID,
|
||||||
direction: 1,
|
direction: 1,
|
||||||
},
|
},
|
||||||
|
|
||||||
currentCarSorter: {
|
currentFilterMode: 'all' as 'all' | 'tractions' | 'carriages',
|
||||||
id: 'type' as SorterID,
|
|
||||||
direction: 1,
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
activated() {
|
activated() {
|
||||||
const tableWrapperRef = this.$refs['table-wrapper'] as HTMLElement;
|
const tableWrapperRef = this.$refs['table-wrapper'] as HTMLElement;
|
||||||
tableWrapperRef.scrollTo({ top: this.wikiMode == 'locomotives' ? this.locosScrollTop : this.carsScrollTop });
|
|
||||||
|
tableWrapperRef.scrollTo({
|
||||||
|
top: this.scrollTop,
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
locoSupportsColdStart,
|
isLocomotive,
|
||||||
|
|
||||||
scrollEvent(e: Event) {
|
toggleFilter(name: typeof this.currentFilterMode) {
|
||||||
const tableScrollTop = (e.target as HTMLElement).scrollTop;
|
this.currentFilterMode = this.currentFilterMode == name ? 'all' : name;
|
||||||
|
|
||||||
if (this.wikiMode == 'locomotives') this.locosScrollTop = tableScrollTop;
|
|
||||||
else this.carsScrollTop = tableScrollTop;
|
|
||||||
},
|
},
|
||||||
|
|
||||||
changeWikiMode(wikiMode: WikiMode) {
|
toggleSorter(header: IWikiHeader) {
|
||||||
this.searchedVehicleTypeName = '';
|
|
||||||
this.wikiMode = wikiMode;
|
|
||||||
},
|
|
||||||
|
|
||||||
toggleSorter(header: WikiHeader) {
|
|
||||||
if (!header.sortable) return;
|
if (!header.sortable) return;
|
||||||
|
|
||||||
if (header.id == this.currentModeSorter.id) this.currentModeSorter.direction *= -1;
|
if (header.id == this.currentSorter.id) this.currentSorter.direction *= -1;
|
||||||
this.currentModeSorter.id = header.id;
|
this.currentSorter.id = header.id;
|
||||||
},
|
},
|
||||||
|
|
||||||
sortVehicles(vA: Vehicle, vB: Vehicle) {
|
sortTableRows(row1: IWikiRow, row2: IWikiRow) {
|
||||||
const { id, direction } = this.currentModeSorter;
|
if (!row1.show) return 0;
|
||||||
const vehiclesAreLocos = isLocomotive(vA) && isLocomotive(vB);
|
|
||||||
const vehiclesAreCars = !isLocomotive(vA) && !isLocomotive(vB);
|
const { id, direction } = this.currentSorter;
|
||||||
|
|
||||||
switch (id) {
|
switch (id) {
|
||||||
case 'type':
|
case 'type':
|
||||||
case 'constructionType':
|
case 'constructionType':
|
||||||
return direction == 1 ? vA[id].localeCompare(vB[id]) : vB[id].localeCompare(vA[id]);
|
case 'group':
|
||||||
|
return direction == 1 ? row1.vehicle[id].localeCompare(row2.vehicle[id]) : row2.vehicle[id].localeCompare(row1.vehicle[id]);
|
||||||
|
|
||||||
case 'mass':
|
case 'mass':
|
||||||
case 'length':
|
case 'length':
|
||||||
case 'maxSpeed':
|
case 'maxSpeed':
|
||||||
return Math.sign(vA[id] - vB[id]) * direction;
|
return Math.sign(row1.vehicle[id] - row2.vehicle[id]) * direction;
|
||||||
|
|
||||||
case 'cargoCount':
|
case 'cargoCount':
|
||||||
if (vehiclesAreCars) return Math.sign((vA.cargoList.length || -1) - (vB.cargoList.length || -1)) * direction;
|
return (
|
||||||
|
(!isLocomotive(row1.vehicle) ? Math.sign(row1.vehicle.cargoList.length || -1) : -1) -
|
||||||
|
(!isLocomotive(row2.vehicle) ? (row2.vehicle.cargoList.length || -1) * direction : -1)
|
||||||
|
);
|
||||||
|
|
||||||
case 'coldStart':
|
case 'coldStart':
|
||||||
if (vehiclesAreLocos)
|
|
||||||
return (
|
return (
|
||||||
(locoSupportsColdStart(vA.constructionType) > locoSupportsColdStart(vB.constructionType) ? 1 : -1) *
|
((isLocomotive(row1.vehicle) && row1.vehicle.coldStart ? 1 : -1) - (isLocomotive(row2.vehicle) && row2.vehicle.coldStart ? 1 : -1)) *
|
||||||
direction
|
direction
|
||||||
);
|
);
|
||||||
|
|
||||||
@@ -220,29 +187,36 @@ export default defineComponent({
|
|||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
return direction == 1 ? vA.type.localeCompare(vB.type) : vB.type.localeCompare(vA.type);
|
return direction == 1 ? row1.vehicle.type.localeCompare(row2.vehicle.type) : row2.vehicle.type.localeCompare(row1.vehicle.type);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
currentModeSorter() {
|
computedTableData(): IWikiRow[] {
|
||||||
return this.wikiMode == 'carWagons' ? this.currentCarSorter : this.currentLocoSorter;
|
return this.store.vehicleDataList
|
||||||
|
.map((vehicle) => ({
|
||||||
|
vehicle,
|
||||||
|
show:
|
||||||
|
new RegExp(`${this.searchedVehicleTypeName.trim()}`, 'i').test(vehicle.type) &&
|
||||||
|
(this.currentFilterMode == 'all' ||
|
||||||
|
(this.currentFilterMode == 'tractions' && isLocomotive(vehicle)) ||
|
||||||
|
(this.currentFilterMode == 'carriages' && !isLocomotive(vehicle))),
|
||||||
|
}))
|
||||||
|
.sort((a, b) => this.sortTableRows(a, b));
|
||||||
},
|
},
|
||||||
|
|
||||||
computedLocoList() {
|
visibleHeaders() {
|
||||||
const trimmedSearchValue = this.searchedVehicleTypeName.trim();
|
const filtersActive = this.currentFilterMode;
|
||||||
|
|
||||||
return this.store.locoDataList
|
return this.headers.filter((header) => header.for == 'all' || header.for == filtersActive);
|
||||||
.filter((loco) => new RegExp(`${trimmedSearchValue}`, 'i').test(loco.type))
|
|
||||||
.sort(this.sortVehicles);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
computedCarList() {
|
areTractionVehiclesShown() {
|
||||||
const trimmedSearchValue = this.searchedVehicleTypeName.trim();
|
return this.currentFilterMode == 'all' || this.currentFilterMode == 'tractions';
|
||||||
|
},
|
||||||
|
|
||||||
return this.store.carDataList
|
areCarriagesShown() {
|
||||||
.filter((car) => new RegExp(`${trimmedSearchValue}`, 'i').test(car.type))
|
return this.currentFilterMode == 'all' || this.currentFilterMode == 'carriages';
|
||||||
.sort(this.sortVehicles);
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@@ -300,6 +274,10 @@ export default defineComponent({
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: #333;
|
background-color: #333;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
min-width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
&:nth-child(odd) {
|
&:nth-child(odd) {
|
||||||
background-color: #444;
|
background-color: #444;
|
||||||
}
|
}
|
||||||
@@ -311,29 +289,22 @@ export default defineComponent({
|
|||||||
|
|
||||||
td {
|
td {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 0.25em;
|
height: 70px;
|
||||||
height: 85px;
|
|
||||||
}
|
|
||||||
|
|
||||||
td:first-child {
|
&[data-sponsoronly='true'] {
|
||||||
width: 120px;
|
color: salmon;
|
||||||
}
|
}
|
||||||
|
|
||||||
td img {
|
|
||||||
display: block;
|
|
||||||
width: 120px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: $breakpointMd) {
|
@media screen and (max-width: $breakpointMd) {
|
||||||
.wiki-list table {
|
.wiki-list table {
|
||||||
td {
|
th {
|
||||||
width: 100px;
|
min-width: 100px;
|
||||||
height: auto;
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 6em;
|
max-width: 100px;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -10,8 +10,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from "vue";
|
||||||
import { useStore } from '../../store';
|
import { useStore } from "../../store";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
data() {
|
data() {
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
<div class="stock_thumbnails" ref="thumbnailsRef">
|
<div class="stock_thumbnails" ref="thumbnailsRef">
|
||||||
<div
|
<div
|
||||||
v-for="(stock, stockIndex) in store.stockList"
|
v-for="(stock, stockIndex) in store.stockList"
|
||||||
|
:key="stockIndex"
|
||||||
:data-selected="store.chosenStockListIndex == stockIndex"
|
:data-selected="store.chosenStockListIndex == stockIndex"
|
||||||
draggable="true"
|
draggable="true"
|
||||||
@dragstart="onDragStart(stockIndex)"
|
@dragstart="onDragStart(stockIndex)"
|
||||||
@@ -9,7 +10,7 @@
|
|||||||
@dragover="allowDrop"
|
@dragover="allowDrop"
|
||||||
>
|
>
|
||||||
<span @click="onListItemClick(stockIndex)" :key="stock.id">
|
<span @click="onListItemClick(stockIndex)" :key="stock.id">
|
||||||
<b :class="{ supporter: stock.supportersOnly }">
|
<b :class="{ sponsor: stock.isSponsorsOnly }">
|
||||||
{{ stock.type }}
|
{{ stock.type }}
|
||||||
</b>
|
</b>
|
||||||
|
|
||||||
@@ -52,9 +53,11 @@ watch(
|
|||||||
if (index < 0) return;
|
if (index < 0) return;
|
||||||
|
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
(thumbnailsRef.value as HTMLElement)
|
(thumbnailsRef.value as HTMLElement).querySelector(`div:nth-child(${index + 1})`)?.scrollIntoView({
|
||||||
.querySelector(`div:nth-child(${index + 1})`)
|
block: 'nearest',
|
||||||
?.scrollIntoView({ block: 'nearest', inline: 'start', behavior: 'smooth' });
|
inline: 'start',
|
||||||
|
behavior: 'smooth',
|
||||||
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
@@ -118,8 +121,7 @@ const allowDrop = (e: DragEvent) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.supporter {
|
.sponsor {
|
||||||
color: salmon;
|
color: salmon;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"EU06": [650, 2000],
|
||||||
|
"EU07": [650, 2000],
|
||||||
|
"EU07E": [650, 2000],
|
||||||
|
"EP07": [650, 650],
|
||||||
|
"EP08": [650, 650],
|
||||||
|
"EP09": [800, 800],
|
||||||
|
"ET41": [700, 4000],
|
||||||
|
"SM42": [2400, 2400]
|
||||||
|
}
|
||||||
@@ -12,8 +12,8 @@
|
|||||||
},
|
},
|
||||||
"sameRegions": {
|
"sameRegions": {
|
||||||
"Losowy": [
|
"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,
|
10, 11, 19, 91, 93, 97, 99, 20, 22, 29, 30, 33, 39, 40, 44, 49, 94, 50,
|
||||||
79, 88, 80, 89, 92, 98
|
55, 59, 90, 95, 96, 66, 60, 69, 77, 70, 79, 88, 80, 89, 92, 98
|
||||||
],
|
],
|
||||||
"Warszawa": [10, 11, 19, 91, 93, 97, 99],
|
"Warszawa": [10, 11, 19, 91, 93, 97, 99],
|
||||||
"Lublin": [20, 22, 29],
|
"Lublin": [20, 22, 29],
|
||||||
@@ -35,4 +35,3 @@
|
|||||||
"LT": "2:5;3:0-899:3"
|
"LT": "2:5;3:0-899:3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -27,6 +27,12 @@
|
|||||||
},
|
},
|
||||||
"cargo": null
|
"cargo": null
|
||||||
},
|
},
|
||||||
|
"EP09": {
|
||||||
|
"passenger": {
|
||||||
|
"650": 160
|
||||||
|
},
|
||||||
|
"cargo": null
|
||||||
|
},
|
||||||
"ET41": {
|
"ET41": {
|
||||||
"passenger": {
|
"passenger": {
|
||||||
"700": 125
|
"700": 125
|
||||||
@@ -58,5 +64,3 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
export const enum EVehicleUseType {
|
export const enum EVehicleUseType {
|
||||||
LOCO_ELECTRICAL = 'loco-e',
|
LOCO_ELECTRICAL = "loco-e",
|
||||||
LOCO_DIESEL = "loco-s",
|
LOCO_DIESEL = "loco-s",
|
||||||
EMU = "loco-ezt",
|
EMU = "loco-ezt",
|
||||||
DMU = "loco-szt",
|
DMU = "loco-szt",
|
||||||
|
|
||||||
CAR_PASSENGER = "car-passenger",
|
CAR_PASSENGER = "car-passenger",
|
||||||
CAR_CARGO = "car-cargo"
|
CAR_CARGO = "car-cargo",
|
||||||
}
|
}
|
||||||
+10
@@ -0,0 +1,10 @@
|
|||||||
|
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",
|
||||||
|
});
|
||||||
|
|
||||||
|
export default http;
|
||||||
+13
-11
@@ -1,31 +1,33 @@
|
|||||||
import localePL from './locales/pl.json';
|
import localePL from "./locales/pl.json";
|
||||||
import localeEN from './locales/en.json';
|
import localeEN from "./locales/en.json";
|
||||||
import { createI18n } from 'vue-i18n';
|
import { createI18n } from "vue-i18n";
|
||||||
import axios from 'axios';
|
import http from "./http";
|
||||||
|
|
||||||
type LocaleMessageSchema = typeof localePL;
|
type LocaleMessageSchema = typeof localePL;
|
||||||
type LocaleKey = 'en' | 'pl';
|
type LocaleKey = "en" | "pl";
|
||||||
|
|
||||||
const locales: { [key in LocaleKey]: LocaleMessageSchema } = {
|
const locales: { [key in LocaleKey]: LocaleMessageSchema } = {
|
||||||
en: localeEN,
|
en: localeEN,
|
||||||
pl: localePL,
|
pl: localePL,
|
||||||
};
|
};
|
||||||
|
|
||||||
const locale = window.localStorage.getItem('locale') || (/^pl\b/.test(navigator.language) ? 'pl' : 'en');
|
const locale =
|
||||||
|
window.localStorage.getItem("locale") ||
|
||||||
|
(/^pl\b/.test(navigator.language) ? "pl" : "en");
|
||||||
|
|
||||||
const i18n = createI18n<[LocaleMessageSchema], 'en' | 'pl'>({
|
const i18n = createI18n<[LocaleMessageSchema], "en" | "pl">({
|
||||||
locale,
|
locale,
|
||||||
fallbackLocale: 'pl',
|
fallbackLocale: "pl",
|
||||||
legacy: false,
|
legacy: false,
|
||||||
globalInjection: true,
|
globalInjection: true,
|
||||||
messages: locales,
|
messages: locales,
|
||||||
});
|
});
|
||||||
|
|
||||||
async function fetchBackendTranslations() {
|
async function fetchBackendTranslations() {
|
||||||
const localeData = (await axios.get(`https://spythere.github.io/api/td2/data/locales.json`)).data;
|
const localeData = (await http.get(`td2/data/locales.json`)).data;
|
||||||
|
|
||||||
i18n.global.mergeLocaleMessage('pl', localeData.pl);
|
i18n.global.mergeLocaleMessage("pl", localeData.pl);
|
||||||
i18n.global.mergeLocaleMessage('en', localeData.en);
|
i18n.global.mergeLocaleMessage("en", localeData.en);
|
||||||
}
|
}
|
||||||
|
|
||||||
fetchBackendTranslations();
|
fetchBackendTranslations();
|
||||||
|
|||||||
+8
-5
@@ -29,13 +29,13 @@
|
|||||||
"title": "RAILWAY VEHICLE PREVIEW",
|
"title": "RAILWAY VEHICLE PREVIEW",
|
||||||
"loading": "IMAGE LOADING...",
|
"loading": "IMAGE LOADING...",
|
||||||
"desc": "Choose a railway vehicle above to see its preview",
|
"desc": "Choose a railway vehicle above to see its preview",
|
||||||
"sponsor-only": "* SPONSORS ONLY",
|
"sponsor-only": "* SPONSORS ONLY UNTIL {0}",
|
||||||
"loco-e": "ELECTRIC LOCO",
|
"loco-e": "ELECTRIC LOCO",
|
||||||
"loco-s": "DIESEL LOCO",
|
"loco-s": "DIESEL LOCO",
|
||||||
"loco-ezt": "ELECTRIC M.U.",
|
"loco-ezt": "ELECTRIC M.U.",
|
||||||
"loco-szt": "DIESEL M.U.",
|
"loco-szt": "DIESEL M.U.",
|
||||||
"car-passenger": "PASSENGER CARRIAGE",
|
"car-passenger": "PASSENGER CARRIAGE",
|
||||||
"car-cargo": "FREIGHT CAR",
|
"car-cargo": "FREIGHT CARRIAGE",
|
||||||
"cabin": "Cabin type:",
|
"cabin": "Cabin type:",
|
||||||
"construction": "Construction type:"
|
"construction": "Construction type:"
|
||||||
},
|
},
|
||||||
@@ -64,7 +64,8 @@
|
|||||||
"mass-accepted": "accepted",
|
"mass-accepted": "accepted",
|
||||||
"length": "Length",
|
"length": "Length",
|
||||||
"vmax": "vMax",
|
"vmax": "vMax",
|
||||||
"coldstart-info": "Cold start heading locomotive (only locos 303E & 203E type)",
|
"coldstart-info": "Locomotive cold start",
|
||||||
|
"doublemanning-info": "Double manning",
|
||||||
"list-empty": "Stock list is empty!",
|
"list-empty": "Stock list is empty!",
|
||||||
"warning-not-suitable": "EP07 & EP08 type locomotives are designed for passenger traffic only!",
|
"warning-not-suitable": "EP07 & EP08 type locomotives are designed for passenger traffic only!",
|
||||||
"warning-passenger-too-long": "Maximum length of a passenger train may not be greater than 350m!",
|
"warning-passenger-too-long": "Maximum length of a passenger train may not be greater than 350m!",
|
||||||
@@ -128,7 +129,7 @@
|
|||||||
"header": {
|
"header": {
|
||||||
"image": "Image",
|
"image": "Image",
|
||||||
"type": "Name",
|
"type": "Name",
|
||||||
"power": "Type",
|
"group": "Type group",
|
||||||
"constructionType": "Construction",
|
"constructionType": "Construction",
|
||||||
"coldStart": "Cold start",
|
"coldStart": "Cold start",
|
||||||
"length": "Length",
|
"length": "Length",
|
||||||
@@ -139,7 +140,9 @@
|
|||||||
"loco-ezt": "EMU",
|
"loco-ezt": "EMU",
|
||||||
"loco-szt": "DMU",
|
"loco-szt": "DMU",
|
||||||
"loco-s": "Diesel locomotive",
|
"loco-s": "Diesel locomotive",
|
||||||
"loco-e": "Electric locomotive"
|
"loco-e": "Electric locomotive",
|
||||||
|
"car-passenger": "Passenger carriage",
|
||||||
|
"car-cargo": "Frieght carriage"
|
||||||
},
|
},
|
||||||
"realstock": {
|
"realstock": {
|
||||||
"title": "POLISH TRAIN COMPOSITIONS by",
|
"title": "POLISH TRAIN COMPOSITIONS by",
|
||||||
|
|||||||
+7
-4
@@ -29,7 +29,7 @@
|
|||||||
"title": "PODGLĄD WYBRANEGO POJAZDU",
|
"title": "PODGLĄD WYBRANEGO POJAZDU",
|
||||||
"loading": "ŁADOWANIE OBRAZU...",
|
"loading": "ŁADOWANIE OBRAZU...",
|
||||||
"desc": "Wybierz pojazd lub wagon, aby zobaczyć jego podgląd powyżej",
|
"desc": "Wybierz pojazd lub wagon, aby zobaczyć jego podgląd powyżej",
|
||||||
"sponsor-only": "* TYLKO DLA SPONSORÓW",
|
"sponsor-only": "* TYLKO DLA SPONSORÓW DO {0}",
|
||||||
"loco-e": "ELEKTROWÓZ",
|
"loco-e": "ELEKTROWÓZ",
|
||||||
"loco-s": "SPALINOWÓZ",
|
"loco-s": "SPALINOWÓZ",
|
||||||
"loco-ezt": "EZT",
|
"loco-ezt": "EZT",
|
||||||
@@ -64,7 +64,8 @@
|
|||||||
"mass-accepted": "dopuszczalna",
|
"mass-accepted": "dopuszczalna",
|
||||||
"length": "Długość",
|
"length": "Długość",
|
||||||
"vmax": "vMax",
|
"vmax": "vMax",
|
||||||
"coldstart-info": "Zimny start lokomotywy czołowej (tylko elektrowozy typów 303E i 203E)",
|
"coldstart-info": "Zimny start",
|
||||||
|
"doublemanning-info": "Podwójna obsada",
|
||||||
"list-empty": "Lista pojazdów jest pusta!",
|
"list-empty": "Lista pojazdów jest pusta!",
|
||||||
"warning-not-suitable": "Lokomotywy EP07 i EP08 są przeznaczone jedynie do ruchu pasażerskiego!",
|
"warning-not-suitable": "Lokomotywy EP07 i EP08 są przeznaczone jedynie do ruchu pasażerskiego!",
|
||||||
"warning-passenger-too-long": "Maksymalna długość składów pasażerskich nie może przekraczać 350m!",
|
"warning-passenger-too-long": "Maksymalna długość składów pasażerskich nie może przekraczać 350m!",
|
||||||
@@ -128,7 +129,7 @@
|
|||||||
"header": {
|
"header": {
|
||||||
"image": "Zdjęcie",
|
"image": "Zdjęcie",
|
||||||
"type": "Nazwa",
|
"type": "Nazwa",
|
||||||
"power": "Rodzaj",
|
"group": "Rodzaj",
|
||||||
"constructionType": "Konstrukcja",
|
"constructionType": "Konstrukcja",
|
||||||
"coldStart": "Zimny start",
|
"coldStart": "Zimny start",
|
||||||
"length": "Długość",
|
"length": "Długość",
|
||||||
@@ -139,7 +140,9 @@
|
|||||||
"loco-ezt": "EZT",
|
"loco-ezt": "EZT",
|
||||||
"loco-szt": "SZT",
|
"loco-szt": "SZT",
|
||||||
"loco-s": "Spalinowóz",
|
"loco-s": "Spalinowóz",
|
||||||
"loco-e": "Elektrowóz"
|
"loco-e": "Elektrowóz",
|
||||||
|
"car-passenger": "Wagon pasażerski",
|
||||||
|
"car-cargo": "Wagon towarowy"
|
||||||
},
|
},
|
||||||
"realstock": {
|
"realstock": {
|
||||||
"title": "ZESTAWIENIA REALNE by",
|
"title": "ZESTAWIENIA REALNE by",
|
||||||
|
|||||||
@@ -1,14 +1,8 @@
|
|||||||
import { createApp } from 'vue';
|
import { createApp } from 'vue';
|
||||||
import { createPinia } from 'pinia';
|
import { createPinia } from 'pinia';
|
||||||
import { registerSW } from 'virtual:pwa-register';
|
|
||||||
|
|
||||||
import App from './App.vue';
|
import App from './App.vue';
|
||||||
import i18n from './i18n-setup';
|
import i18n from './i18n-setup';
|
||||||
const pinia = createPinia();
|
const pinia = createPinia();
|
||||||
|
|
||||||
registerSW({
|
|
||||||
immediate: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
createApp(App).use(pinia).use(i18n).mount('#app');
|
createApp(App).use(pinia).use(i18n).mount('#app');
|
||||||
|
|
||||||
|
|||||||
@@ -1,9 +1,17 @@
|
|||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from "vue";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
methods: {
|
methods: {
|
||||||
getIconURL(name: string, ext = 'svg'): string {
|
getIconURL(name: string, ext = "svg"): string {
|
||||||
return `/images/icon-${name}.${ext}`;
|
return `/images/icon-${name}.${ext}`;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
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`;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -29,8 +29,9 @@ export default defineComponent({
|
|||||||
count,
|
count,
|
||||||
imgSrc: vehicle.imageSrc,
|
imgSrc: vehicle.imageSrc,
|
||||||
useType: isLoco ? vehicle.power : vehicle.useType,
|
useType: isLoco ? vehicle.power : vehicle.useType,
|
||||||
supportersOnly: vehicle.supportersOnly,
|
isSponsorsOnly: vehicle.isSponsorsOnly,
|
||||||
constructionType: vehicle.constructionType,
|
constructionType: vehicle.constructionType,
|
||||||
|
sponsorsOnlyTimestamp: vehicle.sponsorsOnlyTimestamp,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -72,11 +73,17 @@ export default defineComponent({
|
|||||||
let vehicle: Vehicle | null = null;
|
let vehicle: Vehicle | null = null;
|
||||||
let vehicleCargo: ICargo | null = null;
|
let vehicleCargo: ICargo | null = null;
|
||||||
|
|
||||||
if (/^(EU|EP|ET|SM|EN|2EN|SN)/.test(type)) {
|
const isLoco = /^(EU|EP|ET|SM|EN|2EN|SN)/.test(type);
|
||||||
const [locoType, coldStart] = type.split(',');
|
|
||||||
|
if (isLoco) {
|
||||||
|
const [locoType, spawnProps] = type.split(',');
|
||||||
vehicle = this.store.locoDataList.find((loco) => loco.type == locoType) || null;
|
vehicle = this.store.locoDataList.find((loco) => loco.type == locoType) || null;
|
||||||
|
|
||||||
if (i == 0 && coldStart == 'c') this.store.isColdStart = true;
|
// Spawn settings
|
||||||
|
if (i == 0 && spawnProps) {
|
||||||
|
this.store.isColdStart = spawnProps.includes('c');
|
||||||
|
this.store.isDoubleManned = spawnProps.includes('d');
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
const [carType, cargo] = type.split(':');
|
const [carType, cargo] = type.split(':');
|
||||||
vehicle = this.store.carDataList.find((car) => car.type == carType) || null;
|
vehicle = this.store.carDataList.find((car) => car.type == carType) || null;
|
||||||
@@ -84,11 +91,10 @@ export default defineComponent({
|
|||||||
if (cargo) vehicleCargo = vehicle?.cargoList.find((c) => c.id == cargo) || null;
|
if (cargo) vehicleCargo = vehicle?.cargoList.find((c) => c.id == cargo) || null;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!vehicle) console.log('Brak pojazdu:', type);
|
if (!vehicle) console.log('Brak pojazdu / rodzaj pojazdu źle wczytany:', type);
|
||||||
|
|
||||||
this.addVehicle(vehicle, vehicleCargo);
|
this.addVehicle(vehicle, vehicleCargo);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
import { useStore } from '../store';
|
import { useStore } from '../store';
|
||||||
import { ICarWagon, ILocomotive, IStock, Vehicle } from '../types';
|
import { ICarWagon, ILocomotive, IStock, Vehicle } from '../types';
|
||||||
|
import { isLocomotive } from '../utils/vehicleUtils';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
setup() {
|
setup() {
|
||||||
@@ -9,45 +10,9 @@ export default defineComponent({
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
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: {
|
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) {
|
previewStock(stock: IStock) {
|
||||||
if (this.store.chosenVehicle?.imageSrc != stock.imgSrc) this.store.imageLoading = true;
|
if (this.store.chosenVehicle?.imageSrc != stock.imgSrc) this.store.imageLoading = true;
|
||||||
|
|
||||||
@@ -81,6 +46,11 @@ export default defineComponent({
|
|||||||
this.store.chosenCargo = null;
|
this.store.chosenCargo = null;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
previewVehicle(vehicle: Vehicle) {
|
||||||
|
if (isLocomotive(vehicle)) this.previewLocomotive(vehicle);
|
||||||
|
else this.previewCarWagon(vehicle);
|
||||||
|
},
|
||||||
|
|
||||||
resetPreview() {
|
resetPreview() {
|
||||||
this.store.chosenVehicle = null;
|
this.store.chosenVehicle = null;
|
||||||
this.store.chosenCar = null;
|
this.store.chosenCar = null;
|
||||||
@@ -89,4 +59,3 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from "vue";
|
||||||
import { useStore } from '../store';
|
import { useStore } from "../store";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
setup() {
|
setup() {
|
||||||
@@ -18,7 +18,10 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
|
|
||||||
trainTooHeavy() {
|
trainTooHeavy() {
|
||||||
return this.store.acceptableMass && this.store.totalMass > this.store.acceptableMass;
|
return (
|
||||||
|
this.store.acceptableMass &&
|
||||||
|
this.store.totalMass > this.store.acceptableMass
|
||||||
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
locoNotSuitable() {
|
locoNotSuitable() {
|
||||||
@@ -26,15 +29,19 @@ export default defineComponent({
|
|||||||
!this.store.isTrainPassenger &&
|
!this.store.isTrainPassenger &&
|
||||||
this.store.stockList.length > 1 &&
|
this.store.stockList.length > 1 &&
|
||||||
!this.store.stockList.every((stock) => stock.isLoco) &&
|
!this.store.stockList.every((stock) => stock.isLoco) &&
|
||||||
this.store.stockList.some((stock) => stock.isLoco && stock.type.startsWith('EP'))
|
this.store.stockList.some(
|
||||||
|
(stock) => stock.isLoco && stock.type.startsWith("EP"),
|
||||||
|
)
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
tooManyLocomotives() {
|
tooManyLocomotives() {
|
||||||
return this.store.stockList.reduce((acc, stock) => {
|
return (
|
||||||
|
this.store.stockList.reduce((acc, stock) => {
|
||||||
if (stock.isLoco) acc += stock.count;
|
if (stock.isLoco) acc += stock.count;
|
||||||
return acc;
|
return acc;
|
||||||
}, 0) > 2;
|
}, 0) > 2
|
||||||
|
);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
+26
-5
@@ -1,4 +1,4 @@
|
|||||||
import { IStore } from './types';
|
import { IStockData, IStore } from './types';
|
||||||
import { defineStore } from 'pinia';
|
import { defineStore } from 'pinia';
|
||||||
import {
|
import {
|
||||||
acceptableMass,
|
acceptableMass,
|
||||||
@@ -10,6 +10,7 @@ import {
|
|||||||
totalLength,
|
totalLength,
|
||||||
totalMass,
|
totalMass,
|
||||||
} from './utils/vehicleUtils';
|
} from './utils/vehicleUtils';
|
||||||
|
import http from './http';
|
||||||
|
|
||||||
export const useStore = defineStore({
|
export const useStore = defineStore({
|
||||||
id: 'store',
|
id: 'store',
|
||||||
@@ -21,6 +22,7 @@ export const useStore = defineStore({
|
|||||||
chosenVehicle: null,
|
chosenVehicle: null,
|
||||||
|
|
||||||
isColdStart: false,
|
isColdStart: false,
|
||||||
|
isDoubleManned: false,
|
||||||
|
|
||||||
showSupporter: false,
|
showSupporter: false,
|
||||||
imageLoading: false,
|
imageLoading: false,
|
||||||
@@ -46,22 +48,43 @@ export const useStore = defineStore({
|
|||||||
isRealStockListCardOpen: false,
|
isRealStockListCardOpen: false,
|
||||||
|
|
||||||
stockData: undefined,
|
stockData: undefined,
|
||||||
} as IStore),
|
|
||||||
|
lastFocusedElement: null,
|
||||||
|
}) as IStore,
|
||||||
|
|
||||||
getters: {
|
getters: {
|
||||||
locoDataList: (state) => locoDataList(state),
|
locoDataList: (state) => locoDataList(state),
|
||||||
carDataList: (state) => carDataList(state),
|
carDataList: (state) => carDataList(state),
|
||||||
|
vehicleDataList: (state) => [...locoDataList(state), ...carDataList(state)],
|
||||||
totalMass: (state) => totalMass(state),
|
totalMass: (state) => totalMass(state),
|
||||||
totalLength: (state) => totalLength(state),
|
totalLength: (state) => totalLength(state),
|
||||||
maxStockSpeed: (state) => maxStockSpeed(state),
|
maxStockSpeed: (state) => maxStockSpeed(state),
|
||||||
isTrainPassenger: (state) => isTrainPassenger(state),
|
isTrainPassenger: (state) => isTrainPassenger(state),
|
||||||
chosenRealStock: (state) => chosenRealStock(state),
|
chosenRealStock: (state) => chosenRealStock(state),
|
||||||
acceptableMass: (state) => acceptableMass(state),
|
acceptableMass: (state) => acceptableMass(state),
|
||||||
|
|
||||||
|
stockSupportsColdStart: (state) => {
|
||||||
|
if (state.stockList.length == 0) return false;
|
||||||
|
if (!state.stockList[0].isLoco) return false;
|
||||||
|
|
||||||
|
const headingLoco = state.stockList[0];
|
||||||
|
|
||||||
|
return state.stockData?.props.find((stock) => stock.type == headingLoco.constructionType)?.coldStart ?? false;
|
||||||
|
},
|
||||||
|
|
||||||
|
stockSupportsDoubleManning: (state) => {
|
||||||
|
if (state.stockList.length == 0) return false;
|
||||||
|
if (!state.stockList[0].isLoco) return false;
|
||||||
|
|
||||||
|
const headingLoco = state.stockList[0];
|
||||||
|
|
||||||
|
return state.stockData?.props.find((stock) => stock.type == headingLoco.constructionType)?.doubleManned ?? false;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
actions: {
|
actions: {
|
||||||
async fetchStockInfoData() {
|
async fetchStockInfoData() {
|
||||||
const stockData = await (await fetch(`https://spythere.github.io/api/td2/data/stockInfo.json`)).json();
|
const stockData = (await http.get<IStockData>('td2/data/stockInfo.json')).data;
|
||||||
this.stockData = stockData;
|
this.stockData = stockData;
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -82,5 +105,3 @@ export const useStore = defineStore({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
+43
-6
@@ -1,5 +1,3 @@
|
|||||||
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');
|
|
||||||
|
|
||||||
$breakpointMd: 960px;
|
$breakpointMd: 960px;
|
||||||
$breakpointSm: 550px;
|
$breakpointSm: 550px;
|
||||||
|
|
||||||
@@ -8,6 +6,36 @@ $textColor: #fff;
|
|||||||
$secondaryColor: #222;
|
$secondaryColor: #222;
|
||||||
$accentColor: #e4c428;
|
$accentColor: #e4c428;
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Lato';
|
||||||
|
src:
|
||||||
|
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';
|
||||||
|
src:
|
||||||
|
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';
|
||||||
|
src:
|
||||||
|
url('/fonts/Lato-Regular.woff2') format('woff2'),
|
||||||
|
url('/fonts/Lato-Regular.woff') format('woff');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: 7px;
|
width: 7px;
|
||||||
height: 7px;
|
height: 7px;
|
||||||
@@ -32,7 +60,7 @@ html {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
font-family: 'Lato', sans-serif;
|
font-family: Lato, sans-serif;
|
||||||
|
|
||||||
background-color: $bgColor;
|
background-color: $bgColor;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
@@ -64,7 +92,7 @@ select,
|
|||||||
option,
|
option,
|
||||||
input,
|
input,
|
||||||
button {
|
button {
|
||||||
font-family: 'Lato', sans-serif;
|
font-family: Lato, sans-serif;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -94,7 +122,9 @@ button {
|
|||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
||||||
transition: all 250ms;
|
transition:
|
||||||
|
color 150ms,
|
||||||
|
background-color 150ms;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $accentColor;
|
color: $accentColor;
|
||||||
@@ -111,6 +141,13 @@ button {
|
|||||||
outline: 1px solid white;
|
outline: 1px solid white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&[data-chosen='true'] {
|
||||||
|
background-color: $accentColor;
|
||||||
|
color: black;
|
||||||
|
|
||||||
|
box-shadow: 0 0 5px 1px $accentColor;
|
||||||
|
}
|
||||||
|
|
||||||
&[data-disabled='true'] {
|
&[data-disabled='true'] {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
@@ -148,7 +185,7 @@ button {
|
|||||||
select,
|
select,
|
||||||
input[type='text'],
|
input[type='text'],
|
||||||
input[type='number'] {
|
input[type='number'] {
|
||||||
background: none;
|
background: $bgColor;
|
||||||
border: 2px solid #aaa;
|
border: 2px solid #aaa;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
||||||
|
|||||||
+1
-2
@@ -1,4 +1,4 @@
|
|||||||
@import './global.scss';
|
@import "./global.scss";
|
||||||
|
|
||||||
.tab {
|
.tab {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -77,4 +77,3 @@ hr {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
+26
-17
@@ -8,6 +8,7 @@ export interface IStore {
|
|||||||
chosenVehicle: Vehicle | null;
|
chosenVehicle: Vehicle | null;
|
||||||
|
|
||||||
isColdStart: boolean;
|
isColdStart: boolean;
|
||||||
|
isDoubleManned: boolean;
|
||||||
|
|
||||||
showSupporter: boolean;
|
showSupporter: boolean;
|
||||||
imageLoading: boolean;
|
imageLoading: boolean;
|
||||||
@@ -30,15 +31,20 @@ export interface IStore {
|
|||||||
|
|
||||||
stockSectionMode: 'stock-list' | 'stock-generator' | 'number-generator' | 'wiki-list';
|
stockSectionMode: 'stock-list' | 'stock-generator' | 'number-generator' | 'wiki-list';
|
||||||
stockData?: IStockData;
|
stockData?: IStockData;
|
||||||
|
|
||||||
|
lastFocusedElement: HTMLElement | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export type TStockInfoKey = 'loco-e' | 'loco-s' | 'loco-ezt' | 'loco-szt' | 'car-passenger' | 'car-cargo';
|
export type TLocoGroup = 'loco-e' | 'loco-s' | 'loco-ezt' | 'loco-szt';
|
||||||
|
export type TCarWagonGroup = 'car-passenger' | 'car-cargo';
|
||||||
|
|
||||||
export interface IStockProps {
|
export interface IStockProps {
|
||||||
type: string;
|
type: string;
|
||||||
length: number;
|
length: number;
|
||||||
mass: number;
|
mass: number;
|
||||||
cargo: string;
|
cargo?: string | null;
|
||||||
|
coldStart?: boolean;
|
||||||
|
doubleManned?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IStockData {
|
export interface IStockData {
|
||||||
@@ -52,39 +58,42 @@ export interface IStockData {
|
|||||||
};
|
};
|
||||||
|
|
||||||
info: {
|
info: {
|
||||||
'car-cargo': [string, string, boolean, boolean, string][];
|
'car-cargo': [string, string, boolean, number | null, string][];
|
||||||
'car-passenger': [string, string, boolean, boolean, string][];
|
'car-passenger': [string, string, boolean, number | null, string][];
|
||||||
'loco-e': [string, string, string, string, boolean][];
|
'loco-e': [string, string, string, string, number | null][];
|
||||||
'loco-s': [string, string, string, string, boolean][];
|
'loco-s': [string, string, string, string, number | null][];
|
||||||
'loco-szt': [string, string, string, string, boolean][];
|
'loco-szt': [string, string, string, string, number | null][];
|
||||||
'loco-ezt': [string, string, string, string, boolean][];
|
'loco-ezt': [string, string, string, string, number | null][];
|
||||||
};
|
};
|
||||||
|
|
||||||
props: IStockProps[];
|
props: IStockProps[];
|
||||||
|
|
||||||
usage: { [key: string]: string };
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ILocomotive {
|
export interface ILocomotive {
|
||||||
type: string;
|
type: string;
|
||||||
power: string;
|
power: TLocoGroup;
|
||||||
|
group: TLocoGroup;
|
||||||
constructionType: string;
|
constructionType: string;
|
||||||
cabinType: string;
|
cabinType: string;
|
||||||
maxSpeed: number;
|
maxSpeed: number;
|
||||||
supportersOnly: boolean;
|
isSponsorsOnly: boolean;
|
||||||
|
sponsorsOnlyTimestamp: number;
|
||||||
imageSrc: string;
|
imageSrc: string;
|
||||||
|
|
||||||
mass: number;
|
mass: number;
|
||||||
length: number;
|
length: number;
|
||||||
|
coldStart: boolean;
|
||||||
|
doubleManned: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ICarWagon {
|
export interface ICarWagon {
|
||||||
//"203V_PKPC_Fll_01","203V",true,false,"100",img
|
|
||||||
type: string;
|
type: string;
|
||||||
useType: 'car-passenger' | 'car-cargo';
|
useType: TCarWagonGroup;
|
||||||
|
group: TCarWagonGroup;
|
||||||
constructionType: string;
|
constructionType: string;
|
||||||
loadable: boolean;
|
loadable: boolean;
|
||||||
supportersOnly: boolean;
|
isSponsorsOnly: boolean;
|
||||||
|
sponsorsOnlyTimestamp: number;
|
||||||
maxSpeed: number;
|
maxSpeed: number;
|
||||||
imageSrc: string;
|
imageSrc: string;
|
||||||
|
|
||||||
@@ -108,7 +117,8 @@ export interface IStock {
|
|||||||
maxSpeed: number;
|
maxSpeed: number;
|
||||||
cargo?: { id: string; totalMass: number };
|
cargo?: { id: string; totalMass: number };
|
||||||
isLoco: boolean;
|
isLoco: boolean;
|
||||||
supportersOnly: boolean;
|
isSponsorsOnly: boolean;
|
||||||
|
sponsorsOnlyTimestamp: number;
|
||||||
count: number;
|
count: number;
|
||||||
imgSrc?: string;
|
imgSrc?: string;
|
||||||
}
|
}
|
||||||
@@ -120,4 +130,3 @@ export interface IReadyStockItem {
|
|||||||
number: string;
|
number: string;
|
||||||
name: string;
|
name: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +0,0 @@
|
|||||||
const supportedConstructions = ['303e', '203e'];
|
|
||||||
|
|
||||||
export function locoSupportsColdStart(constructionType: string) {
|
|
||||||
return new RegExp(`(${supportedConstructions.join('|')})`).test(constructionType);
|
|
||||||
}
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
import speedLimitTable from '../constants/speedLimits.json';
|
|
||||||
export type LocoType = keyof typeof speedLimitTable;
|
|
||||||
|
|
||||||
export const calculateSpeedLimit = (locoType: LocoType, stockMass: number, isTrainPassenger: boolean) => {
|
|
||||||
const speedTable = speedLimitTable[locoType][isTrainPassenger ? 'passenger' : 'cargo'];
|
|
||||||
|
|
||||||
if (!speedTable) return undefined;
|
|
||||||
|
|
||||||
let speedLimit = 0;
|
|
||||||
for (let mass in speedTable) if (stockMass > Number(mass)) speedLimit = (speedTable as any)[mass];
|
|
||||||
|
|
||||||
return speedLimit;
|
|
||||||
};
|
|
||||||
|
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
import speedLimits from '../constants/speedLimits.json';
|
||||||
|
import massLimits from '../constants/massLimits.json';
|
||||||
|
|
||||||
|
export type SpeedLimitLocoType = keyof typeof speedLimits;
|
||||||
|
export type MassLimitLocoType = keyof typeof massLimits;
|
||||||
|
|
||||||
|
export function calculateSpeedLimit(locoType: SpeedLimitLocoType, stockMass: number, isTrainPassenger: boolean) {
|
||||||
|
const speedTable = speedLimits[locoType][isTrainPassenger ? 'passenger' : 'cargo'];
|
||||||
|
|
||||||
|
if (!speedTable) return undefined;
|
||||||
|
|
||||||
|
let speedLimit = 0;
|
||||||
|
for (const mass in speedTable) if (stockMass > Number(mass)) speedLimit = (speedTable as any)[mass];
|
||||||
|
|
||||||
|
return speedLimit;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function calculateMassLimit(locoType: MassLimitLocoType, isTrainPassenger: boolean) {
|
||||||
|
if(massLimits[locoType] === undefined) return 0;
|
||||||
|
|
||||||
|
return massLimits[locoType][isTrainPassenger ? 0 : 1] || 0;
|
||||||
|
}
|
||||||
+35
-51
@@ -1,6 +1,6 @@
|
|||||||
import { EVehicleUseType } from '../enums/EVehicleUseType';
|
import { EVehicleUseType } from '../enums/EVehicleUseType';
|
||||||
import { ICarWagon, ILocomotive, IStore, TStockInfoKey } from '../types';
|
import { ICarWagon, ILocomotive, IStore, TCarWagonGroup, TLocoGroup } from '../types';
|
||||||
import { LocoType, calculateSpeedLimit } from './speedLimitUtils';
|
import { MassLimitLocoType, SpeedLimitLocoType, calculateMassLimit, calculateSpeedLimit } from './vehicleLimitsUtils';
|
||||||
|
|
||||||
export function isLocomotive(vehicle: ILocomotive | ICarWagon): vehicle is ILocomotive {
|
export function isLocomotive(vehicle: ILocomotive | ICarWagon): vehicle is ILocomotive {
|
||||||
return (vehicle as ILocomotive).power !== undefined;
|
return (vehicle as ILocomotive).power !== undefined;
|
||||||
@@ -14,25 +14,30 @@ export function locoDataList(state: IStore) {
|
|||||||
return Object.keys(stockData.info).reduce((acc, vehiclePower) => {
|
return Object.keys(stockData.info).reduce((acc, vehiclePower) => {
|
||||||
if (!vehiclePower.startsWith('loco')) return acc;
|
if (!vehiclePower.startsWith('loco')) return acc;
|
||||||
|
|
||||||
const locoVehiclesData = stockData.info[vehiclePower as 'loco-e' | 'loco-s' | 'loco-ezt' | 'loco-szt'];
|
const locoVehiclesData = stockData.info[vehiclePower as TLocoGroup];
|
||||||
|
|
||||||
locoVehiclesData.forEach((loco) => {
|
locoVehiclesData.forEach((loco) => {
|
||||||
if (state.showSupporter && !loco[4]) return;
|
if (state.showSupporter && !loco[4]) return;
|
||||||
|
|
||||||
const [type, constructionType, cabinType, maxSpeed, supportersOnly] = loco;
|
const [type, constructionType, cabinType, maxSpeed, sponsorsTimestamp] = loco;
|
||||||
const locoProps = stockData.props.find((prop) => constructionType == prop.type);
|
const locoProps = stockData.props.find((prop) => constructionType == prop.type);
|
||||||
|
|
||||||
acc.push({
|
acc.push({
|
||||||
power: vehiclePower,
|
power: vehiclePower as TLocoGroup,
|
||||||
|
group: vehiclePower as TLocoGroup,
|
||||||
type,
|
type,
|
||||||
constructionType,
|
constructionType,
|
||||||
cabinType,
|
cabinType,
|
||||||
maxSpeed: Number(maxSpeed),
|
maxSpeed: Number(maxSpeed),
|
||||||
supportersOnly,
|
isSponsorsOnly: Number(sponsorsTimestamp) > Date.now(),
|
||||||
|
sponsorsOnlyTimestamp: Number(sponsorsTimestamp),
|
||||||
imageSrc: '',
|
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,
|
||||||
mass: locoProps?.mass && type.startsWith('2EN') ? 253 : locoProps?.mass || 0,
|
mass: locoProps?.mass && type.startsWith('2EN') ? 253 : locoProps?.mass ?? 0,
|
||||||
|
|
||||||
|
coldStart: locoProps?.coldStart ?? false,
|
||||||
|
doubleManned: locoProps?.doubleManned ?? false,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -48,28 +53,30 @@ export function carDataList(state: IStore) {
|
|||||||
return Object.keys(stockData.info).reduce((acc, vehicleUseType) => {
|
return Object.keys(stockData.info).reduce((acc, vehicleUseType) => {
|
||||||
if (!vehicleUseType.startsWith('car')) return acc;
|
if (!vehicleUseType.startsWith('car')) return acc;
|
||||||
|
|
||||||
const carVehiclesData = stockData.info[vehicleUseType as 'car-passenger' | 'car-cargo'];
|
const carVehiclesData = stockData.info[vehicleUseType as TCarWagonGroup];
|
||||||
|
|
||||||
carVehiclesData.forEach((car) => {
|
carVehiclesData.forEach((car) => {
|
||||||
if (state.showSupporter && !car[3]) return;
|
const [type, constructionType, loadable, sponsorsOnlyTimestamp, maxSpeed] = car;
|
||||||
|
|
||||||
const carPropsData = stockData.props.find((v) => car[0].toString().startsWith(v.type));
|
if (state.showSupporter && Number(sponsorsOnlyTimestamp) <= Date.now()) return;
|
||||||
|
|
||||||
|
const carPropsData = stockData.props.find((v) => type.toString().startsWith(v.type));
|
||||||
|
|
||||||
acc.push({
|
acc.push({
|
||||||
useType: vehicleUseType as 'car-passenger' | 'car-cargo',
|
useType: vehicleUseType as TCarWagonGroup,
|
||||||
type: car[0],
|
group: vehicleUseType as TCarWagonGroup,
|
||||||
constructionType: car[1],
|
type,
|
||||||
loadable: car[2],
|
constructionType,
|
||||||
supportersOnly: car[3],
|
loadable,
|
||||||
maxSpeed: Number(car[4]),
|
isSponsorsOnly: Number(sponsorsOnlyTimestamp) > Date.now(),
|
||||||
|
sponsorsOnlyTimestamp: Number(sponsorsOnlyTimestamp),
|
||||||
|
maxSpeed: Number(maxSpeed),
|
||||||
imageSrc: '',
|
imageSrc: '',
|
||||||
cargoList:
|
cargoList:
|
||||||
!carPropsData || carPropsData.cargo === null
|
carPropsData?.cargo?.split(';').map((cargo) => ({
|
||||||
? []
|
|
||||||
: carPropsData.cargo.split(';').map((cargo) => ({
|
|
||||||
id: cargo.split(':')[0],
|
id: cargo.split(':')[0],
|
||||||
totalMass: Number(cargo.split(':')[1]),
|
totalMass: Number(cargo.split(':')[1]),
|
||||||
})),
|
})) || [],
|
||||||
|
|
||||||
mass: carPropsData?.mass || 0,
|
mass: carPropsData?.mass || 0,
|
||||||
length: carPropsData?.length || 0,
|
length: carPropsData?.length || 0,
|
||||||
@@ -81,10 +88,7 @@ export function carDataList(state: IStore) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function totalMass(state: IStore) {
|
export function totalMass(state: IStore) {
|
||||||
return ~~state.stockList.reduce(
|
return ~~state.stockList.reduce((acc, stock) => acc + (stock.cargo ? stock.cargo.totalMass : stock.mass) * stock.count, 0);
|
||||||
(acc, stock) => acc + (stock.cargo ? stock.cargo.totalMass : stock.mass) * stock.count,
|
|
||||||
0
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function totalLength(state: IStore) {
|
export function totalLength(state: IStore) {
|
||||||
@@ -92,10 +96,7 @@ export function totalLength(state: IStore) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function maxStockSpeed(state: IStore) {
|
export function maxStockSpeed(state: IStore) {
|
||||||
const stockSpeedLimit = state.stockList.reduce(
|
const stockSpeedLimit = state.stockList.reduce((acc, stock) => (stock.maxSpeed < acc || acc == 0 ? stock.maxSpeed : acc), 0);
|
||||||
(acc, stock) => (stock.maxSpeed < acc || acc == 0 ? stock.maxSpeed : acc),
|
|
||||||
0
|
|
||||||
);
|
|
||||||
const headingLoco = state.stockList[0]?.isLoco ? state.stockList[0] : undefined;
|
const headingLoco = state.stockList[0]?.isLoco ? state.stockList[0] : undefined;
|
||||||
|
|
||||||
if (!headingLoco) return stockSpeedLimit;
|
if (!headingLoco) return stockSpeedLimit;
|
||||||
@@ -106,42 +107,26 @@ export function maxStockSpeed(state: IStore) {
|
|||||||
|
|
||||||
const stockMass = totalMass(state);
|
const stockMass = totalMass(state);
|
||||||
|
|
||||||
const speedLimitByMass = calculateSpeedLimit(locoType as LocoType, stockMass, isTrainPassenger(state));
|
const speedLimitByMass = calculateSpeedLimit(locoType as SpeedLimitLocoType, stockMass, isTrainPassenger(state));
|
||||||
|
|
||||||
return speedLimitByMass ? Math.min(stockSpeedLimit, speedLimitByMass) : stockSpeedLimit;
|
return speedLimitByMass ? Math.min(stockSpeedLimit, speedLimitByMass) : stockSpeedLimit;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function acceptableMass(state: IStore) {
|
export function acceptableMass(state: IStore) {
|
||||||
if (state.stockList.length == 0 || !state.stockList[0].isLoco) return 0;
|
if (state.stockList.length == 0 || !state.stockList[0].isLoco) return 0;
|
||||||
const activeLocomotiveType = state.stockList[0].type;
|
|
||||||
|
|
||||||
if (/^SM/.test(activeLocomotiveType)) return 2400;
|
const activeLocomotiveType = state.stockList[0].type.split('-')[0];
|
||||||
|
|
||||||
// Elektryczne EU07 / EP07 / EP08 / ET41
|
const locoMassLimit = calculateMassLimit(activeLocomotiveType as MassLimitLocoType, isTrainPassenger(state));
|
||||||
|
|
||||||
// Pasażerski elektr.
|
return locoMassLimit;
|
||||||
if (isTrainPassenger(state)) {
|
|
||||||
if (/^(EU|EP)/.test(activeLocomotiveType)) return 650;
|
|
||||||
if (/^ET/.test(activeLocomotiveType)) return 700;
|
|
||||||
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Towarowy / inny elektr.
|
|
||||||
if (/^EU/.test(activeLocomotiveType)) return 2000;
|
|
||||||
if (/^ET/.test(activeLocomotiveType)) return 4000;
|
|
||||||
if (/^EP/.test(activeLocomotiveType)) return 650;
|
|
||||||
|
|
||||||
return 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function isTrainPassenger(state: IStore) {
|
export function isTrainPassenger(state: IStore) {
|
||||||
if (state.stockList.length == 0) return false;
|
if (state.stockList.length == 0) return false;
|
||||||
if (state.stockList.every((stock) => stock.isLoco)) return false;
|
if (state.stockList.every((stock) => stock.isLoco)) return false;
|
||||||
|
|
||||||
return state.stockList
|
return state.stockList.filter((stock) => !stock.isLoco).every((stock) => stock.useType === EVehicleUseType.CAR_PASSENGER);
|
||||||
.filter((stock) => !stock.isLoco)
|
|
||||||
.every((stock) => stock.useType === EVehicleUseType.CAR_PASSENGER);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function chosenRealStock(state: IStore) {
|
export function chosenRealStock(state: IStore) {
|
||||||
@@ -158,4 +143,3 @@ export function chosenRealStock(state: IStore) {
|
|||||||
|
|
||||||
return realStockObj;
|
return realStockObj;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,21 +1,21 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<MainContainer />
|
<MainContainer />
|
||||||
<Footer />
|
<FooterVue />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from "vue";
|
||||||
import { useStore } from '../store';
|
import { useStore } from "../store";
|
||||||
|
|
||||||
import MainContainer from '../components/app/MainContainer.vue';
|
import MainContainer from "../components/app/MainContainer.vue";
|
||||||
import Footer from '../components/app/Footer.vue';
|
import FooterVue from "../components/app/Footer.vue";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
MainContainer,
|
MainContainer,
|
||||||
Footer,
|
FooterVue,
|
||||||
},
|
},
|
||||||
|
|
||||||
data: () => ({
|
data: () => ({
|
||||||
|
|||||||
Vendored
+4
-4
@@ -1,7 +1,7 @@
|
|||||||
/// <reference types="vite/client" />
|
/// <reference types="vite/client" />
|
||||||
|
|
||||||
declare module '*.vue' {
|
declare module "*.vue" {
|
||||||
import type { DefineComponent } from 'vue'
|
import type { DefineComponent } from "vue";
|
||||||
const component: DefineComponent<{}, {}, any>
|
const component: DefineComponent<{}, {}, any>;
|
||||||
export default component
|
export default component;
|
||||||
}
|
}
|
||||||
|
|||||||
+23
-6
@@ -13,21 +13,40 @@ export default defineConfig({
|
|||||||
VitePWA({
|
VitePWA({
|
||||||
registerType: 'autoUpdate',
|
registerType: 'autoUpdate',
|
||||||
|
|
||||||
|
devOptions: {
|
||||||
|
suppressWarnings: true,
|
||||||
|
enabled: true,
|
||||||
|
},
|
||||||
|
|
||||||
workbox: {
|
workbox: {
|
||||||
// globPatterns: ['**/*.{js,css,html,png,svg,img}'],
|
globPatterns: ['**/*.{js,css,html,jpg,png,svg,img,woff,woff2}'],
|
||||||
|
|
||||||
runtimeCaching: [
|
runtimeCaching: [
|
||||||
{
|
{
|
||||||
urlPattern: /^https:\/\/rj.td2.info.pl\/dist\/img\/thumbnails\/.*/i,
|
urlPattern: /^https:\/\/rj.td2.info.pl\/dist\/img\/thumbnails\/.*/i,
|
||||||
handler: 'CacheFirst',
|
handler: 'NetworkFirst',
|
||||||
options: {
|
options: {
|
||||||
cacheName: 'swdr-images-cache',
|
cacheName: 'swdr-images-cache',
|
||||||
expiration: {
|
expiration: {
|
||||||
maxEntries: 50,
|
maxEntries: 50,
|
||||||
maxAgeSeconds: 60 * 60 * 24 * 7, // <== 7 days
|
maxAgeSeconds: 60 * 60 * 24, // <== 1 day
|
||||||
},
|
},
|
||||||
cacheableResponse: {
|
cacheableResponse: {
|
||||||
statuses: [404],
|
statuses: [0, 200, 404],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
urlPattern: /^https:\/\/spythere.github.io\/api\/td2\/.*/i,
|
||||||
|
handler: 'NetworkFirst',
|
||||||
|
options: {
|
||||||
|
cacheName: 'spythere-api-cache',
|
||||||
|
expiration: {
|
||||||
|
maxEntries: 150,
|
||||||
|
maxAgeSeconds: 60 * 60 * 24, // <== 1 day
|
||||||
|
},
|
||||||
|
cacheableResponse: {
|
||||||
|
statuses: [0, 200],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@@ -36,5 +55,3 @@ export default defineConfig({
|
|||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user