From 92f4df365913e7cc1b6666075599010985c1c26d Mon Sep 17 00:00:00 2001 From: reschan Date: Sun, 26 Jun 2022 15:59:02 +0700 Subject: [PATCH] implement atree connector highlighting --- js/display_atree.js | 167 +++++++++++++++--- media/atree/connect_t.png | Bin 692 -> 962 bytes media/atree/highlight_c_2_a.png | Bin 0 -> 1099 bytes media/atree/highlight_c_2_l.png | Bin 0 -> 1107 bytes media/atree/highlight_c_3.png | Bin 0 -> 1090 bytes media/atree/highlight_t_2_a.png | Bin 0 -> 708 bytes media/atree/highlight_t_2_l.png | Bin 0 -> 666 bytes .../{highlight_t.png => highlight_t_3.png} | Bin 632 -> 654 bytes 8 files changed, 146 insertions(+), 21 deletions(-) create mode 100644 media/atree/highlight_c_2_a.png create mode 100644 media/atree/highlight_c_2_l.png create mode 100644 media/atree/highlight_c_3.png create mode 100644 media/atree/highlight_t_2_a.png create mode 100644 media/atree/highlight_t_2_l.png rename media/atree/{highlight_t.png => highlight_t_3.png} (96%) diff --git a/js/display_atree.js b/js/display_atree.js index e21ce61..c5130e2 100644 --- a/js/display_atree.js +++ b/js/display_atree.js @@ -1,5 +1,6 @@ let atree_map; let atree_connectors_map; +let atree_active_connections = []; 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 @@ -16,7 +17,7 @@ function construct_AT(elem, tree) { atree_map = new Map(); atree_connectors_map = new Map() for (let i of tree) { - atree_map.set(i.display_name, {display: i.display, parents: i.parents, connectors: []}); + atree_map.set(i.display_name, {display: i.display, parents: i.parents, connectors: new Map(), active: false}); } for (let i = 0; i < tree.length; i++) { @@ -54,9 +55,10 @@ function construct_AT(elem, tree) { } - let connector_list = []; // create connectors based on parent location for (let parent of node.parents) { + atree_map.get(node.display_name).connectors.set(parent, []); + let parent_node = atree_map.get(parent); let connect_elem = document.createElement("div"); @@ -65,8 +67,8 @@ function construct_AT(elem, tree) { for (let i = node.display.row - 1; i > parent_node.display.row; i--) { let connector = connect_elem.cloneNode(); connector.style.backgroundImage = "url('../media/atree/connect_line.png')"; - atree_map.get(node.display_name).connectors.push(i + "," + node.display.col); - atree_connectors_map.get(i + "," + node.display.col).push({connector: connector, type: "line"}); + atree_map.get(node.display_name).connectors.get(parent).push(i + "," + node.display.col); + atree_connectors_map.get(i + "," + node.display.col).push({connector: connector, type: "line", owner: [node.display_name, parent]}); resolve_connector(i + "," + node.display.col, node); } // connect horizontally @@ -76,8 +78,8 @@ function construct_AT(elem, tree) { let connector = connect_elem.cloneNode(); connector.style.backgroundImage = "url('../media/atree/connect_line.png')"; connector.classList.add("rotate-90"); - atree_map.get(node.display_name).connectors.push(parent_node.display.row + "," + i); - atree_connectors_map.get(parent_node.display.row + "," + i).push({connector: connector, type: "line"}); + atree_map.get(node.display_name).connectors.get(parent).push(parent_node.display.row + "," + i); + atree_connectors_map.get(parent_node.display.row + "," + i).push({connector: connector, type: "line", owner: [node.display_name, parent]}); resolve_connector(parent_node.display.row + "," + i, node); } @@ -86,8 +88,8 @@ function construct_AT(elem, tree) { if (parent_node.display.row != node.display.row && parent_node.display.col != node.display.col) { let connector = connect_elem.cloneNode(); connector.style.backgroundImage = "url('../media/atree/connect_angle.png')"; - atree_map.get(node.display_name).connectors.push(parent_node.display.row + "," + node.display.col); - atree_connectors_map.get(parent_node.display.row + "," + node.display.col).push({connector: connector, type: "angle"}); + atree_map.get(node.display_name).connectors.get(parent).push(parent_node.display.row + "," + node.display.col); + atree_connectors_map.get(parent_node.display.row + "," + node.display.col).push({connector: connector, type: "angle", owner: [node.display_name, parent]}); if (parent_node.display.col > node.display.col) { connector.classList.add("rotate-180"); } @@ -99,12 +101,13 @@ function construct_AT(elem, tree) { } // create node - let node_elem = document.createElement('div') + let node_elem = document.createElement('div'); let icon = node.display.icon; if (icon === undefined) { icon = "node"; } node_elem.style = "background-image: url('../media/atree/"+icon+".png'); background-size: cover; width: 100%; height: 100%;"; + node_elem.classList.add("atree-circle"); // add tooltip node_elem.addEventListener('mouseover', function(e) { @@ -158,13 +161,13 @@ function construct_AT(elem, tree) { if (tooltip.style.display == "block") { tooltip.style.display = "none"; this.classList.remove("atree-selected"); - this.style.backgroundImage = 'url("../media/atree/node.png")'; } else { tooltip.style.display = "block"; this.classList.add("atree-selected"); - this.style.backgroundImage = 'url("../media/atree/node-selected.png")'; } + atree_toggle_state(node); + atree_update_connector(node); }); document.getElementById("atree-row-" + node.display.row).children[node.display.col].appendChild(node_elem); }; @@ -179,29 +182,33 @@ function resolve_connector(pos, node) { let line = false; let angle = false; let t = false; + let owners = []; for (let i of atree_connectors_map.get(pos)) { if (i.type == "line") { - line += true; + line = true; } else if (i.type == "angle") { - angle += true; + angle = true; } else if (i.type == "t") { - t += true; + t = true; } + owners = owners.concat(i.owner); } + owners = [...new Set(owners)] + let connect_elem = document.createElement("div"); if ((line && angle)) { - connect_elem.style = "background-image: url('../media/atree/connect_t.png'); background-size: cover; width: 100%; height: 100%;" - connect_elem.classList.add("rotate-180") - atree_connectors_map.set(pos, [{connector: connect_elem, type: "t"}]) + connect_elem.style = "background-image: url('../media/atree/connect_t.png'); background-size: cover; width: 100%; height: 100%;"; + atree_connectors_map.set(pos, [{connector: connect_elem, type: "t", owner: owners, connector_state: {up: 0, left: 0, right: 0, down: 0}}]); } if (node.parents.length == 3 && t && atree_same_row(node)) { - connect_elem.style = "background-image: url('../media/atree/connect_c.png'); background-size: cover; width: 100%; height: 100%;" - atree_connectors_map.set(pos, [{connector: connect_elem, type: "c"}]) + connect_elem.style = "background-image: url('../media/atree/connect_c.png'); background-size: cover; width: 100%; height: 100%;"; + atree_connectors_map.set(pos, [{connector: connect_elem, type: "c", owner: owners, connector_state: {up: 0, left: 0, right: 0, down: 0}}]); } // override the conflict with the first children - atree_connectors_map.set(pos, [atree_connectors_map.get(pos)[0]]) + atree_connectors_map.set(pos, [atree_connectors_map.get(pos)[0]]); + atree_connectors_map.get(pos)[0].owner = owners; } // check if a node doesn't have same row w/ its parents (used to solve conflict) @@ -216,7 +223,125 @@ function atree_same_row(node) { function atree_render_connection() { for (let i of atree_connectors_map.keys()) { if (atree_connectors_map.get(i).length != 0) { - document.getElementById("atree-row-" + i.split(",")[0]).children[i.split(",")[1]].appendChild(atree_connectors_map.get(i)[0].connector) + document.getElementById("atree-row-" + i.split(",")[0]).children[i.split(",")[1]].appendChild(atree_connectors_map.get(i)[0].connector); } } } + +function atree_toggle_state(node) { + if (atree_map.get(node.display_name).active) { + atree_map.get(node.display_name).active = false; + } else { + atree_map.get(node.display_name).active = true; + } +} + +function atree_update_connector() { + atree_map.forEach((v) => { + if (v.active) { + atree_compute_highlight(v); + } + }); +} + +function atree_compute_highlight(node) { + node.connectors.forEach((v, k) => { + console.log(node.active); + if (node.active && atree_map.get(k).active) { + for (let i of v) { + connector_data = atree_connectors_map.get(i)[0]; + if (connector_data.type == "c" || connector_data.type == "t") { + connector_data.connector_state = atree_get_state(i); + let connector_img = atree_parse_connector(connector_data.connector_state, connector_data.type) + connector_data.connector.className = ""; + connector_data.connector.classList.add("rotate-" + connector_img.rotate); + connector_data.connector.style.backgroundImage = "url('../media/atree/highlight_" + connector_data.type + connector_img.attrib + ".png')"; + } else { + connector_data.connector.style.backgroundImage = "url('../media/atree/highlight_" + connector_data.type + ".png')"; + } + } + } else { + for (let i of v) { + connector_data = atree_connectors_map.get(i)[0]; + if (connector_data.type == "c" || connector_data.type == "t") { + connector_data.connector_state = atree_get_state(i); + let connector_img = atree_parse_connector(connector_data.connector_state, connector_data.type) + if (!connector_img) { + connector_data.connector.className = ""; + connector_data.connector.style.backgroundImage = "url('../media/atree/connect_" + connector_data.type + ".png')"; + } else { + connector_data.connector.className = ""; + connector_data.connector.classList.add("rotate-" + connector_img.rotate); + connector_data.connector.style.backgroundImage = "url('../media/atree/highlight_" + connector_data.type + connector_img.attrib + ".png')"; + }; + } else { + connector_data.connector.style.backgroundImage = "url('../media/atree/connect_" + connector_data.type + ".png')"; + } + } + } + }); +} + +function atree_get_state(connector) { + let connector_state = {left: 0, right: 0, up: 0, down: 0} + + for (let abil_name of atree_connectors_map.get(connector)[0].owner) { + state = atree_map.get(abil_name).active; + if (atree_map.get(abil_name).display.col > parseInt(connector.split(",")[1])) { + if (state) { + connector_state.right = 1; + } else { + connector_state.right = 0; + } + } + if (atree_map.get(abil_name).display.col < parseInt(connector.split(",")[1])) { + if (state) { + connector_state.left = 1; + } else { + connector_state.left = 0; + } + } + if (atree_map.get(abil_name).display.row < parseInt(connector.split(",")[0])) { + if (state) { + connector_state.up = 1; + } else { + connector_state.up = 0; + } + } + if (atree_map.get(abil_name).display.row > parseInt(connector.split(",")[0])) { + if (state) { + connector_state.down = 1; + } else { + connector_state.down = 0; + } + } + } + return connector_state; +} + +function atree_parse_connector(orient, type) { + // left, right, up, down + // todo + let connector_dict = { + "1100": {attrib: "_2_l", rotate: 0}, + "1010": {attrib: "_2_a", rotate: 0}, + "1001": {attrib: "_2_a", rotate: 270}, + "0110": {attrib: "_2_a", rotate: 90}, + "0101": {attrib: "_2_a", rotate: 180}, + "0011": {attrib: "_2_l", rotate: 90}, + "1110": {attrib: "_3", rotate: 0}, + "1101": {attrib: "_3", rotate: 180}, + "1011": {attrib: "_3", rotate: 270}, + "0111": {attrib: "_3", rotate: 90}, + "1111": {attrib: "", rotate: 0} + } + + console.log(orient); + + let res = "" + for (let i in orient) { + res += orient[i]; + } + + return connector_dict[res]; +} diff --git a/media/atree/connect_t.png b/media/atree/connect_t.png index 8ed976eb9f0d5d3c8d87891a0c058fa5598b8603..9acedd6f7eeff3efc12c7e1987097b695f6c75a2 100644 GIT binary patch literal 962 zcmeAS@N?(olHy`uVBq!ia0y~yU<5K5893O0R7}x|G!U;i$lZxy-8q?;Kn_c~qpu?a z!^VE@KZ&eBK4*bPWHAE+-(e7DJf6QIg@J)7&(p;*q$2L^4MVQO1_BI@n*aZAUX)O- zcPZ)(4@Z3d#tvzqPWpg9hTkKvb6lx;r!SzwAfN_DX4lKkJM@S%v~bcGovpoQS~P3x zy^pV-{fSlfd&0_)$OJ>%%%4}}{E6GgQnH=z0kQ;K#VCV_5Qt2!VO$l@r@XJq(*=~G hJYD@<);T3K(K>4BZhlJab^A0)(Qk)X*rp+S6aZ>!tVRF; literal 692 zcmeAS@N?(olHy`uVBq!ia0y~yU<5K5893O0R7}x|G!U;i$lZxy-8q?;3=B+po-U3d z6?5L+Fyv!0$Te-*MEOd-G7;z z;W-CG3+E^zJp^pi)8@xD?SB$`w}G4C5DN@lyLUUC*JUSzf)9;R&e=0|dszzFkSqr# d3HpEsi^UU5cvNTD9S{Lo=;`X`vd$@?2>@Frgo6M8 diff --git a/media/atree/highlight_c_2_a.png b/media/atree/highlight_c_2_a.png new file mode 100644 index 0000000000000000000000000000000000000000..c7d3f899961ec602c87d61fb8ac2452c2d1febab GIT binary patch literal 1099 zcmeAS@N?(olHy`uVBq!ia0y~yU<5K58911MRQ8&P5Fn=|)7d$|)7e=epeR2rGbfdS zLF4??iMAex14LT=gSRS)vRZdoq^!`35)dt%q9JzBDN}pPtAtON>@zM+ShB-{YaJ_l zz1V6#y>q*)c5pR4;O|&GdGey}DHZWS8G>3r9(=MpSN*);er-d5w&B@VGZ;+nnh6Jb z`lN>)J)phof&J!tJ5H%WD+h zZah`ly*X^v2DkZtS`V(-H|dGhRf9zlPCSJj0RfJJsy8|=tec#q==eNH`u~L2{gb^F z!v%X}xHX)c-~2lG|H1d1wRf&8nJzM=;hgyKpAw8ryB+qvvbcY|FW8>(&-nvW?|qq` zec+Ay%d5-8?3jLSYwUi#Y}p&e>DC7xOjew|N&Dx@mKeSY`^EXE7?`&^oS$XB{g|bn ze1pi@te6j4F}J|V6^nn6kF|Ns9C z+S&|2l7V6U!aXa26kADEakt z5%>0%VV<&~fU9F>>fQgRvYGXl$<_)u?QJ_w(ZSfBW-uopv)r2_F;C zGzNy;N)9kxk}A+}&JoO9pvw@zM+ShB-{YaJ_l zz1V6#y>q*)c5pR4;O|&GdGey}DHZWS8G>3r9(=MpSN*);er-d5w&B@VGZ;+nnh6Jb z`lN>)J)phof&J!tJ5H%WD+h zZah`ly*X^v2DkZtS`V(-H|dGhRf9zlPCSJj0RfJJsy8|=tec#q==eNH`u~L2{gb^F z!v%X}xHX)c-~2lG|H1d1wRf&8nJzM=;hgyKpAw8ryB+qvvbcY|FW8>(&-nvW?|qq` zec+Ay%d5-8?3jLSYwUi#Y}p&e>DC7xOjew|N&Dx@mKeSY`^EXE7?`&^oS$XB{g|bn ze1pi@te6j4F}J|V6^nn6kF|Ns9C z+S&|2l7V6U!aXa26kAD(9hXXgvC+%!{7Bh9K)xq36hmS!;1AzTik+*Xohfh@$XU7w)J(VTXJDd)HD zf&IK7Js14LZI|yYf4cB{oz<(4g_R7qvY9W$NjH4E#jxc%+k(Aj3~#qGW~}FRsLsVF z^(!dliu@m!wAt&A0Bvok`(^*TnW5I$=Ed*(b=-9KATUJ840{8XioJG>XHrZWSD9Fd zfkM{P)z4*}Q$o`-1rQGyx9(ti0Wj!I;BkuxdP`W`3NkP_H(Y-$3^Hpo_kI(QE|^&W D_;rF+ literal 0 HcmV?d00001 diff --git a/media/atree/highlight_c_3.png b/media/atree/highlight_c_3.png new file mode 100644 index 0000000000000000000000000000000000000000..546bd342fc7fff98613ba6a8ef8a45850c867973 GIT binary patch literal 1090 zcmeAS@N?(olHy`uVBq!ia0y~yU<5K58911MRQ8&P5Fn=|)7d$|)7e=epeR2rGbfdS zLF4??iMAex14LT=gSRS)vRZdoq^!`35)dt%q9JzBDN}pPtAtON>@zM+ShB-{YaJ_l zz1V6#y>q*)c5pR4;O|&GdGey}DHZWS8G>3r9(=MpSN*);er-d5w&B@VGZ;+nnh6Jb z`lN>)J)phof&J!tJ5H%WD+h zZah`ly*X^v2DkZtS`V(-H|dGhRf9zlPCSJj0RfJJsy8|=tec#q==eNH`u~L2{gb^F z!v%X}xHX)c-~2lG|H1d1wRf&8nJzM=;hgyKpAw8ryB+qvvbcY|FW8>(&-nvW?|qq` zec+Ay%d5-8?3jLSYwUi#Y}p&e>DC7xOjew|N&Dx@mKeSY`^EXE7?`&^oS$XB{g|bn ze1pi@te6j4F}J|V6^nn6kF|Ns9C z+S&|2l7V6U!aXa26kADEakt z5%>0%VP3SO2#ez-llS$h-VVpLU74Gs=lUFC{iyY?|NENb;pg|;fBW+<)}M_rgB_GM z7#h~uuz+ZWDkBaDYYs58sAqI@0?(*-^zuvly*MERE#frc^x zu+WQB&JgA5%?w+b!Ays6If!ywNtOk&5W9ALf+|0$!0=W9tn9+nc8GE`ryUSWxSh{v zXT|`u&A~qQ>zr?|PC2iyvwC&$ew=i}w_6NbuCp!JYsT<)D`UobUWe*jhFjUp7w}8% z6OsJ->vQsJ|CDXEyFXoMuUEYWwEfHF^Ka}~Ud(>zc>n*m=mvUw6y$sI;-EqC!0*5O zcP|D0HD_(^1)1aN>gTe~DWR!h8#HpQfRS4a3G38$lZxy-8q?;Kn_c~qpu?a z!^VE@KZ&eBzEFTqh%1n0P*P&}|DQoy`#+FmV5qH00|~N~1o;I6MSxAr*0NZyEN9IEuI&jGeak|5V18H+ipxclSJBV!U=0 zSGC=~^S^%Fecr$S+t26awM7CA-xPqxF)&=vmS+Mp2D8`$u?O4gS%2g+gIs&TfBi3; zx2wbLzFhV1|MlX=_b;E#7-WCX+jS$9!RniB>BiLzC2y)>DleHU14w+4fIUC3EXPV;kv)GBbv^ISjXMGHlt* sn32wW;T+q7xx5b6gGZv5xu*U38$lZxy-8q?;Kn_c~qpu?a z!^VE@KZ&eBzEFTqh%1n0P*VE;|38DaHUp4kU|7F!&q^T0RubeF3={{7ZQj3RKTw3T zz$3Dlfr0N32s4Umcr^emxaaBO7*Y}U_LgCujH3XHW6+hq|4%nHY;oUoYo*8XInonk zztz^XZNXe#2W#nuGBbv^ISjXMGHlt*n2|n+BqnY9E%*NQ_X;xH_ABVgiuv*X z-z=XmcXhf`cy0O9#jopMnlZ%wLJSusH#2Nuhe)rhVF8O(6$vzaQvfqBOzj8L z4*q;h7vvz)yFLkm#a^6rWVqD~kq)zopr5}FtqZmynpUjEge!uU(3+iZ{}K?(pEYu?EK literal 0 HcmV?d00001 diff --git a/media/atree/highlight_t.png b/media/atree/highlight_t_3.png similarity index 96% rename from media/atree/highlight_t.png rename to media/atree/highlight_t_3.png index 7629abf158e6fb5e152a4eeed06327a39f7d5be3..a8d7e9235070347ed350265943aca9e72ab81bcb 100644 GIT binary patch delta 30 hcmeyt(#N`?f=Mj9FVdQ&MBb@gaNn83!VS~ delta 7 OcmeBU{lT)Kf(ZZ%@dCO4