Poprawki widoków modali/kart

public/images/icon-RE.svg

@@ -0,0 +1,4 @@
+<svg width="573" height="345" viewBox="0 0 573 345" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M459.284 100.593C481.1 100.593 499.759 104.755 515.26 113.08C531.049 121.405 543.249 133.461 551.86 149.249C560.472 165.038 564.778 184.414 564.778 207.379V238.381H413.211C413.785 256.466 419.096 270.675 429.143 281.009C439.477 291.344 453.686 296.511 471.771 296.511C486.985 296.511 500.764 295.075 513.107 292.205C525.451 289.047 538.225 284.311 551.43 277.995V327.513C539.947 333.254 527.747 337.416 514.83 340C502.199 342.871 486.842 344.306 468.757 344.306C445.218 344.306 424.406 340 406.322 331.388C388.237 322.489 374.027 309.141 363.693 291.344C353.359 273.546 348.192 251.155 348.192 224.172C348.192 196.614 352.785 173.793 361.971 155.708C371.444 137.336 384.505 123.558 401.155 114.372C417.804 105.186 437.18 100.593 459.284 100.593ZM459.715 146.235C447.371 146.235 437.037 150.254 428.712 158.292C420.675 166.329 415.938 178.816 414.503 195.753H504.496C504.496 186.28 502.773 177.812 499.329 170.348C496.171 162.885 491.291 157 484.689 152.694C478.086 148.388 469.762 146.235 459.715 146.235Z" fill="#EC1D25"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 340H106.328V220.784C140.159 215.951 207.822 219.657 207.822 273.143V340H323.816V273.143C321.399 248.172 306.739 196.297 267.43 188.564C296.428 162.143 307.437 142.113 309.316 135.4C320.862 92.9765 319.466 7.00155 221.516 2.49068C123.565 -2.02018 33.026 0.611155 0 2.49068V340ZM106.328 74.9867V146.677H191.712C220.71 146.677 222.321 74.9867 191.712 74.9867H106.328Z" fill="#00954F"/>
+</svg>

public/images/icon-iR.svg

@@ -0,0 +1,5 @@
+<svg width="441" height="341" viewBox="0 0 441 341" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 339.926V119.216H63.8299V339.926H1Z" fill="#032B64" stroke="black" stroke-width="1.61102"/>
+<rect x="1" y="27.3874" width="62.8299" height="62.8299" fill="#032B64"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M116.994 340H223.321V220.784C257.153 215.951 324.816 219.657 324.816 273.143V340H440.809V273.143C438.393 248.172 423.732 196.297 384.423 188.564C413.422 162.143 424.431 142.113 426.31 135.4C437.856 92.9765 436.46 7.00155 338.509 2.49068C240.559 -2.02018 150.02 0.611155 116.994 2.49068V340ZM223.321 74.9867V146.677H308.705C337.704 146.677 339.315 74.9867 308.705 74.9867H223.321Z" fill="#00954F"/>
+</svg>

src/App.vue

@@ -7,14 +7,21 @@
   <div class="g-card-dimmer" v-if="store.isRealStockListCardOpen" @click="store.isRealStockListCardOpen = false"></div>
 
   <keep-alive>
-    <RandomizerCard v-if="store.isRandomizerCardOpen" />
+    <transition name="card-appear">
+      <RandomizerCard />
+    </transition>
+  </keep-alive>
+
+  <keep-alive>
+    <transition name="card-appear">
+      <RealStockCard />
+    </transition>
   </keep-alive>
 
   <div class="app_container">
-    <header>
-      <img :src="logoImage" alt="logo pojazdownik" />
-    </header>
     <main>
+      <LogoSection />
+
       <InputsSection />
 
       <TrainImageSection />
@@ -47,10 +54,11 @@ import { defineComponent } from 'vue';
 import InputsSection from './components/InputsSection.vue';
 import ListSection from './components/ListSection.vue';
 
-import logoImage from './assets/logo.svg';
 import { useStore } from './store';
 import TrainImageSection from './components/TrainImageSection.vue';
-import RandomizerCard from './components/RandomizerCard.vue';
+import LogoSection from './components/LogoSection.vue';
+import RandomizerCard from './components/cards/RandomizerCard.vue';
+import RealStockCard from './components/cards/RealStockCard.vue';
 
 export default defineComponent({
   components: {
@@ -58,12 +66,14 @@ export default defineComponent({
     InputsSection,
     TrainImageSection,
     RandomizerCard,
+    LogoSection,
+    RealStockCard,
+    RandomizerCard,
+    RealStockCard,
   },
 
   data: () => ({
     VERSION: packageInfo.version,
-
-    logoImage,
   }),
 
   setup() {
@@ -147,7 +157,6 @@ h2 {
 /* MAIN SECTION */
 
 main {
-  margin-top: 2em;
   display: grid;
   gap: 1em 3em;
 
@@ -156,7 +165,7 @@ main {
   min-height: 75vh;
 
   grid-template-columns: 1fr 2fr;
-  grid-template-rows: 330px minmax(400px, 1fr);
+  grid-template-rows: auto 360px minmax(400px, 1fr);
 
   padding: 0.5em;
 }

src/components/InputsSection.vue

@@ -98,8 +98,7 @@
           </b>
         </button>
 
-        <button class="btn" @click="setReadyStockList(true)"><b>REALNE ZESTAWIENIA</b></button>
+        <button class="btn" @click="store.isRealStockListCardOpen = true"><b>REALNE ZESTAWIENIA</b></button>
-        <ready-stock-list />
       </div>
     </div>
   </section>
@@ -108,7 +107,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
-import ReadyStockList from './ReadyStockList.vue';
 import { IStock } from '../types';
 import imageMixin from '../mixins/imageMixin';
 import { useStore } from '../store';
@@ -121,10 +119,6 @@ interface ILocoType {
 }
 
 export default defineComponent({
-  components: {
-    ReadyStockList,
-  },
-
   mixins: [imageMixin],
 
   data: () => ({
@@ -205,10 +199,6 @@ export default defineComponent({
       this.store.swapVehicles = true;
     },
 
-    setReadyStockList(bool = false) {
-      this.store.isRealStockListCardOpen = bool;
-    },
-
     onVehicleSelect(type: 'loco' | 'car') {
       this.$nextTick(() => {
         if (!this.store.chosenLoco && !this.store.chosenCar) return;
@@ -310,7 +300,7 @@ export default defineComponent({
   display: flex;
   justify-content: space-between;
 
-  grid-row: 1;
+  grid-row: 2;
   grid-column: 1;
 }
 

src/components/ListSection.vue

@@ -19,7 +19,7 @@
           :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
           @click="subStock(store.chosenStockListIndex)"
         >
-          <img :src="icons.sub" alt="subtract vehicle count" />
+          <img :src="getIconURL('sub')" alt="subtract vehicle count" />
           1
         </button>
 
@@ -39,7 +39,7 @@
           :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
           @click="addStock(store.chosenStockListIndex)"
         >
-          <img :src="icons.add" alt="add vehicle count" />
+          <img :src="getIconURL('add')" alt="add vehicle count" />
           1
         </button>
       </div>
@@ -49,7 +49,7 @@
         :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
         @click="moveUpStock(store.chosenStockListIndex)"
       >
-        <img :src="icons.higher" alt="move up vehicle" />
+        <img :src="getIconURL('higher')" alt="move up vehicle" />
         Przenieś wyżej
       </button>
 
@@ -58,7 +58,7 @@
         :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
         @click="moveDownStock(store.chosenStockListIndex)"
       >
-        <img :src="icons.lower" alt="move down vehicle" />
+        <img :src="getIconURL('lower')" alt="move down vehicle" />
         Przenieś niżej
       </button>
 
@@ -67,7 +67,7 @@
         :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
         @click="removeStock(store.chosenStockListIndex)"
       >
-        <img :src="icons.remove" alt="remove vehicle" />
+        <img :src="getIconURL('remove')" alt="remove vehicle" />
         Usuń
       </button>
     </div>
@@ -81,7 +81,7 @@
     <div class="stock_specs">
       <b class="real-stock-info" v-if="store.chosenRealStock">
         <span class="text--accent">
-          <img :src="icons[store.chosenRealStock.type]" :alt="store.chosenRealStock.type" />
+          <img :src="getIconURL(store.chosenRealStock.type)" :alt="store.chosenRealStock.type" />
           {{ store.chosenRealStock.number }} {{ store.chosenRealStock.name }}</span
         >
       </b>
@@ -168,25 +168,16 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import RandomizerCard from './RandomizerCard.vue';
 import TrainImage from './TrainImageSection.vue';
 
-import addIcon from '../assets/add-icon.svg';
-import subIcon from '../assets/sub-icon.svg';
-import removeIcon from '../assets/remove-icon.svg';
-import lowerIcon from '../assets/lower-icon.svg';
-import higherIcon from '../assets/higher-icon.svg';
-import TLKIcon from '../assets/TLK.png';
-import EICIcon from '../assets/EIC.png';
-import ICIcon from '../assets/IC.svg';
-
 import { useStore } from '../store';
 import warningsMixin from '../mixins/warningsMixin';
+import imageMixin from '../mixins/imageMixin';
 
 export default defineComponent({
-  components: { RandomizerCard, TrainImage },
+  components: { TrainImage },
 
-  mixins: [warningsMixin],
+  mixins: [warningsMixin, imageMixin],
 
   setup() {
     const store = useStore();
@@ -197,17 +188,6 @@ export default defineComponent({
   },
 
   data: () => ({
-    icons: {
-      add: addIcon,
-      sub: subIcon,
-      remove: removeIcon,
-      lower: lowerIcon,
-      higher: higherIcon,
-      TLK: TLKIcon,
-      EIC: EICIcon,
-      IC: ICIcon,
-    } as { [key: string]: string },
-
     imageOffsetY: 0,
 
     draggedVehicleID: -1,
@@ -437,7 +417,7 @@ export default defineComponent({
 }
 
 .stock-list-section {
-  grid-row: 1 / 3;
+  grid-row: 1 / 4;
   grid-column: 2;
 }
 

src/components/LogoSection.vue

@@ -0,0 +1,30 @@
+<template>
+  <section class="logo-section">
+    <img src="/images/logo.svg" alt="logo pojazdownik" />
+  </section>
+</template>
+
+<script lang="ts">
+export default {
+  setup() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.logo-section {
+  grid-row: 1;
+  grid-column: 1;
+  margin-bottom: 1.5em;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+img {
+  width: 25em;
+}
+</style>
+

src/components/TrainImageSection.vue

@@ -112,7 +112,7 @@ export default defineComponent({
 @import '../styles/global.scss';
 
 .train-image-section {
-  grid-row: 2;
+  grid-row: 3;
   grid-column: 1;
 
   margin-top: 2em;

src/components/cards/RandomizerCard.vue

@@ -1,11 +1,14 @@
 <template>
-  <div class="card">
+  <div class="randomizer-card g-card" v-if="store.isRandomizerCardOpen">
+    <div class="g-card_bg" @click="store.isRandomizerCardOpen = false"></div>
+
+    <div class="card_content">
       <transition name="slide-top">
         <div class="warning-message" v-if="warningMessage">{{ warningMessage }}</div>
       </transition>
 
       <div class="card_wrapper" ref="cardWrapper" tabindex="0">
-      <h1><img :src="getIcon('randomize-icon')" alt="ikona losowania" /> LOSUJ SKŁAD</h1>
+        <h1><img :src="getIconURL('randomize')" alt="ikona losowania" /> LOSUJ SKŁAD</h1>
 
         <div class="random-stock-selections">
           <div class="first-row">
@@ -58,7 +61,9 @@
                 <span>
                   {{ previewVehicle.type }}
                   {{
-                  isLocomotive(previewVehicle) ? '' : `(${previewIndex + 1} z ${focusedCarWagon?.availableCars.length})`
+                    isLocomotive(previewVehicle)
+                      ? ''
+                      : `(${previewIndex + 1} z ${focusedCarWagon?.availableCars.length})`
                   }}
                 </span>
 
@@ -86,12 +91,12 @@
                   towarowego (zakładając, że je posiada)
                 </li>
                 <li>
-                <b class="text--accent">Szansa</b> (waga) określa prawdopodobieństwo wylosowania danego typu wagonu. Im
+                  <b class="text--accent">Szansa</b> (waga) określa prawdopodobieństwo wylosowania danego typu wagonu.
-                większa liczba względem reszty wag, tym bardziej prawdopodobne, że zostanie on wybrany
+                  Im większa liczba względem reszty wag, tym bardziej prawdopodobne, że zostanie on wybrany
                 </li>
                 <li>
-                <b class="text--accent">Warianty</b> pokazują liczbę możliwych wagonów w puli w ramach losowania danego
+                  <b class="text--accent">Warianty</b> pokazują liczbę możliwych wagonów w puli w ramach losowania
-                typu
+                  danego typu
                 </li>
               </ul>
             </div>
@@ -145,7 +150,7 @@
                   <div class="variant-count">{{ stockWagon.availableCars.length }}</div>
                   <div class="carwagon-remove">
                     <button @click="removeFromRandomStockList(i)">
-                    <img :src="getIcon('remove-icon')" alt="remove" />
+                      <img :src="getIconURL('remove')" alt="remove" />
                     </button>
                   </div>
                 </li>
@@ -166,16 +171,18 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 
-import { ICargo, ICarWagon, ILocomotive, IStock, IVehicleData, Vehicle } from '../types';
+import { ICargo, ICarWagon, ILocomotive, Vehicle } from '../../types';
 
-import { useStore } from '../store';
+import { useStore } from '../../store';
-import stockMixin from '../mixins/stockMixin';
+import stockMixin from '../../mixins/stockMixin';
-import { isLocomotive } from '../utils/vehicleUtils';
+import imageMixin from '../../mixins/imageMixin';
+import { isLocomotive } from '../../utils/vehicleUtils';
 
 interface RandomStockCarWagon {
   stockString: string;
@@ -195,7 +202,7 @@ export default defineComponent({
     };
   },
 
-  mixins: [stockMixin, stockMixin],
+  mixins: [stockMixin, imageMixin],
 
   activated() {
     (this.$refs['cardWrapper'] as any).focus();
@@ -399,16 +406,12 @@ export default defineComponent({
 
       return { carWagon: randCarWagon!, cargo: randCargo };
     },
-
-    getIcon(name: string) {
-      return new URL(`../assets/${name}.svg`, import.meta.url).href;
-    },
   },
 });
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/global.scss';
+@import '../../styles/global.scss';
 
 h1 {
   display: flex;
@@ -429,15 +432,10 @@ h3 {
   margin: 0 0 0.5em 0;
 }
 
-.card {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
 
-  z-index: 100;
+
+.card_content {
   overflow-y: hidden;
-
   border: 2px solid white;
 
   width: 95vw;
@@ -446,10 +444,12 @@ h3 {
   height: 90vh;
   max-height: 900px;
 
-  background: #111;
+  background-color: #111;
 
   border-radius: 1em;
 
+  z-index: 99;
+
   .card_wrapper {
     display: flex;
     flex-direction: column;
@@ -474,8 +474,6 @@ h3 {
   text-align: center;
   padding: 0.25em;
 
-  border-radius: 1em 1em 0 0;
-
   background-color: #b2222288;
 }
 

src/components/cards/RealStockCard.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="ready-stock-list" v-if="store.isRealStockListCardOpen">
+  <div class="real-stock-card g-card" v-if="store.isRealStockListCardOpen">
+    <div class="g-card_bg" @click="store.isRealStockListCardOpen = false"></div>
+
+    <div class="card_content">
       <div class="top-sticky">
         <button class="btn btn--text exit" @click="store.isRealStockListCardOpen = false">&lt; POWRÓT</button>
 
@@ -26,31 +29,31 @@
           @click="choseStock(stock.name, stock.type, stock.number, stock.stockString)"
           @keydown.enter="choseStock(stock.name, stock.type, stock.number, stock.stockString)"
         >
-        <img v-if="stock.type != 'iR' && stock.type != 'RE'" :src="icons[stock.type]" alt="" />
+          <img :src="getIconURL(stock.type)" :alt="stock.type" />
-        <span v-else>{{ stock.type }}</span>
 
           <b class="text--accent"> {{ stock.name }}</b>
           <div>{{ stock.number }}</div>
         </li>
       </ul>
     </div>
+  </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { Vehicle, IStock, IReadyStockList } from '../types';
+import { Vehicle, IStock, IReadyStockList } from '../../types';
 
-import iconEIC from '../assets/EIC.png';
+import { useStore } from '../../store';
-import iconIC from '../assets/IC.svg';
+import { isLocomotive } from '../../utils/vehicleUtils';
-import iconTLK from '../assets/TLK.png';
+import imageMixin from '../../mixins/imageMixin';
-import { useStore } from '../store';
-import { isLocomotive } from '../utils/vehicleUtils';
 
 interface ResponseJSONData {
   [key: string]: string;
 }
 
 export default defineComponent({
+  mixins: [imageMixin],
+
   setup() {
     return {
       store: useStore(),
@@ -62,12 +65,6 @@ export default defineComponent({
     isMobile: 'ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/) ? true : false,
 
     searchedReadyStockName: '',
-
-    icons: {
-      EIC: iconEIC,
-      IC: iconIC,
-      TLK: iconTLK,
-    } as { [key: string]: string },
   }),
 
   computed: {
@@ -177,8 +174,9 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@import '../../styles/global.scss';
+
 .exit {
-  padding: 1em 0;
   font-size: 1.2em;
 }
 
@@ -191,16 +189,8 @@ input {
   }
 }
 
-.ready-stock-list {
+.card_content {
-  position: fixed;
+  background-color: #1c1c1c;
-  z-index: 101;
-
-  top: 50%;
-  left: 50%;
-
-  transform: translate(-50%, -50%);
-
-  background: #333;
   border-radius: 1em;
 
   height: 85vh;
@@ -210,11 +200,12 @@ input {
   padding: 0 1em;
 
   overflow-y: auto;
+  z-index: 100;
 
   .top-sticky {
     position: sticky;
     top: 0;
-    background: #333;
+    background: #1c1c1c;
   }
 
   .header {
@@ -262,10 +253,10 @@ input {
 
     cursor: pointer;
 
-    background: #444;
+    background: #2b2b2b;
 
     img {
-      max-width: 1.5em;
+      height: 0.85em;
     }
 
     span {

src/mixins/imageMixin.ts

@@ -2,8 +2,8 @@ import { defineComponent } from 'vue';
 
 export default defineComponent({
   methods: {
-    getIcon(name: string) {
+    getIconURL(name: string, ext = 'svg'): string {
-      return new URL(`./assets/${name}.svg`, import.meta.url).href;
+      return `/images/icon-${name}.${ext}`;
     },
   },
 });

src/styles/global.scss

@@ -167,17 +167,31 @@ ul {
   }
 }
 
-.g-card-dimmer {
+.g-card {
   position: fixed;
   top: 0;
   left: 0;
+
   width: 100vw;
   height: 100vh;
 
-  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  z-index: 200;
+
+  &_bg {
+    position: fixed;
+    top: 0;
+    left: 0;
+
+    width: 100vw;
+    height: 100vh;
 
     background-color: #000000aa;
-  z-index: 99;
+    z-index: 10;
+  }
 }
 
 .g-choice {
@@ -218,3 +232,15 @@ ul {
     transition: transform 100ms ease-in-out;
   }
 }
+
+.card-appear {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: all 100ms ease-in-out;
+  }
+}