From f9f844045cea794bcd6482d6cc40633b526c89cd Mon Sep 17 00:00:00 2001 From: ferricles Date: Sat, 27 Mar 2021 11:17:58 -0700 Subject: [PATCH] reworked tooltips, added new tooltips for defense stats and spell costs --- build.js | 2 + crafter.html | 4 +- damage_calc.js | 9 +++- display.js | 108 +++++++++++++++++++++++++++++++++++++++++------ index.html | 4 +- loadheader.js | 1 + narrow.css | 101 -------------------------------------------- styles.css | 47 +++++++++++++++++---- wide.css | 111 ------------------------------------------------- 9 files changed, 150 insertions(+), 237 deletions(-) delete mode 100644 narrow.css delete mode 100644 wide.css diff --git a/build.js b/build.js index 1a66c24..06c7049 100644 --- a/build.js +++ b/build.js @@ -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"))); } } diff --git a/crafter.html b/crafter.html index e3d8845..e20d167 100644 --- a/crafter.html +++ b/crafter.html @@ -7,8 +7,8 @@ - - + + WynnCrafter diff --git a/damage_calc.js b/damage_calc.js index c2962ad..fa499d8 100644 --- a/damage_calc.js +++ b/damage_calc.js @@ -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]; } diff --git a/display.js b/display.js index 7189bdb..fa939d4 100644 --- a/display.js +++ b/display.js @@ -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]; diff --git a/index.html b/index.html index 26d097e..f2c0f25 100644 --- a/index.html +++ b/index.html @@ -10,8 +10,8 @@ - - + + WynnBuilder diff --git a/loadheader.js b/loadheader.js index 4b80206..71ec89c 100644 --- a/loadheader.js +++ b/loadheader.js @@ -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); diff --git a/narrow.css b/narrow.css deleted file mode 100644 index 62733df..0000000 --- a/narrow.css +++ /dev/null @@ -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; -} diff --git a/styles.css b/styles.css index 069ec41..fd21fdf 100644 --- a/styles.css +++ b/styles.css @@ -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; } diff --git a/wide.css b/wide.css deleted file mode 100644 index 988db79..0000000 --- a/wide.css +++ /dev/null @@ -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; -}