grouping generated stock (wip)

src/App.vue

@@ -34,7 +34,7 @@ export default defineComponent({
 
   color: $textColor;
   font-size: 1em;
-  padding: 1em 0.5em;
+  padding: 0;
 
   @media screen and (max-width: $breakpointMd) {
     font-size: calc(0.7rem + 0.75vw);

src/components/app/MainContainer.vue

@@ -8,11 +8,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent } from 'vue';
-import LogoSection from "../sections/LogoSection.vue";
+import LogoSection from '../sections/LogoSection.vue';
-import InputsSection from "../sections/InputsSection.vue";
+import InputsSection from '../sections/InputsSection.vue';
-import TrainImageSection from "../sections/TrainImageSection.vue";
+import TrainImageSection from '../sections/TrainImageSection.vue';
-import StockSection from "../sections/StockSection.vue";
+import StockSection from '../sections/StockSection.vue';
 
 export default defineComponent({
   components: { LogoSection, InputsSection, TrainImageSection, StockSection },
@@ -20,18 +20,23 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/global.scss";
+@import '../../styles/global.scss';
 
 main {
   display: grid;
   gap: 1em;
 
   width: 100%;
-  max-width: 1300px;
+  max-width: 1350px;
   min-height: 75vh;
 
   grid-template-columns: 1fr 2fr;
   grid-template-rows: auto 360px minmax(400px, 1fr);
+
+  background-color: darken($color: $bgColor, $amount: 5);
+  border-radius: 1em;
+
+  padding: 1em;
 }
 
 @media screen and (max-width: $breakpointMd) {

src/components/common/Checkbox.vue

@@ -0,0 +1,58 @@
+<template>
+  <label>
+    <input type="checkbox" v-model="model" />
+    <div><slot /></div>
+  </label>
+</template>
+
+<script lang="ts" setup>
+const model = defineModel();
+</script>
+
+<style lang="scss" scoped>
+label {
+  cursor: pointer;
+
+  text-transform: uppercase;
+  transition: color 200ms;
+}
+
+div {
+  padding: 0.25em 0.5em;
+  color: white;
+
+  background-color: #222;
+  border-radius: 0.25em;
+
+  user-select: none;
+
+  &::before {
+    content: '\2716';
+    margin-right: 0.5em;
+    color: #aaa;
+  }
+}
+
+input {
+  position: absolute;
+  clip: rect(1px, 1px, 1px, 1px);
+  padding: 0;
+  border: 0;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+
+  &:focus-visible + div {
+    outline: 1px solid white;
+  }
+
+  &:checked + div {
+    color: palegreen;
+
+    &::before {
+      color: palegreen;
+      content: '\2714';
+    }
+  }
+}
+</style>

src/components/tabs/StockGeneratorTab.vue

@@ -28,6 +28,12 @@
             <input type="number" v-model="maxCarCount" step="1" max="60" min="1" />
           </label>
         </div>
+
+        <!-- <hr style="margin: 1em 0" /> -->
+
+        <!-- <div class="generator_options">
+          <Checkbox v-model="isCarGroupingEnabled">Grupuj wylosowane wagony (ustawia podobne wagony obok siebie w składzie)</Checkbox>
+        </div>  -->
       </div>
 
       <div>
@@ -105,7 +111,6 @@ import warningsMixin from '../../mixins/warningsMixin';
 
 export default defineComponent({
   name: 'stock-generator',
-
   mixins: [stockMixin, warningsMixin],
 
   data() {
@@ -121,6 +126,8 @@ export default defineComponent({
       maxLength: 650,
       maxCarCount: 50,
 
+      isCarGroupingEnabled: false,
+
       store: useStore(),
     };
   },
@@ -163,6 +170,15 @@ export default defineComponent({
       this.excludedCarTypes.length = 0;
     },
 
+    // WIP
+    groupStock(stockList: IStock[]) {
+      if (!this.isCarGroupingEnabled) return false;
+
+      stockList.sort((s1, s2) => {
+        return (s1.constructionType + s1.cargo?.id).localeCompare(s2.constructionType + s2.cargo?.id);
+      });
+    },
+
     generateStock(empty = false) {
       const generatedChosenStockList = this.chosenCargoTypes.reduce(
         (acc, type) => {
@@ -237,6 +253,10 @@ export default defineComponent({
         }
       }
 
+      const bestStockList = bestGeneration.stockList;
+
+      this.groupStock(bestStockList);
+
       this.store.stockList = bestGeneration.stockList;
       this.store.stockSectionMode = 'stock-list';
     },
@@ -283,6 +303,11 @@ export default defineComponent({
 @import '../../styles/global.scss';
 @import '../../styles/tab.scss';
 
+h2 {
+  margin-top: 0;
+  margin-bottom: 0.5em;
+}
+
 .generator_cargo,
 .generator_vehicles {
   display: grid;
@@ -323,6 +348,12 @@ export default defineComponent({
   gap: 1em;
 }
 
+.generator_options {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+}
+
 .generator_warning {
   background-color: $accentColor;
   padding: 0.5em;

src/components/tabs/StockListTab.vue

@@ -33,27 +33,17 @@
     </div>
 
     <div class="stock_controls" :data-disabled="store.chosenStockListIndex == -1">
-      <b v-if="store.chosenStockListIndex >= 0">
+      <button class="btn btn--image" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" @click="moveUpStock(store.chosenStockListIndex)">
-        {{ $t('stocklist.vehicle-no') }}
-        <span class="text--accent">{{ store.chosenStockListIndex + 1 }}</span>
-        &nbsp;
-      </b>
-
-      <b v-else>
-        {{ $t('stocklist.no-vehicle-chosen') }}
-      </b>
-
-      <button class="btn" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" @click="moveUpStock(store.chosenStockListIndex)">
         <img :src="getIconURL('higher')" alt="move up vehicle" />
         {{ $t('stocklist.action-move-up') }}
       </button>
 
-      <button class="btn" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" @click="moveDownStock(store.chosenStockListIndex)">
+      <button class="btn btn--image" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" @click="moveDownStock(store.chosenStockListIndex)">
         <img :src="getIconURL('lower')" alt="move down vehicle" />
         {{ $t('stocklist.action-move-down') }}
       </button>
 
-      <button class="btn" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" @click="removeStock(store.chosenStockListIndex)">
+      <button class="btn btn--image" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" @click="removeStock(store.chosenStockListIndex)">
         <img :src="getIconURL('remove')" alt="remove vehicle" />
         {{ $t('stocklist.action-remove') }}
       </button>
@@ -80,15 +70,13 @@
     </div>
 
     <div class="stock_spawn-settings">
-      <label v-if="store.stockSupportsColdStart" :data-checked="store.isColdStart">
+      <Checkbox v-if="store.stockSupportsColdStart" v-model="store.isColdStart">
-        <input type="checkbox" v-model="store.isColdStart" />
         {{ $t('stocklist.coldstart-info') }}
-      </label>
+      </Checkbox>
 
-      <label v-if="store.stockSupportsDoubleManning" :data-checked="store.isDoubleManned">
+      <Checkbox v-if="store.stockSupportsDoubleManning" v-model="store.isDoubleManned">
-        <input type="checkbox" v-model="store.isDoubleManned" />
         {{ $t('stocklist.doublemanning-info') }}
-      </label>
+      </Checkbox>
     </div>
 
     <div class="stock_warnings" v-if="stockHasWarnings">
@@ -122,7 +110,7 @@
         <div class="stock-info">{{ $t('stocklist.list-empty') }}</div>
       </li>
 
-      <TransitionGroup name="stock-list-anim">
+      <TransitionGroup name="stock-list-anim" v-else>
         <li
           v-for="(stock, i) in store.stockList"
           :key="stock.id"
@@ -168,10 +156,11 @@ import imageMixin from '../../mixins/imageMixin';
 import stockPreviewMixin from '../../mixins/stockPreviewMixin';
 import StockThumbnails from '../utils/StockThumbnails.vue';
 import stockMixin from '../../mixins/stockMixin';
+import Checkbox from '../common/Checkbox.vue';
 
 export default defineComponent({
   name: 'stock-list',
-  components: { StockThumbnails },
+  components: { StockThumbnails, Checkbox },
 
   mixins: [warningsMixin, imageMixin, stockMixin, stockPreviewMixin],
 
@@ -409,8 +398,9 @@ export default defineComponent({
 @import '../../styles/tab.scss';
 
 .stock-list-tab {
-  display: grid;
+  display: flex;
-  grid-gap: 0.5em;
+  flex-direction: column;
+  gap: 0.5em;
 }
 
 .warning {
@@ -430,9 +420,9 @@ export default defineComponent({
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-wrap: wrap;
 
   gap: 0.5em;
-  flex-wrap: wrap;
 
   padding: 0.5em;
 
@@ -447,21 +437,6 @@ export default defineComponent({
 
     pointer-events: none;
   }
-
-  input#stock-count {
-    width: 3em;
-
-    margin: 0;
-    padding: 0.25em;
-    outline: none;
-    border: none;
-  }
-
-  button {
-    img {
-      margin-right: 0.25em;
-    }
-  }
 }
 
 .stock_actions {
@@ -484,39 +459,6 @@ export default defineComponent({
 .stock_spawn-settings {
   display: flex;
   gap: 0.5em;
-
-  label > input {
-    position: absolute;
-    clip: rect(1px, 1px, 1px, 1px);
-    padding: 0;
-    border: 0;
-    height: 1px;
-    width: 1px;
-    overflow: hidden;
-  }
-
-  label {
-    padding: 0.25em 0.5em;
-    border-radius: 0.25em;
-    background-color: #222;
-    color: #aaa;
-    cursor: pointer;
-
-    text-transform: uppercase;
-    transition: color 200ms;
-
-    &::before {
-      content: '\2716';
-    }
-  }
-
-  label[data-checked='true'] {
-    color: palegreen;
-
-    &::before {
-      content: '\2714';
-    }
-  }
 }
 
 .real-stock-info {

src/styles/global.scss

@@ -3,7 +3,7 @@ $breakpointSm: 550px;
 
 $bgColor: #2b3552;
 $textColor: #fff;
-$secondaryColor: #222;
+$secondaryColor: #1b1b1b;
 $accentColor: #e4c428;
 
 @font-face {
@@ -118,7 +118,7 @@ button {
   padding: 0.4em 0.75em;
 
   outline: none;
-  background-color: #222;
+  background-color: $secondaryColor;
   border-radius: 8px;
   font-weight: bold;
 
@@ -227,6 +227,13 @@ ul {
   }
 }
 
+hr {
+  height: 3px;
+  background-color: white;
+  outline: none;
+  margin: 0;
+}
+
 .g-card {
   position: fixed;
   top: 1em;

src/styles/tab.scss

@@ -1,4 +1,4 @@
-@import "./global.scss";
+@import './global.scss';
 
 .tab {
   height: 100%;
@@ -58,13 +58,6 @@
   }
 }
 
-hr {
-  height: 3px;
-  background-color: white;
-  outline: none;
-  margin: 0;
-}
-
 @media only screen and (max-width: 470px) {
   .tab_attributes {
     label {

src/views/AppContainerView.vue

@@ -6,11 +6,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent } from 'vue';
-import { useStore } from "../store";
+import { useStore } from '../store';
 
-import MainContainer from "../components/app/MainContainer.vue";
+import MainContainer from '../components/app/MainContainer.vue';
-import FooterVue from "../components/app/Footer.vue";
+import FooterVue from '../components/app/Footer.vue';
 
 export default defineComponent({
   components: {
@@ -31,5 +31,7 @@ export default defineComponent({
   display: flex;
   flex-direction: column;
   align-items: center;
+
+  padding: 0.5em;
 }
 </style>