connections no longer work by rotating
since rotations had issues with the pixel art
99
js/atree.js
|
@ -888,32 +888,10 @@ function resolve_connector(atree_connectors_map, pos, new_connector) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function set_connector_type(connector_info) { // left right up down
|
function set_connector_type(connector_info) { // left right up down
|
||||||
const connections = connector_info.connections;
|
connector_info.type = "";
|
||||||
const connector_elem = connector_info.connector;
|
for (let i = 0; i < 4; i++) {
|
||||||
if (connections[2]) {
|
connector_info.type += connector_info.connections[i] == 0 ? "0" : "1";
|
||||||
if (connections[0]) {
|
|
||||||
connector_info.type = 'c'; // cross
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
connector_info.type = 'line'; // vert line
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (connections[3]) { // if down:
|
|
||||||
if (connections[0] && connections[1]) {
|
|
||||||
connector_info.type = 't'; // all 3 t
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
connector_info.type = 'angle'; // elbow
|
|
||||||
if (connections[1]) {
|
|
||||||
connector_elem.classList.add("rotate-180");
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
connector_elem.classList.add("rotate-270");
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
connector_info.type = 'line'; // horiz line
|
|
||||||
connector_elem.classList.add("rotate-90");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// draw the connector onto the screen
|
// draw the connector onto the screen
|
||||||
|
@ -991,8 +969,13 @@ function atree_set_edge(atree_connectors_map, parent, child, state) {
|
||||||
let connector_img_elem = document.createElement("img");
|
let connector_img_elem = document.createElement("img");
|
||||||
connector_img_elem.style = "width: 100%; height: 100%;";
|
connector_img_elem.style = "width: 100%; height: 100%;";
|
||||||
const ctype = connector_info.type;
|
const ctype = connector_info.type;
|
||||||
if (ctype === 't' || ctype === 'c') {
|
let num_1s = 0;
|
||||||
// c, t
|
for (let i = 0; i < 4; i++) {
|
||||||
|
if (ctype.charAt(i) == "1") {
|
||||||
|
num_1s++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (num_1s > 2) { // t branch or 4-way
|
||||||
const [connector_row, connector_col] = connector_label.split(',').map(x => parseInt(x));
|
const [connector_row, connector_col] = connector_label.split(',').map(x => parseInt(x));
|
||||||
|
|
||||||
if (connector_row === parent_row) {
|
if (connector_row === parent_row) {
|
||||||
|
@ -1008,67 +991,31 @@ function atree_set_edge(atree_connectors_map, parent, child, state) {
|
||||||
highlight_state[child_side_idx] += state_delta;
|
highlight_state[child_side_idx] += state_delta;
|
||||||
}
|
}
|
||||||
|
|
||||||
let render_state = highlight_state.map(x => (x > 0 ? 1 : 0));
|
// let render_state = highlight_state.map(x => (x > 0 ? 1 : 0));
|
||||||
|
|
||||||
let connector_img = atree_parse_connector(render_state, ctype);
|
// let connector_img = atree_parse_connector(render_state, ctype);
|
||||||
connector_img_elem.src = connector_img.img
|
// connector_img_elem.src = connector_img.img
|
||||||
connector_elem.className = "";
|
// connector_elem.className = "";
|
||||||
connector_elem.classList.add("rotate-" + connector_img.rotate);
|
// connector_elem.classList.add("rotate-" + connector_img.rotate);
|
||||||
|
let render = "";
|
||||||
|
for (let i = 0; i < 4; i++) {
|
||||||
|
render += highlight_state[i] === 0 ? "0" : "1";
|
||||||
|
}
|
||||||
|
connector_img_elem.src = "../media/atree/connect_" + ctype + "_" + render + ".png"
|
||||||
connector_elem.replaceChildren(connector_img_elem);
|
connector_elem.replaceChildren(connector_img_elem);
|
||||||
|
console.log(connector_img_elem.src)
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
// lol bad overloading, [0] is just the whole state
|
// lol bad overloading, [0] is just the whole state
|
||||||
highlight_state[0] += state_delta;
|
highlight_state[0] += state_delta;
|
||||||
if (highlight_state[0] > 0) {
|
if (highlight_state[0] > 0) {
|
||||||
connector_img_elem.src = '../media/atree/highlight_'+ctype+'.png';
|
connector_img_elem.src = '../media/atree/connect_' + ctype + '_1.png';
|
||||||
connector_elem.replaceChildren(connector_img_elem);
|
connector_elem.replaceChildren(connector_img_elem);
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
connector_img_elem.src = '../media/atree/connect_'+ctype+'.png';
|
connector_img_elem.src = '../media/atree/connect_'+ctype+'.png';
|
||||||
connector_elem.replaceChildren(connector_img_elem);
|
connector_elem.replaceChildren(connector_img_elem);
|
||||||
}
|
}
|
||||||
|
console.log(connector_img_elem.src)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// parse a sequence of left, right, up, down to appropriate connector image
|
|
||||||
function atree_parse_connector(orient, type) {
|
|
||||||
// left, right, up, down
|
|
||||||
|
|
||||||
let c_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}
|
|
||||||
};
|
|
||||||
|
|
||||||
let t_connector_dict = {
|
|
||||||
"1100": {attrib: "_2_l", rotate: 0},
|
|
||||||
"1001": {attrib: "_2_a", rotate: "flip"},
|
|
||||||
"0101": {attrib: "_2_a", rotate: 0},
|
|
||||||
"1101": {attrib: "_3", rotate: 0}
|
|
||||||
};
|
|
||||||
|
|
||||||
let res = "";
|
|
||||||
for (let i of orient) {
|
|
||||||
res += i;
|
|
||||||
}
|
|
||||||
if (res === "0000") {
|
|
||||||
return {img: "../media/atree/connect_" + type + ".png", rotate: 0};
|
|
||||||
}
|
|
||||||
|
|
||||||
let ret;
|
|
||||||
if (type == "c") {
|
|
||||||
ret = c_connector_dict[res];
|
|
||||||
} else {
|
|
||||||
ret = t_connector_dict[res];
|
|
||||||
};
|
|
||||||
ret.img = "../media/atree/highlight_" + type + ret.attrib + ".png";
|
|
||||||
return ret;
|
|
||||||
};
|
|
||||||
|
|
Before Width: | Height: | Size: 182 B After Width: | Height: | Size: 182 B |
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 5.4 KiB |
BIN
media/atree/connect_0101.png
Normal file
After Width: | Height: | Size: 183 B |
BIN
media/atree/connect_0101_1.png
Normal file
After Width: | Height: | Size: 5.3 KiB |
BIN
media/atree/connect_0110.png
Normal file
After Width: | Height: | Size: 178 B |
BIN
media/atree/connect_0110_1.png
Normal file
After Width: | Height: | Size: 5.4 KiB |
BIN
media/atree/connect_0111.png
Normal file
After Width: | Height: | Size: 202 B |
BIN
media/atree/connect_0111_0011.png
Normal file
After Width: | Height: | Size: 5.6 KiB |
BIN
media/atree/connect_0111_0101.png
Normal file
After Width: | Height: | Size: 5.5 KiB |
BIN
media/atree/connect_0111_0110.png
Normal file
After Width: | Height: | Size: 5.6 KiB |
BIN
media/atree/connect_0111_0111.png
Normal file
After Width: | Height: | Size: 5.6 KiB |
BIN
media/atree/connect_1001.png
Normal file
After Width: | Height: | Size: 184 B |
BIN
media/atree/connect_1001_1.png
Normal file
After Width: | Height: | Size: 5.4 KiB |
Before Width: | Height: | Size: 177 B After Width: | Height: | Size: 177 B |
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.3 KiB |
BIN
media/atree/connect_1011.png
Normal file
After Width: | Height: | Size: 202 B |
BIN
media/atree/connect_1011_0011.png
Normal file
After Width: | Height: | Size: 5.6 KiB |
BIN
media/atree/connect_1011_1001.png
Normal file
After Width: | Height: | Size: 5.6 KiB |
BIN
media/atree/connect_1011_1010.png
Normal file
After Width: | Height: | Size: 5.5 KiB |
BIN
media/atree/connect_1011_1011.png
Normal file
After Width: | Height: | Size: 5.6 KiB |
BIN
media/atree/connect_1100.png
Normal file
After Width: | Height: | Size: 184 B |
BIN
media/atree/connect_1100_1.png
Normal file
After Width: | Height: | Size: 5.3 KiB |
Before Width: | Height: | Size: 205 B After Width: | Height: | Size: 205 B |
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 5.5 KiB |
BIN
media/atree/connect_1101_1001.png
Normal file
After Width: | Height: | Size: 5.6 KiB |
Before Width: | Height: | Size: 5.6 KiB After Width: | Height: | Size: 5.6 KiB |
Before Width: | Height: | Size: 5.6 KiB After Width: | Height: | Size: 5.6 KiB |
BIN
media/atree/connect_1110.png
Normal file
After Width: | Height: | Size: 203 B |
BIN
media/atree/connect_1110_0110.png
Normal file
After Width: | Height: | Size: 5.5 KiB |
BIN
media/atree/connect_1110_1010.png
Normal file
After Width: | Height: | Size: 5.5 KiB |
BIN
media/atree/connect_1110_1100.png
Normal file
After Width: | Height: | Size: 5.5 KiB |
BIN
media/atree/connect_1110_1110.png
Normal file
After Width: | Height: | Size: 5.5 KiB |
Before Width: | Height: | Size: 221 B After Width: | Height: | Size: 221 B |
BIN
media/atree/connect_1111_0011.png
Normal file
After Width: | Height: | Size: 5.8 KiB |
BIN
media/atree/connect_1111_0101.png
Normal file
After Width: | Height: | Size: 5.6 KiB |
BIN
media/atree/connect_1111_0110.png
Normal file
After Width: | Height: | Size: 5.7 KiB |
BIN
media/atree/connect_1111_0111.png
Normal file
After Width: | Height: | Size: 5.7 KiB |
BIN
media/atree/connect_1111_1001.png
Normal file
After Width: | Height: | Size: 5.7 KiB |
Before Width: | Height: | Size: 5.6 KiB After Width: | Height: | Size: 5.6 KiB |
BIN
media/atree/connect_1111_1011.png
Normal file
After Width: | Height: | Size: 5.8 KiB |
Before Width: | Height: | Size: 5.6 KiB After Width: | Height: | Size: 5.7 KiB |
BIN
media/atree/connect_1111_1101.png
Normal file
After Width: | Height: | Size: 5.7 KiB |
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 5.7 KiB |
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 5.7 KiB |