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

node highlighting + cost display in tooltip

Browse source
This commit is contained in:
ferricles 2022-06-26 00:48:42 -07:00
parent e5c2205bd5
commit 6561731a59
2 changed files with 50 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
js/display_atree.js
View file

@ -10,7 +10,19 @@ function construct_AT(elem, tree) {
// 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:";
let active_word = document.createElement("div");
active_word.classList.add("col");
active_word.textContent = "Active:";
let active_AP_container = document.createElement("div");
active_AP_container.classList.add("col");
active_AP_container.textContent = "(0/45 AP)";
//I can't believe we can't pass in multiple children at once
active_row.appendChild(active_word);
active_row.appendChild(active_AP_container);
document.getElementById("atree-active").appendChild(active_row);
atree_map = new Map();
@ -104,29 +116,18 @@ function construct_AT(elem, tree) {
if (icon === undefined) {
icon = "node";
}
node_elem.style = "background-image: url('../media/atree/"+icon+".png'); background-size: cover; width: 100%; height: 100%;";
// add tooltip
node_elem.addEventListener('mouseover', function(e) {
if (e.target !== this) {return;}
let tooltip = this.children[0];
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.display = "block";
});
node_elem.addEventListener('mouseout', function(e) {
if (e.target !== this) {return;}
let tooltip = this.children[0];
tooltip.style.display = "none";
});
let node_img = document.createElement('img');
node_img.src = '../media/atree/' + icon + '.png';
node_img.style = 'width: 100%; height:100%';
// node_elem.style = "background-image: url('../media/atree/"+icon+".png'); background-size: cover; width: 100%; height: 100%;";
node_elem.style = 'background-size: cover; width: 100%; height:100%; padding: 8%;'
node_elem.appendChild(node_img);
node_elem.classList.add("fake-button");
let active_tooltip = document.createElement('div');
active_tooltip.classList.add("rounded-bottom", "dark-4", "border", "p-0", "mx-2", "my-4", "dark-shadow");
//was causing active element boxes to be 0 width
// active_tooltip.style.width = elem.getBoundingClientRect().width * .80 + "px";
active_tooltip.style.maxWidth = elem.getBoundingClientRect().width * .80 + "px";
active_tooltip.style.display = "none";
// tooltip text formatting
@ -135,12 +136,17 @@ function construct_AT(elem, tree) {
active_tooltip_title.classList.add("scaled-font");
active_tooltip_title.innerHTML = node.display_name;
let active_tooltip_text = document.createElement('p');
active_tooltip_text.classList.add("scaled-font-sm");
active_tooltip_text.textContent = node.desc;
let active_tooltip_desc = document.createElement('p');
active_tooltip_desc.classList.add("scaled-font-sm", "my-0", "mx-1", "text-wrap");
active_tooltip_desc.textContent = node.desc;
let active_tooltip_cost = document.createElement('p');
active_tooltip_cost.classList.add("scaled-font-sm", "my-0", "mx-1", "text-start");
active_tooltip_cost.textContent = "Cost: " + node.cost + " AP";
active_tooltip.appendChild(active_tooltip_title);
active_tooltip.appendChild(active_tooltip_text);
active_tooltip.appendChild(active_tooltip_desc);
active_tooltip.appendChild(active_tooltip_cost);
node_tooltip = active_tooltip.cloneNode(true);
@ -153,19 +159,36 @@ function construct_AT(elem, tree) {
document.getElementById("atree-active").appendChild(active_tooltip);
node_elem.addEventListener('click', function(e) {
if (e.target !== this) {return;}
if (e.target !== this && e.target!== this.children[0]) {return;}
let tooltip = document.getElementById("atree-ab-" + node.display_name.replaceAll(" ", ""));
if (tooltip.style.display == "block") {
tooltip.style.display = "none";
this.classList.remove("atree-selected");
this.style.backgroundImage = 'url("../media/atree/node.png")';
this.style.backgroundImage = '';
}
else {
tooltip.style.display = "block";
this.classList.add("atree-selected");
this.style.backgroundImage = 'url("../media/atree/node-selected.png")';
this.style.backgroundImage = 'url("../media/atree/node_highlight.png")';
}
});
// add tooltip
node_elem.addEventListener('mouseover', function(e) {
if (e.target !== this && e.target!== this.children[0]) {return;}
let tooltip = this.children[this.children.length - 1];
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.display = "block";
});
node_elem.addEventListener('mouseout', function(e) {
if (e.target !== this && e.target!== this.children[0]) {return;}
let tooltip = this.children[this.children.length - 1];
tooltip.style.display = "none";
});
document.getElementById("atree-row-" + node.display.row).children[node.display.col].appendChild(node_elem);
};

1
js/utils.js
View file

@ -389,3 +389,4 @@ async function hardReload() {
function capitalizeFirst(str) {
return str[0].toUpperCase() + str.substring(1);
}