From 682e3b7c66cc98046cef34a0b8ebde61e5d838b6 Mon Sep 17 00:00:00 2001 From: ferricles Date: Fri, 15 Jan 2021 00:23:55 -0800 Subject: [PATCH] nicer display for melee + spell + poison summaries --- build.js | 2 +- display.js | 65 ++++++++++++++++++++++++++++++++++++++++++++++++------ styles.css | 3 ++- 3 files changed, 61 insertions(+), 9 deletions(-) diff --git a/build.js b/build.js index bb4fedd..5fdfa33 100644 --- a/build.js +++ b/build.js @@ -12,7 +12,7 @@ function skillPointsToPercentage(skp){ }else if(skp>=150){ return 0.808; }else{ - return(-0.0000000066695* Math.pow(Math.E, -0.00924033 * skp + 18.9) + 1.0771); + return (-0.0000000066695* Math.pow(Math.E, -0.00924033 * skp + 18.9) + 1.0771); //return(-0.0000000066695* Math.pow(Math.E, -0.00924033 * skp + 18.9) + 1.0771).toFixed(3); } } diff --git a/display.js b/display.js index dea2cdc..a2f6f4c 100644 --- a/display.js +++ b/display.js @@ -628,8 +628,15 @@ function displayPoisonDamage(overallparent_elem, build) { let overallpoisonDamage = document.createElement("p"); overallpoisonDamage.classList.add("itemp"); + let overallpoisonDamageFirst = document.createElement("b"); + let overallpoisonDamageSecond = document.createElement("b"); let poison_tick = Math.round(build.statMap.get("poison") * (1+skillPointsToPercentage(build.total_skillpoints[0])) * (build.statMap.get("poisonPct") + build.externalStats.get("poisonPct"))/100 /3); - overallpoisonDamage.textContent = "Poison Tick: " + Math.max(poison_tick,0); + overallpoisonDamageFirst.textContent = "Poison Tick: "; + overallpoisonDamageSecond.textContent = Math.max(poison_tick,0); + overallpoisonDamageSecond.classList.add("Damage"); + + overallpoisonDamage.appendChild(overallpoisonDamageFirst); + overallpoisonDamage.appendChild(overallpoisonDamageSecond); overallparent_elem.append(overallpoisonDamage); overallparent_elem.append(document.createElement("br")); } @@ -681,7 +688,15 @@ function displayMeleeDamage(parent_elem, overallparent_elem, meleeStats){ //overall average DPS let overallaverageDamage = document.createElement("p"); overallaverageDamage.classList.add("itemp"); - overallaverageDamage.textContent = "Average DPS: " + stats[10]; + let overallaverageDamageFirst = document.createElement("b"); + overallaverageDamageFirst.textContent = "Average DPS: " + + let overallaverageDamageSecond = document.createElement("b"); + overallaverageDamageSecond.classList.add("Damage"); + overallaverageDamageSecond.textContent = stats[10]; + overallaverageDamage.appendChild(overallaverageDamageFirst); + overallaverageDamage.appendChild(overallaverageDamageSecond); + overallparent_elem.append(overallaverageDamage); overallparent_elem.append(document.createElement("br")); @@ -697,7 +712,13 @@ function displayMeleeDamage(parent_elem, overallparent_elem, meleeStats){ let overallatkSpd = document.createElement("p"); overallatkSpd.classList.add("center"); overallatkSpd.classList.add("itemp"); - overallatkSpd.textContent = "Attack Speed: " + attackSpeeds[stats[11]]; + let overallatkSpdFirst = document.createElement("b"); + overallatkSpdFirst.textContent = "Attack Speed: "; + let overallatkSpdSecond = document.createElement("b"); + overallatkSpdSecond.classList.add("Damage"); + overallatkSpdSecond.textContent = attackSpeeds[stats[11]]; + overallatkSpd.appendChild(overallatkSpdFirst); + overallatkSpd.appendChild(overallatkSpdSecond); overallparent_elem.append(overallatkSpd); overallparent_elem.append(document.createElement("br")); @@ -730,7 +751,14 @@ function displayMeleeDamage(parent_elem, overallparent_elem, meleeStats){ //overall average DPS let singleHitDamage = document.createElement("p"); singleHitDamage.classList.add("itemp"); - singleHitDamage.textContent = "Single Hit Average: " + stats[12].toFixed(2); + let singleHitDamageFirst = document.createElement("b"); + singleHitDamageFirst.textContent = "Single Hit Average: "; + let singleHitDamageSecond = document.createElement("b"); + singleHitDamageSecond.classList.add("Damage"); + singleHitDamageSecond.textContent = stats[12].toFixed(2); + + singleHitDamage.appendChild(singleHitDamageFirst); + singleHitDamage.appendChild(singleHitDamageSecond); overallparent_elem.append(singleHitDamage); overallparent_elem.append(document.createElement("br")); @@ -1104,7 +1132,22 @@ function displaySpellDamage(parent_elem, overallparent_elem, build, spell, spell if (spellIdx != 0) { title_elem.textContent = spell.title + " (" + build.getSpellCost(spellIdx, spell.cost) + ")"; - title_elemavg.textContent = spell.title + " (" + build.getSpellCost(spellIdx, spell.cost) + ")"; + let first = document.createElement("b"); + first.classList.add("space"); + first.textContent = spell.title + " ("; + title_elemavg.appendChild(first); + let second = document.createElement("b"); + second.textContent = build.getSpellCost(spellIdx, spell.cost); + second.classList.add("Legendary"); + title_elemavg.appendChild(second); + let third = document.createElement("b"); + third.classList.add("Water"); + title_elemavg.appendChild(third); + let fourth = document.createElement("b"); + fourth.textContent = ")"; + title_elemavg.appendChild(fourth); + + //title_elemavg.textContent = spell.title + " (" + build.getSpellCost(spellIdx, spell.cost) + ")"; } else { title_elem.textContent = spell.title; @@ -1124,6 +1167,7 @@ function displaySpellDamage(parent_elem, overallparent_elem, build, spell, spell parent_elem.append(part_div); let part_divavg = document.createElement("p"); + //part_divavg.classList.add("Normal"); overallparent_elem.append(part_divavg); let subtitle_elem = document.createElement("p"); @@ -1159,7 +1203,13 @@ function displaySpellDamage(parent_elem, overallparent_elem, build, spell, spell if (part.summary == true) { let overallaverageLabel = document.createElement("p"); - overallaverageLabel.textContent = "Average: "+averageDamage.toFixed(2); + let first = document.createElement("b"); + let second = document.createElement("b"); + first.textContent = "Average: "; + second.textContent = averageDamage.toFixed(2); + overallaverageLabel.appendChild(first); + overallaverageLabel.appendChild(second); + second.classList.add("Damage"); overallaverageLabel.classList.add("damageSubtitle"); part_divavg.append(overallaverageLabel); } @@ -1204,7 +1254,8 @@ function displaySpellDamage(parent_elem, overallparent_elem, build, spell, spell if (part.summary == true) { let overallhealLabel = document.createElement("p"); overallhealLabel.textContent = heal_amount; - overallhealLabel.classList.add("damagep") + overallhealLabel.classList.add("damagep"); + overallhealLabel.classList.add("Set"); part_divavg.append(overallhealLabel); } } diff --git a/styles.css b/styles.css index aa8334e..630b179 100644 --- a/styles.css +++ b/styles.css @@ -159,6 +159,7 @@ a.link{ .Neutral { color: #fa0; } .Neutral:before { content: "\2724" ' '; } +.Damage { color: rgb(255, 198, 85)} .Health { color: #a00; @@ -227,7 +228,7 @@ button:hover { button:active { background-color: #558; - box-shadow: 0 5px #666; + box-shadow: 0 3px #666; transform: translateY(1px); } input {