Merge do wersji 1.5.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pojazdownik",
-  "version": "1.4.3",
+  "version": "1.5.0",
   "private": true,
   "scripts": {
     "dev": "vite",

src/App.vue

@@ -1,111 +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" v-if="store.stockData">
-        Strona jest kompletna dla wersji {{ store.stockData.version }} symulatora TD2
-      </div>
-      &copy;
-      <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
-      {{ new Date().getUTCFullYear() }} | v{{ VERSION }}{{ !isOnProductionHost ? 'dev' : '' }}
-    </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(),
-    isOnProductionHost: location.hostname == 'pojazdownik-td2.web.app',
-  }),
-
   async created() {
     /* dev info testing */
     // if (import.meta.env['VITE_STOCK_DEV'] == '1') {
     //   const data = await import('../stockInfoDev.json');
     //   this.store.stockData = data.default as any;
     // }
-    const stockData = await (await fetch(`https://spythere.github.io/api/td2/data/stockInfo.json`)).json();
-    this.store.stockData = stockData;
-
-    // routing
-    switch (window.location.pathname) {
-      case '/numgnr':
-        this.store.stockSectionMode = 'number-generator';
-        break;
-      case '/stockgnr':
-        this.store.stockSectionMode = 'stock-generator';
-        break;
-      default:
-        break;
-    }
+    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 {
@@ -134,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/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/StockGeneratorTab.vue

@@ -265,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;
@@ -315,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/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,
       };
     },
 
@@ -67,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

@@ -134,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;
@@ -156,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;
 }
 
@@ -42,7 +43,7 @@ export interface IStockProps {
 
 export interface IStockData {
   version: string;
-  
+
   generator: {
     passenger: any;
     cargo: {
@@ -99,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>