Spythere/pojazdownik
1
0
Fork 0
mirror of https://github.com/Spythere/pojazdownik.git synced 2026-05-03 11:45:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

eslint & prettier update; api fetching from static server

Browse Source
This commit is contained in:
Spythere
2024-03-27 16:10:53 +01:00
parent f9276f6c71
commit 337425d21c
37 changed files with 636 additions and 565 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/app/AppModals.vue
+3 -3
View File
@@ -7,9 +7,9 @@
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { useStore } from "../../store";
import RealStockCard from "../cards/RealStockCard.vue";
import { defineComponent } from 'vue';
import { useStore } from '../../store';
import RealStockCard from '../cards/RealStockCard.vue';
export default defineComponent({
components: { RealStockCard },
src/components/app/Footer.vue
+9 -12
View File
@@ -3,35 +3,32 @@
<i18n-t keypath="footer.disclaimer" tag="div" class="text--grayed">
<template #tos>
<a style="color: #ccc" :href="$t('footer.tos-href')" target="_blank">
{{ $t("footer.tos") }}
{{ $t('footer.tos') }}
</a>
</template>
</i18n-t>
<div class="text--grayed" v-if="store.stockData">
{{ $t("footer.version-check", { version: store.stockData.version }) }}
<div class="text--grayed" v-if="store.vehiclesAPIData">
{{ $t('footer.version-check', { version: store.vehiclesAPIData.version }) }}
</div>
<div>
&copy;
<a href="https://td2.info.pl/profile/?u=20777" target="_blank"
>Spythere</a
>
{{ new Date().getUTCFullYear() }} | v{{ VERSION
}}{{ !isOnProductionHost ? "dev" : "" }}
<a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
{{ new Date().getUTCFullYear() }} | v{{ VERSION }}{{ !isOnProductionHost ? 'dev' : '' }}
</div>
</footer>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import packageInfo from "../../../package.json";
import { useStore } from "../../store";
import { defineComponent } from 'vue';
import packageInfo from '../../../package.json';
import { useStore } from '../../store';
export default defineComponent({
data() {
return {
isOnProductionHost: location.hostname == "pojazdownik-td2.web.app",
isOnProductionHost: location.hostname == 'pojazdownik-td2.web.app',
VERSION: packageInfo.version,
store: useStore(),
};
src/components/app/MainContainer.vue
+6 -6
View File
@@ -8,11 +8,11 @@
</template>
<script lang="ts">
import { defineComponent } from "vue";
import LogoSection from "../sections/LogoSection.vue";
import InputsSection from "../sections/InputsSection.vue";
import TrainImageSection from "../sections/TrainImageSection.vue";
import StockSection from "../sections/StockSection.vue";
import { defineComponent } from 'vue';
import LogoSection from '../sections/LogoSection.vue';
import InputsSection from '../sections/InputsSection.vue';
import TrainImageSection from '../sections/TrainImageSection.vue';
import StockSection from '../sections/StockSection.vue';
export default defineComponent({
components: { LogoSection, InputsSection, TrainImageSection, StockSection },
@@ -20,7 +20,7 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import "../../styles/global.scss";
@import '../../styles/global.scss';
main {
display: grid;
src/components/cards/RealStockCard.vue
+42 -97
View File
@@ -1,23 +1,15 @@
<template>
<div
class="real-stock-card g-card"
@keydown.esc="store.isRealStockListCardOpen = false"
>
<div class="real-stock-card g-card" @keydown.esc="store.isRealStockListCardOpen = false">
<div class="g-card_bg" @click="store.isRealStockListCardOpen = false"></div>
<div class="card_content">
<div class="card_nav">
<div class="top-pane">
<h1>
{{ $t("realstock.title") }}
<a href="https://td2.info.pl/profile/?u=17708" target="_blank"
>Railtrains997</a
>
{{ $t('realstock.title') }}
<a href="https://td2.info.pl/profile/?u=17708" target="_blank">Railtrains997</a>
</h1>
<button
class="btn exit-btn"
@click="store.isRealStockListCardOpen = false"
>
<button class="btn exit-btn" @click="store.isRealStockListCardOpen = false">
&Cross;
</button>
</div>
@@ -31,7 +23,7 @@
<datalist id="readyStockDataList">
<option
v-for="stock in store.readyStockList"
v-for="stock in store.realCompositionList"
:value="stock.stockId"
:key="stock.name"
>
@@ -56,31 +48,22 @@
</datalist>
<button class="btn" @click="resetStockFilters">
{{ $t("realstock.action-reset") }}
{{ $t('realstock.action-reset') }}
</button>
</div>
</div>
<ul class="card_list" ref="list" @scroll="onListScroll">
<li
v-for="rStock in computedReadyStockList"
:key="rStock.stockId"
:data-last-selected="store.chosenRealStockName === rStock.stockId"
>
<li v-for="rStock in computedReadyStockList" :key="rStock.stockId">
<!-- :data-last-selected="store.ch === rStock.stockId" -->
<div
class="stock-title"
tabindex="0"
@click="chooseStock(rStock)"
@keydown.enter="chooseStock(rStock)"
>
<img
class="stock-icon"
:src="getIconURL(rStock.type)"
:alt="rStock.type"
/>
<b class="text--accent" style="margin-left: 5px">
{{ rStock.name }}</b
>
<img class="stock-icon" :src="getIconURL(rStock.type)" :alt="rStock.type" />
<b class="text--accent" style="margin-left: 5px"> {{ rStock.name }}</b>
<div>{{ rStock.number }}</div>
</div>
@@ -111,24 +94,19 @@
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { defineComponent } from 'vue';
import { useStore } from "../../store";
import imageMixin from "../../mixins/imageMixin";
import stockMixin from "../../mixins/stockMixin";
import { useStore } from '../../store';
import imageMixin from '../../mixins/imageMixin';
import stockMixin from '../../mixins/stockMixin';
import { IReadyStockItem } from "../../types";
import http from "../../http";
interface ResponseJSONData {
[key: string]: string;
}
import { IRealComposition } from '../../types';
function getVehicleType(stockType: string) {
if (/^E/.test(stockType)) return "loco-e";
if (/^S/.test(stockType)) return "loco-s";
if (/^E/.test(stockType)) return 'loco-e';
if (/^S/.test(stockType)) return 'loco-s';
return "car-passenger";
return 'car-passenger';
}
export default defineComponent({
@@ -136,55 +114,51 @@ export default defineComponent({
data: () => ({
store: useStore(),
responseStatus: "loading",
responseStatus: 'loading',
isMobile:
"ontouchstart" in document.documentElement &&
navigator.userAgent.match(/Mobi/)
'ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/)
? true
: false,
observer: null as IntersectionObserver | null,
searchedReadyStockName: "",
searchedReadyStockString: "",
searchedReadyStockName: '',
searchedReadyStockString: '',
visibleIndexesTo: 0,
lastSelectedStockId: null as string | null,
scrollTop: 0,
}),
async mounted() {
mounted() {
this.mountObserver();
this.fetchStockListData();
},
activated() {
(this.$refs["focus"] as HTMLElement).focus();
(this.$refs['focus'] as HTMLElement).focus();
(this.$refs["list"] as HTMLElement).scrollTo({
(this.$refs['list'] as HTMLElement).scrollTo({
top: this.scrollTop,
behavior: "auto",
behavior: 'auto',
});
},
computed: {
computedReadyStockList() {
if (this.searchedReadyStockName == null) return this.store.readyStockList;
return this.store.readyStockList
computedReadyStockList(): IRealComposition[] {
return this.store.realCompositionList
.filter(
(rs) =>
rs.stockId
(rc) =>
rc.stockId
.toLocaleLowerCase()
.includes(this.searchedReadyStockName.toLocaleLowerCase()) &&
rs.stockString
rc.stockString
.toLocaleLowerCase()
.includes(this.searchedReadyStockString.toLocaleLowerCase()),
.includes(this.searchedReadyStockString.toLocaleLowerCase())
)
.filter((_, i) => i <= this.visibleIndexesTo);
},
computedAvailableStockTypes() {
return this.store.readyStockList
return this.store.realCompositionList
.reduce((acc, rs) => {
rs.stockString.split(";").forEach((s) => {
rs.stockString.split(';').forEach((s) => {
if (!acc.includes(s)) acc.push(s);
});
@@ -198,7 +172,7 @@ export default defineComponent({
computedReadyStockList(curr, prev) {
if (curr.length < prev.length) {
this.visibleIndexesTo = 20;
(this.$refs["list"] as HTMLElement).scrollTo({
(this.$refs['list'] as HTMLElement).scrollTo({
top: 0,
});
}
@@ -206,41 +180,12 @@ export default defineComponent({
},
methods: {
async fetchStockListData() {
const readyStockJSONData = (
await http.get<ResponseJSONData>("td2/data/readyStock.json")
).data;
if (!readyStockJSONData) {
this.responseStatus = "error";
return;
}
for (let stockKey in readyStockJSONData) {
const [type, number, ...name] = stockKey.split(" ");
const obj = {
number: number.replace(/_/g, "/"),
name: name.join(" "),
stockString: readyStockJSONData[stockKey],
type,
};
this.store.readyStockList.push({
...obj,
stockId: `${obj.type} ${obj.number} ${obj.name}`,
});
}
this.responseStatus = "loaded";
},
mountObserver() {
this.observer = new IntersectionObserver((entries) => {
if (entries[0].intersectionRatio > 0) this.visibleIndexesTo += 20;
});
this.observer.observe(this.$refs["bottom"] as HTMLElement);
this.observer.observe(this.$refs['bottom'] as HTMLElement);
},
getImageUrl(name: string) {
@@ -248,11 +193,11 @@ export default defineComponent({
},
resetStockFilters() {
this.searchedReadyStockName = "";
this.searchedReadyStockString = "";
this.searchedReadyStockName = '';
this.searchedReadyStockString = '';
},
chooseStock(stockItem: IReadyStockItem) {
chooseStock(stockItem: IRealComposition) {
this.loadStockFromString(stockItem.stockString);
this.lastSelectedStockId = stockItem.stockId;
this.store.isRealStockListCardOpen = false;
@@ -261,7 +206,7 @@ export default defineComponent({
onStockItemError(e: Event, stockType: string) {
const imageEl = e.target as HTMLImageElement;
imageEl.src = `images/${getVehicleType(stockType)}-unknown.png`;
imageEl.style.opacity = "1";
imageEl.style.opacity = '1';
},
onListScroll(e: Event) {
@@ -275,7 +220,7 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import "../../styles/global.scss";
@import '../../styles/global.scss';
.exit-btn {
font-size: 1.2em;
@@ -361,7 +306,7 @@ ul {
gap: 1rem;
padding: 0.1em;
&[data-last-selected="true"] .stock-title {
&[data-last-selected='true'] .stock-title {
border: 1px solid $accentColor;
}
src/components/common/Checkbox.vue
+2 -2
View File
@@ -27,7 +27,7 @@ div {
user-select: none;
&::before {
content: "\2716";
content: '\2716';
margin-right: 0.5em;
color: #aaa;
}
@@ -51,7 +51,7 @@ input {
&::before {
color: palegreen;
content: "\2714";
content: '\2714';
}
}
}
src/components/sections/InputsSection.vue
+21 -6
View File
@@ -27,7 +27,9 @@
<option :value="null" disabled>
{{ $t('inputs.input-vehicle') }}
</option>
<option v-for="loco in locoOptions" :value="loco" :key="loco.type">{{ loco.type }}<b v-if="loco.isSponsorsOnly">*</b></option>
<option v-for="loco in locoOptions" :value="loco" :key="loco.type">
{{ loco.type }}<b v-if="loco.isSponsorsOnly">*</b>
</option>
</select>
</div>
@@ -56,7 +58,9 @@
{{ $t('inputs.input-carwagon') }}
</option>
<option v-for="car in carOptions" :value="car" :key="car.type">{{ car.type }}<b v-if="car.isSponsorsOnly">*</b></option>
<option v-for="car in carOptions" :value="car" :key="car.type">
{{ car.type }}<b v-if="car.isSponsorsOnly">*</b>
</option>
</select>
</div>
@@ -65,7 +69,9 @@
<select
id="cargo-select"
:disabled="
(store.chosenCar && !store.chosenCar.loadable) || (store.chosenCar && store.chosenCar.useType == 'car-passenger') || !store.chosenCar
(store.chosenCar && !store.chosenCar.loadable) ||
(store.chosenCar && store.chosenCar.useType == 'car-passenger') ||
!store.chosenCar
"
data-select="cargo"
data-ignore-outside="1"
@@ -90,7 +96,12 @@
<button class="btn" @click="addVehicle(store.chosenVehicle, store.chosenCargo)">
{{ $t('inputs.action-add') }}
</button>
<button class="btn" @click="switchVehicles" :disabled="store.chosenStockListIndex == -1" :data-disabled="store.chosenStockListIndex == -1">
<button
class="btn"
@click="switchVehicles"
:disabled="store.chosenStockListIndex == -1"
:data-disabled="store.chosenStockListIndex == -1"
>
{{ $t('inputs.action-swap') }}
<b class="text--accent">
{{ store.chosenStockListIndex == -1 ? '' : `${store.chosenStockListIndex + 1}.` }}
@@ -173,7 +184,8 @@ export default defineComponent({
addOrSwitchVehicle() {
if (!this.store.chosenVehicle) return;
if (this.store.chosenStockListIndex == -1) this.addVehicle(this.store.chosenVehicle, this.store.chosenCargo);
if (this.store.chosenStockListIndex == -1)
this.addVehicle(this.store.chosenVehicle, this.store.chosenCargo);
else this.switchVehicles();
},
@@ -216,7 +228,10 @@ export default defineComponent({
this.store.chosenVehicle = type == 'loco' ? this.store.chosenLoco : this.store.chosenCar;
this.store.chosenCargo = this.store.chosenCar?.cargoTypes.find((cargo) => cargo.id == this.store.chosenCargo?.id) || null;
this.store.chosenCargo =
this.store.chosenCar?.cargoTypes.find(
(cargo) => cargo.id == this.store.chosenCargo?.id
) || null;
});
},
},
src/components/sections/LogoSection.vue
+9 -13
View File
@@ -1,10 +1,6 @@
<template>
<section class="logo-section">
<img
:src="`/logo-${$i18n.locale}.svg`"
alt="logo pojazdownik"
@click="navigate"
/>
<img :src="`/logo-${$i18n.locale}.svg`" alt="logo pojazdownik" @click="navigate" />
<div class="actions">
<button
@@ -26,31 +22,31 @@ export default {
return {
localeActions: [
{
name: "POLSKI",
locale: "pl",
name: 'POLSKI',
locale: 'pl',
},
{
name: "ENGLISH",
locale: "en",
name: 'ENGLISH',
locale: 'en',
},
],
};
},
methods: {
navigate() {
window.location.pathname = "";
window.location.pathname = '';
},
chooseLocale(locale: string) {
this.$i18n.locale = locale;
window.localStorage.setItem("locale", locale);
window.localStorage.setItem('locale', locale);
},
},
};
</script>
<style lang="scss" scoped>
@import "../../styles/global.scss";
@import '../../styles/global.scss';
.logo-section {
grid-row: 1;
@@ -69,7 +65,7 @@ export default {
display: flex;
gap: 0.5em;
button[data-selected="true"] {
button[data-selected='true'] {
font-weight: bold;
color: $accentColor;
text-decoration: underline;
src/components/sections/StockSection.vue
+19 -19
View File
@@ -23,12 +23,12 @@
</template>
<script lang="ts" setup>
import { computed, onMounted, ref } from "vue";
import { useStore } from "../../store";
import StockListTab from "../tabs/StockListTab.vue";
import StockGeneratorTab from "../tabs/StockGeneratorTab.vue";
import NumberGeneratorTab from "../tabs/NumberGeneratorTab.vue";
import WikiListTab from "../tabs/WikiListTab.vue";
import { computed, onMounted, ref } from 'vue';
import { useStore } from '../../store';
import StockListTab from '../tabs/StockListTab.vue';
import StockGeneratorTab from '../tabs/StockGeneratorTab.vue';
import NumberGeneratorTab from '../tabs/NumberGeneratorTab.vue';
import WikiListTab from '../tabs/WikiListTab.vue';
const sectionButtonRefs = ref([]);
@@ -36,36 +36,36 @@ const store = useStore();
type SectionMode = typeof store.stockSectionMode;
const sectionModes: SectionMode[] = [
"stock-list",
"wiki-list",
"number-generator",
"stock-generator",
'stock-list',
'wiki-list',
'number-generator',
'stock-generator',
];
onMounted(() => {
window.addEventListener("keydown", (e) => {
window.addEventListener('keydown', (e) => {
if (e.target instanceof HTMLInputElement) return;
if (/[1234]/.test(e.key)) {
const keyNum = Number(e.key);
store.stockSectionMode = sectionModes[keyNum - 1];
(sectionButtonRefs.value[keyNum - 1] as HTMLButtonElement).focus();
(sectionButtonRefs.value[keyNum - 1] as HTMLButtonElement)?.focus();
}
});
});
const chosenSectionComponent = computed(() => {
switch (store.stockSectionMode) {
case "stock-list":
case 'stock-list':
return StockListTab;
case "wiki-list":
case 'wiki-list':
return WikiListTab;
case "stock-generator":
case 'stock-generator':
return StockGeneratorTab;
case "number-generator":
case 'number-generator':
return NumberGeneratorTab;
default:
@@ -79,7 +79,7 @@ function chooseSection(sectionId: SectionMode) {
</script>
<style lang="scss">
@import "../../styles/global.scss";
@import '../../styles/global.scss';
// Tab change animation
.tab-change {
@@ -121,14 +121,14 @@ function chooseSection(sectionId: SectionMode) {
left: 50%;
transform: translateX(-50%);
content: "";
content: '';
width: 0;
height: 2px;
transition: all 100ms;
background-color: $accentColor;
}
&[data-selected="true"]::after {
&[data-selected='true']::after {
width: 100%;
}
}
src/components/sections/TrainImageSection.vue
+23 -8
View File
@@ -3,7 +3,11 @@
<div class="train-image__content" :class="{ sponsor: store.chosenVehicle?.isSponsorsOnly }">
<img
tabindex="0"
:src="store.chosenVehicle ? getThumbnailURL(store.chosenVehicle.type, 'small') : '/images/placeholder.jpg'"
:src="
store.chosenVehicle
? getThumbnailURL(store.chosenVehicle.type, 'small')
: '/images/placeholder.jpg'
"
@click="onImageClick"
@keydown.enter="onImageClick"
@error="onImageError"
@@ -14,13 +18,22 @@
<div class="train-image__info" v-if="store.chosenVehicle">
<b class="text--accent">{{ store.chosenVehicle.type }}</b> &bull;
<b style="color: #ccc">
{{ $t(`preview.${isLocomotive(store.chosenVehicle) ? store.chosenVehicle.power : store.chosenVehicle.useType}`) }}
{{
$t(
`preview.${isLocomotive(store.chosenVehicle) ? store.chosenVehicle.power : store.chosenVehicle.useType}`
)
}}
</b>
<div style="color: #ccc">
<div>{{ store.chosenVehicle.length }}m | {{ (store.chosenVehicle.weight / 1000).toFixed(1) }}t | {{ store.chosenVehicle.maxSpeed }} km/h</div>
<div>
{{ store.chosenVehicle.length }}m | {{ (store.chosenVehicle.weight / 1000).toFixed(1) }}t
| {{ store.chosenVehicle.maxSpeed }} km/h
</div>
<div v-if="isLocomotive(store.chosenVehicle)">{{ $t('preview.cabin') }} {{ store.chosenVehicle.cabinType }}</div>
<div v-if="isLocomotive(store.chosenVehicle)">
{{ $t('preview.cabin') }} {{ store.chosenVehicle.cabinType }}
</div>
<div v-else>
{{
@@ -32,7 +45,9 @@
<b style="color: salmon" v-if="store.chosenVehicle.isSponsorsOnly">{{
$t('preview.sponsor-only', [
new Date(store.chosenVehicle.sponsorsOnlyTimestamp).toLocaleDateString($i18n.locale == 'pl' ? 'pl-PL' : 'en-GB'),
new Date(store.chosenVehicle.sponsorsOnlyTimestamp).toLocaleDateString(
$i18n.locale == 'pl' ? 'pl-PL' : 'en-GB'
),
])
}}</b>
</div>
@@ -46,7 +61,7 @@
import { computed, defineComponent } from 'vue';
import { useStore } from '../../store';
import { isLocomotive } from '../../utils/vehicleUtils';
import { ILocomotive, Vehicle } from '../../types';
import { ILocomotive, IVehicle } from '../../types';
import imageMixin from '../../mixins/imageMixin';
export default defineComponent({
@@ -68,7 +83,7 @@ export default defineComponent({
},
watch: {
chosenVehicle(vehicle: Vehicle, prevVehicle: Vehicle) {
chosenVehicle(vehicle: IVehicle, prevVehicle: IVehicle) {
if (vehicle && vehicle.type != prevVehicle?.type) {
this.store.imageLoading = true;
}
@@ -87,7 +102,7 @@ export default defineComponent({
el.src = '/images/placeholder.jpg';
},
isLocomotive(vehicle: Vehicle): vehicle is ILocomotive {
isLocomotive(vehicle: IVehicle): vehicle is ILocomotive {
return isLocomotive(vehicle);
},
src/components/tabs/NumberGeneratorTab.vue
+48 -87
View File
@@ -1,20 +1,16 @@
<template>
<div class="number-generator tab">
<div class="tab_header">
<h2>{{ $t("numgen.title") }}</h2>
<h3>{{ $t("numgen.subtitle") }}</h3>
<h2>{{ $t('numgen.title') }}</h2>
<h3>{{ $t('numgen.subtitle') }}</h3>
</div>
<div class="tab_content">
<div class="category-select">
<label for="category"> {{ $t("numgen.train-category") }}</label>
<select
id="category"
v-model="chosenCategory"
@change="randomizeTrainNumber()"
>
<label for="category"> {{ $t('numgen.train-category') }}</label>
<select id="category" v-model="chosenCategory" @change="randomizeTrainNumber()">
<option :value="null" disabled>
{{ $t("numgen.train-category") }}
{{ $t('numgen.train-category') }}
</option>
<option
v-for="(_, category) in genData.categoriesRules"
@@ -28,40 +24,24 @@
<div class="regions-select">
<div>
<label for="begin-region"> {{ $t("numgen.start-region") }}</label>
<select
id="begin-region"
v-model="beginRegionName"
@change="randomizeTrainNumber()"
>
<label for="begin-region"> {{ $t('numgen.start-region') }}</label>
<select id="begin-region" v-model="beginRegionName" @change="randomizeTrainNumber()">
<option :value="null" disabled>
{{ $t("numgen.start-region") }}
{{ $t('numgen.start-region') }}
</option>
<option
v-for="(_, name) in genData.regionNumbers"
:key="name"
:value="name"
>
<option v-for="(_, name) in genData.regionNumbers" :key="name" :value="name">
{{ name }}
</option>
</select>
</div>
<div>
<label for="end-region"> {{ $t("numgen.end-region") }}</label>
<select
id="end-region"
v-model="endRegionName"
@change="randomizeTrainNumber()"
>
<label for="end-region"> {{ $t('numgen.end-region') }}</label>
<select id="end-region" v-model="endRegionName" @change="randomizeTrainNumber()">
<option :value="null" disabled>
{{ $t("numgen.end-region") }}
{{ $t('numgen.end-region') }}
</option>
<option
v-for="(_, name) in genData.regionNumbers"
:key="name"
:value="name"
>
<option v-for="(_, name) in genData.regionNumbers" :key="name" :value="name">
{{ name }}
</option>
</select>
@@ -70,71 +50,58 @@
<div class="generated-number" @click="copyNumber">
<span v-if="trainNumber">
{{ $t("numgen.number-info") }}
{{ $t('numgen.number-info') }}
<b class="text--accent">{{ trainNumber }}</b>
</span>
<span v-else>{{ $t("numgen.warning") }}</span>
<span v-else>{{ $t('numgen.warning') }}</span>
</div>
<div
class="category-rules"
v-if="chosenCategory && categoryRules && trainNumber"
>
<div class="category-rules" v-if="chosenCategory && categoryRules && trainNumber">
<!-- First & second digit (the same regions) -->
<div
v-if="
beginRegionName && endRegionName && beginRegionName == endRegionName
"
>
<b>{{ $t("numgen.rules.two-first-digits") }}</b>
{{ $t("numgen.rules.from-pool") }}
<b class="text--accent">{{
genData.sameRegions[beginRegionName].join(", ")
}}</b>
{{ $t("numgen.rules.for-region") }} {{ beginRegionName }}
<div v-if="beginRegionName && endRegionName && beginRegionName == endRegionName">
<b>{{ $t('numgen.rules.two-first-digits') }}</b>
{{ $t('numgen.rules.from-pool') }}
<b class="text--accent">{{ genData.sameRegions[beginRegionName].join(', ') }}</b>
{{ $t('numgen.rules.for-region') }} {{ beginRegionName }}
</div>
<!-- First & second digit (different regions) -->
<div v-else>
<div>
<b>
{{ $t("numgen.rules.first-digit") }}
{{ $t('numgen.rules.first-digit') }}
<span class="text--accent">{{ trainNumber[0] }}</span>
</b>
{{ $t("numgen.rules.for-region-begin") }} {{ beginRegionName }}
{{ $t('numgen.rules.for-region-begin') }} {{ beginRegionName }}
</div>
<div>
<b>
{{ $t("numgen.rules.second-digit") }}
{{ $t('numgen.rules.second-digit') }}
<span class="text--accent">{{ trainNumber[1] }} </span>
</b>
{{ $t("numgen.rules.for-region-end") }} {{ endRegionName }}
{{ $t('numgen.rules.for-region-end') }} {{ endRegionName }}
</div>
</div>
<!-- Third digit (non-passenger only) -->
<div v-if="categoryRules[0] != null">
<b>
{{ $t("numgen.rules.third-digit") }}
{{ $t('numgen.rules.third-digit') }}
<span class="text--accent">{{ categoryRules[0] }}</span>
</b>
{{ $t("numgen.rules.for-category") }} {{ chosenCategory }}
{{ $t('numgen.rules.for-category') }} {{ chosenCategory }}
</div>
<!-- Last digits -->
<div>
<b>
{{
$t(
`numgen.rules.${categoryRules[1]?.length == 3 ? "three" : "two"}-last-digits`,
)
$t(`numgen.rules.${categoryRules[1]?.length == 3 ? 'three' : 'two'}-last-digits`)
}}</b
>
{{ $t("numgen.rules.from-range") }}
<b class="text--accent"
>{{ categoryRules[1] }}-{{ categoryRules[2] }}</b
>
{{ $t('numgen.rules.from-range') }}
<b class="text--accent">{{ categoryRules[1] }}-{{ categoryRules[2] }}</b>
</div>
</div>
@@ -142,7 +109,7 @@
<div class="tab_links">
<a :href="$t('numgen.td2-wiki-link')" target="_blank">
{{ $t("numgen.td2-wiki") }}
{{ $t('numgen.td2-wiki') }}
</a>
</div>
@@ -150,15 +117,15 @@
<div class="tab_actions">
<button class="btn" @click="randomizeTrainNumber(true)">
{{ $t("numgen.action-random-region") }}
{{ $t('numgen.action-random-region') }}
</button>
<button class="btn" @click="randomizeCategory">
{{ $t("numgen.action-random-category") }}
{{ $t('numgen.action-random-category') }}
</button>
<button class="btn" @click="randomizeTrainNumber(false)">
{{ $t("numgen.action-random-number") }}
{{ $t('numgen.action-random-number') }}
</button>
</div>
</div>
@@ -166,11 +133,11 @@
</template>
<script setup lang="ts">
import { Ref, ref } from "vue";
import { useI18n } from "vue-i18n";
import { Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import genData from "../../constants/numberGeneratorData.json";
import { computed } from "vue";
import genData from '../../constants/numberGeneratorData.json';
import { computed } from 'vue';
const i18n = useI18n();
type RegionName = keyof typeof genData.regionNumbers;
@@ -185,7 +152,7 @@ const trainNumber = ref(null) as Ref<string | null>;
const copyNumber = () => {
if (trainNumber.value) {
navigator.clipboard.writeText(trainNumber.value);
alert(i18n.t("numgen.alert"));
alert(i18n.t('numgen.alert'));
}
};
@@ -208,16 +175,12 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
const regionKeys = Object.keys(genData.regionNumbers);
if (beginRegionName.value == null || randomizeRegions)
beginRegionName.value = regionKeys[
(regionKeys.length * Math.random()) << 0
] as RegionName;
beginRegionName.value = regionKeys[(regionKeys.length * Math.random()) << 0] as RegionName;
if (endRegionName.value == null || randomizeRegions)
endRegionName.value = regionKeys[
(regionKeys.length * Math.random()) << 0
] as RegionName;
endRegionName.value = regionKeys[(regionKeys.length * Math.random()) << 0] as RegionName;
let number = "";
let number = '';
// Two first numbers (begin & end regions)
if (beginRegionName.value == endRegionName.value) {
@@ -239,22 +202,20 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
}
// Choose default category if it's not chosen
if (chosenCategory.value == null) chosenCategory.value = "EI";
if (chosenCategory.value == null) chosenCategory.value = 'EI';
// Get category rules
const [thirdNumber, minRange, maxRange] = categoryRules.value!;
// Third number
number += thirdNumber ?? "";
number += thirdNumber ?? '';
// Remaining numbers
const rangeNums = minRange!.length;
const randRange = Math.floor(
Math.random() * (Number(maxRange) - Number(minRange)) + Number(minRange),
Math.random() * (Number(maxRange) - Number(minRange)) + Number(minRange)
).toString();
const leadingZeros = new Array(Math.abs(randRange.length - rangeNums))
.fill("0")
.join("");
const leadingZeros = new Array(Math.abs(randRange.length - rangeNums)).fill('0').join('');
number += `${leadingZeros}${randRange}`;
@@ -263,8 +224,8 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
</script>
<style lang="scss" scoped>
@import "../../styles/tab.scss";
@import "../../styles/global.scss";
@import '../../styles/tab.scss';
@import '../../styles/global.scss';
label {
display: block;
src/components/tabs/StockGeneratorTab.vue
+34 -12
View File
@@ -85,15 +85,27 @@
<hr />
<div class="tab_actions">
<button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock()">
<button
class="btn"
:data-disabled="computedChosenCarTypes.size == 0"
@click="generateStock()"
>
{{ $t('stockgen.action-generate') }}
</button>
<button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock(true)">
<button
class="btn"
:data-disabled="computedChosenCarTypes.size == 0"
@click="generateStock(true)"
>
{{ $t('stockgen.action-generate-empty') }}
</button>
<button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="resetChosenCargo">
<button
class="btn"
:data-disabled="computedChosenCarTypes.size == 0"
@click="resetChosenCargo"
>
{{ $t('stockgen.action-reset') }}
</button>
</div>
@@ -138,9 +150,9 @@ export default defineComponent({
},
computedCargoData() {
if (!this.store.stockData?.generator.cargo) return [];
if (!this.store.vehiclesAPIData?.generator.cargo) return [];
const cargoGeneratorData = this.store.stockData.generator.cargo;
const cargoGeneratorData = this.store.vehiclesAPIData.generator.cargo;
return Object.keys(cargoGeneratorData)
.sort((v1, v2) => this.$t(`cargo.${v1}`).localeCompare(this.$t(`cargo.${v2}`)))
@@ -175,14 +187,16 @@ export default defineComponent({
if (!this.isCarGroupingEnabled) return false;
stockList.sort((s1, s2) => {
return (s1.constructionType + s1.cargo?.id).localeCompare(s2.constructionType + s2.cargo?.id);
return (s1.constructionType + s1.cargo?.id).localeCompare(
s2.constructionType + s2.cargo?.id
);
});
},
generateStock(empty = false) {
const generatedChosenStockList = this.chosenCargoTypes.reduce(
(acc, type) => {
this.store.stockData?.generator.cargo[type]
this.store.vehiclesAPIData?.generator.cargo[type]
.filter((c) => !this.excludedCarTypes.includes(c.split(':')[0]))
.forEach((c) => {
const [type, cargoType] = c.split(':');
@@ -192,11 +206,14 @@ export default defineComponent({
if (!cargoType || empty) cargoObjs.push(undefined);
else if (cargoType == 'all') cargoObjs.push(...carWagonObjs[0]!.cargoTypes);
else cargoObjs.push(carWagonObjs[0]?.cargoTypes.find((cargo) => cargo.id == cargoType));
else
cargoObjs.push(carWagonObjs[0]?.cargoTypes.find((cargo) => cargo.id == cargoType));
carWagonObjs.forEach((cw) => {
cargoObjs.forEach((cargoObj) => {
const chosenStock = acc.find((a) => a.constructionType.includes(cw.constructionType));
const chosenStock = acc.find((a) =>
a.constructionType.includes(cw.constructionType)
);
if (!chosenStock)
acc.push({
@@ -225,12 +242,17 @@ export default defineComponent({
this.store.stockList.splice(this.store.stockList[0]?.isLoco ? 1 : 0);
let carCount = 0;
const maxWeight = this.store.acceptableWeight > 0 ? Math.min(this.store.acceptableWeight, this.maxTons * 1000) : this.maxTons * 1000;
const maxWeight =
this.store.acceptableWeight > 0
? Math.min(this.store.acceptableWeight, this.maxTons * 1000)
: this.maxTons * 1000;
// eslint-disable-next-line no-constant-condition
while (true) {
const randomStockType = generatedChosenStockList[~~(Math.random() * generatedChosenStockList.length)];
const { carWagon, cargo } = randomStockType.carPool[~~(Math.random() * randomStockType.carPool.length)];
const randomStockType =
generatedChosenStockList[~~(Math.random() * generatedChosenStockList.length)];
const { carWagon, cargo } =
randomStockType.carPool[~~(Math.random() * randomStockType.carPool.length)];
if (
this.store.totalWeight + (carWagon.weight + (cargo?.weight ?? 0)) > maxWeight ||
src/components/tabs/StockListTab.vue
+93 -25
View File
@@ -11,57 +11,92 @@
{{ $t('stocklist.action-upload') }}
</button>
<button class="btn btn--image" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="downloadStock">
<button
class="btn btn--image"
:data-disabled="stockIsEmpty"
:disabled="stockIsEmpty"
@click="downloadStock"
>
<img src="/images/icon-download.svg" alt="download icon" />
{{ $t('stocklist.action-download') }}
</button>
<button class="btn btn--image" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="copyToClipboard">
<button
class="btn btn--image"
:data-disabled="stockIsEmpty"
:disabled="stockIsEmpty"
@click="copyToClipboard"
>
<img src="/images/icon-copy.svg" alt="copy icon" />
{{ $t('stocklist.action-copy') }}
</button>
<button class="btn btn--image" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="resetStock">
<button
class="btn btn--image"
:data-disabled="stockIsEmpty"
:disabled="stockIsEmpty"
@click="resetStock"
>
<img src="/images/icon-reset.svg" alt="reset icon" />
{{ $t('stocklist.action-reset') }}
</button>
<button class="btn btn--image" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="shuffleCars">
<button
class="btn btn--image"
:data-disabled="stockIsEmpty"
:disabled="stockIsEmpty"
@click="shuffleCars"
>
<img src="/images/icon-shuffle.svg" alt="shuffle icon" />
{{ $t('stocklist.action-shuffle') }}
</button>
</div>
<div class="stock_controls" :data-disabled="store.chosenStockListIndex == -1">
<button class="btn btn--image" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" @click="moveUpStock(store.chosenStockListIndex)">
<button
class="btn btn--image"
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
@click="moveUpStock(store.chosenStockListIndex)"
>
<img :src="getIconURL('higher')" alt="move up vehicle" />
{{ $t('stocklist.action-move-up') }}
</button>
<button class="btn btn--image" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" @click="moveDownStock(store.chosenStockListIndex)">
<button
class="btn btn--image"
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
@click="moveDownStock(store.chosenStockListIndex)"
>
<img :src="getIconURL('lower')" alt="move down vehicle" />
{{ $t('stocklist.action-move-down') }}
</button>
<button class="btn btn--image" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" @click="removeStock(store.chosenStockListIndex)">
<button
class="btn btn--image"
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
@click="removeStock(store.chosenStockListIndex)"
>
<img :src="getIconURL('remove')" alt="remove vehicle" />
{{ $t('stocklist.action-remove') }}
</button>
</div>
<div class="stock_specs">
<b class="real-stock-info" v-if="store.chosenRealStock">
<b class="real-stock-info" v-if="chosenRealComposition">
<span class="text--accent">
<img :src="getIconURL(store.chosenRealStock.type)" :alt="store.chosenRealStock.type" />
{{ store.chosenRealStock.number }} {{ store.chosenRealStock.name }}
<img :src="getIconURL(chosenRealComposition.type)" :alt="chosenRealComposition.type" />
{{ chosenRealComposition.number }} {{ chosenRealComposition.name }}
</span>
|
</b>
<span>
{{ $t('stocklist.mass') }}
<span class="text--accent">{{ (store.totalWeight / 1000).toFixed(1) }}t</span> ({{ $t('stocklist.mass-accepted') }}:
<span class="text--accent">{{ store.acceptableWeight ? `${~~(store.acceptableWeight / 1000)}t` : '-' }}</span
<span class="text--accent">{{ (store.totalWeight / 1000).toFixed(1) }}t</span>
({{ $t('stocklist.mass-accepted') }}:
<span class="text--accent">{{
store.acceptableWeight ? `${~~(store.acceptableWeight / 1000)}t` : '-'
}}</span
>) - {{ $t('stocklist.length') }}:
<span class="text--accent">{{ store.totalLength }}m</span>
- {{ $t('stocklist.vmax') }}:
@@ -80,17 +115,26 @@
</div>
<div class="stock_warnings" v-if="stockHasWarnings">
<div class="warning" v-if="locoNotSuitable">(!) {{ $t('stocklist.warning-not-suitable') }}</div>
<div class="warning" v-if="locoNotSuitable">
(!) {{ $t('stocklist.warning-not-suitable') }}
</div>
<div class="warning" v-if="trainTooLong && store.isTrainPassenger">(!) {{ $t('stocklist.warning-passenger-too-long') }}</div>
<div class="warning" v-if="trainTooLong && store.isTrainPassenger">
(!) {{ $t('stocklist.warning-passenger-too-long') }}
</div>
<div class="warning" v-if="trainTooLong && !store.isTrainPassenger">(!) {{ $t('stocklist.warning-freight-too-long') }}</div>
<div class="warning" v-if="trainTooLong && !store.isTrainPassenger">
(!) {{ $t('stocklist.warning-freight-too-long') }}
</div>
<div class="warning" v-if="trainTooHeavy">
(!)
<i18n-t keypath="stocklist.warning-too-heavy">
<template #href>
<a target="_blank" href="https://docs.google.com/spreadsheets/d/1KVa5vn2d8XGkXQFwbavVudwKqUQxbLOucHWs2VYqAUE">
<a
target="_blank"
href="https://docs.google.com/spreadsheets/d/1KVa5vn2d8XGkXQFwbavVudwKqUQxbLOucHWs2VYqAUE"
>
{{ $t('stocklist.acceptable-mass-docs') }}
</a>
</template>
@@ -123,7 +167,13 @@
@keydown.backspace="removeStock(i)"
ref="itemRefs"
>
<div class="stock-info" @dragstart="onDragStart(i)" @drop="onDrop($event, i)" @dragover="allowDrop" draggable="true">
<div
class="stock-info"
@dragstart="onDragStart(i)"
@drop="onDrop($event, i)"
@dragover="allowDrop"
draggable="true"
>
<span class="stock-info__no" :data-selected="i == store.chosenStockListIndex">
<span v-if="i == store.chosenStockListIndex">&bull;&nbsp;</span>
{{ i + 1 }}.
@@ -137,7 +187,9 @@
{{ stock.cargo.id }}
</span>
<span class="stock-info__length">{{ stock.length }}m</span>
<span class="stock-info__mass">{{ ((stock.weight + (stock.cargo?.weight ?? 0)) / 1000).toFixed(1) }}t</span>
<span class="stock-info__mass"
>{{ ((stock.weight + (stock.cargo?.weight ?? 0)) / 1000).toFixed(1) }}t</span
>
<span class="stock-info__speed">{{ stock.maxSpeed }}km/h</span>
</div>
</li>
@@ -184,11 +236,13 @@ export default defineComponent({
if (this.store.stockList.length == 0) return '';
const includeColdStart = this.store.isColdStart && this.store.stockSupportsColdStart;
const includeDoubleManned = this.store.isDoubleManned && this.store.stockSupportsDoubleManning;
const includeDoubleManned =
this.store.isDoubleManned && this.store.stockSupportsDoubleManning;
return this.store.stockList
.map((stock, i) => {
let stockTypeStr = stock.isLoco || !stock.cargo ? stock.type : `${stock.type}:${stock.cargo.id}`;
let stockTypeStr =
stock.isLoco || !stock.cargo ? stock.type : `${stock.type}:${stock.cargo.id}`;
if (i == 0 && (includeColdStart || includeDoubleManned))
return `${stockTypeStr},${includeColdStart ? 'c' : ''}${includeDoubleManned ? 'd' : ''}`;
@@ -203,11 +257,21 @@ export default defineComponent({
},
chosenStockVehicle() {
return this.store.chosenStockListIndex == -1 ? undefined : this.store.stockList[this.store.chosenStockListIndex];
return this.store.chosenStockListIndex == -1
? undefined
: this.store.stockList[this.store.chosenStockListIndex];
},
stockHasWarnings() {
return this.tooManyLocomotives || this.trainTooHeavy || this.trainTooLong || this.locoNotSuitable;
return (
this.tooManyLocomotives || this.trainTooHeavy || this.trainTooLong || this.locoNotSuitable
);
},
chosenRealComposition() {
const currentStockString = this.store.stockList.map((s) => s.type).join(';');
return this.store.realCompositionList.find((rc) => rc.stockString == currentStockString);
},
},
@@ -227,7 +291,10 @@ export default defineComponent({
onListItemClick(stockID: number) {
const stock = this.store.stockList[stockID];
this.store.chosenStockListIndex = this.store.chosenStockListIndex == stockID && this.store.chosenVehicle?.type == stock.type ? -1 : stockID;
this.store.chosenStockListIndex =
this.store.chosenStockListIndex == stockID && this.store.chosenVehicle?.type == stock.type
? -1
: stockID;
if (this.store.chosenStockListIndex == -1) {
this.store.chosenVehicle = null;
@@ -313,7 +380,8 @@ export default defineComponent({
availableIndexes.splice(i, -1);
const randAvailableIndex = availableIndexes[Math.floor(Math.random() * availableIndexes.length)];
const randAvailableIndex =
availableIndexes[Math.floor(Math.random() * availableIndexes.length)];
const tempSwap = this.store.stockList[randAvailableIndex];
this.store.stockList[randAvailableIndex] = this.store.stockList[i];
@@ -324,7 +392,7 @@ export default defineComponent({
downloadStock() {
if (this.store.stockList.length == 0) return alert(this.$t('stocklist.alert-empty'));
const defaultName = `${this.store.chosenRealStockName || this.store.stockList[0].type} ${(this.store.totalWeight / 1000).toFixed(1)}t; ${
const defaultName = `${this.chosenRealComposition ? this.chosenRealComposition.stockId + ' ' : ''}${this.store.stockList[0].type} ${(this.store.totalWeight / 1000).toFixed(1)}t; ${
this.store.totalLength
}m; vmax ${this.store.maxStockSpeed}`;
src/components/tabs/WikiListTab.vue
+30 -8
View File
@@ -7,10 +7,18 @@
<div class="tab_content">
<div class="actions-panel">
<div class="actions-panel_vehicles">
<button class="btn" :data-chosen="currentFilterMode == 'tractions'" @click="toggleFilter('tractions')">
<button
class="btn"
:data-chosen="currentFilterMode == 'tractions'"
@click="toggleFilter('tractions')"
>
{{ $t('wiki.action-vehicles') }}
</button>
<button class="btn" :data-chosen="currentFilterMode == 'carriages'" @click="toggleFilter('carriages')">
<button
class="btn"
:data-chosen="currentFilterMode == 'carriages'"
@click="toggleFilter('carriages')"
>
{{ $t('wiki.action-carriages') }}
</button>
</div>
@@ -88,12 +96,21 @@
import { defineComponent } from 'vue';
import { useStore } from '../../store';
import stockPreviewMixin from '../../mixins/stockPreviewMixin';
import { Vehicle } from '../../types';
import { IVehicle } from '../../types';
import { isLocomotive } from '../../utils/vehicleUtils';
import stockMixin from '../../mixins/stockMixin';
import imageMixin from '../../mixins/imageMixin';
type SorterID = 'type' | 'constructionType' | 'image' | 'length' | 'weight' | 'maxSpeed' | 'cargoCount' | 'group' | 'coldStart';
type SorterID =
| 'type'
| 'constructionType'
| 'image'
| 'length'
| 'weight'
| 'maxSpeed'
| 'cargoCount'
| 'group'
| 'coldStart';
interface IWikiHeader {
id: SorterID;
@@ -102,7 +119,7 @@ interface IWikiHeader {
}
interface IWikiRow {
vehicle: Vehicle;
vehicle: IVehicle;
show: boolean;
}
@@ -170,7 +187,9 @@ export default defineComponent({
case 'type':
case 'constructionType':
case 'group':
return direction == 1 ? row1.vehicle[id].localeCompare(row2.vehicle[id]) : row2.vehicle[id].localeCompare(row1.vehicle[id]);
return direction == 1
? row1.vehicle[id].localeCompare(row2.vehicle[id])
: row2.vehicle[id].localeCompare(row1.vehicle[id]);
case 'weight':
case 'length':
@@ -185,7 +204,8 @@ export default defineComponent({
case 'coldStart':
return (
((isLocomotive(row1.vehicle) && row1.vehicle.coldStart ? 1 : -1) - (isLocomotive(row2.vehicle) && row2.vehicle.coldStart ? 1 : -1)) *
((isLocomotive(row1.vehicle) && row1.vehicle.coldStart ? 1 : -1) -
(isLocomotive(row2.vehicle) && row2.vehicle.coldStart ? 1 : -1)) *
direction
);
@@ -193,7 +213,9 @@ export default defineComponent({
break;
}
return direction == 1 ? row1.vehicle.type.localeCompare(row2.vehicle.type) : row2.vehicle.type.localeCompare(row1.vehicle.type);
return direction == 1
? row1.vehicle.type.localeCompare(row2.vehicle.type)
: row2.vehicle.type.localeCompare(row1.vehicle.type);
},
},
src/components/utils/ImageFullscreenPreview.vue
+2 -2
View File
@@ -10,8 +10,8 @@
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { useStore } from "../../store";
import { defineComponent } from 'vue';
import { useStore } from '../../store';
export default defineComponent({
data() {
src/components/utils/StockThumbnails.vue
+12 -14
View File
@@ -28,18 +28,18 @@
</template>
<script setup lang="ts">
import { Ref, computed, nextTick, ref, watch } from "vue";
import { useStore } from "../../store";
import { IStock } from "../../types";
import { Ref, computed, nextTick, ref, watch } from 'vue';
import { useStore } from '../../store';
import { IStock } from '../../types';
const store = useStore();
const emit = defineEmits(["listItemClick"]);
const emit = defineEmits(['listItemClick']);
const thumbnailsRef = ref() as Ref<HTMLElement>;
const draggedIndex = ref(-1);
const onListItemClick = (index: number) => {
emit("listItemClick", index);
emit('listItemClick', index);
};
const stockImageError = (e: Event, stock: IStock) => {
@@ -55,12 +55,12 @@ watch(
(thumbnailsRef.value as HTMLElement)
.querySelector(`div:nth-child(${index + 1})`)
?.scrollIntoView({
block: "nearest",
inline: "start",
behavior: "smooth",
block: 'nearest',
inline: 'start',
behavior: 'smooth',
});
});
},
}
);
// Dragging images
@@ -71,9 +71,7 @@ const onDragStart = (vehicleIndex: number) => {
const onDrop = (e: DragEvent, vehicleIndex: number) => {
e.preventDefault();
let targetEl = thumbnailsRef.value.querySelector(
`div:nth-child(${vehicleIndex + 1})`,
);
let targetEl = thumbnailsRef.value.querySelector(`div:nth-child(${vehicleIndex + 1})`);
if (!targetEl && draggedIndex.value != -1) return;
@@ -114,7 +112,7 @@ const allowDrop = (e: DragEvent) => {
-moz-user-select: none;
-webkit-user-select: none;
&[data-selected="true"] {
&[data-selected='true'] {
background-color: rebeccapurple;
}
@@ -123,7 +121,7 @@ const allowDrop = (e: DragEvent) => {
margin: 0 1em;
}
&[data-sponsor="true"] > b {
&[data-sponsor='true'] > b {
color: salmon;
}