From 6561731a594bb4cc58b576ce98a542a9112ea3dd Mon Sep 17 00:00:00 2001 From: ferricles Date: Sun, 26 Jun 2022 00:48:42 -0700 Subject: [PATCH 1/3] node highlighting + cost display in tooltip --- js/display_atree.js | 75 +++++++++++++++++++++++++++++---------------- js/utils.js | 1 + 2 files changed, 50 insertions(+), 26 deletions(-) diff --git a/js/display_atree.js b/js/display_atree.js index e21ce61..e419c75 100644 --- a/js/display_atree.js +++ b/js/display_atree.js @@ -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); }; diff --git a/js/utils.js b/js/utils.js index 5691ac9..70ec6dc 100644 --- a/js/utils.js +++ b/js/utils.js @@ -389,3 +389,4 @@ async function hardReload() { function capitalizeFirst(str) { return str[0].toUpperCase() + str.substring(1); } + From 8d357f7531dac775368863690702f63965338150 Mon Sep 17 00:00:00 2001 From: ferricles Date: Sun, 26 Jun 2022 01:15:26 -0700 Subject: [PATCH 2/3] current AP count display --- js/display_atree.js | 35 ++++++++++++++++++++++++++++++----- 1 file changed, 30 insertions(+), 5 deletions(-) diff --git a/js/display_atree.js b/js/display_atree.js index e419c75..ed2b3f3 100644 --- a/js/display_atree.js +++ b/js/display_atree.js @@ -12,14 +12,37 @@ function construct_AT(elem, tree) { active_row.classList.add("row", "item-title", "mx-auto", "justify-content-center"); let active_word = document.createElement("div"); - active_word.classList.add("col"); - active_word.textContent = "Active:"; + active_word.classList.add("col-auto"); + active_word.textContent = "Active Abilities:"; let active_AP_container = document.createElement("div"); - active_AP_container.classList.add("col"); - active_AP_container.textContent = "(0/45 AP)"; - + active_AP_container.classList.add("col-auto"); + + let active_AP_subcontainer = document.createElement("div"); + active_AP_subcontainer.classList.add("row"); + + let active_AP_cost = document.createElement("div"); + active_AP_cost.classList.add("col-auto", "mx-0", "px-0"); + active_AP_cost.id = "active_AP_cost"; + active_AP_cost.textContent = "0"; + let active_AP_slash = document.createElement("div"); + active_AP_slash.classList.add("col-auto", "mx-0", "px-0"); + active_AP_slash.textContent = "/"; + let active_AP_cap = document.createElement("div"); + active_AP_cap.classList.add("col-auto", "mx-0", "px-0"); + active_AP_cap.id = "active_AP_cap"; + active_AP_cap.textContent = "45"; + let active_AP_end = document.createElement("div"); + active_AP_end.classList.add("col-auto", "mx-0", "px-0"); + active_AP_end.textContent = " AP"; + //I can't believe we can't pass in multiple children at once + active_AP_subcontainer.appendChild(active_AP_cost); + active_AP_subcontainer.appendChild(active_AP_slash); + active_AP_subcontainer.appendChild(active_AP_cap); + active_AP_subcontainer.appendChild(active_AP_end); + active_AP_container.appendChild(active_AP_subcontainer); + active_row.appendChild(active_word); active_row.appendChild(active_AP_container); @@ -165,11 +188,13 @@ function construct_AT(elem, tree) { tooltip.style.display = "none"; this.classList.remove("atree-selected"); this.style.backgroundImage = ''; + document.getElementById("active_AP_cost").textContent = parseInt(document.getElementById("active_AP_cost").textContent) - node.cost; } else { tooltip.style.display = "block"; this.classList.add("atree-selected"); this.style.backgroundImage = 'url("../media/atree/node_highlight.png")'; + document.getElementById("active_AP_cost").textContent = parseInt(document.getElementById("active_AP_cost").textContent) + node.cost; } }); From d5d3f15c27fa2bfe5795a79538c094519d328761 Mon Sep 17 00:00:00 2001 From: ferricles Date: Sun, 26 Jun 2022 11:18:20 -0700 Subject: [PATCH 3/3] prevent node unrendering --- js/atree.js | 1 - 1 file changed, 1 deletion(-) diff --git a/js/atree.js b/js/atree.js index 2daa244..f70242d 100644 --- a/js/atree.js +++ b/js/atree.js @@ -207,7 +207,6 @@ function construct_AT(elem, tree) { if (tooltip.style.display == "block") { tooltip.style.display = "none"; this.classList.remove("atree-selected"); - this.style.backgroundImage = ''; document.getElementById("active_AP_cost").textContent = parseInt(document.getElementById("active_AP_cost").textContent) - node.cost; } else {