Meld solver UI updates and backend fixes

xiv-gear-planner · Oct 17, 2024 · 216de40 · 216de40
1 parent bd440d0
commit 216de40
Show file tree

Hide file tree

Showing 5 changed files with 131 additions and 128 deletions.
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
diff --git a/packages/common-ui/styles/common.less b/packages/common-ui/styles/common.less
@@ -1344,114 +1344,6 @@ h1.js-warning {
   text-decoration: underline 2px double #ff0000;
 }
 
-sim-result-detail-display {
-  margin: auto;
-  display: block;
-  width: fit-content;
-}
-
-meld-solver-result-dialog { .meld-solver-result {
-    display: flex;
-    flex-direction: row;
-
-    span.arrow {
-      margin: 20px;
-      display: inline-flex;
-      align-items: flex-start;
-      font-size: xx-large;
-    }
-  }
-
-  .meld-solver-result-set {
-    width: 40%;
-    padding: 0;
-    margin: 0;
-
-    .meld-solver-result-set-sim {
-      color: color-mix(in srgb, currentColor var(--sim-color-mix-percent), color-mix(in hsl, #00ff00 var(--sim-result-relative, 50%), #ff0000));
-    }
-    .sim-best {
-      font-weight: bold;
-    }
-  }
-  ul {
-    display: flex;
-    flex-direction: column;
-    li {
-      float: left;
-      display: flex;
-      flex-direction: row;
-      width: 100%;
-      margin-top: 5px;
-      margin-bottom: 5px;
-    }
-    list-style-type: none;
-    padding-inline-start: 0px;
-  }
-  .meld-solver-result-materia-entry {
-    .standard-border-radius;
-    display: flex;
-    flex-direction: row;
-    position: relative;
-    margin: 1%;
-    margin-right: 5%;
-    width: 80%;
-    height: fit-content;
-    font-weight: normal;
-    vertical-align: middle;
-    box-sizing: border-box;
-    float: left;
-
-    --image-size: 20px;
-
-    div.meld-solver-result-image {
-      overflow: clip;
-      width: var(--image-size);
-      height: var(--image-size);
-      padding: 0;
-      margin: 0;
-      margin-right: 3%;
-      //border: 1px #3c623c solid;
-      border-radius: 100%;
-      display: inline-block;
-      vertical-align: middle;
-    }
-
-    img {
-      width: 100%;
-      height: 100%;
-      display: block;
-    }
-
-    .meld-solver-result-materia-entry-text {
-      width: 100%;
-      text-align: left;
-      display: flex;
-      flex-direction: row;
-      .meld-solver-result-materia-entry-count {
-        width: 35%;
-        margin-left: 5%;
-        text-align: left;
-      }
-      .meld-solver-result-materia-entry-stat {
-        width: 60%;
-        text-align: left;
-      }
-    }
-  }
-  .meld-solver-result-materia-entry-delta {
-    width: 20%;
-    text-align: left;
-  }
-
-  .meld-solver-result-materia-entry-zero {
-    color: var(--border-color-default);
-    //background-color: var(--scrollbar-bg);
-  }
-  .meld-solver-result-materia-entry-diff {
-    background-color: var(--scrollbar-bg);
-  }
-}
 
 table all-slot-materia-manager {
   //width: max-content;

diff --git a/packages/frontend/src/scripts/components/meld_solver_modal.ts b/packages/frontend/src/scripts/components/meld_solver_modal.ts
@@ -1,4 +1,10 @@
-import { FieldBoundCheckBox, FieldBoundDataSelect, FieldBoundFloatField, makeActionButton } from "@xivgear/common-ui/components/util";
+import {
+    FieldBoundCheckBox,
+    FieldBoundDataSelect,
+    FieldBoundFloatField,
+    labelFor,
+    makeActionButton
+} from "@xivgear/common-ui/components/util";
 import { CharacterGearSet } from "@xivgear/core/gear";
 import { GearPlanSheetGui } from "./sheet";
 import { SimResult, Simulation } from "@xivgear/core/sims/sim_types";
@@ -32,7 +38,7 @@ export class MeldSolverDialog extends BaseModal {
         this.headerText = 'Meld Solver';
         this.form = document.createElement("form");
         this.form.method = 'dialog';
-        this.inner.style.maxWidth = "25%"; // idk why this doesn't work in common-css but it don't.
+        // this.inner.style.maxWidth = "25%"; // idk why this doesn't work in common-css but it don't.
 
         this.classList.add('meld-solver-area');
         this.descriptionText = document.createElement('div');
@@ -200,9 +206,6 @@ class MeldSolverSettingsMenu extends HTMLDivElement {
             sets: undefined, // Not referenced in UI
         }
 
-        const targetGcdText = document.createElement('span');
-        targetGcdText.textContent = "Target GCD: ";
-        targetGcdText.classList.add('meld-solver-settings');
 
         this.targetGcdInput = new FieldBoundFloatField(this.gearsetGenSettings, 'targetGcd', {
             postValidators: [ctx => {
@@ -220,20 +223,21 @@ class MeldSolverSettingsMenu extends HTMLDivElement {
             }]
         });
 
+        this.useTargetGcdCheckBox = new FieldBoundCheckBox(this.gearsetGenSettings, 'useTargetGcd');
+        this.useTargetGcdCheckBox.classList.add('meld-solver-settings');
         this.targetGcdInput.pattern = '\\d\\.\\d\\d?';
         this.targetGcdInput.title = 'Solve for the best set with this GCD'
         this.targetGcdInput.classList.add('meld-solver-target-gcd-input');
         this.targetGcdInput.disabled = true;
 
-        this.useTargetGcdCheckBox = new FieldBoundCheckBox(this.gearsetGenSettings, 'useTargetGcd');
-        this.useTargetGcdCheckBox.classList.add('meld-solver-settings');
-
-        this.overwriteMateriaText = document.createElement('span');
-        this.overwriteMateriaText.textContent = "Overwrite existing materia?";
-        this.overwriteMateriaText.classList.add('meld-solver-settings');
+        const targetGcdText = labelFor("Target GCD: ", this.useTargetGcdCheckBox);
+        targetGcdText.textContent = "Target GCD: ";
+        targetGcdText.classList.add('meld-solver-settings');
 
         this.overwriteMateriaCheckbox = new FieldBoundCheckBox(this.gearsetGenSettings, 'overwriteExistingMateria');
         this.overwriteMateriaCheckbox.classList.add('meld-solver-settings');
+        this.overwriteMateriaText = labelFor("Overwrite existing materia?", this.overwriteMateriaCheckbox);
+        this.overwriteMateriaText.classList.add('meld-solver-settings');
 
         const simText = document.createElement('span');
         simText.textContent = "Sim: ";
@@ -337,8 +341,8 @@ class MeldSolverConfirmationDialog extends BaseModal {
         const form = document.createElement("form");
         form.method = 'dialog';
         form.classList.add('meld-solver-result');
-        this.inner.style.maxWidth = "35%";
-        this.inner.style.width = "35%"
+        // this.inner.style.maxWidth = "35%";
+        // this.inner.style.width = "35%"
         //this.inner.style.maxWidth = "4%"; // idk why this doesn't work in common-css but it don't.
 
         if (!newSet) {
@@ -428,21 +432,19 @@ class MeldSolverConfirmationDialog extends BaseModal {
             }
 
             const delta = newTotal - oldTotal
-            const deltaElem = document.createElement('span');
+            const deltaElem = document.createElement('div');
             deltaElem.classList.add('meld-solver-result-materia-entry-delta');
-            deltaElem.textContent = delta == 0 ? "" : `(${delta > 0 ? "+" : ""}${delta})`;
+            deltaElem.textContent = delta === 0 ? "" : `(${delta > 0 ? "+" : ""}${delta})`;
 
             oldItem.appendChild(oldEntry);
             newItem.appendChild(newEntry);
-            newItem.appendChild(deltaElem)
+            newItem.appendChild(deltaElem);
             oldList.appendChild(oldItem);
             newList.appendChild(newItem);
         }
 
         oldSet.appendChild(oldList);
         newSet.appendChild(newList);
-        oldSet.style.width = "40%";
-        newSet.style.width = "40%";
         return [oldSet, newSet];
     }
 

diff --git a/packages/frontend/src/style.less b/packages/frontend/src/style.less
@@ -7,6 +7,7 @@ custom-item-popup, custom-food-popup {
         &input {
           width: unset !important;
         }
+
         box-sizing: border-box;
         max-width: 100%;
         //border: var(--soft-border);
@@ -38,4 +39,110 @@ custom-item-popup, custom-food-popup {
     margin-left: auto;
     margin-right: auto;
   }
+}
+
+sim-result-detail-display {
+  margin: auto;
+  display: block;
+  width: fit-content;
+}
+
+meld-solver-result-dialog {
+  .meld-solver-result {
+    display: flex;
+    flex-direction: row;
+
+    span.arrow {
+      margin: 20px;
+      font-size: xx-large;
+    }
+  }
+
+  .meld-solver-result-set {
+    width: 40%;
+    padding: 0;
+    margin: 0;
+
+    .meld-solver-result-set-sim {
+      color: color-mix(in srgb, currentColor var(--sim-color-mix-percent), color-mix(in hsl, #00ff00 var(--sim-result-relative, 50%), #ff0000));
+    }
+
+    .sim-best {
+      font-weight: bold;
+    }
+  }
+
+  ul {
+    display: flex;
+    flex-direction: column;
+
+    li {
+      display: flex;
+      margin-top: 5px;
+      margin-bottom: 5px;
+    }
+
+    list-style-type: none;
+    padding-inline-start: 0px;
+  }
+
+  .meld-solver-result-materia-entry {
+    display: contents;
+
+    --image-size: 25px;
+
+    div.meld-solver-result-image {
+      overflow: clip;
+      width: var(--image-size);
+      height: var(--image-size);
+      margin-right: 3%;
+      border-radius: 100%;
+    }
+
+    img {
+      //width: 100%;
+      height: 100%;
+      display: block;
+      aspect-ratio: 1;
+    }
+
+    .meld-solver-result-materia-entry-text {
+      width: 100%;
+      text-align: left;
+      display: flex;
+      flex-direction: row;
+
+      .meld-solver-result-materia-entry-count {
+        width: 35%;
+        margin-left: 5%;
+        text-align: left;
+      }
+
+      .meld-solver-result-materia-entry-stat {
+        width: 60%;
+        text-align: left;
+      }
+    }
+  }
+
+  .meld-solver-result-materia-entry-delta {
+    width: 20%;
+    text-align: left;
+  }
+
+  .meld-solver-result-materia-entry-zero {
+    color: var(--border-color-default);
+    //background-color: var(--scrollbar-bg);
+  }
+
+  .meld-solver-result-materia-entry-diff {
+    background-color: var(--scrollbar-bg);
+  }
+}
+
+meld-solver-area, meld-solver-result-dialog {
+  .modal-inner {
+    width: 500px;
+    max-width: 95vw;
+  }
 }
diff --git a/packages/frontend/webpack.config.js b/packages/frontend/webpack.config.js
@@ -5,7 +5,7 @@ module.exports = (env, argv) => {
     const prod = argv.mode === 'production';
     return {
         entry: [path.resolve(__dirname, "./src/scripts/main.ts"),
-                path.resolve(__dirname, "./src/scripts/workers/worker_main.ts"),
+                // path.resolve(__dirname, "./src/scripts/workers/worker_main.ts"),
         ],
         output: {
             path: path.resolve(__dirname + "/dist"),