Display Spell Boosts and Next Spell Costs only after build calculated; only display Powder Specials if weapon is present

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

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

index.html

@@ -191,7 +191,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">
@@ -226,7 +226,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>
@@ -569,7 +569,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;visibility:visible;">
+            <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

@@ -35,35 +35,3 @@
     height: 7vw;
     max-height: 30px;
 }
-
-.hide-container-block {
-    animation-duration: 0.5s;
-    animation-name: fadeInFromNone;
-    animation-fill-mode: forwards;
-}
-
-.hide-container-grid {
-    animation-duration: 0.5s;
-    animation-name: fadeInFromNone;
-    animation-fill-mode: forwards;
-}
-
-.set-info-div {
-    animation-duration: 0.5s;
-    animation-name: fadeInFromNone;
-    animation-fill-mode: forwards;
-}
-
-@keyframes fadeInFromNone {
-    0% {
-        opacity: 0;
-    }
-
-    1% {
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}

styles.css

@@ -290,3 +290,35 @@ button.toggleOn{
 .externalBuffs {
     width: 100%;
 }
+
+.hide-container-block {
+    animation-duration: 0.5s;
+    animation-name: fadeInFromNone;
+    animation-fill-mode: forwards;
+}
+
+.hide-container-grid {
+    animation-duration: 0.5s;
+    animation-name: fadeInFromNone;
+    animation-fill-mode: forwards;
+}
+
+.misc {
+    animation-duration: 0.5s;
+    animation-name: fadeInFromNone;
+    animation-fill-mode: forwards;
+}
+
+@keyframes fadeInFromNone {
+    0% {
+        opacity: 0;
+    }
+
+    1% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}

wide.css

@@ -29,36 +29,4 @@
 
 .skp-input {
 
-}
+}
-
-.hide-container-block {
-    animation-duration: 0.5s;
-    animation-name: fadeInFromNone;
-    animation-fill-mode: forwards;
-}
-
-.hide-container-grid {
-    animation-duration: 0.5s;
-    animation-name: fadeInFromNone;
-    animation-fill-mode: forwards;
-}
-
-.set-info-div {
-    animation-duration: 0.5s;
-    animation-name: fadeInFromNone;
-    animation-fill-mode: forwards;
-}
-
-@keyframes fadeInFromNone {
-    0% {
-        opacity: 0;
-    }
-
-    1% {
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}