From 538202e7acc13b75f4d08b32f89d5d800028e90e Mon Sep 17 00:00:00 2001 From: hppeng Date: Tue, 19 Jul 2022 00:33:05 -0700 Subject: [PATCH 1/6] Unify melee stats boxes remove poison stats box for now now melee stats box is correct with melee modifiers, and also neater in code --- builder/index.html | 2 +- builder/index_full.html | 50 ++-------- js/builder_graph.js | 56 +---------- js/display.js | 204 ++++++---------------------------------- 4 files changed, 38 insertions(+), 274 deletions(-) diff --git a/builder/index.html b/builder/index.html index 39391fe..a226881 100644 --- a/builder/index.html +++ b/builder/index.html @@ -1,2 +1,2 @@ - WynnBuilder
Join the discord today to suggest new features, submit bug reports, and hangout/talk to devs!
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
Level:
Assign: 0
Original: 0
Assign: 0
Original: 0
Assign: 0
Original: 0
Assign: 0
Original: 0
Assign: 0
Original: 0
Active boosts
Earth
Thunder
Water
Fire
Air
Curse (Active)
Concentration (Passive)
Offense
Defense
Overall
melee
poison
Input a weapon to see abilities!

Made by hppeng, ferricles, and reschan with Atlas Inc (JavaScript required to function, nothing works without js)

Hard refresh the page (Ctrl+Shift+R on windows/chrome) if it isn't updating correctly.

+ WynnBuilder
Join the discord today to suggest new features, submit bug reports, and hangout/talk to devs!
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
Level:
Assign: 0
Original: 0
Assign: 0
Original: 0
Assign: 0
Original: 0
Assign: 0
Original: 0
Assign: 0
Original: 0
Active boosts
Earth
Thunder
Water
Fire
Air
Curse (Active)
Concentration (Passive)
Offense
Defense
Overall
Input a weapon to see abilities!

Made by hppeng, ferricles, and reschan with Atlas Inc (JavaScript required to function, nothing works without js)

Hard refresh the page (Ctrl+Shift+R on windows/chrome) if it isn't updating correctly.

diff --git a/builder/index_full.html b/builder/index_full.html index 2f2b716..33f8073 100644 --- a/builder/index_full.html +++ b/builder/index_full.html @@ -5,17 +5,6 @@ - - WynnBuilder @@ -35,8 +24,6 @@ - -
+
+
+
Input a weapon to see abilities!
+
+
-
-
melee
- -
-
-
poison
-
-
-
-
Input a weapon to see abilities!
-
-
-
+
-
@@ -1198,20 +1177,6 @@
-
@@ -1278,10 +1243,8 @@
-
- @@ -1290,7 +1253,6 @@ - diff --git a/js/builder_graph.js b/js/builder_graph.js index 36b7c4c..724d027 100644 --- a/js/builder_graph.js +++ b/js/builder_graph.js @@ -656,59 +656,10 @@ class SpellDisplayNode extends ComputeNode { const i = this.spell_idx; let parent_elem = document.getElementById("spell"+i+"-info"); let overallparent_elem = document.getElementById("spell"+i+"-infoAvg"); - displaySpellDamage(parent_elem, overallparent_elem, stats, spell, i+1, damages); + displaySpellDamage(parent_elem, overallparent_elem, stats, spell, i, damages); } } -/* Get melee stats for build. - Returns an array in the order: -*/ -function getMeleeStats(stats, weapon) { - stats = new Map(stats); // Shallow copy - const weapon_stats = weapon.statMap; - const skillpoints = [ - stats.get('str'), - stats.get('dex'), - stats.get('int'), - stats.get('def'), - stats.get('agi') - ]; - if (weapon_stats.get("tier") === "Crafted") { - stats.set("damageBases", [weapon_stats.get("nDamBaseHigh"),weapon_stats.get("eDamBaseHigh"),weapon_stats.get("tDamBaseHigh"),weapon_stats.get("wDamBaseHigh"),weapon_stats.get("fDamBaseHigh"),weapon_stats.get("aDamBaseHigh")]); - } - let adjAtkSpd = attackSpeeds.indexOf(stats.get("atkSpd")) + stats.get("atkTier"); - if(adjAtkSpd > 6){ - adjAtkSpd = 6; - }else if(adjAtkSpd < 0){ - adjAtkSpd = 0; - } - - if (weapon_stats.get("type") === "relik") { - merge_stat(stats, 'damMult.ShamanMelee', 0.99); // CURSE YOU WYNNCRAFT - //One day we will create WynnWynn and no longer have shaman 99% melee injustice. - //In all seriousness 99% is because wynn uses 0.33 to estimate dividing the damage by 3 to split damage between 3 beams. - } - let results = calculateSpellDamage(stats, weapon_stats, [100, 0, 0, 0, 0, 0], false, true); - - let dex = skillpoints[1]; - - let totalDamNorm = results[0]; - let totalDamCrit = results[1]; - totalDamNorm.push(1-skillPointsToPercentage(dex)); - totalDamCrit.push(skillPointsToPercentage(dex)); - let damages_results = results[2]; - - let singleHitTotal = ((totalDamNorm[0]+totalDamNorm[1])*(totalDamNorm[2]) - +(totalDamCrit[0]+totalDamCrit[1])*(totalDamCrit[2]))/2; - - //Now do math - let normDPS = (totalDamNorm[0]+totalDamNorm[1])/2 * baseDamageMultiplier[adjAtkSpd]; - let critDPS = (totalDamCrit[0]+totalDamCrit[1])/2 * baseDamageMultiplier[adjAtkSpd]; - let avgDPS = (normDPS * (1 - skillPointsToPercentage(dex))) + (critDPS * (skillPointsToPercentage(dex))); - //[[n n n n] [e e e e] [t t t t] [w w w w] [f f f f] [a a a a] [lowtotal hightotal normalChance] [critlowtotal crithightotal critChance] normalDPS critCPS averageDPS adjAttackSpeed, singleHit] - return damages_results.concat([totalDamNorm,totalDamCrit,normDPS,critDPS,avgDPS,adjAtkSpd, singleHitTotal]).concat(results[3]); -} - /** * Display build stats. * @@ -723,13 +674,10 @@ class BuildDisplayNode extends ComputeNode { displayBuildStats('overall-stats', build, build_all_display_commands, stats); displayBuildStats("offensive-stats", build, build_offensive_display_commands, stats); displaySetBonuses("set-info", build); - let meleeStats = getMeleeStats(stats, build.weapon); // TODO: move weapon out? - displayMeleeDamage(document.getElementById("build-melee-stats"), document.getElementById("build-melee-statsAvg"), meleeStats); - displayDefenseStats(document.getElementById("defensive-stats"), stats); - displayPoisonDamage(document.getElementById("build-poison-stats"), build); + //displayPoisonDamage(document.getElementById("build-poison-stats"), build); displayEquipOrder(document.getElementById("build-order"), build.equip_order); } } diff --git a/js/display.js b/js/display.js index 8a2926a..9244057 100644 --- a/js/display.js +++ b/js/display.js @@ -1022,152 +1022,6 @@ function displayEquipOrder(parent_elem, buildOrder){ } } -function displayMeleeDamage(parent_elem, overallparent_elem, meleeStats) { - let attackSpeeds = ["Super Slow", "Very Slow", "Slow", "Normal", "Fast", "Very Fast", "Super Fast"]; - //let damagePrefixes = ["Neutral Damage: ","Earth Damage: ","Thunder Damage: ","Water Damage: ","Fire Damage: ","Air Damage: "]; - parent_elem.textContent = ""; - overallparent_elem.textContent = ""; - const stats = meleeStats.slice(); - - for (let i = 0; i < 6; ++i) { - for (let j in stats[i]) { - stats[i][j] = stats[i][j].toFixed(2); - } - } - for (let i = 6; i < 8; ++i) { - for (let j = 0; j < 2; j++) { - stats[i][j] = stats[i][j].toFixed(2); - } - } - for (let i = 8; i < 11; ++i) { - stats[i] = stats[i].toFixed(2); - } - - //title - let title_elem = document.createElement("p"); - title_elem.classList.add("title"); - title_elem.textContent = "Melee Stats"; - parent_elem.append(title_elem); - parent_elem.append(document.createElement("br")); - - //overall title - let title_elemavg = document.createElement("b"); - title_elemavg.textContent = "Melee Stats"; - overallparent_elem.append(title_elemavg); - - //average DPS - let averageDamage = document.createElement("p"); - averageDamage.classList.add("left"); - averageDamage.textContent = "Average DPS: " + stats[10]; - parent_elem.append(averageDamage); - - //overall average DPS - let overallaverageDamage = document.createElement("p"); - let overallaverageDamageFirst = document.createElement("span"); - overallaverageDamageFirst.textContent = "Average DPS: " - - let overallaverageDamageSecond = document.createElement("span"); - overallaverageDamageSecond.classList.add("Damage"); - overallaverageDamageSecond.textContent = stats[10]; - overallaverageDamage.appendChild(overallaverageDamageFirst); - overallaverageDamage.appendChild(overallaverageDamageSecond); - - overallparent_elem.append(overallaverageDamage); - //overallparent_elem.append(document.createElement("br")); - - //attack speed - let atkSpd = document.createElement("p"); - atkSpd.classList.add("left"); - atkSpd.textContent = "Attack Speed: " + attackSpeeds[stats[11]]; - parent_elem.append(atkSpd); - parent_elem.append(document.createElement("br")); - - //overall attack speed - let overallatkSpd = document.createElement("p"); - let overallatkSpdFirst = document.createElement("span"); - overallatkSpdFirst.textContent = "Attack Speed: "; - let overallatkSpdSecond = document.createElement("span"); - overallatkSpdSecond.classList.add("Damage"); - overallatkSpdSecond.textContent = attackSpeeds[stats[11]]; - overallatkSpd.appendChild(overallatkSpdFirst); - overallatkSpd.appendChild(overallatkSpdSecond); - overallparent_elem.append(overallatkSpd); - - //Non-Crit: n->elem, total dmg, DPS - let nonCritStats = document.createElement("p"); - nonCritStats.classList.add("left"); - nonCritStats.textContent = "Non-Crit Stats: "; - nonCritStats.append(document.createElement("br")); - for (let i = 0; i < 6; i++) { - if (stats[i][1] != 0) { - let dmg = document.createElement("p"); - dmg.textContent = stats[i][0] + " \u2013 " + stats[i][1]; - dmg.classList.add(damageClasses[i]); - dmg.classList.add("itemp"); - nonCritStats.append(dmg); - } - } - - let normalDamage = document.createElement("p"); - normalDamage.textContent = "Total: " + stats[6][0] + " \u2013 " + stats[6][1]; - nonCritStats.append(normalDamage); - - let normalDPS = document.createElement("p"); - normalDPS.textContent = "Normal DPS: " + stats[8]; - nonCritStats.append(normalDPS); - - //overall average DPS - let singleHitDamage = document.createElement("p"); - let singleHitDamageFirst = document.createElement("span"); - singleHitDamageFirst.textContent = "Single Hit Average: "; - let singleHitDamageSecond = document.createElement("span"); - singleHitDamageSecond.classList.add("Damage"); - singleHitDamageSecond.textContent = stats[12].toFixed(2); - singleHitDamage.appendChild(singleHitDamageFirst); - singleHitDamage.appendChild(singleHitDamageSecond); - overallparent_elem.append(singleHitDamage); - - let normalChance = document.createElement("p"); - normalChance.textContent = "Non-Crit Chance: " + (stats[6][2]*100).toFixed(2) + "%"; - normalChance.append(document.createElement("br")); - normalChance.append(document.createElement("br")); - nonCritStats.append(normalChance); - - parent_elem.append(nonCritStats); - parent_elem.append(document.createElement("br")); - - //Crit: n->elem, total dmg, DPS - let critStats = document.createElement("p"); - critStats.classList.add("left"); - critStats.textContent = "Crit Stats: "; - critStats.append(document.createElement("br")); - for (let i = 0; i < 6; i++){ - if(stats[i][3] != 0) { - dmg = document.createElement("p"); - dmg.textContent = stats[i][2] + " \u2013 " + stats[i][3]; - dmg.classList.add(damageClasses[i]); - dmg.classList.add("itemp"); - critStats.append(dmg); - } - } - let critDamage = document.createElement("p"); - critDamage.textContent = "Total: " + stats[7][0] + " \u2013 " + stats[7][1]; - critStats.append(critDamage); - - let critDPS = document.createElement("p"); - critDPS.textContent = "Crit DPS: " + stats[9]; - critStats.append(critDPS); - - let critChance = document.createElement("p"); - critChance.textContent = "Crit Chance: " + (stats[7][2]*100).toFixed(2) + "%"; - critChance.append(document.createElement("br")); - critChance.append(document.createElement("br")); - critStats.append(critChance); - - parent_elem.append(critStats); - addClickableArrow(overallparent_elem, parent_elem); -} - function displayDefenseStats(parent_elem, statMap, insertSummary){ let defenseStats = getDefenseStats(statMap); insertSummary = (typeof insertSummary !== 'undefined') ? insertSummary : false; @@ -1533,31 +1387,23 @@ function displaySpellDamage(parent_elem, overallparent_elem, stats, spell, spell // TODO: move cost calc out parent_elem.textContent = ""; - let title_elem = document.createElement("p"); + let title_elem = make_elem("p"); overallparent_elem.textContent = ""; let title_elemavg = document.createElement("b"); if ('cost' in spell) { - let first = document.createElement("span"); - first.textContent = spell.name + " ("; + let first = make_elem("span", [], { textContent: spell.name + " (" }); title_elem.appendChild(first.cloneNode(true)); //cloneNode is needed here. title_elemavg.appendChild(first); - let second = document.createElement("span"); - second.textContent = getSpellCost(stats, spell); - second.classList.add("Mana"); - + let second = make_elem("span", ["Mana"], { textContent: getSpellCost(stats, spell) }); title_elem.appendChild(second.cloneNode(true)); title_elemavg.appendChild(second); - - let third = document.createElement("span"); - third.textContent = ")";// [Base: " + getBaseSpellCost(stats, spellIdx, spell.cost) + " ]"; - title_elem.appendChild(third); - let third_summary = document.createElement("span"); - third_summary.textContent = ")"; - title_elemavg.appendChild(third_summary); + let third = make_elem("span", [], { textContent: ")" });// " + getBaseSpellCost(stats, spellIdx, spell.cost) + " ]"; + title_elem.appendChild(third.cloneNode(true)); + title_elemavg.appendChild(third); } else { title_elem.textContent = spell.name; @@ -1574,30 +1420,26 @@ function displaySpellDamage(parent_elem, overallparent_elem, stats, spell, spell let critChance = skillPointsToPercentage(stats.get('dex')); - let part_divavg = document.createElement("p"); + let part_divavg = make_elem("p"); overallparent_elem.append(part_divavg); function _summary(text, val, fmt) { - let overallaverageLabel = document.createElement("p"); - let first = document.createElement("span"); - let second = document.createElement("span"); - first.textContent = text; - second.textContent = val.toFixed(2); + if (typeof(val) === 'number') { val = val.toFixed(2); } + let overallaverageLabel = make_elem("p"); + let first = make_elem("span", [], { textContent: text }); + let second = make_elem("span", [fmt], { textContent: val }); overallaverageLabel.appendChild(first); overallaverageLabel.appendChild(second); - second.classList.add(fmt); part_divavg.append(overallaverageLabel); } for (let i = 0; i < spell_results.length; ++i) { const spell_info = spell_results[i]; - let part_div = document.createElement("p"); + let part_div = make_elem("p", ["pt-3"]); parent_elem.append(part_div); - let subtitle_elem = document.createElement("p"); - subtitle_elem.textContent = spell_info.name - part_div.append(subtitle_elem); + part_div.append(make_elem("p", [], { textContent: spell_info.name })); if (spell_info.type === "damage") { let totalDamNormal = spell_info.normal_total; @@ -1607,14 +1449,26 @@ function displaySpellDamage(parent_elem, overallparent_elem, stats, spell, spell let critAverage = (totalDamCrit[0]+totalDamCrit[1])/2 || 0; let averageDamage = (1-critChance)*nonCritAverage+critChance*critAverage || 0; - let averageLabel = document.createElement("p"); - averageLabel.textContent = "Average: "+averageDamage.toFixed(2); + let averageLabel = make_elem("p", [], { textContent: "Average: "+averageDamage.toFixed(2) }); // averageLabel.classList.add("damageSubtitle"); part_div.append(averageLabel); - if (spell_info.name === spell.display) { - _summary(spell_info.name+ ": ", averageDamage, "Damage"); + if (spellIdx === 0) { + let attackSpeeds = ["Super Slow", "Very Slow", "Slow", "Normal", "Fast", "Very Fast", "Super Fast"]; + let adjAtkSpd = attackSpeeds.indexOf(stats.get("atkSpd")) + stats.get("atkTier"); + if(adjAtkSpd > 6) { + adjAtkSpd = 6; + } else if(adjAtkSpd < 0) { + adjAtkSpd = 0; + } + _summary("Average DPS: ", averageDamage * baseDamageMultiplier[adjAtkSpd], "Damage"); + _summary("Attack Speed: ", attackSpeeds[adjAtkSpd], "Damage"); + _summary("Per Attack: ", averageDamage, "Damage"); + } + else { + _summary(spell_info.name+ ": ", averageDamage, "Damage"); + } } function _damage_display(label_text, average, dmg_min, dmg_max) { From c5dd848a058bf59684e560fdc196fc77fbe1c399 Mon Sep 17 00:00:00 2001 From: hppeng Date: Tue, 19 Jul 2022 00:39:01 -0700 Subject: [PATCH 2/6] Big arrow hitbox --- js/display.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/js/display.js b/js/display.js index 9244057..74da10d 100644 --- a/js/display.js +++ b/js/display.js @@ -1915,12 +1915,12 @@ function stringCDF(id,val,base,amp) { function addClickableArrow(elem, target) { //up and down arrow - done ugly - let arrow = document.createElement("img"); - arrow.id = "arrow_" + elem.id; + let arrow = make_elem("img", [], { id: "arrow_" + elem.id, src: "../media/icons/" + (newIcons ? "new" : "old") + "/toggle_down.png" }); arrow.style.maxWidth = document.body.clientWidth > 900 ? "3rem" : "10rem"; - arrow.src = "../media/icons/" + (newIcons ? "new" : "old") + "/toggle_down.png"; - elem.appendChild(arrow); - arrow.addEventListener("click", () => toggle_spell_tab(arrow, target)); + let container = make_elem('div', ['col']); + container.appendChild(arrow); + elem.appendChild(container); + container.addEventListener("click", () => toggle_spell_tab(arrow, target)); } // toggle arrow thinger From ea89e936a1b41c10a2e95281e7f143b1b26cd00e Mon Sep 17 00:00:00 2001 From: hppeng Date: Tue, 19 Jul 2022 01:09:21 -0700 Subject: [PATCH 3/6] Add back poison stats (kicked to the bottom) also powder special and poison stats now vanish if u don't have them --- builder/index.html | 2 +- builder/index_full.html | 4 +++- css/sq2bs.css | 4 ---- js/atree.js | 8 ++++---- js/builder_graph.js | 2 +- js/display.js | 45 +++++++++++++++++++++++++---------------- 6 files changed, 37 insertions(+), 28 deletions(-) diff --git a/builder/index.html b/builder/index.html index a226881..42ac371 100644 --- a/builder/index.html +++ b/builder/index.html @@ -1,2 +1,2 @@ - WynnBuilder
Join the discord today to suggest new features, submit bug reports, and hangout/talk to devs!
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
Level:
Assign: 0
Original: 0
Assign: 0
Original: 0
Assign: 0
Original: 0
Assign: 0
Original: 0
Assign: 0
Original: 0
Active boosts
Earth
Thunder
Water
Fire
Air
Curse (Active)
Concentration (Passive)
Offense
Defense
Overall
Input a weapon to see abilities!

Made by hppeng, ferricles, and reschan with Atlas Inc (JavaScript required to function, nothing works without js)

Hard refresh the page (Ctrl+Shift+R on windows/chrome) if it isn't updating correctly.

+ WynnBuilder
Join the discord today to suggest new features, submit bug reports, and hangout/talk to devs!
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
Level:
Assign: 0
Original: 0
Assign: 0
Original: 0
Assign: 0
Original: 0
Assign: 0
Original: 0
Assign: 0
Original: 0
Active boosts
Earth
Thunder
Water
Fire
Air
Curse (Active)
Concentration (Passive)
Offense
Defense
Overall
Input a weapon to see abilities!

Made by hppeng, ferricles, and reschan with Atlas Inc (JavaScript required to function, nothing works without js)

Hard refresh the page (Ctrl+Shift+R on windows/chrome) if it isn't updating correctly.

diff --git a/builder/index_full.html b/builder/index_full.html index 33f8073..600db3f 100644 --- a/builder/index_full.html +++ b/builder/index_full.html @@ -1150,9 +1150,11 @@
Input a weapon to see abilities!
+
-
+
diff --git a/css/sq2bs.css b/css/sq2bs.css index e62a03c..59e4e99 100644 --- a/css/sq2bs.css +++ b/css/sq2bs.css @@ -132,10 +132,6 @@ input.equipment-input { font-weight: bold; } -.spell-expand { - cursor: pointer; -} - :root { --scaled-fontsize: 2.5rem; } diff --git a/js/atree.js b/js/atree.js index 8ff1e86..2840f87 100644 --- a/js/atree.js +++ b/js/atree.js @@ -881,10 +881,10 @@ class AbilityTreeEnsureNodesNode extends ComputeNode { let display_elem = document.createElement('div'); display_elem.classList.add("col", "pe-0"); // TODO: just pass these elements into the display node instead of juggling the raw IDs... - let spell_summary = document.createElement('div'); spell_summary.setAttribute('id', "spell"+spell.base_spell+"-infoAvg"); - spell_summary.classList.add("col", "spell-display", "spell-expand", "dark-5", "rounded", "dark-shadow", "pt-2", "border", "border-dark"); - let spell_detail = document.createElement('div'); spell_detail.setAttribute('id', "spell"+spell.base_spell+"-info"); - spell_detail.classList.add("col", "spell-display", "dark-5", "rounded", "dark-shadow", "py-2"); + let spell_summary = make_elem('div', ["col", "spell-display", "dark-5", "rounded", "dark-shadow", "pt-2", "border", "border-dark"], + { id: "spell"+spell.base_spell+"-infoAvg" }); + let spell_detail = make_elem('div', ["col", "spell-display", "dark-5", "rounded", "dark-shadow", "py-2"], + { id: "spell"+spell.base_spell+"-info" }); spell_detail.style.display = "none"; display_elem.appendChild(spell_summary); display_elem.appendChild(spell_detail); diff --git a/js/builder_graph.js b/js/builder_graph.js index 724d027..73caa07 100644 --- a/js/builder_graph.js +++ b/js/builder_graph.js @@ -677,7 +677,7 @@ class BuildDisplayNode extends ComputeNode { // TODO: move weapon out? displayDefenseStats(document.getElementById("defensive-stats"), stats); - //displayPoisonDamage(document.getElementById("build-poison-stats"), build); + displayPoisonDamage(document.getElementById("build-poison-stats"), build); displayEquipOrder(document.getElementById("build-order"), build.equip_order); } } diff --git a/js/display.js b/js/display.js index 74da10d..58ebfa8 100644 --- a/js/display.js +++ b/js/display.js @@ -989,23 +989,30 @@ function displayFixedID(active, id, value, elemental_format, style) { function displayPoisonDamage(overallparent_elem, build) { overallparent_elem.textContent = ""; + if (build.statMap.get('poison') <= 0) { + overallparent_elem.style = "display: none"; + return; + } + overallparent_elem.style = ""; + + let container = make_elem('div', ['col', 'pe-0']); + let spell_summary = make_elem('div', ["col", "spell-display", "dark-5", "rounded", "dark-shadow", "py-2", "border", "border-dark"]); //Title - let title_elemavg = document.createElement("b"); - title_elemavg.textContent = "Poison Stats"; - overallparent_elem.append(title_elemavg); + let title_elemavg = make_elem("b"); + title_elemavg.append(make_elem('span', [], { textContent: "Poison Stats" })); + spell_summary.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); + let overallpoisonDamage = make_elem("p"); + overallpoisonDamage.append( + make_elem("span", [], { textContent: "Poison Tick: " }), + make_elem("span", ["Damage"], { textContent: Math.max(poison_tick,0) }) + ); + spell_summary.append(overallpoisonDamage); + container.append(spell_summary); + overallparent_elem.append(container); } function displayEquipOrder(parent_elem, buildOrder){ @@ -1228,6 +1235,13 @@ function displayDefenseStats(parent_elem, statMap, insertSummary){ } function displayPowderSpecials(parent_elem, powderSpecials, stats, weapon, overall=false) { + parent_elem.textContent = ""; + if (powderSpecials.length === 0) { + parent_elem.style = "display: none"; + return; + } + parent_elem.style = ""; + const skillpoints = [ stats.get('str'), stats.get('dex'), @@ -1235,16 +1249,13 @@ function displayPowderSpecials(parent_elem, powderSpecials, stats, weapon, overa stats.get('def'), stats.get('agi') ]; - parent_elem.textContent = "" - let title = document.createElement("b"); - title.textContent = "Powder Specials"; - parent_elem.appendChild(title); + parent_elem.append(make_elem("b", [], { textContent: "Powder Specials" })); let specials = powderSpecials.slice(); let expandedStats = new Map(); //each entry of powderSpecials is [ps, power] for (special of specials) { //iterate through the special and display its effects. - let powder_special = document.createElement("p"); + let powder_special = make_elem("p", ["pt-3"]); let specialSuffixes = new Map([ ["Duration", " sec"], ["Radius", " blocks"], ["Chains", ""], ["Damage", "%"], ["Damage Boost", "%"], ["Knockback", " blocks"] ]); let specialTitle = document.createElement("p"); let specialEffects = document.createElement("p"); From 9a126fcf1c1d9ff8de77e64e793e38836ec2baee Mon Sep 17 00:00:00 2001 From: hppeng Date: Wed, 20 Jul 2022 00:35:20 -0700 Subject: [PATCH 4/6] Summary element rename/cleanup --- js/display.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/js/display.js b/js/display.js index 58ebfa8..2a9cdce 100644 --- a/js/display.js +++ b/js/display.js @@ -1434,14 +1434,14 @@ function displaySpellDamage(parent_elem, overallparent_elem, stats, spell, spell let part_divavg = make_elem("p"); overallparent_elem.append(part_divavg); - function _summary(text, val, fmt) { + function add_summary(text, val, fmt) { if (typeof(val) === 'number') { val = val.toFixed(2); } - let overallaverageLabel = make_elem("p"); - let first = make_elem("span", [], { textContent: text }); - let second = make_elem("span", [fmt], { textContent: val }); - overallaverageLabel.appendChild(first); - overallaverageLabel.appendChild(second); - part_divavg.append(overallaverageLabel); + let summary_elem = make_elem("p"); + summary_elem.append( + make_elem("span", [], { textContent: text }), + make_elem("span", [fmt], { textContent: val }) + ); + part_divavg.append(summary_elem); } for (let i = 0; i < spell_results.length; ++i) { @@ -1473,12 +1473,12 @@ function displaySpellDamage(parent_elem, overallparent_elem, stats, spell, spell } else if(adjAtkSpd < 0) { adjAtkSpd = 0; } - _summary("Average DPS: ", averageDamage * baseDamageMultiplier[adjAtkSpd], "Damage"); - _summary("Attack Speed: ", attackSpeeds[adjAtkSpd], "Damage"); - _summary("Per Attack: ", averageDamage, "Damage"); + add_summary("Average DPS: ", averageDamage * baseDamageMultiplier[adjAtkSpd], "Damage"); + add_summary("Attack Speed: ", attackSpeeds[adjAtkSpd], "Damage"); + add_summary("Per Attack: ", averageDamage, "Damage"); } else { - _summary(spell_info.name+ ": ", averageDamage, "Damage"); + add_summary(spell_info.name+ ": ", averageDamage, "Damage"); } } @@ -1505,7 +1505,7 @@ function displaySpellDamage(parent_elem, overallparent_elem, stats, spell, spell // healLabel.classList.add("damagep"); part_div.append(healLabel); if (spell_info.name === spell.display) { - _summary(spell_info.name+ ": ", heal_amount, "Set"); + add_summary(spell_info.name+ ": ", heal_amount, "Set"); } } } From a63b4df3aa9dc11d44e5f3148831db6cd06b4208 Mon Sep 17 00:00:00 2001 From: hppeng Date: Wed, 20 Jul 2022 10:25:32 -0700 Subject: [PATCH 5/6] Expand the arrow hitbox even further --- css/sq2bs.css | 4 ++++ js/atree.js | 2 +- js/display.js | 6 ++---- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/css/sq2bs.css b/css/sq2bs.css index 59e4e99..191226a 100644 --- a/css/sq2bs.css +++ b/css/sq2bs.css @@ -132,6 +132,10 @@ input.equipment-input { font-weight: bold; } +.clickable { + cursor: pointer; +} + :root { --scaled-fontsize: 2.5rem; } diff --git a/js/atree.js b/js/atree.js index d761878..18850dc 100644 --- a/js/atree.js +++ b/js/atree.js @@ -864,7 +864,7 @@ class AbilityTreeEnsureNodesNode extends ComputeNode { let display_elem = document.createElement('div'); display_elem.classList.add("col", "pe-0"); // TODO: just pass these elements into the display node instead of juggling the raw IDs... - let spell_summary = make_elem('div', ["col", "spell-display", "dark-5", "rounded", "dark-shadow", "pt-2", "border", "border-dark"], + let spell_summary = make_elem('div', ["col", "spell-display", "clickable", "dark-5", "rounded", "dark-shadow", "pt-2", "border", "border-dark"], { id: "spell"+spell.base_spell+"-infoAvg" }); let spell_detail = make_elem('div', ["col", "spell-display", "dark-5", "rounded", "dark-shadow", "py-2"], { id: "spell"+spell.base_spell+"-info" }); diff --git a/js/display.js b/js/display.js index 2a9cdce..83af057 100644 --- a/js/display.js +++ b/js/display.js @@ -1928,10 +1928,8 @@ function addClickableArrow(elem, target) { //up and down arrow - done ugly let arrow = make_elem("img", [], { id: "arrow_" + elem.id, src: "../media/icons/" + (newIcons ? "new" : "old") + "/toggle_down.png" }); arrow.style.maxWidth = document.body.clientWidth > 900 ? "3rem" : "10rem"; - let container = make_elem('div', ['col']); - container.appendChild(arrow); - elem.appendChild(container); - container.addEventListener("click", () => toggle_spell_tab(arrow, target)); + elem.appendChild(arrow); + elem.addEventListener("click", () => toggle_spell_tab(arrow, target)); } // toggle arrow thinger From d5d0f87bccc61d13584d7a5ba70e060d7b71ec8b Mon Sep 17 00:00:00 2001 From: hppeng Date: Wed, 20 Jul 2022 10:31:38 -0700 Subject: [PATCH 6/6] Change from `clickable` to `fake-button` holy UI design --- css/sq2bs.css | 4 ---- js/atree.js | 2 +- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/css/sq2bs.css b/css/sq2bs.css index 191226a..59e4e99 100644 --- a/css/sq2bs.css +++ b/css/sq2bs.css @@ -132,10 +132,6 @@ input.equipment-input { font-weight: bold; } -.clickable { - cursor: pointer; -} - :root { --scaled-fontsize: 2.5rem; } diff --git a/js/atree.js b/js/atree.js index 18850dc..2e18f05 100644 --- a/js/atree.js +++ b/js/atree.js @@ -864,7 +864,7 @@ class AbilityTreeEnsureNodesNode extends ComputeNode { let display_elem = document.createElement('div'); display_elem.classList.add("col", "pe-0"); // TODO: just pass these elements into the display node instead of juggling the raw IDs... - let spell_summary = make_elem('div', ["col", "spell-display", "clickable", "dark-5", "rounded", "dark-shadow", "pt-2", "border", "border-dark"], + let spell_summary = make_elem('div', ["col", "spell-display", "fake-button", "dark-5", "rounded", "dark-shadow", "pt-2", "border", "border-dark"], { id: "spell"+spell.base_spell+"-infoAvg" }); let spell_detail = make_elem('div', ["col", "spell-display", "dark-5", "rounded", "dark-shadow", "py-2"], { id: "spell"+spell.base_spell+"-info" });