endernon/wynnbuilder-forked-for-changes
1
0
Fork 0
forked from morphNon/wynnbuilder-idk
Code Pull requests Activity

Merge pull request #147 from hppeng-wynn/melee_stat_box

Browse source 
Unify melee stats boxes
This commit is contained in:
hppeng-wynn 2022-07-20 10:41:10 -07:00 committed by GitHub
commit 125d4818e2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 79 additions and 308 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
builder/index.html
View file

File diff suppressed because one or more lines are too long

48
builder/index_full.html
View file

@ -6,17 +6,6 @@
<meta name="MobileOptimized" content="320" /> <meta name="MobileOptimized" content="320" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no" /> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no" />
<!--OGP suite
<meta property="og:title" content="Wynnbuilder" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://wynnbuilder.github.io/media/icons/new/builder.png" />
<meta property="og:image:width" content="420" />
<meta property="og:image:height" content="420" />
<meta property="og:image:type" content="image/png" />
<meta property="og:description" id = "ogp-build-list" content = "">
<meta property="og:url" id = "ogp-url" content="" />
-->
<title>WynnBuilder</title> <title>WynnBuilder</title>
<link rel="icon" href="../media/icons/new/builder.png" type="image/icon type"> <link rel="icon" href="../media/icons/new/builder.png" type="image/icon type">
@ -35,8 +24,6 @@
<link rel="stylesheet" href="../css/wynnstyles.css"> <link rel="stylesheet" href="../css/wynnstyles.css">
</head> </head>
<body class="text-light" id = "body"> <body class="text-light" id = "body">
<!-- hover tooltip stuff -->
<!-- main --> <!-- main -->
<div id="main-sidebar" class="sidebar dark-7 dark-shadow"> <div id="main-sidebar" class="sidebar dark-7 dark-shadow">
<a href = ""><img src="../media/icons/new/builder.png" alt = "WynnBuilder" title = "WynnBuilder"><b>WynnBuilder</b></a> <a href = ""><img src="../media/icons/new/builder.png" alt = "WynnBuilder" title = "WynnBuilder"><b>WynnBuilder</b></a>
@ -1158,23 +1145,17 @@
</div> </div>
</div> </div>
<div class="col-xl-3 mb-3 px-0"> <div class="col-xl-3 mb-3 px-0">
<div class="row row-cols-1 gy-3 mb-4 text-center scaled-font"> <div id="all-spells-display" class="row row-cols-1 gy-3 mb-4 text-center scaled-font">
<div class = "col">
<div class = "spell-display spell-expand dark-5 rounded dark-shadow py-2 border border-dark" id="build-melee-statsAvg">melee</div>
<div class = "spell-display dark-5 rounded-bottom py-2 dark-shadow" id = "build-melee-stats" style="display: none;"></div>
</div>
<div class = "col">
<div class = "col spell-display dark-5 rounded dark-shadow py-2 border border-dark" id="build-poison-stats">poison</div>
</div>
<div id="all-spells-display" class="row row-cols-1 gy-3 text-center scaled-font pe-0">
<div class = "col pe-0"> <div class = "col pe-0">
<div class = "col spell-display spell-expand dark-5 rounded dark-shadow pt-2 border border-dark" id="spell0-infoAvg">Input a weapon to see abilities!</div> <div class = "col spell-display spell-expand dark-5 rounded dark-shadow pt-2 border border-dark" id="spell0-infoAvg">Input a weapon to see abilities!</div>
</div> </div>
</div> </div>
<div class = "col"> <div class="row row-cols-1 gy-3 mb-4 text-center scaled-font" id="build-poison-stats" style="display: none">
<div class = "spell-display dark-5 rounded dark-shadow py-2 border border-dark" id = "powder-special-stats"></div> </div>
<div class="row row-cols-1 gy-3 mb-4 text-center scaled-font">
<div class = "col pe-0">
<div class="col pe-0 spell-display dark-5 rounded dark-shadow py-2 border border-dark" id="powder-special-stats"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -1198,20 +1179,6 @@
</div> </div>
<div id="weapon-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3"> <div id="weapon-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
</div> </div>
<!--div id="weaponTome1-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
</div>
<div id="weaponTome2-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
</div>
<div id="armorTome1-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
</div>
<div id="armorTome2-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
</div>
<div id="armorTome3-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
</div>
<div id="armorTome4-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
</div>
<div id="guildTome1-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
</div-->
<div class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3" id = "build-order"> <div class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3" id = "build-order">
</div> </div>
<div class = "rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark p-3" id = "set-info"></div> <div class = "rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark p-3" id = "set-info"></div>
@ -1278,10 +1245,8 @@
<div class = "row box-title justify-content-center my-1" id = "summary"> <div class = "row box-title justify-content-center my-1" id = "summary">
</div> </div>
<div class = "row" id = "search-results"> <div class = "row" id = "search-results">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -1290,7 +1255,6 @@
<script type="text/javascript" src="../js/utils.js"></script> <script type="text/javascript" src="../js/utils.js"></script>
<script type="text/javascript" src="../js/build_utils.js"></script> <script type="text/javascript" src="../js/build_utils.js"></script>
<script type="text/javascript" src="../js/computation_graph.js"></script> <script type="text/javascript" src="../js/computation_graph.js"></script>
<!-- <script type="text/javascript" src="../js/icons.js"></script> -->
<script type="text/javascript" src="../js/sq2icons.js"></script> <script type="text/javascript" src="../js/sq2icons.js"></script>
<script type="text/javascript" src="../js/powders.js"></script> <script type="text/javascript" src="../js/powders.js"></script>
<script type="text/javascript" src="../js/skillpoints.js"></script> <script type="text/javascript" src="../js/skillpoints.js"></script>

4
css/sq2bs.css
View file

@ -132,10 +132,6 @@ input.equipment-input {
font-weight: bold; font-weight: bold;
} }
.spell-expand {
cursor: pointer;
}
:root { :root {
--scaled-fontsize: 2.5rem; --scaled-fontsize: 2.5rem;
} }

8
js/atree.js
View file

@ -864,10 +864,10 @@ class AbilityTreeEnsureNodesNode extends ComputeNode {
let display_elem = document.createElement('div'); let display_elem = document.createElement('div');
display_elem.classList.add("col", "pe-0"); display_elem.classList.add("col", "pe-0");
// TODO: just pass these elements into the display node instead of juggling the raw IDs... // 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"); let spell_summary = make_elem('div', ["col", "spell-display", "fake-button", "dark-5", "rounded", "dark-shadow", "pt-2", "border", "border-dark"],
spell_summary.classList.add("col", "spell-display", "spell-expand", "dark-5", "rounded", "dark-shadow", "pt-2", "border", "border-dark"); { id: "spell"+spell.base_spell+"-infoAvg" });
let spell_detail = document.createElement('div'); spell_detail.setAttribute('id', "spell"+spell.base_spell+"-info"); let spell_detail = make_elem('div', ["col", "spell-display", "dark-5", "rounded", "dark-shadow", "py-2"],
spell_detail.classList.add("col", "spell-display", "dark-5", "rounded", "dark-shadow", "py-2"); { id: "spell"+spell.base_spell+"-info" });
spell_detail.style.display = "none"; spell_detail.style.display = "none";
display_elem.appendChild(spell_summary); display_elem.appendChild(spell_detail); display_elem.appendChild(spell_summary); display_elem.appendChild(spell_detail);

54
js/builder_graph.js
View file

@ -656,59 +656,10 @@ class SpellDisplayNode extends ComputeNode {
const i = this.spell_idx; const i = this.spell_idx;
let parent_elem = document.getElementById("spell"+i+"-info"); let parent_elem = document.getElementById("spell"+i+"-info");
let overallparent_elem = document.getElementById("spell"+i+"-infoAvg"); 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. * Display build stats.
* *
@ -723,10 +674,7 @@ class BuildDisplayNode extends ComputeNode {
displayBuildStats('overall-stats', build, build_all_display_commands, stats); displayBuildStats('overall-stats', build, build_all_display_commands, stats);
displayBuildStats("offensive-stats", build, build_offensive_display_commands, stats); displayBuildStats("offensive-stats", build, build_offensive_display_commands, stats);
displaySetBonuses("set-info", build); displaySetBonuses("set-info", build);
let meleeStats = getMeleeStats(stats, build.weapon);
// TODO: move weapon out? // TODO: move weapon out?
displayMeleeDamage(document.getElementById("build-melee-stats"), document.getElementById("build-melee-statsAvg"), meleeStats);
displayDefenseStats(document.getElementById("defensive-stats"), stats); displayDefenseStats(document.getElementById("defensive-stats"), stats);
displayPoisonDamage(document.getElementById("build-poison-stats"), build); displayPoisonDamage(document.getElementById("build-poison-stats"), build);

265
js/display.js
View file

@ -989,23 +989,30 @@ function displayFixedID(active, id, value, elemental_format, style) {
function displayPoisonDamage(overallparent_elem, build) { function displayPoisonDamage(overallparent_elem, build) {
overallparent_elem.textContent = ""; 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 //Title
let title_elemavg = document.createElement("b"); let title_elemavg = make_elem("b");
title_elemavg.textContent = "Poison Stats"; title_elemavg.append(make_elem('span', [], { textContent: "Poison Stats" }));
overallparent_elem.append(title_elemavg); 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); 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); let overallpoisonDamage = make_elem("p");
overallpoisonDamage.appendChild(overallpoisonDamageSecond); overallpoisonDamage.append(
overallparent_elem.append(overallpoisonDamage); 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){ function displayEquipOrder(parent_elem, buildOrder){
@ -1022,152 +1029,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){ function displayDefenseStats(parent_elem, statMap, insertSummary){
let defenseStats = getDefenseStats(statMap); let defenseStats = getDefenseStats(statMap);
insertSummary = (typeof insertSummary !== 'undefined') ? insertSummary : false; insertSummary = (typeof insertSummary !== 'undefined') ? insertSummary : false;
@ -1374,6 +1235,13 @@ function displayDefenseStats(parent_elem, statMap, insertSummary){
} }
function displayPowderSpecials(parent_elem, powderSpecials, stats, weapon, overall=false) { 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 = [ const skillpoints = [
stats.get('str'), stats.get('str'),
stats.get('dex'), stats.get('dex'),
@ -1381,16 +1249,13 @@ function displayPowderSpecials(parent_elem, powderSpecials, stats, weapon, overa
stats.get('def'), stats.get('def'),
stats.get('agi') stats.get('agi')
]; ];
parent_elem.textContent = "" parent_elem.append(make_elem("b", [], { textContent: "Powder Specials" }));
let title = document.createElement("b");
title.textContent = "Powder Specials";
parent_elem.appendChild(title);
let specials = powderSpecials.slice(); let specials = powderSpecials.slice();
let expandedStats = new Map(); let expandedStats = new Map();
//each entry of powderSpecials is [ps, power] //each entry of powderSpecials is [ps, power]
for (special of specials) { for (special of specials) {
//iterate through the special and display its effects. //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 specialSuffixes = new Map([ ["Duration", " sec"], ["Radius", " blocks"], ["Chains", ""], ["Damage", "%"], ["Damage Boost", "%"], ["Knockback", " blocks"] ]);
let specialTitle = document.createElement("p"); let specialTitle = document.createElement("p");
let specialEffects = document.createElement("p"); let specialEffects = document.createElement("p");
@ -1533,31 +1398,23 @@ function displaySpellDamage(parent_elem, overallparent_elem, stats, spell, spell
// TODO: move cost calc out // TODO: move cost calc out
parent_elem.textContent = ""; parent_elem.textContent = "";
let title_elem = document.createElement("p"); let title_elem = make_elem("p");
overallparent_elem.textContent = ""; overallparent_elem.textContent = "";
let title_elemavg = document.createElement("b"); let title_elemavg = document.createElement("b");
if ('cost' in spell) { if ('cost' in spell) {
let first = document.createElement("span"); let first = make_elem("span", [], { textContent: spell.name + " (" });
first.textContent = spell.name + " (";
title_elem.appendChild(first.cloneNode(true)); //cloneNode is needed here. title_elem.appendChild(first.cloneNode(true)); //cloneNode is needed here.
title_elemavg.appendChild(first); title_elemavg.appendChild(first);
let second = document.createElement("span"); let second = make_elem("span", ["Mana"], { textContent: getSpellCost(stats, spell) });
second.textContent = getSpellCost(stats, spell);
second.classList.add("Mana");
title_elem.appendChild(second.cloneNode(true)); title_elem.appendChild(second.cloneNode(true));
title_elemavg.appendChild(second); title_elemavg.appendChild(second);
let third = make_elem("span", [], { textContent: ")" });// " + getBaseSpellCost(stats, spellIdx, spell.cost) + " ]";
let third = document.createElement("span"); title_elem.appendChild(third.cloneNode(true));
third.textContent = ")";// [Base: " + getBaseSpellCost(stats, spellIdx, spell.cost) + " ]"; title_elemavg.appendChild(third);
title_elem.appendChild(third);
let third_summary = document.createElement("span");
third_summary.textContent = ")";
title_elemavg.appendChild(third_summary);
} }
else { else {
title_elem.textContent = spell.name; title_elem.textContent = spell.name;
@ -1574,30 +1431,26 @@ function displaySpellDamage(parent_elem, overallparent_elem, stats, spell, spell
let critChance = skillPointsToPercentage(stats.get('dex')); let critChance = skillPointsToPercentage(stats.get('dex'));
let part_divavg = document.createElement("p"); let part_divavg = make_elem("p");
overallparent_elem.append(part_divavg); overallparent_elem.append(part_divavg);
function _summary(text, val, fmt) { function add_summary(text, val, fmt) {
let overallaverageLabel = document.createElement("p"); if (typeof(val) === 'number') { val = val.toFixed(2); }
let first = document.createElement("span"); let summary_elem = make_elem("p");
let second = document.createElement("span"); summary_elem.append(
first.textContent = text; make_elem("span", [], { textContent: text }),
second.textContent = val.toFixed(2); make_elem("span", [fmt], { textContent: val })
overallaverageLabel.appendChild(first); );
overallaverageLabel.appendChild(second); part_divavg.append(summary_elem);
second.classList.add(fmt);
part_divavg.append(overallaverageLabel);
} }
for (let i = 0; i < spell_results.length; ++i) { for (let i = 0; i < spell_results.length; ++i) {
const spell_info = spell_results[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); parent_elem.append(part_div);
let subtitle_elem = document.createElement("p"); part_div.append(make_elem("p", [], { textContent: spell_info.name }));
subtitle_elem.textContent = spell_info.name
part_div.append(subtitle_elem);
if (spell_info.type === "damage") { if (spell_info.type === "damage") {
let totalDamNormal = spell_info.normal_total; let totalDamNormal = spell_info.normal_total;
@ -1607,14 +1460,26 @@ function displaySpellDamage(parent_elem, overallparent_elem, stats, spell, spell
let critAverage = (totalDamCrit[0]+totalDamCrit[1])/2 || 0; let critAverage = (totalDamCrit[0]+totalDamCrit[1])/2 || 0;
let averageDamage = (1-critChance)*nonCritAverage+critChance*critAverage || 0; let averageDamage = (1-critChance)*nonCritAverage+critChance*critAverage || 0;
let averageLabel = document.createElement("p"); let averageLabel = make_elem("p", [], { textContent: "Average: "+averageDamage.toFixed(2) });
averageLabel.textContent = "Average: "+averageDamage.toFixed(2);
// averageLabel.classList.add("damageSubtitle"); // averageLabel.classList.add("damageSubtitle");
part_div.append(averageLabel); part_div.append(averageLabel);
if (spell_info.name === spell.display) { 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;
}
add_summary("Average DPS: ", averageDamage * baseDamageMultiplier[adjAtkSpd], "Damage");
add_summary("Attack Speed: ", attackSpeeds[adjAtkSpd], "Damage");
add_summary("Per Attack: ", averageDamage, "Damage");
}
else {
add_summary(spell_info.name+ ": ", averageDamage, "Damage");
}
} }
function _damage_display(label_text, average, dmg_min, dmg_max) { function _damage_display(label_text, average, dmg_min, dmg_max) {
@ -1640,7 +1505,7 @@ function displaySpellDamage(parent_elem, overallparent_elem, stats, spell, spell
// healLabel.classList.add("damagep"); // healLabel.classList.add("damagep");
part_div.append(healLabel); part_div.append(healLabel);
if (spell_info.name === spell.display) { if (spell_info.name === spell.display) {
_summary(spell_info.name+ ": ", heal_amount, "Set"); add_summary(spell_info.name+ ": ", heal_amount, "Set");
} }
} }
} }
@ -2061,12 +1926,10 @@ function stringCDF(id,val,base,amp) {
function addClickableArrow(elem, target) { function addClickableArrow(elem, target) {
//up and down arrow - done ugly //up and down arrow - done ugly
let arrow = document.createElement("img"); let arrow = make_elem("img", [], { id: "arrow_" + elem.id, src: "../media/icons/" + (newIcons ? "new" : "old") + "/toggle_down.png" });
arrow.id = "arrow_" + elem.id;
arrow.style.maxWidth = document.body.clientWidth > 900 ? "3rem" : "10rem"; arrow.style.maxWidth = document.body.clientWidth > 900 ? "3rem" : "10rem";
arrow.src = "../media/icons/" + (newIcons ? "new" : "old") + "/toggle_down.png";
elem.appendChild(arrow); elem.appendChild(arrow);
arrow.addEventListener("click", () => toggle_spell_tab(arrow, target)); elem.addEventListener("click", () => toggle_spell_tab(arrow, target));
} }
// toggle arrow thinger // toggle arrow thinger