feat: add detailed view, copy btns

sq2bs.css

@@ -169,6 +169,25 @@ li.search-item:hover {
     background-color: hsl(0, 0%, 11%) !important;
 }
 
+/* boosts styles */
+.button-boost:hover {
+    background-color: rgba(255, 255, 255, .1);
+}
+
+.toggleOn {
+    background-color: #0a0 !important;
+}
+
+/* floating tooltip styles */
+.float-tooltip {
+    background-color: hsl(0, 0%, 16%);
+    position: absolute;
+    transition: .5s;
+    cursor: pointer;
+}
+
+/* generic */
+
 input {
     min-width: 0;
     width: 100%;
@@ -219,6 +238,15 @@ input.equipment-input {
     width: 6.5rem;
 }
 
+.scaled-bckgrd {
+    width: 10rem;
+    height: 10rem;
+}
+
+.scaled-bckgrd img {
+    width: 6.5rem;
+}
+
 @media screen and (min-width: 1200px) and (max-width: 1400px) {
     .scaled-font {
         font-size: .8rem;
@@ -236,6 +264,15 @@ input.equipment-input {
         width: 2.8rem;
     }
 
+    .scaled-bckgrd {
+        width: 4rem;
+        height: 4rem;
+    }
+    
+    .scaled-bckgrd img {
+        width: 2.8rem;
+    }
+
     .warning {
         font-size: .7rem;
     }
@@ -243,6 +280,10 @@ input.equipment-input {
     .spell-display b {
         font-size: 1rem;
     }
+
+    .mobile-only {
+        display: none;
+    }
 }
 
 @media screen and (min-width: 1400px) {
@@ -262,6 +303,16 @@ input.equipment-input {
         width: 3.5rem;
     }
 
+    .scaled-bckgrd {
+        width: 5rem;
+        height: 5rem;
+    }
+    
+    .scaled-bckgrd img {
+        width: 3.5rem;
+    }
+
+
     .warning {
         font-size: .8rem;
     }
@@ -269,6 +320,10 @@ input.equipment-input {
     .spell-display b {
         font-size: 1.2rem;
     }
+
+    .mobile-only {
+        display: none;
+    }
 }
 
 /* Fake button for build stats */
@@ -277,7 +332,7 @@ input.equipment-input {
 }
 
 .fake-button:hover {
-    background-color: hsl(0, 0%, 14%);
+    background-color: hsl(0, 0%, 14%) !important;
 }
 
 /* material design dark mode */
@@ -317,6 +372,42 @@ input.equipment-input {
     background-color: hsl(0, 0%, 16%) !important;
 }
 
+.dark-1u {
+    background-color: hsl(0, 0%, 5%);
+}
+
+.dark-2u {
+    background-color: hsl(0, 0%, 7%);
+}
+
+.dark-3u {
+    background-color: hsl(0, 0%, 8%);
+}
+
+.dark-4u {
+    background-color: hsl(0, 0%, 9%);
+}
+
+.dark-5u {
+    background-color: hsl(0, 0%, 11%);
+}
+
+.dark-6u {
+    background-color: hsl(0, 0%, 12%);
+}
+
+.dark-7u {
+    background-color: hsl(0, 0%, 14%);
+}
+
+.dark-8u {
+    background-color: hsl(0, 0%, 15%);
+}
+
+.dark-9u {
+    background-color: hsl(0, 0%, 16%);
+}
+
 .dark-shadow {
     box-shadow: 0rem 0rem 1.25rem 0.1875rem black;
 }

sq2bs.js

@@ -1,12 +1,13 @@
-let equipment_keys = ['weapon', 'helmet', 'chestplate', 'leggings', 'boots', 'ring1', 'ring2', 'bracelet', 'necklace'];
+let equipment_keys = ['helmet', 'chestplate', 'leggings', 'boots', 'ring1', 'ring2', 'bracelet', 'necklace', 'weapon'];
 let weapon_keys = ['dagger', 'wand', 'bow', 'relik', 'spear']
 let skp_keys = ['str', 'dex', 'int', 'def', 'agi'];
 
 document.addEventListener('DOMContentLoaded', function() {
 
-    for (const i in equipment_keys) {
+    for (const eq of equipment_keys) {
-        document.querySelector("#"+equipment_keys[i]+"-choice").setAttribute("oninput", "calcBuildSchedule()");
+        document.querySelector("#"+eq+"-choice").setAttribute("oninput", "update_field('"+ eq +"'); calcBuildSchedule();");
-        document.querySelector("#"+equipment_keys[i]+"-powder").setAttribute("oninput", "calcBuildSchedule()");
+        document.querySelector("#"+eq+"-powder").setAttribute("oninput", "calcBuildSchedule();");
+        document.querySelector("#"+eq+"-tooltip").setAttribute("onclick", "collapse_element('"+ eq +"')");
     }
     document.querySelector("#level-choice").setAttribute("oninput", "calcBuildSchedule()")
 
@@ -15,6 +16,23 @@ document.addEventListener('DOMContentLoaded', function() {
     for (i = 0; i < skp_fields.length; i++) {
         skp_fields[i].setAttribute("oninput", "updateStatSchedule()");
     }
+
+    let masonry = Macy({
+        container: "#masonry-container",
+        columns: 1,
+        mobileFirst: true,
+        breakAt: {
+            1200: 4,
+        },
+        margin: {
+            x: 20,
+            y: 20,
+        }
+        
+    });
+
+    
+
 });
 
 // phanta scheduler
@@ -29,7 +47,7 @@ function calcBuildSchedule(){
     calcBuildTask = setTimeout(function(){
         calcBuildTask = null;
         calculateBuild();
-    }, 1000);
+    }, 500);
 }
 
 function updateStatSchedule(){
@@ -53,77 +71,130 @@ function doSearchSchedule(){
 }
 
 // equipment field dynamic styling
+function update_field(field) {
+    // built on the assumption of no one will type in CI/CR letter by letter
+    // resets 
+    document.querySelector("#"+field+"-choice").classList.remove("text-light", "is-invalid", 'Normal', 'Unique', 'Rare', 'Legendary', 'Fabled', 'Mythic', 'Set');
 
-function update_fields() {
+    item = document.querySelector("#"+field+"-choice").value
-    for (const i in equipment_keys) {
+    let powder_slots;
+    let tier;
+    let category;
+    let type;
 
-        // resets
+    // get item info
-        document.querySelector("#"+equipment_keys[i]+"-choice").classList.remove("text-light", "is-invalid", 'Normal', 'Unique', 'Rare', 'Legendary', 'Fabled', 'Mythic', 'Set');
+    if (item.slice(0, 3) == "CI-") {
-        console.log(document.querySelector("#"+equipment_keys[i]+"-choice").value)
+        item = getCustomFromHash(item);
-        let item = player_build[equipment_keys[i]];
+        powder_slots = item.statMap.get("slots");
-
+        tier = item.statMap.get("tier");
-        if ((item.get('name') == 'No '+ equipment_keys[i].charAt(0).toUpperCase() + equipment_keys[i].slice(1)) && (document.querySelector("#"+equipment_keys[i]+"-choice").value)) {
+        category = item.statMap.get("category");
-            document.querySelector("#"+equipment_keys[i]+"-choice").classList.add("text-light", "is-invalid");
+        type = item.statMap.get("type");
-            document.querySelector("#"+equipment_keys[i]+"-powder").disabled = true;
-            continue;
-        }
-
-        // set input text color
-        document.querySelector("#"+equipment_keys[i]+"-choice").classList.add(item.get('tier'));
-        
-        // set powder slots
-        document.querySelector("#"+equipment_keys[i]+"-powder").setAttribute("placeholder", item.get('slots')+" slots");
-
-        if (item.get('slots') == 0) {
-            document.querySelector("#"+equipment_keys[i]+"-powder").disabled = true;
-        } else {
-            document.querySelector("#"+equipment_keys[i]+"-powder").disabled = false;
-        }
-
-        // set weapon image
-        if (item.get('category') == 'weapon') {
-            document.querySelector("#weapon-img").setAttribute('src', 'media/items/new/generic-'+item.get('type')+'.png');
-        }
     }
+    else if (item.slice(0, 3) == "CR-") {
+        item = getCraftFromHash(item);
+        powder_slots = item.statMap.get("slots");
+        tier = item.statMap.get("tier");
+        category = item.statMap.get("category");
+        type = item.statMap.get("type");
+    } 
+    else if (itemMap.get(item)) {
+        item = itemMap.get(item);
+        if (!item) {return false;}
+        powder_slots = item.slots;
+        tier = item.tier;
+        category = item.category;
+        type = item.type;
+    } 
+    else {
+        // item not found
+        document.querySelector("#"+field+"-choice").classList.add("text-light");
+        if (item) { document.querySelector("#"+field+"-choice").classList.add("is-invalid"); }
+
+        document.querySelector("#"+equipment_keys[i]+"-powder").disabled = true;
+        return false;
+    }
+
+    // set item color
+    document.querySelector("#"+field+"-choice").classList.add(tier);
+
+    // set powder slots
+    document.querySelector("#"+field+"-powder").setAttribute("placeholder", powder_slots+" slots");
+
+    if (powder_slots == 0) {
+        document.querySelector("#"+field+"-powder").disabled = true;
+    } else {
+        document.querySelector("#"+field+"-powder").disabled = false;
+    }
+
+    // set weapon img
+    if (category == 'weapon') {
+        document.querySelector("#weapon-img").setAttribute('src', 'media/items/new/generic-'+type+'.png');
+    }
+
+    // call calc build
 }
 
-// tabular stats
+
 let tabs = ['all-stats', 'minimal-offensive-stats', 'minimal-defensive-stats'];
 
 function show_tab(tab) {
+    collapse_element("helmet");
     for (const i in tabs) {
         document.querySelector("#"+tabs[i]).style.display = "none";
     }
     document.querySelector("#"+tab).style.display = "";
 }
 
+function toggle_boost_tab(tab) {
+    for (const i of skp_keys) {
+        document.querySelector("#"+i+"-boost").style.display = "none";
+    }
+    document.querySelector("#"+tab+"-boost").style.display = "";
+}
+
+function collapse_element(eq) {
+    elem_list = document.querySelector("#"+eq+"-tooltip").children
+    for (elem of elem_list) {
+        if (elem.classList.contains("no-collapse")) { continue; }
+        if (elem.style.display == "none") {
+            elem.style.display = "";
+        } else {
+            elem.style.display = "none";
+        }   
+    }
+    // macy quirk
+    window.dispatchEvent(new Event('resize'));
+    // weird bug where display: none overrides??
+    document.querySelector("#"+eq+"-tooltip").style.display = "";
+}
+
 // autocomplete initialize
 function init_autocomplete() {
     let dropdowns = new Map()
-    for (const i in equipment_keys) {
+    for (const eq of equipment_keys) {
         // build dropdown
-        console.log('init dropdown for '+ equipment_keys[i])
+        console.log('init dropdown for '+ eq)
         let item_arr = [];
-        if (equipment_keys[i] == 'weapon') {
+        if (eq == 'weapon') {
             for (const weaponType of weapon_keys) {
                 for (const weapon of itemLists.get(weaponType)) {
                     let item_obj = itemMap.get(weapon);
                     if (item_obj["restrict"] && item_obj["restrict"] === "DEPRECATED") {
                         continue;
                     }
-                    if (item_obj["name"] == 'No '+ equipment_keys[i].charAt(0).toUpperCase() + equipment_keys[i].slice(1)) {
+                    if (item_obj["name"] == 'No '+ eq.charAt(0).toUpperCase() + eq.slice(1)) {
                         continue;
                     }
                     item_arr.push(weapon);
                 }
             }
         } else {
-            for (const item of itemLists.get(equipment_keys[i].replace(/[0-9]/g, ''))) {
+            for (const item of itemLists.get(eq.replace(/[0-9]/g, ''))) {
                 let item_obj = itemMap.get(item);
                 if (item_obj["restrict"] && item_obj["restrict"] === "DEPRECATED") {
                     continue;
                 }
-                if (item_obj["name"] == 'No '+ equipment_keys[i].charAt(0).toUpperCase() + equipment_keys[i].slice(1)) {
+                if (item_obj["name"] == 'No '+ eq.charAt(0).toUpperCase() + eq.slice(1)) {
                     continue;
                 }
                 item_arr.push(item)
@@ -131,11 +202,11 @@ function init_autocomplete() {
         }
 
         // create dropdown
-        dropdowns.set(equipment_keys[i], new autoComplete({
+        dropdowns.set(eq, new autoComplete({
             data: {
                 src: item_arr
             },
-            selector: "#"+ equipment_keys[i] +"-choice",
+            selector: "#"+ eq +"-choice",
             wrapper: false,
             resultsList: {
                 tabSelect: true,
@@ -143,7 +214,7 @@ function init_autocomplete() {
                 class: "search-box dark-7 rounded-bottom px-2 fw-bold dark-shadow-sm",
                 element: (list, data) => {
                     // dynamic result loc
-                    let position = document.getElementById(equipment_keys[i]+'-dropdown').getBoundingClientRect();
+                    let position = document.getElementById(eq+'-dropdown').getBoundingClientRect();
                     list.style.top = position.bottom + window.scrollY +"px";
                     list.style.left = position.x+"px";
                     list.style.width = position.width+"px";
@@ -151,8 +222,7 @@ function init_autocomplete() {
                     if (!data.results.length) {
                         message = document.createElement('li');
                         message.classList.add('scaled-font');
-                        message.textContent = "Add: "+ data.query;
+                        message.textContent = "No results found!";
-                        message.value = data.query;
                         list.prepend(message);
                     }
                 },
@@ -170,11 +240,11 @@ function init_autocomplete() {
                         if (event.detail.selection.value) {
                             event.target.value = event.detail.selection.value;
                         }
-                        update_fields(equipment_keys[i]);
+                        update_field(eq);
                         calcBuildSchedule();
                     },
                 },
             }
         }));
     }
-}
+}

sq2builder.js

@@ -72,6 +72,9 @@ let powderInputs = [
 function init() {
     console.log("builder.js init");
     init_autocomplete();
+    for (const i of equipment_keys) {
+        update_field(i);
+    }
     decodeBuild(url_tag);
 }
 
@@ -639,8 +642,9 @@ function updatePowderSpecials(buttonId, recalcStats) {
     if (recalcStats) {
         calculateBuildStats();
     }
-    displayPowderSpecials(document.getElementById("powder-special-stats"), powderSpecials, player_build); 
+    displaysq2PowderSpecials(document.getElementById("powder-special-stats"), powderSpecials, player_build, true); 
 }
+
 /* Calculates all build statistics and updates the entire display.
 */
 function calculateBuildStats() {
@@ -738,11 +742,10 @@ function calculateBuildStats() {
     }
 
     for (let i in player_build.items) {
-        // displaysq2ExpandedItem(player_build.items[i], buildFields[i], true);
+        displaysq2ExpandedItem(player_build.items[i], buildFields[i], false);
+        collapse_element(equipment_keys[i]);
     }
 
-    update_fields()
-
     displaysq2ArmorStats(player_build);
     displaysq2BuildStats("all-stats", player_build, build_all_display_commands);
     displaysq2BuildStats("minimal-offensive-stats",player_build, build_offensive_display_commands);

sq2display.js

@@ -145,39 +145,27 @@ function displaysq2ExpandedItem(item, parent_id, mini=false){
     } else if (item.get("category") === "armor") { 
     }
 
-    let display_commands = item_display_commands;
+    let display_commands = sq2_item_display_commands;
 
     // Clear the parent div.
     setHTML(parent_id, "");
     let parent_div = document.getElementById(parent_id);
     
-    let active_elem;
     let fix_id = item.has("fixID") && item.get("fixID");
     let elemental_format = false;
     for (let i = 0; i < display_commands.length; i++) {
         const command = display_commands[i];
-        if (command.charAt(0) === "#") {
+        if (command.charAt(0) === "!") {
-            if (command === "#cdiv") {
-                active_elem = document.createElement('div');
-                active_elem.classList.add('center');
-            }
-            else if (command === "#ldiv") {
-                active_elem = document.createElement('div');
-                active_elem.classList.add('left');
-            }
-            else if (command === "#table") {
-                active_elem = document.createElement('table');
-                active_elem.style.width = "100%";
-            }
-            
-            active_elem.classList.add('item-margin');
-            parent_div.appendChild(active_elem);
-        }
-        else if (command.charAt(0) === "!") {
             // TODO: This is sooo incredibly janky.....
             if (command === "!elemental") {
                 elemental_format = !elemental_format;
-            } 
+            }
+            else if (command === "!spacer") {
+                let spacer = document.createElement('div');
+                spacer.classList.add("row", "my-2");
+                parent_div.appendChild(spacer);
+                continue;
+            }
         }
         else {
             let id = command; 
@@ -189,13 +177,13 @@ function displaysq2ExpandedItem(item, parent_id, mini=false){
                     }
                 }
                 if (id === "slots") {
-                    let p_elem = document.createElement("p");
+                    let p_elem = document.createElement("div");
-                    p_elem.classList.add('itemp')
+                    p_elem.classList.add("col");
+                    
                     // PROPER POWDER DISPLAYING
                     let numerals = new Map([[1, "I"], [2, "II"], [3, "III"], [4, "IV"], [5, "V"], [6, "VI"]]);
 
                     let powderPrefix = document.createElement("b");
-                    powderPrefix.classList.add("powderLeft"); powderPrefix.classList.add("left");
                     powderPrefix.textContent = "Powder Slots: " + item.get(id) + " [";
                     p_elem.appendChild(powderPrefix);
                     
@@ -208,22 +196,21 @@ function displaysq2ExpandedItem(item, parent_id, mini=false){
                     }
 
                     let powderSuffix = document.createElement("b");
-                    powderSuffix.classList.add("powderRight"); powderSuffix.classList.add("left"); 
                     powderSuffix.textContent = "]";
                     p_elem.appendChild(powderSuffix);
-                    active_elem.appendChild(p_elem);
+                    parent_div.appendChild(p_elem);
                 } else if (id === "set") {
                     if (item.get("hideSet")) { continue; }
 
-                    let p_elem = document.createElement("p");
+                    let p_elem = document.createElement("div");
-                    p_elem.classList.add("itemp");
+                    p_elem.classList.add("col");
                     p_elem.textContent = "Set: " + item.get(id).toString();
-                    active_elem.appendChild(p_elem);
+                    parent_div.appendChild(p_elem);
                 } else if (id === "majorIds") {
                     console.log(item.get(id));
                     for (let majorID of item.get(id)) {
-                        let p_elem = document.createElement("p");
+                        let p_elem = document.createElement("div");
-                        p_elem.classList.add("itemp");
+                        p_elem.classList.add("col");
 
                         let title_elem = document.createElement("b");
                         let b_elem = document.createElement("b");
@@ -244,17 +231,16 @@ function displaysq2ExpandedItem(item, parent_id, mini=false){
                             b_elem.textContent = name;
                             p_elem.appendChild(b_elem);
                         }
-                        active_elem.appendChild(p_elem);
+                        parent_div.appendChild(p_elem);
                     }
                 } else if (id === "lvl" && item.get("tier") === "Crafted") {
-                    let p_elem = document.createElement("p");
+                    let p_elem = document.createElement("div");
-                    p_elem.classList.add("itemp");
+                    p_elems.classList.add("col");
                     p_elem.textContent = "Combat Level Min: " + item.get("lvlLow") + "-" + item.get(id);
-                    active_elem.appendChild(p_elem);
+                    parent_div.appendChild(p_elem);
                 } else if (id === "displayName") {
-                    let p_elem = document.createElement("a");
+                    let p_elem = document.createElement("div");
-                    p_elem.classList.add('itemp');
+                    p_elem.classList.add("col", "text-center", "no-collapse");
-                    p_elem.classList.add("smalltitle");
                     p_elem.classList.add(item.has("tier") ? item.get("tier").replace(" ","") : "none");
                     
                     if (item.get("custom")) {
@@ -268,44 +254,40 @@ function displaysq2ExpandedItem(item, parent_id, mini=false){
                         p_elem.textContent = item.get("displayName");
                     }
 
-                    p_elem.target = "_blank";
+                    parent_div.appendChild(p_elem);
-                    active_elem.appendChild(p_elem);
                     let img = document.createElement("img");
                     if (item && item.has("type")) {
                         img.src = "./media/items/" + (newIcons ? "new/":"old/") + "generic-" + item.get("type") + ".png";
                         img.alt = item.get("type");
                         if (mini) {
-                            img.style = " z=index: 1;max-width: 32px; max-height: 32px; position: relative; top: 50%; transform: translateY(-50%);";
+                            img.style = " z=index: 1; position: relative;";
                         } else {
-                            img.style = " z=index: 1;max-width: 48px; max-height: 48px; position: relative; top: 50%; transform: translateY(-50%);";
+                            img.style = " z=index: 1; position: relative;";
                         }
-                        let bckgrd = document.createElement("p");
+                        let bckgrd = document.createElement("div");
+                        bckgrd.classList.add("col", "px-0", "d-flex", "align-items-center", "justify-content-center", "no-collapse");
                         if  (mini) {
-                            bckgrd.style = "width: 48px; height: 48px; border-radius: 50%;background-image: radial-gradient(closest-side, " + colorMap.get(item.get("tier")) + " 20%," + "#121516 80%); margin-left: auto; margin-right: auto;"
+                            bckgrd.style = "border-radius: 50%;background-image: radial-gradient(closest-side, " + colorMap.get(item.get("tier")) + " 20%," + "hsl(0, 0%, 16%) 80%); margin-left: auto; margin-right: auto;"
                         } else {
-                            bckgrd.style = "width: 64px; height: 64px; border-radius: 50%;background-image: radial-gradient(closest-side, " + colorMap.get(item.get("tier")) + " 20%," + "#121516 80%); margin-left: auto; margin-right: auto;"
+                            bckgrd.style = "border-radius: 50%;background-image: radial-gradient(closest-side, " + colorMap.get(item.get("tier")) + " 20%," + "hsl(0, 0%, 16%) 80%); margin-left: auto; margin-right: auto;"
+                            bckgrd.classList.add("scaled-bckgrd");
                         }
-                        bckgrd.classList.add("center");
+                        parent_div.appendChild(bckgrd);
-                        bckgrd.classList.add("itemp");
-                        active_elem.appendChild(bckgrd);
                         bckgrd.appendChild(img);
                     }
                 } else {
                     let p_elem;
-                    if ( !(item.get("tier") === "Crafted" && item.get("category") === "armor" && id === "hp") && (!skp_order.includes(id)) || (skp_order.includes(id) && item.get("tier") !== "Crafted" && active_elem.nodeName === "DIV") ) { //skp warp
+                    if ( !(item.get("tier") === "Crafted" && item.get("category") === "armor" && id === "hp") && (!skp_order.includes(id)) || (skp_order.includes(id) && item.get("tier") !== "Crafted" && parent_div.nodeName === "table") ) { //skp warp
-                        p_elem = displaysq2FixedID(active_elem, id, item.get(id), elemental_format);
+                        p_elem = displaysq2FixedID(parent_div, id, item.get(id), elemental_format);
                     } else if (item.get("tier") === "Crafted" && item.get("category") === "armor" && id === "hp") {
-                        p_elem = displaysq2FixedID(active_elem, id, item.get(id+"Low")+"-"+item.get(id), elemental_format);
+                        p_elem = displaysq2FixedID(parent_div, id, item.get(id+"Low")+"-"+item.get(id), elemental_format);
                     }
                     if (id === "lore") {
                         p_elem.style = "font-style: italic";
-                        p_elem.classList.add("lore");
                     } else if (skp_order.includes(id)) { //id = str, dex, int, def, or agi
-                        if ( item.get("tier") !== "Crafted" && active_elem.nodeName === "DIV") {
+                        if ( item.get("tier") !== "Crafted" && parent_div.nodeName === "DIV") {
-                            p_elem.textContent = "";
+                            row = document.createElement("div");
-                            p_elem.classList.add("itemp");
+                            row.classList.add("col");
-                            row = document.createElement("p");
-                            row.classList.add("left");
                             
                             let title = document.createElement("b");
                             title.textContent = idPrefixes[id] + " ";
@@ -318,10 +300,10 @@ function displaysq2ExpandedItem(item, parent_id, mini=false){
                             boost.textContent = item.get(id);
                             row.appendChild(title);
                             row.appendChild(boost);
-                            p_elem.appendChild(row);
+                            parent_div.appendChild(row);
-                        } else if ( item.get("tier") === "Crafted" && active_elem.nodeName === "TABLE") {
+                        } else if ( item.get("tier") === "Crafted" && parent_div.nodeName === "TABLE") {
                             let row = displaysq2RolledID(item, id, elemental_format);
-                            active_elem.appendChild(row);
+                            parent_div.appendChild(row);
                         }
                     } else if (id === "restrict") {
                         p_elem.classList.add("restrict");
@@ -339,11 +321,17 @@ function displaysq2ExpandedItem(item, parent_id, mini=false){
                     style === "positive" ? style = "negative" : style = "positive"; 
                 }
                 if (fix_id) {
-                    displaysq2FixedID(active_elem, id, item.get("minRolls").get(id), elemental_format, style);
+                    p_elem = document.createElement("div");
+                    p_elem.classList.add("col", "text-nowrap");
+                    if (id == "dex") {
+                        console.log("dex activated at fix_id")
+                    }
+                    displaysq2FixedID(p_elem, id, item.get("minRolls").get(id), elemental_format, style);
+                    parent_div.appendChild(p_elem);
                 }
                 else {
                     let row = displaysq2RolledID(item, id, elemental_format);
-                    active_elem.appendChild(row);
+                    parent_div.appendChild(row);
                 }
             }else{
               // :/  
@@ -353,8 +341,8 @@ function displaysq2ExpandedItem(item, parent_id, mini=false){
     //Show powder specials ;-;
     let nonConsumables = ["relik", "wand", "bow", "spear", "dagger", "chestplate", "helmet", "leggings", "boots", "ring", "bracelet", "necklace"];
     if(nonConsumables.includes(item.get("type"))) {
-        let powder_special = document.createElement("p");
+        let powder_special = document.createElement("div");
-        powder_special.classList.add("left");
+        powder_special.classList.add("col");
         let powders = item.get("powders");
         let element = "";
         let power = 0;
@@ -375,10 +363,9 @@ function displaysq2ExpandedItem(item, parent_id, mini=false){
         if (element !== "") {//powder special is "[e,t,w,f,a]+[0,1,2,3,4]"
             let powderSpecial = powderSpecialStats[ skp_elements.indexOf(element)];
             let specialSuffixes = new Map([ ["Duration", " sec"], ["Radius", " blocks"], ["Chains", ""], ["Damage", "%"], ["Damage Boost", "%"], ["Knockback", " blocks"] ]);
-            let specialTitle = document.createElement("p");
+            let specialTitle = document.createElement("span");
-            let specialEffects = document.createElement("p");
+            let specialEffects = document.createElement("span");
-            addClasses(specialTitle, ["left", "itemp", damageClasses[skp_elements.indexOf(element) + 1]]);
+            addClasses(specialTitle, [damageClasses[skp_elements.indexOf(element) + 1]]);
-            addClasses(specialEffects, ["left", "itemp", "nocolor"]);
             let effects;
             if (item.get("category") === "weapon") {//weapon
                 effects = powderSpecial["weaponSpecialEffects"];
@@ -390,7 +377,7 @@ function displaysq2ExpandedItem(item, parent_id, mini=false){
             for (const [key,value] of effects.entries()) {
                 if (key !== "Description") {
                     let effect = document.createElement("p");
-                    effect.classList.add("itemp");
+                    effect.classList.add("m-0");
                     effect.textContent = key + ": " + value[power] + specialSuffixes.get(key);
                     if(key === "Damage"){
                         effect.textContent += elementIcons[skp_elements.indexOf(element)];
@@ -410,8 +397,8 @@ function displaysq2ExpandedItem(item, parent_id, mini=false){
     }
     
     if(item.get("tier") && item.get("tier") === "Crafted") {
-        let dura_elem = document.createElement("p");
+        let dura_elem = document.createElement("div");
-        dura_elem.classList.add("itemp");
+        dura_elem.classList.add("col");
         let dura = [];
         let suffix = "";
         if(nonConsumables.includes(item.get("type"))) {
@@ -423,8 +410,7 @@ function displaysq2ExpandedItem(item, parent_id, mini=false){
             suffix = " sec."
             let charges = document.createElement("b");
             charges.textContent = "Charges: " + item.get("charges");
-            charges.classList.add("spaceleft");
+            parent_div.appendChild(charges);
-            active_elem.appendChild(charges);
         }
 
         if (typeof(dura) === "string") {
@@ -432,16 +418,16 @@ function displaysq2ExpandedItem(item, parent_id, mini=false){
         } else {
             dura_elem.textContent += dura[0]+"-"+dura[1] + suffix;
         }
-        active_elem.append(dura_elem);
+        parent_div.append(dura_elem);
 
     }
     //Show item tier
     if (item.get("tier") && item.get("tier") !== " ") {
-        let item_desc_elem = document.createElement("p");
+        let item_desc_elem = document.createElement("div");
-        item_desc_elem.classList.add('itemp');
+        item_desc_elem.classList.add("col");
         item_desc_elem.classList.add(item.get("tier"));
         item_desc_elem.textContent = item.get("tier")+" "+item.get("type");
-        active_elem.append(item_desc_elem);
+        parent_div.append(item_desc_elem);
     }
 
     //Show item hash if applicable
@@ -452,7 +438,7 @@ function displaysq2ExpandedItem(item, parent_id, mini=false){
         item_desc_elem.style.wordWrap = "break-word";
         item_desc_elem.style.wordBreak = "break-word";
         item_desc_elem.textContent = item.get("hash");
-        active_elem.append(item_desc_elem);
+        parent_div.append(item_desc_elem);
     }
 
     if (item.get("category") === "weapon") { 
@@ -476,10 +462,14 @@ function displaysq2ExpandedItem(item, parent_id, mini=false){
 }
 
 function displaysq2RolledID(item, id, elemental_format) {
-    let row = document.createElement('tr');
+    let row = document.createElement('div');
-    let min_elem = document.createElement('td');
+    row.classList.add('col');
-    min_elem.classList.add('shaded-table');
+
-    min_elem.classList.add('left');
+    let item_div = document.createElement('div');
+    item_div.classList.add('row');
+
+    let min_elem = document.createElement('div');
+    min_elem.classList.add('col', 'text-start');
     let id_min = item.get("minRolls").get(id)
     let style = id_min < 0 ? "negative" : "positive";
     if(reversedIDs.includes(id)){
@@ -487,11 +477,10 @@ function displaysq2RolledID(item, id, elemental_format) {
     }
     min_elem.classList.add(style);
     min_elem.textContent = id_min + idSuffixes[id];
-    row.appendChild(min_elem);
+    item_div.appendChild(min_elem);
 
-    let desc_elem = document.createElement('td');
+    let desc_elem = document.createElement('div');
-    desc_elem.classList.add('center');
+    desc_elem.classList.add('col', 'text-center', 'text-nowrap');
-    desc_elem.classList.add('shaded-table')
     //TODO elemental format jank
     if (elemental_format) {
         apply_elemental_format(desc_elem, id);
@@ -499,19 +488,19 @@ function displaysq2RolledID(item, id, elemental_format) {
     else {
         desc_elem.textContent = idPrefixes[id];
     }
-    row.appendChild(desc_elem);
+    item_div.appendChild(desc_elem);
 
-    let max_elem = document.createElement('td');
+    let max_elem = document.createElement('div');
     let id_max = item.get("maxRolls").get(id)
-    max_elem.classList.add('right');
+    max_elem.classList.add('col', 'text-end');
-    max_elem.classList.add('shaded-table')
     style = id_max < 0 ? "negative" : "positive";
     if(reversedIDs.includes(id)){
         style === "positive" ? style = "negative" : style = "positive"; 
     }
     max_elem.classList.add(style);
     max_elem.textContent = id_max + idSuffixes[id];
-    row.appendChild(max_elem);
+    item_div.appendChild(max_elem);
+    row.appendChild(item_div);
     return row;
 }
 
@@ -573,8 +562,8 @@ function displaysq2FixedID(active, id, value, elemental_format, style) {
         if (value === "0-0" || value === "0-0\u279c0-0") {
             return;
         }
-        let p_elem = document.createElement('p');
+        let p_elem = document.createElement('div');
-        p_elem.classList.add('itemp');
+        p_elem.classList.add('col');
         if (elemental_format) {
             apply_elemental_format(p_elem, id, value);
         }
@@ -1029,8 +1018,11 @@ function displaysq2DefenseStats(parent_elem, build, insertSummary){
     }
 }
 
-function displaysq2PowderSpecials(parent_elem, powderSpecials, build) {
+function displaysq2PowderSpecials(parent_elem, powderSpecials, build, overall=false) {
-    parent_elem.textContent = "Powder Specials";
+    parent_elem.textContent = ""
+    let title = document.createElement("b");
+    title.textContent = "Powder Specials";
+    parent_elem.appendChild(title);
     let specials = powderSpecials.slice();
     let stats = build.statMap;
     let expandedStats = new Map();
@@ -1038,29 +1030,27 @@ function displaysq2PowderSpecials(parent_elem, powderSpecials, build) {
     for (special of specials) {
         //iterate through the special and display its effects.
         let powder_special = document.createElement("p");
-        powder_special.classList.add("left");
         let specialSuffixes = new Map([ ["Duration", " sec"], ["Radius", " blocks"], ["Chains", ""], ["Damage", "%"], ["Damage Boost", "%"], ["Knockback", " blocks"] ]);
         let specialTitle = document.createElement("p");
         let specialEffects = document.createElement("p");
-        specialTitle.classList.add("left");
         specialTitle.classList.add(damageClasses[powderSpecialStats.indexOf(special[0]) + 1]);
-        specialEffects.classList.add("left");
         let effects = special[0]["weaponSpecialEffects"];
         let power = special[1];
         specialTitle.textContent = special[0]["weaponSpecialName"] + " " + Math.floor((power-1)*0.5 + 4) + (power % 2 == 0 ? ".5" : "");  
-        for (const [key,value] of effects) {
-            let effect = document.createElement("p");
-            effect.classList.add("item-margin");
-            effect.textContent += key + ": " + value[power-1] + specialSuffixes.get(key);
-            if(key === "Damage"){
-                effect.textContent += elementIcons[powderSpecialStats.indexOf(special[0])];
-            }
-            if(special[0]["weaponSpecialName"] === "Wind Prison" && key === "Damage Boost") {
-                effect.textContent += " (only 1st hit)";
-            }
-            specialEffects.appendChild(effect);
-        }
 
+        if (!overall || powderSpecialStats.indexOf(special[0]) == 2 || powderSpecialStats.indexOf(special[0]) == 3 || powderSpecialStats.indexOf(special[0]) == 4) {
+            for (const [key,value] of effects) {
+                let effect = document.createElement("p");
+                effect.textContent += key + ": " + value[power-1] + specialSuffixes.get(key);
+                if(key === "Damage"){
+                    effect.textContent += elementIcons[powderSpecialStats.indexOf(special[0])];
+                }
+                if(special[0]["weaponSpecialName"] === "Wind Prison" && key === "Damage Boost") {
+                    effect.textContent += " (only 1st hit)";
+                }
+                specialEffects.appendChild(effect);
+            }
+        }
         powder_special.appendChild(specialTitle);
         powder_special.appendChild(specialEffects);
 
@@ -1090,62 +1080,69 @@ function displaysq2PowderSpecials(parent_elem, powderSpecials, build) {
             let critAverage = (totalDamCrit[0]+totalDamCrit[1])/2 || 0;
             let averageDamage = (1-critChance)*nonCritAverage+critChance*critAverage || 0;
 
-            let averageLabel = document.createElement("p");
+            let averageWrap = document.createElement("p");
-            averageLabel.textContent = "Average: "+averageDamage.toFixed(2);
+            let averageLabel = document.createElement("span");
-            averageLabel.classList.add("damageSubtitle");
+            averageLabel.textContent = "Average: ";
-            averageLabel.classList.add("item-margin");
-            specialDamage.append(averageLabel);
-
-
-            let nonCritLabel = document.createElement("p");
-            nonCritLabel.textContent = "Non-Crit Average: "+nonCritAverage.toFixed(2);
-            nonCritLabel.classList.add("damageSubtitle");
-            nonCritLabel.classList.add("item-margin");
-            specialDamage.append(nonCritLabel);
             
-            for (let i = 0; i < 6; i++){
+            let averageLabelDmg = document.createElement("span");
-                if (results[i][1] > 0){
+            averageLabelDmg.classList.add("Damage");
-                    let p = document.createElement("p");
+            averageLabelDmg.textContent = averageDamage.toFixed(2);
-                    p.classList.add("damagep");
-                    p.classList.add(damageClasses[i]);
-                    p.textContent = results[i][0]+"-"+results[i][1];
-                    specialDamage.append(p);
-                }
-            }
-            let normalDamage = document.createElement("p");
-            normalDamage.textContent = "Total: " + totalDamNormal[0].toFixed(2) + "-" + totalDamNormal[1].toFixed(2);
-            normalDamage.classList.add("itemp");
-            specialDamage.append(normalDamage);
 
-            let nonCritChanceLabel = document.createElement("p");
+            averageWrap.appendChild(averageLabel);
-            nonCritChanceLabel.textContent = "Non-Crit Chance: " + ((1-critChance)*100).toFixed(2)  + "%";
+            averageWrap.appendChild(averageLabelDmg);
-            specialDamage.append(nonCritChanceLabel);
+            specialDamage.appendChild(averageWrap);
-
-            let critLabel = document.createElement("p");
-            critLabel.textContent = "Crit Average: "+critAverage.toFixed(2);
-            critLabel.classList.add("damageSubtitle");
-            critLabel.classList.add("item-margin");
             
-            specialDamage.append(critLabel);
+            if (!overall) {
-            for (let i = 0; i < 6; i++){
+                let nonCritLabel = document.createElement("p");
-                if (results[i][1] > 0){
+                nonCritLabel.textContent = "Non-Crit Average: "+nonCritAverage.toFixed(2);
-                    let p = document.createElement("p");
+                nonCritLabel.classList.add("damageSubtitle");
-                    p.classList.add("damagep");
+                nonCritLabel.classList.add("item-margin");
-                    p.classList.add(damageClasses[i]);
+                specialDamage.append(nonCritLabel);
-                    p.textContent = results[i][2]+"-"+results[i][3];
+                
-                    specialDamage.append(p);
+                for (let i = 0; i < 6; i++){
+                    if (results[i][1] > 0){
+                        let p = document.createElement("p");
+                        p.classList.add("damagep");
+                        p.classList.add(damageClasses[i]);
+                        p.textContent = results[i][0]+"-"+results[i][1];
+                        specialDamage.append(p);
+                    }
                 }
+                let normalDamage = document.createElement("p");
+                normalDamage.textContent = "Total: " + totalDamNormal[0].toFixed(2) + "-" + totalDamNormal[1].toFixed(2);
+                normalDamage.classList.add("itemp");
+                specialDamage.append(normalDamage);
+
+                let nonCritChanceLabel = document.createElement("p");
+                nonCritChanceLabel.textContent = "Non-Crit Chance: " + ((1-critChance)*100).toFixed(2)  + "%";
+                specialDamage.append(nonCritChanceLabel);
+
+                let critLabel = document.createElement("p");
+                critLabel.textContent = "Crit Average: "+critAverage.toFixed(2);
+                critLabel.classList.add("damageSubtitle");
+                critLabel.classList.add("item-margin");
+                
+                specialDamage.append(critLabel);
+                for (let i = 0; i < 6; i++){
+                    if (results[i][1] > 0){
+                        let p = document.createElement("p");
+                        p.classList.add("damagep");
+                        p.classList.add(damageClasses[i]);
+                        p.textContent = results[i][2]+"-"+results[i][3];
+                        specialDamage.append(p);
+                    }
+                }
+                let critDamage = document.createElement("p");
+                critDamage.textContent = "Total: " + totalDamCrit[0].toFixed(2) + "-" + totalDamCrit[1].toFixed(2);
+                critDamage.classList.add("itemp");
+                specialDamage.append(critDamage);
+
+                let critChanceLabel = document.createElement("p");
+                critChanceLabel.textContent = "Crit Chance: " + (critChance*100).toFixed(2) + "%";
+                specialDamage.append(critChanceLabel);
+
+                save_damages.push(averageDamage);
             }
-            let critDamage = document.createElement("p");
-            critDamage.textContent = "Total: " + totalDamCrit[0].toFixed(2) + "-" + totalDamCrit[1].toFixed(2);
-            critDamage.classList.add("itemp");
-            specialDamage.append(critDamage);
-
-            let critChanceLabel = document.createElement("p");
-            critChanceLabel.textContent = "Crit Chance: " + (critChance*100).toFixed(2) + "%";
-            specialDamage.append(critChanceLabel);
-
-            save_damages.push(averageDamage);
 
             powder_special.append(specialDamage);
         } 

sq2display_constants.js

@@ -58,3 +58,51 @@ let build_basic_display_commands = [
     "atkTier",
 ]
 
+let sq2_item_display_commands = [
+    "displayName",
+    "atkSpd",
+    "!elemental",
+    "hp",
+    "nDam_", "fDam_", "wDam_", "aDam_", "tDam_", "eDam_",
+    "!spacer",
+    "fDef", "wDef", "aDef", "tDef", "eDef",
+    "!elemental",
+    "classReq",
+    "lvl",
+    "strReq", "dexReq", "intReq", "defReq","agiReq",
+    "!spacer",
+    "str", "dex", "int", "def", "agi",
+    "hpBonus",
+    "hprRaw", "hprPct",
+    "sdRaw", "sdPct",
+    "mdRaw", "mdPct",
+    "mr", "ms",
+    "ref", "thorns",
+    "ls",
+    "poison",
+    "expd",
+    "spd",
+    "atkTier",
+    "!elemental",
+    "fDamPct", "wDamPct", "aDamPct", "tDamPct", "eDamPct",
+    "fDefPct", "wDefPct", "aDefPct", "tDefPct", "eDefPct",
+    "!elemental",
+    "spPct1", "spRaw1", "spPct2", "spRaw2", "spPct3", "spRaw3", "spPct4", "spRaw4",
+    "rainbowRaw",
+    "sprint", "sprintReg",
+    "jh",
+    "xpb", "lb", "lq",
+    "spRegen",
+    "eSteal",
+    "gXp", "gSpd",
+    "majorIds",
+    "!spacer",
+    "slots",
+    "!spacer",
+    "set",
+    "lore",
+    "quest",
+    "restrict"
+];
+
+