Drobne poprawki

src/components/ListSection.vue

@@ -72,25 +72,24 @@
       </button>
     </div>
 
-    <div class="stock_clipboard-text">
+    <div class="stock_clipboard-text" v-if="store.stockList.length > 0">
-      <button class="btn" v-if="store.stockList.length > 0" @click="copyToClipboard">
+      <button class="btn" @click="copyToClipboard">Skopiuj tekst składu do schowka</button>
-        Skopiuj pociąg w formie tekstowej do schowka
-      </button>
     </div>
 
     <div class="stock_specs">
       <b class="real-stock-info" v-if="store.chosenRealStock">
         <span class="text--accent">
           <img :src="getIconURL(store.chosenRealStock.type)" :alt="store.chosenRealStock.type" />
-          {{ store.chosenRealStock.number }} {{ store.chosenRealStock.name }}</span
+          {{ store.chosenRealStock.number }} {{ store.chosenRealStock.name }}
-        >
+        </span>
+        |
       </b>
 
-      <div>
+      <span>
-        Masa: <span class="text--accent">{{ store.totalMass }}t</span> | Długość:
+        Masa: <span class="text--accent">{{ store.totalMass }}t</span> - Długość:
         <span class="text--accent">{{ store.totalLength }}m</span>
-        | Vmax pociągu: <span class="text--accent">{{ store.maxStockSpeed }} km/h</span>
+        - Vmax pociągu: <span class="text--accent">{{ store.maxStockSpeed }} km/h</span>
-      </div>
+      </span>
     </div>
 
     <div class="stock_warnings">
@@ -348,12 +347,12 @@ export default defineComponent({
     },
 
     downloadStock() {
-      if (this.stockHasWarnings()) {
+      if (this.store.stockList.length == 0) return alert('Lista pojazdów jest pusta!');
-        alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
-        return;
-      }
 
-      const fileName = prompt('Nazwij plik:', 'pociag');
+      if (this.stockHasWarnings())
+        return alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
+
+      const fileName = prompt('Nazwij plik:', `${this.store.chosenRealStockName || this.store.stockList[0].type}`);
 
       if (!fileName) return;
 
@@ -398,13 +397,12 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../styles/global';
 
-.warnings {
+.stock_warnings {
-  margin-top: 0.5em;
+  margin-top: 1em;
 }
 
 .warning {
   padding: 0.25em;
-  margin-top: 0.5em;
   background: $accentColor;
   color: black;
 
@@ -487,15 +485,16 @@ export default defineComponent({
 }
 
 .stock_clipboard-text {
-  margin: 0.5em 0;
   font-weight: bold;
+
+  & > .btn {
+    margin: 0 0.5em 0.5em 0;
+  }
 }
 
 .real-stock-info {
-  font-size: 1.15em;
-
   img {
-    height: 1.5ch;
+    height: 1.3ch;
   }
 }
 
@@ -524,7 +523,7 @@ ul > li {
   }
 
   &.list-empty {
-    border: 1px solid white;
+    background-color: $secondaryColor;
     padding: 0.5em;
   }
 }
@@ -550,7 +549,7 @@ li > .stock-info {
 .stock-info {
   &__no,
   &__type {
-    background-color: #222;
+    background-color: $secondaryColor;
   }
 
   &__count {

src/components/cards/RandomizerCard.vue

@@ -119,7 +119,7 @@
                       v-model="stockWagon.stockString"
                       @input="onCarWagonTypeInput(stockWagon)"
                       @focus="onCarWagonTypeFocus(stockWagon)"
-                      placeholder="Kliknij, aby dodać wagon..."
+                      placeholder="Wybierz wagon..."
                     />
                     <datalist id="types-datalist">
                       <option value="">Wybierz wagon</option>
@@ -157,7 +157,7 @@
               </ul>
             </div>
 
-            <button class="btn btn--outline" @click="addToRandomStockList">+ NOWY WAGON</button>
+            <button class="btn btn--outline" style="margin-top: 0.5em;" @click="addToRandomStockList">+ NOWY WAGON</button>
           </div>
         </div>
 
@@ -432,8 +432,6 @@ h3 {
   margin: 0 0 0.5em 0;
 }
 
-
-
 .card_content {
   overflow-y: hidden;
   border: 2px solid white;
@@ -510,7 +508,6 @@ h3 {
     position: relative;
     width: 300px;
     height: 180px;
-    margin: 0 auto;
 
     border: 1px solid white;
 
@@ -623,10 +620,11 @@ h3 {
   }
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 650px) {
   .car-preview {
     width: 20em;
     height: 13em;
+    margin: 0 auto;
   }
 
   h3 {

src/components/cards/RealStockCard.vue

@@ -4,7 +4,7 @@
 
     <div class="card_content">
       <div class="top-sticky">
-        <button class="btn btn--text exit" @click="store.isRealStockListCardOpen = false">&lt; POWRÓT</button>
+        <button class="btn btn--text exit-btn" @click="store.isRealStockListCardOpen = false">&lt; POWRÓT</button>
 
         <div class="header">
           <h1>
@@ -97,8 +97,6 @@ export default defineComponent({
 
       this.store.swapVehicles = false;
 
-      this.store.chosenRealStockName = `${type} ${number} ${name}`;
-
       stockArray.forEach((type, i) => {
         let vehicle: Vehicle | null = null;
         if (i == 0) vehicle = this.store.locoDataList.find((loco) => loco.type == stockArray[0]) || null;
@@ -176,8 +174,9 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../../styles/global.scss';
 
-.exit {
+.exit-btn {
   font-size: 1.2em;
+  margin: 0.5em 0;
 }
 
 input {

src/store.ts

@@ -26,7 +26,7 @@ export const useStore = defineStore({
       swapVehicles: false,
 
       chosenStockListIndex: -1,
-      chosenRealStockName: null,
+      chosenRealStockName: undefined,
 
       vehiclePreviewSrc: '',
 

src/styles/global.scss

@@ -5,6 +5,7 @@ $breakpointSm: 550px;
 
 $bgColor: #2c3149;
 $textColor: #fff;
+$secondaryColor: #222;
 $accentColor: #ffd600;
 
 ::-webkit-scrollbar {
@@ -112,6 +113,7 @@ button.btn {
     font-weight: bold;
     transition: all 250ms;
     background: none;
+    padding: 0;
 
     &:focus-visible {
       outline: 1px solid white;

src/types.ts

@@ -18,7 +18,7 @@ export interface IStore {
   cargoOptions: any[][];
 
   chosenStockListIndex: number;
-  chosenRealStockName: string | null;
+  chosenRealStockName?: string;
 
   swapVehicles: boolean;
   vehiclePreviewSrc: string;

src/utils/vehicleUtils.ts

@@ -157,7 +157,12 @@ export function chosenRealStock(state: IStore) {
     }, [] as string[])
     .join(';');
 
-  return Object.values(state.readyStockList).find((readyStock) => readyStock.stockString == currentStockString);
+
+  const realStockObj = Object.values(state.readyStockList).find((readyStock) => readyStock.stockString == currentStockString);
+
+  state.chosenRealStockName = realStockObj ? `${realStockObj.type} ${realStockObj.number} ${realStockObj.name}` : undefined;
+
+  return realStockObj;
 }
 
 // export function maxAllowedSpeed(state: IStore) {