endernon/wynnbuilder-forked-for-changes
1
0
Fork 0
forked from morphNon/wynnbuilder-idk
Code Pull requests Activity

implement auto connectors

Browse source
This commit is contained in:
reschan 2022-06-23 16:15:06 +07:00
parent 554de7ea87
commit 0d70214906
1 changed files with 154 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

116
js/sq2bs.js
View file

@ -546,7 +546,7 @@ function init_autocomplete() {
}
}
// atree parsing
// placeholder name, follow new schema
function construct_AT(elem, tree) {
console.log("constructing ability tree UI");
document.getElementById("atree-active").innerHTML = ""; //reset all atree actives - should be done in a more general way later
@ -562,8 +562,8 @@ function construct_AT(elem, tree) {
let node = tree[i];
// create rows if not exist
if (document.getElementById("atree-row-" + node.row) == null) {
for (let j = 0; j <= node.row; j++) {
if (document.getElementById("atree-row-" + node.display.row) == null) {
for (let j = 0; j <= node.display.row; j++) {
if (document.getElementById("atree-row-" + j) == null) {
let row = document.createElement('div');
row.classList.add("row");
@ -585,16 +585,68 @@ function construct_AT(elem, tree) {
};
};
let connector_list = []
// create connectors based on parent location
for (let parent of node.parents) {
let parent_node = tree.find(object => {
return object.display_name === parent;
});
let connect_elem = document.createElement("div");
connect_elem.style = "background-size: cover; width: 100%; height: 100%;";
// connect up
for (let i = node.display.row - 1; i > parent_node.display.row; i--) {
let connector = connect_elem.cloneNode()
connector.style.backgroundImage = "url('../media/atree/connect_line.png')";
connector.id = "r" + i + "-c" + node.display.col + "-line"
document.getElementById("atree-row-" + i).children[node.display.col].appendChild(connector);
resolve_connector(document.getElementById("atree-row-" + i).children[node.display.col]);
}
// connect left
for (let i = parent_node.display.col + 1; i < node.display.col; i++) {
let connector = connect_elem.cloneNode()
connector.style.backgroundImage = "url('../media/atree/connect_line.png')";
connector.classList.add("rotate-90");
connector.id = "r" + parent_node.display.row + "-c" + i + "-line"
document.getElementById("atree-row-" + parent_node.display.row).children[i].appendChild(connector);
resolve_connector(document.getElementById("atree-row-" + parent_node.display.row).children[i]);
}
// connect right
for (let i = parent_node.display.col - 1; i > node.display.col; i--) {
let connector = connect_elem.cloneNode()
connector.style.backgroundImage = "url('../media/atree/connect_line.png')";
connector.classList.add("rotate-90");
connector.id = "r" + parent_node.display.row + "-c" + i + "-line"
document.getElementById("atree-row-" + parent_node.display.row).children[i].appendChild(connector);
resolve_connector(document.getElementById("atree-row-" + parent_node.display.row).children[i]);
}
// connect corners
if (parent_node.display.col > node.display.col && (parent_node.display.row != node.display.row)) {
let connector = connect_elem.cloneNode()
connector.style.backgroundImage = "url('../media/atree/connect_angle.png')";
connector.classList.add("rotate-180");
connector.id = "r" + parent_node.display.row + "-c" + node.display.col + "-angle"
document.getElementById("atree-row-" + parent_node.display.row).children[node.display.col].appendChild(connector);
resolve_connector(document.getElementById("atree-row-" + parent_node.display.row).children[node.display.col]);
}
if (parent_node.display.col < node.display.col && (parent_node.display.row != node.display.row)) {
let connector = connect_elem.cloneNode()
connector.style.backgroundImage = "url('../media/atree/connect_angle.png')";
connector.classList.add("rotate-270");
connector.id = "r" + parent_node.display.row + "-c" + node.display.col + "-angle"
document.getElementById("atree-row-" + parent_node.display.row).children[node.display.col].appendChild(connector);
resolve_connector(document.getElementById("atree-row-" + parent_node.display.row).children[node.display.col]);
}
}
// create node
let node_elem = document.createElement('div')
node_elem.style = "background-image: url('" + node.image + "'); background-size: cover; width: 100%; height: 100%;";
if (node.connector && node.rotate != 0) {
node_elem.classList.add("rotate-" + node.rotate);
};
node_elem.style = "background-image: url('../media/atree/node.png'); background-size: cover; width: 100%; height: 100%;";
// add tooltip
if (!node.connector) {
node_elem.addEventListener('mouseover', function(e) {
if (e.target !== this) {return;}
let tooltip = this.children[0];
@ -621,7 +673,7 @@ function construct_AT(elem, tree) {
let active_tooltip_title = document.createElement('b');
active_tooltip_title.classList.add("scaled-font");
active_tooltip_title.innerHTML = node.title.replaceAll("\n", "<br>");
active_tooltip_title.innerHTML = node.display_name;
let active_tooltip_text = document.createElement('p');
active_tooltip_text.classList.add("scaled-font-sm");
@ -632,7 +684,7 @@ function construct_AT(elem, tree) {
node_tooltip = active_tooltip.cloneNode(true);
active_tooltip.id = "atree-ab-" + node.title.replaceAll(" ", "");
active_tooltip.id = "atree-ab-" + node.display_name.replaceAll(" ", "");
node_tooltip.style.position = "absolute";
node_tooltip.style.zIndex = "100";
@ -642,7 +694,7 @@ function construct_AT(elem, tree) {
node_elem.addEventListener('click', function(e) {
if (e.target !== this) {return;}
let tooltip = document.getElementById("atree-ab-" + node.title.replaceAll(" ", ""));
let tooltip = document.getElementById("atree-ab-" + node.display_name.replaceAll(" ", ""));
if (tooltip.style.display == "block") {
tooltip.style.display = "none";
this.classList.remove("atree-selected");
@ -653,9 +705,43 @@ function construct_AT(elem, tree) {
this.classList.add("atree-selected");
this.style.backgroundImage = 'url("../media/atree/node-selected.png")';
}
toggle_connectors(connector_list);
});
document.getElementById("atree-row-" + node.display.row).children[node.display.col].appendChild(node_elem);
};
};
document.getElementById("atree-row-" + node.row).children[node.col].appendChild(node_elem);
};
};
// resolve connector conflict
function resolve_connector(elem) {
if (elem.children.length < 2) {return false;}
let line = 0;
let angle = 0;
let t = 0
for (let child of elem.children) {
let type = child.id.split("-")[2]
if (type == "line") {
line += 1;
} else if (type == "angle") {
angle += 1;
} else if (type == "t") {
t += 1;
}
}
let connect_elem = document.createElement("div");
if ((line == angle) || (angle == 1 && t == 1)) {
connect_elem.style = "background-image: url('../media/atree/connect_t.png'); background-size: cover; width: 100%; height: 100%;"
connect_elem.classList.add("rotate-180")
connect_elem.id = elem.children[0].id.split("-")[0] + "-" + elem.children[0].id.split("-")[1] + "-t"
elem.replaceChildren(connect_elem);
}
if (line > 1 && angle == 0) {
elem.replaceChildren(elem.children[0])
}
if (t == 1 && line == 1) {
connect_elem.style = "background-image: url('../media/atree/connect_c.png'); background-size: cover; width: 100%; height: 100%;"
elem.replaceChildren(connect_elem);
}
}