Refactor some stuff, add ID editing (no saving)

build.js

@@ -403,14 +403,10 @@ class Build{
                 }
             }
         }
+        statMap.set("poisonPct", 100);
 
         // The stuff relevant for damage calculation!!! @ferricles
         statMap.set("atkSpd", this.weapon.get("atkSpd"));
-        statMap.set("damageRaw", [this.weapon.get("nDam"), this.weapon.get("eDam"), this.weapon.get("tDam"), this.weapon.get("wDam"), this.weapon.get("fDam"), this.weapon.get("aDam")]);
-        statMap.set("damageBonus", [statMap.get("eDamPct"), statMap.get("tDamPct"), statMap.get("wDamPct"), statMap.get("fDamPct"), statMap.get("aDamPct")]);
-        statMap.set("defRaw", [statMap.get("eDam"), statMap.get("tDef"), statMap.get("wDef"), statMap.get("fDef"), statMap.get("aDef")]);
-        statMap.set("defBonus", [statMap.get("eDamPct"), statMap.get("tDefPct"), statMap.get("wDefPct"), statMap.get("fDefPct"), statMap.get("aDefPct")]);
-        statMap.set("poisonPct", 100);
 
         for (const x of skp_elements) {
             this.externalStats.set(x + "DamPct", 0);
@@ -421,6 +417,15 @@ class Build{
         this.externalStats.set("defBonus",[0, 0, 0, 0, 0]);
         this.externalStats.set("poisonPct", 0);
         this.statMap = statMap;
+
+        this.aggregateStats();
     }
 
+    aggregateStats() {
+        let statMap = this.statMap;
+        statMap.set("damageRaw", [this.weapon.get("nDam"), this.weapon.get("eDam"), this.weapon.get("tDam"), this.weapon.get("wDam"), this.weapon.get("fDam"), this.weapon.get("aDam")]);
+        statMap.set("damageBonus", [statMap.get("eDamPct"), statMap.get("tDamPct"), statMap.get("wDamPct"), statMap.get("fDamPct"), statMap.get("aDamPct")]);
+        statMap.set("defRaw", [statMap.get("eDef"), statMap.get("tDef"), statMap.get("wDef"), statMap.get("fDef"), statMap.get("aDef")]);
+        statMap.set("defBonus", [statMap.get("eDefPct"), statMap.get("tDefPct"), statMap.get("wDefPct"), statMap.get("fDefPct"), statMap.get("aDefPct")]);
+    }
 }

builder.js

@@ -3,7 +3,7 @@ const url_tag = location.hash.slice(1);
 console.log(url_base);
 console.log(url_tag);
 
-const BUILD_VERSION = "6.9.3";
+const BUILD_VERSION = "6.9.4";
 
 function setTitle() {
     document.getElementById("header").textContent = "WynnBuilder version "+BUILD_VERSION+" (db version "+DB_VERSION+")";
@@ -19,6 +19,7 @@ let accessoryTypes = [ "ring", "bracelet", "necklace" ];
 let weaponTypes = [ "wand", "spear", "bow", "dagger", "relik" ];
 // THIS IS SUPER DANGEROUS, WE SHOULD NOT BE KEEPING THIS IN SO MANY PLACES
 let item_fields = [ "name", "displayName", "tier", "set", "slots", "type", "material", "drop", "quest", "restrict", "nDam", "fDam", "wDam", "aDam", "tDam", "eDam", "atkSpd", "hp", "fDef", "wDef", "aDef", "tDef", "eDef", "lvl", "classReq", "strReq", "dexReq", "intReq", "defReq", "agiReq", "hprPct", "mr", "sdPct", "mdPct", "ls", "ms", "xpb", "lb", "ref", "str", "dex", "int", "agi", "def", "thorns", "expd", "spd", "atkTier", "poison", "hpBonus", "spRegen", "eSteal", "hprRaw", "sdRaw", "mdRaw", "fDamPct", "wDamPct", "aDamPct", "tDamPct", "eDamPct", "fDefPct", "wDefPct", "aDefPct", "tDefPct", "eDefPct", "fixID", "category", "spPct1", "spRaw1", "spPct2", "spRaw2", "spPct3", "spRaw3", "spPct4", "spRaw4", "rainbowRaw", "sprint", "sprintReg", "jh", "lq", "gXp", "gSpd", "id" ];
+let editable_item_fields = [ "sdPct", "sdRaw", "mdPct", "mdRaw", "poison", "fDamPct", "wDamPct", "aDamPct", "tDamPct", "eDamPct", "fDefPct", "wDefPct", "aDefPct", "tDefPct", "eDefPct", "hprRaw", "hprPct", "hpBonus", "atkTier", "spPct1", "spRaw1", "spPct2", "spRaw2", "spPct3", "spRaw3", "spPct4", "spRaw4" ];
 
 let skp_order = ["str","dex","int","def","agi"];
 let skp_elements = ["e","t","w","f","a"];
@@ -469,6 +470,11 @@ function calculateBuild(save_skp, skp){
         for (let i in skp_order){ //big bren
             setText(skp_order[i] + "-skp-base", "Original Value: " + skillpoints[i]);
         }
+
+        for (let id of editable_item_fields) {
+            setValue(id, player_build.statMap.get(id));
+            setText(id+"-base", "Original Value: " + player_build.statMap.get(id));
+        }
         
         if (save_skp) {
             // TODO: reduce duplicated code, @updateStats
@@ -582,15 +588,20 @@ function updateStats() {
         delta_total += delta;
     }
     player_build.assigned_skillpoints += delta_total;
-    calculateBuildStats();
     if(player_build){
-        updatePowderSpecials("skip");
+        updatePowderSpecials("skip", false);
-        updateBoosts("skip");
+        updateBoosts("skip", false);
     }
+    for (let id of editable_item_fields) {
+        player_build.statMap.set(id, parseInt(getValue(id)));
+    }
+    player_build.aggregateStats();
+    console.log(player_build.statMap);
+    calculateBuildStats();
 }
 /* Updates all spell boosts
 */
-function updateBoosts(buttonId) {
+function updateBoosts(buttonId, recalcStats) {
     let elem = document.getElementById(buttonId);
     let name = buttonId.split("-")[0];
     if(buttonId !== "skip") {
@@ -618,12 +629,14 @@ function updateBoosts(buttonId) {
             }
         }
     }
-    calculateBuildStats();
+    if (recalcStats) {
+        calculateBuildStats();
+    }
 }
 
 /* Updates all powder special boosts 
 */
-function updatePowderSpecials(buttonId){
+function updatePowderSpecials(buttonId, recalcStats) {
     //console.log(player_build.statMap);
    
     let name = (buttonId).split("-")[0];
@@ -703,8 +716,10 @@ function updatePowderSpecials(buttonId){
         }
     }
 
+    if (recalcStats) {
+        calculateBuildStats();
+    }
     displayPowderSpecials(document.getElementById("powder-special-stats"), powderSpecials, player_build); 
-    calculateBuildStats(); //also make damage boosts apply ;-;
 }
 /* Calculates all build statistics and updates the entire display.
 */
@@ -868,5 +883,18 @@ function resetFields(){
     calculateBuild();
 }
 
+function toggleID() {
+    let button = document.getElementById("show-id-button");
+    let targetDiv = document.getElementById("id-edit");
+    if (button.classList.contains("toggleOn")) { //toggle the pressed button off
+        targetDiv.style.display = "none";
+        button.classList.remove("toggleOn");
+    }
+    else {
+        targetDiv.style.display = "block";
+        button.classList.add("toggleOn");
+    }
+}
+
 load_init(init);
 

index.html

@@ -442,7 +442,7 @@
             <div class="center" style="grid-column:1;grid-row:1">
                 <div>
                     <label for="str-skp" class="skpLabel" id="str-skp-label">Strength:</label><br>
-                    <input class="skp-input" type="string" id="str-skp" name="str-skp" value="0" class="skpInput"/>
+                    <input type="string" id="str-skp" name="str-skp" value="0" class="skpInput"/>
                 </div>
                 <div id="str-skp-assign">
                     Manually Assigned: 0
@@ -456,7 +456,7 @@
             <div class="center" style="grid-column:2;grid-row:1">
                 <div>
                     <label for="dex-skp" class="skpLabel" id="dex-skp-label">Dexterity:</label><br>
-                    <input class="skp-input" type="string" id="dex-skp" name="dex-skp" value="0" class="skpInput"/>
+                    <input type="string" id="dex-skp" name="dex-skp" value="0" class="skpInput"/>
                 </div>
                 <div id="dex-skp-assign">
                     Manually Assigned: 0
@@ -470,7 +470,7 @@
             <div class="center" style="grid-column:3;grid-row:1">
                 <div>
                     <label for="int-skp" class="skpLabel" id="int-skp-label">Intelligence:</label><br>
-                    <input class="skp-input" type="string" id="int-skp" name="int-skp" value="0" class="skpInput"/>
+                    <input type="string" id="int-skp" name="int-skp" value="0" class="skpInput"/>
                 </div>
                 <div id="int-skp-assign">
                     Manually Assigned: 0
@@ -484,7 +484,7 @@
             <div class="center" style="grid-column:4;grid-row:1">
                 <div>
                     <label for="def-skp" class="skpLabel" id="def-skp-label">Defense:</label><br>
-                    <input class="skp-input" type="string" id="def-skp" name="def-skp" value="0" class="skpInput"/>
+                    <input type="string" id="def-skp" name="def-skp" value="0" class="skpInput"/>
                 </div>
                 <div id="def-skp-assign">
                     Manually Assigned: 0
@@ -498,7 +498,7 @@
             <div class="center" style="grid-column:5;grid-row:1">
                 <div>
                     <label for="agi-skp" class="skpLabel" id="agi-skp-label">Agility:</label><br>
-                    <input class="skp-input" type="string" id="agi-skp" name="agi-skp" value="0" class="skpInput"/>
+                    <input type="string" id="agi-skp" name="agi-skp" value="0" class="skpInput"/>
                 </div>
                 <div id="agi-skp-assign">
                     Manually Assigned: 0
@@ -510,13 +510,317 @@
                 </div>
             </div>
         </div>
+        <div class="id-box fade-in" id="id-edit" style="display: none">
+            <div class="id-edit1">
+                <div class="idCenter">
+                    <div class="idWrap">
+                        <div>
+                            <label for="sdPct" class="idLabel" id="sdPct-label">Spell Damage %:</label><br>
+                            <input type="number" id="sdPct" name="sdPct" value="0" class="idInput"/>
+                        </div>
+                        <div id="sdPct-base">
+                            Original Value: 0
+                        </div>
+                    </div>
+                </div>
+                <div class="idCenter">
+                    <div class="idWrap">
+                        <div>
+                            <label for="sdRaw" class="idLabel" id="sdRaw-label">Spell Damage Raw:</label><br>
+                            <input type="number" id="sdRaw" name="sdRaw" value="0" class="idInput"/>
+                        </div>
+                        <div id="sdRaw-base">
+                            Original Value: 0
+                        </div>
+                    </div>
+                </div>
+                <div class="idCenter">
+                    <div class="idWrap">
+                        <div>
+                            <label for="mdPct" class="idLabel" id="mdPct-label">Melee Damage %:</label><br>
+                            <input type="number" id="mdPct" name="mdPct" value="0" class="idInput"/>
+                        </div>
+                        <div id="mdPct-base">
+                            Original Value: 0
+                        </div>
+                    </div>
+                </div>
+                <div class="idCenter">
+                    <div class="idWrap">
+                        <div>
+                            <label for="mdRaw" class="idLabel" id="mdRaw-label">Melee Damage Raw:</label><br>
+                            <input type="number" id="mdRaw" name="mdRaw" value="0" class="idInput"/>
+                        </div>
+                        <div id="mdRaw-base">
+                            Original Value: 0
+                        </div>
+                    </div>
+                </div>
+                <div class="idCenter">
+                    <div class="idWrap">
+                        <div>
+                            <label for="poison" class="idLabel" id="poison-label">Poison:</label><br>
+                            <input type="number" id="poison" name="poison" value="0" class="idInput"/>
+                        </div>
+                        <div id="poison-base">
+                            Original Value: 0
+                        </div>
+                    </div>
+                </div>
+                <div class="idCenter">
+                    <div class="idWrap">
+                        <div>
+                            <label for="eDamPct" class="idLabel" id="eDamPct-label">Earth Damage %:</label><br>
+                            <input type="number" id="eDamPct" name="eDamPct" value="0" class="idInput"/>
+                        </div>
+                        <div id="eDamPct-base">
+                            Original Value: 0
+                        </div>
+                    </div>
+                </div>
+                <div class="idCenter">
+                    <div class="idWrap">
+                        <div>
+                            <label for="tDamPct" class="idLabel" id="tDamPct-label">Thunder Damage %:</label><br>
+                            <input type="number" id="tDamPct" name="tDamPct" value="0" class="idInput"/>
+                        </div>
+                        <div id="tDamPct-base">
+                            Original Value: 0
+                        </div>
+                    </div>
+                </div>
+                <div class="idCenter">
+                    <div class="idWrap">
+                        <div>
+                            <label for="wDamPct" class="idLabel" id="wDamPct-label">Water Damage %:</label><br>
+                            <input type="number" id="wDamPct" name="wDamPct" value="0" class="idInput"/>
+                        </div>
+                        <div id="wDamPct-base">
+                            Original Value: 0
+                        </div>
+                    </div>
+                </div>
+                <div class="idCenter">
+                    <div class="idWrap">
+                        <div>
+                            <label for="fDamPct" class="idLabel" id="fDamPct-label">Fire Damage %:</label><br>
+                            <input type="number" id="fDamPct" name="fDamPct" value="0" class="idInput"/>
+                        </div>
+                        <div id="fDamPct-base">
+                            Original Value: 0
+                        </div>
+                    </div>
+                </div>
+                <div class="idCenter">
+                    <div class="idWrap">
+                        <div>
+                            <label for="aDamPct" class="idLabel" id="aDamPct-label">Air Damage %:</label><br>
+                            <input type="number" id="aDamPct" name="aDamPct" value="0" class="idInput"/>
+                        </div>
+                        <div id="aDamPct-base">
+                            Original Value: 0
+                        </div>
+                    </div>
+                </div>
+                <div class="idCenter">
+                    <div class="idWrap">
+                        <div>
+                            <label for="eDefPct" class="idLabel" id="eDefPct-label">Earth Defense %:</label><br>
+                            <input type="number" id="eDefPct" name="eDefPct" value="0" class="idInput"/>
+                        </div>
+                        <div id="eDefPct-base">
+                            Original Value: 0
+                        </div>
+                    </div>
+                </div>
+                <div class="idCenter">
+                    <div class="idWrap">
+                        <div>
+                            <label for="tDefPct" class="idLabel" id="tDefPct-label">Thunder Defense %:</label><br>
+                            <input type="number" id="tDefPct" name="tDefPct" value="0" class="idInput"/>
+                        </div>
+                        <div id="tDefPct-base">
+                            Original Value: 0
+                        </div>
+                    </div>
+                </div>
+                <div class="idCenter">
+                    <div class="idWrap">
+                        <div>
+                            <label for="wDefPct" class="idLabel" id="wDefPct-label">Water Defense %:</label><br>
+                            <input type="number" id="wDefPct" name="wDefPct" value="0" class="idInput"/>
+                        </div>
+                        <div id="wDefPct-base">
+                            Original Value: 0
+                        </div>
+                    </div>
+                </div>
+                <div class="idCenter">
+                    <div class="idWrap">
+                        <div>
+                            <label for="fDefPct" class="idLabel" id="fDefPct-label">Fire Defense %:</label><br>
+                            <input type="number" id="fDefPct" name="fDefPct" value="0" class="idInput"/>
+                        </div>
+                        <div id="fDefPct-base">
+                            Original Value: 0
+                        </div>
+                    </div>
+                </div>
+                <div class="idCenter">
+                    <div class="idWrap">
+                        <div>
+                            <label for="aDefPct" class="idLabel" id="aDefPct-label">Air Defense %:</label><br>
+                            <input type="number" id="aDefPct" name="aDefPct" value="0" class="idInput"/>
+                        </div>
+                        <div id="aDefPct-base">
+                            Original Value: 0
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="id-edit2">
+                <div class="idCenter">
+                    <div class="idWrap">
+                        <div>
+                            <label for="hprRaw" class="idLabel" id="hprRaw-label">Health Regen Raw:</label><br>
+                            <input type="number" id="hprRaw" name="hprRaw" value="0" class="idInput"/>
+                        </div>
+                        <div id="hprRaw-base">
+                            Original Value: 0
+                        </div>
+                    </div>
+                </div>
+                <div class="idCenter">
+                    <div class="idWrap">
+                        <div>
+                            <label for="hprPct" class="idLabel" id="hprPct-label">Health Regen %:</label><br>
+                            <input type="number" id="hprPct" name="hprPct" value="0" class="idInput"/>
+                        </div>
+                        <div id="hprPct-base">
+                            Original Value: 0
+                        </div>
+                    </div>
+                </div>
+                <div class="idCenter">
+                    <div class="idWrap">
+                        <div>
+                            <label for="hpBonus" class="idLabel" id="hpBonus-label">Health Bonus:</label><br>
+                            <input type="number" id="hpBonus" name="hpBonus" value="0" class="idInput"/>
+                        </div>
+                        <div id="hpBonus-base">
+                            Original Value: 0
+                        </div>
+                    </div>
+                </div>
+                <div class="idCenter">
+                    <div class="idWrap">
+                        <div>
+                            <label for="atkTier" class="idLabel" id="atkTier-label">Attack Speed Bonus:</label><br>
+                            <input type="number" id="atkTier" name="atkTier" value="0" class="idInput"/>
+                        </div>
+                        <div id="atkTier-base">
+                            Original Value: 0
+                        </div>
+                    </div>
+                </div>
+                <div class="idCenter">
+                    <div class="idWrap">
+                        <div>
+                            <label for="spPct1" class="idLabel" id="spPct1-label">1st Spell Cost %:</label><br>
+                            <input type="number" id="spPct1" name="spPct1" value="0" class="idInput"/>
+                        </div>
+                        <div id="spPct1-base">
+                            Original Value: 0
+                        </div>
+                    </div>
+                </div>
+                <div class="idCenter">
+                    <div class="idWrap">
+                        <div>
+                            <label for="spPct2" class="idLabel" id="spPct2-label">2nd Spell Cost %:</label><br>
+                            <input type="number" id="spPct2" name="spPct2" value="0" class="idInput"/>
+                        </div>
+                        <div id="spPct2-base">
+                            Original Value: 0
+                        </div>
+                    </div>
+                </div>
+                <div class="idCenter">
+                    <div class="idWrap">
+                        <div>
+                            <label for="spPct3" class="idLabel" id="spPct3-label">3rd Spell Cost %:</label><br>
+                            <input type="number" id="spPct3" name="spPct3" value="0" class="idInput"/>
+                        </div>
+                        <div id="spPct3-base">
+                            Original Value: 0
+                        </div>
+                    </div>
+                </div>
+                <div class="idCenter">
+                    <div class="idWrap">
+                        <div>
+                            <label for="spPct4" class="idLabel" id="spPct4-label">4th Spell Cost %:</label><br>
+                            <input type="number" id="spPct4" name="spPct4" value="0" class="idInput"/>
+                        </div>
+                        <div id="spPct4-base">
+                            Original Value: 0
+                        </div>
+                    </div>
+                </div>
+                <div class="idCenter">
+                    <div class="idWrap">
+                        <div>
+                            <label for="spRaw1" class="idLabel" id="spRaw1-label">1st Spell Cost Raw:</label><br>
+                            <input type="number" id="spRaw1" name="spRaw1" value="0" class="idInput"/>
+                        </div>
+                        <div id="spRaw1-base">
+                            Original Value: 0
+                        </div>
+                    </div>
+                </div>
+                <div class="idCenter">
+                    <div class="idWrap">
+                        <div>
+                            <label for="spRaw2" class="idLabel" id="spRaw2-label">2nd Spell Cost Raw:</label><br>
+                            <input type="number" id="spRaw2" name="spRaw2" value="0" class="idInput"/>
+                        </div>
+                        <div id="spRaw2-base">
+                            Original Value: 0
+                        </div>
+                    </div>
+                </div>
+                <div class="idCenter">
+                    <div class="idWrap">
+                        <div>
+                            <label for="spRaw3" class="idLabel" id="spRaw3-label">3rd Spell Cost Raw:</label><br>
+                            <input type="number" id="spRaw3" name="spRaw3" value="0" class="idInput"/>
+                        </div>
+                        <div id="spRaw3-base">
+                            Original Value: 0
+                        </div>
+                    </div>
+                </div>
+                <div class="idCenter">
+                    <div class="idWrap">
+                        <div>
+                            <label for="spRaw4" class="idLabel" id="spRaw4-label">4th Spell Cost Raw:</label><br>
+                            <input type="number" id="spRaw4" name="spRaw4" value="0" class="idInput"/>
+                        </div>
+                        <div id="spRaw4-base">
+                            Original Value: 0
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <br>
         <div class="center">
             <button class = "button" id = "update-button" onclick = "updateStats()">
                 Update Stats
             </button>
-            <!--button class = "button" id = "show-id-button" onclick = "showIDs()">
+            <button class = "button" id = "show-id-button" onclick = "toggleID()">
                 Edit IDs
-            </button-->
+            </button>
         </div>
         <div class = "build hide-container-grid" style="display: none;">
             <div class = "center build-helmet" id = "build-helmet" style = "grid-item-1">

narrow.css

@@ -33,40 +33,9 @@
     max-height: 50px;
 }
 
-.skp-input {
+.skpInput, .idInput {
-    width: 15vw;
+    width: 90%;
     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

@@ -28,7 +28,7 @@ div {
     grid-template-rows: min-content min-content auto;
 }
 
-.skillpoints {
+.skillpoints, .id-edit1 {
     padding: 0% 4% 2%;
     display: grid;
     grid-template-columns: repeat(5, 1fr);
@@ -36,6 +36,14 @@ div {
     grid-auto-rows: minmax(60px, auto);
 }
 
+.id-edit2 {
+    padding: 0% 4% 2%;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 5px;
+    grid-auto-rows: minmax(60px, auto);
+}
+
 .powder-specials{
     padding: 0% 4% 2%;
     display: grid;
@@ -67,6 +75,7 @@ a.link{
 }
 .center {
     text-align: center;
+    position: relative;
 }
 table.center{   
     margin: 10px;
@@ -83,7 +92,7 @@ table.center{
     text-align: left;
 }
 
-.build-helmet, .build-chestplate, .build-leggings, .build-boots, .build-ring1, .build-ring2, .build-bracelet, .build-necklace, .build-weapon, .build-order, .build-overall, .build-melee-stats, .build-defense-stats, .spell-info, .set-info, .powder-special, .powder-special-stats, .int-info, .crafter, .recipe-stats, .craft-stats, .ing-stats {
+.build-helmet, .build-chestplate, .build-leggings, .build-boots, .build-ring1, .build-ring2, .build-bracelet, .build-necklace, .build-weapon, .build-order, .build-overall, .build-melee-stats, .build-defense-stats, .spell-info, .set-info, .powder-special, .powder-special-stats, .int-info, .crafter, .recipe-stats, .craft-stats, .ing-stats, .id-box {
     color: #aaa;
     background: #121516;
     border: 3px solid #BCBCBC;
@@ -177,11 +186,21 @@ table.center{
     content: "\2764" ' ';
 }
 
-.skpInput, .skplabel {
+.skplabel {
     display: block;
     margin: auto;
 }
 
+.idCenter {
+    text-align: center;
+    padding: 1em 0px 0px 0px;
+    position: relative;
+    display: flex;
+}
+.idWrap {
+    align-self: flex-end;
+}
+
 /*Scrollbar*/
 /* width */
 ::-webkit-scrollbar {
@@ -301,3 +320,23 @@ button.toggleOn{
 .externalBuffs {
     width: 100%;
 }
+
+.hide-container-block, .hide-container-grid, .set-info-div, .fade-in {
+    animation-duration: 0.5s;
+    animation-name: fadeInFromNone;
+    animation-fill-mode: forwards;
+}
+
+@keyframes fadeInFromNone {
+    0% {
+        opacity: 0;
+    }
+
+    1% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}

wide.css

@@ -43,38 +43,7 @@
 
 }
 
-.skp-input {
+.skpInput, .idInput {
 
 }
 
-.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;
-    }
-}