morphNon/wynnbuilder-idk
2
0
Fork 1
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fixed atree display bugs | functional atree toggle on/off + switching based on inferred class type

Browse source
This commit is contained in:
ferricles 2022-06-18 21:00:32 -07:00
parent ec13bdea1e
commit 6277b50d12
2 changed files with 23 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
builder/index.html
View file

@ -617,8 +617,7 @@
<div class="col border border-semi-light rounded dark-9 hide-scroll" id="atree-ui" style="height: 500px; overflow-y: auto;">
</div>
<div class="col item-title mx-auto" id="atree-active">
Active:
<div class="col mx-auto" id="atree-active">
</div>
</div>
</div>

24
js/sq2bs.js
View file

@ -233,6 +233,13 @@ function update_field(field) {
// set weapon img and set ability tree
if (category == 'weapon') {
document.querySelector("#weapon-img").setAttribute('src', '../media/items/new/generic-'+type+'.png');
//as of now, we NEED to have the dropdown tab visible/not hidden in order to properly display atree stuff.
if (!document.getElementById("toggle-atree").classList.contains("toggleOn")) {
toggle_tab('atree-dropdown');
toggleButton('toggle-atree');
}
//for some reason we have to cast to string
construct_AT(document.getElementById("atree-ui"), atrees[wep_to_class.get(type)]);
@ -542,7 +549,15 @@ function init_autocomplete() {
// atree parsing
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
elem.innerHTML = ""; //reset the atree in the DOM
// add in the "Active" title to atree
let active_row = document.createElement("div");
active_row.classList.add("row", "item-title", "mx-auto", "justify-content-center");
active_row.textContent = "Active:";
document.getElementById("atree-active").appendChild(active_row);
for (let i = 0; i < tree.length; i++) {
let node = tree[i];
@ -553,12 +568,16 @@ function construct_AT(elem, tree) {
let row = document.createElement('div');
row.classList.add("row");
row.id = "atree-row-" + j;
row.style.height = elem.getBoundingClientRect().width / 9 + "px";
//was causing atree rows to be 0 height
console.log(elem.scrollWidth / 9);
row.style.minHeight = elem.scrollWidth / 9 + "px";
//row.style.minHeight = elem.getBoundingClientRect().width / 9 + "px";
for (let k = 0; k < 9; k++) {
col = document.createElement('div');
col.classList.add('col', 'px-0');
col.style.minHeight = elem.scrollWidth / 9 + "px";
row.appendChild(col);
};
elem.appendChild(row);
@ -594,7 +613,8 @@ function construct_AT(elem, tree) {
let active_tooltip = document.createElement('div');
active_tooltip.classList.add("rounded-bottom", "dark-7", "border", "mb-2", "mx-auto");
active_tooltip.style.width = elem.getBoundingClientRect().width * .80 + "px";
//was causing active element boxes to be 0 width
// active_tooltip.style.width = elem.getBoundingClientRect().width * .80 + "px";
active_tooltip.style.display = "none";
// tooltip text formatting