Animacje, dostępność

src/App.vue

@@ -146,11 +146,11 @@ main {
   gap: 1em 3em;
 
   width: 100vw;
-  max-width: 1200px;
+  max-width: 1300px;
   min-height: 75vh;
 
-  grid-template-columns: 1fr 3fr;
-  grid-template-rows: 250px auto;
+  grid-template-columns: 1fr 2fr;
+  grid-template-rows: 350px auto;
 
   padding: 0.5em;
 }

src/components/InputsSection.vue

@@ -1,84 +1,86 @@
 <template>
   <section class="inputs-section">
-    <div class="input inputs_loco">
-      <div class="input_container">
-        <h2 class="input_header">WYBIERZ POJAZDY / WAGONY</h2>
+    <div class="input_container">
+      <h2 class="input_header">WYBIERZ POJAZDY / WAGONY</h2>
 
-        <div class="input_list type">
-          <select
-            id="locomotives-list"
-            v-model="store.chosenLoco"
-            @focus="onVehicleSelect('loco')"
-            @input="onVehicleSelect('loco')"
-            @keydown.enter="addVehicle"
-            @keydown.backspace="removeVehicle"
-          >
-            <option :value="null" disabled>Wybierz pojazd trakcyjny</option>
-            <option v-for="loco in locoOptions" :value="loco" :key="loco.type">
-              {{ loco.type }}
-            </option>
-          </select>
-        </div>
+      <div class="input_list type">
+        <label for="locomotives-list">Pojazdy trakcyjne</label>
+        <select
+          id="locomotives-list"
+          v-model="store.chosenLoco"
+          @focus="onVehicleSelect('loco')"
+          @input="onVehicleSelect('loco')"
+          @keydown.enter="addVehicle"
+          @keydown.backspace="removeVehicle"
+        >
+          <option :value="null" disabled>Wybierz pojazd trakcyjny</option>
+          <option v-for="loco in locoOptions" :value="loco" :key="loco.type">
+            {{ loco.type }}
+          </option>
+        </select>
+      </div>
 
-        <div class="input_list type">
-          <select
-            id="carwagons-list"
-            v-model="store.chosenCar"
-            @focus="onVehicleSelect('car')"
-            @input="onVehicleSelect('car')"
-            @keydown.enter="addVehicle"
-            @keydown.backspace="removeVehicle"
-          >
-            <option :value="null" disabled>Wybierz wagon</option>
+      <div class="input_list type">
+        <label for="locomotives-list">Wagony</label>
 
-            <option v-for="car in carOptions" :value="car" :key="car.type">
-              {{ car.type }}
-            </option>
-          </select>
-        </div>
+        <select
+          id="carwagons-list"
+          v-model="store.chosenCar"
+          @focus="onVehicleSelect('car')"
+          @input="onVehicleSelect('car')"
+          @keydown.enter="addVehicle"
+          @keydown.backspace="removeVehicle"
+        >
+          <option :value="null" disabled>Wybierz wagon</option>
 
-        <div class="input_list cargo">
-          <select
-            id="cargo-select"
-            :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"
-            @focus="onVehicleSelect('car')"
-            @input="onVehicleSelect('car')"
-            @keydown.enter="addVehicle"
-            @keydown.backspace="removeVehicle"
-          >
-            <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="car in carOptions" :value="car" :key="car.type">
+            {{ car.type }}
+          </option>
+        </select>
+      </div>
 
-            <option v-for="cargo in store.chosenCar?.cargoList" :value="cargo" :key="cargo.id">
-              {{ cargo.id }}
-            </option>
-          </select>
-        </div>
+      <div class="input_list cargo">
+        <label for="cargo-select">Ładunek (tylko wybrane towarowe)</label>
+        <select
+          id="cargo-select"
+          :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"
+          @focus="onVehicleSelect('car')"
+          @input="onVehicleSelect('car')"
+          @keydown.enter="addVehicle"
+          @keydown.backspace="removeVehicle"
+        >
+          <option :value="null" v-if="!store.chosenCar || !store.chosenCar.loadable">brak dostępnych ładunków</option>
+          <option :value="null" v-else>próżny</option>
 
-        <div class="input_actions">
-          <button class="btn" @click="addVehicle">DODAJ NOWY</button>
-          <button
-            class="btn"
-            @click="switchVehicles"
-            :disabled="store.chosenStockListIndex == -1"
-            :data-disabled="store.chosenStockListIndex == -1"
-          >
-            ZAMIEŃ ZA
-            <b class="text--accent">
-              {{ store.chosenStockListIndex == -1 ? '' : `${store.chosenStockListIndex + 1}.` }}
-            </b>
-          </button>
+          <option v-for="cargo in store.chosenCar?.cargoList" :value="cargo" :key="cargo.id">
+            {{ cargo.id }}
+          </option>
+        </select>
+      </div>
 
-          <button class="btn" @click="setReadyStockList(true)"><b>REALNE ZESTAWIENIA</b></button>
-          <ready-stock-list />
-        </div>
+      <div class="input_actions">
+        <button class="btn" @click="addVehicle">DODAJ NOWY</button>
+        <button
+          class="btn"
+          @click="switchVehicles"
+          :disabled="store.chosenStockListIndex == -1"
+          :data-disabled="store.chosenStockListIndex == -1"
+        >
+          ZAMIEŃ ZA
+          <b class="text--accent">
+            {{ store.chosenStockListIndex == -1 ? '' : `${store.chosenStockListIndex + 1}.` }}
+          </b>
+        </button>
+
+        <button class="btn" @click="setReadyStockList(true)"><b>REALNE ZESTAWIENIA</b></button>
+        <ready-stock-list />
       </div>
     </div>
   </section>
@@ -176,6 +178,7 @@ 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,
@@ -198,6 +201,7 @@ 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,
@@ -263,7 +267,14 @@ export default defineComponent({
 
   &_list {
     margin: 0.5em 0;
-    display: flex;
+
+    label {
+      display: block;
+
+      font-weight: bold;
+      color: $accentColor;
+      margin-bottom: 0.3em;
+    }
 
     select:focus {
       border-color: $accentColor;
@@ -304,22 +315,12 @@ export default defineComponent({
 
 @media screen and (max-width: $breakpointMd) {
   .inputs-section {
-    flex-direction: column;
+    justify-content: center;
+    text-align: center;
   }
 
-  .input {
+  .input_actions {
     justify-content: center;
-
-    margin: 1em 0;
-
-    _header {
-      text-align: center;
-    }
-
-    &_container > * {
-      display: flex;
-      justify-content: center;
-    }
   }
 }
 </style>

src/components/ListSection.vue

@@ -19,7 +19,7 @@
           1
         </button>
 
-        <input type="number" name="stock-count" id="stock-count" v-model="chosenStockVehicle.count" />
+        <input type="number" min="1" name="stock-count" id="stock-count" v-model="chosenStockVehicle.count" />
 
         <button class="action-btn" @click="addStock(store.chosenStockListIndex)">
           <img :src="icons.add" alt="add vehicle count" />
@@ -94,44 +94,44 @@
         <div class="stock-info">Lista pojazdów jest pusta!</div>
       </li>
 
-      <li
-        v-for="(stock, i) in store.stockList"
-        :key="stock.type + i"
-        :class="{ loco: stock.isLoco }"
-        tabindex="0"
-        @click="onListItemClick(i)"
-
-        @keydown.enter="onListItemClick(i)"
-        @keydown.w="moveUpStock(i)"
-        @keydown.s="moveDownStock(i)"
-        @keydown.backspace="removeStock(i)"
-
-        ref="itemRefs"
-      >
-        <div
-          class="stock-info"
-          @dragstart="onDragStart(i)"
-          @drop="onDrop($event, i)"
-          @dragover="allowDrop"
-          draggable="true"
+      <transition-group name="stock-list-anim">
+        <li
+          v-for="(stock, i) in store.stockList"
+          :key="stock.id"
+          :class="{ loco: stock.isLoco }"
+          tabindex="0"
+          @click="onListItemClick(i)"
+          @keydown.enter="onListItemClick(i)"
+          @keydown.w="moveUpStock(i)"
+          @keydown.s="moveDownStock(i)"
+          @keydown.backspace="removeStock(i)"
+          ref="itemRefs"
         >
-          <span class="stock-info__no" :data-selected="i == store.chosenStockListIndex">
-            <span v-if="i == store.chosenStockListIndex">&bull;&nbsp;</span>
-            {{ i + 1 }}.
-          </span>
+          <div
+            class="stock-info"
+            @dragstart="onDragStart(i)"
+            @drop="onDrop($event, i)"
+            @dragover="allowDrop"
+            draggable="true"
+          >
+            <span class="stock-info__no" :data-selected="i == store.chosenStockListIndex">
+              <span v-if="i == store.chosenStockListIndex">&bull;&nbsp;</span>
+              {{ i + 1 }}.
+            </span>
 
-          <span class="stock-info__type">
-            {{ stock.isLoco ? stock.type : getCarSpecFromType(stock.type) }}
-          </span>
+            <span class="stock-info__type">
+              {{ stock.isLoco ? stock.type : getCarSpecFromType(stock.type) }}
+            </span>
 
-          <span class="stock-info__cargo" v-if="stock.cargo"> {{ stock.cargo.id }} </span>
-          <span class="stock-info__length"> {{ stock.length }}m </span>
-          <span class="stock-info__mass">{{ stock.cargo ? stock.cargo.totalMass : stock.mass }}t </span>
-          <span class="stock-info__speed"> {{ stock.maxSpeed }}km/h </span>
+            <span class="stock-info__cargo" v-if="stock.cargo"> {{ stock.cargo.id }} </span>
+            <span class="stock-info__length"> {{ stock.length }}m </span>
+            <span class="stock-info__mass">{{ stock.cargo ? stock.cargo.totalMass : stock.mass }}t </span>
+            <span class="stock-info__speed"> {{ stock.maxSpeed }}km/h </span>
 
-          <span class="stock-info__count"> x{{ stock.count }} </span>
-        </div>
-      </li>
+            <span class="stock-info__count"> x{{ stock.count }} </span>
+          </div>
+        </li>
+      </transition-group>
     </ul>
   </section>
 </template>
@@ -476,14 +476,15 @@ export default defineComponent({
 }
 
 ul {
+  position: relative;
+
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  height: 50vh;
+  min-height: 500px;
   margin-top: 1em;
-
-  max-height: 500px;
-  overflow: auto;
-
   padding: 0.25em;
-
-  border: 2px solid gray;
 }
 
 ul > li {
@@ -491,16 +492,14 @@ ul > li {
   align-items: center;
   justify-content: space-between;
 
+  margin: 0.25em 0;
+
   outline: none;
   cursor: pointer;
 
   &:focus-visible {
     outline: 1px solid white;
   }
-
-  &:hover .item-content {
-    color: $accentColor;
-  }
 }
 
 li > .stock-info {
@@ -508,7 +507,6 @@ li > .stock-info {
 
   color: white;
   font-weight: 700;
-  margin: 0.25em 0;
 
   transition: color 100ms;
 
@@ -552,7 +550,31 @@ li > .stock-info {
   }
 }
 
+.stock-list-anim {
+  &-move, /* apply transition to moving elements */
+  &-enter-active,
+  &-leave-active {
+    transition: all 250ms ease;
+  }
+
+  &-enter-from {
+    opacity: 0;
+    transform: translateY(-25px);
+  }
+
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-leave-active {
+    position: absolute;
+  }
+}
+
 @media screen and (max-width: $breakpointMd) {
+  ul {
+    min-height: auto;
+  }
   li > .stock-info {
     font-size: 0.9em;
   }

src/components/RandomizerCard.vue

@@ -98,7 +98,7 @@
 import { defineComponent } from 'vue';
 
 import carUsage from '../data/carUsage.json';
-import { ICarWagon, ILocomotive, ICargo } from '../types';
+import { ICarWagon, ILocomotive, ICargo, IStock } from '../types';
 
 import randomizeIcon from '../assets/randomize-icon.svg';
 import { useStore } from '../store';
@@ -321,7 +321,8 @@ export default defineComponent({
         return;
       }
 
-      const stockObj = {
+      const stockObj: IStock = {
+        id: `${Date.now()+this.store.stockList.length}`,
         type: loco.type,
         length: loco.length,
         mass: loco.mass,
@@ -348,7 +349,8 @@ export default defineComponent({
         return;
       }
 
-      const stockObj = {
+      const stockObj: IStock = {
+        id: `${Date.now()+this.store.stockList.length}`,
         type: car.type,
         length: car.length,
         mass: car.mass,

src/components/ReadyStockList.vue

@@ -39,7 +39,7 @@
 
 <script lang="ts">
 import { defineComponent, inject } from 'vue';
-import { IStore, ILocomotive, ICarWagon, Vehicle } from '../types';
+import { IStore, ILocomotive, ICarWagon, Vehicle, IStock } from '../types';
 
 import iconEIC from '../assets/EIC.png';
 import iconIC from '../assets/IC.svg';
@@ -131,14 +131,15 @@ export default defineComponent({
 
       this.store.chosenStockListIndex = -1;
       this.store.chosenVehicle = null;
-      
+
       this.store.isRealStockListCardOpen = false;
     },
 
     addVehicle(vehicle: Vehicle | null) {
       if (!vehicle) return;
 
-      const stockObj = {
+      const stockObj: IStock = {
+        id: `${Date.now() + this.store.stockList.length}`,
         type: vehicle.type,
         length: vehicle.length,
         mass: vehicle.mass,

src/types.ts

@@ -64,6 +64,7 @@ export interface ICargo {
 }
 
 export interface IStock {
+  id: string;
   useType: string;
   type: string;
   length: number;