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

reworked tooltips, added new tooltips for defense stats and spell costs

Browse source
This commit is contained in:
ferricles 2021-03-27 11:17:58 -07:00
parent c53e0d970b
commit f9f844045c
9 changed files with 150 additions and 237 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
build.js
View file

@ -1,5 +1,6 @@
const baseDamageMultiplier = [ 0.51, 0.83, 1.5, 2.05, 2.5, 3.1, 4.3 ];
//0.51, 0.82, 1.50, 2.05, 2.50, 3.11, 4.27
const classDefenseMultipliers = new Map([ ["relik",0.50], ["bow",0.60], ["wand", 0.80], ["dagger", 1.0], ["spear",1.20] ]);
/**
@ -544,5 +545,6 @@ class Build{
statMap.set("damageBonus", [statMap.get("eDamPct"), statMap.get("tDamPct"), statMap.get("wDamPct"), statMap.get("fDamPct"), statMap.get("aDamPct")]);
statMap.set("defRaw", [statMap.get("eDef"), statMap.get("tDef"), statMap.get("wDef"), statMap.get("fDef"), statMap.get("aDef")]);
statMap.set("defBonus", [statMap.get("eDefPct"), statMap.get("tDefPct"), statMap.get("wDefPct"), statMap.get("fDefPct"), statMap.get("aDefPct")]);
statMap.set("defMult", classDefenseMultipliers.get(this.weapon.get("type")));
}
}

4
crafter.html
View file

@ -7,8 +7,8 @@
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="wide.css"/>
<link rel="stylesheet" media="screen and (max-width: 1099px)" href="narrow.css"/>
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="crafter-wide.css"/>
<link rel="stylesheet" media="screen and (max-width: 1099px)" href="crafter-narrow.css"/>
<link rel="icon" href="./media/icons/new/crafter.png">
<link rel="manifest" href="manifest.json">
<title>WynnCrafter</title>

9
damage_calc.js
View file

@ -4,6 +4,8 @@ const damageMultipliers = new Map([ ["allytotem", .15], ["yourtotem", .35], ["va
// externalStats should be a map
function calculateSpellDamage(stats, spellConversions, rawModifier, pctModifier, spellMultiplier, weapon, total_skillpoints, damageMultiplier, externalStats) {
let buildStats = new Map(stats);
let tooltipinfo = new Map();
if(externalStats) { //if nothing is passed in, then this hopefully won't trigger
for (const entry of externalStats) {
const key = entry[0];
@ -84,12 +86,15 @@ function calculateSpellDamage(stats, spellConversions, rawModifier, pctModifier,
damages[element+1][0] += powder.min;
damages[element+1][1] += powder.max;
}
tooltipinfo.set("damagebase",[neutralRemainingRaw,damages[1],damages[2],damages[3],damages[4],damages[5]]);
console.log(tooltipinfo);
damages[0] = neutralRemainingRaw;
let damageMult = damageMultiplier;
let melee = false;
// If we are doing melee calculations:
tooltipinfo.set("dmgMult", damageMult);
if (spellMultiplier == 0) {
spellMultiplier = 1;
melee = true;
@ -158,7 +163,9 @@ function calculateSpellDamage(stats, spellConversions, rawModifier, pctModifier,
if (totalDamNorm[1] < 0) totalDamNorm[1] = 0;
if (totalDamCrit[0] < 0) totalDamCrit[0] = 0;
if (totalDamCrit[1] < 0) totalDamCrit[1] = 0;
return [totalDamNorm, totalDamCrit, damages_results];
return [totalDamNorm, totalDamCrit, damages_results, tooltipinfo];
}

108
display.js
View file

@ -585,14 +585,31 @@ function displayExpandedItem(item, parent_id){
} else if (id === "majorIds") {
let p_elem = document.createElement("p");
p_elem.classList.add("itemp");
let title_elem = document.createElement("b");
title_elem.textContent = "Major IDs: ";
let b_elem = document.createElement("b");
b_elem.classList.add("Crafted");
b_elem.textContent = item.get(id).toString();
let majorID = item.get(id).toString();
p_elem.appendChild(title_elem);
p_elem.appendChild(b_elem);
let title_elem = document.createElement("b");
let b_elem = document.createElement("b");
if (majorID.includes(":")) {
let name = majorID.substring(0, majorID.indexOf(":")+1);
let mid = majorID.substring(majorID.indexOf(":")+1);
if (name.charAt(0) !== "+") {name = "+" + name}
title_elem.classList.add("Legendary");
title_elem.textContent = name;
b_elem.classList.add("Crafted");
b_elem.textContent = mid;
p_elem.appendChild(title_elem);
p_elem.appendChild(b_elem);
} else {
let name = item.get(id).toString()
if (name.charAt(0) !== "+") {name = "+" + name}
b_elem.classList.add("Legendary");
b_elem.textContent = name;
p_elem.appendChild(b_elem);
}
active_elem.appendChild(p_elem);
} else if (id === "lvl" && item.get("tier") === "Crafted") {
let p_elem = document.createElement("p");
@ -918,7 +935,7 @@ function displayRecipeStats(craft, parent_id) {
for (let j = 0; j < 2; j++) {
let ingredName = ingreds[2 * i + j];
let cell = document.createElement("td");
cell.style.width = "50%";
cell.style.minWidth = "50%";
cell.classList.add("center");
cell.classList.add("box");
cell.classList.add("tooltip");
@ -939,6 +956,7 @@ function displayRecipeStats(craft, parent_id) {
let tooltip = document.createElement("div");
tooltip.classList.add("tooltiptext");
tooltip.classList.add("ing-tooltip");
tooltip.classList.add("center");
tooltip.id = "tooltip-" + (2*i + j);
cell.appendChild(tooltip);
@ -1558,6 +1576,7 @@ function displayMeleeDamage(parent_elem, overallparent_elem, meleeStats){
parent_elem.append(critStats);
}
function displayDefenseStats(parent_elem, build, insertSummary){
let defenseStats = build.getDefenseStats();
insertSummary = (typeof insertSummary !== 'undefined') ? insertSummary : false;
@ -1626,6 +1645,11 @@ function displayDefenseStats(parent_elem, build, insertSummary){
hpRow.append(boost);
statsTable.appendChild(hpRow);
let tooltip_elem;
let defMult = build.statMap.get("defMult");
if (!defMult) {defMult = 1}
//EHP
let ehpRow = document.createElement("tr");
let ehp = document.createElement("td");
@ -1635,6 +1659,12 @@ function displayDefenseStats(parent_elem, build, insertSummary){
boost = document.createElement("td");
boost.textContent = stats[1][0];
boost.classList.add("right");
boost.classList.add("tooltip");
tooltip_elem = document.createElement("p");
tooltip_elem.classList.add("tooltiptext");
tooltip_elem.classList.add("def-tooltip");
tooltip_elem.textContent = `= ${stats[0]} / ((1 - ${skillPointsToPercentage(build.total_skillpoints[3]).toFixed(3)}) * (1 - ${skillPointsToPercentage(build.total_skillpoints[4]).toFixed(3)}) * (2 - ${defMult}) * (2 - ${build.defenseMultiplier}))`
boost.appendChild(tooltip_elem);
ehpRow.appendChild(ehp);
ehpRow.append(boost);
@ -1648,6 +1678,12 @@ function displayDefenseStats(parent_elem, build, insertSummary){
boost = document.createElement("td");
boost.textContent = stats[1][1];
boost.classList.add("right");
boost.classList.add("tooltip");
tooltip_elem = document.createElement("p");
tooltip_elem.classList.add("tooltiptext");
tooltip_elem.classList.add("def-tooltip");
tooltip_elem.textContent = `= ${stats[0]} / ((1 - ${skillPointsToPercentage(build.total_skillpoints[3]).toFixed(3)}) * (2 - ${defMult}) * (2 - ${build.defenseMultiplier}))`
boost.appendChild(tooltip_elem);
ehpRow.appendChild(ehp);
ehpRow.append(boost);
@ -1675,6 +1711,12 @@ function displayDefenseStats(parent_elem, build, insertSummary){
boost = document.createElement("td");
boost.textContent = stats[3][0];
boost.classList.add("right");
boost.classList.add("tooltip");
tooltip_elem = document.createElement("p");
tooltip_elem.classList.add("tooltiptext");
tooltip_elem.classList.add("def-tooltip");
tooltip_elem.textContent = `= ${stats[2]} / ((1 - ${skillPointsToPercentage(build.total_skillpoints[3]).toFixed(3)}) * (1 - ${skillPointsToPercentage(build.total_skillpoints[4]).toFixed(3)}) * (2 - ${defMult}) * (2 - ${build.defenseMultiplier}))`
boost.appendChild(tooltip_elem);
ehprRow.appendChild(ehpr);
ehprRow.append(boost);
@ -1715,6 +1757,22 @@ function displayDefenseStats(parent_elem, build, insertSummary){
boost.textContent = eledefs[i];
boost.classList.add(eledefs[i] >= 0 ? "positive" : "negative");
boost.classList.add("right");
boost.classList.add("tooltip");
tooltip_elem = document.createElement("p");
tooltip_elem.classList.add("tooltiptext");
tooltip_elem.classList.add("def-tooltip");
let defRaw = build.statMap.get("defRaw")[i];
let defPct = build.statMap.get("defBonus")[i]/100;
if (defRaw < 0) {
defPct >= 0 ? defPct = "- " + defPct: defPct = "+ " + defPct;
tooltip_elem.textContent = `= min(0, ${defRaw} * (1 ${defPct}))`
} else {
defPct >= 0 ? defPct = "+ " + defPct: defPct = "- " + defPct;
tooltip_elem.textContent = `= ${defRaw} * (1 ${defPct})`
}
boost.appendChild(tooltip_elem);
eledefElemRow.appendChild(boost);
statsTable.appendChild(eledefElemRow);
@ -1747,6 +1805,7 @@ function displayDefenseStats(parent_elem, build, insertSummary){
parent_elem.append(statsTable);
}
function displayPowderSpecials(parent_elem, powderSpecials, build) {
parent_elem.textContent = "Powder Specials";
let specials = powderSpecials.slice();
@ -1870,6 +1929,7 @@ function displayPowderSpecials(parent_elem, powderSpecials, build) {
parent_elem.appendChild(powder_special);
}
}
function displaySpellDamage(parent_elem, overallparent_elem, build, spell, spellIdx) {
parent_elem.textContent = "";
@ -1888,11 +1948,35 @@ function displaySpellDamage(parent_elem, overallparent_elem, build, spell, spell
first.textContent = spell.title + " (";
title_elem.appendChild(first.cloneNode(true)); //cloneNode is needed here.
title_elemavg.appendChild(first);
let second = document.createElement("b");
second.textContent = build.getSpellCost(spellIdx, spell.cost);
second.classList.add("Mana");
second.classList.add("tooltip");
let mana_cost_tooltip = document.createElement("p");
mana_cost_tooltip.classList.add("tooltiptext");
mana_cost_tooltip.classList.add("spellcostcalc")
mana_cost_tooltip.classList.add("itemp");
let tooltip_text = document.createElement("div");
tooltip_text.width = "100%";
tooltip_text.style.wordBreak = "break-all";
tooltip_text.style.overflowWrap = "break-word";
let int_redux = skillPointsToPercentage(build.total_skillpoints[2]).toFixed(2);
let spPct_redux = (build.statMap.get("spPct" + spellIdx)/100).toFixed(2);
let spRaw_redux = (build.statMap.get("spRaw" + spellIdx)).toFixed(2);
spPct_redux >= 0 ? spPct_redux = "+ " + spPct_redux : spPct_redux = "- " + Math.abs(spPct_redux);
spRaw_redux >= 0 ? spRaw_redux = "+ " + spRaw_redux : spRaw_redux = "- " + Math.abs(spRaw_redux);
tooltip_text.textContent = `= max(1, floor((ceil(${spell.cost} * (1 - ${int_redux})) ${spRaw_redux}) * (1 ${spPct_redux})))`;
mana_cost_tooltip.appendChild(tooltip_text);
second.appendChild(mana_cost_tooltip);
title_elem.appendChild(second.cloneNode(true));
title_elemavg.appendChild(second);
let third = document.createElement("b");
third.textContent = ")";
title_elem.appendChild(third.cloneNode(true));
@ -1928,6 +2012,7 @@ function displaySpellDamage(parent_elem, overallparent_elem, build, spell, spell
}
}
}
//console.log(spell_parts);
for (const part of spell_parts) {
parent_elem.append(document.createElement("br"));
@ -1961,6 +2046,7 @@ function displaySpellDamage(parent_elem, overallparent_elem, build, spell, spell
averageLabel.classList.add("damageSubtitle");
part_div.append(averageLabel);
if (part.summary == true) {
let overallaverageLabel = document.createElement("p");
let first = document.createElement("b");
@ -2004,8 +2090,7 @@ function displaySpellDamage(parent_elem, overallparent_elem, build, spell, spell
}
}
save_damages.push(averageDamage);
}
else if (part.type === "heal") {
} else if (part.type === "heal") {
let heal_amount = (part.strength * build.getDefenseStats()[0] * Math.max(0.5,Math.min(1.75, 1 + 0.5 * stats.get("wDamPct")/100))).toFixed(2);
let healLabel = document.createElement("p");
healLabel.textContent = heal_amount;
@ -2023,8 +2108,7 @@ function displaySpellDamage(parent_elem, overallparent_elem, build, spell, spell
overallhealLabel.classList.add("overallp");
part_divavg.append(overallhealLabel);
}
}
else if (part.type === "total") {
} else if (part.type === "total") {
let total_damage = 0;
for (let i in part.factors) {
total_damage += save_damages[i] * part.factors[i];

4
index.html
View file

@ -10,8 +10,8 @@
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="wide.css"/>
<link rel="stylesheet" media="screen and (max-width: 1099px)" href="narrow.css"/>
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="index-wide.css"/>
<link rel="stylesheet" media="screen and (max-width: 1099px)" href="index-narrow.css"/>
<link rel="icon" href="./media/icons/new/builder.png">
<link rel="manifest" href="manifest.json">
<title>WynnBuilder</title>

1
loadheader.js
View file

@ -57,6 +57,7 @@ function setHeaders() {
img.classList.add("headericon");
img.src = "/media/icons/new/" + data[0] + ".png";
div.classList.add("tooltiptext");
div.classList.add("header-tooltip");
div.classList.add("center");
div.textContent = data[1];
a_elem.appendChild(img);

101
narrow.css
View file

@ -1,101 +0,0 @@
.build-overall-container {
grid-column: 1;
grid-row: 2;
}
.spell-info-container {
grid-column: 2;
grid-row: 2;
}
.equipment{
padding: 0%;
display: grid;
grid-template-columns: min-content min-content auto;
gap: 5px;
grid-template-rows: min-content min-content auto;
}
.summary {
padding: 2% 4% 4%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px;
grid-auto-rows: minmax(60px, auto);
}
.container {
}
.ingredTable {
table-layout: "fixed";
}
.build, .spells .misc {
padding: 2%;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
grid-auto-rows: minmax(60px, auto);
width: 94%;
background: #121516;
}
.iteminput {
width: 25vw;
height: 10vw;
max-height: 50px;
}
.powderinput {
width: 25vw;
height: 10vw;
max-height: 50px;
}
.skpInput, .idInput {
width: 90%;
height: 7vw;
max-height: 30px;
}
.wide-space {
height: 1em;
}
.idLabel, .skpLabel, .idDesc, .skpDesc {
font-size: 90%;
}
.title{
text-align: center;
font-size: 150%;
}
.smalltitle{
text-align: center;
font-size: 125%;
margin-top: 10px;
margin-bottom: 4px;
}
.button-narrow {
background-color: #666;
border: 2px solid #444;
border-radius: 5px;
color: #ddd;
text-align: center;
text-decoration: none;
font-family: 'Nunito',sans-serif;
font-weight: 700;
font-size: 100%;
display: inline-block;
}
button {
background-color: #666;
border: 2px solid #444;
border-radius: 5px;
color: #ddd;
text-align: center;
text-decoration: none;
font-family: 'Nunito',sans-serif;
font-weight: 700;
font-size: 125%;
display: inline-block;
}

47
styles.css
View file

@ -464,22 +464,53 @@ button.toggleOn:hover {
color: #ff0;
background: #775;
}
.tooltip {
position: relative;
}
.tooltip .tooltiptext {
visibility: hidden;
color: #aaa;
color: #ddd;
background: #110110;
width: min(200%, 75vw);
/*width: min(200%, 75vw);*/
display: inline-block;
padding: 0 min(2%,10px) 0 min(2%,10px);
text-align: center;
border: 3px solid #BCBCBC;
border-radius: 10px;
padding: 0 0;
border: 1px solid #BCBCBC;
border-radius: 2px;
position: absolute;
z-index: 1;
}
.center-parent {
.header-tooltip {
top: 100%;
left: -20%;
}
.ing-tooltip {
min-width: 240px;
border: 3px solid #BCBCBC !important;
border-radius: 10px !important;
top: 100%;
}
.spellcostcalc {
width: max(70%, 130px) !important;
font-size: 12px;
/*overflow-wrap: break-word !important;*/
border: 1.5px dotted #BCBCBC !important;
border-radius: 1px !important;
/*JANK*/
left: -40%;
top: 24px;
}
.def-tooltip {
width: max(70%, 100px) !important;
font-size: 12px;
border: 1.5px dotted #BCBCBC !important;
border-radius: 1px !important;
/*JANK*/
margin-top: 20px;
left: -30%;
}
.recipe {
z-index: 1;
}

111
wide.css
View file

@ -1,111 +0,0 @@
.build-overall-container {
grid-column:3;
}
.spell-info-container {
grid-column:4;
}
.equipment{
padding: 0%;
display: grid;
grid-template-columns: repeat(3, 1fr);
width: 50vw;
gap: 5px;
grid-template-rows: min-content min-content auto;
}
.sticky-box {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 10px;
}
.summary {
padding: 2% 2% 0%;
display: grid;
grid-template-columns: 1.25fr 1.25fr 1fr 1fr;
grid-auto-columns: minmax(200px, auto);
gap: 5px;
grid-auto-rows: minmax(60px, auto);
}
.container {
padding: 2% 4% 4%;
display: grid;
grid-template-columns: 0.85fr 0.45fr 0.55fr;
grid-auto-columns: minmax(200px, auto);
gap: 5px;
grid-auto-rows: minmax(60px, auto);
}
.ingredients {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-columns: minmax(200px, auto);
gap: 5px;
grid-auto-rows: minmax(60px, auto);
}
.build, .spells, .misc {
padding: 2%;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
grid-auto-rows: minmax(60px, auto);
width: 94%;
background: #121516;
}
.iteminput {
width: 11vw;
}
.powderinput {
width: 4vw;
}
.skpInput, .idInput {
width: 95%;
height: 7vw;
max-height: 20px;
}
.wide-space {
height: 8em;
}
.idLabel, .skpLabel, .idDesc, .skpDesc {
font-size: 80%;
}
.title{
text-align: center;
font-size: 150%;
}
.smalltitle{
text-align: center;
font-size: 125%;
margin-top: 10px;
margin-bottom: 4px;
}
.button-narrow {
background-color: #666;
border: 2px solid #444;
border-radius: 5px;
color: #ddd;
text-align: center;
text-decoration: none;
font-family: 'Nunito',sans-serif;
font-weight: 700;
font-size: 90%;
display: inline-block;
}
button {
background-color: #666;
border: 2px solid #444;
border-radius: 5px;
color: #ddd;
text-align: center;
text-decoration: none;
font-family: 'Nunito',sans-serif;
font-weight: 700;
font-size: 120%;
display: inline-block;
}