From 336762ffb013997d64a8a311274bc59867fe5895 Mon Sep 17 00:00:00 2001
From: hppeng <hppeng>
Date: Sun, 24 Jul 2022 12:35:06 -0700
Subject: [PATCH] Compactify UI

- remove optimize str/dex button
- cram all the equip inputs together
- highlight sharing buttons
---
 builder/index_full.html | 61 +++++++++++++++++------------------------
 css/sq2bs.css           | 27 ++++++++++++------
 js/builder_graph.js     | 14 ++++------
 3 files changed, 49 insertions(+), 53 deletions(-)

diff --git a/builder/index_full.html b/builder/index_full.html
index fcf508e..5145110 100644
--- a/builder/index_full.html
+++ b/builder/index_full.html
@@ -36,20 +36,20 @@
         <hr/>
         <a href = "https://discord.gg/CGavnAnerv" target = "_blank"><img src = "../media/icons/discord.png" alt = "WB Discord" title = "WB Discord"><b>WB Discord</b></a>
     </div>
-    <div class="container-fluid me-4" style="max-width: 95%;">
+    <div class="container-fluid overall-box">
         <!-- REMOVE THIS DIV AT SOME POINT. -->
         <div class = "row scaled-font mx-auto" id = "discord-banner-dev">
                 <div class = "col text-center item-title">Join the <a class = "link" href = "https://discord.gg/CGavnAnerv" target = "_blank">discord</a> today to suggest new features, submit bug reports, and hangout/talk to devs!</div>
         </div>
-        <div class="row h-100 gx-lg-5 gy-3 mx-2 mx-lg-3 py-3">
+        <div class="row h-100 gx-lg-5 gy-3 mx-2 mx-lg-3 py-3 gx-0">
             <div class="col-xl-6">
-                <div class="row row-cols-1 mb-3 gy-4">
+                <div class="row row-cols-1 mb-3 gy-3">
                     <div class="col">
-                        <div class="row row-cols-1 row-cols-xl-2 rounded gy-4 gx-5 justify-content-center">
+                        <div class="row row-cols-1 row-cols-xl-2 dark-shadow dark-6 gy-1 justify-content-center">
                             <div class="col-auto rounded order-xl-0 order-0">
-                                <div class="row h-100 dark-shadow dark-6 rounded" id="helmet-dropdown">
+                                <div class="row h-100 px-1" id="helmet-dropdown">
                                     <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="helmet-img-loc">
-                                        <img id="helmet-img" class="img-fluid rounded" src="../media/items/new/generic-helmet.png">
+                                        <img id="helmet-img" class="img-fluid rounded item-img" src="../media/items/new/generic-helmet.png">
                                     </div>
                                     <div class="col-3">
                                         <div class="row row-cols-1 h-100 align-items-center">
@@ -74,7 +74,7 @@
                                 </div>
                             </div>
                             <div class="col-auto order-xl-0 order-1">
-                                <div class="row h-100 dark-shadow dark-6 rounded" id="ring1-dropdown">
+                                <div class="row h-100 px-1" id="ring1-dropdown">
                                     <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="ring1-img-loc">
                                         <img id="ring1-img" class="img-fluid rounded" src="../media/items/new/generic-ring.png">
                                     </div>
@@ -94,14 +94,13 @@
                                                 <input class="equipment-input text-light form-control" id="ring1-choice" name="ring1-choice" placeholder="No ring" value="" tabindex="2"/>
                                             </div>
                                             <div class="col d-flex justify-content-end" style="height: 100%;">
-                                                <!-- <input class="equipment-input text-light form-control" type="text" id="ring1-powder" name="ring1-powder" placeholder="no powders" tabindex="2"/> -->
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                             <div class="col-auto order-xl-0 order-0">
-                                <div class="row h-100 dark-shadow dark-6 rounded" id="chestplate-dropdown">
+                                <div class="row h-100 px-1" id="chestplate-dropdown">
                                     <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="chestplate-img-loc">
                                         <img id="chestplate-img" class="img-fluid rounded" src="../media/items/new/generic-chestplate.png">
                                     </div>
@@ -128,7 +127,7 @@
                                 </div>
                             </div>
                             <div class="col-auto order-xl-0 order-1">
-                                <div class="row h-100 dark-shadow dark-6 rounded" id="ring2-dropdown">
+                                <div class="row h-100 px-1" id="ring2-dropdown">
                                     <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="ring2-img-loc">
                                         <img id="ring2-img" class="img-fluid rounded" src="../media/items/new/generic-ring.png">
                                     </div>
@@ -154,7 +153,7 @@
                                 </div>
                             </div>
                             <div class="col-auto order-xl-0 order-0">
-                                <div class="row h-100 dark-shadow dark-6 rounded" id="leggings-dropdown">
+                                <div class="row h-100 px-1" id="leggings-dropdown">
                                     <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="leggings-img-loc">
                                         <img id="leggings-img" class="img-fluid rounded" src="../media/items/new/generic-leggings.png">
                                     </div>
@@ -181,7 +180,7 @@
                                 </div>
                             </div>
                             <div class="col-auto order-xl-0 order-1">
-                                <div class="row h-100 dark-shadow dark-6 rounded" id="bracelet-dropdown">
+                                <div class="row h-100 px-1" id="bracelet-dropdown">
                                     <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="bracelet-img-loc">
                                         <img id="bracelet-img" class="img-fluid rounded" src="../media/items/new/generic-bracelet.png">
                                     </div>
@@ -208,7 +207,7 @@
                                 </div>
                             </div>
                             <div class="col-auto order-xl-0 order-0">
-                                <div class="row h-100 dark-shadow dark-6 rounded" id="boots-dropdown">
+                                <div class="row h-100 px-1" id="boots-dropdown">
                                     <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="boots-img-loc">
                                         <img id="boots-img" class="img-fluid rounded" src="../media/items/new/generic-boots.png">
                                     </div>
@@ -235,7 +234,7 @@
                                 </div>
                             </div>
                             <div class="col-auto order-xl-0 order-1">
-                                <div class="row h-100 dark-shadow dark-6 rounded" id="necklace-dropdown">
+                                <div class="row h-100 px-1" id="necklace-dropdown">
                                     <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="necklace-img-loc">
                                         <img id="necklace-img" class="img-fluid rounded" src="../media/items/new/generic-necklace.png">
                                     </div>
@@ -261,7 +260,7 @@
                                 </div>
                             </div>
                             <div class="col-auto order-xl-0 order-1">
-                                <div class="row h-100 dark-shadow dark-6 rounded" id='weapon-dropdown'>
+                                <div class="row h-100 px-1" id='weapon-dropdown'>
                                     <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="weapon-img-loc">
                                         <img id="weapon-img" class="img-fluid rounded" src="../media/items/new/generic-dagger.png">
                                     </div>
@@ -288,28 +287,22 @@
                                 </div>
                             </div>
                             <div class="col-auto order-xl-0 order-1">
-                                <div class="row h-100 dark-shadow dark-6 rounded">
+                                <div class="row h-100 px-1">
                                     <div class="col">
-                                        <div class="row align-items-center">
-                                            <div class="col-3 text-nowrap fw-bold scaled-font">
+                                        <div class="row align-items-center justify-content-left">
+                                            <div class="col-auto text-nowrap fw-bold scaled-font">
                                                 Level:
                                             </div>
-                                            <div class="col d-flex justify-content-end">
+                                            <div class="col d-flex px-1">
                                                 <input class="equipment-input text-light form-control form-control-sm" id="level-choice" name="level-choice" value="106" placeholder="Build level" value="" tabindex="2"/>
                                             </div>
-                                            <div class="col-auto px-1 text-nowrap scaled-font">
-                                                <button class="button fw-bold text-light dark-5 scaled-font rounded" id="reset-button" onclick="resetFields()">Reset</button>
+                                            <div class="col-auto px-1 scaled-font">
+                                                <button class="button py-0 fw-bold text-light dark-5 scaled-font rounded" id="reset-button" onclick="resetFields()">Reset</button>
                                             </div>
                                         </div>
-                                        <div class="row align-items-center justify-content-center my-1">
-                                            <div class="row align-items-center">
-                                                <div class="col-auto px-1 text-nowrap scaled-font">
-                                                    <button class="border-dark text-light dark-5 scaled-font rounded" id=copy-button onclick="copyBuild()">Copy short</button>
-                                                </div>
-                                                <div class="col-auto px-1 text-nowrap scaled-font">
-                                                    <button class="border-dark text-light dark-5 scaled-font rounded" id=share-button onclick="shareBuild(player_build)">Copy for sharing</button>
-                                                </div>
-                                            </div>
+                                        <div class="row align-items-left justify-content-left my-1">
+                                            <button class="col-auto mx-1 px-1 py-0 border-info text-light dark-5 scaled-font rounded fake-button" id=copy-button onclick="copyBuild()">Copy short</button>
+                                            <button class="col-auto mx-1 px-1 py-0 border-info text-light dark-5 scaled-font rounded fake-button" id=share-button onclick="shareBuild(player_build)">Copy for sharing</button>
                                         </div>
                                     </div>
                                 </div>
@@ -390,12 +383,9 @@
                                             </div>
                                         </div>
                                     </div>
-                                    <div class="col-12 text-center gx-2">
-                                        <button class = "button fw-bold text-light dark-5 rounded scaled-font" id = "optimize-strdex" onclick = "optimizeStrDex()">Optimize Str/Dex</button>
-                                    </div>
                                 </div>
                             </div>
-                            <div class="col text-center">
+                            <div class="col text-center py-1">
                                 <div id="summary-box"></div>
                                 <div id="err-box"></div>
                                 <div id="stack-box"></div>
@@ -408,8 +398,7 @@
                         </div>
                     </div>
                     <div class="col">
-                        <div class="row row-cols-1 gy-4">
-                            
+                        <div class="row row-cols-1 gy-3">
                             <div class="col mb-1 text-center scaled-font dark-5 rounded dark-shadow">
                                 <div class="row row-cols-1 justify-content-center">
                                     <div class="col fw-bold dark-4 rounded-top">
diff --git a/css/sq2bs.css b/css/sq2bs.css
index 59e4e99..c5ac672 100644
--- a/css/sq2bs.css
+++ b/css/sq2bs.css
@@ -7,7 +7,6 @@
 }
 /* builder containers */
 
-
 .slider {
     -webkit-appearance: none;
     background: #AAAAAA;
@@ -46,7 +45,6 @@ input[type=range]:focus {
     outline: none; /* Removes the border. */
 }
 
-
 /* equipment field specifics */
 /* inputs and dropdowns */
 .form-control {
@@ -174,11 +172,11 @@ input.equipment-input {
 }
 
 .scaled-item-icon {
-    width: 8rem;
+    width: 6rem;
 }
 
 .scaled-item-icon img {
-    width: 6.5rem;
+    width: 5.5rem;
 }
 
 .scaled-bckgrd {
@@ -190,10 +188,18 @@ input.equipment-input {
     width: 6.5rem;
 }
 
+.overall-box {
+    max-width: 95%;
+}
+
 @media screen and (min-width: 1200px) and (max-width: 1400px) {
     :root {
         --scaled-fontsize: 1rem;
     }
+    .overall-box {
+        padding-left: var(--sidebar-width);
+        max-width: 100%;
+    }
     .scaled-font {
         font-size: 1rem;
     }
@@ -219,11 +225,11 @@ input.equipment-input {
     }
 
     .scaled-item-icon {
-        width: 3.2rem;
+        width: 2.6rem;
     }
 
     .scaled-item-icon img {
-        width: 2.8rem;
+        width: 2.2rem;
     }
 
     .scaled-bckgrd {
@@ -248,6 +254,11 @@ input.equipment-input {
     :root {
         --scaled-fontsize: 1rem;
     }
+    .overall-box {
+        padding-left: var(--sidebar-width);
+        max-width: 100%;
+    }
+
     .scaled-font { 
         font-size: 1rem;
     }
@@ -273,11 +284,11 @@ input.equipment-input {
     }
 
     .scaled-item-icon {
-        width: 4rem;
+        width: 3.2rem;
     }
     
     .scaled-item-icon img {
-        width: 3.5rem;
+        width: 2.7rem;
     }
 
     .scaled-bckgrd {
diff --git a/js/builder_graph.js b/js/builder_graph.js
index b2ed8cb..cc0255c 100644
--- a/js/builder_graph.js
+++ b/js/builder_graph.js
@@ -702,7 +702,7 @@ class DisplayBuildWarningsNode extends ComputeNode {
                 input_map.get('def'),
                 input_map.get('agi')
             ];
-        let skp_effects = ["% more damage dealt.","% chance to crit.","% spell cost reduction.","% less damage taken.","% chance to dodge."];
+        let skp_effects = ["% damage","% crit","% cost red.","% resist","% dodge"];
         let total_assigned = 0;
         for (let i in skp_order){ //big bren
             const assigned = skillpoints[i] - base_totals[i] + min_assigned[i]
@@ -724,20 +724,16 @@ class DisplayBuildWarningsNode extends ComputeNode {
 
         let summarybox = document.getElementById("summary-box");
         summarybox.textContent = "";
-        let skpRow = document.createElement("p");
 
-        let remainingSkp = document.createElement("p");
-        remainingSkp.classList.add("scaled-font");
-        let remainingSkpTitle = document.createElement("b");
-        remainingSkpTitle.textContent = "Assigned " + total_assigned + " skillpoints. Remaining skillpoints: ";
+        let remainingSkp = make_elem("p", ['scaled-font', 'my-0']);
+        let remainingSkpTitle = make_elem("b", [], { textContent: "Assigned " + total_assigned + " skillpoints. Remaining skillpoints: " });
         let remainingSkpContent = document.createElement("b");
         remainingSkpContent.textContent = "" + (levelToSkillPoints(build.level) - total_assigned);
         remainingSkpContent.classList.add(levelToSkillPoints(build.level) - total_assigned < 0 ? "negative" : "positive");
 
-        remainingSkp.appendChild(remainingSkpTitle);
-        remainingSkp.appendChild(remainingSkpContent);
+        remainingSkp.append(remainingSkpTitle);
+        remainingSkp.append(remainingSkpContent);
 
-        summarybox.append(skpRow);
         summarybox.append(remainingSkp);
         if(total_assigned > levelToSkillPoints(build.level)){
             let skpWarning = document.createElement("span");