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

Merge branch 'atree' into atree_aggregator

Browse source
This commit is contained in:
hppeng 2022-06-28 23:26:43 -07:00
commit 44d3fc996a
3 changed files with 38 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
builder/index.html
View file

@ -618,10 +618,10 @@
</div> </div>
<div class = "col dark-6 rounded-bottom my-3 my-xl-1" id = "atree-dropdown" style = "display:none;"> <div class = "col dark-6 rounded-bottom my-3 my-xl-1" id = "atree-dropdown" style = "display:none;">
<div class="row row-cols-1 row-cols-xl-2"> <div class="row row-cols-1 row-cols-xl-2">
<div class="col border border-semi-light rounded dark-9 hide-scroll" id="atree-ui" style="height: 500px; overflow-y: auto;"> <div class="col border border-semi-light rounded dark-9 hide-scroll" id="atree-ui" style="height: 50vh; overflow-y: auto;">
</div> </div>
<div class="col mx-auto" style="height: 500px; overflow-y: auto;" id="atree-active"> <div class="col mx-auto" style="height: 50vh; overflow-y: auto;" id="atree-active">
</div> </div>
</div> </div>
</div> </div>

41
js/atree.js
View file

@ -174,11 +174,6 @@ const atree_render = new (class extends ComputeNode {
compute_func(input_map) { compute_func(input_map) {
if (input_map.size !== 1) { throw "AbilityTreeRenderNode accepts exactly one input (atree)"; } if (input_map.size !== 1) { throw "AbilityTreeRenderNode accepts exactly one input (atree)"; }
const [atree] = input_map.values(); // Extract values, pattern match it into size one list and bind to first element const [atree] = input_map.values(); // Extract values, pattern match it into size one list and bind to first element
//as of now, we NEED to have the dropdown tab visible/not hidden in order to properly display atree stuff.
// TODO: FIXME! this is a side effect of `px` based rendering.
if (!document.getElementById("toggle-atree").classList.contains("toggleOn")) {
toggle_tab('atree-dropdown'); toggleButton('toggle-atree');
}
//for some reason we have to cast to string //for some reason we have to cast to string
let ret = null; let ret = null;
@ -518,14 +513,10 @@ function render_AT(UI_elem, list_elem, tree) {
let row = document.createElement('div'); let row = document.createElement('div');
row.classList.add("row"); row.classList.add("row");
row.id = "atree-row-" + j; row.id = "atree-row-" + j;
// TODO: do this more dynamically
row.style.minHeight = UI_elem.scrollWidth / 9 + "px";
//row.style.minHeight = UI_elem.getBoundingClientRect().width / 9 + "px";
for (let k = 0; k < 9; k++) { for (let k = 0; k < 9; k++) {
col = document.createElement('div'); col = document.createElement('div');
col.classList.add('col', 'px-0'); col.classList.add('col', 'px-0');
col.style.minHeight = UI_elem.scrollWidth / 9 + "px";
row.appendChild(col); row.appendChild(col);
} }
UI_elem.appendChild(row); UI_elem.appendChild(row);
@ -583,7 +574,10 @@ function render_AT(UI_elem, list_elem, tree) {
if (icon === undefined) { if (icon === undefined) {
icon = "node"; icon = "node";
} }
node_elem.style = "background-image: url('../media/atree/"+icon+".png'); background-size: cover; width: 100%; height: 100%;"; let node_img = document.createElement('img');
node_img.src = '../media/atree/'+icon+'.png';
node_img.style = "width: 100%; height: 100%;";
node_elem.appendChild(node_img);
node_elem.classList.add("atree-circle"); node_elem.classList.add("atree-circle");
// add tooltip // add tooltip
@ -605,7 +599,6 @@ function render_AT(UI_elem, list_elem, tree) {
let active_tooltip = document.createElement('div'); let active_tooltip = document.createElement('div');
active_tooltip.classList.add("rounded-bottom", "dark-4", "border", "p-0", "mx-2", "my-4", "dark-shadow"); active_tooltip.classList.add("rounded-bottom", "dark-4", "border", "p-0", "mx-2", "my-4", "dark-shadow");
active_tooltip.style.maxWidth = UI_elem.getBoundingClientRect().width * .80 + "px";
active_tooltip.style.display = "none"; active_tooltip.style.display = "none";
// tooltip text formatting // tooltip text formatting
@ -662,6 +655,7 @@ function render_AT(UI_elem, list_elem, tree) {
let tooltip = this.children[this.children.length - 1]; let tooltip = this.children[this.children.length - 1];
tooltip.style.top = this.getBoundingClientRect().bottom + window.scrollY * 1.02 + "px"; tooltip.style.top = this.getBoundingClientRect().bottom + window.scrollY * 1.02 + "px";
tooltip.style.left = this.parentElement.parentElement.getBoundingClientRect().left + (elem.getBoundingClientRect().width * .2 / 2) + "px"; tooltip.style.left = this.parentElement.parentElement.getBoundingClientRect().left + (elem.getBoundingClientRect().width * .2 / 2) + "px";
tooltip.style.maxWidth = UI_elem.getBoundingClientRect().width * .95 + "px";
tooltip.style.display = "block"; tooltip.style.display = "block";
}); });
@ -725,8 +719,11 @@ function atree_render_connection(atree_connectors_map) {
for (let i of atree_connectors_map.keys()) { for (let i of atree_connectors_map.keys()) {
let connector_info = atree_connectors_map.get(i); let connector_info = atree_connectors_map.get(i);
let connector_elem = connector_info.connector; let connector_elem = connector_info.connector;
let connector_img = document.createElement('img');
set_connector_type(connector_info); set_connector_type(connector_info);
connector_elem.style.backgroundImage = "url('../media/atree/connect_"+connector_info.type+".png')"; connector_img.src = '../media/atree/connect_'+connector_info.type+'.png';
connector_img.style = "width: 100%; height: 100%;"
connector_elem.replaceChildren(connector_img);
connector_info.highlight = [0, 0, 0, 0]; connector_info.highlight = [0, 0, 0, 0];
let target_elem = document.getElementById("atree-row-" + i.split(",")[0]).children[i.split(",")[1]]; let target_elem = document.getElementById("atree-row-" + i.split(",")[0]).children[i.split(",")[1]];
if (target_elem.children.length != 0) { if (target_elem.children.length != 0) {
@ -757,7 +754,10 @@ function atree_toggle_state(atree_connectors_map, node_wrapper) {
function atree_update_connector() { function atree_update_connector() {
atree_connectors_map.forEach((v) => { atree_connectors_map.forEach((v) => {
if (v.length != 0) { if (v.length != 0) {
v[0].connector.style.backgroundImage = "url('../media/atree/connect_" + v[0].type + ".png')"; let connector_elem = document.createElement("img");
connector_elem.style = "width: 100%; height: 100%;";
connector_elem.src = '../media/atree/connect_' + v[0].type + '.png'
v[0].replaceChildren(connector_elem);
} }
}); });
atree_map.forEach((v) => { atree_map.forEach((v) => {
@ -779,6 +779,8 @@ function atree_set_edge(atree_connectors_map, parent, child, state) {
let connector_info = atree_connectors_map.get(connector_label); let connector_info = atree_connectors_map.get(connector_label);
let connector_elem = connector_info.connector; let connector_elem = connector_info.connector;
let highlight_state = connector_info.highlight; // left right up down let highlight_state = connector_info.highlight; // left right up down
let connector_img_elem = document.createElement("img");
connector_img_elem.style = "width: 100%; height: 100%;";
const ctype = connector_info.type; const ctype = connector_info.type;
if (ctype === 't' || ctype === 'c') { if (ctype === 't' || ctype === 'c') {
// c, t // c, t
@ -800,18 +802,21 @@ function atree_set_edge(atree_connectors_map, parent, child, state) {
let render_state = highlight_state.map(x => (x > 0 ? 1 : 0)); let render_state = highlight_state.map(x => (x > 0 ? 1 : 0));
let connector_img = atree_parse_connector(render_state, ctype); let connector_img = atree_parse_connector(render_state, ctype);
connector_img_elem.src = connector_img.img
connector_elem.className = ""; connector_elem.className = "";
connector_elem.classList.add("rotate-" + connector_img.rotate); connector_elem.classList.add("rotate-" + connector_img.rotate);
connector_elem.style.backgroundImage = connector_img.img; connector_elem.replaceChildren(connector_img_elem);
continue; continue;
} }
// lol bad overloading, [0] is just the whole state // lol bad overloading, [0] is just the whole state
highlight_state[0] += state_delta; highlight_state[0] += state_delta;
if (highlight_state[0] > 0) { if (highlight_state[0] > 0) {
connector_elem.style.backgroundImage = "url('../media/atree/highlight_"+ctype+".png')"; connector_img_elem.src = '../media/atree/highlight_'+ctype+'.png';
connector_elem.replaceChildren(connector_img_elem);
} }
else { else {
connector_elem.style.backgroundImage = "url('../media/atree/connect_"+ctype+".png')"; connector_img_elem.src = '../media/atree/connect_'+ctype+'.png';
connector_elem.replaceChildren(connector_img_elem);
} }
} }
} }
@ -846,7 +851,7 @@ function atree_parse_connector(orient, type) {
res += i; res += i;
} }
if (res === "0000") { if (res === "0000") {
return {img: "url('../media/atree/connect_" + type + ".png')", rotate: 0}; return {img: "../media/atree/connect_" + type + ".png", rotate: 0};
} }
let ret; let ret;
@ -855,6 +860,6 @@ function atree_parse_connector(orient, type) {
} else { } else {
ret = t_connector_dict[res]; ret = t_connector_dict[res];
}; };
ret.img = "url('../media/atree/highlight_" + type + ret.attrib + ".png')"; ret.img = "../media/atree/highlight_" + type + ret.attrib + ".png";
return ret; return ret;
}; };

19
py_script/atree-generateID.py
View file

@ -1,14 +1,16 @@
""" """
Generate a JSON Ability Tree [atree_constants_id.json] with: Generate a minified JSON Ability Tree [atree_constants_min.json] AND a minified .js form [atree_constants_min.js] of the Ability Tree with:
- All references replaced by numerical IDs - All references replaced by numerical IDs
- Extra JSON File with Class: [Original name as key and Assigned IDs as value]. - Extra JSON File with Class: [Original name as key and Assigned IDs as value].
given a JSON Ability Tree with reference as string. given [atree_constants.js] .js form of the Ability Tree with reference as string.
""" """
import json import json
abilDict = {} abilDict = {}
with open("atree_constants.json") as f: with open("atree_constants.js") as f:
data = json.loads(f.read()) data = f.read()
data = data.replace("const atrees = ", "")
data = json.loads(data)
for classType, info in data.items(): for classType, info in data.items():
_id = 0 _id = 0
abilDict[classType] = {} abilDict[classType] = {}
@ -31,5 +33,10 @@ with open("atree_constants.json") as f:
for ref in range(len(info[abil]["blockers"])): for ref in range(len(info[abil]["blockers"])):
info[abil]["blockers"][ref] = abilDict[classType][info[abil]["blockers"][ref]] info[abil]["blockers"][ref] = abilDict[classType][info[abil]["blockers"][ref]]
with open('atree_constants_id.json', 'w', encoding='utf-8') as abil_dest: data_str = json.dumps(data, ensure_ascii=False, separators=(',', ':'))
json.dump(data, abil_dest, ensure_ascii=False, indent=4) data_str = "const atrees=" + data_str
with open('atree_constants_min.js', 'w', encoding='utf-8') as abil_dest:
abil_dest.write(data_str)
with open('atree_constants_min.json', 'w', encoding='utf-8') as json_dest:
json.dump(data, json_dest, ensure_ascii=False, separators=(',', ':'))