diff --git a/js/atree.js b/js/atree.js index e8dc914..7222688 100644 --- a/js/atree.js +++ b/js/atree.js @@ -372,11 +372,11 @@ const atree_validate = new (class extends ComputeNode { const abil = node.ability; if (atree_state.get(abil.id).active) { atree_to_add.push([node, 'not reachable', false]); - atree_state.get(abil.id).img.src = '../media/atree/' + abil.display.icon + '_selected.png'; + atree_state.get(abil.id).img.style.backgroundPosition = atlasBGPositionCalc([atreeNodeAtlasPositions[abil.display.icon], 2], [9, 3]); } else { atree_not_present.push(abil.id); - atree_state.get(abil.id).img.src = '../media/atree/' + abil.display.icon + '_blocked.png'; + atree_state.get(abil.id).img.style.backgroundPosition = atlasBGPositionCalc([atreeNodeAtlasPositions[abil.display.icon], 0], [9, 3]); } } @@ -425,7 +425,7 @@ const atree_validate = new (class extends ComputeNode { const node = atree_state.get(node_id); const [success, hard_error, reason] = abil_can_activate(node, atree_state, reachable, archetype_count, ap_left); if (success) { - node.img.src = '../media/atree/'+node.ability.display.icon+'.png'; + node.img.style.backgroundPosition = atlasBGPositionCalc([atreeNodeAtlasPositions[node.ability.display.icon], 1], [9, 3]); } } @@ -973,7 +973,6 @@ 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: 200%; height: 200%; position: absolute; top: -50%; left: -50%; image-rendering: pixelated;"; connect_elem.style = "width: 112.5%; height: 112.5%; position: absolute; top: -5.55%; left: -5.55%; image-rendering: pixelated; background-image: url('../media/atree/connectors.png'); background-size: 1200% 400%;" // connect up for (let i = ability.display.row - 1; i > parent_abil.display.row; i--) { @@ -1010,16 +1009,8 @@ function render_AT(UI_elem, list_elem, tree) { // create node let node_elem = document.createElement('div'); - let icon = ability.display.icon; - if (icon === undefined) { - icon = "node"; - } - let node_img = document.createElement('img'); - node_img.src = '../media/atree/'+icon+'.png'; - 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_wrap.img = node_img; + node_wrap.img = make_elem("div", [], {style: "width: 200%; height: 200%; position: absolute; top: -50%; left: -50%; image-rendering: pixelated; z-index: 1; background-image: url('../media/atree/icons.png'); background-size: 900% 300%;"}) + node_elem.appendChild(node_wrap.img); // create hitbox // this is necessary since images exceed the size of their square, but should only be interactible within that square @@ -1242,11 +1233,11 @@ function atree_set_state(node_wrapper, new_state) { } if (new_state) { node_wrapper.active = true; - node_wrapper.elem.children[0].src = "../media/atree/" + icon + "_selected.png"; + node_wrapper.img.style.backgroundPosition = atlasBGPositionCalc([atreeNodeAtlasPositions[icon], 2], [9, 3]); } else { node_wrapper.active = false; - node_wrapper.elem.children[0].src = "../media/atree/" + icon + ".png"; + node_wrapper.img.style.backgroundPosition = atlasBGPositionCalc([atreeNodeAtlasPositions[icon], 1], [9, 3]); } let atree_connectors_map = node_wrapper.all_connectors_ref; for (const parent of node_wrapper.parents) { @@ -1275,6 +1266,18 @@ const atreeConnectorAtlasPositions = { "1011": {"0000": [5, 2], "1011": [6, 2], "1010": [7, 2], "1001": [8, 2], "0011": [9, 2]}, "1111": {"0000": [0, 3], "1111": [1, 3], "1110": [2, 3], "1101": [3, 3], "1100": [4, 3], "1011": [5, 3], "1010": [6, 3], "1001": [7, 3], "0111": [8, 3], "0110": [9, 3], "0101": [10, 3], "0011": [11, 3]} } +// just has the x position, y is based on state +const atreeNodeAtlasPositions = { + "node_0": 0, + "node_1": 1, + "node_2": 2, + "node_3": 3, + "node_archer": 4, + "node_warrior": 5, + "node_mage": 6, + "node_assassin": 7, + "node_shaman": 8 +} function atlasBGPositionCalc(pos, atlasSize) { // https://css-tricks.com/focusing-background-image-precise-location-percentages/ // p = (c + 0.5/z - 0.5) * z/(z - 1) + 0.5 diff --git a/media/atree/icons.png b/media/atree/icons.png new file mode 100644 index 0000000..fcbc48d Binary files /dev/null and b/media/atree/icons.png differ diff --git a/media/atree/node_0.png b/media/atree/node_0.png deleted file mode 100644 index a3ed215..0000000 Binary files a/media/atree/node_0.png and /dev/null differ diff --git a/media/atree/node_0_blocked.png b/media/atree/node_0_blocked.png deleted file mode 100644 index 4f42329..0000000 Binary files a/media/atree/node_0_blocked.png and /dev/null differ diff --git a/media/atree/node_0_selected.png b/media/atree/node_0_selected.png deleted file mode 100644 index e5301e1..0000000 Binary files a/media/atree/node_0_selected.png and /dev/null differ diff --git a/media/atree/node_1.png b/media/atree/node_1.png deleted file mode 100644 index 23aa084..0000000 Binary files a/media/atree/node_1.png and /dev/null differ diff --git a/media/atree/node_1_blocked.png b/media/atree/node_1_blocked.png deleted file mode 100644 index 3bc9681..0000000 Binary files a/media/atree/node_1_blocked.png and /dev/null differ diff --git a/media/atree/node_1_selected.png b/media/atree/node_1_selected.png deleted file mode 100644 index 405da77..0000000 Binary files a/media/atree/node_1_selected.png and /dev/null differ diff --git a/media/atree/node_2.png b/media/atree/node_2.png deleted file mode 100644 index 9e525ec..0000000 Binary files a/media/atree/node_2.png and /dev/null differ diff --git a/media/atree/node_2_blocked.png b/media/atree/node_2_blocked.png deleted file mode 100644 index ca9586e..0000000 Binary files a/media/atree/node_2_blocked.png and /dev/null differ diff --git a/media/atree/node_2_selected.png b/media/atree/node_2_selected.png deleted file mode 100644 index 9a01757..0000000 Binary files a/media/atree/node_2_selected.png and /dev/null differ diff --git a/media/atree/node_3.png b/media/atree/node_3.png deleted file mode 100644 index 71f7c67..0000000 Binary files a/media/atree/node_3.png and /dev/null differ diff --git a/media/atree/node_3_blocked.png b/media/atree/node_3_blocked.png deleted file mode 100644 index 544241d..0000000 Binary files a/media/atree/node_3_blocked.png and /dev/null differ diff --git a/media/atree/node_3_selected.png b/media/atree/node_3_selected.png deleted file mode 100644 index 5eafce3..0000000 Binary files a/media/atree/node_3_selected.png and /dev/null differ diff --git a/media/atree/node_archer.png b/media/atree/node_archer.png deleted file mode 100644 index 5f00770..0000000 Binary files a/media/atree/node_archer.png and /dev/null differ diff --git a/media/atree/node_archer_blocked.png b/media/atree/node_archer_blocked.png deleted file mode 100644 index 30651d6..0000000 Binary files a/media/atree/node_archer_blocked.png and /dev/null differ diff --git a/media/atree/node_archer_selected.png b/media/atree/node_archer_selected.png deleted file mode 100644 index e48bb68..0000000 Binary files a/media/atree/node_archer_selected.png and /dev/null differ diff --git a/media/atree/node_assassin.png b/media/atree/node_assassin.png deleted file mode 100644 index 62ffcd4..0000000 Binary files a/media/atree/node_assassin.png and /dev/null differ diff --git a/media/atree/node_assassin_blocked.png b/media/atree/node_assassin_blocked.png deleted file mode 100644 index b9dc9a9..0000000 Binary files a/media/atree/node_assassin_blocked.png and /dev/null differ diff --git a/media/atree/node_assassin_selected.png b/media/atree/node_assassin_selected.png deleted file mode 100644 index 7d88a0f..0000000 Binary files a/media/atree/node_assassin_selected.png and /dev/null differ diff --git a/media/atree/node_mage.png b/media/atree/node_mage.png deleted file mode 100644 index 4086888..0000000 Binary files a/media/atree/node_mage.png and /dev/null differ diff --git a/media/atree/node_mage_blocked.png b/media/atree/node_mage_blocked.png deleted file mode 100644 index 15d26fc..0000000 Binary files a/media/atree/node_mage_blocked.png and /dev/null differ diff --git a/media/atree/node_mage_selected.png b/media/atree/node_mage_selected.png deleted file mode 100644 index 783a4a2..0000000 Binary files a/media/atree/node_mage_selected.png and /dev/null differ diff --git a/media/atree/node_shaman.png b/media/atree/node_shaman.png deleted file mode 100644 index 4c88259..0000000 Binary files a/media/atree/node_shaman.png and /dev/null differ diff --git a/media/atree/node_shaman_blocked.png b/media/atree/node_shaman_blocked.png deleted file mode 100644 index 49ae366..0000000 Binary files a/media/atree/node_shaman_blocked.png and /dev/null differ diff --git a/media/atree/node_shaman_selected.png b/media/atree/node_shaman_selected.png deleted file mode 100644 index 172a199..0000000 Binary files a/media/atree/node_shaman_selected.png and /dev/null differ diff --git a/media/atree/node_warrior.png b/media/atree/node_warrior.png deleted file mode 100644 index 9961b55..0000000 Binary files a/media/atree/node_warrior.png and /dev/null differ diff --git a/media/atree/node_warrior_blocked.png b/media/atree/node_warrior_blocked.png deleted file mode 100644 index cd44a93..0000000 Binary files a/media/atree/node_warrior_blocked.png and /dev/null differ diff --git a/media/atree/node_warrior_selected.png b/media/atree/node_warrior_selected.png deleted file mode 100644 index e1db61a..0000000 Binary files a/media/atree/node_warrior_selected.png and /dev/null differ