Working armor special sliders (don't reset properly i think)

builder/index.html

@@ -944,27 +944,27 @@
                                     <div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1">
                                         <div class="row row-cols-2 row-cols-xl-0 text-nowrap justify-content-center">
                                             <div class="col-auto p-1">
-                                                <button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="vanish-boost" onclick="updateBoosts('vanish-boost')">
+                                                <button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="vanish-boost" onclick="update_boosts('vanish-boost')">
                                                     Vanish (+80%)
                                                 </button>
                                             </div>
                                             <div class="col-auto p-1">
-                                                <button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="warscream-boost" onclick="updateBoosts('warscream-boost')">
+                                                <button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="warscream-boost" onclick="update_boosts('warscream-boost')">
                                                     War Scream (+10%)
                                                 </button>
                                             </div>
                                             <div class="col-auto p-1">
-                                                <button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="yourtotem-boost" onclick="updateBoosts('yourtotem-boost')">
+                                                <button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="yourtotem-boost" onclick="update_boosts('yourtotem-boost')">
                                                     Your Totem (+35%)
                                                 </button>
                                             </div>
                                             <div class="col-auto p-1">
-                                                <button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="allytotem-boost" onclick="updateBoosts('allytotem-boost')">
+                                                <button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="allytotem-boost" onclick="update_boosts('allytotem-boost')">
                                                     Ally Totem (+15%)
                                                 </button>
                                             </div>
                                             <div class="col-auto p-1">
-                                                <button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="bash-boost" onclick="updateBoosts('bash-boost')">
+                                                <button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="bash-boost" onclick="update_boosts('bash-boost')">
                                                     Bash (+50%)
                                                 </button>
                                             </div>
@@ -1031,7 +1031,7 @@
                                                 Rage (Passive)
                                             </div>
                                             <div class="col">
-                                                <input type = "range" class = "e_slider" id = "str_boost_armor" name = "str-boost-armor" autocomplete = "off" min = '0' max = '400' value = '0' step = '1' onchange = "updateArmorPowderSpecials('str_boost_armor')">
+                                                <input type = "range" class = "e_slider" id = "str_boost_armor" name = "str-boost-armor" autocomplete = "off" min = '0' max = '400' value = '0' step = '1' onchange = "update_armor_powder_specials('str_boost_armor')">
                                                 <input type="text" id="str_boost_armor_prev" autocomplete = "off"  value="0" style = "display:none;">
                                                 <label id = "str_boost_armor_label" for="str-boost-armor">% Earth Dmg Boost: 0</label>
                                             </div>
@@ -1075,7 +1075,7 @@
                                                 Kill Streak (Passive)
                                             </div>
                                             <div class="col">
-                                                <input type = "range" class = "t_slider" id = "dex_boost_armor" name = "dex-boost-armor" autocomplete = "off" min = '0' max = '200' value = '0' step = '1' onchange = "updateArmorPowderSpecials('dex_boost_armor')">
+                                                <input type = "range" class = "t_slider" id = "dex_boost_armor" name = "dex-boost-armor" autocomplete = "off" min = '0' max = '200' value = '0' step = '1' onchange = "update_armor_powder_specials('dex_boost_armor')">
                                                 <input type="text" id="dex_boost_armor_prev" autocomplete = "off"  value="0" style = "display:none;">
                                                 <label id = "dex_boost_armor_label" for="dex-boost-armor">% Thunder Dmg Boost: 0</label>
                                             </div>
@@ -1119,7 +1119,7 @@
                                                 Concentration (Passive)
                                             </div>
                                             <div class="col">
-                                                <input type = "range" class = "w_slider" id = "int_boost_armor" name = "dex-boost-armor" autocomplete = "off" min = '0' max = '150' value = '0' step = '1' onchange = "updateArmorPowderSpecials('int_boost_armor')">
+                                                <input type = "range" class = "w_slider" id = "int_boost_armor" name = "dex-boost-armor" autocomplete = "off" min = '0' max = '150' value = '0' step = '1' onchange = "update_armor_powder_specials('int_boost_armor')">
                                                 <input type="text" id="int_boost_armor_prev" autocomplete = "off"  value="0" style = "display:none;">
                                                 <label id = "int_boost_armor_label" for="dex-boost-armor">% Water Dmg Boost: 0</label>
                                             </div>
@@ -1163,7 +1163,7 @@
                                                 Endurance (Passive)
                                             </div>
                                             <div class="col">
-                                                <input type = "range" class = "f_slider" id = "def_boost_armor" name = "def-boost-armor" autocomplete = "off" min = '0' max = '200' value = '0' step = '1' onchange = "updateArmorPowderSpecials('def_boost_armor')">
+                                                <input type = "range" class = "f_slider" id = "def_boost_armor" name = "def-boost-armor" autocomplete = "off" min = '0' max = '200' value = '0' step = '1' onchange = "update_armor_powder_specials('def_boost_armor')">
                                                 <input type="text" id="def_boost_armor_prev" autocomplete = "off"  value="0" style = "display:none;">
                                                 <label id = "def_boost_armor_label" for="def-boost-armor">% Fire Dmg Boost: 0</label>
                                             </div>
@@ -1207,7 +1207,7 @@
                                                 Dodge (Passive)
                                             </div>
                                             <div class="col">
-                                                <input type = "range" class = "a_slider" id = "agi_boost_armor" name = "agi-boost-armor" autocomplete = "off" min = '0' max = '150' value = '0' step = '1' onchange = "updateArmorPowderSpecials('agi_boost_armor')">
+                                                <input type = "range" class = "a_slider" id = "agi_boost_armor" name = "agi-boost-armor" autocomplete = "off" min = '0' max = '150' value = '0' step = '1' onchange = "update_armor_powder_specials('agi_boost_armor')">
                                                 <input type="text" id="agi_boost_armor_prev" autocomplete = "off"  value="0" style = "display:none;">
                                                 <label id = "agi_boost_armor_label" for="agi-boost-armor">% Air Dmg Boost: 0</label>
                                             </div>

js/builder_graph.js

@@ -1,18 +1,42 @@
-let boosts_node;
+let armor_powder_node = new (class extends ComputeNode {
-/* Updates all spell boosts
+    constructor() { super('builder-armor-powder-input'); }
-*/
+
-function updateBoosts(buttonId) {
+    compute_func(input_map) {
-    let elem = document.getElementById(buttonId);
+        let damage_boost = 0;
-    if (elem.classList.contains("toggleOn")) {
+        let def_boost = 0;
-        elem.classList.remove("toggleOn");
+        let statMap = new Map();
-    } else {
+        for (const [e, elem] of zip2(skp_elements, skp_order)) {
-        elem.classList.add("toggleOn");
+            let val = parseInt(document.getElementById(elem+"_boost_armor").value);
+            statMap.set(e+'DamPct', val);
         }
-    boosts_node.mark_dirty();
+        return statMap;
-    boosts_node.update();
+    }
+})().update();
+
+/* Updates PASSIVE powder special boosts (armors)
+*/
+function update_armor_powder_specials(elem_id) {
+    //we only update the powder special + external stats if the player has a build
+    let wynn_elem = elem_id.split("_")[0]; //str, dex, int, def, agi
+
+    //update the label associated w/ the slider 
+    let elem = document.getElementById(elem_id);
+    let label = document.getElementById(elem_id + "_label");
+
+    let value = elem.value;
+
+    label.textContent = label.textContent.split(":")[0] + ": " + value
+    
+    //update the slider's graphics
+    let bg_color = elem_colors[skp_order.indexOf(wynn_elem)];
+    let pct = Math.round(100 * value / powderSpecialStats[skp_order.indexOf(wynn_elem)].cap);
+    elem.style.background = `linear-gradient(to right, ${bg_color}, ${bg_color} ${pct}%, #AAAAAA ${pct}%, #AAAAAA 100%)`;
+
+    armor_powder_node.mark_dirty().update();
 }
 
-class BoostsInputNode extends ComputeNode {
+
+let boosts_node = new (class extends ComputeNode {
     constructor() { super('builder-boost-input'); }
 
     compute_func(input_map) {
@@ -28,14 +52,40 @@ class BoostsInputNode extends ComputeNode {
         }
         return [damage_boost, def_boost];
     }
+})().update();
+
+/* Updates all spell boosts
+*/
+function update_boosts(buttonId) {
+    let elem = document.getElementById(buttonId);
+    if (elem.classList.contains("toggleOn")) {
+        elem.classList.remove("toggleOn");
+    } else {
+        elem.classList.add("toggleOn");
+    }
+    boosts_node.mark_dirty().update();
 }
 
-let powder_special_input;
 let specialNames = ["Quake", "Chain Lightning", "Curse", "Courage", "Wind Prison"];
+let powder_special_input = new (class extends ComputeNode {
+    constructor() { super('builder-powder-special-input'); }
+
+    compute_func(input_map) {
+        let powder_specials = []; // [ [special, power], [special, power]]
+        for (const sName of specialNames) {
+            for (let i = 1;i < 6; i++) {
+                if (document.getElementById(sName.replace(" ","_") + "-" + i).classList.contains("toggleOn")) {
+                    let powder_special = powderSpecialStats[specialNames.indexOf(sName.replace("_"," "))]; 
+                    powder_specials.push([powder_special, i]);
+                    break;
+                }   
+            }
+        }
+        return powder_specials;
+    }
+})();
 
 function updatePowderSpecials(buttonId) {
-    //console.log(player_build.statMap);
-   
     let name = (buttonId).split("-")[0];
     let power = (buttonId).split("-")[1]; // [1, 5]
     
@@ -53,26 +103,7 @@ function updatePowderSpecials(buttonId) {
         elem.classList.add("toggleOn"); 
     }
 
-    powder_special_input.mark_dirty();
+    powder_special_input.mark_dirty().update();
-    powder_special_input.update();
-}
-
-class PowderSpecialInputNode extends ComputeNode {
-    constructor() { super('builder-powder-special-input'); }
-
-    compute_func(input_map) {
-        let powder_specials = []; // [ [special, power], [special, power]]
-        for (const sName of specialNames) {
-            for (let i = 1;i < 6; i++) {
-                if (document.getElementById(sName.replace(" ","_") + "-" + i).classList.contains("toggleOn")) {
-                    let powder_special = powderSpecialStats[specialNames.indexOf(sName.replace("_"," "))]; 
-                    powder_specials.push([powder_special, i]);
-                    break;
-                }   
-            }
-        }
-        return powder_specials;
-    }
 }
 
 class PowderSpecialCalcNode extends ComputeNode {
@@ -988,17 +1019,15 @@ function builder_graph_init() {
     level_input.update();
 
     // Powder specials.
-    powder_special_input = new PowderSpecialInputNode();
     let powder_special_calc = new PowderSpecialCalcNode().link_to(powder_special_input, 'powder-specials');
     new PowderSpecialDisplayNode().link_to(powder_special_input, 'powder-specials')
         .link_to(stat_agg_node, 'stats').link_to(item_nodes[8], 'weapon');
     stat_agg_node.link_to(powder_special_calc, 'powder-boost');
+    stat_agg_node.link_to(armor_powder_node, 'armor-powder');
     powder_special_input.update();
 
     // Potion boost.
-    boosts_node = new BoostsInputNode();
     stat_agg_node.link_to(boosts_node, 'potion-boost');
-    boosts_node.update();
 
     // Also do something similar for skill points
 

js/computation_graph.js

@@ -37,6 +37,7 @@ class ComputeNode {
         for (const child of this.children) {
             child.mark_input_clean(this.name, this.value);
         }
+        return this;
     }
 
     /**
@@ -69,6 +70,7 @@ class ComputeNode {
                 child.mark_dirty();
             }
         }
+        return this;
     }
 
     /**

js/display_constants.js

@@ -212,20 +212,21 @@ let posModSuffixes = {
 let build_all_display_commands = [
     "#defense-stats",
     "str", "dex", "int", "def", "agi",
+    "!spacer",
     "mr", "ms",
     "hprRaw", "hprPct",
+    "ls",
     "sdRaw", "sdPct",
     "mdRaw", "mdPct",
-    "ref", "thorns",
-    "ls",
-    "poison",
-    "expd",
-    "spd",
-    "atkTier",
     "!elemental",
     "fDamPct", "wDamPct", "aDamPct", "tDamPct", "eDamPct",
     "!elemental",
     "spPct1", "spRaw1", "spPct2", "spRaw2", "spPct3", "spRaw3", "spPct4", "spRaw4",
+    "atkTier",
+    "poison",
+    "ref", "thorns",
+    "expd",
+    "spd",
     "rainbowRaw",
     "sprint", "sprintReg",
     "jh",
@@ -325,3 +326,11 @@ let sq2_ing_display_order = [
     "lvl",
     "skills",
 ]
+
+let elem_colors = [
+    "#00AA00",
+    "#FFFF55",
+    "#55FFFF",
+    "#FF5555",
+    "#FFFFFF"
+]