minor display things

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 = "";
 

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>

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: 3px solid #BCBCBC;
-    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-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;
+  }

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
+    displayMeleeDamage(parent_elem,meleeStats);
-    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
     //let defenseStats = "";
 
     //setHTML("build-defense-stats", "".concat(defenseStats));