polished WynnCrafter, added ELS to build summary display, added skp boosts to build summary display

build.js

@@ -217,6 +217,7 @@ class Build{
         this.items = this.equipment.concat([this.weapon]);
         // return [equip_order, best_skillpoints, final_skillpoints, best_total];
         let result = calculate_skillpoints(this.equipment, this.weapon);
+        console.log(result);
         this.equip_order = result[0];
         this.base_skillpoints = result[1];
         this.total_skillpoints = result[2];

craft.js

@@ -148,6 +148,7 @@ class Craft{
 
         //apply ingredient effectivness - on ids, and reqs (itemIDs). NOT on durability, duration, or charges.
         let eff_flat = eff.flat();
+        statMap.set("ingredEffectiveness", eff_flat);
         //console.log(eff_flat);
         //apply ingredient ids
         for (const n in this.ingreds) {
@@ -172,16 +173,21 @@ class Craft{
                 if (value && value != 0) {
                     let rolls = [value,ingred.get("ids").get("maxRolls").get(key)];
                     rolls = rolls.map(x => Math.floor(x * eff_mult)).sort();
-                    console.log(rolls);
                     statMap.get("minRolls").set(key, (statMap.get("minRolls").get(key)) ? statMap.get("minRolls").get(key) + rolls[0] : rolls[0]);
                     statMap.get("maxRolls").set(key, (statMap.get("maxRolls").get(key)) ? statMap.get("maxRolls").get(key) + rolls[1] : rolls[1]);
                 }
             }
         }
-        for(const e of skp_order) {
+        for (const e of skp_order) {
             statMap.set(e,statMap.get("maxRolls").get(e));
         }
-
+        for (const d in statMap.get("durability")) {
+            if(statMap.get("durability")[d] < 1) { statMap.get("durability")[d] = 1;}
+        }
+        for (const d in statMap.get("duration")) {
+            if(statMap.get("duration")[d] < 1) { statMap.get("duration")[d] = 1;}
+        }
+        if(statMap.has("charges") && statMap.get("charges") < 1 ) { statMap.set("charges",1)}
         this.statMap = statMap;
     }
 }

crafter.html

@@ -126,39 +126,47 @@
                 </table>
             </div>
             <div class = "recipe hide-container-block" style = "display:none">
-                <!--This is incredibly janky-->
+                <div class = "recipe-stats">
+                    <div class = "center" id = "recipe-stats"></div>
+                </div>
             </div>
             <div class = "crafted hide-container-block" style = "display:none">
                 <div class = "craft-stats">
                     <div class = "center" id = "craft-stats"></div>
                 </div>
             </div>
-            <p class = "center title hide-container-block" style = "display:none">
+            
-                Ingredients
-            </p>
             <!--This is also incredibly janky.-->
+            <div class = "craft-warnings">
+                <div class = "center" id = "craft-warnings"></div>
+            </div>
             <p>
             </p>
             <p>
             </p>
-            <div class="ingredients hide-container-grid" id = "ingreds" style = "display:none">
+            <div class="ingredients-container hide-container-grid" id = "ingreds" style = "display:none">
-                <div class="ing-stats" id = "ing-1" style = "grid-item-1">
+                <p class="center title hide-container-block" style = "display:block">
-                    <div class = "center" id = "ing-1-stats"></div>
+                    Ingredients
-                </div>
+                </p>
-                <div class="ing-stats" id = "ing-2" style = "grid-item-2">
+                <div class = "ingredients hide-container-grid" id = "ingreds">
-                    <div class = "center" id = "ing-2-stats"></div>
+                    <div class="ing-stats" id = "ing-1" style = "grid-item-1">
-                </div>
+                        <div class = "center" id = "ing-1-stats"></div>
-                <div class="ing-stats" id = "ing-3" style = "grid-item-3">
+                    </div>
-                    <div class = "center" id = "ing-3-stats"></div>
+                    <div class="ing-stats" id = "ing-2" style = "grid-item-2">
-                </div>
+                        <div class = "center" id = "ing-2-stats"></div>
-                <div class="ing-stats" id = "ing-4" style = "grid-item-4">
+                    </div>
-                    <div class = "center" id = "ing-4-stats"></div>
+                    <div class="ing-stats" id = "ing-3" style = "grid-item-3">
-                </div>
+                        <div class = "center" id = "ing-3-stats"></div>
-                <div class="ing-stats" id = "ing-5" style = "grid-item-5">
+                    </div>
-                    <div class = "center" id = "ing-5-stats"></div>
+                    <div class="ing-stats" id = "ing-4" style = "grid-item-4">
-                </div>
+                        <div class = "center" id = "ing-4-stats"></div>
-                <div class="ing-stats" id = "ing-6" style = "grid-item-6">
+                    </div>
-                    <div class = "center" id = "ing-6-stats"></div>
+                    <div class="ing-stats" id = "ing-5" style = "grid-item-5">
+                        <div class = "center" id = "ing-5-stats"></div>
+                    </div>
+                    <div class="ing-stats" id = "ing-6" style = "grid-item-6">
+                        <div class = "center" id = "ing-6-stats"></div>
+                    </div>
                 </div>
             </div>
         </div>

crafter.js

@@ -9,7 +9,7 @@ console.log(url_tag);
 
 
 
-const BUILD_VERSION = "6.9.4";
+const BUILD_VERSION = "6.9.7";
 /*
  * END testing section
  */
@@ -128,13 +128,27 @@ function calculateCraft() {
     document.getElementById("mat-1").textContent = recipe.get("materials")[0].get("item").split(" ").slice(1).join(" ") + " Tier:";
     document.getElementById("mat-2").textContent = recipe.get("materials")[1].get("item").split(" ").slice(1).join(" ") + " Tier:"; 
     
-
+    //Display Recipe Stats
+    displayRecipeStats(player_craft, "recipe-stats");
     //Display Craft Stats
     displayCraftStats(player_craft, "craft-stats");
     //Display Ingredients' Stats
     for (let i = 1; i < 7; i++) {
         displayExpandedIngredient(player_craft.ingreds[i-1] , "ing-"+i+"-stats");
     }
+    //Display Warnings - only ingred type warnings for now
+    let warning_elem = document.getElementById("craft-warnings");
+    warning_elem.textContent = ""; //refresh warnings
+    warning_elem.classList.add("warning");
+    let type = player_craft["recipe"].get("skill");
+    for (const ingred of player_craft["ingreds"]) {
+        if (!(ingred.get("skills").includes(type))) {
+            let p = document.createElement("p");
+            p.textContent = "WARNING: " + ingred.get("name") + " cannot be used for " + type.charAt(0) + type.substring(1).toLowerCase() +"!";
+            warning_elem.appendChild(p);
+        }
+    }
+
     //set the location hash. TODO
     /*let hash = "";
     location.hash = hash;*/

display.js

@@ -243,10 +243,12 @@ function displayBuildStats(parent_id,build){
 //        "hp",
 //        "fDef", "wDef", "aDef", "tDef", "eDef",
 //        "!elemental",
-        "#table",
+//        "#table",
-        "mr", "ms",
+        
 //        "hprRaw", "hprPct",
         "#table",
+        "str", "dex", "int", "def", "agi",
+        "mr", "ms",
         "sdRaw", "sdPct",
         "mdRaw", "mdPct",
         "ref", "thorns",
@@ -363,6 +365,40 @@ function displayBuildStats(parent_id,build){
                     row.appendChild(value_elem);
 
                     active_elem.appendChild(row);
+                } else if (id === "ls" && id_val != 0) {
+                    let style;
+                    if (id_val > 0) {
+                        style = "positive";
+                    } else{
+                        style = "negative";
+                    }
+                    let row = document.createElement("tr");
+                    let title = document.createElement("td");
+                    title.classList.add("left");
+                    title.textContent = "Effective Life Steal:"
+                    let value = document.createElement("td");
+                    let defStats = build.getDefenseStats();
+                    console.log(defStats[1][0]);
+                    console.log(defStats[0]);
+                    value.textContent = Math.round(defStats[1][0]*id_val/defStats[0]) + "/4s";
+                    value.classList.add("right");
+                    value.classList.add(style);
+                    row.appendChild(title);
+                    row.appendChild(value);
+                    active_elem.appendChild(row);
+                }
+            } else if (skp_order.includes(id)) {
+                let total_assigned = build.total_skillpoints[skp_order.indexOf(id)];
+                let base_assigned = build.base_skillpoints[skp_order.indexOf(id)];
+                let diff = total_assigned - base_assigned;
+                let style;
+                if (diff > 0) {
+                    style = "positive";
+                } else if (diff < 0) {
+                    style = "negative";
+                }
+                if (diff != 0) {
+                    displayFixedID(active_elem, id, diff, false, style);
                 }
             }
         }
@@ -548,7 +584,6 @@ function displayExpandedItem(item, parent_id){
                             row.appendChild(boost);
                             p_elem.appendChild(row);
                         } else if ( item.get("tier") === "Crafted" && active_elem.nodeName === "TABLE") {
-                            console.log("bruh momment");
                             let row = document.createElement('tr');
                             let min_elem = document.createElement('td');
                             
@@ -709,12 +744,100 @@ function displayExpandedItem(item, parent_id){
         active_elem.append(item_desc_elem);
     }
 }
+
+/*  Displays stats about a recipe that are NOT displayed in the craft stats. 
+*   Includes: mat name and amounts
+*             ingred names in an "array" with ingred effectiveness
+*/
+function displayRecipeStats(craft, parent_id) {
+    let elem = document.getElementById(parent_id);
+    elem.textContent = "";
+    recipe = craft["recipe"];
+    tiers = craft["mat_tiers"];
+    ingreds = [];
+    for (const n of craft["ingreds"]) {
+        ingreds.push(n.get("name"));
+    }
+    let effectiveness = craft["statMap"].get("ingredEffectiveness");
+
+    let ldiv = document.createElement("div");
+    ldiv.classList.add("itemleft");
+    let title = document.createElement("p");
+    title.classList.add("smalltitle");
+    title.textContent = "Recipe Stats";
+    ldiv.appendChild(title);
+    let mats = document.createElement("p");
+    mats.classList.add("itemp");
+    mats.textContent = "Crafting Materials: ";
+    for (let i = 0; i < 2; i++) {
+        let tier = tiers[i];
+        let row = document.createElement("p");
+        row.classList.add("left");
+        let b = document.createElement("b");
+        let mat = recipe.get("materials")[i];
+        b.textContent = "- " + mat.get("amount") + "x " + mat.get("item").split(" ").slice(1).join(" ");
+        b.classList.add("space");
+        let starsB = document.createElement("b");
+        starsB.classList.add("T1-bracket");
+        starsB.textContent = "[";
+        row.appendChild(b);
+        row.appendChild(starsB);
+        for(let j = 0; j < 3; j ++) {
+            let star = document.createElement("b");
+            star.textContent = "\u272B";
+            if(j < tier) {
+                star.classList.add("T1");
+            } else {
+                star.classList.add("T0");
+            }
+            row.append(star);
+        }
+        let starsE = document.createElement("b");
+        starsE.classList.add("T1-bracket");
+        starsE.textContent = "]";
+        row.appendChild(starsE);
+        mats.appendChild(row);
+    }
+    ldiv.appendChild(mats);
+
+    let ingredTable = document.createElement("table");
+    ingredTable.classList.add("itemtable");
+    for (let i = 0; i < 3; i++) {
+        let row = document.createElement("tr");
+        for (let j = 0; j < 2; j++) {
+            let ingredName = ingreds[2 * i + j];
+            let cell = document.createElement("td");
+            cell.classList.add("center");
+            cell.classList.add("box");
+            let b = document.createElement("b");
+            b.textContent = ingredName;
+            b.classList.add("space");
+            let eff = document.createElement("b");
+            let e = effectiveness[2 * i + j];
+            if (e > 0) {
+                eff.classList.add("positive");
+            } else if (e < 0) {
+                eff.classList.add("negative");
+            }
+            eff.textContent = "[" + e + "%]";
+            cell.appendChild(b);
+            cell.appendChild(eff);
+            row.appendChild(cell);
+        }
+        ingredTable.appendChild(row);
+    }
+
+    elem.appendChild(ldiv);
+    elem.appendChild(ingredTable);
+}
+
+//Displays a craft. If things change, this function should be modified.
 function displayCraftStats(craft, parent_id) {
     let mock_item = craft.statMap;
     displayExpandedItem(mock_item,parent_id);
 }
 
-
+//Displays an ingredient in item format. However, an ingredient is too far from a normal item to display as one.
 function displayExpandedIngredient(ingred, parent_id) {
     console.log(ingred);
     let parent_elem = document.getElementById(parent_id);
@@ -1429,8 +1552,8 @@ function displayDefenseStats(parent_elem, build, insertSummary){
     ehprRow.appendChild(ehpr);
     ehprRow.append(boost);
     statsTable.append(ehprRow);
-
+    /*
-    /*ehprRow = document.createElement("tr");
+    ehprRow = document.createElement("tr");
     ehpr = document.createElement("td");
     ehpr.classList.add("left");
     ehpr.textContent = "Effective HP Regen (no agi):";
@@ -1441,7 +1564,7 @@ function displayDefenseStats(parent_elem, build, insertSummary){
 
     ehprRow.appendChild(ehpr);
     ehprRow.append(boost);
-    statsTable.append(ehprRow);*/
+    statsTable.append(ehprRow); */
 
     //eledefs
     let eledefs = stats[5];

index.html

@@ -490,7 +490,7 @@
                             <div class="idLeft">
                                 <div class="idWrap">
                                     <div>
-                                        <label for="sdPct" class="idLabel" id="sdPct-label">S. Damage %:</label><br>
+                                        <label for="sdPct" class="idLabel" id="sdPct-label">Spell Dmg %:</label><br>
                                         <input type="number" id="sdPct" name="sdPct" value="0" class="idInput"/>
                                     </div>
                                     <div id="sdPct-base" class="idDesc">
@@ -516,7 +516,7 @@
                             <div class="idLeft">
                                 <div class="idWrap">
                                     <div>
-                                        <label for="mdPct" class="idLabel" id="mdPct-label">M. Damage %:</label><br>
+                                        <label for="mdPct" class="idLabel" id="mdPct-label">Melee Dmg %:</label><br>
                                         <input type="number" id="mdPct" name="mdPct" value="0" class="idInput"/>
                                     </div>
                                     <div id="mdPct-base" class="idDesc">

styles.css

@@ -100,7 +100,7 @@ table.center{
     text-align: left;
 }
 
-.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, .build-defense-stats, .spell-info, .set-info, .powder-special, .powder-special-stats, .int-info, .id-box {
+.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, .build-defense-stats, .spell-info, .set-info, .powder-special, .powder-special-stats, .int-info, .id-box, .box {
     color: #aaa;
     background: #121516;
     border: 3px solid #BCBCBC;

wide.css

@@ -19,7 +19,7 @@
 .container {
     padding: 2% 4% 4%;
     display: grid;
-    grid-template-columns: 1fr 0.4fr 0.6fr;
+    grid-template-columns: 0.85fr 0.5fr 0.5fr;
     grid-auto-columns: minmax(200px, auto);
     gap: 5px;
     grid-auto-rows: minmax(60px, auto);