Merge pull request #33 from Spythere/development

hotfix: caching

.github/workflows/github-discord-releases.yml

@@ -0,0 +1,17 @@
+on:
+  release:
+    types: [published]
+
+jobs:
+  github-releases-to-discord:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Github Releases To Discord
+        uses: SethCohen/github-releases-to-discord@v1.13.1
+        with:
+          webhook_url: ${{ secrets.WEBHOOK_URL }}
+          color: "15844367"
+          footer_title: "Changelog - Pojazdownik"
+          footer_timestamp: true

package.json

@@ -1,12 +1,12 @@
 {
   "name": "pojazdownik",
-  "version": "1.8.4",
+  "version": "1.8.8",
   "private": true,
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
-    "preview": "yarn build && vite preview --port 4174",
+    "preview": "yarn build && vite preview",
     "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/"

src/components/app/MainContainer.vue

@@ -42,7 +42,9 @@ main {
 
 @media screen and (max-width: $breakpointMd) {
   main {
-    display: block;
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
   }
 }
 </style>

src/components/cards/RealStockCard.vue

@@ -76,7 +76,7 @@
               <div class="thumbnail-container">
                 <div>{{ stockType }}</div>
                 <img
-                  :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockType}.png`"
+                  :src="`https://static.spythere.eu/thumbnails/${stockType}.png`"
                   :title="stockType"
                   style="opacity: 0"
                   @error="(e) => onStockItemError(e, stockType)"

src/components/common/Checkbox.vue

@@ -1,18 +1,20 @@
 <template>
   <label>
-    <input type="checkbox" v-model="model" />
+    <input type="checkbox" :data-disabled="disabled" :disabled="disabled" v-model="model" />
     <div><slot /></div>
   </label>
 </template>
 
 <script lang="ts" setup>
 const model = defineModel();
+
+defineProps({
+  disabled: Boolean,
+});
 </script>
 
 <style lang="scss" scoped>
 label {
-  cursor: pointer;
-
   text-transform: uppercase;
   transition: color 200ms;
 }
@@ -20,6 +22,7 @@ label {
 div {
   padding: 0.25em 0.5em;
   color: white;
+  cursor: pointer;
 
   background-color: #222;
   border-radius: 0.25em;
@@ -54,5 +57,16 @@ input {
       content: '\2714';
     }
   }
+
+  &:disabled {
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+
+    + div {
+      opacity: 0.55;
+      cursor: auto;
+    }
+  }
 }
 </style>

src/components/sections/InputsSection.vue

@@ -28,7 +28,8 @@
             {{ $t('inputs.input-vehicle') }}
           </option>
           <option v-for="loco in locoOptions" :value="loco" :key="loco.type">
-            {{ loco.type }}<b v-if="loco.restrictions['sponsorOnly']">*</b>
+            {{ loco.type
+            }}<b v-if="loco.sponsorOnlyTimestamp && loco.sponsorOnlyTimestamp > Date.now()">*</b>
           </option>
         </select>
       </div>
@@ -59,7 +60,8 @@
           </option>
 
           <option v-for="car in carOptions" :value="car" :key="car.type">
-            {{ car.type }}<b v-if="car.restrictions['sponsorOnly']">*</b>
+            {{ car.type
+            }}<b v-if="car.sponsorOnlyTimestamp && car.sponsorOnlyTimestamp > Date.now()">*</b>
           </option>
         </select>
       </div>
@@ -84,6 +86,7 @@
           <option :value="null" v-if="!store.chosenCar || !store.chosenCar.loadable">
             {{ $t('inputs.no-cargo-available') }}
           </option>
+
           <option :value="null" v-else>{{ $t('inputs.cargo-empty') }}</option>
 
           <option v-for="cargo in store.chosenCar?.cargoTypes" :value="cargo" :key="cargo.id">
@@ -193,10 +196,7 @@ export default defineComponent({
     removeVehicle() {
       if (this.store.stockList.length == 0) return;
 
-      const lastStock = this.store.stockList.slice(-1)[0];
+      this.store.stockList.splice(-1);
-
-      if (lastStock.count > 1) lastStock.count--;
-      else this.store.stockList.splice(-1);
     },
 
     switchVehicles() {

src/components/sections/StockSection.vue

@@ -46,8 +46,9 @@ onMounted(() => {
   window.addEventListener('keydown', (e) => {
     if (e.target instanceof HTMLInputElement) return;
 
-    if (/[1234]/.test(e.key)) {
+    if (/^[1234]$/.test(e.key)) {
       const keyNum = Number(e.key);
+
       store.stockSectionMode = sectionModes[keyNum - 1];
       (sectionButtonRefs.value[keyNum - 1] as HTMLButtonElement)?.focus();
     }

src/components/sections/TrainImageSection.vue

@@ -1,64 +1,77 @@
 <template>
   <section class="train-image-section">
-    <div class="image-wrapper">
+    <div v-if="store.chosenVehicle">
-      <img
+      <div class="image-wrapper">
-        :src="
+        <img
-          store.chosenVehicle
+          :src="getThumbnailURL(store.chosenVehicle.type, 'small')"
-            ? getThumbnailURL(store.chosenVehicle.type, 'small')
+          :data-preview-active="store.chosenVehicle !== null"
-            : '/images/placeholder.jpg'
+          :data-sponsor-only="
-        "
+            store.chosenVehicle.sponsorOnlyTimestamp &&
-        tabindex="0"
+            store.chosenVehicle.sponsorOnlyTimestamp > Date.now()
-        :data-sponsor-only="store.chosenVehicle?.restrictions.sponsorOnly"
+          "
-        :data-team-only="store.chosenVehicle?.restrictions.teamOnly"
+          :data-team-only="store.chosenVehicle.teamOnly"
-        @click="onImageClick"
+          @click="onImageClick"
-        @keydown.enter="onImageClick"
+          @keydown.enter="onImageClick"
-        @error="onImageError"
+          @load="onImageLoad"
-      />
+          @error="onImageError"
-    </div>
+          tabindex="0"
+        />
+      </div>
 
-    <div class="image-info" v-if="store.chosenVehicle">
+      <div class="image-info">
-      <b class="text--accent">{{ store.chosenVehicle.type }}</b> &bull;
+        <b class="text--accent">{{ store.chosenVehicle.type }}</b> &bull;
-      <b style="color: #ccc">
+        <b style="color: #ccc">
-        {{
-          $t(
-            `preview.${isLocomotive(store.chosenVehicle) ? store.chosenVehicle.group : store.chosenVehicle.group}`
-          )
-        }}
-      </b>
-
-      <div style="color: #ccc">
-        <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-else>
           {{
-            store.chosenVehicle.group == 'wagon-freight'
+            $t(
-              ? $t(`usage.${store.chosenVehicle.constructionType}`)
+              `preview.${isTractionUnit(store.chosenVehicle) ? store.chosenVehicle.group : store.chosenVehicle.group}`
-              : `${$t('preview.construction')} ${store.chosenVehicle.constructionType}`
+            )
           }}
+        </b>
+
+        <div style="color: #ccc">
+          <div>
+            {{ store.chosenVehicle.length }}m |
+            {{ (store.chosenVehicle.weight / 1000).toFixed(1) }}t |
+            {{ store.chosenVehicle.maxSpeed }} km/h
+          </div>
+
+          <div v-if="isTractionUnit(store.chosenVehicle)">
+            {{ $t('preview.cabin') }} {{ store.chosenVehicle.cabinType }}
+          </div>
+
+          <div v-else>
+            {{
+              store.chosenVehicle.group == 'wagon-freight'
+                ? $t(`usage.${store.chosenVehicle.constructionType}`)
+                : `${$t('preview.construction')} ${store.chosenVehicle.constructionType}`
+            }}
+          </div>
+
+          <b
+            v-if="
+              store.chosenVehicle.sponsorOnlyTimestamp &&
+              store.chosenVehicle.sponsorOnlyTimestamp > Date.now()
+            "
+            class="sponsor-only"
+          >
+            {{
+              $t('preview.sponsor-only', [
+                new Date(store.chosenVehicle.sponsorOnlyTimestamp).toLocaleDateString(
+                  $i18n.locale == 'pl' ? 'pl-PL' : 'en-GB'
+                ),
+              ])
+            }}
+          </b>
+
+          <b v-if="store.chosenVehicle.teamOnly" class="team-only">{{ $t('preview.team-only') }}</b>
         </div>
-
-        <b style="color: salmon" v-if="store.chosenVehicle.restrictions['sponsorOnly']">{{
-          $t('preview.sponsor-only', [
-            new Date(store.chosenVehicle.restrictions['sponsorOnly']).toLocaleDateString(
-              $i18n.locale == 'pl' ? 'pl-PL' : 'en-GB'
-            ),
-          ])
-        }}</b>
-
-        <b style="color: gold" v-if="store.chosenVehicle.restrictions['teamOnly']">{{
-          $t('preview.team-only')
-        }}</b>
       </div>
     </div>
 
-    <div class="image-info" v-else>{{ $t('preview.desc') }}</div>
+    <div v-else>
+      <img src="/images/placeholder.jpg" alt="placeholder image" />
+      <div class="image-info">{{ $t('preview.desc') }}</div>
+    </div>
   </section>
 </template>
 
@@ -66,8 +79,11 @@
 import { computed, defineComponent } from 'vue';
 import { useStore } from '../../store';
 import { isTractionUnit } from '../../utils/vehicleUtils';
-import { ILocomotive, IVehicle } from '../../types';
 import imageMixin from '../../mixins/imageMixin';
+import { watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import { Ref } from 'vue';
+import { ref } from 'vue';
 
 export default defineComponent({
   mixins: [imageMixin],
@@ -80,35 +96,34 @@ export default defineComponent({
 
   setup() {
     const store = useStore();
+    const { chosenVehicle } = storeToRefs(store);
+
+    const imageStatus = ref('none') as Ref<'none' | 'loading' | 'loaded' | 'error'>;
+
+    watch(chosenVehicle, () => {
+      imageStatus.value = 'loading';
+    });
 
     return {
       store,
+      imageStatus,
       chosenVehicle: computed(() => store.chosenVehicle),
     };
   },
 
-  watch: {
-    chosenVehicle(vehicle: IVehicle, prevVehicle: IVehicle) {
-      if (vehicle && vehicle.type != prevVehicle?.type) {
-        this.store.imageLoading = true;
-      }
-    },
-  },
-
   methods: {
-    onImageLoad() {
+    isTractionUnit,
-      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';
+      this.imageStatus = 'error';
     },
 
-    isLocomotive(vehicle: IVehicle): vehicle is ILocomotive {
+    onImageLoad(e: Event) {
-      return isTractionUnit(vehicle);
+      this.imageStatus = 'loaded';
     },
 
     onImageClick(e: Event) {
@@ -131,22 +146,25 @@ export default defineComponent({
 .train-image-section {
   display: flex;
   flex-direction: column;
+  align-items: center;
   text-align: center;
 
-  grid-row: 3;
+  min-height: 250px;
-  grid-column: 1;
 
-  margin-top: 1em;
+  & > div {
-  height: 22em;
+    position: relative;
+    max-width: 100%;
+    width: 380px;
+  }
 }
 
 img {
-  max-width: 380px;
   width: 100%;
-  height: 100%;
-  border: 1px solid white;
 
-  cursor: zoom-in;
+  &[data-preview-active='true'] {
+    border: 1px solid white;
+    cursor: zoom-in;
+  }
 
   &[data-sponsor-only='true'] {
     border: 1px solid $sponsorColor;
@@ -157,27 +175,31 @@ img {
   }
 }
 
-// .train-image {
+.image-wrapper {
-//   &__content {
+  position: relative;
-//     &.sponsor img {
+  min-height: 220px;
-//       border: 1px solid salmon;
+}
-//     }
 
-//     img {
+.loading-placeholder {
-//       max-width: 380px;
+  position: absolute;
-//       width: 100%;
+  top: 0;
-//       height: 100%;
+  left: 0;
-//       border: 1px solid white;
+  height: 100%;
+  width: 100%;
 
-//       cursor: zoom-in;
+  display: flex;
-//     }
+  align-items: center;
-//   }
+  justify-content: center;
-// }
+
+  background-color: #2b2b2b;
+  padding: 1em;
+  font-size: 1.2em;
+}
 
 .image-info {
   font-size: 1.1em;
   padding: 0.5em;
-  margin: 0.5em auto;
+  // margin: 0.5em auto;
   line-height: 1.35;
 
   width: 100%;
@@ -187,6 +209,20 @@ img {
   font-weight: bold;
 }
 
+.placeholder {
+  height: 250px;
+
+  background-color: $bgColor;
+}
+
+.sponsor-only {
+  color: $sponsorColor;
+}
+
+.team-only {
+  color: $teamColor;
+}
+
 @media screen and (max-width: $breakpointMd) {
   .train-image-section {
     justify-content: center;

src/components/tabs/NumberGeneratorTab.vue

@@ -6,26 +6,26 @@
     </div>
 
     <div class="tab_content">
-      <div class="category-select">
+      <div class="inputs">
-        <label for="category"> {{ $t('numgen.train-category') }}</label>
+        <label>
-        <select id="category" v-model="chosenCategory" @change="randomizeTrainNumber()">
+          <span>{{ $t('numgen.train-category') }}</span>
-          <option :value="null" disabled>
+          <select v-model="chosenCategory" @change="randomizeTrainNumber()">
-            {{ $t('numgen.train-category') }}
+            <option :value="null" disabled>
-          </option>
+              {{ $t('numgen.train-category') }}
-          <option
+            </option>
-            v-for="(_, category) in genData.categoriesRules"
+            <option
-            :key="category"
+              v-for="(_, category) in genData.categoriesRules"
-            :value="category"
+              :key="category"
-          >
+              :value="category"
-            {{ $t(`numgen.categories.${category}`) }}
+            >
-          </option>
+              {{ $t(`numgen.categories.${category}`) }}
-        </select>
+            </option>
-      </div>
+          </select>
+        </label>
 
-      <div class="regions-select">
+        <label>
-        <div>
+          <span>{{ $t('numgen.start-region') }}</span>
-          <label for="begin-region"> {{ $t('numgen.start-region') }}</label>
+          <select v-model="beginRegionName" @change="randomizeTrainNumber()">
-          <select id="begin-region" v-model="beginRegionName" @change="randomizeTrainNumber()">
             <option :value="null" disabled>
               {{ $t('numgen.start-region') }}
             </option>
@@ -33,11 +33,11 @@
               {{ name }}
             </option>
           </select>
-        </div>
+        </label>
 
-        <div>
+        <label>
-          <label for="end-region"> {{ $t('numgen.end-region') }}</label>
+          <span> {{ $t('numgen.end-region') }}</span>
-          <select id="end-region" v-model="endRegionName" @change="randomizeTrainNumber()">
+          <select v-model="endRegionName" @change="randomizeTrainNumber()">
             <option :value="null" disabled>
               {{ $t('numgen.end-region') }}
             </option>
@@ -45,7 +45,7 @@
               {{ name }}
             </option>
           </select>
-        </div>
+        </label>
       </div>
 
       <div class="generated-number" @click="copyNumber">
@@ -227,12 +227,6 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
 @import '../../styles/tab.scss';
 @import '../../styles/global.scss';
 
-label {
-  display: block;
-  font-weight: bold;
-  margin-bottom: 0.5em;
-}
-
 .category-select {
   select {
     width: auto;
@@ -242,23 +236,22 @@ label {
   margin-bottom: 1em;
 }
 
-.regions-select {
+.inputs {
-  display: flex;
+  display: grid;
-  align-items: center;
+  grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
-  justify-content: center;
+
+  flex-wrap: wrap;
   gap: 0.5em;
+}
 
-  div {
+.inputs > label {
-    width: 100%;
+  display: flex;
-  }
+  flex-direction: column;
+  gap: 0.25em;
 
-  select {
+  span {
-    width: 100%;
+    color: #ccc;
-  }
+    font-weight: bold;
-
-  label {
-    display: block;
-    margin-bottom: 0.5em;
   }
 }
 

src/components/tabs/StockGeneratorTab.vue

@@ -12,19 +12,19 @@
           {{ $t('stockgen.properties-desc') }}
         </b>
 
-        <div class="tab_attributes">
+        <div class="inputs">
           <label>
-            {{ $t('stockgen.input-mass') }}
+            <span>{{ $t('stockgen.input-mass') }}</span>
             <input type="number" v-model="maxTons" step="100" max="4000" min="0" />
           </label>
 
           <label>
-            {{ $t('stockgen.input-length') }}
+            <span>{{ $t('stockgen.input-length') }}</span>
             <input type="number" v-model="maxLength" step="25" max="650" min="0" />
           </label>
 
           <label>
-            {{ $t('stockgen.input-carcount') }}
+            <span>{{ $t('stockgen.input-carcount') }}</span>
             <input type="number" v-model="maxCarCount" step="1" max="60" min="1" />
           </label>
         </div>
@@ -119,6 +119,7 @@ import { useStore } from '../../store';
 
 import stockMixin from '../../mixins/stockMixin';
 import { ICargo, ICarWagon, IStock } from '../../types';
+import { isTractionUnit } from '../../utils/vehicleUtils';
 
 export default defineComponent({
   name: 'stock-generator',
@@ -186,8 +187,8 @@ export default defineComponent({
       if (!this.isCarGroupingEnabled) return false;
 
       stockList.sort((s1, s2) => {
-        return (s1.constructionType + s1.cargo?.id).localeCompare(
+        return (s1.vehicleRef.constructionType + s1.cargo?.id).localeCompare(
-          s2.constructionType + s2.cargo?.id
+          s2.vehicleRef.constructionType + s2.cargo?.id
         );
       });
     },
@@ -238,7 +239,11 @@ export default defineComponent({
       };
 
       for (let i = 0; i < 10; i++) {
-        this.store.stockList.splice(this.store.stockList[0]?.isLoco ? 1 : 0);
+        this.store.stockList.splice(
+          this.store.stockList.length > 0 && isTractionUnit(this.store.stockList[0].vehicleRef)
+            ? 1
+            : 0
+        );
 
         let carCount = 0;
         const maxWeight =
@@ -368,6 +373,28 @@ h2 {
   gap: 1em;
 }
 
+.inputs {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
+
+  flex-wrap: wrap;
+  gap: 0.5em;
+}
+
+.inputs > label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+
+  span {
+    color: #ccc;
+  }
+
+  input[type='text'] {
+    background-color: white;
+  }
+}
+
 .generator_options {
   display: flex;
   flex-direction: column;

src/components/tabs/StockListTab.vue

@@ -4,214 +4,225 @@
       <h2>{{ $t('stocklist.title') }}</h2>
     </div>
 
-    <div class="stock_actions">
+    <div class="tab_content">
-      <button class="btn btn--image" @click="clickFileInput">
+      <div class="stock_actions">
-        <input type="file" @change="uploadStock" ref="conFile" accept=".con,.txt" />
+        <button class="btn btn--image" @click="clickFileInput">
-        <img src="/images/icon-upload.svg" alt="upload icon" />
+          <input type="file" @change="uploadStock" ref="conFile" accept=".con,.txt" />
-        {{ $t('stocklist.action-upload') }}
+          <img src="/images/icon-upload.svg" alt="upload icon" />
-      </button>
+          {{ $t('stocklist.action-upload') }}
+        </button>
 
-      <button
+        <button
-        class="btn btn--image"
+          class="btn btn--image"
-        :data-disabled="stockIsEmpty"
+          :data-disabled="stockIsEmpty"
-        :disabled="stockIsEmpty"
+          :disabled="stockIsEmpty"
-        @click="downloadStock"
+          @click="downloadStock"
-      >
+        >
-        <img src="/images/icon-download.svg" alt="download icon" />
+          <img src="/images/icon-download.svg" alt="download icon" />
-        {{ $t('stocklist.action-download') }}
+          {{ $t('stocklist.action-download') }}
-      </button>
+        </button>
 
-      <button
+        <button
-        class="btn btn--image"
+          class="btn btn--image"
-        :data-disabled="stockIsEmpty"
+          :data-disabled="stockIsEmpty"
-        :disabled="stockIsEmpty"
+          :disabled="stockIsEmpty"
-        @click="copyToClipboard"
+          @click="copyToClipboard"
-      >
+        >
-        <img src="/images/icon-copy.svg" alt="copy icon" />
+          <img src="/images/icon-copy.svg" alt="copy icon" />
-        {{ $t('stocklist.action-copy') }}
+          {{ $t('stocklist.action-copy') }}
-      </button>
+        </button>
 
-      <button
+        <button
-        class="btn btn--image"
+          class="btn btn--image"
-        :data-disabled="stockIsEmpty"
+          :data-disabled="stockIsEmpty"
-        :disabled="stockIsEmpty"
+          :disabled="stockIsEmpty"
-        @click="resetStock"
+          @click="resetStock"
-      >
+        >
-        <img src="/images/icon-reset.svg" alt="reset icon" />
+          <img src="/images/icon-reset.svg" alt="reset icon" />
-        {{ $t('stocklist.action-reset') }}
+          {{ $t('stocklist.action-reset') }}
-      </button>
+        </button>
 
-      <button
+        <button
-        class="btn btn--image"
+          class="btn btn--image"
-        :data-disabled="stockIsEmpty"
+          :data-disabled="stockIsEmpty"
-        :disabled="stockIsEmpty"
+          :disabled="stockIsEmpty"
-        @click="shuffleCars"
+          @click="shuffleCars"
-      >
+        >
-        <img src="/images/icon-shuffle.svg" alt="shuffle icon" />
+          <img src="/images/icon-shuffle.svg" alt="shuffle icon" />
-        {{ $t('stocklist.action-shuffle') }}
+          {{ $t('stocklist.action-shuffle') }}
-      </button>
+        </button>
-    </div>
+      </div>
 
-    <div class="stock_controls" :data-disabled="store.chosenStockListIndex == -1">
+      <div class="stock_controls" :data-disabled="store.chosenStockListIndex == -1">
-      <button
+        <button
-        class="btn btn--image"
+          class="btn btn--image"
-        :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
+          :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
-        @click="moveUpStock(store.chosenStockListIndex)"
+          @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 btn--image"
+          class="btn btn--image"
-        :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
+          :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
-        @click="moveDownStock(store.chosenStockListIndex)"
+          @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 btn--image"
+          class="btn btn--image"
-        :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
+          :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
-        @click="removeStock(store.chosenStockListIndex)"
+          @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>
-    </div>
+      </div>
 
-    <div class="stock_specs">
+      <div class="stock_specs">
-      <b class="real-stock-info" v-if="chosenRealComposition">
+        <b class="real-stock-info" v-if="chosenRealComposition">
-        <span class="text--accent">
+          <span class="text--accent">
-          <img :src="getIconURL(chosenRealComposition.type)" :alt="chosenRealComposition.type" />
+            <img :src="getIconURL(chosenRealComposition.type)" :alt="chosenRealComposition.type" />
-          {{ chosenRealComposition.number }} {{ chosenRealComposition.name }}
+            {{ 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
+          >) - {{ $t('stocklist.length') }}:
+          <span class="text--accent">{{ store.totalLength }}m</span>
+          - {{ $t('stocklist.vmax') }}
+          <span tabindex="0" :data-tooltip="$t('stocklist.disclaimer')">(?)</span>:
+          <span class="text--accent">{{ store.maxStockSpeed }} km/h</span>
         </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
-        >) - {{ $t('stocklist.length') }}:
-        <span class="text--accent">{{ store.totalLength }}m</span>
-        - {{ $t('stocklist.vmax') }}
-        <span tabindex="0" :data-tooltip="$t('stocklist.disclaimer')">(?)</span>:
-        <span class="text--accent">{{ store.maxStockSpeed }} km/h</span>
-      </span>
-    </div>
-
-    <div class="stock_spawn-settings">
-      <Checkbox v-if="store.stockSupportsColdStart" v-model="store.isColdStart">
-        {{ $t('stocklist.coldstart-info') }}
-      </Checkbox>
-
-      <Checkbox v-if="store.stockSupportsDoubleManning" v-model="store.isDoubleManned">
-        {{ $t('stocklist.doublemanning-info') }}
-      </Checkbox>
-    </div>
-
-    <div class="stock_warnings" v-if="hasAnyWarnings">
-      <div class="warning" v-if="locoNotSuitable">
-        (!) {{ $t('stocklist.warning-not-suitable') }}
       </div>
 
-      <div class="warning" v-if="lengthExceeded && store.isTrainPassenger">
+      <div></div>
-        (!) {{ $t('stocklist.warning-passenger-too-long') }}
+
+      <div class="stock_spawn-settings">
+        <Checkbox :disabled="!store.stockSupportsColdStart" v-model="store.isColdStart">
+          {{ $t('stocklist.coldstart-info') }}
+        </Checkbox>
+
+        <Checkbox :disabled="!store.stockSupportsDoubleManning" v-model="store.isDoubleManned">
+          {{ $t('stocklist.doublemanning-info') }}
+        </Checkbox>
       </div>
 
-      <div class="warning" v-if="lengthExceeded && !store.isTrainPassenger">
+      <div class="stock_warnings" v-if="hasAnyWarnings">
-        (!) {{ $t('stocklist.warning-freight-too-long') }}
+        <div class="warning" v-if="locoNotSuitable">
-      </div>
+          (!) {{ $t('stocklist.warning-not-suitable') }}
+        </div>
 
-      <div class="warning" v-if="teamOnlyVehicles.length > 0">
+        <div class="warning" v-if="lengthExceeded && store.isTrainPassenger">
-        (!)
+          (!) {{ $t('stocklist.warning-passenger-too-long') }}
-        {{
+        </div>
-          $t('stocklist.warning-team-only-vehicle', [
-            teamOnlyVehicles.map((v) => v.type).join(', '),
-          ])
-        }}
-      </div>
 
-      <div class="warning" v-if="weightExceeded">
+        <div class="warning" v-if="lengthExceeded && !store.isTrainPassenger">
-        (!)
+          (!) {{ $t('stocklist.warning-freight-too-long') }}
-        <i18n-t keypath="stocklist.warning-too-heavy">
+        </div>
-          <template #href>
-            <a
-              target="_blank"
-              href="https://docs.google.com/spreadsheets/d/1KVa5vn2d8XGkXQFwbavVudwKqUQxbLOucHWs2VYqAUE"
-            >
-              {{ $t('stocklist.acceptable-mass-docs') }}
-            </a>
-          </template>
-        </i18n-t>
-      </div>
 
-      <div class="warning" v-if="locoCountExceeded">
+        <div class="warning" v-if="teamOnlyVehicles.length > 0">
-        {{ $t('stocklist.warning-too-many-locos') }}
+          (!)
-      </div>
+          {{
-    </div>
+            $t('stocklist.warning-team-only-vehicle', [
+              teamOnlyVehicles.map((v) => v.vehicleRef.type).join(', '),
+            ])
+          }}
+        </div>
 
-    <StockThumbnails :onListItemClick="onListItemClick" />
+        <div class="warning" v-if="weightExceeded">
-
+          (!)
-    <!-- Stock list -->
+          <i18n-t keypath="stocklist.warning-too-heavy">
-    <div class="list-wrapper">
+            <template #href>
-      <div v-if="stockIsEmpty" class="list-empty">
+              <a
-        <div class="stock-info">{{ $t('stocklist.list-empty') }}</div>
+                target="_blank"
-      </div>
+                href="https://docs.google.com/spreadsheets/d/1BvTU-U7huIaEheov22TrhTtROUM4MwVfdbq03GVAEM8"
-
-      <ul v-else>
-        <transition-group name="stock-list-anim">
-          <li
-            v-for="(stock, i) in store.stockList"
-            :key="stock.id"
-            :class="{ loco: stock.isLoco }"
-            tabindex="0"
-            @click="onListItemClick(i)"
-            @keydown.enter="onListItemClick(i)"
-            @keydown.w="moveUpStock(i)"
-            @keydown.s="moveDownStock(i)"
-            @keydown.backspace="removeStock(i)"
-            ref="itemRefs"
-          >
-            <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 }}.
-              </span>
-
-              <span
-                class="stock-info-type"
-                :data-sponsor-only="stock.restrictions.sponsorOnly"
-                :data-team-only="stock.restrictions.teamOnly"
               >
-                {{ stock.isLoco ? stock.type : getCarSpecFromType(stock.type) }}
+                {{ $t('stocklist.acceptable-mass-docs') }}
-              </span>
+              </a>
+            </template>
+          </i18n-t>
+        </div>
 
-              <span class="stock-info-cargo" v-if="stock.cargo">
+        <div class="warning" v-if="locoCountExceeded">
-                {{ stock.cargo.id }}
+          {{ $t('stocklist.warning-too-many-locos') }}
-              </span>
+        </div>
+      </div>
 
-              <span class="stock-info-length">{{ stock.length }}m</span>
+      <StockThumbnails :onListItemClick="onListItemClick" />
 
-              <span class="stock-info-mass">
+      <!-- Stock list -->
-                {{ ((stock.weight + (stock.cargo?.weight ?? 0)) / 1000).toFixed(1) }}t
+      <div class="list-wrapper">
-              </span>
+        <div v-if="stockIsEmpty" class="list-empty">
-              <span class="stock-info-speed">{{ stock.maxSpeed }}km/h</span>
+          <div class="stock-info">{{ $t('stocklist.list-empty') }}</div>
-            </div>
+        </div>
-          </li>
+
-        </transition-group>
+        <ul v-else>
-      </ul>
+          <transition-group name="stock-list-anim">
+            <li
+              v-for="(stock, i) in store.stockList"
+              :key="stock.id"
+              :class="{ loco: isTractionUnit(stock.vehicleRef) }"
+              tabindex="0"
+              @click="onListItemClick(i)"
+              @keydown.enter="onListItemClick(i)"
+              @keydown.w="moveUpStock(i)"
+              @keydown.s="moveDownStock(i)"
+              @keydown.backspace="removeStock(i)"
+              ref="itemRefs"
+            >
+              <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 }}.
+                </span>
+
+                <span
+                  class="stock-info-type"
+                  :data-sponsor-only="
+                    stock.vehicleRef.sponsorOnlyTimestamp &&
+                    stock.vehicleRef.sponsorOnlyTimestamp > Date.now()
+                  "
+                  :data-team-only="stock.vehicleRef.teamOnly"
+                >
+                  {{
+                    isTractionUnit(stock.vehicleRef)
+                      ? stock.vehicleRef.type
+                      : getCarSpecFromType(stock.vehicleRef.type)
+                  }}
+                </span>
+
+                <span class="stock-info-cargo" v-if="stock.cargo">
+                  {{ stock.cargo.id }}
+                </span>
+
+                <span class="stock-info-length">{{ stock.vehicleRef.length }}m</span>
+
+                <span class="stock-info-mass">
+                  {{ ((stock.vehicleRef.weight + (stock.cargo?.weight ?? 0)) / 1000).toFixed(1) }}t
+                </span>
+                <span class="stock-info-speed">{{ stock.vehicleRef.maxSpeed }}km/h</span>
+              </div>
+            </li>
+          </transition-group>
+        </ul>
+      </div>
     </div>
   </section>
 </template>
@@ -226,6 +237,7 @@ import stockPreviewMixin from '../../mixins/stockPreviewMixin';
 import StockThumbnails from '../utils/StockThumbnails.vue';
 import stockMixin from '../../mixins/stockMixin';
 import Checkbox from '../common/Checkbox.vue';
+import { isTractionUnit } from '../../utils/vehicleUtils';
 
 export default defineComponent({
   name: 'stock-list',
@@ -250,7 +262,7 @@ export default defineComponent({
 
   computed: {
     chosenRealComposition() {
-      const currentStockString = this.store.stockList.map((s) => s.type).join(';');
+      const currentStockString = this.store.stockList.map((s) => s.vehicleRef.type).join(';');
 
       return this.store.realCompositionList.find((rc) => rc.stockString == currentStockString);
     },
@@ -265,7 +277,9 @@ export default defineComponent({
       return this.store.stockList
         .map((stock, i) => {
           let stockTypeStr =
-            stock.isLoco || !stock.cargo ? stock.type : `${stock.type}:${stock.cargo.id}`;
+            isTractionUnit(stock.vehicleRef) || !stock.cargo
+              ? stock.vehicleRef.type
+              : `${stock.vehicleRef.type}:${stock.cargo.id}`;
 
           if (i == 0 && (includeColdStart || includeDoubleManned))
             return `${stockTypeStr},${includeColdStart ? 'c' : ''}${includeDoubleManned ? 'd' : ''}`;
@@ -300,22 +314,24 @@ export default defineComponent({
       return (
         !this.store.isTrainPassenger &&
         this.store.stockList.length > 1 &&
-        !this.store.stockList.every((stock) => stock.isLoco) &&
+        !this.store.stockList.every((stock) => isTractionUnit(stock.vehicleRef)) &&
-        this.store.stockList.some((stock) => stock.isLoco && stock.type.startsWith('EP'))
+        this.store.stockList.some(
+          (stock) => isTractionUnit(stock.vehicleRef) && stock.vehicleRef.type.startsWith('EP')
+        )
       );
     },
 
     locoCountExceeded() {
       return (
         this.store.stockList.reduce((acc, stock) => {
-          if (stock.isLoco) acc += stock.count;
+          if (isTractionUnit(stock.vehicleRef)) acc += 1;
           return acc;
         }, 0) > 2
       );
     },
 
     teamOnlyVehicles() {
-      return this.store.stockList.filter((stock) => stock.restrictions.teamOnly);
+      return this.store.stockList.filter((stock) => stock.vehicleRef.teamOnly);
     },
 
     hasAnyWarnings() {
@@ -330,6 +346,8 @@ export default defineComponent({
   },
 
   methods: {
+    isTractionUnit,
+
     copyToClipboard() {
       navigator.clipboard.writeText(this.stockString);
 
@@ -346,7 +364,8 @@ export default defineComponent({
       const stock = this.store.stockList[stockID];
 
       this.store.chosenStockListIndex =
-        this.store.chosenStockListIndex == stockID && this.store.chosenVehicle?.type == stock.type
+        this.store.chosenStockListIndex == stockID &&
+        this.store.chosenVehicle?.type == stock.vehicleRef.type
           ? -1
           : stockID;
 
@@ -377,20 +396,6 @@ export default defineComponent({
       this.store.chosenStockListIndex = -1;
     },
 
-    addStock(index: number) {
-      if (index == -1) return;
-
-      this.store.stockList[index].count++;
-    },
-
-    subStock(index: number) {
-      if (index == -1) return;
-
-      if (this.store.stockList[index].count < 2) return;
-
-      this.store.stockList[index].count--;
-    },
-
     removeStock(index: number) {
       if (index == -1) return;
 
@@ -424,7 +429,7 @@ export default defineComponent({
 
     shuffleCars() {
       const availableIndexes = this.store.stockList.reduce((acc, stock, i) => {
-        if (!stock.isLoco) acc.push(i);
+        if (!isTractionUnit(stock.vehicleRef)) acc.push(i);
 
         return acc;
       }, [] as number[]);
@@ -446,7 +451,7 @@ export default defineComponent({
     downloadStock() {
       if (this.store.stockList.length == 0) return alert(this.$t('stocklist.alert-empty'));
 
-      const defaultName = `${this.chosenRealComposition ? this.chosenRealComposition.stockId + ' ' : ''}${this.store.stockList[0].type} ${(this.store.totalWeight / 1000).toFixed(1)}t; ${
+      const defaultName = `${this.chosenRealComposition ? this.chosenRealComposition.stockId + ' ' : ''}${this.store.stockList[0].vehicleRef.type} ${(this.store.totalWeight / 1000).toFixed(1)}t; ${
         this.store.totalLength
       }m; vmax ${this.store.maxStockSpeed}`;
 
@@ -519,11 +524,10 @@ export default defineComponent({
 @import '../../styles/global';
 @import '../../styles/tab.scss';
 
-.stock-list-tab {
+.tab_content {
   display: flex;
   flex-direction: column;
   gap: 0.5em;
-  position: relative;
 }
 
 .warning {
@@ -645,7 +649,7 @@ li > .stock-info {
     color: $teamColor;
   }
 
-  &[data-sponsor-only] {
+  &[data-sponsor-only='true'] {
     color: $sponsorColor;
   }
 }

src/components/tabs/WikiListTab.vue

@@ -5,77 +5,80 @@
     </div>
 
     <div class="tab_content">
-      <div class="actions-panel">
+      <div class="actions">
-        <div class="actions-panel_vehicles">
+        <label>
-          <button
+          <span>{{ $t('wiki.labels.search-vehicle') }}</span>
-            class="btn"
+          <input
-            :data-chosen="currentFilterMode == 'tractions'"
+            type="text"
-            @click="toggleFilter('tractions')"
+            :placeholder="$t('wiki.labels.search-vehicle-placeholder')"
-          >
+            v-model="searchedVehicleTypeName"
-            {{ $t('wiki.action-vehicles') }}
+          />
-          </button>
+        </label>
-          <button
-            class="btn"
-            :data-chosen="currentFilterMode == 'carriages'"
-            @click="toggleFilter('carriages')"
-          >
-            {{ $t('wiki.action-carriages') }}
-          </button>
-        </div>
 
-        <div class="actions-panel_search">
+        <label>
-          <input type="text" :placeholder="$t('wiki.search')" v-model="searchedVehicleTypeName" />
+          <span>{{ $t('wiki.labels.vehicles') }}</span>
-        </div>
+          <select name="filter-type" id="filter-type" v-model="filterType">
+            <option v-for="filter in filters" :key="filter" :value="filter">
+              {{ $t(`wiki.filters.${filter}`) }}
+            </option>
+          </select>
+        </label>
+
+        <label>
+          <span>{{ $t('wiki.labels.sort-by') }}</span>
+          <select name="sorter-type" id="sorter-type" v-model="sorterType">
+            <option v-for="sorter in sorters" :key="sorter" :value="sorter">
+              {{ $t(`wiki.sort-by.${sorter}`) }}
+            </option>
+          </select>
+        </label>
+
+        <label>
+          <span>{{ $t('wiki.labels.sort-direction') }}</span>
+
+          <select name="sorter-direction" id="sorter-direction" v-model="sorterDirection">
+            <option value="asc">{{ $t('wiki.sort-direction.asc') }}</option>
+            <option value="desc">{{ $t('wiki.sort-direction.desc') }}</option>
+          </select>
+        </label>
       </div>
 
-      <div class="table-wrapper" ref="table-wrapper">
+      <ul class="vehicles" ref="vehicles">
-        <table>
+        <li
-          <thead>
+          v-for="vehicle in computedVehicles"
-            <tr>
+          :key="vehicle.type"
-              <th v-for="header in visibleHeaders" @click="toggleSorter(header)" :key="header.id">
+          :data-preview="vehicle.type === store.chosenVehicle?.type"
-                {{ $t(`wiki.header.${header.id}`) }}
+          @click="previewVehicle(vehicle)"
+          @dblclick="addVehicle(vehicle)"
+          @keydown.enter="onVehicleSelect(vehicle)"
+          tabindex="0"
+        >
+          <img loading="lazy" width="120" :src="getThumbnailURL(vehicle.type, 'small')" />
 
-                <span v-if="currentSorter.id == header.id">
+          <span>
-                  {{ currentSorter.direction == 1 ? `&uArr;` : `&dArr;` }}
+            <span
-                </span>
+              class="vehicle-name"
-              </th>
+              :class="{
-            </tr>
+                'sponsor-only':
-          </thead>
+                  vehicle.sponsorOnlyTimestamp && vehicle.sponsorOnlyTimestamp > Date.now(),
-
+                'team-only': vehicle.teamOnly,
-          <tbody>
+              }"
-            <tr
-              v-for="{ vehicle, show } in computedTableData"
-              v-show="show"
-              tabindex="0"
-              :key="vehicle.type"
-              @click="previewVehicle(vehicle)"
-              @keydown.enter="previewVehicle(vehicle)"
-              @dblclick="addVehicle(vehicle)"
-              ref="itemRefs"
             >
-              <td style="width: 120px">
+              <b>{{ vehicle.type.replace(/_/g, ' ') }}</b>
-                <img width="120" src="" :data-src="getThumbnailURL(vehicle.type, 'small')" />
+            </span>
-              </td>
 
-              <td
+            <div class="vehicle-group">
-                :data-sponsor-only="vehicle.restrictions.sponsorOnly > 0"
+              {{ $t(`wiki.${vehicle.group}`) }} |
-                :data-team-only="vehicle.restrictions.teamOnly"
+              {{ isTractionUnit(vehicle) ? vehicle.cabinType : vehicle.constructionType }}
-                style="min-width: 150px"
+            </div>
-              >
-                {{ vehicle.type.replace(/_/g, ' ') }}
-              </td>
 
-              <td style="min-width: 100px">{{ $t(`wiki.${vehicle.group}`) }}</td>
+            <div class="vehicle-props">
-              <td>{{ vehicle.constructionType }}</td>
+              {{ vehicle.length }}m | {{ (vehicle.weight / 1000).toFixed(1) }}t |
-              <td>{{ vehicle.length }}</td>
+              {{ vehicle.maxSpeed }}km/h
-              <td>{{ (vehicle.weight / 1000).toFixed(1) }}</td>
+            </div>
-              <td>{{ vehicle.maxSpeed }}</td>
+          </span>
-            </tr>
+        </li>
-          </tbody>
+      </ul>
-
-          <span ref="table-bottom"></span>
-        </table>
-      </div>
     </div>
   </section>
 </template>
@@ -89,40 +92,13 @@ import { isTractionUnit } from '../../utils/vehicleUtils';
 import stockMixin from '../../mixins/stockMixin';
 import imageMixin from '../../mixins/imageMixin';
 
-type SorterID =
+const sorters = ['type', 'group', 'length', 'weight', 'maxSpeed'] as const;
-  | 'type'
+const filters = ['vehicles-all', 'vehicles-traction', 'vehicles-wagon'] as const;
-  | 'constructionType'
-  | 'image'
-  | 'length'
-  | 'weight'
-  | 'maxSpeed'
-  | 'cargoCount'
-  | 'group'
-  | 'coldStart';
 
-interface IWikiHeader {
+type SorterType = (typeof sorters)[number];
-  id: SorterID;
+type SorterDirection = 'asc' | 'desc';
-  sortable: boolean;
-  for: 'all' | 'carriages' | 'tractions';
-}
 
-interface IWikiRow {
+type FilterType = (typeof filters)[number];
-  vehicle: IVehicle;
-  show: boolean;
-  showImage: boolean;
-}
-
-const headers: IWikiHeader[] = [
-  { id: 'image', sortable: false, for: 'all' },
-  { id: 'type', sortable: true, for: 'all' },
-  { id: 'group', sortable: true, for: 'all' },
-  { id: 'constructionType', sortable: true, for: 'all' },
-  { id: 'length', sortable: true, for: 'all' },
-  { id: 'weight', sortable: true, for: 'all' },
-  { id: 'maxSpeed', sortable: true, for: 'all' },
-  // { id: 'coldStart', sortable: true, for: 'tractions' },
-  // { id: 'cargoCount', sortable: true, for: 'carriages' },
-];
 
 export default defineComponent({
   mixins: [stockPreviewMixin, stockMixin, imageMixin],
@@ -131,141 +107,103 @@ export default defineComponent({
     return {
       store: useStore(),
       observer: null as IntersectionObserver | null,
-      headers,
 
-      scrollTop: 0,
+      sorters: sorters,
+      filters: filters,
 
       searchedVehicleTypeName: '',
 
-      currentSorter: {
+      sorterType: 'type' as SorterType,
-        id: 'type' as SorterID,
+      sorterDirection: 'asc' as SorterDirection,
-        direction: 1,
-      },
 
-      currentFilterMode: 'all' as 'all' | 'tractions' | 'carriages',
+      filterType: 'vehicles-all' as FilterType,
+
+      lastScrollTop: 0,
     };
   },
 
-  mounted() {
+  deactivated() {
-    this.mountObserver();
+    this.lastScrollTop = (this.$refs['vehicles'] as HTMLUListElement)?.scrollTop || 0;
   },
 
   activated() {
-    const tableWrapperRef = this.$refs['table-wrapper'] as HTMLElement;
+    (this.$refs['vehicles'] as HTMLUListElement)?.scrollTo({ top: this.lastScrollTop });
+  },
 
-    tableWrapperRef.scrollTo({
+  watch: {
-      top: this.scrollTop,
+    computedVehicles() {
-    });
+      const vehiclesRef = this.$refs['vehicles'] as HTMLElement;
+
+      vehiclesRef.scrollTo({
+        top: 0,
+      });
+    },
   },
 
   methods: {
     isTractionUnit,
 
-    mountObserver() {
+    onVehicleSelect(vehicle: IVehicle) {
-      if (this.observer) return;
+      if (this.store.chosenVehicle?.type === vehicle.type) this.addVehicle(vehicle);
-
+      this.previewVehicle(vehicle);
-      this.observer = new IntersectionObserver((entries) => {
-        entries.forEach((entry) => {
-          if (entry.intersectionRatio > 0) {
-            entry.target
-              .querySelector('td:first-child > img')!
-              .setAttribute(
-                'src',
-                entry.target.querySelector('td:first-child > img')!.getAttribute('data-src')!
-              );
-          }
-        });
-      });
-
-      (this.$refs['itemRefs'] as HTMLElement[]).forEach((el) => this.observer?.observe(el));
     },
 
-    toggleFilter(name: typeof this.currentFilterMode) {
+    filterVehicles(v: IVehicle) {
-      this.currentFilterMode = this.currentFilterMode == name ? 'all' : name;
+      if (this.searchedVehicleTypeName)
-      const tableWrapperRef = this.$refs['table-wrapper'] as HTMLElement;
+        return v.type
+          .toLocaleLowerCase()
+          .includes(this.searchedVehicleTypeName.toLocaleLowerCase());
 
-      tableWrapperRef.scrollTo({
+      switch (this.filterType) {
-        top: this.scrollTop,
+        case 'vehicles-all':
-      });
+          return true;
+        case 'vehicles-traction':
+          return isTractionUnit(v);
+        case 'vehicles-wagon':
+          return !isTractionUnit(v);
+
+        default:
+          return false;
+      }
     },
 
-    toggleSorter(header: IWikiHeader) {
+    sortVehicles(v1: IVehicle, v2: IVehicle) {
-      if (!header.sortable) return;
+      const direction = this.sorterDirection == 'asc' ? 1 : -1;
 
-      if (header.id == this.currentSorter.id) this.currentSorter.direction *= -1;
+      switch (this.sorterType) {
-      this.currentSorter.id = header.id;
-    },
-
-    sortTableRows(row1: IWikiRow, row2: IWikiRow) {
-      if (!row1.show) return 0;
-
-      const { id, direction } = this.currentSorter;
-
-      switch (id) {
         case 'type':
-        case 'constructionType':
         case 'group':
-          return direction == 1
+          return direction * v1[this.sorterType].localeCompare(v2[this.sorterType]);
-            ? row1.vehicle[id].localeCompare(row2.vehicle[id])
-            : row2.vehicle[id].localeCompare(row1.vehicle[id]);
 
         case 'weight':
         case 'length':
         case 'maxSpeed':
-          return Math.sign(row1.vehicle[id] - row2.vehicle[id]) * direction;
+          return Math.sign(v1[this.sorterType] - v2[this.sorterType]) * direction;
 
-        case 'cargoCount':
+        // case 'cargoCount':
-          return (
+        //   return (
-            Math.sign(
+        //     Math.sign(
-              (!isTractionUnit(row1.vehicle) ? row1.vehicle.cargoTypes.length || -1 : -1) -
+        //       (!isTractionUnit(v1) ? v1.cargoTypes.length || -1 : -1) -
-                (!isTractionUnit(row2.vehicle) ? row2.vehicle.cargoTypes.length || -1 : -1)
+        //         (!isTractionUnit(row2.vehicle) ? row2.vehicle.cargoTypes.length || -1 : -1)
-            ) * direction
+        //     ) * direction
-          );
+        //   );
 
-        case 'coldStart':
+        // case 'coldStart':
-          return (
+        //   return (
-            ((isTractionUnit(row1.vehicle) && row1.vehicle.coldStart ? 1 : -1) -
+        //     ((isTractionUnit(v1) && v1.coldStart ? 1 : -1) -
-              (isTractionUnit(row2.vehicle) && row2.vehicle.coldStart ? 1 : -1)) *
+        //       (isTractionUnit(row2.vehicle) && row2.vehicle.coldStart ? 1 : -1)) *
-            direction
+        //     direction
-          );
+        //   );
 
         default:
-          break;
+          return v1.type.localeCompare(v2.type) * direction;
       }
-
-      return direction == 1
-        ? row1.vehicle.type.localeCompare(row2.vehicle.type)
-        : row2.vehicle.type.localeCompare(row1.vehicle.type);
     },
   },
 
   computed: {
-    computedTableData(): IWikiRow[] {
+    computedVehicles() {
-      return this.store.vehicleDataList
+      return this.store.vehicleDataList.filter(this.filterVehicles).sort(this.sortVehicles);
-        .map((vehicle) => ({
-          vehicle,
-          showImage: false,
-          show:
-            new RegExp(`${this.searchedVehicleTypeName.trim()}`, 'i').test(vehicle.type) &&
-            (this.currentFilterMode == 'all' ||
-              (this.currentFilterMode == 'tractions' && isTractionUnit(vehicle)) ||
-              (this.currentFilterMode == 'carriages' && !isTractionUnit(vehicle))),
-        }))
-        .sort((a, b) => this.sortTableRows(a, b));
-    },
-
-    visibleHeaders() {
-      const filtersActive = this.currentFilterMode;
-
-      return this.headers.filter((header) => header.for == 'all' || header.for == filtersActive);
-    },
-
-    areTractionVehiclesShown() {
-      return this.currentFilterMode == 'all' || this.currentFilterMode == 'tractions';
-    },
-
-    areCarriagesShown() {
-      return this.currentFilterMode == 'all' || this.currentFilterMode == 'carriages';
     },
   },
 });
@@ -274,99 +212,84 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../../styles/tab.scss';
 
-.actions-panel {
+.actions {
-  display: flex;
+  display: grid;
-  justify-content: space-between;
+  grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
-  align-items: center;
 
   flex-wrap: wrap;
   gap: 0.5em;
 }
 
-.actions-panel_vehicles {
+.actions > label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+
+  span {
+    color: #ccc;
+  }
+}
+
+.vehicles {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 0.5em;
+  overflow: auto;
+
+  max-height: 730px;
+
+  margin-top: 0.75em;
+  padding: 0.25em;
+}
+
+.vehicles > li {
   display: flex;
   gap: 0.5em;
-}
 
-.actions-panel_search {
+  background-color: #161c2e;
-  input {
+  padding: 0.5em;
-    width: auto;
+
+  min-height: 75px;
+  cursor: pointer;
+
+  &[data-preview='true'] {
+    background-color: #435288;
+  }
+
+  & > span {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    overflow: hidden;
   }
 }
 
-.tab_content {
+.vehicle-name {
-  display: grid;
+  overflow: hidden;
-  grid-template-rows: 30px 770px;
+  text-wrap: nowrap;
-  gap: 0.5em;
+  text-overflow: ellipsis;
 }
 
-.table-wrapper {
+.sponsor-only {
-  overflow: auto;
+  color: $sponsorColor;
-}
 
-.wiki-list table {
+  &::after {
-  border-collapse: collapse;
+    content: '*';
-  width: 100%;
-
-  thead {
-    position: sticky;
-    top: 0;
-  }
-
-  th {
-    background-color: #111;
-    padding: 0.5em;
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-  }
-
-  tr {
-    cursor: pointer;
-    background-color: #333;
-
-    &:nth-child(odd) {
-      background-color: #444;
-    }
-
-    &:hover {
-      background-color: #666;
-    }
-  }
-
-  td {
-    text-align: center;
-    padding: 0.25em;
-    height: 75px;
-
-    min-width: 95px;
-
-    &[data-sponsor-only='true'] {
-      color: $sponsorColor;
-    }
-
-    &[data-team-only='true'] {
-      color: $teamColor;
-    }
-
-    img {
-      vertical-align: middle;
-    }
   }
 }
 
-@media screen and (max-width: $breakpointMd) {
+.team-only {
-  .wiki-list table {
+  color: $teamColor;
-    th {
-      min-width: 100px;
-    }
 
-    img {
+  &::after {
-      max-width: 100px;
+    content: '*';
-    }
   }
 }
 
+.vehicle-props {
+  color: #ccc;
+}
+
 @media screen and (max-width: $breakpointSm) {
   .actions-panel {
     align-items: stretch;

src/components/utils/StockThumbnails.vue

@@ -5,7 +5,10 @@
       v-for="(stock, stockIndex) in store.stockList"
       :key="stockIndex"
       :data-selected="store.chosenStockListIndex == stockIndex"
-      :data-sponsor="stock.restrictions.sponsorOnly"
+      :data-sponsor-only="
+        stock.vehicleRef.sponsorOnlyTimestamp && stock.vehicleRef.sponsorOnlyTimestamp > Date.now()
+      "
+      :data-team-only="stock.vehicleRef.teamOnly"
       draggable="true"
       @dragstart="onDragStart(stockIndex)"
       @drop="onDrop($event, stockIndex)"
@@ -13,14 +16,14 @@
       @click="onListItemClick(stockIndex)"
     >
       <b>
-        {{ stock.type }}
+        {{ stock.vehicleRef.type }}
       </b>
 
       <img
         draggable="false"
-        :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stock.type}.png`"
+        :src="`https://static.spythere.eu/thumbnails/${stock.vehicleRef.type}.png`"
-        :alt="stock.type"
+        :alt="stock.vehicleRef.type"
-        :title="stock.type"
+        :title="stock.vehicleRef.type"
         @error="stockImageError($event, stock)"
       />
     </div>
@@ -43,7 +46,7 @@ const onListItemClick = (index: number) => {
 };
 
 const stockImageError = (e: Event, stock: IStock) => {
-  (e.target as HTMLImageElement).src = `images/${stock.group}-unknown.png`;
+  (e.target as HTMLImageElement).src = `images/${stock.vehicleRef.group}-unknown.png`;
 };
 
 watch(
@@ -88,10 +91,13 @@ const allowDrop = (e: DragEvent) => {
 </script>
 
 <style lang="scss" scoped>
+@import '../../styles/global.scss';
+
 .stock-thumbnails {
   display: flex;
   overflow: auto;
   background-color: #353a57;
+  min-height: 100px;
 }
 
 .thumbnail-item {
@@ -121,8 +127,12 @@ const allowDrop = (e: DragEvent) => {
     margin: 0 1em;
   }
 
-  &[data-sponsor='true'] > b {
+  &[data-sponsor-only='true'] > b {
-    color: salmon;
+    color: $sponsorColor;
+  }
+
+  &[data-team-only='true'] > b {
+    color: $teamColor;
   }
 
   img {

src/constants/numberGeneratorData.json

@@ -27,18 +27,8 @@
   },
   "categoriesRules": {
     "EI": [null, "00", "99"],
-    "MP": [null, "050", "169"],
+    "EC": [null, "000", "049"],
-    "RO": [null, "200", "999"],
+    "EN": [null, "000", "049"],
-    "RP": [null, "050", "169"],
-    "PW": ["6", "000", "899"],
-    "TK": ["3", "000", "899"],
-    "TM": ["4", "000", "899"],
-    "LT": ["5", "000", "899"]
-  },
-  "categoriesNextVersion": {
-    "EI": [null, "00", "99"],
-    "EC": [null, "001", "049"],
-    "EN": [null, "001", "049"],
 
     "RO": [null, "200", "999"],
     "RP": [null, "050", "169"],

src/constants/speedLimits.json

@@ -47,6 +47,26 @@
     "cargo": null,
     "none": 160
   },
+  "ET22": {
+    "passenger": {
+      "650000": 125
+    },
+    "cargo": {
+      "1200000": 100,
+      "3100000": 70
+    },
+    "none": 125
+  },
+  "201E": {
+    "passenger": {
+      "650000": 125
+    },
+    "cargo": {
+      "1200000": 100,
+      "3100000": 70
+    },
+    "none": 125
+  },
   "ET41": {
     "passenger": {
       "700000": 125

src/locales/en.json

@@ -148,7 +148,7 @@
       "TD": "TD - domestic freight (intermodal)",
       "TM": "TM - domestic freight (cargo)",
       "TN": "TN - domestic freight (no cargo)",
-      "TK": "TK - freight (stations & sidings service)",
+      "TK": "TK - freight (stations & sidings)",
       "TS": "TS - empty freight test drive",
 
       "LT": "LT - locomotive only",
@@ -162,19 +162,30 @@
   },
   "wiki": {
     "title": "LIST OF AVAILABLE VEHICLES",
-    "action-vehicles": "TRACTION UNITS",
+    "labels": {
-    "action-carriages": "CARRIAGES",
+      "vehicles": "Vehicles",
-    "search": "Search for a vehicle...",
+      "sort-by": "Sort by",
-    "header": {
+      "sort-direction": "Sort direction",
-      "image": "Image",
+      "search-vehicle": "Find a vehicle",
-      "type": "Name",
+      "search-vehicle-placeholder": "Input a vehicle name"
-      "group": "Type group",
+    },
-      "constructionType": "Construction",
+    "filters": {
-      "coldStart": "Cold start",
+      "vehicles-all": "all",
-      "length": "Length",
+      "vehicles-traction": "traction units",
-      "weight": "Mass",
+      "vehicles-wagon": "wagons"
-      "maxSpeed": "Speed",
+    },
-      "cargoCount": "Cargo count"
+    "sort-by": {
+      "type": "name",
+      "group": "type group",
+      "length": "length",
+      "weight": "mass",
+      "maxSpeed": "speed",
+      "coldStart": "cold start",
+      "cargoCount": "cargo count"
+    },
+    "sort-direction": {
+      "asc": "ascending",
+      "desc": "descending"
     },
     "unit-electric": "EMU",
     "unit-diesel": "DMU",

src/locales/pl.json

@@ -98,8 +98,8 @@
     "title": "GENERATOR NUMERU POCIĄGU",
     "subtitle": "Generuje realny numer pociągu na podstawie instrukcji Ir-11",
     "alert": "Numer został skopiowany do twojego schowka!",
-    "start-region": "Początkowy obszar konstrukcyjny",
+    "start-region": "Obszar początkowy",
-    "end-region": "Końcowy obszar konstrukcyjny",
+    "end-region": "Obszar końcowy",
     "train-category": "Kategoria pociągu",
     "number-info": "Wygenerowany numer pociągu:",
     "warning": "Wybierz kategorię oraz (opcjonalnie) obszary konstrukcyjne",
@@ -129,17 +129,17 @@
       "EC": "EC - ekspres międzynarodowy",
       "EN": "EN - ekspres krajowy nocny",
 
-      "MP": "MP - międzywojewódzki pośpieszny",
+      "MP": "MP - międzywoj. pośpieszny",
       "RP": "RP - wojewódzki pośpieszny",
-      "MO": "MO - międzywojewódzki osobowy",
+      "MO": "MO - międzywoj. osobowy",
       "RO": "RO - wojewódzki osobowy",
 
-      "MM": "MM - międzynarodowy pośpieszny",
+      "MM": "MM - międzynar. pośpieszny",
-      "MH": "MH - międzywoj. pośpieszny nocny / hotelowy",
+      "MH": "MH - międzywoj. pośpieszny hotelowy",
-      "RM": "RM - wojewódzki osobowy międzynarodowy",
+      "RM": "RM - woj. osobowy międzynarodowy",
-      "RA": "RA - wojewódzki osobowy algomeracyjny",
+      "RA": "RA - woj. osobowy algomeracyjny",
 
-      "PW": "PW - pasażerski próżny (\"służbowy\")",
+      "PW": "PW - pasażerski próżny - służbowy",
       "PX": "PX - pasażerski próżny próbny",
 
       "TC": "TC - towarowy międzynarodowy intermodalny",
@@ -148,7 +148,7 @@
       "TD": "TD - towarowy krajowy intermodalny",
       "TM": "TM - towarowy krajowy masowy",
       "TN": "TN - towarowy krajowy niemasowy",
-      "TK": "TK - towarowy do obsługi stacji i bocznic",
+      "TK": "TK - towarowy (stacje i bocznice)",
       "TS": "TS - towarowy próżny próbny",
 
       "LT": "LT - lokomotywa luzem",
@@ -162,19 +162,30 @@
   },
   "wiki": {
     "title": "LISTA DOSTĘPNYCH POJAZDÓW",
-    "action-vehicles": "POJ. TRAKCYJNE",
+    "labels": {
-    "action-carriages": "WAGONY",
+      "vehicles": "Pojazdy",
-    "search": "Wyszukaj pojazd...",
+      "sort-by": "Sortuj wg",
-    "header": {
+      "sort-direction": "Kierunek sortowania",
-      "image": "Zdjęcie",
+      "search-vehicle": "Wyszukaj pojazd",
-      "type": "Nazwa",
+      "search-vehicle-placeholder": "Wpisz nazwę pojazdu"
-      "group": "Rodzaj",
+    },
-      "constructionType": "Konstrukcja",
+    "filters": {
-      "coldStart": "Zimny start",
+      "vehicles-all": "wszystkie",
-      "length": "Długość",
+      "vehicles-traction": "trakcyjne",
-      "weight": "Masa",
+      "vehicles-wagon": "wagony"
-      "maxSpeed": "Prędkość",
+    },
-      "cargoCount": "Ładunki"
+    "sort-by": {
+      "type": "nazwa",
+      "group": "rodzaj",
+      "length": "długość",
+      "weight": "masa",
+      "maxSpeed": "prędkość",
+      "coldStart": "zimny start",
+      "cargoCount": "ładunki"
+    },
+    "sort-direction": {
+      "asc": "rosnąco",
+      "desc": "malejąco"
     },
     "loco-diesel": "Spalinowóz",
     "loco-electric": "Elektrowóz",

src/mixins/stockMixin.ts

@@ -15,21 +15,11 @@ export default defineComponent({
       return `${Math.random().toString(36).slice(5)}`;
     },
 
-    getStockObject(vehicle: IVehicle, cargo?: ICargo | null, count = 1): IStock {
+    getStockObject(vehicle: IVehicle, cargo?: ICargo | null): IStock {
-      const isLoco = isTractionUnit(vehicle);
-
       return {
         id: this.getStockId(),
-        type: vehicle.type,
+        vehicleRef: vehicle,
-        length: vehicle.length,
+        cargo: !isTractionUnit(vehicle) && vehicle.loadable && cargo ? cargo : undefined,
-        weight: vehicle.weight,
-        maxSpeed: vehicle.maxSpeed,
-        isLoco,
-        cargo: !isLoco && vehicle.loadable && cargo ? cargo : undefined,
-        count,
-        group: isLoco ? vehicle.group : vehicle.group,
-        constructionType: vehicle.constructionType,
-        restrictions: vehicle.restrictions,
       };
     },
 
@@ -38,14 +28,19 @@ export default defineComponent({
 
       const stock = this.getStockObject(vehicle, cargo);
 
-      if (stock.isLoco && !this.store.stockList[0]?.isLoco) this.store.stockList.unshift(stock);
+      if (
+        isTractionUnit(stock.vehicleRef) &&
+        this.store.stockList.length > 0 &&
+        !isTractionUnit(this.store.stockList[0].vehicleRef)
+      )
+        this.store.stockList.unshift(stock);
       else this.store.stockList.push(stock);
     },
 
     addLocomotive(loco: ILocomotive) {
       const stockObj = this.getStockObject(loco);
 
-      if (this.store.stockList.length > 0 && !this.store.stockList[0].isLoco)
+      if (this.store.stockList.length > 0 && !isTractionUnit(this.store.stockList[0].vehicleRef))
         this.store.stockList.unshift(stockObj);
       else this.store.stockList.push(stockObj);
     },
@@ -72,9 +67,11 @@ export default defineComponent({
         let vehicle: IVehicle | null = null;
         let vehicleCargo: ICargo | null = null;
 
-        const isLoco = /^(EU|EP|ET|SM|EN|2EN|SN)/.test(type);
+        const isTractionUnit = /^([a-zA-Z\d]{0,}-\d{0,})/.test(type);
 
-        if (isLoco) {
+        console.log(type, isTractionUnit);
+
+        if (isTractionUnit) {
           const [locoType, spawnProps] = type.split(',');
           vehicle = this.store.locoDataList.find((loco) => loco.type == locoType) || null;
 

src/mixins/stockPreviewMixin.ts

@@ -14,21 +14,18 @@ export default defineComponent({
 
   methods: {
     previewStock(stock: IStock) {
-      // if (this.store.chosenVehicle?.imageSrc != stock.imgSrc) this.store.imageLoading = true;
+      const vehicleRef = stock.vehicleRef;
 
-      if (stock.isLoco) {
+      this.store.chosenVehicle = vehicleRef;
-        const chosenLoco = this.store.locoDataList.find((v) => v.type == stock.type) || null;
+
-        this.store.chosenVehicle = chosenLoco;
+      if (isTractionUnit(vehicleRef)) {
-        this.store.chosenLoco = chosenLoco;
+        this.store.chosenLoco = vehicleRef;
         this.store.chosenCargo = null;
-        this.store.chosenLocoGroup = stock.group as LocoGroupType;
+        this.store.chosenLocoGroup = vehicleRef.group as LocoGroupType;
       } else {
-        const chosenCar = this.store.carDataList.find((v) => v.type == stock.type) || null;
+        this.store.chosenCar = vehicleRef;
-        this.store.chosenVehicle = chosenCar;
-        this.store.chosenCar = chosenCar;
-
         this.store.chosenCargo = stock.cargo || null;
-        this.store.chosenCarGroup = stock.group as WagonGroupType;
+        this.store.chosenCarGroup = vehicleRef.group as WagonGroupType;
       }
     },
 

src/store.ts

@@ -13,6 +13,7 @@ import { defineStore } from 'pinia';
 import {
   acceptableWeight,
   carDataList,
+  isTractionUnit,
   isTrainPassenger,
   locoDataList,
   maxStockSpeed,
@@ -34,8 +35,6 @@ export const useStore = defineStore({
     isColdStart: false,
     isDoubleManned: false,
 
-    imageLoading: false,
-
     chosenLocoGroup: 'loco-electric' as LocoGroupType,
     chosenCarGroup: 'wagon-passenger' as WagonGroupType,
 
@@ -98,25 +97,29 @@ export const useStore = defineStore({
 
     stockSupportsColdStart: (state) => {
       if (state.stockList.length == 0) return false;
-      if (!state.stockList[0].isLoco) return false;
+
+      if (!isTractionUnit(state.stockList[0].vehicleRef)) return false;
+      else if (state.stockList.length > 1) return false;
 
       const headingLoco = state.stockList[0];
 
       return (
-        state.vehiclesData?.vehicleProps.find((stock) => stock.type == headingLoco.constructionType)
+        state.vehiclesData?.vehicleProps.find(
-          ?.coldStart ?? false
+          (stock) => stock.type == headingLoco.vehicleRef.constructionType
+        )?.coldStart ?? false
       );
     },
 
     stockSupportsDoubleManning: (state) => {
       if (state.stockList.length == 0) return false;
-      if (!state.stockList[0].isLoco) return false;
+      if (!isTractionUnit(state.stockList[0].vehicleRef)) return false;
 
       const headingLoco = state.stockList[0];
 
       return (
-        state.vehiclesData?.vehicleProps.find((stock) => stock.type == headingLoco.constructionType)
+        state.vehiclesData?.vehicleProps.find(
-          ?.doubleManned ?? false
+          (stock) => stock.type == headingLoco.vehicleRef.constructionType
+        )?.doubleManned ?? false
       );
     },
   },
@@ -126,7 +129,6 @@ export const useStore = defineStore({
       try {
         const vehiclesData = (await http.get<IVehiclesData>('/vehicles')).data;
         this.vehiclesData = vehiclesData;
-
       } catch (error) {
         console.error(error);
       }

src/styles/global.scss

@@ -6,8 +6,8 @@ $textColor: #fff;
 $secondaryColor: #1b1b1b;
 $accentColor: #e4c428;
 
-$sponsorColor: salmon;
+$sponsorColor: gold;
-$teamColor: gold;
+$teamColor: #ff4848;
 
 @font-face {
   font-family: 'Lato';
@@ -210,12 +210,11 @@ input[type='number'] {
   outline: none;
 
   padding: 0.25em 0.35em;
+  height: 100%;
 
   color: white;
   font-size: 1em;
 
-  width: 18em;
-
   &:focus-visible {
     border-color: $accentColor;
   }

src/types.ts

@@ -54,11 +54,12 @@ export interface ILocomotive {
   constructionType: string;
   cabinType: string;
   maxSpeed: number;
-  restrictions: Record<RestrictionType, any>;
   weight: number;
   length: number;
   coldStart: boolean;
   doubleManned: boolean;
+  sponsorOnlyTimestamp: number;
+  teamOnly: boolean;
 }
 
 export interface ICarWagon {
@@ -66,25 +67,18 @@ export interface ICarWagon {
   group: WagonGroupType;
   constructionType: string;
   loadable: boolean;
-  restrictions: Record<RestrictionType, any>;
   maxSpeed: number;
   weight: number;
   length: number;
   cargoTypes: ICargo[];
+  sponsorOnlyTimestamp: number;
+  teamOnly: boolean;
 }
 
 export interface IStock {
   id: string;
-  type: string;
+  vehicleRef: IVehicle;
-  group: LocoGroupType | WagonGroupType;
-  constructionType: string;
-  length: number;
-  weight: number;
-  maxSpeed: number;
   cargo?: ICargo;
-  isLoco: boolean;
-  restrictions: Record<RestrictionType, any>;
-  count: number;
 }
 
 export interface IRealComposition {

src/utils/vehicleUtils.ts

@@ -39,7 +39,8 @@ export function locoDataList(vehiclesData: IVehiclesData | undefined) {
       constructionType,
       cabinType,
 
-      restrictions: restrictions ?? {},
+      sponsorOnlyTimestamp: restrictions?.sponsorOnly ?? 0,
+      teamOnly: restrictions?.teamOnly ?? false,
 
       maxSpeed: locoProps.speed,
       length: locoProps.length,
@@ -75,7 +76,8 @@ export function carDataList(vehiclesData: IVehiclesData | undefined) {
       loadable: wagonProps.cargoTypes ? wagonProps.cargoTypes.length > 0 : false,
       cargoTypes: wagonProps?.cargoTypes ?? [],
 
-      restrictions: restrictions ?? {},
+      sponsorOnlyTimestamp: restrictions?.sponsorOnly ?? 0,
+      teamOnly: restrictions?.teamOnly ?? false,
 
       maxSpeed: wagonProps.speed,
       weight: wagonProps?.weight || 0,
@@ -88,25 +90,26 @@ export function carDataList(vehiclesData: IVehiclesData | undefined) {
 
 export function totalWeight(stockList: IStock[]) {
   return stockList.reduce(
-    (acc, stock) => acc + (stock.weight + (stock.cargo?.weight ?? 0)) * stock.count,
+    (acc, stock) => acc + (stock.vehicleRef.weight + (stock.cargo?.weight ?? 0)),
     0
   );
 }
 
 export function totalLength(stockList: IStock[]) {
-  return stockList.reduce((acc, stock) => acc + stock.length * stock.count, 0);
+  return stockList.reduce((acc, stock) => acc + stock.vehicleRef.length, 0);
 }
 
 export function maxStockSpeed(stockList: IStock[]) {
   const stockSpeedLimit = stockList.reduce(
-    (acc, stock) => (stock.maxSpeed < acc || acc == 0 ? stock.maxSpeed : acc),
+    (acc, stock) => (stock.vehicleRef.maxSpeed < acc || acc == 0 ? stock.vehicleRef.maxSpeed : acc),
     0
   );
-  const headingLoco = stockList[0]?.isLoco ? stockList[0] : undefined;
+  const headingLoco =
+    stockList[0] && isTractionUnit(stockList[0].vehicleRef) ? stockList[0] : undefined;
 
   if (!headingLoco) return stockSpeedLimit;
 
-  const locoType = headingLoco.type.split('-')[0];
+  const locoType = headingLoco.vehicleRef.type.split('-')[0];
 
   if (/^(EN|2EN|SN)/.test(locoType)) return stockSpeedLimit;
 
@@ -121,9 +124,9 @@ export function maxStockSpeed(stockList: IStock[]) {
 }
 
 export function acceptableWeight(stockList: IStock[]) {
-  if (stockList.length == 0 || !stockList[0].isLoco) return 0;
+  if (stockList.length == 0 || !isTractionUnit(stockList[0].vehicleRef)) return 0;
 
-  const activeLocomotiveType = stockList[0].type.split('-')[0];
+  const activeLocomotiveType = stockList[0].vehicleRef.type.split('-')[0];
 
   const locoMassLimit = calculateMassLimit(
     activeLocomotiveType as MassLimitLocoType,
@@ -135,9 +138,9 @@ export function acceptableWeight(stockList: IStock[]) {
 
 export function isTrainPassenger(stockList: IStock[]) {
   if (stockList.length == 0) return false;
-  if (stockList.every((stock) => stock.isLoco)) return false;
+  if (stockList.every((stock) => isTractionUnit(stock.vehicleRef))) return false;
 
   return stockList
-    .filter((stock) => !stock.isLoco)
+    .filter((stock) => !isTractionUnit(stock.vehicleRef))
-    .every((stock) => stock.group === 'wagon-passenger');
+    .every((stock) => stock.vehicleRef.group === 'wagon-passenger');
 }

vite.config.ts

@@ -6,7 +6,10 @@ import { VitePWA } from 'vite-plugin-pwa';
 // https://vitejs.dev/config/
 export default defineConfig({
   server: {
-    port: 2137,
+    port: 2138,
+  },
+  preview: {
+    port: 4138,
   },
   plugins: [
     vue(),
@@ -25,41 +28,10 @@ export default defineConfig({
 
         runtimeCaching: [
           {
-            urlPattern: new RegExp('^https://rj.td2.info.pl/dist/img/thumbnails/*', 'i'),
+            urlPattern: /^https:\/\/.*\.spythere\.eu\/.*/i,
-            handler: 'CacheFirst',
+            handler: 'StaleWhileRevalidate',
             options: {
-              cacheName: 'swdr-images-cache',
+              cacheName: 'spythere-cache',
-              expiration: {
-                maxEntries: 50,
-                maxAgeSeconds: 60 * 60 * 24, // <== 1 day
-              },
-              cacheableResponse: {
-                statuses: [0, 200, 404],
-              },
-            },
-          },
-          {
-            urlPattern: new RegExp('^https://static.spythere.eu/images/*', 'i'),
-            handler: 'CacheFirst',
-            options: {
-              cacheName: 'spythere-api-cache',
-              expiration: {
-                maxEntries: 100,
-                maxAgeSeconds: 60 * 60 * 24, // <== 1 day
-              },
-              cacheableResponse: {
-                statuses: [200, 302],
-              },
-            },
-          },
-          {
-            urlPattern: new RegExp('^https://stacjownik.spythere.eu/vehicles', 'i'),
-            handler: 'NetworkFirst',
-            options: {
-              cacheName: 'vehicles-cache',
-              cacheableResponse: {
-                statuses: [200],
-              },
             },
           },
         ],