Poprawki layoutu i responsywności

src/App.vue

@@ -152,13 +152,14 @@ main {
   display: grid;
   gap: 1em 3em;
 
-  width: 100%;
+  width: 100vw;
-  max-width: 1200px;
+  max-width: 1300px;
 
   grid-template-columns: 1fr 2fr;
-
   grid-template-areas: 'inputs list' 'image list';
 
+  padding: 0.5em;
+
   #inputs-area {
     grid-area: inputs;
   }
@@ -181,15 +182,19 @@ footer {
 
 /* MOBILE VIEWS */
 
+@media screen and (max-width: 1100px) {
+  main {
+    grid-template-columns: 1fr;
+    grid-template-areas: 'inputs' 'image' 'list';
+    justify-items: center;
+  }
+}
+
 @media screen and (max-width: 800px) {
   #app {
     font-size: calc(0.75vw + 0.6rem);
   }
 
-  main {
-    margin-top: 3.5em;
-  }
-
   header {
     font-size: 0.85em;
 

src/components/InputsSection.vue

@@ -17,7 +17,7 @@
             </option>
           </select>
 
-          <button class="btn" @click="addVehicle" title="Dodaj pojazd">DODAJ</button>
+          <button class="btn" @click="addVehicle">DODAJ</button>
         </div>
 
         <div class="input_list type">
@@ -33,17 +33,34 @@
               {{ car.type }}
             </option>
           </select>
+
+          <button
+            class="btn"
+            @click="switchVehicles"
+            :disabled="store.chosenStockListIndex == -1"
+            :data-disabled="store.chosenStockListIndex == -1"
+          >
+            ZAMIEŃ
+          </button>
         </div>
 
-        <div class="input_list type">
+        <div class="input_list cargo">
           <select
-            id="cargo-list"
+            id="cargo-select"
-            v-model="store.cargoOptions"
+            :disabled="
+              (store.chosenCar && !store.chosenCar.loadable) ||
+              (store.chosenCar && store.chosenCar.useType == 'car-passenger') ||
+              !store.chosenCar
+            "
+            data-select="cargo"
+            data-ignore-outside="1"
+            v-model="store.chosenCargo"
           >
-            <option :value="null" disabled>Wybierz wagon</option>
+            <option :value="null" v-if="!store.chosenCar || !store.chosenCar.loadable">brak dostępnych ładunków</option>
+            <option :value="null" v-else>próżny</option>
 
-            <option v-for="cargo in store.cargoOptions" >
+            <option v-for="cargo in store.chosenCar?.cargoList" :value="cargo" :key="cargo.id">
-              {{ cargo }}
+              {{ cargo.id }}
             </option>
           </select>
         </div>
@@ -107,13 +124,11 @@ export default defineComponent({
 
   computed: {
     locoOptions() {
-      return this.store.locoDataList
+      return this.store.locoDataList.sort((a, b) => (a.type > b.type ? 1 : -1));
-        .sort((a, b) => (a.type > b.type ? 1 : -1))
-        .sort((a) => (a.supportersOnly ? 1 : -1));
     },
 
     carOptions() {
-      return this.store.carDataList.sort((a, b) => (a.type > b.type ? 1 : -1)).sort((a) => (a.supportersOnly ? 1 : -1));
+      return this.store.carDataList.sort((a, b) => (a.type > b.type ? 1 : -1));
     },
   },
 
@@ -134,7 +149,9 @@ export default defineComponent({
       });
     },
 
-    addVehicle() {
+    switchVehicles() {
+      if (this.store.chosenStockListIndex == -1) return;
+
       const vehicle = this.store.chosenVehicle;
 
       if (!vehicle) return;
@@ -153,28 +170,45 @@ export default defineComponent({
         supportersOnly: vehicle.supportersOnly,
       };
 
-      if (this.store.chosenStockListIndex != -1) {
+      let currentStock = this.store.stockList[this.store.chosenStockListIndex];
-        let currentStock = this.store.stockList[this.store.chosenStockListIndex];
 
-        if (isLocomotive(vehicle) && currentStock && currentStock.type == vehicle.type) {
+      // if (isLocomotive(vehicle) && currentStock && currentStock.type == vehicle.type) {
-          this.store.stockList[this.store.chosenStockListIndex].count++;
+      //   this.store.stockList[this.store.chosenStockListIndex].count++;
-          return;
+      //   return;
-        }
+      // }
 
-        if (
+      // if (
-          !isLocomotive(vehicle) &&
+      //   !isLocomotive(vehicle) &&
-          currentStock &&
+      //   currentStock &&
-          currentStock.type == vehicle.type &&
+      //   currentStock.type == vehicle.type &&
-          currentStock.cargo?.id == this.store.chosenCargo?.id
+      //   currentStock.cargo?.id == this.store.chosenCargo?.id
-        ) {
+      // ) {
-          this.store.stockList[this.store.chosenStockListIndex].count++;
+      //   this.store.stockList[this.store.chosenStockListIndex].count++;
 
-          return;
+      //   return;
-        }
+      // }
 
-        this.store.stockList[this.store.chosenStockListIndex] = stockObj;
+      this.store.stockList[this.store.chosenStockListIndex] = stockObj;
-        return;
+    },
-      }
+
+    addVehicle() {
+      const vehicle = this.store.chosenVehicle;
+
+      if (!vehicle) return;
+
+      const stockObj: IStock = {
+        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,
+      };
 
       const previousStock =
         this.store.stockList.length > 0 ? this.store.stockList[this.store.stockList.length - 1] : null;

src/components/ListSection.vue

@@ -53,7 +53,7 @@
         <div class="warning" v-if="warnings.tooManyLocos.value">Ten skład posiada za dużo pojazdów trakcyjnych!</div>
       </div> -->
 
-      <ul ref="list"  >
+      <ul ref="list">
         <li v-if="store.stockList.length == 0" class="list-empty">
           <div class="item-content">Lista pojazdów jest pusta!</div>
         </li>
@@ -61,22 +61,23 @@
         <li
           v-for="(stock, i) in store.stockList"
           :key="stock.type + i"
-          :class="{ loco: stock.isLoco, selected: store.chosenStockListIndex == i }"
+          :class="{ loco: stock.isLoco }"
-          :data-id="i"
           tabindex="0"
-          @focus="onListItemFocus(i)"
           ref="itemRefs"
         >
           <div
             class="item-content"
+            @click="onListItemClick(i)"
             @dragstart="onDragStart(i)"
             @drop="onDrop($event, i)"
             @dragover="allowDrop"
             draggable="true"
           >
-            <span class="stock__type" :class="{ supporter: stock.supportersOnly }">
+            <span class="stock__type">
+              <span v-if="i == store.chosenStockListIndex">&bull;</span>
               {{ stock.isLoco ? stock.type : getCarSpecFromType(stock.type) }}
             </span>
+
             <span class="stock__cargo" v-if="stock.cargo"> {{ stock.cargo.id }} </span>
             <span class="stock__length"> {{ stock.length }}m </span>
             <span class="stock__mass">{{ stock.cargo ? stock.cargo.totalMass : stock.mass }}t </span>
@@ -137,23 +138,6 @@ export default defineComponent({
     };
   },
 
-  mounted() {
-    document.addEventListener('click', (event: Event) => {
-      if (!event.target) return;
-
-      event.stopPropagation();
-
-      const targetNode = event.target as HTMLElement;
-
-      const attr = targetNode.attributes.getNamedItem('data-ignore-outside');
-
-      if (!attr && !/select|option/i.test(targetNode.tagName)) {
-        console.log(targetNode.tagName);
-        this.store.chosenStockListIndex = -1;
-      }
-    });
-  },
-
   data: () => ({
     icons: {
       add: addIcon,
@@ -197,10 +181,16 @@ export default defineComponent({
       }, 20);
     },
 
-    onListItemFocus(vehicleID: number) {
+    onListItemClick(vehicleID: number) {
       const vehicle = this.store.stockList[vehicleID];
 
-      // this.store.chosenStockListIndex = vehicleID;
+      this.store.chosenStockListIndex =
+        this.store.chosenStockListIndex == vehicleID && this.store.chosenVehicle?.type == vehicle.type ? -1 : vehicleID;
+
+      if (this.store.chosenStockListIndex == -1) {
+        this.store.chosenVehicle = null;
+        return;
+      }
 
       if (this.store.chosenVehicle?.imageSrc != vehicle.imgSrc) this.store.imageLoading = true;
 
@@ -448,7 +438,7 @@ export default defineComponent({
       color: $accentColor;
     }
 
-    &:focus .item-content {
+    &:focus-visible .item-content {
       color: $accentColor;
     }
 
@@ -470,7 +460,7 @@ export default defineComponent({
 
       transition: color 100ms;
 
-      span {
+      > span {
         padding: 0.5em;
         margin-right: 0.25em;
         margin-top: 0.25em;
@@ -511,7 +501,7 @@ export default defineComponent({
       button {
         margin: 0 0.25em;
 
-        &:focus {
+        &:focus-visible {
           outline: 1px solid white;
         }
       }

src/components/RandomizerCard.vue

@@ -1,6 +1,6 @@
 <template>
+  <div class="g-card-dimmer" v-if="store.isRandomizerCardOpen" @click="store.isRandomizerCardOpen = false"></div>
   <div class="card">
-    <!-- <button class="btn" @click="closeCard">X</button> -->
 
     <div class="wrapper">
       <!-- <h1>LOSUJ SKŁAD <img :src="icons.randomize" alt="losuj skład" /></h1>

src/components/ReadyStockList.vue

@@ -1,4 +1,5 @@
 <template>
+  <div class="g-card-dimmer" v-if="store.isRealStockListCardOpen" @click="store.isRealStockListCardOpen = false"></div>
   <div class="ready-stock-list" v-if="store.isRealStockListCardOpen">
     <div class="top-sticky">
       <button class="btn btn--text exit" @click="store.isRealStockListCardOpen = false">&lt; POWRÓT</button>

src/styles/global.scss

@@ -1,168 +1,187 @@
-@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');
 
-$bgColor: #2C3149;
+$bgColor: #2c3149;
 $textColor: #fff;
-$accentColor: #FFD600;
+$accentColor: #ffd600;
 
 ::-webkit-scrollbar {
-    width: 0.5rem;
+  width: 0.5rem;
-    height: 0.5rem;
+  height: 0.5rem;
 
-    &-track {
+  &-track {
-        background: #222;
+    background: #222;
-        border-radius: 0.5rem;
+    border-radius: 0.5rem;
-    }
+  }
 
-    &-thumb {
+  &-thumb {
-        border-radius: 1rem;
+    border-radius: 1rem;
-        background: #777;
+    background: #777;
-    }
+  }
 }
 
 body,
 html {
-    margin: 0;
+  margin: 0;
-    padding: 0;
+  padding: 0;
 
-    font-family: "Lato", sans-serif;
+  font-family: 'Lato', sans-serif;
 
-    background-color: $bgColor;
+  background-color: $bgColor;
-    width: 100vw;
+  width: 100vw;
-    overflow-x: hidden;
+  overflow-x: hidden;
 }
 
 *,
 *::before,
 *::after {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 a {
+  color: white;
+  text-decoration: none;
+
+  &:visited {
     color: white;
-    text-decoration: none;
+  }
 
-    &:visited {
+  &:hover,
-        color: white;
+  &:focus {
-    }
+    color: $accentColor;
-
+  }
-    &:hover, &:focus {
-        color: $accentColor;
-    }
 }
 
 p {
-    font-size: 1.2em;
+  font-size: 1.2em;
-    font-weight: bold;
+  font-weight: bold;
-    color: $accentColor;
+  color: $accentColor;
 }
 
 select,
 option,
 input,
 button {
-    font-family: "Lato", sans-serif;
+  font-family: 'Lato', sans-serif;
-    font-size: 1em;
+  font-size: 1em;
-
 }
 
 button {
-    border: none;
+  border: none;
-    outline: none;
+  outline: none;
-    background: none;
+  background: none;
 
-    padding: 0;
+  padding: 0;
-    margin: 0;
+  margin: 0;
 
-    cursor: pointer;
+  cursor: pointer;
 
-    font-size: 1em;
+  font-size: 1em;
-    color: white;
+  color: white;
 
-    &:hover {
+  &:hover {
-        color: $accentColor;
+    color: $accentColor;
-    }
+  }
 }
 
 button.btn {
-    padding: 0.25em 1em;
+  padding: 0.25em 1em;
 
-    border-radius: 0.25em;
+  border-radius: 0.25em;
-    border: 2px solid white;
+  border: 2px solid white;
-    outline: none;
+  outline: none;
-    background: none;
+  background: none;
 
+  transition: all 250ms;
+
+  &:hover {
+    color: $accentColor;
+    border-color: $accentColor;
+  }
+
+  &:focus {
+    color: $accentColor;
+  }
+
+  &[data-disabled='true'] {
+    user-select: none;
+    pointer-events: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+
+    opacity: 0.7;
+  }
+
+  &--text {
+    font-weight: bold;
     transition: all 250ms;
-
+    border: none;
-    &:hover {
+  }
-        color: $accentColor;
-        border-color: $accentColor;
-    }
-
-    &:focus {
-        color: $accentColor;
-    }
-
-    &--text {
-        font-weight: bold;
-        transition: all 250ms;
-        border: none;
-    }
 }
 
-
-
 button.btn-rect {
-    width: 1.5em;
+  width: 1.5em;
-    height: 1.5em;
+  height: 1.5em;
-    font-size: 1.65em;
+  font-size: 1.65em;
 
-    line-height: 1em;
+  line-height: 1em;
 
-    border-radius: 0.25em;
+  border-radius: 0.25em;
-    border: 2px solid black;
+  border: 2px solid black;
-    outline: none;
+  outline: none;
-    background: white;
+  background: white;
-    color: black;
+  color: black;
 
+  transition: all 250ms;
 
-    transition: all 250ms;
+  &:hover {
-
+    color: white;
-    &:hover {
+    background-color: black;
-        color: white;
+  }
-        background-color: black;
-    }
 }
 
 select {
-    background: none;
+  background: none;
-    border: 2px solid white;
+  border: 2px solid white;
-    outline: none;
+  outline: none;
 
-    padding: 0.25em 0.35em;
+  padding: 0.25em 0.35em;
 
-    color: white;
+  color: white;
-    font-size: 1em;
+  font-size: 1em;
 
-    width: 18em;
+  width: 18em;
 }
 
 option {
-    color: black;
+  color: black;
-    border: none;
+  border: none;
 }
 
 ul {
-    list-style: none;
+  list-style: none;
-    margin: 0;
+  margin: 0;
-    padding: 0;
+  padding: 0;
 }
 
 .text {
-    &--accent {
+  &--accent {
-        color: $accentColor;
+    color: $accentColor;
-    }
+  }
 
-    &--grayed {
+  &--grayed {
-        color: gray;
+    color: gray;
-    }
+  }
-}
+}
+
+.g-card-dimmer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+
+    cursor: pointer;
+
+    background-color: #000000aa;
+    z-index: 99;
+}