From 70df30d3357e39be0f83cfd6edc2192184263c63 Mon Sep 17 00:00:00 2001 From: hppeng Date: Sun, 17 Jul 2022 23:46:23 -0700 Subject: [PATCH 1/2] begin display cleanup --- js/display.js | 34 ++++++++++++++-------------------- 1 file changed, 14 insertions(+), 20 deletions(-) diff --git a/js/display.js b/js/display.js index 24813a9..66bccb1 100644 --- a/js/display.js +++ b/js/display.js @@ -181,8 +181,7 @@ function displayExpandedItem(item, parent_id){ elemental_format = !elemental_format; } else if (command === "!spacer") { - let spacer = document.createElement('div'); - spacer.classList.add("row", "my-2"); + let spacer = make_elem('div', ["row", "my-2"], {}); parent_div.appendChild(spacer); continue; } @@ -191,49 +190,44 @@ function displayExpandedItem(item, parent_id){ let id = command; if(nonRolledIDs.includes(id)){//nonRolledID & non-0/non-null/non-und ID if (!item.get(id)) { - if (! (item.get("crafted") && skp_order.includes(id) && + if (!(item.get("crafted") && skp_order.includes(id) && (item.get("maxRolls").get(id) || item.get("minRolls").get(id)))) { continue; } } if (id === "slots") { - let p_elem = document.createElement("div"); - p_elem.classList.add("col"); - + let p_elem = make_elem("div", ["col"]); + // PROPER POWDER DISPLAYING let numerals = new Map([[1, "I"], [2, "II"], [3, "III"], [4, "IV"], [5, "V"], [6, "VI"]]); - let powderPrefix = document.createElement("b"); - powderPrefix.textContent = "Powder Slots: " + item.get(id) + " ["; + let powderPrefix = make_elem("b", [], { + textContent: "Powder Slots: " + item.get(id) + " [" + }); p_elem.appendChild(powderPrefix); let powders = item.get("powders"); for (let i = 0; i < powders.length; i++) { - let powder = document.createElement("b"); - powder.textContent = numerals.get((powders[i]%6)+1)+" "; - powder.classList.add(damageClasses[Math.floor(powders[i]/6)+1]+"_powder"); + let powder = make_elem("b", [damageClasses[Math.floor(powders[i]/6)+1]+"_powder"], + { textContent: numerals.get((powders[i]%6)+1)+" " }); p_elem.appendChild(powder); } - let powderSuffix = document.createElement("b"); - powderSuffix.textContent = "]"; + let powderSuffix = make_elem("b", { textContent: "]" }); p_elem.appendChild(powderSuffix); parent_div.appendChild(p_elem); } else if (id === "set") { if (item.get("hideSet")) { continue; } - let p_elem = document.createElement("div"); - p_elem.classList.add("col"); - p_elem.textContent = "Set: " + item.get(id).toString(); + let p_elem = make_elem("div", ["col"], { textContent: "Set: " + item.get(id).toString() }); parent_div.appendChild(p_elem); } else if (id === "majorIds") { //console.log(item.get(id)); for (let majorID of item.get(id)) { - let p_elem = document.createElement("div"); - p_elem.classList.add("col"); + let p_elem = make_elem("div", ['col']); - let title_elem = document.createElement("b"); - let b_elem = document.createElement("b"); + let title_elem = make_elem("b", []); + let b_elem = make_elem("b", []); if (majorID.includes(":")) { let name = majorID.substring(0, majorID.indexOf(":")+1); let mid = majorID.substring(majorID.indexOf(":")+1); From 459ee7dbe7d8a479c42a28f84ff2dfdcd2a0545d Mon Sep 17 00:00:00 2001 From: hppeng Date: Mon, 18 Jul 2022 00:34:29 -0700 Subject: [PATCH 2/2] More display cleanup, fix ELS bug, fix double compute graph update --- js/builder_graph.js | 11 ++-- js/computation_graph.js | 6 +++ js/display.js | 111 ++++++++++++++++------------------------ 3 files changed, 57 insertions(+), 71 deletions(-) diff --git a/js/builder_graph.js b/js/builder_graph.js index ffe2d08..bcfd05a 100644 --- a/js/builder_graph.js +++ b/js/builder_graph.js @@ -1048,9 +1048,6 @@ function builder_graph_init() { // Phase 2/3: Set up editable IDs, skill points; use decodeBuild() skill points, calculate damage - let build_disp_node = new BuildDisplayNode() - build_disp_node.link_to(build_node, 'build'); - // Create one node that will be the "aggregator node" (listen to all the editable id nodes, as well as the build_node (for non editable stats) and collect them into one statmap) stat_agg_node = new AggregateStatsNode(); edit_agg_node = new AggregateEditableIDNode(); @@ -1077,7 +1074,6 @@ function builder_graph_init() { skp_inputs.push(node); } stat_agg_node.link_to(edit_agg_node); - build_disp_node.link_to(stat_agg_node, 'stats'); // Phase 3/3: Set up atree stuff. @@ -1127,10 +1123,14 @@ function builder_graph_init() { // Also do something similar for skill points + let build_disp_node = new BuildDisplayNode() + build_disp_node.link_to(build_node, 'build'); + build_disp_node.link_to(stat_agg_node, 'stats'); + for (const node of edit_input_nodes) { node.update(); } - + let skp_output = new SkillPointSetterNode(edit_input_nodes); skp_output.link_to(build_node); @@ -1146,5 +1146,6 @@ function builder_graph_init() { // this will propagate the update to the `stat_agg_node`, and then to damage calc console.log("Set up graph"); + graph_live_update = true; } diff --git a/js/computation_graph.js b/js/computation_graph.js index 1f13851..0dcc8d8 100644 --- a/js/computation_graph.js +++ b/js/computation_graph.js @@ -1,4 +1,5 @@ let all_nodes = []; +let node_debug_stack = []; class ComputeNode { /** * Make a generic compute node. @@ -33,6 +34,7 @@ class ComputeNode { if (this.dirty === 0) { return; } + node_debug_stack.push(this.name); if (this.dirty == 2) { let calc_inputs = new Map(); for (const input of this.inputs) { @@ -44,6 +46,7 @@ class ComputeNode { for (const child of this.children) { child.mark_input_clean(this.name, this.value); } + node_debug_stack.pop(); return this; } @@ -174,17 +177,20 @@ class ValueCheckComputeNode extends ComputeNode { } +let graph_live_update = false; /** * Schedule a ComputeNode to be updated. * * @param node : ComputeNode to schedule an update for. */ function calcSchedule(node, timeout) { + if (!graph_live_update) return; if (node.update_task !== null) { clearTimeout(node.update_task); } node.mark_dirty(); node.update_task = setTimeout(function() { + node_debug_stack = []; node.update(); node.update_task = null; }, timeout); diff --git a/js/display.js b/js/display.js index 66bccb1..6963fee 100644 --- a/js/display.js +++ b/js/display.js @@ -124,7 +124,7 @@ function displayBuildStats(parent_id,build,command_group,stats){ let prefix_elem = make_elem('b', [], {textContent: "\u279C Effective LS: "}); let defStats = getDefenseStats(stats); - let number_elem = ('b', [style], { + let number_elem = make_elem('b', [style], { textContent: Math.round(defStats[1][0]*id_val/defStats[0]) + "/3s" }); value_elem.append(prefix_elem); @@ -201,33 +201,30 @@ function displayExpandedItem(item, parent_id){ // PROPER POWDER DISPLAYING let numerals = new Map([[1, "I"], [2, "II"], [3, "III"], [4, "IV"], [5, "V"], [6, "VI"]]); - let powderPrefix = make_elem("b", [], { + p_elem.appendChild(make_elem("b", [], { textContent: "Powder Slots: " + item.get(id) + " [" - }); - p_elem.appendChild(powderPrefix); + })); let powders = item.get("powders"); for (let i = 0; i < powders.length; i++) { - let powder = make_elem("b", [damageClasses[Math.floor(powders[i]/6)+1]+"_powder"], - { textContent: numerals.get((powders[i]%6)+1)+" " }); - p_elem.appendChild(powder); + p_elem.appendChild(make_elem("b", [damageClasses[Math.floor(powders[i]/6)+1]+"_powder"], { + textContent: numerals.get((powders[i]%6)+1)+" " + })); } - let powderSuffix = make_elem("b", { textContent: "]" }); - p_elem.appendChild(powderSuffix); + p_elem.appendChild(make_elem("b", [], { textContent: "]" })); parent_div.appendChild(p_elem); } else if (id === "set") { if (item.get("hideSet")) { continue; } - let p_elem = make_elem("div", ["col"], { textContent: "Set: " + item.get(id).toString() }); - parent_div.appendChild(p_elem); + parent_div.appendChild(make_elem("div", ["col"], { textContent: "Set: " + item.get(id).toString() })); } else if (id === "majorIds") { //console.log(item.get(id)); for (let majorID of item.get(id)) { let p_elem = make_elem("div", ['col']); - let title_elem = make_elem("b", []); - let b_elem = make_elem("b", []); + let title_elem = make_elem("b"); + let b_elem = make_elem("b"); if (majorID.includes(":")) { let name = majorID.substring(0, majorID.indexOf(":")+1); let mid = majorID.substring(majorID.indexOf(":")+1); @@ -248,20 +245,30 @@ function displayExpandedItem(item, parent_id){ parent_div.appendChild(p_elem); } } else if (id === "lvl" && item.get("tier") === "Crafted") { - let p_elem = document.createElement("div"); - p_elem.classList.add("col"); - p_elem.textContent = "Combat Level Min: " + item.get("lvlLow") + "-" + item.get(id); - parent_div.appendChild(p_elem); + parent_div.appendChild(make_elem("div", ["col"], { + textContent: "Combat Level Min: " + item.get("lvlLow") + "-" + item.get(id) + })); } else if (id === "displayName") { - let row = document.createElement("div"); + let row = make_elem("div", ["row", "justify-content-center"]); - let a_elem = document.createElement("a"); - row.classList.add("row", "justify-content-center"); - a_elem.classList.add("col-auto", "text-center", "item-title", "p-0"); - a_elem.classList.add(item.has("tier") ? item.get("tier").replace(" ","") : "Normal"); - // a_elem.style.textGrow = 1; - - row.appendChild(a_elem); + let nolink_row = make_elem("div", ["row", "justify-content-center"]); + nolink_row.style.display = "none"; + + const tier_class = item.has("tier") ? item.get("tier").replace(" ","") : "Normal"; + let item_link; + if (item.get("custom")) { + item_link = "../custom/#" + item.get("hash"); + } else if (item.get("crafted")) { + a_item_link = "../crafter/#" + item.get("hash"); + } else { + item_link = "../item/#" + item.get("displayName"); + } + const item_name_elem = make_elem("a", ["col-auto", "text-center", "item-title", "p-0", tier_class], { + textContent: item.get('displayName') + }); + nolink_row.appendChild(item_name_elem.cloneNode(true)); + item_name_elem.href = item_link; + nolink_row.appendChild(item_name_elem); /* FUNCTIONALITY FOR THIS FEATURE HAS SINCE BEEN REMOVED (WITH SQ2). @@ -275,50 +282,23 @@ function displayExpandedItem(item, parent_id){ //plusminus.style.flexGrow = 0; //plusminus.textContent = "\u2795"; //row.appendChild(plusminus); - - if (item.get("custom")) { - a_elem.href = "../custom/#" + item.get("hash"); - a_elem.textContent = item.get("displayName"); - } else if (item.get("crafted")) { - a_elem.href = "../crafter/#" + item.get("hash"); - a_elem.textContent = item.get(id); - } else { - a_elem.href = "../item/#" + item.get("displayName"); - a_elem.textContent = item.get("displayName"); - } parent_div.appendChild(row); - - let nolink_row = document.createElement("div"); - let p_elem = document.createElement("p"); - nolink_row.classList.add("row", "justify-content-center"); - nolink_row.style.display = "none"; - p_elem.classList.add("col-auto", "text-center", "item-title", "p-0"); - p_elem.classList.add(item.has("tier") ? item.get("tier").replace(" ","") : "Normal"); - if (item.get("custom")) { - p_elem.textContent = item.get("displayName"); - } else if (item.get("crafted")) { - p_elem.textContent = item.get(id); - } else { - p_elem.textContent = item.get("displayName"); - } - - nolink_row.appendChild(p_elem); parent_div.appendChild(nolink_row); - let img = document.createElement("img"); - if (item && item.has("type")) { - img.src = "../media/items/" + (newIcons ? "new/":"old/") + "generic-" + item.get("type") + ".png"; - img.alt = item.get("type"); - img.style = " z=index: 1; position: relative;"; - let container = document.createElement("div"); + if (item.has("type")) { + let img = make_elem("img", [], { + src: "../media/items/" + (newIcons ? "new/":"old/") + "generic-" + item.get("type") + ".png", + alt: item.get("type"), + style: " z=index: 1; position: relative;" + }); + let container = make_elem("div"); - let bckgrd = document.createElement("div"); - bckgrd.classList.add("col", "px-0", "d-flex", "align-items-center", "justify-content-center");// , "no-collapse"); - bckgrd.style = "border-radius: 50%;background-image: radial-gradient(closest-side, " + colorMap.get(item.get("tier")) + " 20%," + "hsl(0, 0%, 16%) 80%); margin-left: auto; margin-right: auto;" - bckgrd.classList.add("scaled-bckgrd"); - parent_div.appendChild(container); - container.appendChild(bckgrd); + let bckgrd = make_elem("div", ["col", "px-0", "d-flex", "align-items-center", "justify-content-center", 'scaled-bckgrd'], { // , "no-collapse" + style: "border-radius: 50%;background-image: radial-gradient(closest-side, " + colorMap.get(item.get("tier")) + " 20%," + "hsl(0, 0%, 16%) 80%); margin-left: auto; margin-right: auto;" + }); bckgrd.appendChild(img); + container.appendChild(bckgrd); + parent_div.appendChild(container); } } else { if (id.endsWith('Dam_')) { @@ -345,8 +325,7 @@ function displayExpandedItem(item, parent_id){ p_elem.style = "font-style: italic"; } else if (skp_order.includes(id)) { //id = str, dex, int, def, or agi if ( item.get("tier") !== "Crafted") { - row = document.createElement("div"); - row.classList.add("col"); + row = make_elem("div", ["col"]); let title = document.createElement("b"); title.textContent = idPrefixes[id] + " ";