diff --git a/js/display.js b/js/display.js index c2ca48b..02104a5 100644 --- a/js/display.js +++ b/js/display.js @@ -1,23 +1,10 @@ /** - * Apply armor powdering. - * Applies twice for crafted items because wynn. - * Also for jeweling for crafted items. - */ -function applyArmorPowders(expandedItem, powders) { - applyArmorPowdersOnce(expandedItem, powders); - // NOTE: armor powder only applies once! - //if (expandedItem.get("crafted")) { - // applyArmorPowdersOnce(expandedItem, powders); - //} -} - -/** - * Apply armor powders once only. + * Apply armor powders. * Encoding shortcut assumes that all powders give +def to one element * and -def to the element "behind" it in cycle ETWFA, which is true * as of now and unlikely to change in the near future. */ -function applyArmorPowdersOnce(expandedItem, powders) { +function applyArmorPowders(expandedItem, powders) { for(const id of powders){ let powder = powderStats[id]; let name = powderNames.get(id).charAt(0); @@ -33,12 +20,12 @@ function apply_elemental_format(p_elem, id, suffix) { let parts = idPrefixes[id].split(/ (.*)/); let element_prefix = parts[0]; let desc = parts[1]; - let i_elem = document.createElement('b'); + let i_elem = document.createElement('span'); i_elem.classList.add(element_prefix); i_elem.textContent = element_prefix; p_elem.appendChild(i_elem); - let i_elem2 = document.createElement('b'); + let i_elem2 = document.createElement('span'); i_elem2.textContent = " " + desc + suffix; p_elem.appendChild(i_elem2); } @@ -90,48 +77,20 @@ function displaySetBonuses(parent_id,build) { } -function displayBuildStats(parent_id,build){ +function displayBuildStats(parent_id,build,command_group){ // Commands to "script" the creation of nice formatting. // #commands create a new element. // !elemental is some janky hack for elemental damage. // normals just display a thing. - let display_commands = build_overall_display_commands; - - // Clear the parent div. - setHTML(parent_id, ""); + let display_commands = command_group; let parent_div = document.getElementById(parent_id); - let title = document.createElement("p"); - title.classList.add("itemcenter"); - title.classList.add("itemp"); - title.classList.add("title"); - title.classList.add("Normal"); - title.textContent = "Overall Build Stats"; - parent_div.append(title); - parent_div.append(document.createElement("br")); - - if (build.activeSetCounts.size > 0) { - let set_summary_elem = document.createElement('p'); - set_summary_elem.classList.add('itemp'); - set_summary_elem.classList.add('left'); - set_summary_elem.textContent = "Set Summary:"; - parent_div.append(set_summary_elem); - for (const [setName, count] of build.activeSetCounts) { - const active_set = sets[setName]; - if (active_set["hidden"]) { continue; } - - let set_elem = document.createElement('p'); - set_elem.classList.add('itemp'); - set_elem.classList.add('left'); - set_elem.textContent = " "+setName+" Set: "+count+"/"+sets[setName].items.length; - set_summary_elem.append(set_elem); - } + // Clear the parent div. + if (parent_div != null) { + setHTML(parent_id, ""); } - displayDefenseStats(parent_div, build, true); - let stats = build.statMap; - //console.log(build.statMap); let active_elem; let elemental_format = false; @@ -140,37 +99,35 @@ function displayBuildStats(parent_id,build){ let staticIDs = ["hp", "eDef", "tDef", "wDef", "fDef", "aDef"]; for (const command of display_commands) { + // style instructions + if (command.charAt(0) === "#") { - if (command === "#cdiv") { - active_elem = document.createElement('div'); - active_elem.classList.add('itemcenter'); + if (command === "#defense-stats") { + displayDefenseStats(parent_div, build, true); } - else if (command === "#ldiv") { - active_elem = document.createElement('div'); - active_elem.classList.add('itemleft'); - } - else if (command === "#table") { - active_elem = document.createElement('table'); - active_elem.classList.add('itemtable'); - } - parent_div.appendChild(active_elem); } - else if (command.charAt(0) === "!") { + if (command.charAt(0) === "!") { // TODO: This is sooo incredibly janky..... if (command === "!elemental") { elemental_format = !elemental_format; } } + + // id instruction else { let id = command; if (stats.get(id)) { let style = null; + + // TODO: add pos and neg style if (!staticIDs.includes(id)) { style = "positive"; if (stats.get(id) < 0) { style = "negative"; } } + + // ignore let id_val = stats.get(id); if (reversedIDs.includes(id)) { style === "positive" ? style = "negative" : style = "positive"; @@ -178,12 +135,14 @@ function displayBuildStats(parent_id,build){ if (id === "poison" && id_val > 0) { id_val = Math.ceil(id_val*build.statMap.get("poisonPct")/100); } - displayFixedID(active_elem, id, id_val, elemental_format, style); + displayFixedID(parent_div, id, id_val, elemental_format, style); if (id === "poison" && id_val > 0) { - let row = document.createElement('tr'); - let value_elem = document.createElement('td'); - value_elem.classList.add('right'); - value_elem.setAttribute("colspan", "2"); + let row = document.createElement('div'); + row.classList.add("row") + let value_elem = document.createElement('div'); + value_elem.classList.add('col'); + value_elem.classList.add('text-end'); + let prefix_elem = document.createElement('b'); prefix_elem.textContent = "\u279C With Strength: "; let number_elem = document.createElement('b'); @@ -192,23 +151,30 @@ function displayBuildStats(parent_id,build){ value_elem.append(prefix_elem); value_elem.append(number_elem); row.appendChild(value_elem); - - active_elem.appendChild(row); - } else if (id === "ls" && id_val != 0) { - let row = document.createElement("tr"); - let title = document.createElement("td"); - title.classList.add("left"); - title.textContent = "Effective Life Steal:" - let value = document.createElement("td"); - let defStats = build.getDefenseStats(); - value.textContent = Math.round(defStats[1][0]*id_val/defStats[0]) + "/3s"; - value.classList.add("right"); - value.classList.add(style); - row.appendChild(title); - row.appendChild(value); - active_elem.appendChild(row); + parent_div.appendChild(row); } - } else if (skp_order.includes(id)) { + else if (id === "ls" && id_val != 0) { + let row = document.createElement('div'); + row.classList.add("row") + let value_elem = document.createElement('div'); + value_elem.classList.add('col'); + value_elem.classList.add('text-end'); + + let prefix_elem = document.createElement('b'); + prefix_elem.textContent = "\u279C Effective LS: "; + + let defStats = build.getDefenseStats(); + let number_elem = document.createElement('b'); + number_elem.classList.add(style); + number_elem.textContent = Math.round(defStats[1][0]*id_val/defStats[0]) + "/3s"; + value_elem.append(prefix_elem); + value_elem.append(number_elem); + row.appendChild(value_elem); + parent_div.appendChild(row); + } + } + // sp thingy (WHY IS THIS HANDLED SEPARATELY TODO + else if (skp_order.includes(id)) { let total_assigned = build.total_skillpoints[skp_order.indexOf(id)]; let base_assigned = build.base_skillpoints[skp_order.indexOf(id)]; let diff = total_assigned - base_assigned; @@ -219,7 +185,7 @@ function displayBuildStats(parent_id,build){ style = "negative"; } if (diff != 0) { - displayFixedID(active_elem, id, diff, false, style); + displayFixedID(parent_div, id, diff, false, style); } } } @@ -276,38 +242,28 @@ function displayExpandedItem(item, parent_id){ } 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); + parent_div.classList.add("border", "border-2", "border-dark"); - 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 === "#cdiv") { - active_elem = document.createElement('div'); - active_elem.classList.add('itemcenter'); - } - else if (command === "#ldiv") { - active_elem = document.createElement('div'); - active_elem.classList.add('itemleft'); - } - else if (command === "#table") { - active_elem = document.createElement('table'); - active_elem.classList.add('itemtable'); - } - active_elem.style.maxWidth = "100%"; - parent_div.appendChild(active_elem); - } - else if (command.charAt(0) === "!") { + 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; @@ -319,12 +275,13 @@ function displayExpandedItem(item, parent_id){ } } if (id === "slots") { - let p_elem = document.createElement("p"); + let p_elem = document.createElement("div"); + 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); @@ -337,21 +294,21 @@ function displayExpandedItem(item, parent_id){ } 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"); - p_elem.classList.add("itemp"); + let p_elem = document.createElement("div"); + 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"); - p_elem.classList.add("itemp"); + let p_elem = document.createElement("div"); + p_elem.classList.add("col"); let title_elem = document.createElement("b"); let b_elem = document.createElement("b"); @@ -372,60 +329,94 @@ function displayExpandedItem(item, parent_id){ 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"); - p_elem.classList.add("itemp"); + let p_elem = document.createElement("div"); + p_elem.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"); - p_elem.classList.add('itemp'); - p_elem.classList.add("smalltitle"); - p_elem.classList.add(item.has("tier") ? item.get("tier").replace(" ","") : "none"); + let row = document.createElement("div"); + + let a_elem = document.createElement("a"); + row.classList.add("row", "justify-content-center"); + a_elem.classList.add("col-auto", "text-center", "item-title", "p-0"); + a_elem.classList.add(item.has("tier") ? item.get("tier").replace(" ","") : "Normal"); + // a_elem.style.textGrow = 1; + row.appendChild(a_elem); + + /* + FUNCTIONALITY FOR THIS FEATURE HAS SINCE BEEN REMOVED (WITH SQ2). + IF WE WANT TO USE IT IN THE FUTURE, I'VE LEFT THE CODE TO ADD IT IN HERE + */ + + //allow the plus minus element to toggle upon click: ➕➖ + let plusminus = document.createElement("div"); + plusminus.id = parent_div.id.split("-")[0] + "-pm"; + plusminus.classList.add("col", "plus_minus", "text_end"); + plusminus.style.flexGrow = 0; + plusminus.textContent = "\u2795"; + row.appendChild(plusminus); + + if (item.get("custom")) { + a_elem.href = "../custom/#" + item.get("hash"); + a_elem.textContent = item.get("displayName"); + } else if (item.get("crafted")) { + a_elem.href = "../crafter/#" + item.get("hash"); + a_elem.textContent = item.get(id); + } else { + a_elem.href = "../item/#" + item.get("displayName"); + a_elem.textContent = item.get("displayName"); + } + parent_div.appendChild(row); + + let nolink_row = document.createElement("div"); + let p_elem = document.createElement("p"); + nolink_row.classList.add("row", "justify-content-center"); + nolink_row.style.display = "none"; + p_elem.classList.add("col-auto", "text-center", "item-title", "p-0"); + p_elem.classList.add(item.has("tier") ? item.get("tier").replace(" ","") : "Normal"); if (item.get("custom")) { - p_elem.href = url_base.replace(/\w+.html/, "") + "customizer.html#" + item.get("hash"); p_elem.textContent = item.get("displayName"); } else if (item.get("crafted")) { - p_elem.href = url_base.replace(/\w+.html/, "") + "crafter.html#" + item.get("hash"); p_elem.textContent = item.get(id); } else { - p_elem.href = url_base.replace(/\w+.html/, "") + "item.html#" + item.get("displayName"); p_elem.textContent = item.get("displayName"); } + + nolink_row.appendChild(p_elem); + parent_div.appendChild(nolink_row); - p_elem.target = "_blank"; - 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"); - img.style = " z=index: 1;max-width: 64px; max-height: 64px; position: relative; top: 50%; transform: translateY(-50%);"; - let bckgrd = document.createElement("p"); - bckgrd.style = "width: 96px; height: 96px; border-radius: 50%;background-image: radial-gradient(closest-side, " + colorMap.get(item.get("tier")) + " 20%," + "#121516 80%); margin-left: auto; margin-right: auto;" - bckgrd.classList.add("center"); - bckgrd.classList.add("itemp"); - active_elem.appendChild(bckgrd); + img.style = " z=index: 1; position: relative;"; + let container = document.createElement("div"); + + let bckgrd = document.createElement("div"); + bckgrd.classList.add("col", "px-0", "d-flex", "align-items-center", "justify-content-center");// , "no-collapse"); + 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"); + parent_div.appendChild(container); + container.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 - p_elem = displayFixedID(active_elem, id, item.get(id), elemental_format); + 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 = displayFixedID(parent_div, id, item.get(id), elemental_format); } else if (item.get("tier") === "Crafted" && item.get("category") === "armor" && id === "hp") { - p_elem = displayFixedID(active_elem, id, item.get(id+"Low")+"-"+item.get(id), elemental_format); + p_elem = displayFixedID(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") { - p_elem.textContent = ""; - p_elem.classList.add("itemp"); - row = document.createElement("p"); - row.classList.add("left"); + if ( item.get("tier") !== "Crafted") { + row = document.createElement("div"); + row.classList.add("col"); let title = document.createElement("b"); title.textContent = idPrefixes[id] + " "; @@ -438,10 +429,10 @@ function displayExpandedItem(item, parent_id){ boost.textContent = item.get(id); row.appendChild(title); row.appendChild(boost); - p_elem.appendChild(row); - } else if ( item.get("tier") === "Crafted" && active_elem.nodeName === "TABLE") { + parent_div.appendChild(row); + } else if ( item.get("tier") === "Crafted") { let row = displayRolledID(item, id, elemental_format); - active_elem.appendChild(row); + parent_div.appendChild(row); } } else if (id === "restrict") { p_elem.classList.add("restrict"); @@ -459,11 +450,17 @@ function displayExpandedItem(item, parent_id){ style === "positive" ? style = "negative" : style = "positive"; } if (fix_id) { - displayFixedID(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") + } + displayFixedID(p_elem, id, item.get("minRolls").get(id), elemental_format, style); + parent_div.appendChild(p_elem); } else { let row = displayRolledID(item, id, elemental_format); - active_elem.appendChild(row); + parent_div.appendChild(row); } }else{ // :/ @@ -473,8 +470,8 @@ function displayExpandedItem(item, parent_id){ //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"); - powder_special.classList.add("left"); + let powder_special = document.createElement("div"); + powder_special.classList.add("col"); let powders = item.get("powders"); let element = ""; let power = 0; @@ -495,10 +492,9 @@ function displayExpandedItem(item, parent_id){ 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 specialEffects = document.createElement("p"); - addClasses(specialTitle, ["left", "itemp", damageClasses[skp_elements.indexOf(element) + 1]]); - addClasses(specialEffects, ["left", "itemp", "nocolor"]); + let specialTitle = document.createElement("span"); + let specialEffects = document.createElement("span"); + addClasses(specialTitle, [damageClasses[skp_elements.indexOf(element) + 1]]); let effects; if (item.get("category") === "weapon") {//weapon effects = powderSpecial["weaponSpecialEffects"]; @@ -510,7 +506,7 @@ function displayExpandedItem(item, parent_id){ 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)]; @@ -530,8 +526,8 @@ function displayExpandedItem(item, parent_id){ } if(item.get("tier") && item.get("tier") === "Crafted") { - let dura_elem = document.createElement("p"); - dura_elem.classList.add("itemp"); + let dura_elem = document.createElement("div"); + dura_elem.classList.add("col"); let dura = []; let suffix = ""; if(nonConsumables.includes(item.get("type"))) { @@ -543,8 +539,7 @@ function displayExpandedItem(item, parent_id){ suffix = " sec." let charges = document.createElement("b"); charges.textContent = "Charges: " + item.get("charges"); - charges.classList.add("spaceleft"); - active_elem.appendChild(charges); + parent_div.appendChild(charges); } if (typeof(dura) === "string") { @@ -552,16 +547,21 @@ function displayExpandedItem(item, parent_id){ } 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"); - item_desc_elem.classList.add('itemp'); + let item_desc_elem = document.createElement("div"); + 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); + if (tome_types.includes(item.get("type"))) { + tome_type_map = new Map([["weaponTome", "Weapon Tome"],["armorTome", "Armor Tome"],["guildTome", "Guild Tome"]]); + item_desc_elem.textContent = item.get("tier")+" "+tome_type_map.get(item.get("type")); + } else { + item_desc_elem.textContent = item.get("tier")+" "+item.get("type"); + } + parent_div.append(item_desc_elem); } //Show item hash if applicable @@ -572,7 +572,7 @@ function displayExpandedItem(item, parent_id){ 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") { @@ -1021,9 +1021,12 @@ function displayRolledID(item, id, elemental_format) { function displayFixedID(active, id, value, elemental_format, style) { if (style) { - let row = document.createElement('tr'); - let desc_elem = document.createElement('td'); - desc_elem.classList.add('left'); + let row = document.createElement('div'); + row.classList.add("row"); + let desc_elem = document.createElement('div'); + desc_elem.classList.add('col'); + desc_elem.classList.add('text-start'); + if (elemental_format) { apply_elemental_format(desc_elem, id); } @@ -1032,8 +1035,9 @@ function displayFixedID(active, id, value, elemental_format, style) { } row.appendChild(desc_elem); - let value_elem = document.createElement('td'); - value_elem.classList.add('right'); + let value_elem = document.createElement('div'); + value_elem.classList.add('col'); + value_elem.classList.add('text-end'); value_elem.classList.add(style); value_elem.textContent = value + idSuffixes[id]; row.appendChild(value_elem); @@ -1045,8 +1049,8 @@ function displayFixedID(active, id, value, elemental_format, style) { if (value === "0-0" || value === "0-0\u279c0-0") { return; } - let p_elem = document.createElement('p'); - p_elem.classList.add('itemp'); + let p_elem = document.createElement('div'); + p_elem.classList.add('col'); if (elemental_format) { apply_elemental_format(p_elem, id, value); } @@ -1057,6 +1061,28 @@ function displayFixedID(active, id, value, elemental_format, style) { return p_elem; } } + +function displayPoisonDamage(overallparent_elem, build) { + overallparent_elem.textContent = ""; + + //Title + let title_elemavg = document.createElement("b"); + title_elemavg.textContent = "Poison Stats"; + overallparent_elem.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); + overallpoisonDamage.appendChild(overallpoisonDamageSecond); + overallparent_elem.append(overallpoisonDamage); +} + function displayEquipOrder(parent_elem,buildOrder){ parent_elem.textContent = ""; const order = buildOrder.slice(); @@ -1076,29 +1102,6 @@ function displayEquipOrder(parent_elem,buildOrder){ } } -function displayPoisonDamage(overallparent_elem, build) { - overallparent_elem.textContent = ""; - - //Title - let title_elemavg = document.createElement("p"); - title_elemavg.classList.add("smalltitle"); - title_elemavg.classList.add("Normal"); - title_elemavg.textContent = "Poison Stats"; - overallparent_elem.append(title_elemavg); - - let overallpoisonDamage = document.createElement("p"); - overallpoisonDamage.classList.add("lessbottom"); - let overallpoisonDamageFirst = document.createElement("b"); - let overallpoisonDamageSecond = document.createElement("b"); - let poison_tick = Math.ceil(build.statMap.get("poison") * (1+skillPointsToPercentage(build.total_skillpoints[0])) * (build.statMap.get("poisonPct") + build.externalStats.get("poisonPct"))/100 /3); - overallpoisonDamageFirst.textContent = "Poison Tick: "; - overallpoisonDamageSecond.textContent = Math.max(poison_tick,0); - overallpoisonDamageSecond.classList.add("Damage"); - - overallpoisonDamage.appendChild(overallpoisonDamageFirst); - overallpoisonDamage.appendChild(overallpoisonDamageSecond); - overallparent_elem.append(overallpoisonDamage); -} function displayMeleeDamage(parent_elem, overallparent_elem, meleeStats){ console.log("Melee Stats"); @@ -1314,40 +1317,8 @@ function displayDefenseStats(parent_elem, build, insertSummary){ } const stats = defenseStats.slice(); - if (!insertSummary) { - let title_elem = document.createElement("p"); - title_elem.textContent = "Defense Stats"; - title_elem.classList.add("title"); - title_elem.classList.add("Normal"); - title_elem.classList.add("itemp"); - parent_elem.append(title_elem); - - let base_stat_elem = document.createElement("p"); - base_stat_elem.id = "base-stat"; - parent_elem.append(base_stat_elem); - - let mock_item = new Map(); - - mock_item.set("fixID", true); - let mock_minRolls = new Map(); - mock_item.set("minRolls", mock_minRolls); - const stats = ["hp", "hpBonus", "hprRaw", "hprPct", "fDef", "wDef", "aDef", "tDef", "eDef", - "fDefPct", "wDefPct", "aDefPct", "tDefPct", "eDefPct"]; - for (const stat of stats) { - if (rolledIDs.includes(stat)) { - mock_minRolls.set(stat, build.statMap.get(stat)); - } - else { - mock_item.set(stat, build.statMap.get(stat)); - } - } - mock_item.set("powders", []); - displayExpandedItem(mock_item, base_stat_elem.id); - } - - parent_elem.append(document.createElement("br")); - let statsTable = document.createElement("table"); - statsTable.classList.add("itemtable"); + // parent_elem.append(document.createElement("br")); + let statsTable = document.createElement("div"); //[total hp, ehp, total hpr, ehpr, [def%, agi%], [edef,tdef,wdef,fdef,adef]] for(const i in stats){ @@ -1361,18 +1332,26 @@ function displayDefenseStats(parent_elem, build, insertSummary){ } //total HP - let hpRow = document.createElement("tr"); - let hp = document.createElement("td"); + let hpRow = document.createElement("div"); + hpRow.classList.add('row'); + let hp = document.createElement("div"); + hp.classList.add('col'); hp.classList.add("Health"); - hp.classList.add("left"); + hp.classList.add("text-start"); hp.textContent = "Total HP:"; - let boost = document.createElement("td"); + let boost = document.createElement("div"); + boost.classList.add('col'); boost.textContent = stats[0]; - boost.classList.add("right"); + boost.classList.add("text-end"); hpRow.appendChild(hp); hpRow.append(boost); - statsTable.appendChild(hpRow); + + if (insertSummary) { + parent_elem.appendChild(hpRow); + } else { + statsTable.appendChild(hpRow); + } let tooltip; let tooltiptext; @@ -1380,100 +1359,113 @@ function displayDefenseStats(parent_elem, build, insertSummary){ if (!defMult) {defMult = 1} //EHP - let ehpRow = document.createElement("tr"); - let ehp = document.createElement("td"); - ehp.classList.add("left"); + let ehpRow = document.createElement("div"); + ehpRow.classList.add("row"); + let ehp = document.createElement("div"); + ehp.classList.add("col"); + ehp.classList.add("text-start"); ehp.textContent = "Effective HP:"; - boost = document.createElement("td"); + boost = document.createElement("div"); boost.textContent = stats[1][0]; - boost.classList.add("right"); + boost.classList.add("col"); + boost.classList.add("text-end"); tooltiptext = `= ${stats[0]} / ((1 - ${skillPointsToPercentage(build.total_skillpoints[3]).toFixed(3)}) * (1 - ${skillPointsToPercentage(build.total_skillpoints[4]).toFixed(3)}) * (2 - ${defMult}) * (2 - ${build.defenseMultiplier}))` - tooltip = createTooltip(tooltip, "p", tooltiptext, boost, ["def-tooltip"]); + // tooltip = createTooltip(tooltip, "p", tooltiptext, boost, ["def-tooltip"]); ehpRow.appendChild(ehp); ehpRow.append(boost); - statsTable.append(ehpRow); - ehpRow = document.createElement("tr"); - ehp = document.createElement("td"); - ehp.classList.add("left"); + if (insertSummary) { + parent_elem.appendChild(ehpRow) + } else { + statsTable.append(ehpRow); + } + + ehpRow = document.createElement("div"); + ehpRow.classList.add("row"); + ehp = document.createElement("div"); + ehp.classList.add("col"); + ehp.classList.add("text-start"); ehp.textContent = "Effective HP (no agi):"; - boost = document.createElement("td"); + boost = document.createElement("div"); boost.textContent = stats[1][1]; - boost.classList.add("right"); + boost.classList.add("col"); + boost.classList.add("text-end"); tooltiptext = `= ${stats[0]} / ((1 - ${skillPointsToPercentage(build.total_skillpoints[3]).toFixed(3)}) * (2 - ${defMult}) * (2 - ${build.defenseMultiplier}))` - tooltip = createTooltip(tooltip, "p", tooltiptext, boost, ["def-tooltip"]); + // tooltip = createTooltip(tooltip, "p", tooltiptext, boost, ["def-tooltip"]); ehpRow.appendChild(ehp); ehpRow.append(boost); statsTable.append(ehpRow); //total HPR - let hprRow = document.createElement("tr"); - let hpr = document.createElement("td"); + let hprRow = document.createElement("div"); + hprRow.classList.add("row") + let hpr = document.createElement("div"); hpr.classList.add("Health"); - hpr.classList.add("left"); + hpr.classList.add("col"); + hpr.classList.add("text-start"); hpr.textContent = "HP Regen (Total):"; - boost = document.createElement("td"); + boost = document.createElement("div"); boost.textContent = stats[2]; - boost.classList.add("right"); + boost.classList.add("col"); + boost.classList.add("text-end"); hprRow.appendChild(hpr); hprRow.appendChild(boost); - statsTable.appendChild(hprRow); + + if (insertSummary) { + parent_elem.appendChild(hprRow); + } else { + statsTable.appendChild(hprRow); + } + //EHPR - let ehprRow = document.createElement("tr"); - let ehpr = document.createElement("td"); - ehpr.classList.add("left"); + let ehprRow = document.createElement("div"); + ehprRow.classList.add("row") + let ehpr = document.createElement("div"); + ehpr.classList.add("col"); + ehpr.classList.add("text-start"); ehpr.textContent = "Effective HP Regen:"; - boost = document.createElement("td"); + boost = document.createElement("div"); boost.textContent = stats[3][0]; - boost.classList.add("right"); + boost.classList.add("col"); + boost.classList.add("text-end"); tooltiptext = `= ${stats[2]} / ((1 - ${skillPointsToPercentage(build.total_skillpoints[3]).toFixed(3)}) * (1 - ${skillPointsToPercentage(build.total_skillpoints[4]).toFixed(3)}) * (2 - ${defMult}) * (2 - ${build.defenseMultiplier}))` - tooltip = createTooltip(tooltip, "p", tooltiptext, boost, ["def-tooltip"]); + // tooltip = createTooltip(tooltip, "p", tooltiptext, boost, ["def-tooltip"]); ehprRow.appendChild(ehpr); ehprRow.append(boost); statsTable.append(ehprRow); - /* - ehprRow = document.createElement("tr"); - ehpr = document.createElement("td"); - ehpr.classList.add("left"); - ehpr.textContent = "Effective HP Regen (no agi):"; - - boost = document.createElement("td"); - boost.textContent = stats[3][1]; - boost.classList.add("right"); - - ehprRow.appendChild(ehpr); - ehprRow.append(boost); - statsTable.append(ehprRow); */ //eledefs let eledefs = stats[5]; for (let i = 0; i < eledefs.length; i++){ - let eledefElemRow = document.createElement("tr"); + let eledefElemRow = document.createElement("div"); + eledefElemRow.classList.add("row") - let eledef = document.createElement("td"); - eledef.classList.add("left") - let eledefTitle = document.createElement("b"); + let eledef = document.createElement("div"); + eledef.classList.add("col"); + eledef.classList.add("text-start"); + let eledefTitle = document.createElement("span"); eledefTitle.textContent = damageClasses[i+1]; eledefTitle.classList.add(damageClasses[i+1]); - let defense = document.createElement("b"); + let defense = document.createElement("span"); defense.textContent = " Def (Total): "; eledef.appendChild(eledefTitle); eledef.appendChild(defense); eledefElemRow.appendChild(eledef); - let boost = document.createElement("td"); + let boost = document.createElement("div"); boost.textContent = eledefs[i]; boost.classList.add(eledefs[i] >= 0 ? "positive" : "negative"); - boost.classList.add("right"); + boost.classList.add("col"); + boost.classList.add("text-end"); let defRaw = build.statMap.get("defRaw")[i]; let defPct = build.statMap.get("defBonus")[i]/100; @@ -1484,39 +1476,51 @@ function displayDefenseStats(parent_elem, build, insertSummary){ defPct >= 0 ? defPct = "+ " + defPct: defPct = "- " + defPct; tooltiptext = `= ${defRaw} * (1 ${defPct})` } - tooltip = createTooltip(tooltip, "p", tooltiptext, boost, ["def-tooltip"]); + // tooltip = createTooltip(tooltip, "p", tooltiptext, boost, ["def-tooltip"]); eledefElemRow.appendChild(boost); - - statsTable.appendChild(eledefElemRow); + + if (insertSummary) { + parent_elem.appendChild(eledefElemRow); + } else { + statsTable.appendChild(eledefElemRow); + } } if (!insertSummary) { //skp - let defRow = document.createElement("tr"); - let defElem = document.createElement("td"); - defElem.classList.add("left"); + let defRow = document.createElement("div"); + defRow.classList.add("row"); + let defElem = document.createElement("div"); + defElem.classList.add("col"); + defElem.classList.add("text-start"); defElem.textContent = "Damage Absorbed %:"; - boost = document.createElement("td"); - boost.classList.add("right"); + boost = document.createElement("div"); + boost.classList.add("col"); + boost.classList.add("text-end"); boost.textContent = stats[4][0] + "%"; defRow.appendChild(defElem); defRow.appendChild(boost); statsTable.append(defRow); - let agiRow = document.createElement("tr"); - let agiElem = document.createElement("td"); - agiElem.classList.add("left"); + let agiRow = document.createElement("div"); + agiRow.classList.add("row"); + let agiElem = document.createElement("div"); + agiElem.classList.add("col"); + agiElem.classList.add("text-start"); agiElem.textContent = "Dodge Chance %:"; - boost = document.createElement("td"); - boost.classList.add("right"); + boost = document.createElement("div"); + boost.classList.add("col"); + boost.classList.add("text-end"); boost.textContent = stats[4][1] + "%"; agiRow.appendChild(agiElem); agiRow.appendChild(boost); statsTable.append(agiRow); } - parent_elem.append(statsTable); + if (!insertSummary) { + parent_elem.append(statsTable); + } } function displayPowderSpecials(parent_elem, powderSpecials, build) { @@ -1691,7 +1695,6 @@ function displaySpellDamage(parent_elem, overallparent_elem, build, spell, spell overallparent_elem.append(displayNextCosts(spell, build, build.weapon.statMap)); - let critChance = skillPointsToPercentage(build.total_skillpoints[1]); let save_damages = [];