More display cleanup, fix ELS bug, fix double compute graph update

This commit is contained in:
hppeng 2022-07-18 00:34:29 -07:00
parent 9364e30fe6
commit 459ee7dbe7
3 changed files with 57 additions and 71 deletions

View file

@ -1048,9 +1048,6 @@ function builder_graph_init() {
// Phase 2/3: Set up editable IDs, skill points; use decodeBuild() skill points, calculate damage // 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) // 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(); stat_agg_node = new AggregateStatsNode();
edit_agg_node = new AggregateEditableIDNode(); edit_agg_node = new AggregateEditableIDNode();
@ -1077,7 +1074,6 @@ function builder_graph_init() {
skp_inputs.push(node); skp_inputs.push(node);
} }
stat_agg_node.link_to(edit_agg_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. // Phase 3/3: Set up atree stuff.
@ -1127,6 +1123,10 @@ function builder_graph_init() {
// Also do something similar for skill points // 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) { for (const node of edit_input_nodes) {
node.update(); node.update();
} }
@ -1146,5 +1146,6 @@ function builder_graph_init() {
// this will propagate the update to the `stat_agg_node`, and then to damage calc // this will propagate the update to the `stat_agg_node`, and then to damage calc
console.log("Set up graph"); console.log("Set up graph");
graph_live_update = true;
} }

View file

@ -1,4 +1,5 @@
let all_nodes = []; let all_nodes = [];
let node_debug_stack = [];
class ComputeNode { class ComputeNode {
/** /**
* Make a generic compute node. * Make a generic compute node.
@ -33,6 +34,7 @@ class ComputeNode {
if (this.dirty === 0) { if (this.dirty === 0) {
return; return;
} }
node_debug_stack.push(this.name);
if (this.dirty == 2) { if (this.dirty == 2) {
let calc_inputs = new Map(); let calc_inputs = new Map();
for (const input of this.inputs) { for (const input of this.inputs) {
@ -44,6 +46,7 @@ class ComputeNode {
for (const child of this.children) { for (const child of this.children) {
child.mark_input_clean(this.name, this.value); child.mark_input_clean(this.name, this.value);
} }
node_debug_stack.pop();
return this; return this;
} }
@ -174,17 +177,20 @@ class ValueCheckComputeNode extends ComputeNode {
} }
let graph_live_update = false;
/** /**
* Schedule a ComputeNode to be updated. * Schedule a ComputeNode to be updated.
* *
* @param node : ComputeNode to schedule an update for. * @param node : ComputeNode to schedule an update for.
*/ */
function calcSchedule(node, timeout) { function calcSchedule(node, timeout) {
if (!graph_live_update) return;
if (node.update_task !== null) { if (node.update_task !== null) {
clearTimeout(node.update_task); clearTimeout(node.update_task);
} }
node.mark_dirty(); node.mark_dirty();
node.update_task = setTimeout(function() { node.update_task = setTimeout(function() {
node_debug_stack = [];
node.update(); node.update();
node.update_task = null; node.update_task = null;
}, timeout); }, timeout);

View file

@ -124,7 +124,7 @@ function displayBuildStats(parent_id,build,command_group,stats){
let prefix_elem = make_elem('b', [], {textContent: "\u279C Effective LS: "}); let prefix_elem = make_elem('b', [], {textContent: "\u279C Effective LS: "});
let defStats = getDefenseStats(stats); 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" textContent: Math.round(defStats[1][0]*id_val/defStats[0]) + "/3s"
}); });
value_elem.append(prefix_elem); value_elem.append(prefix_elem);
@ -201,33 +201,30 @@ function displayExpandedItem(item, parent_id){
// PROPER POWDER DISPLAYING // PROPER POWDER DISPLAYING
let numerals = new Map([[1, "I"], [2, "II"], [3, "III"], [4, "IV"], [5, "V"], [6, "VI"]]); 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) + " [" textContent: "Powder Slots: " + item.get(id) + " ["
}); }));
p_elem.appendChild(powderPrefix);
let powders = item.get("powders"); let powders = item.get("powders");
for (let i = 0; i < powders.length; i++) { for (let i = 0; i < powders.length; i++) {
let powder = make_elem("b", [damageClasses[Math.floor(powders[i]/6)+1]+"_powder"], p_elem.appendChild(make_elem("b", [damageClasses[Math.floor(powders[i]/6)+1]+"_powder"], {
{ textContent: numerals.get((powders[i]%6)+1)+" " }); textContent: numerals.get((powders[i]%6)+1)+" "
p_elem.appendChild(powder); }));
} }
let powderSuffix = make_elem("b", { textContent: "]" }); p_elem.appendChild(make_elem("b", [], { textContent: "]" }));
p_elem.appendChild(powderSuffix);
parent_div.appendChild(p_elem); parent_div.appendChild(p_elem);
} else if (id === "set") { } else if (id === "set") {
if (item.get("hideSet")) { continue; } if (item.get("hideSet")) { continue; }
let p_elem = make_elem("div", ["col"], { textContent: "Set: " + item.get(id).toString() }); parent_div.appendChild(make_elem("div", ["col"], { textContent: "Set: " + item.get(id).toString() }));
parent_div.appendChild(p_elem);
} else if (id === "majorIds") { } else if (id === "majorIds") {
//console.log(item.get(id)); //console.log(item.get(id));
for (let majorID of item.get(id)) { for (let majorID of item.get(id)) {
let p_elem = make_elem("div", ['col']); let p_elem = make_elem("div", ['col']);
let title_elem = make_elem("b", []); let title_elem = make_elem("b");
let b_elem = make_elem("b", []); let b_elem = make_elem("b");
if (majorID.includes(":")) { if (majorID.includes(":")) {
let name = majorID.substring(0, majorID.indexOf(":")+1); let name = majorID.substring(0, majorID.indexOf(":")+1);
let mid = majorID.substring(majorID.indexOf(":")+1); let mid = majorID.substring(majorID.indexOf(":")+1);
@ -248,20 +245,30 @@ function displayExpandedItem(item, parent_id){
parent_div.appendChild(p_elem); parent_div.appendChild(p_elem);
} }
} else if (id === "lvl" && item.get("tier") === "Crafted") { } else if (id === "lvl" && item.get("tier") === "Crafted") {
let p_elem = document.createElement("div"); parent_div.appendChild(make_elem("div", ["col"], {
p_elem.classList.add("col"); textContent: "Combat Level Min: " + item.get("lvlLow") + "-" + item.get(id)
p_elem.textContent = "Combat Level Min: " + item.get("lvlLow") + "-" + item.get(id); }));
parent_div.appendChild(p_elem);
} else if (id === "displayName") { } else if (id === "displayName") {
let row = document.createElement("div"); let row = make_elem("div", ["row", "justify-content-center"]);
let a_elem = document.createElement("a"); let nolink_row = make_elem("div", ["row", "justify-content-center"]);
row.classList.add("row", "justify-content-center"); nolink_row.style.display = "none";
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); 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). FUNCTIONALITY FOR THIS FEATURE HAS SINCE BEEN REMOVED (WITH SQ2).
@ -275,50 +282,23 @@ function displayExpandedItem(item, parent_id){
//plusminus.style.flexGrow = 0; //plusminus.style.flexGrow = 0;
//plusminus.textContent = "\u2795"; //plusminus.textContent = "\u2795";
//row.appendChild(plusminus); //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); 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); parent_div.appendChild(nolink_row);
let img = document.createElement("img"); if (item.has("type")) {
if (item && item.has("type")) { let img = make_elem("img", [], {
img.src = "../media/items/" + (newIcons ? "new/":"old/") + "generic-" + item.get("type") + ".png"; src: "../media/items/" + (newIcons ? "new/":"old/") + "generic-" + item.get("type") + ".png",
img.alt = item.get("type"); alt: item.get("type"),
img.style = " z=index: 1; position: relative;"; style: " z=index: 1; position: relative;"
let container = document.createElement("div"); });
let container = make_elem("div");
let bckgrd = document.createElement("div"); let bckgrd = make_elem("div", ["col", "px-0", "d-flex", "align-items-center", "justify-content-center", 'scaled-bckgrd'], { // , "no-collapse"
bckgrd.classList.add("col", "px-0", "d-flex", "align-items-center", "justify-content-center");// , "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.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);
bckgrd.appendChild(img); bckgrd.appendChild(img);
container.appendChild(bckgrd);
parent_div.appendChild(container);
} }
} else { } else {
if (id.endsWith('Dam_')) { if (id.endsWith('Dam_')) {
@ -345,8 +325,7 @@ function displayExpandedItem(item, parent_id){
p_elem.style = "font-style: italic"; p_elem.style = "font-style: italic";
} else if (skp_order.includes(id)) { //id = str, dex, int, def, or agi } else if (skp_order.includes(id)) { //id = str, dex, int, def, or agi
if ( item.get("tier") !== "Crafted") { if ( item.get("tier") !== "Crafted") {
row = document.createElement("div"); row = make_elem("div", ["col"]);
row.classList.add("col");
let title = document.createElement("b"); let title = document.createElement("b");
title.textContent = idPrefixes[id] + " "; title.textContent = idPrefixes[id] + " ";