Merge pull request #2 from dr-carlos/master

Make stuff only visible on build calculate and when needed

build.js

@@ -225,10 +225,16 @@ class Build{
             const weapon = itemMap.get(equipment[8]);
             this.powders[4] = this.powders[4].slice(0,weapon.slots); 
             this.weapon = expandItem(weapon, this.powders[4]);
+            if (equipment[8] !== "No Weapon") {
+                document.getElementsByClassName("powder-specials")[0].style.display = "grid";
+            } else {
+                document.getElementsByClassName("powder-specials")[0].style.display = "none";
+            }
         }else{
             const weapon = itemMap.get("No Weapon");
             this.powders[4] = this.powders[4].slice(0,weapon.slots); 
             this.weapon = expandItem(weapon, this.powders[4]);
+            document.getElementsByClassName("powder-specials")[0].style.display = "none";
             errors.push(new ItemNotFound(equipment[8], "weapon", true));
         }
 

builder.js

@@ -458,7 +458,6 @@ function calculateBuild(save_skp, skp){
         for (let i of document.getElementsByClassName("hide-container-grid")) {
 			i.style.display = "grid";
         }
-        document.getElementById("int-info-div").style.display = "none";
 
         console.log(player_build.toString());
         displayEquipOrder(document.getElementById("build-order"),player_build.equip_order);

index.html

@@ -194,7 +194,7 @@
                         
                     </div>
                     <br><br>
-                    <div class="externalBuffs" id="buff-box">
+                    <div class="externalBuffs hide-container-block" id="buff-box" style="display: none;">
                         <table class="externalBuffs">
                             <tr>
                                 <p class = "buffs-title itemp title">
@@ -229,7 +229,7 @@
                                 </td>
                             </tr>
                         </table>
-                        <div class = "powder-specials">
+                        <div class = "powder-specials" style="display: none;">
                             <div class = "powder-special-stats" style = "grid-column:1;grid-row:1">
                                 <div class = "center" id = "powder-special-stats">
                                     <p class = "itemp">Powder Specials</p>
@@ -879,7 +879,7 @@
             <div class = "center set-info" id = "set-info-div" style = "grid-column:1;grid-row:1; display: none;">
                 <div class = "center" id = "set-info">Set info</div>
             </div>
-            <div class = "center int-info" id = "int-info-div" style = "grid-column:4;grid-row:1; display: none;">
+            <div class = "center int-info hide-container-block" id = "int-info-div" style = "grid-column:4;grid-row:1; display: none;">
                 <div class = "center" id = "int-info">Next Spell Costs</div> 
             </div>
         </div>

narrow.css

@@ -38,4 +38,3 @@
     height: 7vw;
     max-height: 30px;
 }
-

styles.css

@@ -321,7 +321,7 @@ button.toggleOn{
     width: 100%;
 }
 
-.hide-container-block, .hide-container-grid, .set-info-div, .fade-in {
+.hide-container-block, .hide-container-grid, .set-info-div, .fade-in, .misc {
     animation-duration: 0.5s;
     animation-name: fadeInFromNone;
     animation-fill-mode: forwards;

wide.css

@@ -46,4 +46,3 @@
 .skpInput, .idInput {
 
 }
-