minor display things
This commit is contained in:
ferricles
parent
bf907c46d8
commit
9fd013fb71
4 changed files with 175 additions and 54 deletions
124
display.js
124
display.js
|
|
@ -43,13 +43,15 @@ function expandItem(item, powders){
|
|||
expandedItem.set("powders", powders);
|
||||
return expandedItem;
|
||||
}
|
||||
|
||||
|
||||
/*An independent helper function that rounds a rolled ID to the nearest integer OR brings the roll away from 0.
|
||||
* @param id
|
||||
*/
|
||||
function idRound(id){
|
||||
rounded = Math.round(id);
|
||||
if(rounded == 0){
|
||||
return 1;
|
||||
return 1; //this is a hack, will need changing along w/ rest of ID system if anything changes
|
||||
}else{
|
||||
return rounded;
|
||||
}
|
||||
|
|
@ -349,7 +351,127 @@ function displayFixedID(active, id, value, elemental_format, style) {
|
|||
return p_elem;
|
||||
}
|
||||
}
|
||||
function displayMeleeDamage(parent_elem, meleeStats){
|
||||
let attackSpeeds = ["Super Slow", "Very Slow", "Slow", "Normal", "Fast", "Very Fast", "Super Fast"];
|
||||
let damagePrefixes = ["Neutral Damage: ","Earth Damage: ","Thunder Damage: ","Water Damage: ","Fire Damage: ","Air Damage: "];
|
||||
parent_elem.textContent = "";
|
||||
const stats = meleeStats.slice();
|
||||
|
||||
for (let i = 0; i < 6; ++i) {
|
||||
for (let j in stats[i]) {
|
||||
stats[i][j] = stats[i][j].toFixed(2);
|
||||
}
|
||||
}
|
||||
for (let i = 6; i < 8; ++i) {
|
||||
for (let j in stats[i]) {
|
||||
stats[i][j] = stats[i][j].toFixed(2);
|
||||
}
|
||||
}
|
||||
for (let i = 8; i < 11; ++i){
|
||||
stats[i] = stats[i].toFixed(2);
|
||||
}
|
||||
|
||||
//title
|
||||
let title_elem = document.createElement("p");
|
||||
title_elem.classList.add("center");
|
||||
title_elem.textContent = "Melee Stats";
|
||||
parent_elem.append(title_elem);
|
||||
parent_elem.append(document.createElement("br"));
|
||||
|
||||
//average DPS
|
||||
let averageDamage = document.createElement("p");
|
||||
averageDamage.classList.add("center");
|
||||
averageDamage.textContent = "Average DPS: " + stats[10];
|
||||
parent_elem.append(averageDamage);
|
||||
parent_elem.append(document.createElement("br"));
|
||||
|
||||
//attack speed
|
||||
let atkSpd = document.createElement("p");
|
||||
atkSpd.classList.add("center");
|
||||
atkSpd.textContent = "Attack Speed: " + attackSpeeds[stats[11]];
|
||||
parent_elem.append(atkSpd);
|
||||
parent_elem.append(document.createElement("br"));
|
||||
|
||||
//Non-Crit: n->elem, total dmg, DPS
|
||||
let nonCritStats = document.createElement("p");
|
||||
nonCritStats.classList.add("center");
|
||||
nonCritStats.textContent = "Non-Crit Stats: ";
|
||||
nonCritStats.append(document.createElement("br"));
|
||||
let dmg = document.createElement("p");
|
||||
for (let i = 0; i < 6; i++){
|
||||
if(stats[i][0] > 0){
|
||||
dmg.textContent = damagePrefixes[i] + stats[i][0] + " - " + stats[i][1];
|
||||
nonCritStats.append(dmg);
|
||||
}
|
||||
}
|
||||
let normalDamage = document.createElement("p");
|
||||
normalDamage.textContent = "Total Damage: " + stats[6][0] + " - " + stats[6][1];
|
||||
nonCritStats.append(normalDamage);
|
||||
|
||||
let normalDPS = document.createElement("p");
|
||||
normalDPS.textContent = "Normal DPS: " + stats[8];
|
||||
normalDPS.append(document.createElement("br"));
|
||||
normalDPS.append(document.createElement("br"));
|
||||
nonCritStats.append(normalDPS);
|
||||
|
||||
parent_elem.append(nonCritStats);
|
||||
parent_elem.append(document.createElement("br"));
|
||||
|
||||
//Crit: n->elem, total dmg, DPS
|
||||
let critStats = document.createElement("p");
|
||||
critStats.classList.add("center");
|
||||
critStats.textContent = "Crit Stats: ";
|
||||
critStats.append(document.createElement("br"));
|
||||
dmg = document.createElement("p");
|
||||
for (let i = 0; i < 6; i++){
|
||||
if(stats[i][2] > 0){
|
||||
dmg.textContent = damagePrefixes[i] + stats[i][2] + " - " + stats[i][3];
|
||||
critStats.append(dmg);
|
||||
}
|
||||
}
|
||||
normalDamage = document.createElement("p");
|
||||
normalDamage.textContent = "Total Damage: " + stats[7][0] + " - " + stats[7][1];
|
||||
critStats.append(normalDamage);
|
||||
|
||||
normalDPS = document.createElement("p");
|
||||
normalDPS.textContent = "Crit DPS: " + stats[9];
|
||||
normalDPS.append(document.createElement("br"));
|
||||
normalDPS.append(document.createElement("br"));
|
||||
critStats.append(normalDPS);
|
||||
|
||||
parent_elem.append(critStats);
|
||||
parent_elem.append(document.createElement("br"));
|
||||
|
||||
/*
|
||||
//nDamAdj,eDamAdj,tDamAdj,wDamAdj,fDamAdj,aDamAdj,totalDamNorm,totalDamCrit,normDPS,critDPS,avgDPS
|
||||
|
||||
let meleeSummary = "";
|
||||
meleeSummary = meleeSummary.concat("<h1><u>Melee Stats</u></h1>");
|
||||
meleeSummary = meleeSummary.concat("<h2>Average DPS: ",Math.round(meleeStats[10]),"</h2> <br>");
|
||||
let attackSpeeds = ["SUPER SLOW", "VERY SLOW", "SLOW", "NORMAL", "FAST", "VERY FAST", "SUPER FAST"];
|
||||
meleeSummary = meleeSummary.concat("<b>Attack Speed: ",attackSpeeds[meleeStats[11]],"</b><br><br>");
|
||||
meleeSummary = meleeSummary.concat("<b>Non-Crit Stats: </b><br>");
|
||||
let damagePrefixes = ["Neutral Damage: ","Earth Damage: ","Thunder Damage: ","Water Damage: ","Fire Damage: ","Air Damage: "];
|
||||
for (let i = 0; i < 6; i++){
|
||||
if(meleeStats[i][0] > 0){
|
||||
meleeSummary = meleeSummary.concat(damagePrefixes[i],meleeStats[i][0]," -> ",meleeStats[i][1],"<br>");
|
||||
}
|
||||
}
|
||||
meleeSummary = meleeSummary.concat("<br>Total Damage: ",meleeStats[6][0]," -> ",meleeStats[6][1],"<br>");
|
||||
meleeSummary = meleeSummary.concat("Normal DPS: ",Math.round(meleeStats[8]),"<br><br>");
|
||||
meleeSummary = meleeSummary.concat("<b>Crit Stats: </b><br>");
|
||||
for (let i = 0; i < 6; i++){
|
||||
if(meleeStats[i][2] > 0){
|
||||
meleeSummary = meleeSummary.concat(damagePrefixes[i],meleeStats[i][2]," -> ",meleeStats[i][3],"<br>");
|
||||
}
|
||||
}
|
||||
meleeSummary = meleeSummary.concat("<br>Total Damage: ",meleeStats[7][0]," -> ",meleeStats[7][1],"<br>");
|
||||
meleeSummary = meleeSummary.concat("Crit DPS: ",Math.round(meleeStats[9]),"<br><br>");
|
||||
setHTML("build-melee-stats", "".concat(meleeSummary)); //basically complete function
|
||||
*/
|
||||
|
||||
|
||||
}
|
||||
function displaySpellDamage(parent_elem, build, spell, spellIdx) {
|
||||
parent_elem.textContent = "";
|
||||
|
||||
|
|
|
|||
12
index.html
12
index.html
|
|
@ -15,11 +15,11 @@
|
|||
Wynn build calculator
|
||||
</div>
|
||||
<div class="center" id="header2">
|
||||
<p>Made by: hppeng and ferricles (JavaScript required to function, nothing works without js)</p>
|
||||
<p>Made by <b class = "hppeng">hppeng</b> and <b class = "ferricles">ferricles</b> (JavaScript required to function, nothing works without js)</p>
|
||||
<p>Hard refresh the page (Ctrl+Shift+R on windows/chrome) if it isn't updating correctly.</p>
|
||||
</div>
|
||||
<div class="center" id="credits">
|
||||
<a href="credits.txt">Additional credits</a>
|
||||
<a href="credits.txt" class="link">Additional credits</a>
|
||||
</div>
|
||||
<div class="equipment">
|
||||
<div class="center" style="grid-column:1;grid-row:1">
|
||||
|
|
@ -240,14 +240,14 @@
|
|||
<div class = "center build-weapon" id = "build-weapon" style = "grid-column:1;grid-row:3">
|
||||
<div class = "center" id = "build-weapon-stats"></div>
|
||||
</div>
|
||||
<div class = "center build-order" id = "build-order" style = "grid-column:2;grid-row:3">
|
||||
</div>
|
||||
<div class = "center" id = "build-melee-stats" style = "grid-column:3;grid-row:3">
|
||||
</div>
|
||||
<div class = "center build-overall" id = "build-overall" style = "grid-column:4;grid-row:3">
|
||||
<p class="itemcenter">Overall Build Stats:<p>
|
||||
<div class = "center" id = "build-overall-stats"></div>
|
||||
</div>
|
||||
<div class = "center build-melee-stats" id = "build-melee-stats" style = "grid-column:3;grid-row:3">
|
||||
</div>
|
||||
<div class = "center build-order" id = "build-order" style = "grid-column:2;grid-row:3">
|
||||
</div>
|
||||
<!--div class = "center" id = "build-defense-stats" style = "grid-column:4;grid-row:3">
|
||||
</div-->
|
||||
</div>
|
||||
|
|
|
|||
55
styles.css
55
styles.css
|
|
@ -23,7 +23,19 @@
|
|||
gap: 5px;
|
||||
grid-auto-rows: minmax(60px, auto);
|
||||
}
|
||||
|
||||
.equipment, .skillpoints, .center, .header, .all{
|
||||
background: #110110;
|
||||
color: #aaa;
|
||||
}
|
||||
.hppeng{
|
||||
color: #20c2b6;
|
||||
}
|
||||
.ferricles{
|
||||
color: #5be553;
|
||||
}
|
||||
a.link{
|
||||
color: #A5FDFF;
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -37,26 +49,19 @@
|
|||
}
|
||||
|
||||
.build, .spells {
|
||||
padding: 1%;
|
||||
padding: 2%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 10px;
|
||||
gap: 20px;
|
||||
grid-auto-rows: minmax(60px, auto);
|
||||
width: 98%;
|
||||
background: #110110;
|
||||
}
|
||||
|
||||
.spell-info {
|
||||
.build-helmet, .build-chestplate, .build-leggings, .build-boots, .build-ring1, .build-ring2, .build-bracelet, .build-necklace, .build-weapon, .build-order, .build-overall, .build-melee-stats, .spell-info {
|
||||
color: #aaa;
|
||||
background: #110110;
|
||||
border: 2px solid black;
|
||||
border-radius: 3px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.build-helmet, .build-chestplate, .build-leggings, .build-boots, .build-ring1, .build-ring2, .build-bracelet, .build-necklace, .build-weapon, .build-order, .build-overall {
|
||||
color: #aaa;
|
||||
background: #110110;
|
||||
border: 2px solid black;
|
||||
border: 3px solid #BCBCBC;
|
||||
border-radius: 3px;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -160,3 +165,27 @@
|
|||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
/*Scrollbar*/
|
||||
/* width */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 5px #BCBCBC;
|
||||
border: #BCBCBC;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #aaa;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* Ugly Corner */
|
||||
::-webkit-scrollbar-corner{
|
||||
background: #110110;
|
||||
}
|
||||
38
test.js
38
test.js
|
|
@ -424,41 +424,11 @@ function calculateBuildStats() {
|
|||
|
||||
displayBuildStats(player_build, "build-overall-stats");
|
||||
|
||||
let parent_elem = document.getElementById("build-melee-stats");
|
||||
let meleeStats = player_build.getMeleeStats();
|
||||
//nDamAdj,eDamAdj,tDamAdj,wDamAdj,fDamAdj,aDamAdj,totalDamNorm,totalDamCrit,normDPS,critDPS,avgDPS
|
||||
for (let i = 0; i < 6; ++i) {
|
||||
for (let j in meleeStats[i]) {
|
||||
meleeStats[i][j] = Math.round(meleeStats[i][j]);
|
||||
}
|
||||
}
|
||||
for (let i = 6; i < 8; ++i) {
|
||||
for (let j in meleeStats[i]) {
|
||||
meleeStats[i][j] = Math.round(meleeStats[i][j]);
|
||||
}
|
||||
}
|
||||
let meleeSummary = "";
|
||||
meleeSummary = meleeSummary.concat("<h1><u>Melee Stats</u></h1>");
|
||||
meleeSummary = meleeSummary.concat("<h2>Average DPS: ",Math.round(meleeStats[10]),"</h2> <br>");
|
||||
let attackSpeeds = ["SUPER SLOW", "VERY SLOW", "SLOW", "NORMAL", "FAST", "VERY FAST", "SUPER FAST"];
|
||||
meleeSummary = meleeSummary.concat("<b>Attack Speed: ",attackSpeeds[meleeStats[11]],"</b><br><br>");
|
||||
meleeSummary = meleeSummary.concat("<b>Non-Crit Stats: </b><br>");
|
||||
let damagePrefixes = ["Neutral Damage: ","Earth Damage: ","Thunder Damage: ","Water Damage: ","Fire Damage: ","Air Damage: "];
|
||||
for (let i = 0; i < 6; i++){
|
||||
if(meleeStats[i][0] > 0){
|
||||
meleeSummary = meleeSummary.concat(damagePrefixes[i],meleeStats[i][0]," -> ",meleeStats[i][1],"<br>");
|
||||
}
|
||||
}
|
||||
meleeSummary = meleeSummary.concat("<br>Total Damage: ",meleeStats[6][0]," -> ",meleeStats[6][1],"<br>");
|
||||
meleeSummary = meleeSummary.concat("Normal DPS: ",Math.round(meleeStats[8]),"<br><br>");
|
||||
meleeSummary = meleeSummary.concat("<b>Crit Stats: </b><br>");
|
||||
for (let i = 0; i < 6; i++){
|
||||
if(meleeStats[i][2] > 0){
|
||||
meleeSummary = meleeSummary.concat(damagePrefixes[i],meleeStats[i][2]," -> ",meleeStats[i][3],"<br>");
|
||||
}
|
||||
}
|
||||
meleeSummary = meleeSummary.concat("<br>Total Damage: ",meleeStats[7][0]," -> ",meleeStats[7][1],"<br>");
|
||||
meleeSummary = meleeSummary.concat("Crit DPS: ",Math.round(meleeStats[9]),"<br><br>");
|
||||
setHTML("build-melee-stats", "".concat(meleeSummary)); //basically complete function
|
||||
displayMeleeDamage(parent_elem,meleeStats);
|
||||
|
||||
|
||||
//let defenseStats = "";
|
||||
|
||||
//setHTML("build-defense-stats", "".concat(defenseStats));
|
||||
|
|
|
|||
Loading…
Reference in a new issue