diff --git a/css/sq2bs.css b/css/sq2bs.css index c574126..7845a26 100644 --- a/css/sq2bs.css +++ b/css/sq2bs.css @@ -489,10 +489,6 @@ a:hover { display: none; /* Safari and Chrome */ } -.atree-selected { - outline: 5px solid rgba(95, 214, 223, 0.8); -} - .atree-circle { border-radius:50%; -moz-border-radius:50%; diff --git a/js/atree.js b/js/atree.js index d3d5456..c74f02e 100644 --- a/js/atree.js +++ b/js/atree.js @@ -735,6 +735,7 @@ function render_AT(UI_elem, list_elem, tree) { for (let k = 0; k < 9; k++) { col = document.createElement('div'); col.classList.add('col', 'px-0'); + col.style = "position: relative; aspect-ratio: 1/1;" row.appendChild(col); } UI_elem.appendChild(row); @@ -752,7 +753,7 @@ function render_AT(UI_elem, list_elem, tree) { const parent_id = parent_abil.id; let connect_elem = document.createElement("div"); - connect_elem.style = "background-size: cover; width: 100%; height: 100%;"; + connect_elem.style = "background-size: cover; width: 200%; height: 200%; position: absolute; top: -50%; left: -50%; image-rendering: pixelated;"; // connect up for (let i = ability.display.row - 1; i > parent_abil.display.row; i--) { const coord = i + "," + ability.display.col; @@ -791,29 +792,20 @@ function render_AT(UI_elem, list_elem, tree) { let icon = ability.display.icon; if (icon === undefined) { icon = "node"; + } else if (icon == "node_4") { + icon = "node_warrior" // temp fix } let node_img = document.createElement('img'); node_img.src = '../media/atree/'+icon+'.png'; - node_img.style = "width: 100%; height: 100%;"; + node_img.style = "width: 200%; height: 200%; position: absolute; top: -50%; left: -50%; image-rendering: pixelated; z-index: 1;"; node_elem.appendChild(node_img); node_elem.classList.add("atree-circle"); - // 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"; - }); - - node_elem.classList.add("fake-button"); + // create hitbox + // this is necessary since images exceed the size of their square, but should only be interactible within that square + let hitbox = document.createElement("div"); + hitbox.style = "position: absolute; cursor: pointer; left: 0; top: 0; width: 100%; height: 100%; z-index: 2;" + node_elem.appendChild(hitbox); let node_tooltip = document.createElement('div'); node_tooltip.classList.add("rounded-bottom", "dark-4", "border", "p-0", "mx-2", "my-4", "dark-shadow"); @@ -852,7 +844,7 @@ function render_AT(UI_elem, list_elem, tree) { node_wrap.elem = node_elem; node_wrap.all_connectors_ref = atree_connectors_map; - node_elem.addEventListener('click', function(e) { + hitbox.addEventListener('click', function(e) { if (e.target !== this && e.target!== this.children[0]) {return;} atree_set_state(node_wrap, !node_wrap.active); atree_state_node.mark_dirty().update(); @@ -860,18 +852,18 @@ function render_AT(UI_elem, list_elem, tree) { // 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.maxWidth = UI_elem.getBoundingClientRect().width * .95 + "px"; + hitbox.addEventListener('mouseover', function(e) { + if (e.target !== this && e.target!== this.parentElement.children[0]) {return;} + let tooltip = this.parentElement.children[this.parentElement.children.length - 1]; + tooltip.style.top = "50px"; + tooltip.style.left = (this.parentElement.parentElement.parentElement.getBoundingClientRect().left - this.getBoundingClientRect().left) + "px"; + tooltip.style.width = UI_elem.getBoundingClientRect().width * .95 + "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]; + hitbox.addEventListener('mouseout', function(e) { + if (e.target !== this && e.target!== this.parentElement.children[0]) {return;} + let tooltip = this.parentElement.children[this.parentElement.children.length - 1]; tooltip.style.display = "none"; }); @@ -948,11 +940,11 @@ function atree_render_connection(atree_connectors_map) { function atree_set_state(node_wrapper, new_state) { if (new_state) { node_wrapper.active = true; - node_wrapper.elem.classList.add("atree-selected"); + node_wrapper.elem.children[0].src = node_wrapper.elem.children[0].src.substring(0, node_wrapper.elem.children[0].src.length - 4) + "_selected.png"; } else { node_wrapper.active = false; - node_wrapper.elem.classList.remove("atree-selected"); + node_wrapper.elem.children[0].src = node_wrapper.elem.children[0].src.substring(0, node_wrapper.elem.children[0].src.length - 13) + ".png"; } let atree_connectors_map = node_wrapper.all_connectors_ref; for (const parent of node_wrapper.parents) { diff --git a/media/atree/connect_angle.png b/media/atree/connect_angle.png index b1b03fd..75ca3bb 100644 Binary files a/media/atree/connect_angle.png and b/media/atree/connect_angle.png differ diff --git a/media/atree/connect_c.png b/media/atree/connect_c.png index cc5022b..0b27703 100644 Binary files a/media/atree/connect_c.png and b/media/atree/connect_c.png differ diff --git a/media/atree/connect_line.png b/media/atree/connect_line.png index 41ee507..24b75d6 100644 Binary files a/media/atree/connect_line.png and b/media/atree/connect_line.png differ diff --git a/media/atree/connect_t.png b/media/atree/connect_t.png index 9acedd6..692e29b 100644 Binary files a/media/atree/connect_t.png and b/media/atree/connect_t.png differ diff --git a/media/atree/highlight_angle.png b/media/atree/highlight_angle.png index accb200..1df5c0f 100644 Binary files a/media/atree/highlight_angle.png and b/media/atree/highlight_angle.png differ diff --git a/media/atree/highlight_c.png b/media/atree/highlight_c.png index 1aa028d..8b112b6 100644 Binary files a/media/atree/highlight_c.png and b/media/atree/highlight_c.png differ diff --git a/media/atree/highlight_c_2_a.png b/media/atree/highlight_c_2_a.png index c7d3f89..e7b98e8 100644 Binary files a/media/atree/highlight_c_2_a.png and b/media/atree/highlight_c_2_a.png differ diff --git a/media/atree/highlight_c_2_l.png b/media/atree/highlight_c_2_l.png index b522cf5..b2d3f33 100644 Binary files a/media/atree/highlight_c_2_l.png and b/media/atree/highlight_c_2_l.png differ diff --git a/media/atree/highlight_c_3.png b/media/atree/highlight_c_3.png index 546bd34..cfd6bf2 100644 Binary files a/media/atree/highlight_c_3.png and b/media/atree/highlight_c_3.png differ diff --git a/media/atree/highlight_line.png b/media/atree/highlight_line.png index f4ab69f..43dfd7b 100644 Binary files a/media/atree/highlight_line.png and b/media/atree/highlight_line.png differ diff --git a/media/atree/highlight_t_2_a.png b/media/atree/highlight_t_2_a.png index e6cd87a..338c2e2 100644 Binary files a/media/atree/highlight_t_2_a.png and b/media/atree/highlight_t_2_a.png differ diff --git a/media/atree/highlight_t_2_l.png b/media/atree/highlight_t_2_l.png index b52a8d7..39601ac 100644 Binary files a/media/atree/highlight_t_2_l.png and b/media/atree/highlight_t_2_l.png differ diff --git a/media/atree/highlight_t_3.png b/media/atree/highlight_t_3.png index 153c85e..c9ba3e4 100644 Binary files a/media/atree/highlight_t_3.png and b/media/atree/highlight_t_3.png differ diff --git a/media/atree/node_0.png b/media/atree/node_0.png index 538b41a..2bd8d3c 100644 Binary files a/media/atree/node_0.png and b/media/atree/node_0.png differ diff --git a/media/atree/node_0_blocked.png b/media/atree/node_0_blocked.png index e62898d..4f42329 100644 Binary files a/media/atree/node_0_blocked.png and b/media/atree/node_0_blocked.png differ diff --git a/media/atree/node_0_selected.png b/media/atree/node_0_selected.png new file mode 100644 index 0000000..e5301e1 Binary files /dev/null and b/media/atree/node_0_selected.png differ diff --git a/media/atree/node_1.png b/media/atree/node_1.png index 2e1ea97..5ddc042 100644 Binary files a/media/atree/node_1.png and b/media/atree/node_1.png differ diff --git a/media/atree/node_1_blocked.png b/media/atree/node_1_blocked.png index f7b0e5a..3bc9681 100644 Binary files a/media/atree/node_1_blocked.png and b/media/atree/node_1_blocked.png differ diff --git a/media/atree/node_1_selected.png b/media/atree/node_1_selected.png new file mode 100644 index 0000000..405da77 Binary files /dev/null and b/media/atree/node_1_selected.png differ diff --git a/media/atree/node_2.png b/media/atree/node_2.png index de7be26..b5da379 100644 Binary files a/media/atree/node_2.png and b/media/atree/node_2.png differ diff --git a/media/atree/node_2_blocked.png b/media/atree/node_2_blocked.png index 97bcb14..ca9586e 100644 Binary files a/media/atree/node_2_blocked.png and b/media/atree/node_2_blocked.png differ diff --git a/media/atree/node_2_selected.png b/media/atree/node_2_selected.png new file mode 100644 index 0000000..9a01757 Binary files /dev/null and b/media/atree/node_2_selected.png differ diff --git a/media/atree/node_3.png b/media/atree/node_3.png index b55c896..09f7d83 100644 Binary files a/media/atree/node_3.png and b/media/atree/node_3.png differ diff --git a/media/atree/node_3_blocked.png b/media/atree/node_3_blocked.png index 26f82cd..544241d 100644 Binary files a/media/atree/node_3_blocked.png and b/media/atree/node_3_blocked.png differ diff --git a/media/atree/node_3_selected.png b/media/atree/node_3_selected.png new file mode 100644 index 0000000..5eafce3 Binary files /dev/null and b/media/atree/node_3_selected.png differ diff --git a/media/atree/node_archer.png b/media/atree/node_archer.png new file mode 100644 index 0000000..fd2c33f Binary files /dev/null and b/media/atree/node_archer.png differ diff --git a/media/atree/node_archer_blocked.png b/media/atree/node_archer_blocked.png new file mode 100644 index 0000000..30651d6 Binary files /dev/null and b/media/atree/node_archer_blocked.png differ diff --git a/media/atree/node_archer_selected.png b/media/atree/node_archer_selected.png new file mode 100644 index 0000000..e48bb68 Binary files /dev/null and b/media/atree/node_archer_selected.png differ diff --git a/media/atree/node_assassin.png b/media/atree/node_assassin.png new file mode 100644 index 0000000..7b00ea8 Binary files /dev/null and b/media/atree/node_assassin.png differ diff --git a/media/atree/node_assassin_blocked.png b/media/atree/node_assassin_blocked.png new file mode 100644 index 0000000..b9dc9a9 Binary files /dev/null and b/media/atree/node_assassin_blocked.png differ diff --git a/media/atree/node_assassin_selected.png b/media/atree/node_assassin_selected.png new file mode 100644 index 0000000..7d88a0f Binary files /dev/null and b/media/atree/node_assassin_selected.png differ diff --git a/media/atree/node_mage.png b/media/atree/node_mage.png new file mode 100644 index 0000000..a2d5941 Binary files /dev/null and b/media/atree/node_mage.png differ diff --git a/media/atree/node_mage_blocked.png b/media/atree/node_mage_blocked.png new file mode 100644 index 0000000..15d26fc Binary files /dev/null and b/media/atree/node_mage_blocked.png differ diff --git a/media/atree/node_mage_selected.png b/media/atree/node_mage_selected.png new file mode 100644 index 0000000..783a4a2 Binary files /dev/null and b/media/atree/node_mage_selected.png differ diff --git a/media/atree/node_shaman.png b/media/atree/node_shaman.png new file mode 100644 index 0000000..bed3c3d Binary files /dev/null and b/media/atree/node_shaman.png differ diff --git a/media/atree/node_shaman_blocked.png b/media/atree/node_shaman_blocked.png new file mode 100644 index 0000000..49ae366 Binary files /dev/null and b/media/atree/node_shaman_blocked.png differ diff --git a/media/atree/node_shaman_selected.png b/media/atree/node_shaman_selected.png new file mode 100644 index 0000000..172a199 Binary files /dev/null and b/media/atree/node_shaman_selected.png differ diff --git a/media/atree/node_warrior.png b/media/atree/node_warrior.png new file mode 100644 index 0000000..b58e9ca Binary files /dev/null and b/media/atree/node_warrior.png differ diff --git a/media/atree/node_warrior_blocked.png b/media/atree/node_warrior_blocked.png new file mode 100644 index 0000000..cd44a93 Binary files /dev/null and b/media/atree/node_warrior_blocked.png differ diff --git a/media/atree/node_warrior_selected.png b/media/atree/node_warrior_selected.png new file mode 100644 index 0000000..e1db61a Binary files /dev/null and b/media/atree/node_warrior_selected.png differ