From 448411d46fcd1f1ff7da3e369a2afec07fc832e2 Mon Sep 17 00:00:00 2001 From: ferricles Date: Thu, 25 Mar 2021 19:19:07 -0700 Subject: [PATCH 1/2] functional ID value probabilities --- customizer.html | 2 +- display.js | 218 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 219 insertions(+), 1 deletion(-) diff --git a/customizer.html b/customizer.html index cc8d84e..5310445 100644 --- a/customizer.html +++ b/customizer.html @@ -1818,7 +1818,7 @@
diff --git a/display.js b/display.js index 1cdffd7..3aca062 100644 --- a/display.js +++ b/display.js @@ -2257,6 +2257,7 @@ function displayAdditionalInfo(elemID, item) { * @param {String} item expandedItem object */ function displayIDProbabilities(parent_id,item) { + if (item.has("fixID") && item.get("fixID")) {return} let parent_elem = document.getElementById(parent_id); parent_elem.style.display = ""; let title_elem = document.createElement("p"); @@ -2264,7 +2265,224 @@ function displayIDProbabilities(parent_id,item) { title_elem.classList.add("Legendary"); title_elem.classList.add("title"); parent_elem.appendChild(title_elem); + + let disclaimer_elem = document.createElement("p"); + disclaimer_elem.textContent = "IDs are rolled on a uniform distribution. A chance of 0% means that either the minimum or maximum possible multiplier must be rolled to get this value." + parent_elem.appendChild(disclaimer_elem); let item_name = item.get("displayName"); console.log(itemMap.get(item_name)) + + let table_elem = document.createElement("table"); + parent_elem.appendChild(table_elem); + for (const [id,val] of Object.entries(itemMap.get(item_name))) { + if (rolledIDs.includes(id)) { + let min = item.get("minRolls").get(id); + let max = item.get("maxRolls").get(id); + + let row_title = document.createElement("tr"); + //row_title.style.textAlign = "left"; + let title_left = document.createElement("td"); + let left_elem = document.createElement("p"); + let left_val_title = document.createElement("b"); + let left_val_elem = document.createElement("b"); + title_left.style.textAlign = "left"; + left_val_title.textContent = idPrefixes[id] + "Base "; + left_val_elem.textContent = val + idSuffixes[id]; + if (val > 0 == !reversedIDs.includes(id)) { + left_val_elem.classList.add("positive"); + } else if (val > 0 == reversedIDs.includes(id)) { + left_val_elem.classList.add("negative"); + } + left_elem.appendChild(left_val_title); + left_elem.appendChild(left_val_elem); + title_left.appendChild(left_elem); + row_title.appendChild(title_left); + + let title_right = document.createElement("td"); + let title_right_text = document.createElement("b"); + title_right.style.textAlign = "left"; + title_right_text.textContent = "[ " + min + idSuffixes[id] + ", " + max + idSuffixes[id] + " ]"; + if ( (min > 0 && max > 0 && !reversedIDs.includes(id)) || (min < 0 && max < 0 && reversedIDs.includes(id)) ) { + title_right_text.classList.add("positive"); + } else if ( (min < 0 && max < 0 && !reversedIDs.includes(id)) || (min > 0 && max > 0 && reversedIDs.includes(id)) ) { + title_right_text.classList.add("negative"); + } + title_right.appendChild(title_right_text); + + let title_input = document.createElement("td"); + let title_input_slider = document.createElement("input"); + title_input_slider.type = "range"; + title_input_slider.id = id+"-slider"; + if (!reversedIDs.includes(id)) { + title_input_slider.step = 1; + title_input_slider.min = `${min}`; + title_input_slider.max = `${max}`; + title_input_slider.value = `${max}`; + } else { + title_input_slider.step = 1; + title_input_slider.min = `${-1*min}`; + title_input_slider.max = `${-1*max}`; + title_input_slider.value = `${-1*max}`; + } + let title_input_textbox = document.createElement("input"); + title_input_textbox.type = "text"; + title_input_textbox.value = `${max}`; + title_input_textbox.id = id+"-textbox"; + title_input_textbox.classList.add("small-input"); + title_input.appendChild(title_input_slider); + title_input.appendChild(title_input_textbox); + + row_title.appendChild(title_left); + row_title.appendChild(title_right); + row_title.appendChild(title_input); + + let row_chances = document.createElement("tr"); + let chance_cdf = document.createElement("td"); + let chance_pdf = document.createElement("td"); + let cdf_p = document.createElement("p"); + cdf_p.id = id+"-cdf"; + let pdf_p = document.createElement("p"); + pdf_p.id = id+"-pdf"; + + chance_cdf.appendChild(cdf_p); + chance_pdf.appendChild(pdf_p); + row_chances.appendChild(chance_cdf); + row_chances.appendChild(chance_pdf); + + table_elem.appendChild(row_title); + table_elem.appendChild(row_chances); + + + + stringPDF(id, max, val); //val is base roll + stringCDF(id, max, val); //val is base roll + title_input_slider.addEventListener("change", (event) => { + let id_name = event.target.id.split("-")[0]; + let textbox_elem = document.getElementById(id_name+"-textbox"); + + if (reversedIDs.includes(id_name)) { + if (event.target.value < -1*min) { event.target.value = -1*min} + if (event.target.value > -1*max) { event.target.value = -1*max} + stringPDF(id_name, -1*event.target.value, val); //val is base roll + stringCDF(id_name, -1*event.target.value, val); //val is base roll + } else { + if (event.target.value < min) { event.target.value = min} + if (event.target.value > max) { event.target.value = max} + stringPDF(id_name, 1*event.target.value, val); //val is base roll + stringCDF(id_name, 1*event.target.value, val); //val is base roll + } + + if (textbox_elem && textbox_elem.value !== event.target.value) { + if (reversedIDs.includes(id_name)) { + textbox_elem.value = -event.target.value; + } else { + textbox_elem.value = event.target.value; + } + } + + + }); + title_input_textbox.addEventListener("change", (event) => { + let id_name = event.target.id.split("-")[0]; + if (reversedIDs.includes(id_name)) { + if (event.target.value > min) { event.target.value = min} + if (event.target.value < max) { event.target.value = max} + } else { + if (event.target.value < min) { event.target.value = min} + if (event.target.value > max) { event.target.value = max} + } + let slider_elem = document.getElementById(id_name+"-slider"); + if (slider_elem.value !== event.target.value) { + slider_elem.value = -event.target.value; + } + + stringPDF(id_name, 1*event.target.value, val); + stringCDF(id_name, 1*event.target.value, val); + }); + } + } + + + + +} + +//helper functions. id - the string of the id's name, val - the value of the id, base - the base value of the item for this id +function stringPDF(id,val,base) { + /** [0.3b,1.3b] positive normal + * [1.3b,0.3b] positive reversed + * [1.3b,0.7b] negative normal + * [0.7b,1.3b] negative reversed + * + * [0.3, 1.3] minr, maxr [0.3b, 1.3b] min, max + * the minr/maxr decimal roll that corresponds to val -> minround, maxround + */ + let p; let min; let max; let minr; let maxr; let minround; let maxround; + if (base > 0) { + minr = 0.3; maxr = 1.3; + min = Math.max(1, Math.round(minr*base)); max = Math.max(1, Math.round(maxr*base)); + minround = (min == max) ? (minr) : ( Math.max(minr, (val-0.5) / base) ); + maxround = (min == max) ? (maxr) : ( Math.min(maxr, (val+0.5) / base) ); + } else { + minr = 1.3; maxr = 0.7; + min = Math.min(-1, Math.round(minr*base)); max = Math.min(-1, Math.round(maxr*base)); + minround = (min == max) ? (minr) : ( Math.min(minr, (val-0.5) / base) ); + maxround = (min == max) ? (maxr) : ( Math.max(maxr, (val+0.5) / base) ); + } + + console.log(( Math.min(maxr, (val+0.5) / base))); + + p = Math.abs(maxround-minround)/Math.abs(maxr-minr)*100; + p = p.toFixed(3); + + let b1 = document.createElement("b"); + b1.textContent = "Roll exactly "; + let b2 = document.createElement("b"); + b2.textContent = val + idSuffixes[id]; + if (val > 0 == !reversedIDs.includes(id)) {b2.classList.add("positive")} + if (val > 0 == reversedIDs.includes(id)) {b2.classList.add("negative")} + let b3 = document.createElement("b"); + b3.textContent = ": " + p + "%"; + document.getElementById(id + "-pdf").innerHTML = ""; + document.getElementById(id + "-pdf").appendChild(b1); + document.getElementById(id + "-pdf").appendChild(b2); + document.getElementById(id + "-pdf").appendChild(b3); + document.getElementById(id + "-pdf").style.textAlign = "left"; +} +function stringCDF(id,val,base) { + let p; let min; let max; let minr; let maxr; let minround; let maxround; + if (base > 0) { + minr = 0.3; maxr = 1.3; + min = Math.max(1, Math.round(minr*base)); max = Math.max(1, Math.round(maxr*base)); + minround = (min == max) ? (minr) : ( Math.max(minr, (val-0.5) / base) ); + maxround = (min == max) ? (maxr) : ( Math.min(maxr, (val+0.5) / base) ); + } else { + minr = 1.3; maxr = 0.7; + min = Math.min(-1, Math.round(minr*base)); max = Math.min(-1, Math.round(maxr*base)); + minround = (min == max) ? (minr) : ( Math.min(minr, (val-0.5) / base) ); + maxround = (min == max) ? (maxr) : ( Math.max(maxr, (val+0.5) / base) ); + } + + console.log(( Math.min(maxr, (val+0.5) / base))); + if (reversedIDs.includes(id)) { + p = Math.abs(minr-maxround)/Math.abs(maxr-minr)*100; + } else { + p = Math.abs(maxr-minround)/Math.abs(maxr-minr)*100; + } + p = p.toFixed(3); + + let b1 = document.createElement("b"); + b1.textContent = "Roll "; + let b2 = document.createElement("b"); + b2.textContent = val + idSuffixes[id]; + if (val > 0 == !reversedIDs.includes(id)) {b2.classList.add("positive")} + if (val > 0 == reversedIDs.includes(id)) {b2.classList.add("negative")} + let b3 = document.createElement("b"); + b3.textContent= " or better: " + p + "%"; + document.getElementById(id + "-cdf").innerHTML = ""; + document.getElementById(id + "-cdf").appendChild(b1); + document.getElementById(id + "-cdf").appendChild(b2); + document.getElementById(id + "-cdf").appendChild(b3); + document.getElementById(id + "-cdf").style.textAlign = "left"; } \ No newline at end of file From f9f844045cea794bcd6482d6cc40633b526c89cd Mon Sep 17 00:00:00 2001 From: ferricles Date: Sat, 27 Mar 2021 11:17:58 -0700 Subject: [PATCH 2/2] 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; -}