enhanced wiki list

src/components/tabs/StockGeneratorTab.vue

@@ -1,56 +1,38 @@
 <template>
   <div class="stock-generator tab">
     <div class="tab_header">
-      <h2>{{ $t("stockgen.title") }}</h2>
+      <h2>{{ $t('stockgen.title') }}</h2>
     </div>
 
     <div class="tab_content">
       <div>
-        <h2>{{ $t("stockgen.properties-title") }}</h2>
+        <h2>{{ $t('stockgen.properties-title') }}</h2>
 
         <b class="text--accent">
-          {{ $t("stockgen.properties-desc") }}
+          {{ $t('stockgen.properties-desc') }}
         </b>
 
         <div class="tab_attributes">
           <label>
-            {{ $t("stockgen.input-mass") }}
-            <input
-              type="number"
-              v-model="maxMass"
-              step="100"
-              max="4000"
-              min="0"
-            />
+            {{ $t('stockgen.input-mass') }}
+            <input type="number" v-model="maxMass" step="100" max="4000" min="0" />
           </label>
 
           <label>
-            {{ $t("stockgen.input-length") }}
-            <input
-              type="number"
-              v-model="maxLength"
-              step="25"
-              max="650"
-              min="0"
-            />
+            {{ $t('stockgen.input-length') }}
+            <input type="number" v-model="maxLength" step="25" max="650" min="0" />
           </label>
 
           <label>
-            {{ $t("stockgen.input-carcount") }}
-            <input
-              type="number"
-              v-model="maxCarCount"
-              step="1"
-              max="60"
-              min="1"
-            />
+            {{ $t('stockgen.input-carcount') }}
+            <input type="number" v-model="maxCarCount" step="1" max="60" min="1" />
           </label>
         </div>
       </div>
 
       <div>
-        <h2>{{ $t("stockgen.cargo-title") }}</h2>
-        <b>{{ $t("stockgen.cargo-desc") }}</b>
+        <h2>{{ $t('stockgen.cargo-title') }}</h2>
+        <b>{{ $t('stockgen.cargo-desc') }}</b>
       </div>
 
       <div class="generator_cargo">
@@ -66,15 +48,15 @@
       </div>
 
       <div>
-        <h2>{{ $t("stockgen.chosen-title") }}</h2>
+        <h2>{{ $t('stockgen.chosen-title') }}</h2>
 
         <div class="generator_warning">
           <span v-if="computedChosenCarTypes.size == 0">
-            {{ $t("stockgen.chosen-empty-warning") }}
+            {{ $t('stockgen.chosen-empty-warning') }}
           </span>
 
           <span v-else>
-            {{ $t("stockgen.chosen-warning") }}
+            {{ $t('stockgen.chosen-warning') }}
           </span>
         </div>
       </div>
@@ -97,28 +79,16 @@
       <hr />
 
       <div class="tab_actions">
-        <button
-          class="btn"
-          :data-disabled="computedChosenCarTypes.size == 0"
-          @click="generateStock()"
-        >
-          {{ $t("stockgen.action-generate") }}
+        <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock()">
+          {{ $t('stockgen.action-generate') }}
         </button>
 
-        <button
-          class="btn"
-          :data-disabled="computedChosenCarTypes.size == 0"
-          @click="generateStock(true)"
-        >
-          {{ $t("stockgen.action-generate-empty") }}
+        <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock(true)">
+          {{ $t('stockgen.action-generate-empty') }}
         </button>
 
-        <button
-          class="btn"
-          :data-disabled="computedChosenCarTypes.size == 0"
-          @click="resetChosenCargo"
-        >
-          {{ $t("stockgen.action-reset") }}
+        <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="resetChosenCargo">
+          {{ $t('stockgen.action-reset') }}
         </button>
       </div>
     </div>
@@ -126,15 +96,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
-import { useStore } from "../../store";
+import { defineComponent } from 'vue';
+import { useStore } from '../../store';
 
-import stockMixin from "../../mixins/stockMixin";
-import { ICargo, ICarWagon, IStock } from "../../types";
-import warningsMixin from "../../mixins/warningsMixin";
+import stockMixin from '../../mixins/stockMixin';
+import { ICargo, ICarWagon, IStock } from '../../types';
+import warningsMixin from '../../mixins/warningsMixin';
 
 export default defineComponent({
-  name: "stock-generator",
+  name: 'stock-generator',
 
   mixins: [stockMixin, warningsMixin],
 
@@ -157,9 +127,7 @@ export default defineComponent({
 
   computed: {
     computedChosenCarTypes() {
-      return new Set<string>(
-        this.chosenCarTypes.slice().sort((c1, c2) => (c1 > c2 ? 1 : -1)),
-      );
+      return new Set<string>(this.chosenCarTypes.slice().sort((c1, c2) => (c1 > c2 ? 1 : -1)));
     },
   },
 
@@ -186,38 +154,27 @@ export default defineComponent({
       const generatedChosenStockList = this.chosenCargoTypes.reduce(
         (acc, type) => {
           this.store.stockData?.generator.cargo[type]
-            .filter((c) => !this.excludedCarTypes.includes(c.split(":")[0]))
+            .filter((c) => !this.excludedCarTypes.includes(c.split(':')[0]))
             .forEach((c) => {
-              const [type, cargoType] = c.split(":");
+              const [type, cargoType] = c.split(':');
 
-              const carWagonObjs = this.store.carDataList.filter((cw) =>
-                cw.type.startsWith(type),
-              );
+              const carWagonObjs = this.store.carDataList.filter((cw) => cw.type.startsWith(type));
               const cargoObjs = [] as (ICargo | undefined)[];
 
               if (!cargoType || empty) cargoObjs.push(undefined);
-              else if (cargoType == "all")
-                cargoObjs.push(...carWagonObjs[0]!.cargoList);
-              else
-                cargoObjs.push(
-                  carWagonObjs[0]?.cargoList.find(
-                    (cargo) => cargo.id == cargoType,
-                  ),
-                );
+              else if (cargoType == 'all') cargoObjs.push(...carWagonObjs[0]!.cargoList);
+              else cargoObjs.push(carWagonObjs[0]?.cargoList.find((cargo) => cargo.id == cargoType));
 
               carWagonObjs.forEach((cw) => {
                 cargoObjs.forEach((cargoObj) => {
-                  const chosenStock = acc.find((a) =>
-                    a.constructionType.includes(cw.constructionType),
-                  );
+                  const chosenStock = acc.find((a) => a.constructionType.includes(cw.constructionType));
 
                   if (!chosenStock)
                     acc.push({
                       constructionType: cw.constructionType,
                       carPool: [{ carWagon: cw, cargo: cargoObj }],
                     });
-                  else
-                    chosenStock.carPool.push({ carWagon: cw, cargo: cargoObj });
+                  else chosenStock.carPool.push({ carWagon: cw, cargo: cargoObj });
                 });
               });
             });
@@ -227,7 +184,7 @@ export default defineComponent({
         [] as {
           constructionType: string;
           carPool: { carWagon: ICarWagon; cargo?: ICargo }[];
-        }[],
+        }[]
       );
 
       let bestGeneration: { stockList: IStock[]; value: number } = {
@@ -236,31 +193,19 @@ export default defineComponent({
       };
 
       for (let i = 0; i < 10; i++) {
-        const headingLoco = this.store.stockList[0]?.isLoco
-          ? this.store.stockList[0]
-          : undefined;
+        const headingLoco = this.store.stockList[0]?.isLoco ? this.store.stockList[0] : undefined;
         this.store.stockList.length = headingLoco ? 1 : 0;
 
-        const maxMass =
-          this.store.acceptableMass > 0
-            ? Math.min(this.store.acceptableMass, this.maxMass)
-            : this.maxMass;
+        const maxMass = this.store.acceptableMass > 0 ? Math.min(this.store.acceptableMass, this.maxMass) : this.maxMass;
 
         let exceeded = false;
 
         while (!exceeded) {
-          const randomStockType =
-            generatedChosenStockList[
-              ~~(Math.random() * generatedChosenStockList.length)
-            ];
-          const { carWagon, cargo } =
-            randomStockType.carPool[
-              ~~(Math.random() * randomStockType.carPool.length)
-            ];
+          const randomStockType = generatedChosenStockList[~~(Math.random() * generatedChosenStockList.length)];
+          const { carWagon, cargo } = randomStockType.carPool[~~(Math.random() * randomStockType.carPool.length)];
 
           if (
-            this.store.totalMass + (cargo?.totalMass || carWagon.mass) >
-              maxMass ||
+            this.store.totalMass + (cargo?.totalMass || carWagon.mass) > maxMass ||
             this.store.totalLength + carWagon.length > this.maxLength ||
             this.store.stockList.length > this.maxCarCount
           ) {
@@ -271,10 +216,7 @@ export default defineComponent({
           this.addCarWagon(carWagon, cargo);
         }
 
-        const currentGenerationValue =
-          this.store.totalLength +
-          this.store.totalMass +
-          this.store.stockList.length;
+        const currentGenerationValue = this.store.totalLength + this.store.totalMass + this.store.stockList.length;
 
         if (bestGeneration.value < currentGenerationValue) {
           bestGeneration.stockList = this.store.stockList;
@@ -283,12 +225,11 @@ export default defineComponent({
       }
 
       this.store.stockList = bestGeneration.stockList;
-      this.store.stockSectionMode = "stock-list";
+      this.store.stockSectionMode = 'stock-list';
     },
 
     previewCar(type: string) {
-      const c =
-        this.store.carDataList.find((c) => c.type.startsWith(type)) || null;
+      const c = this.store.carDataList.find((c) => c.type.startsWith(type)) || null;
 
       this.store.chosenVehicle = c;
       this.store.chosenCar = c;
@@ -301,38 +242,33 @@ export default defineComponent({
     toggleCargoChosen(cargoType: string, vehicles: string[]) {
       if (this.chosenCargoTypes.includes(cargoType)) {
         vehicles.forEach((v) => {
-          const [type] = v.split(":");
+          const [type] = v.split(':');
           this.chosenCarTypes.splice(this.chosenCarTypes.indexOf(type), 1);
         });
 
-        this.chosenCargoTypes.splice(
-          this.chosenCargoTypes.indexOf(cargoType),
-          1,
-        );
+        this.chosenCargoTypes.splice(this.chosenCargoTypes.indexOf(cargoType), 1);
         return;
       }
 
       this.chosenCargoTypes.push(cargoType);
 
       vehicles.forEach((v) => {
-        const [type] = v.split(":");
+        const [type] = v.split(':');
         this.chosenCarTypes.push(type);
       });
     },
 
     toggleCarExclusion(type: string) {
-      if (!this.excludedCarTypes.includes(type))
-        this.excludedCarTypes.push(type);
-      else
-        this.excludedCarTypes = this.excludedCarTypes.filter((c) => c != type);
+      if (!this.excludedCarTypes.includes(type)) this.excludedCarTypes.push(type);
+      else this.excludedCarTypes = this.excludedCarTypes.filter((c) => c != type);
     },
   },
 });
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/global.scss";
-@import "../../styles/tab.scss";
+@import '../../styles/global.scss';
+@import '../../styles/tab.scss';
 
 .generator_cargo,
 .generator_vehicles {
@@ -350,14 +286,7 @@ export default defineComponent({
 
     background-color: $secondaryColor;
 
-    &[data-chosen="true"] {
-      background-color: $accentColor;
-      color: black;
-
-      box-shadow: 0 0 5px 1px $accentColor;
-    }
-
-    &[data-excluded="true"] {
+    &[data-excluded='true'] {
       background-color: gray;
       box-shadow: none;
     }