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

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")));
     }
 }

crafter.html

@@ -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 (min-width: 1100px)" href="crafter-wide.css"/>
-        <link rel="stylesheet" media="screen and (max-width: 1099px)" href="narrow.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>

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];
 }
 
 

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");
+                    let majorID = item.get(id).toString();
-                    title_elem.textContent = "Major IDs: ";
+
-                    let b_elem = document.createElement("b");
+                    let title_elem = document.createElement("b");
-                    b_elem.classList.add("Crafted");
+                    let b_elem = document.createElement("b");
-                    b_elem.textContent = item.get(id).toString();
+                    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);
+                    }
+
+                    
+
                    
-                    p_elem.appendChild(title_elem);
-                    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];

index.html

@@ -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 (min-width: 1100px)" href="index-wide.css"/>
-        <link rel="stylesheet" media="screen and (max-width: 1099px)" href="narrow.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>

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);

narrow.css

@@ -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;
-}

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: 1px solid #BCBCBC;
-    border-radius: 10px;
+    border-radius: 2px;
-    padding: 0 0;
     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;
 }

wide.css

@@ -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;
-}