Merge do wersji 1.5.0

footer margin hotfix

hotfixy footera

.gitignore

@@ -6,6 +6,7 @@ node_modules
 # local env files
 .env.local
 .env.*.local
+.env
 
 # Log files
 npm-debug.log*
@@ -21,4 +22,7 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
-node_modules
+node_modules
+
+# Dev files
+stockInfoDev.json

package.json

@@ -1,22 +1,22 @@
-{
-  "name": "pojazdownik",
-  "version": "1.4.0",
-  "private": true,
-  "scripts": {
-    "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
-    "preview": "yarn build && vite preview --port 4174"
-  },
-  "dependencies": {
-    "pinia": "^2.0.17",
-    "vue": "^3.2.37"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^4.1.0",
-    "sass": "^1.59.3",
-    "typescript": "^5.0.2",
-    "vite": "^4.2.1",
-    "vite-plugin-pwa": "^0.14.6",
-    "vue-tsc": "^1.2.0"
-  }
-}
+{
+  "name": "pojazdownik",
+  "version": "1.5.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "yarn build && vite preview --port 4174"
+  },
+  "dependencies": {
+    "pinia": "^2.0.17",
+    "vue": "^3.2.37"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.1.0",
+    "sass": "^1.59.3",
+    "typescript": "^5.0.2",
+    "vite": "^4.2.1",
+    "vite-plugin-pwa": "^0.14.6",
+    "vue-tsc": "^1.2.0"
+  }
+}

src/App.vue

@@ -1,96 +1,37 @@
 <template>
-  <div class="image-preview" v-if="store.vehiclePreviewSrc != ''" @click="() => (store.vehiclePreviewSrc = '')">
-    <img :src="store.vehiclePreviewSrc" alt="preview" />
-  </div>
-
-  <div class="g-card-dimmer" v-if="store.isRandomizerCardOpen" @click="store.isRandomizerCardOpen = false"></div>
-  <div class="g-card-dimmer" v-if="store.isRealStockListCardOpen" @click="store.isRealStockListCardOpen = false"></div>
-
-  <keep-alive>
-    <RealStockCard v-if="store.isRealStockListCardOpen" />
-  </keep-alive>
-  <!-- <transition name="card-appear"> -->
-  <!-- </transition> -->
-
-  <div class="app_container">
-    <main>
-      <LogoSection />
-
-      <InputsSection />
-
-      <TrainImageSection />
-
-      <StockSection />
-    </main>
-
-    <footer>
-      <div class="text--grayed" style="margin-bottom: 0.25em">
-        Ta strona ma charakter informacyjny. Autor nie ponosi odpowiedzialności za tworzenie pociągów niezgodnych z
-        <a
-          style="color: #ccc"
-          href="https://docs.google.com/document/d/1UAAPUtN0d_RoS4RgOzEzllJZJhA0VcizzCzKW4QylbY/edit"
-          target="_blank"
-        >
-          regulaminem symulatora Train Driver 2</a
-        >!
-      </div>
-      <div class="text--grayed" style="margin-bottom: 0.25em">
-        Strona jest kompletna dla wersji 2022.2.2 symulatora TD2
-      </div>
-      &copy;
-      <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
-      {{ new Date().getUTCFullYear() }} | v{{ VERSION }}
-    </footer>
-  </div>
+  <AppModals />
+  <ImageFullscreenPreview v-if="store.vehiclePreviewSrc" />
+  <AppContainerView />
 </template>
 
 <script lang="ts">
-import packageInfo from '.././package.json';
-
 import { defineComponent } from 'vue';
-
-import InputsSection from './components/sections/InputsSection.vue';
-
 import { useStore } from './store';
-import TrainImageSection from './components/sections/TrainImageSection.vue';
-import LogoSection from './components/sections/LogoSection.vue';
-import RealStockCard from './components/cards/RealStockCard.vue';
-import StockSection from './components/sections/StockSection.vue';
+import ImageFullscreenPreview from './components/utils/ImageFullscreenPreview.vue';
+import AppContainerView from './views/AppContainerView.vue';
+import AppModals from './components/app/AppModals.vue';
 
 export default defineComponent({
-  components: {
-    StockSection,
-    InputsSection,
-    TrainImageSection,
-    LogoSection,
-    RealStockCard,
+  data() {
+    return {
+      store: useStore(),
+    };
   },
-
-  data: () => ({
-    VERSION: packageInfo.version,
-    store: useStore(),
-  }),
-
   async created() {
-    const stockData = await (
-      await fetch(`https://spythere.github.io/api/td2/data/stockInfo.json?t=${Math.floor(Date.now() / 60000)}`)
-    ).json();
-
-    this.store.stockData = stockData;
+    /* dev info testing */
+    // if (import.meta.env['VITE_STOCK_DEV'] == '1') {
+    //   const data = await import('../stockInfoDev.json');
+    //   this.store.stockData = data.default as any;
+    // }
+    this.store.fetchStockInfoData();
+    this.store.handleRouting();
   },
+  components: { ImageFullscreenPreview, AppContainerView, AppModals },
 });
 </script>
 
 <style lang="scss">
-@import './styles/global';
-
-.app_container {
-  min-height: 100vh;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
+@import './styles/global.scss';
 
 /* APP */
 #app {
@@ -119,65 +60,10 @@ h2 {
   color: #d1d1d1;
 }
 
-.image-preview {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 99;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  width: 100%;
-  height: 100%;
-
-  background: rgba(black, 0.85);
-
-  img {
-    width: 90%;
-    max-width: 800px;
-  }
-}
-
-/* MAIN SECTION */
-
-main {
-  display: grid;
-  gap: 1em 3em;
-
-  width: 100%;
-  max-width: 1300px;
-  min-height: 75vh;
-
-  grid-template-columns: 1fr 2fr;
-  grid-template-rows: auto 360px minmax(400px, 1fr);
-
-  // padding: 0 1em;
-  margin-bottom: 2em;
-}
-
-/* FOOTER SECTION */
-
-footer {
-  margin-top: auto;
-  text-align: center;
-  padding: 0 1em;
-}
-
-/* MOBILE VIEWS */
-
 @media screen and (max-width: $breakpointMd) {
   #app {
     font-size: calc(0.7rem + 0.75vw);
   }
-
-  main {
-    display: flex;
-    flex-direction: column;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-  }
 }
 </style>
 

src/components/app/AppModals.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <keep-alive>
+      <RealStockCard v-if="store.isRealStockListCardOpen" />
+    </keep-alive>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../../store';
+import RealStockCard from '../cards/RealStockCard.vue';
+
+export default defineComponent({
+  components: { RealStockCard },
+  data() {
+    return {
+      store: useStore(),
+    };
+  },
+});
+</script>
+
+<style scoped></style>

src/components/app/Footer.vue

@@ -0,0 +1,52 @@
+<template>
+  <footer>
+    <div class="text--grayed">
+      Ta strona ma charakter informacyjny. Autor nie ponosi odpowiedzialności za tworzenie pociągów niezgodnych z
+      <a
+        style="color: #ccc"
+        href="https://docs.google.com/document/d/1UAAPUtN0d_RoS4RgOzEzllJZJhA0VcizzCzKW4QylbY/edit"
+        target="_blank"
+      >
+        regulaminem symulatora Train Driver 2</a
+      >!
+    </div>
+
+    <div class="text--grayed" v-if="store.stockData">
+      Strona jest kompletna dla wersji {{ store.stockData.version }} symulatora TD2
+    </div>
+
+    <div>
+      &copy;
+      <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';
+
+export default defineComponent({
+  data() {
+    return {
+      isOnProductionHost: location.hostname == 'pojazdownik-td2.web.app',
+      VERSION: packageInfo.version,
+      store: useStore(),
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+footer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+
+  text-align: center;
+  padding: 1em 1em 0 1em;
+  margin-top: auto;
+}
+</style>

src/components/app/MainContainer.vue

@@ -0,0 +1,45 @@
+<template>
+  <main>
+    <LogoSection />
+    <InputsSection />
+    <TrainImageSection />
+    <StockSection />
+  </main>
+</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';
+
+export default defineComponent({
+  components: { LogoSection, InputsSection, TrainImageSection, StockSection },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/global.scss';
+
+main {
+  display: grid;
+  gap: 1em;
+
+  width: 100%;
+  max-width: 1500px;
+  min-height: 75vh;
+
+  grid-template-columns: 1fr 2fr;
+  grid-template-rows: auto 360px minmax(400px, 1fr);
+}
+
+@media screen and (max-width: $breakpointMd) {
+  main {
+    display: flex;
+    flex-direction: column;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+  }
+}
+</style>

src/components/sections/InputsSection.vue

@@ -107,10 +107,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
-import { IStock } from '../../types';
 import imageMixin from '../../mixins/imageMixin';
 import { useStore } from '../../store';
-import { isLocomotive } from '../../utils/vehicleUtils';
 import stockPreviewMixin from '../../mixins/stockPreviewMixin';
 import stockMixin from '../../mixins/stockMixin';
 
@@ -197,22 +195,8 @@ export default defineComponent({
 
       if (!vehicle) return;
 
-      const stockObj: IStock = {
-        id: `${Date.now()}`,
-        useType: isLocomotive(vehicle) ? vehicle.power : vehicle.useType,
-        type: vehicle.type,
-        length: vehicle.length,
-        mass: vehicle.mass,
-        maxSpeed: vehicle.maxSpeed,
-        isLoco: isLocomotive(vehicle),
-        cargo:
-          !isLocomotive(vehicle) && vehicle.loadable && this.store.chosenCargo ? this.store.chosenCargo : undefined,
-        count: 1,
-        imgSrc: vehicle.imageSrc,
-        supportersOnly: vehicle.supportersOnly,
-      };
-
-      this.store.stockList[this.store.chosenStockListIndex] = stockObj;
+      const stockObject = this.getStockObject(vehicle, this.store.chosenCargo);
+      this.store.stockList[this.store.chosenStockListIndex] = stockObject;
     },
   },
 });

src/components/sections/LogoSection.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="logo-section">
+  <section class="logo-section" @click="navigate">
     <img src="/images/logo.svg" alt="logo pojazdownik" />
   </section>
 </template>
@@ -9,6 +9,12 @@ export default {
   setup() {
     return {};
   },
+
+  methods: {
+    navigate() {
+      window.location.pathname = '';
+    },
+  },
 };
 </script>
 
@@ -21,11 +27,13 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
+
+  cursor: pointer;
 }
 
 img {
   max-width: 25em;
-  width: 100%;    
+  width: 100%;
 }
 </style>
 

src/components/sections/StockSection.vue

@@ -3,11 +3,13 @@
     <div class="section_modes">
       <button
         class="btn"
-        v-for="(id, name) in sectionModes"
+        ref="sectionButtonRefs"
+        v-for="(id, name, i) in sectionModes"
         @click="chooseSection(id)"
         :data-selected="store.stockSectionMode == id"
       >
-        {{ name }}
+        <span class="text--accent">{{ i + 1 }}.</span> {{ name }}
+        <span v-if="id == 'stock-list'">({{ store.stockList.length }})</span>
       </button>
     </div>
 
@@ -20,26 +22,52 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, KeepAlive } from 'vue';
+import { computed, KeepAlive, 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([]);
 
 const store = useStore();
 type SectionMode = typeof store.stockSectionMode;
 
 const sectionModes: { [key: string]: SectionMode } = {
   SKŁAD: 'stock-list',
+  POJAZDY: 'wiki-list',
   'GNR NUMERU': 'number-generator',
   'GNR SKŁADU': 'stock-generator',
 };
 
+const sectionKeyIndexes: { [key: number]: SectionMode } = {
+  1: 'stock-list',
+  2: 'wiki-list',
+  3: 'number-generator',
+  4: 'stock-generator',
+};
+
+onMounted(() => {
+  window.addEventListener('keydown', (e) => {
+    if (e.target instanceof HTMLInputElement) return;
+
+    if (/[1234]/.test(e.key)) {
+      const keyNum = Number(e.key);
+      store.stockSectionMode = sectionKeyIndexes[keyNum];
+      (sectionButtonRefs.value[keyNum - 1] as HTMLButtonElement).focus();
+    }
+  });
+});
+
 const chosenSectionComponent = computed(() => {
   switch (store.stockSectionMode) {
     case 'stock-list':
       return StockListTab;
 
+    case 'wiki-list':
+      return WikiListTab;
+
     case 'stock-generator':
       return StockGeneratorTab;
 
@@ -83,7 +111,8 @@ function chooseSection(sectionId: SectionMode) {
 
 .section_modes {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(4, 1fr);
+
   gap: 0.5em;
 
   margin-bottom: 0.5em;
@@ -110,5 +139,11 @@ function chooseSection(sectionId: SectionMode) {
     }
   }
 }
+
+@media screen and (max-width: 650px) {
+  .section_modes {
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  }
+}
 </style>
 

src/components/sections/TrainImageSection.vue

@@ -144,7 +144,7 @@ export default defineComponent({
       width: 100%;
       height: 100%;
 
-      cursor: pointer;
+      cursor: zoom-in;
     }
 
     .empty-message,

src/components/tabs/NumberGeneratorTab.vue

@@ -6,31 +6,40 @@
 
     <div class="tab_content">
       <div class="options">
-        <select v-model="beginRegionName" @change="randomizeTrainNumber">
+        <select v-model="beginRegionName" @change="randomizeTrainNumber()">
           <option :value="null" disabled>Początkowy obszar konstrukcyjny</option>
           <option v-for="(_, name) in genData.regionNumbers" :value="name">{{ name }}</option>
         </select>
 
-        <select v-model="endRegionName" @change="randomizeTrainNumber">
+        <select v-model="endRegionName" @change="randomizeTrainNumber()">
           <option :value="null" disabled>Końcowy obszar konstrukcyjny</option>
           <option v-for="(_, name) in genData.regionNumbers" :value="name">{{ name }}</option>
         </select>
 
-        <select v-model="categoryRules" @change="randomizeTrainNumber">
+        <select v-model="categoryRules" @change="randomizeTrainNumber()">
           <option :value="null" disabled>Kategoria pociągu</option>
           <option v-for="(rules, category) in genData.categories" :value="rules">{{ category }}</option>
         </select>
       </div>
 
-      <div class="generated-number">
-        <span v-if="trainNumber">Wygenerowany numer pociągu: <b class="text--accent">{{ trainNumber }}</b></span>
-        <span v-else>Wybierz obszary konstrukcyjne i kategorię!</span>
+      <div class="generated-number" @click="copyNumber">
+        <span v-if="trainNumber">
+          Wygenerowany numer pociągu: <b class="text--accent">{{ trainNumber }}</b>
+        </span>
+        <span v-else>Wybierz kategorię oraz obszary konstrukcyjne (opcjonalnie)</span>
       </div>
 
-      <hr>
-      
+      <div class="tab_links">
+        <a href="https://wiki.td2.info.pl/index.php?title=Zasady_numeracji_poci%C4%85g%C3%B3w" target="_blank">
+          > Szczegółowe zasady numeracji (wikipedia TD2)
+        </a>
+      </div>
+
+      <hr />
+
       <div class="tab_actions">
-        <button class="btn" @click="randomizeTrainNumber">PRZELOSUJ</button>
+        <button class="btn" @click="randomizeTrainNumber(true)">LOSUJ OBSZARY</button>
+        <button class="btn" @click="randomizeTrainNumber(false)">LOSUJ NUMER</button>
       </div>
     </div>
   </div>
@@ -49,22 +58,43 @@ const categoryRules = ref(null) as Ref<string | null>;
 
 const trainNumber = ref(null) as Ref<string | null>;
 
-const randomizeTrainNumber = () => {
-  if (beginRegionName.value == null || endRegionName.value == null || categoryRules.value == null) return '';
+const copyNumber = () => {
+  if (trainNumber.value) {
+    navigator.clipboard.writeText(trainNumber.value);
+    alert('Skopiowano numer do schowka!');
+  }
+};
+
+const randomizeTrainNumber = (randomizeRegions = false) => {
+  if (categoryRules.value == null) return;
+
+  const regionKeys = Object.keys(genData.regionNumbers);
+
+  if (beginRegionName.value == null || randomizeRegions)
+    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;
 
   let number = '';
 
   if (beginRegionName.value == endRegionName.value) {
-    const sameRegionsNumbers = genData.sameRegions[beginRegionName.value];
+    const sameRegionsNumbers = genData.sameRegions[beginRegionName.value!];
     const randRegionNumber = sameRegionsNumbers[Math.floor(Math.random() * sameRegionsNumbers.length)];
     number += randRegionNumber.toString();
   } else {
-    const beginRegionNumber = genData.regionNumbers[beginRegionName.value];
-    const endRegionNumber = genData.regionNumbers[endRegionName.value];
+    const beginRegionNumber = genData.regionNumbers[beginRegionName.value!];
+    const endRegionNumber = genData.regionNumbers[endRegionName.value!];
 
     number += `${beginRegionNumber}${endRegionNumber}`;
   }
 
+  // Do not roll the rest of number again if only randomize regions
+  if (randomizeRegions) {
+    trainNumber.value = number + trainNumber.value?.substring(2);
+    return;
+  }
+
   const rulesArray = categoryRules.value.split(';').map((r) => ({
     index: r.split(':')[0],
     rule: r.split(':')[1],
@@ -104,6 +134,9 @@ const randomizeTrainNumber = () => {
 .generated-number {
   font-size: 1.3em;
   font-weight: bold;
+  text-align: center;
+
+  cursor: pointer;
 
   margin: 0.5em 0;
   padding: 0.5em;
@@ -111,11 +144,13 @@ const randomizeTrainNumber = () => {
 }
 
 .tab_actions {
-  margin-top: 0.5em;
+  grid-template-columns: 1fr 1fr;
+  margin: 0.5em 0;
+}
 
-  button {
-    grid-column: 3;
-  }
+.tab_links {
+  display: flex;
+  justify-content: flex-end;
 }
 
 @media screen and (max-width: $breakpointMd) {

src/components/tabs/StockGeneratorTab.vue

@@ -99,7 +99,7 @@ import { defineComponent } from 'vue';
 import { useStore } from '../../store';
 
 import stockMixin from '../../mixins/stockMixin';
-import { ICargo, ICarWagon } from '../../types';
+import { ICargo, ICarWagon, IStock } from '../../types';
 import warningsMixin from '../../mixins/warningsMixin';
 
 export default defineComponent({
@@ -180,21 +180,42 @@ export default defineComponent({
         return acc;
       }, [] as { constructionType: string; carPool: { carWagon: ICarWagon; cargo?: ICargo }[] }[]);
 
-      const headingLoco = this.store.stockList[0]?.isLoco ? this.store.stockList[0] : undefined;
+      let bestGeneration: { stockList: IStock[]; value: number } = { stockList: [], value: 0 };
 
-      this.store.stockList.length = headingLoco ? 1 : 0;
-      const maxMass = this.store.acceptableMass || this.maxMass;
+      for (let i = 0; i < 10; i++) {
+        const headingLoco = this.store.stockList[0]?.isLoco ? this.store.stockList[0] : undefined;
+        this.store.stockList.length = headingLoco ? 1 : 0;
 
-      new Array(this.maxCarCount).fill(0).forEach(() => {
-        const randomStockType = generatedChosenStockList[~~(Math.random() * generatedChosenStockList.length)];
-        const { carWagon, cargo } = randomStockType.carPool[~~(Math.random() * randomStockType.carPool.length)];
+        const maxMass =
+          this.store.acceptableMass > 0 ? Math.min(this.store.acceptableMass, this.maxMass) : this.maxMass;
 
-        if (this.store.totalMass + (cargo?.totalMass || carWagon.mass) > maxMass) return;
-        if (this.store.totalLength + carWagon.length > this.maxLength) return;
+        let exceeded = false;
 
-        this.addCarWagon(carWagon, cargo);
-      });
+        while (!exceeded) {
+          const randomStockType = generatedChosenStockList[~~(Math.random() * generatedChosenStockList.length)];
+          const { carWagon, cargo } = randomStockType.carPool[~~(Math.random() * randomStockType.carPool.length)];
 
+          if (
+            this.store.totalMass + (cargo?.totalMass || carWagon.mass) > maxMass ||
+            this.store.totalLength + carWagon.length > this.maxLength ||
+            this.store.stockList.length > this.maxCarCount
+          ) {
+            exceeded = true;
+            break;
+          }
+
+          this.addCarWagon(carWagon, cargo);
+        }
+
+        const currentGenerationValue = this.store.totalLength + this.store.totalMass + this.store.stockList.length;
+
+        if (bestGeneration.value < currentGenerationValue) {
+          bestGeneration.stockList = this.store.stockList;
+          bestGeneration.value = currentGenerationValue;
+        }
+      }
+
+      this.store.stockList = bestGeneration.stockList;
       this.store.stockSectionMode = 'stock-list';
     },
 
@@ -244,7 +265,7 @@ export default defineComponent({
 .generator_vehicles {
   display: grid;
   gap: 0.5em;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
 
   button {
     position: relative;
@@ -294,12 +315,5 @@ export default defineComponent({
   font-weight: bold;
   color: black;
 }
-
-@media only screen and (max-width: 470px) {
-  .generator_cargo,
-  .generator_vehicles {
-    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-  }
-}
 </style>
 

src/components/tabs/StockListTab.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="stock-list">
+  <section class="stock-list-tab">
     <div class="stock_controls" :data-disabled="store.chosenStockListIndex == -1">
       <b class="no">
         POJAZD NR <span class="text--accent">{{ store.chosenStockListIndex + 1 }}</span> &nbsp;
@@ -68,7 +68,18 @@
       </span>
     </div>
 
-    <div class="stock_warnings">
+    <div class="stock_cold-start">
+      <label>
+        <input
+          type="checkbox"
+          v-model="store.isColdStart"
+          :disabled="!locoSupportsColdStart(store.stockList[0]?.constructionType || '')"
+        />
+        Zimny start lokomotywy czołowej (tylko elektrowozy typów 303E i 203E)
+      </label>
+    </div>
+
+    <div class="stock_warnings" v-if="stockHasWarnings">
       <div class="warning" v-if="locoNotSuitable">
         Lokomotywy EP07 i EP08 są przeznaczone jedynie do ruchu pasażerskiego!
       </div>
@@ -147,10 +158,11 @@ import { defineComponent } from 'vue';
 import TrainImage from '../sections/TrainImageSection.vue';
 
 import { useStore } from '../../store';
+
+import { locoSupportsColdStart } from '../../utils/locoUtils';
 import warningsMixin from '../../mixins/warningsMixin';
 import imageMixin from '../../mixins/imageMixin';
 import stockPreviewMixin from '../../mixins/stockPreviewMixin';
-import { IStock } from '../../types';
 import StockThumbnails from '../utils/StockThumbnails.vue';
 import stockMixin from '../../mixins/stockMixin';
 
@@ -162,8 +174,7 @@ export default defineComponent({
 
   setup() {
     const store = useStore();
-    
-    
+
     return {
       store,
     };
@@ -178,13 +189,12 @@ export default defineComponent({
   computed: {
     stockString() {
       return this.store.stockList
-        .map((stock) => {
-          let s = stock.isLoco || !stock.cargo ? stock.type : `${stock.type}:${stock.cargo.id}`;
+        .map((stock, i) => {
+          let stockTypeStr = stock.isLoco || !stock.cargo ? stock.type : `${stock.type}:${stock.cargo.id}`;
+          let coldStart =
+            i == 0 && this.store.isColdStart && locoSupportsColdStart(stock.constructionType || '') ? ',c' : '';
 
-          let final = s;
-          for (let i = 0; i < stock.count - 1; i++) final += `;${s}`;
-
-          return final;
+          return stockTypeStr + coldStart;
         })
         .join(';');
     },
@@ -196,19 +206,16 @@ export default defineComponent({
     chosenStockVehicle() {
       return this.store.chosenStockListIndex == -1 ? undefined : this.store.stockList[this.store.chosenStockListIndex];
     },
-  },
 
-  methods: {
     stockHasWarnings() {
       return this.tooManyLocomotives || this.trainTooHeavy || this.trainTooLong || this.locoNotSuitable;
     },
+  },
+
+  methods: {
+    locoSupportsColdStart,
 
     copyToClipboard() {
-      // if (this.stockHasWarnings()) {
-      //   alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
-      //   return;
-      // }
-
       navigator.clipboard.writeText(this.stockString);
 
       setTimeout(() => {
@@ -317,9 +324,6 @@ export default defineComponent({
     downloadStock() {
       if (this.store.stockList.length == 0) return alert('Lista pojazdów jest pusta!');
 
-      // if (this.stockHasWarnings())
-      //   return alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
-
       const defaultName = `${this.store.chosenRealStockName || this.store.stockList[0].type} ${
         this.store.totalMass
       }t; ${this.store.totalLength}m; vmax ${this.store.maxStockSpeed}`;
@@ -395,6 +399,11 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../../styles/global';
 
+.stock-list-tab {
+  display: grid;
+  grid-gap: 0.5em;
+}
+
 .warning {
   padding: 0.25em;
   background: $accentColor;
@@ -417,7 +426,6 @@ export default defineComponent({
   flex-wrap: wrap;
 
   padding: 0.5em;
-  margin-bottom: 1em;
 
   background-color: #353a57;
 
@@ -450,7 +458,6 @@ export default defineComponent({
 .stock_actions {
   display: grid;
   gap: 0.5em;
-  margin-bottom: 1em;
 
   grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
 
@@ -472,9 +479,7 @@ export default defineComponent({
 
 ul {
   position: relative;
-
   overflow: auto;
-
   height: 500px;
 }
 
@@ -518,10 +523,6 @@ li > .stock-info {
   }
 }
 
-.stock_warnings {
-  margin: 0.5em 0;
-}
-
 .supporter {
   color: salmon;
 }

src/components/tabs/WikiListTab.vue

@@ -0,0 +1,361 @@
+<template>
+  <section class="wiki-list tab">
+    <div class="tab_header">
+      <h2>LISTA DOSTĘPNYCH POJAZDÓW</h2>
+    </div>
+
+    <div class="tab_content">
+      <div class="actions-panel">
+        <div class="actions-panel_vehicles">
+          <button class="btn btn--choice" @click="changeWikiMode('locomotives')">POJ. TRAKCYJNE</button>
+          <button class="btn btn--choice" @click="changeWikiMode('carWagons')">WAGONY</button>
+        </div>
+
+        <div class="actions-panel_search">
+          <input type="text" placeholder="Wyszukaj pojazd..." v-model="searchedVehicleTypeName" />
+        </div>
+      </div>
+
+      <div class="table-wrapper" @scroll="scrollEvent" ref="table-wrapper">
+        <table>
+          <thead>
+            <tr>
+              <th v-for="header in wikiMode == 'locomotives' ? locoHeaders : carHeaders" @click="toggleSorter(header)">
+                {{ header.name }}
+
+                <span v-if="currentModeSorter.id == header.id">
+                  {{ currentModeSorter.direction == 1 ? `&uArr;` : `&dArr;` }}
+                </span>
+              </th>
+            </tr>
+          </thead>
+
+          <tbody v-if="wikiMode == 'locomotives'">
+            <tr
+              v-for="loco in computedLocoList"
+              @click="previewLocomotive(loco)"
+              @keydown.enter="previewLocomotive(loco)"
+              @dblclick="addLocomotive(loco)"
+              tabindex="0"
+            >
+              <td>
+                <img
+                  :src="`https://spythere.github.io/api/td2/images/${loco.type}--300px.jpg`"
+                  loading="lazy"
+                  :alt="`Lokomotywa ${loco.type}`"
+                />
+              </td>
+
+              <td>{{ loco.type }}</td>
+              <td>{{ vehicleTypes[loco.power] }}</td>
+              <td>{{ loco.constructionType }}</td>
+              <td>{{ locoSupportsColdStart(loco.constructionType) ? `&check;` : '&cross;' }}</td>
+              <td>{{ loco.length }}m</td>
+              <td>{{ loco.mass }}t</td>
+              <td>{{ loco.maxSpeed }}km/h</td>
+            </tr>
+          </tbody>
+
+          <tbody v-else>
+            <tr
+              v-for="car in computedCarList"
+              @keydow.enter="previewCarWagon(car)"
+              @click="previewCarWagon(car)"
+              @dblclick="addCarWagon(car)"
+              tabindex="0"
+            >
+              <td>
+                <img
+                  :src="`https://spythere.github.io/api/td2/images/${car.type}--300px.jpg`"
+                  loading="lazy"
+                  :alt="`Lokomotywa ${car.type}`"
+                />
+              </td>
+
+              <td>{{ car.type }}</td>
+              <td>{{ car.constructionType }}</td>
+              <td>{{ car.length }}m</td>
+              <td>{{ car.mass }}t</td>
+              <td>{{ car.maxSpeed }}km/h</td>
+              <td>{{ car.cargoList.length == 0 ? '-' : car.cargoList.length }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../../store';
+import stockPreviewMixin from '../../mixins/stockPreviewMixin';
+import { Vehicle } from '../../types';
+import { isLocomotive } from '../../utils/vehicleUtils';
+import stockMixin from '../../mixins/stockMixin';
+import { locoSupportsColdStart } from '../../utils/locoUtils';
+
+type WikiMode = 'locomotives' | 'carWagons';
+type SorterID =
+  | 'type'
+  | 'constructionType'
+  | 'image'
+  | 'length'
+  | 'mass'
+  | 'maxSpeed'
+  | 'cargoCount'
+  | 'power'
+  | 'coldStart';
+
+interface WikiHeader {
+  name: string;
+  id: SorterID;
+  sortable: boolean;
+}
+
+const locoHeaders: WikiHeader[] = [
+  { name: 'Zdjęcie', id: 'image', sortable: false },
+  { name: 'Nazwa', id: 'type', sortable: true },
+  { name: 'Rodzaj', id: 'power', sortable: true },
+  { name: 'Konstrukcja', id: 'constructionType', sortable: true },
+  { name: 'Zimny start', id: 'coldStart', sortable: true },
+  { name: 'Długość', id: 'length', sortable: true },
+  { name: 'Masa', id: 'mass', sortable: true },
+  { name: 'Prędkość', id: 'maxSpeed', sortable: true },
+];
+
+const carHeaders: WikiHeader[] = [
+  { name: 'Zdjęcie', id: 'image', sortable: false },
+  { name: 'Nazwa', id: 'type', sortable: true },
+  { name: 'Konstrukcja', id: 'constructionType', sortable: true },
+  { name: 'Długość', id: 'length', sortable: true },
+  { name: 'Masa', id: 'mass', sortable: true },
+  { name: 'Prędkość', id: 'maxSpeed', sortable: true },
+  { name: 'Ładunki', id: 'cargoCount', sortable: true },
+];
+
+const vehicleTypes: { [key: string]: string } = {
+  'loco-ezt': 'EZT',
+  'loco-szt': 'SZT',
+  'loco-s': 'Spalinowóz',
+  'loco-e': 'Elektrowóz',
+};
+
+export default defineComponent({
+  mixins: [stockPreviewMixin, stockMixin],
+
+  data() {
+    return {
+      store: useStore(),
+      locoHeaders,
+      carHeaders,
+      vehicleTypes,
+
+      locosScrollTop: 0,
+      carsScrollTop: 0,
+
+      wikiMode: 'locomotives' as WikiMode,
+      searchedVehicleTypeName: '',
+
+      currentLocoSorter: {
+        id: 'type' as SorterID,
+        direction: 1,
+      },
+
+      currentCarSorter: {
+        id: 'type' as SorterID,
+        direction: 1,
+      },
+    };
+  },
+
+  activated() {
+    const tableWrapperRef = this.$refs['table-wrapper'] as HTMLElement;
+    tableWrapperRef.scrollTo({ top: this.wikiMode == 'locomotives' ? this.locosScrollTop : this.carsScrollTop });
+  },
+
+  methods: {
+    locoSupportsColdStart,
+
+    scrollEvent(e: Event) {
+      const tableScrollTop = (e.target as HTMLElement).scrollTop;
+
+      if (this.wikiMode == 'locomotives') this.locosScrollTop = tableScrollTop;
+      else this.carsScrollTop = tableScrollTop;
+    },
+
+    changeWikiMode(wikiMode: WikiMode) {
+      this.searchedVehicleTypeName = '';
+      this.wikiMode = wikiMode;
+    },
+
+    toggleSorter(header: WikiHeader) {
+      if (!header.sortable) return;
+
+      if (header.id == this.currentModeSorter.id) this.currentModeSorter.direction *= -1;
+      this.currentModeSorter.id = header.id;
+    },
+
+    sortVehicles(vA: Vehicle, vB: Vehicle) {
+      const { id, direction } = this.currentModeSorter;
+      const vehiclesAreLocos = isLocomotive(vA) && isLocomotive(vB);
+      const vehiclesAreCars = !isLocomotive(vA) && !isLocomotive(vB);
+
+      switch (id) {
+        case 'type':
+        case 'constructionType':
+          return direction == 1 ? vA[id].localeCompare(vB[id]) : vB[id].localeCompare(vA[id]);
+
+        case 'mass':
+        case 'length':
+        case 'maxSpeed':
+          return Math.sign(vA[id] - vB[id]) * direction;
+
+        case 'cargoCount':
+          if (vehiclesAreCars) return Math.sign((vA.cargoList.length || -1) - (vB.cargoList.length || -1)) * direction;
+
+        case 'coldStart':
+          if (vehiclesAreLocos)
+            return (
+              (locoSupportsColdStart(vA.constructionType) > locoSupportsColdStart(vB.constructionType) ? 1 : -1) *
+              direction
+            );
+
+        default:
+          break;
+      }
+
+      return direction == 1 ? vA.type.localeCompare(vB.type) : vB.type.localeCompare(vA.type);
+    },
+  },
+
+  computed: {
+    currentModeSorter() {
+      return this.wikiMode == 'carWagons' ? this.currentCarSorter : this.currentLocoSorter;
+    },
+
+    computedLocoList() {
+      const trimmedSearchValue = this.searchedVehicleTypeName.trim();
+
+      return this.store.locoDataList
+        .filter((loco) => new RegExp(`${trimmedSearchValue}`, 'i').test(loco.type))
+        .sort(this.sortVehicles);
+    },
+
+    computedCarList() {
+      const trimmedSearchValue = this.searchedVehicleTypeName.trim();
+
+      return this.store.carDataList
+        .filter((car) => new RegExp(`${trimmedSearchValue}`, 'i').test(car.type))
+        .sort(this.sortVehicles);
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/tab.scss';
+
+.actions-panel {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  flex-wrap: wrap;
+  gap: 0.5em;
+
+  margin: 0.5em 0;
+}
+
+.actions-panel_vehicles {
+  display: flex;
+  gap: 0.5em;
+}
+
+.actions-panel_search {
+  input {
+    width: auto;
+  }
+}
+
+.table-wrapper {
+  overflow: auto;
+  height: 750px;
+  max-height: 95vh;
+}
+
+.wiki-list table {
+  border-collapse: collapse;
+  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: 85px;
+  }
+
+  td:first-child {
+    width: 120px;
+  }
+
+  td img {
+    display: block;
+    width: 120px;
+  }
+}
+
+@media screen and (max-width: $breakpointMd) {
+  .wiki-list table {
+    td {
+      width: 100px;
+      height: auto;
+
+      img {
+        width: 6em;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: $breakpointSm) {
+  .actions-panel {
+    align-items: stretch;
+    flex-direction: column;
+  }
+  
+  .actions-panel_vehicles {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .actions-panel_search {
+    display: grid;
+  }
+}
+</style>

src/components/utils/ImageFullscreenPreview.vue

@@ -0,0 +1,52 @@
+<template>
+  <div
+    class="image-preview"
+    @click="store.vehiclePreviewSrc = ''"
+    @keydown.esc="store.vehiclePreviewSrc = ''"
+    tabindex="0"
+  >
+    <img :src="store.vehiclePreviewSrc" alt="preview" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../../store';
+
+export default defineComponent({
+  data() {
+    return {
+      store: useStore(),
+    };
+  },
+
+  mounted() {
+    this.$el.focus();
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.image-preview {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 99;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 100%;
+  height: 100%;
+
+  background: rgba(black, 0.85);
+  cursor: zoom-out;
+
+  img {
+    max-width: 100%;
+    height: auto;
+    max-height: 100%;
+  }
+}
+</style>

src/components/utils/StockThumbnails.vue

@@ -86,10 +86,7 @@ const allowDrop = (e: DragEvent) => {
 <style lang="scss" scoped>
 .stock_thumbnails {
   display: flex;
-  margin: 1em 0;
-
   overflow: auto;
-
   background-color: #353a57;
 
   > div {

src/constants/numberGeneratorData.json

@@ -27,8 +27,7 @@
   },
   "categories": {
     "ekspres krajowy (EI)": "2:00-99:2",
-    "międzywojewódzki pośpieszny (MP)": "2:050-169:3",
-    "wojewódzki pośpieszny (RP)": "2:050-169:3",
+    "(między)wojewódzki pośpieszny (MP/RP)": "2:050-169:3",
     "wojewódzki osobowy (RO)": "2:200-999:3",
     "próżny \"służbowy\" (PW)": "2:6;3:0-899:3",
     "towarowy do przewozów masowych (TM)": "2:4;3:0-899:3",

src/constants/speedLimits.json

@@ -7,6 +7,14 @@
       "2000": 70
     }
   },
+  "EU07E": {
+    "passenger": {
+      "650": 125
+    },
+    "cargo": {
+      "2000": 70
+    }
+  },
   "EP07": {
     "passenger": {
       "650": 125
@@ -51,3 +59,4 @@
   }
 }
 
+

src/mixins/stockMixin.ts

@@ -30,6 +30,7 @@ export default defineComponent({
         imgSrc: vehicle.imageSrc,
         useType: isLoco ? vehicle.power : vehicle.useType,
         supportersOnly: vehicle.supportersOnly,
+        constructionType: vehicle.constructionType,
       };
     },
 
@@ -43,13 +44,6 @@ export default defineComponent({
     },
 
     addLocomotive(loco: ILocomotive) {
-      // const previousStock =
-      //   this.store.stockList.length > 0 ? this.store.stockList[this.store.stockList.length - 1] : null;
-      // if (previousStock && previousStock.type == loco.type) {
-      //   this.store.stockList[this.store.stockList.length - 1].count++;
-      //   return;
-      // }
-
       const stockObj = this.getStockObject(loco);
 
       if (this.store.stockList.length > 0 && !this.store.stockList[0].isLoco) this.store.stockList.unshift(stockObj);
@@ -57,15 +51,6 @@ export default defineComponent({
     },
 
     addCarWagon(car: ICarWagon, cargo?: ICargo) {
-      // const previousStock =
-      //   this.store.stockList.length > 0 ? this.store.stockList[this.store.stockList.length - 1] : null;
-
-      // if (previousStock && previousStock.type == car.type && previousStock.cargo?.id == cargo?.id) {
-      //   this.store.stockList[this.store.stockList.length - 1].count++;
-
-      //   return;
-      // }
-
       const stockObj = this.getStockObject(car, cargo);
 
       this.store.stockList.push(stockObj);
@@ -83,13 +68,15 @@ export default defineComponent({
 
       this.store.swapVehicles = false;
 
-      stockArray.forEach((type) => {
+      stockArray.forEach((type, i) => {
         let vehicle: Vehicle | null = null;
         let vehicleCargo: ICargo | null = null;
 
         if (/^(EU|EP|ET|SM|EN|2EN|SN)/.test(type)) {
           const [locoType, coldStart] = type.split(',');
           vehicle = this.store.locoDataList.find((loco) => loco.type == locoType) || null;
+
+          if (i == 0 && coldStart == 'c') this.store.isColdStart = true;
         } else {
           const [carType, cargo] = type.split(':');
           vehicle = this.store.carDataList.find((car) => car.type == carType) || null;

src/mixins/stockPreviewMixin.ts

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import { useStore } from '../store';
-import { IStock, Vehicle } from '../types';
+import { ICarWagon, ILocomotive, IStock, Vehicle } from '../types';
 
 export default defineComponent({
   setup() {
@@ -48,7 +48,7 @@ export default defineComponent({
       });
     },
 
-    previewStock(stock: IStock) {      
+    previewStock(stock: IStock) {
       if (this.store.chosenVehicle?.imageSrc != stock.imgSrc) this.store.imageLoading = true;
 
       if (stock.isLoco) {
@@ -67,14 +67,26 @@ export default defineComponent({
       }
     },
 
+    previewLocomotive(loco: ILocomotive) {
+      this.store.chosenLoco = loco;
+      this.store.chosenVehicle = loco;
+      this.store.chosenLocoPower = loco.power;
+    },
+
+    previewCarWagon(carWagon: ICarWagon) {
+      this.store.chosenCar = carWagon;
+      this.store.chosenCarUseType = carWagon.useType;
+      this.store.chosenVehicle = carWagon;
+
+      this.store.chosenCargo = null;
+    },
+
     resetPreview() {
-        this.store.chosenVehicle = null;
-        this.store.chosenCar = null;
-        this.store.chosenCargo = null;
-        this.store.chosenLoco = null;
-    }
+      this.store.chosenVehicle = null;
+      this.store.chosenCar = null;
+      this.store.chosenCargo = null;
+      this.store.chosenLoco = null;
+    },
   },
 });
 
-
-

src/mixins/warningsMixin.ts

@@ -26,7 +26,7 @@ export default defineComponent({
         !this.store.isTrainPassenger &&
         this.store.stockList.length > 1 &&
         !this.store.stockList.every((stock) => stock.isLoco) &&
-        this.store.stockList.find((stock) => stock.isLoco && stock.type.startsWith('EP'))
+        this.store.stockList.some((stock) => stock.isLoco && stock.type.startsWith('EP'))
       );
     },
 

src/store.ts

@@ -20,6 +20,8 @@ export const useStore = defineStore({
       chosenCargo: null,
       chosenVehicle: null,
 
+      isColdStart: false,
+
       showSupporter: false,
       imageLoading: false,
 
@@ -56,5 +58,29 @@ export const useStore = defineStore({
     chosenRealStock: (state) => chosenRealStock(state),
     acceptableMass: (state) => acceptableMass(state),
   },
+
+  actions: {
+    async fetchStockInfoData() {
+      const stockData = await (await fetch(`https://spythere.github.io/api/td2/data/stockInfo.json`)).json();
+      this.stockData = stockData;
+    },
+
+    handleRouting() {
+      switch (window.location.pathname) {
+        case '/numgnr':
+          this.stockSectionMode = 'number-generator';
+          break;
+        case '/stockgnr':
+          this.stockSectionMode = 'stock-generator';
+          break;
+        case '/vehicles':
+          this.stockSectionMode = 'wiki-list';
+          break;
+        default:
+          break;
+      }
+    },
+  },
 });
 
+

src/styles/global.scss

@@ -48,6 +48,8 @@ a {
   color: white;
   text-decoration: none;
 
+  transition: color 250ms;
+
   &:visited {
     color: white;
   }
@@ -132,9 +134,10 @@ button {
 }
 
 select,
-input {
+input[type="text"],
+input[type="number"] {
   background: none;
-  border: 2px solid white;
+  border: 2px solid #aaa;
   outline: none;
 
   padding: 0.25em 0.35em;
@@ -154,8 +157,9 @@ input {
 }
 
 option {
-  color: black;
+  color: white;
   border: none;
+  background-color: $bgColor;
 }
 
 ul {

src/types.ts

@@ -5,9 +5,10 @@ export interface IStore {
   chosenCar: ICarWagon | null;
   chosenLoco: ILocomotive | null;
   chosenCargo: ICargo | null;
-
   chosenVehicle: Vehicle | null;
 
+  isColdStart: boolean;
+
   showSupporter: boolean;
   imageLoading: boolean;
 
@@ -27,7 +28,7 @@ export interface IStore {
   isRandomizerCardOpen: boolean;
   isRealStockListCardOpen: boolean;
 
-  stockSectionMode: 'stock-list' | 'stock-generator' | 'number-generator';
+  stockSectionMode: 'stock-list' | 'stock-generator' | 'number-generator' | 'wiki-list';
   stockData?: IStockData;
 }
 
@@ -41,8 +42,10 @@ export interface IStockProps {
 }
 
 export interface IStockData {
+  version: string;
+
   generator: {
-    passenger: [];
+    passenger: any;
     cargo: {
       [key: string]: string[];
     };
@@ -97,8 +100,9 @@ export interface ICargo {
 
 export interface IStock {
   id: string;
-  useType: string;
   type: string;
+  useType: string;
+  constructionType: string;
   length: number;
   mass: number;
   maxSpeed: number;

src/utils/locoUtils.ts

@@ -0,0 +1,5 @@
+const supportedConstructions = ['303e', '203e'];
+
+export function locoSupportsColdStart(constructionType: string) {
+  return new RegExp(`(${supportedConstructions.join('|')})`).test(constructionType);
+}

src/views/AppContainerView.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="app-container">
+    <MainContainer />
+    <Footer />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../store';
+
+import MainContainer from '../components/app/MainContainer.vue';
+import Footer from '../components/app/Footer.vue';
+
+export default defineComponent({
+  components: {
+    MainContainer,
+    Footer,
+  },
+
+  data: () => ({
+    store: useStore(),
+  }),
+});
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  min-height: 100vh;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+</style>

yarn.lock

@@ -31,7 +31,7 @@
   resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.20.1.tgz"
   integrity sha512-EWZ4mE2diW3QALKvDMiXnbZpRvlj+nayZ112nK93SnhqOtpdsbVD4W+2tEoT3YNBAG9RBR0ISY758ZkOgsn6pQ==
 
-"@babel/core@^7.0.0", "@babel/core@^7.0.0-0", "@babel/core@^7.11.1", "@babel/core@^7.12.0", "@babel/core@^7.13.0", "@babel/core@^7.4.0-0":
+"@babel/core@^7.11.1":
   version "7.20.2"
   resolved "https://registry.npmjs.org/@babel/core/-/core-7.20.2.tgz"
   integrity sha512-w7DbG8DtMrJcFOi4VrLm+8QM4az8Mo+PuLBKLp2zrYRCow8W/f9xiXm5sN53C8HksCyDQwCKha9JiDoIyPjT2g==
@@ -909,6 +909,111 @@
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
+"@esbuild/android-arm64@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.17.15.tgz#893ad71f3920ccb919e1757c387756a9bca2ef42"
+  integrity sha512-0kOB6Y7Br3KDVgHeg8PRcvfLkq+AccreK///B4Z6fNZGr/tNHX0z2VywCc7PTeWp+bPvjA5WMvNXltHw5QjAIA==
+
+"@esbuild/android-arm@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.17.15.tgz#143e0d4e4c08c786ea410b9a7739779a9a1315d8"
+  integrity sha512-sRSOVlLawAktpMvDyJIkdLI/c/kdRTOqo8t6ImVxg8yT7LQDUYV5Rp2FKeEosLr6ZCja9UjYAzyRSxGteSJPYg==
+
+"@esbuild/android-x64@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.17.15.tgz#d2d12a7676b2589864281b2274355200916540bc"
+  integrity sha512-MzDqnNajQZ63YkaUWVl9uuhcWyEyh69HGpMIrf+acR4otMkfLJ4sUCxqwbCyPGicE9dVlrysI3lMcDBjGiBBcQ==
+
+"@esbuild/darwin-arm64@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.17.15.tgz#2e88e79f1d327a2a7d9d06397e5232eb0a473d61"
+  integrity sha512-7siLjBc88Z4+6qkMDxPT2juf2e8SJxmsbNVKFY2ifWCDT72v5YJz9arlvBw5oB4W/e61H1+HDB/jnu8nNg0rLA==
+
+"@esbuild/darwin-x64@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.17.15.tgz#9384e64c0be91388c57be6d3a5eaf1c32a99c91d"
+  integrity sha512-NbImBas2rXwYI52BOKTW342Tm3LTeVlaOQ4QPZ7XuWNKiO226DisFk/RyPk3T0CKZkKMuU69yOvlapJEmax7cg==
+
+"@esbuild/freebsd-arm64@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.15.tgz#2ad5a35bc52ebd9ca6b845dbc59ba39647a93c1a"
+  integrity sha512-Xk9xMDjBVG6CfgoqlVczHAdJnCs0/oeFOspFap5NkYAmRCT2qTn1vJWA2f419iMtsHSLm+O8B6SLV/HlY5cYKg==
+
+"@esbuild/freebsd-x64@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.17.15.tgz#b513a48446f96c75fda5bef470e64d342d4379cd"
+  integrity sha512-3TWAnnEOdclvb2pnfsTWtdwthPfOz7qAfcwDLcfZyGJwm1SRZIMOeB5FODVhnM93mFSPsHB9b/PmxNNbSnd0RQ==
+
+"@esbuild/linux-arm64@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.17.15.tgz#9697b168175bfd41fa9cc4a72dd0d48f24715f31"
+  integrity sha512-T0MVnYw9KT6b83/SqyznTs/3Jg2ODWrZfNccg11XjDehIved2oQfrX/wVuev9N936BpMRaTR9I1J0tdGgUgpJA==
+
+"@esbuild/linux-arm@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.17.15.tgz#5b22062c54f48cd92fab9ffd993732a52db70cd3"
+  integrity sha512-MLTgiXWEMAMr8nmS9Gigx43zPRmEfeBfGCwxFQEMgJ5MC53QKajaclW6XDPjwJvhbebv+RzK05TQjvH3/aM4Xw==
+
+"@esbuild/linux-ia32@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.17.15.tgz#eb28a13f9b60b5189fcc9e98e1024f6b657ba54c"
+  integrity sha512-wp02sHs015T23zsQtU4Cj57WiteiuASHlD7rXjKUyAGYzlOKDAjqK6bk5dMi2QEl/KVOcsjwL36kD+WW7vJt8Q==
+
+"@esbuild/linux-loong64@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.17.15.tgz#32454bdfe144cf74b77895a8ad21a15cb81cfbe5"
+  integrity sha512-k7FsUJjGGSxwnBmMh8d7IbObWu+sF/qbwc+xKZkBe/lTAF16RqxRCnNHA7QTd3oS2AfGBAnHlXL67shV5bBThQ==
+
+"@esbuild/linux-mips64el@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.17.15.tgz#af12bde0d775a318fad90eb13a0455229a63987c"
+  integrity sha512-ZLWk6czDdog+Q9kE/Jfbilu24vEe/iW/Sj2d8EVsmiixQ1rM2RKH2n36qfxK4e8tVcaXkvuV3mU5zTZviE+NVQ==
+
+"@esbuild/linux-ppc64@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.17.15.tgz#34c5ed145b2dfc493d3e652abac8bd3baa3865a5"
+  integrity sha512-mY6dPkIRAiFHRsGfOYZC8Q9rmr8vOBZBme0/j15zFUKM99d4ILY4WpOC7i/LqoY+RE7KaMaSfvY8CqjJtuO4xg==
+
+"@esbuild/linux-riscv64@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.17.15.tgz#87bd515e837f2eb004b45f9e6a94dc5b93f22b92"
+  integrity sha512-EcyUtxffdDtWjjwIH8sKzpDRLcVtqANooMNASO59y+xmqqRYBBM7xVLQhqF7nksIbm2yHABptoioS9RAbVMWVA==
+
+"@esbuild/linux-s390x@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.17.15.tgz#20bf7947197f199ddac2ec412029a414ceae3aa3"
+  integrity sha512-BuS6Jx/ezxFuHxgsfvz7T4g4YlVrmCmg7UAwboeyNNg0OzNzKsIZXpr3Sb/ZREDXWgt48RO4UQRDBxJN3B9Rbg==
+
+"@esbuild/linux-x64@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.17.15.tgz#31b93f9c94c195e852c20cd3d1914a68aa619124"
+  integrity sha512-JsdS0EgEViwuKsw5tiJQo9UdQdUJYuB+Mf6HxtJSPN35vez1hlrNb1KajvKWF5Sa35j17+rW1ECEO9iNrIXbNg==
+
+"@esbuild/netbsd-x64@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.17.15.tgz#8da299b3ac6875836ca8cdc1925826498069ac65"
+  integrity sha512-R6fKjtUysYGym6uXf6qyNephVUQAGtf3n2RCsOST/neIwPqRWcnc3ogcielOd6pT+J0RDR1RGcy0ZY7d3uHVLA==
+
+"@esbuild/openbsd-x64@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.17.15.tgz#04a1ec3d4e919714dba68dcf09eeb1228ad0d20c"
+  integrity sha512-mVD4PGc26b8PI60QaPUltYKeSX0wxuy0AltC+WCTFwvKCq2+OgLP4+fFd+hZXzO2xW1HPKcytZBdjqL6FQFa7w==
+
+"@esbuild/sunos-x64@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.17.15.tgz#6694ebe4e16e5cd7dab6505ff7c28f9c1c695ce5"
+  integrity sha512-U6tYPovOkw3459t2CBwGcFYfFRjivcJJc1WC8Q3funIwX8x4fP+R6xL/QuTPNGOblbq/EUDxj9GU+dWKX0oWlQ==
+
+"@esbuild/win32-arm64@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.17.15.tgz#1f95b2564193c8d1fee8f8129a0609728171d500"
+  integrity sha512-W+Z5F++wgKAleDABemiyXVnzXgvRFs+GVKThSI+mGgleLWluv0D7Diz4oQpgdpNzh4i2nNDzQtWbjJiqutRp6Q==
+
+"@esbuild/win32-ia32@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.17.15.tgz#c362b88b3df21916ed7bcf75c6d09c6bf3ae354a"
+  integrity sha512-Muz/+uGgheShKGqSVS1KsHtCyEzcdOn/W/Xbh6H91Etm+wiIfwZaBn1W58MeGtfI8WA961YMHFYTthBdQs4t+w==
+
 "@esbuild/win32-x64@0.17.15":
   version "0.17.15"
   resolved "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.15.tgz"
@@ -922,16 +1027,7 @@
     "@jridgewell/set-array" "^1.0.0"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
-"@jridgewell/gen-mapping@^0.3.0":
-  version "0.3.2"
-  resolved "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz"
-  integrity sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==
-  dependencies:
-    "@jridgewell/set-array" "^1.0.1"
-    "@jridgewell/sourcemap-codec" "^1.4.10"
-    "@jridgewell/trace-mapping" "^0.3.9"
-
-"@jridgewell/gen-mapping@^0.3.2":
+"@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.2":
   version "0.3.2"
   resolved "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz"
   integrity sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==
@@ -958,7 +1054,7 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.13", "@jridgewell/sourcemap-codec@1.4.14":
+"@jridgewell/sourcemap-codec@1.4.14", "@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.13":
   version "1.4.14"
   resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz"
   integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
@@ -979,7 +1075,7 @@
     "@nodelib/fs.stat" "2.0.5"
     run-parallel "^1.1.9"
 
-"@nodelib/fs.stat@^2.0.2", "@nodelib/fs.stat@2.0.5":
+"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
   version "2.0.5"
   resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
@@ -1056,17 +1152,17 @@
     magic-string "^0.25.0"
     string.prototype.matchall "^4.0.6"
 
-"@types/estree@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz"
-  integrity sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==
-
 "@types/estree@0.0.39":
   version "0.0.39"
   resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz"
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
-"@types/node@*", "@types/node@>= 14":
+"@types/estree@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz"
+  integrity sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==
+
+"@types/node@*":
   version "18.11.9"
   resolved "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz"
   integrity sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==
@@ -1152,14 +1248,6 @@
     estree-walker "^2.0.2"
     source-map "^0.6.1"
 
-"@vue/compiler-dom@^3.2.47", "@vue/compiler-dom@3.2.47":
-  version "3.2.47"
-  resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz"
-  integrity sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==
-  dependencies:
-    "@vue/compiler-core" "3.2.47"
-    "@vue/shared" "3.2.47"
-
 "@vue/compiler-dom@3.2.37":
   version "3.2.37"
   resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.37.tgz"
@@ -1168,21 +1256,13 @@
     "@vue/compiler-core" "3.2.37"
     "@vue/shared" "3.2.37"
 
-"@vue/compiler-sfc@^3.2.47":
+"@vue/compiler-dom@3.2.47", "@vue/compiler-dom@^3.2.47":
   version "3.2.47"
-  resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.47.tgz"
-  integrity sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==
+  resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz"
+  integrity sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==
   dependencies:
-    "@babel/parser" "^7.16.4"
     "@vue/compiler-core" "3.2.47"
-    "@vue/compiler-dom" "3.2.47"
-    "@vue/compiler-ssr" "3.2.47"
-    "@vue/reactivity-transform" "3.2.47"
     "@vue/shared" "3.2.47"
-    estree-walker "^2.0.2"
-    magic-string "^0.25.7"
-    postcss "^8.1.10"
-    source-map "^0.6.1"
 
 "@vue/compiler-sfc@3.2.37":
   version "3.2.37"
@@ -1200,6 +1280,22 @@
     postcss "^8.1.10"
     source-map "^0.6.1"
 
+"@vue/compiler-sfc@^3.2.47":
+  version "3.2.47"
+  resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.47.tgz"
+  integrity sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==
+  dependencies:
+    "@babel/parser" "^7.16.4"
+    "@vue/compiler-core" "3.2.47"
+    "@vue/compiler-dom" "3.2.47"
+    "@vue/compiler-ssr" "3.2.47"
+    "@vue/reactivity-transform" "3.2.47"
+    "@vue/shared" "3.2.47"
+    estree-walker "^2.0.2"
+    magic-string "^0.25.7"
+    postcss "^8.1.10"
+    source-map "^0.6.1"
+
 "@vue/compiler-ssr@3.2.37":
   version "3.2.37"
   resolved "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.37.tgz"
@@ -1243,13 +1339,6 @@
     estree-walker "^2.0.2"
     magic-string "^0.25.7"
 
-"@vue/reactivity@^3.2.47":
-  version "3.2.47"
-  resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.47.tgz"
-  integrity sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==
-  dependencies:
-    "@vue/shared" "3.2.47"
-
 "@vue/reactivity@3.2.37":
   version "3.2.37"
   resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.37.tgz"
@@ -1257,6 +1346,13 @@
   dependencies:
     "@vue/shared" "3.2.37"
 
+"@vue/reactivity@^3.2.47":
+  version "3.2.47"
+  resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.47.tgz"
+  integrity sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==
+  dependencies:
+    "@vue/shared" "3.2.47"
+
 "@vue/runtime-core@3.2.37":
   version "3.2.37"
   resolved "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.37.tgz"
@@ -1282,22 +1378,22 @@
     "@vue/compiler-ssr" "3.2.37"
     "@vue/shared" "3.2.37"
 
-"@vue/shared@^3.2.47", "@vue/shared@3.2.47":
-  version "3.2.47"
-  resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz"
-  integrity sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==
-
 "@vue/shared@3.2.37":
   version "3.2.37"
   resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz"
   integrity sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw==
 
+"@vue/shared@3.2.47", "@vue/shared@^3.2.47":
+  version "3.2.47"
+  resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz"
+  integrity sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==
+
 acorn@^8.5.0:
   version "8.8.1"
   resolved "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz"
   integrity sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==
 
-ajv@^8.6.0, ajv@>=8:
+ajv@^8.6.0:
   version "8.11.0"
   resolved "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz"
   integrity sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==
@@ -1395,7 +1491,7 @@ braces@^3.0.2, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
-browserslist@^4.21.3, browserslist@^4.21.4, "browserslist@>= 4.21.0":
+browserslist@^4.21.3, browserslist@^4.21.4:
   version "4.21.4"
   resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz"
   integrity sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==
@@ -1474,16 +1570,16 @@ color-convert@^2.0.1:
   dependencies:
     color-name "~1.1.4"
 
-color-name@~1.1.4:
-  version "1.1.4"
-  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
-  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
-
 color-name@1.1.3:
   version "1.1.3"
   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz"
   integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
 
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
 commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz"
@@ -1707,6 +1803,11 @@ fs.realpath@^1.0.0:
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
+fsevents@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
 function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
@@ -2102,14 +2203,7 @@ micromatch@^4.0.4:
     braces "^3.0.2"
     picomatch "^2.3.1"
 
-minimatch@^3.0.4:
-  version "3.1.2"
-  resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz"
-  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
-  dependencies:
-    brace-expansion "^1.1.7"
-
-minimatch@^3.1.1:
+minimatch@^3.0.4, minimatch@^3.1.1:
   version "3.1.2"
   resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz"
   integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
@@ -2339,21 +2433,14 @@ rollup-plugin-terser@^7.0.0:
     serialize-javascript "^4.0.0"
     terser "^5.0.0"
 
-"rollup@^1.20.0 || ^2.0.0", rollup@^1.20.0||^2.0.0, rollup@^1.20.0||^2.0.0||^3.0.0, rollup@^2.0.0, rollup@^2.43.1:
+rollup@^2.43.1:
   version "2.79.1"
   resolved "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz"
   integrity sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==
   optionalDependencies:
     fsevents "~2.3.2"
 
-rollup@^3.18.0:
-  version "3.20.2"
-  resolved "https://registry.npmjs.org/rollup/-/rollup-3.20.2.tgz"
-  integrity sha512-3zwkBQl7Ai7MFYQE0y1MeQ15+9jsi7XxfrqwTb/9EK8D9C9+//EBR4M+CuA1KODRaNbFez/lWxA5vhEGZp4MUg==
-  optionalDependencies:
-    fsevents "~2.3.2"
-
-rollup@^3.7.2:
+rollup@^3.18.0, rollup@^3.7.2:
   version "3.20.2"
   resolved "https://registry.npmjs.org/rollup/-/rollup-3.20.2.tgz"
   integrity sha512-3zwkBQl7Ai7MFYQE0y1MeQ15+9jsi7XxfrqwTb/9EK8D9C9+//EBR4M+CuA1KODRaNbFez/lWxA5vhEGZp4MUg==
@@ -2381,7 +2468,7 @@ safe-regex-test@^1.0.0:
     get-intrinsic "^1.1.3"
     is-regex "^1.1.4"
 
-sass@*, sass@^1.59.3:
+sass@^1.59.3:
   version "1.61.0"
   resolved "https://registry.npmjs.org/sass/-/sass-1.61.0.tgz"
   integrity sha512-PDsN7BrVkNZK2+dj/dpKQAWZavbAQ87IXqVvw2+oEYI+GwlTWkvbQtL7F2cCNbMqJEYKPh1EcjSxsnqIb/kyaQ==
@@ -2411,7 +2498,7 @@ side-channel@^1.0.4:
     get-intrinsic "^1.0.2"
     object-inspect "^1.9.0"
 
-source-map-js@^1.0.2, "source-map-js@>=0.6.2 <2.0.0":
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
@@ -2494,14 +2581,7 @@ supports-color@^5.3.0:
   dependencies:
     has-flag "^3.0.0"
 
-supports-color@^7.0.0:
-  version "7.2.0"
-  resolved "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz"
-  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
-  dependencies:
-    has-flag "^4.0.0"
-
-supports-color@^7.1.0:
+supports-color@^7.0.0, supports-color@^7.1.0:
   version "7.2.0"
   resolved "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz"
   integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
@@ -2528,7 +2608,7 @@ tempy@^0.6.0:
     type-fest "^0.16.0"
     unique-string "^2.0.0"
 
-terser@^5.0.0, terser@^5.4.0:
+terser@^5.0.0:
   version "5.15.1"
   resolved "https://registry.npmjs.org/terser/-/terser-5.15.1.tgz"
   integrity sha512-K1faMUvpm/FBxjBXud0LWVAGxmvoPbZbfTCYbSgaaYQaIXI3/TdI7a7ZGA73Zrou6Q8Zmz3oeUTsp/dj+ag2Xw==
@@ -2562,7 +2642,7 @@ type-fest@^0.16.0:
   resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.16.0.tgz"
   integrity sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==
 
-typescript@*, typescript@^5.0.2, typescript@>=4.4.4:
+typescript@^5.0.2:
   version "5.0.3"
   resolved "https://registry.npmjs.org/typescript/-/typescript-5.0.3.tgz"
   integrity sha512-xv8mOEDnigb/tN9PSMTwSEqAnUvkoXMQlicOb0IUVDBSQCgBSaAAROUZYy2IcUy5qU6XajK5jjjO7TMWqBTKZA==
@@ -2645,7 +2725,7 @@ vite-plugin-pwa@^0.14.6:
     workbox-build "^6.5.4"
     workbox-window "^6.5.4"
 
-"vite@^3.1.0 || ^4.0.0", vite@^4.0.0, vite@^4.2.1:
+vite@^4.2.1:
   version "4.2.1"
   resolved "https://registry.npmjs.org/vite/-/vite-4.2.1.tgz"
   integrity sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==
@@ -2678,7 +2758,7 @@ vue-tsc@^1.2.0:
     "@volar/vue-language-core" "1.2.0"
     "@volar/vue-typescript" "1.2.0"
 
-"vue@^2.6.14 || ^3.2.0", "vue@^3.0.0-0 || ^2.6.0", vue@^3.2.25, vue@^3.2.37, vue@3.2.37:
+vue@^3.2.37:
   version "3.2.37"
   resolved "https://registry.npmjs.org/vue/-/vue-3.2.37.tgz"
   integrity sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ==
@@ -2864,7 +2944,7 @@ workbox-sw@6.5.4:
   resolved "https://registry.npmjs.org/workbox-sw/-/workbox-sw-6.5.4.tgz"
   integrity sha512-vo2RQo7DILVRoH5LjGqw3nphavEjK4Qk+FenXeUsknKn14eCNedHOXWbmnvP4ipKhlE35pvJ4yl4YYf6YsJArA==
 
-workbox-window@^6.5.4, workbox-window@6.5.4:
+workbox-window@6.5.4, workbox-window@^6.5.4:
   version "6.5.4"
   resolved "https://registry.npmjs.org/workbox-window/-/workbox-window-6.5.4.tgz"
   integrity sha512-HnLZJDwYBE+hpG25AQBO8RUWBJRaCsI9ksQJEp3aCOFCaG5kqaToAYXFRAHxzRluM2cQbGzdQF5rjKPWPA1fug==