Add back poison stats (kicked to the bottom)

also powder special and poison stats now vanish if u don't have them

builder/index_full.html

@@ -1150,9 +1150,11 @@
                         <div class = "col spell-display spell-expand dark-5 rounded dark-shadow pt-2 border border-dark" id="spell0-infoAvg">Input a weapon to see abilities!</div>
                     </div>
                 </div>
+                <div class="row row-cols-1 gy-3 mb-4 text-center scaled-font" id="build-poison-stats" style="display: none">
+                </div>
                 <div class="row row-cols-1 gy-3 mb-4 text-center scaled-font">
                     <div class = "col pe-0">
-                        <div class = "spell-display dark-5 rounded dark-shadow py-2 border border-dark" id = "powder-special-stats"></div>
+                        <div class="col pe-0 spell-display dark-5 rounded dark-shadow py-2 border border-dark" id="powder-special-stats"></div>
                     </div>
                 </div>
             </div>

css/sq2bs.css

@@ -132,10 +132,6 @@ input.equipment-input {
     font-weight: bold;
 }
 
-.spell-expand {
-    cursor: pointer;
-}
-
 :root {
     --scaled-fontsize: 2.5rem;
 }

js/atree.js

@@ -881,10 +881,10 @@ class AbilityTreeEnsureNodesNode extends ComputeNode {
             let display_elem = document.createElement('div');
             display_elem.classList.add("col", "pe-0");
             // TODO: just pass these elements into the display node instead of juggling the raw IDs...
-            let spell_summary = document.createElement('div'); spell_summary.setAttribute('id', "spell"+spell.base_spell+"-infoAvg");
+            let spell_summary = make_elem('div', ["col", "spell-display", "dark-5", "rounded", "dark-shadow", "pt-2", "border", "border-dark"],
-            spell_summary.classList.add("col", "spell-display", "spell-expand", "dark-5", "rounded", "dark-shadow", "pt-2", "border", "border-dark");
+                    { id: "spell"+spell.base_spell+"-infoAvg" }); 
-            let spell_detail = document.createElement('div'); spell_detail.setAttribute('id', "spell"+spell.base_spell+"-info");
+            let spell_detail = make_elem('div', ["col", "spell-display", "dark-5", "rounded", "dark-shadow", "py-2"],
-            spell_detail.classList.add("col", "spell-display", "dark-5", "rounded", "dark-shadow", "py-2");
+                    { id: "spell"+spell.base_spell+"-info" });
             spell_detail.style.display = "none";
 
             display_elem.appendChild(spell_summary); display_elem.appendChild(spell_detail);

js/builder_graph.js

@@ -677,7 +677,7 @@ class BuildDisplayNode extends ComputeNode {
         // TODO: move weapon out?
         displayDefenseStats(document.getElementById("defensive-stats"), stats);
 
-        //displayPoisonDamage(document.getElementById("build-poison-stats"), build);
+        displayPoisonDamage(document.getElementById("build-poison-stats"), build);
         displayEquipOrder(document.getElementById("build-order"), build.equip_order);
     }
 }

js/display.js

@@ -989,23 +989,30 @@ function displayFixedID(active, id, value, elemental_format, style) {
 
 function displayPoisonDamage(overallparent_elem, build) {
     overallparent_elem.textContent = "";
+    if (build.statMap.get('poison') <= 0) {
+        overallparent_elem.style = "display: none";
+        return;
+    }
+    overallparent_elem.style = "";
+
+    let container = make_elem('div', ['col', 'pe-0']);
+    let spell_summary = make_elem('div', ["col", "spell-display", "dark-5", "rounded", "dark-shadow", "py-2", "border", "border-dark"]); 
 
     //Title
-    let title_elemavg = document.createElement("b");
+    let title_elemavg = make_elem("b");
-    title_elemavg.textContent = "Poison Stats";
+    title_elemavg.append(make_elem('span', [], { textContent: "Poison Stats" }));
-    overallparent_elem.append(title_elemavg);
+    spell_summary.append(title_elemavg);
 
-    let overallpoisonDamage = document.createElement("p");
-    let overallpoisonDamageFirst = document.createElement("span");
-    let overallpoisonDamageSecond = document.createElement("span");
     let poison_tick = Math.ceil(build.statMap.get("poison") * (1+skillPointsToPercentage(build.total_skillpoints[0])) * (build.statMap.get("poisonPct"))/100 /3);
-    overallpoisonDamageFirst.textContent = "Poison Tick: ";
-    overallpoisonDamageSecond.textContent = Math.max(poison_tick,0);
-    overallpoisonDamageSecond.classList.add("Damage");
 
-    overallpoisonDamage.appendChild(overallpoisonDamageFirst);
+    let overallpoisonDamage = make_elem("p");
-    overallpoisonDamage.appendChild(overallpoisonDamageSecond);
+    overallpoisonDamage.append(
-    overallparent_elem.append(overallpoisonDamage);
+        make_elem("span", [], { textContent: "Poison Tick: " }),
+        make_elem("span", ["Damage"], { textContent: Math.max(poison_tick,0) })
+    );
+    spell_summary.append(overallpoisonDamage);
+    container.append(spell_summary);
+    overallparent_elem.append(container);
 }
 
 function displayEquipOrder(parent_elem, buildOrder){
@@ -1228,6 +1235,13 @@ function displayDefenseStats(parent_elem, statMap, insertSummary){
 }
 
 function displayPowderSpecials(parent_elem, powderSpecials, stats, weapon, overall=false) {
+    parent_elem.textContent = "";
+    if (powderSpecials.length === 0) {
+        parent_elem.style = "display: none";
+        return;
+    }
+    parent_elem.style = "";
+
     const skillpoints = [
         stats.get('str'),
         stats.get('dex'),
@@ -1235,16 +1249,13 @@ function displayPowderSpecials(parent_elem, powderSpecials, stats, weapon, overa
         stats.get('def'),
         stats.get('agi')
     ];
-    parent_elem.textContent = ""
+    parent_elem.append(make_elem("b", [], { textContent: "Powder Specials" }));
-    let title = document.createElement("b");
-    title.textContent = "Powder Specials";
-    parent_elem.appendChild(title);
     let specials = powderSpecials.slice();
     let expandedStats = new Map();
     //each entry of powderSpecials is [ps, power]
     for (special of specials) {
         //iterate through the special and display its effects.
-        let powder_special = document.createElement("p");
+        let powder_special = make_elem("p", ["pt-3"]);
         let specialSuffixes = new Map([ ["Duration", " sec"], ["Radius", " blocks"], ["Chains", ""], ["Damage", "%"], ["Damage Boost", "%"], ["Knockback", " blocks"] ]);
         let specialTitle = document.createElement("p");
         let specialEffects = document.createElement("p");