Wygląd, responsywność, poprawki funkcjonalności

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pojazdownik",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/App.vue

@@ -5,7 +5,8 @@
   </header>
 
   <main>
-    <div class="inputs_loco">
+    <section class="inputs">
+      <div class="input inputs_loco">
         <div class="input_container">
           <h2 class="input_header">LOKOMOTYWA / ZESP. TRAKCYJNY</h2>
           <div class="input_radio">
@@ -30,7 +31,11 @@
               @change="onLocoTypeChange"
             >
               <option :value="null" disabled>Wybierz pojazd z listy</option>
-            <option v-for="loco in locoOptions" :value="loco" :key="loco.type">
+              <option
+                v-for="loco in locoOptions"
+                :value="loco"
+                :key="loco.type"
+              >
                 {{ loco.type }}
               </option>
             </select>
@@ -39,11 +44,18 @@
               <img :src="icons.add" alt="add vehicle" />
             </button>
           </div>
+
+          <div class="input_checkbox">
+            <label for="supporter">
+              <input type="checkbox" id="supporter" v-model="showSupporter" />
+              <span>Pokaż pojazdy dla supporterów</span>
+            </label>
+          </div>
         </div>
       </div>
 
       <div
-      class="inputs_car"
+        class="input inputs_car"
         :class="{
           disabled:
             chosenLocoPower == 'loco-ezt' || chosenLocoPower == 'loco-szt',
@@ -67,7 +79,11 @@
           </div>
 
           <div class="input_list type">
-          <select id="car-select" v-model="chosenCar" @change="onCarTypeChange">
+            <select
+              id="car-select"
+              v-model="chosenCar"
+              @change="onCarTypeChange"
+            >
               <option :value="null" disabled>Wybierz wagon z listy</option>
               <option v-for="car in carOptions" :value="car" :key="car.type">
                 {{ car.type }}
@@ -101,25 +117,24 @@
           </div>
         </div>
       </div>
+    </section>
 
-    <section class="images">
+    <div class="bottom">
-      <div class="image">
+      <section class="image">
-        <div class="image-content">
+        <div class="image__wrapper">
+          <div class="image__content">
             <div class="no-img" v-if="!chosenCar && !chosenLoco">
               POGLĄD WYBRANEGO POJAZDU
             </div>
-
             <div class="empty-message" v-if="imageLoading">
               ŁADOWANIE OBRAZU...
             </div>
-
             <img
               v-if="chosenLoco && !chosenCar"
               :src="chosenLoco.imageSrc"
               :alt="chosenLoco.type"
               @load="onImageLoad"
             />
-
             <img
               v-if="chosenCar"
               :src="chosenCar.imageSrc"
@@ -127,11 +142,12 @@
               @load="onImageLoad"
             />
           </div>
-
-        <button class="btn-rect" @click="addVehicle">+</button>
         </div>
+        <!-- <button class="btn-rect" @click="addVehicle">+</button> -->
       </section>
 
+      <section class="spacer"></section>
+
       <section class="stock-list">
         <div class="stock-list_buttons">
           <button class="btn btn--copy" @click="downloadStock">
@@ -139,16 +155,15 @@
           </button>
           <!-- <button class="btn btn--show-text">WCZYTAJ SKŁAD</button> -->
         </div>
-
         <div class="stock-list_specs">
           Masa: <span class="text--accent">{{ totalMass }}</span> t | Długość:
           <span class="text--accent">{{ totalLength }}</span>
-        m | Vmax: <span class="text--accent">{{ maxSpeed }} </span> km/h
+          m | Vmax składu:
+          <span class="text--accent">{{ maxSpeed }} </span> km/h
         </div>
-
         <ul>
           <li v-if="stockList.length == 0" class="list-empty">
-          Lista pojazdów jest pusta!
+            <div class="item-content">Lista pojazdów jest pusta!</div>
           </li>
 
           <li
@@ -174,7 +189,9 @@
               &nbsp;
               <span> {{ stock.length }}m</span>
               &nbsp;
-            <span>{{ stock.cargo ? stock.cargo.totalMass : stock.mass }}t</span>
+              <span
+                >{{ stock.cargo ? stock.cargo.totalMass : stock.mass }}t</span
+              >
             </div>
 
             <div class="item-actions">
@@ -182,46 +199,31 @@
                 <button class="action-btn" @click="subStock(i)">
                   <img :src="icons.sub" alt="subtract vehicle count" />
                 </button>
-
                 <span>{{ stock.count }} </span>
-
                 <button class="action-btn" @click="addStock(i)">
                   <img :src="icons.add" alt="add vehicle count" />
                 </button>
               </div>
-
               <button class="action-btn" @click="moveUpStock(i)">
                 <img :src="icons.higher" alt="move up vehicle" />
               </button>
-
               <button class="action-btn" @click="moveDownStock(i)">
                 <img :src="icons.lower" alt="move down vehicle" />
               </button>
-
               <button class="action-btn" @click="removeStock(i)">
                 <img :src="icons.remove" alt="remove vehicle" />
               </button>
             </div>
-          <!-- <span class="type"></span>
-          <span class="cargo"></span>
-          <span class="cargo"></span>
-
-          <span class="actions">
-            <div class="car-count">5</div>
-            <button class="btn--remove"></button>
-            <button class="btn--moveup"></button>
-            <button class="btn--movedown"></button>
-          </span> -->
           </li>
         </ul>
       </section>
+    </div>
   </main>
   <footer>
-    <span class="text--grayed">
+    <div class="text--grayed" style="margin-bottom: 0.25em">
       Ta strona ma charakter informacyjny. Autor nie ponosi odpowiedzialności za
       tworzenie składów niezgodnych z regulaminem symulatora Train Driver 2!
-    </span>
+    </div>
-    <br />
     &copy; Spythere 2021 | v{{ VERSION }}
   </footer>
 </template>
@@ -314,6 +316,8 @@ export default class App extends Vue {
     },
   ];
 
+  showSupporter = false;
+
   chosenLocoPower = "loco-e";
   chosenCarUseType = "car-passenger";
 
@@ -479,6 +483,10 @@ export default class App extends Vue {
   }
 
   downloadStock() {
+    const fileName = prompt("Nazwij plik:", "sklad");
+
+    if (!fileName) return;
+
     const stockString = this.stockList
       .map((stock) => {
         let s =
@@ -493,8 +501,6 @@ export default class App extends Vue {
       })
       .join(";");
 
-    const fileName = prompt("Nazwij plik:", "sklad");
-
     const blob = new Blob([stockString]);
     const file = fileName + ".con";
 
@@ -505,8 +511,6 @@ export default class App extends Vue {
     a.dataset.downloadurl = ["", a.download, a.href].join(":");
     e.initEvent("click", true, false);
     a.dispatchEvent(e);
-
-    console.log(stockString);
   }
 
   get locoDataList() {
@@ -516,6 +520,8 @@ export default class App extends Vue {
       const locoVehiclesData = (vehicleDataJSON as VehicleData)[vehicleTypeKey];
 
       locoVehiclesData.forEach((loco) => {
+        if (loco[4] && !this.showSupporter) return;
+
         const locoType = loco[0] as string;
 
         let length = 0,
@@ -599,6 +605,8 @@ export default class App extends Vue {
       const carVehiclesData = (vehicleDataJSON as VehicleData)[vehicleTypeKey];
 
       carVehiclesData.forEach((car) => {
+        if (car[3] && !this.showSupporter) return;
+
         const carPropsData = vehiclePropsJSON.find((v) =>
           car[0].toString().includes(v.type)
         );
@@ -632,6 +640,10 @@ export default class App extends Vue {
     const vehicle = this.chosenCar || this.chosenLoco;
 
     if (!vehicle) return;
+    if (vehicle.length + this.totalLength > 650) {
+      alert("Maksymalna długość składu to 650m!");
+      return;
+    }
 
     const previousStock =
       this.stockList.length > 0
@@ -772,32 +784,25 @@ h2 {
 /* MAIN SECTION */
 
 main {
-  display: grid;
+  /* display: grid; */
 
-  grid-template-areas: "loco car" "image list";
+  /* grid-template-areas:
-  gap: 4em 2em;
+    "loco car"
+    "image image"
+    "stock stock"; */
 
-  align-content: flex-start;
+  margin-top: 8em;
-
-  margin-top: 6em;
-
-  @media screen and (max-width: 800px) {
-    grid-template-areas: "loco" "car" "image" "list";
-    justify-content: center;
-
-    margin-top: 2.5em;
-    gap: 2em;
-  }
 }
 
 .inputs {
-  &_loco {
+  display: flex;
-    grid-area: "loco";
+  justify-content: space-between;
+
+  @media screen and (max-width: 800px) {
+    flex-direction: column;
   }
 
   &_car {
-    grid-area: "car";
-
     &.disabled {
       opacity: 0.75;
       pointer-events: none;
@@ -811,19 +816,44 @@ main {
   }
 
   &_radio {
+    label span {
+      padding: 0.25em 0.55em;
+      border: 2px solid white;
+    }
+  }
+
+  &_checkbox {
+    label span {
+      /* padding: 0.25em 0.55em; */
+      /* border: 2px solid white; */
+      color: #aaa;
+
+      &::before {
+        content: "";
+        display: inline-block;
+
+        width: 1.5ex;
+        height: 1.5ex;
+        background: #aaa;
+
+        margin-right: 0.5em;
+      }
+    }
+
+    input:checked + span::before {
+      background-color: $accentColor;
+    }
+  }
+
+  &_radio,
+  &_checkbox {
     margin: 1em 0;
 
     label {
       cursor: pointer;
-
       margin-right: 0.5em;
 
-      span {
+      input {
-        padding: 0.25em 0.55em;
-        border: 2px solid white;
-      }
-
-      & > input {
         display: none;
 
         &:checked + span {
@@ -858,24 +888,43 @@ main {
   }
 }
 
-.images {
+.bottom {
   display: flex;
   justify-content: space-between;
-  flex-wrap: wrap;
+
+  margin-top: 2.5em;
+
+  @media screen and (max-width: 800px) {
+    flex-direction: column;
+    align-items: center;
 
     .image {
-    position: relative;
+      display: flex;
+      padding: 0 0 2em 0;
+    }
+  }
+}
 
-    grid-area: "image";
+.spacer {
+  flex: 2 1 10%;
+}
+
+.image {
+  flex-grow: 2;
+  padding: 0 1em 0 0;
+
+  &__wrapper {
     max-width: 380px;
     width: 22em;
     height: 13em;
-    border: 1px solid white;
-
-    &-content {
-      height: 100%;
   }
 
+  &__content {
+    border: 1px solid white;
+    position: relative;
+
+    height: 100%;
+
     img {
       width: 100%;
       height: 100%;
@@ -900,28 +949,17 @@ main {
       background: rgba(#000, 0.75);
     }
   }
-
-  button {
-    position: absolute;
-    right: 0;
-    top: 0;
-
-    margin: 0.25em;
-  }
-
-  img {
-    width: 100%;
-    height: 100%;
-  }
 }
 
 .stock-list {
-  grid-area: "list";
+  flex-grow: 3;
+
+  width: 100%;
 
   &_buttons {
     button {
       font-size: 0.9em;
-      padding: 0.2em 0.5em;
+      padding: 0.4em 0.5em;
       margin-bottom: 0.5em;
     }
   }
@@ -934,6 +972,11 @@ main {
     outline: none;
     cursor: pointer;
 
+    &.list-empty {
+      border: 1px solid whitesmoke;
+      padding: 0 0.5em;
+    }
+
     &:focus .item-content {
       color: $accentColor;
     }
@@ -990,19 +1033,14 @@ main {
     font-size: calc(0.75vw + 0.6rem);
   }
 
+  main {
+    margin-top: 3.5em;
+  }
+
   header {
     font-size: 0.85em;
   }
 
-  .images {
-    justify-content: center;
-
-    > .image {
-      width: 25em;
-      height: 15em;
-    }
-  }
-
   .input {
     justify-content: center;
 
@@ -1012,12 +1050,9 @@ main {
       text-align: center;
     }
 
-    &_radio {
+    &_radio,
-      display: flex;
+    &_list,
-      justify-content: center;
+    &_checkbox {
-    }
-
-    &_list {
       display: flex;
       justify-content: center;
     }