diff --git a/html/images/space.svg b/html/images/space.svg
index 1f9a47c..16a619e 100644
--- a/html/images/space.svg
+++ b/html/images/space.svg
@@ -37,27 +37,31 @@
font-family: courier;
}
- #lines {
+ #triangles {
opacity: 0.5;
}
- #lines line {
+ #triangles line {
stroke: limegreen;
stroke-width: 0.5px;
}
- #lines polygon {
+ #triangles polygon {
fill-opacity: 0.2;
stroke-width: 0.5px;
fill: none;
stroke: none;
}
- #lines polygon.clockwise-orientation {
+ #triangles polygon.clockwise-orientation {
fill: white;
stroke: red;
}
+ #lines line {
+ stroke: gold;
+ }
+
#legs {
display: none;
}
@@ -79,6 +83,8 @@
+
+
@@ -145,8 +151,23 @@
return [+x, +y];
});
- const triangleContainer = document.querySelector('#lines');
+ const triangleContainer = document.querySelector('#triangles');
+ const lineContainer = document.querySelector('#lines');
const trianglePts = points.map((pt, i) => [pt, points[(i + 1) % points.length]]);
+ const lpts = wall.getAttribute('points').split(' ');
+ const edges = lpts.map((pt, i) => [pt.split(','), lpts[(i + 1) % lpts.length].split(',')]);
+ // console.log(edges);
+
+ edges.forEach(([[x1, y1], [x2, y2]]) => {
+ const el = document.createElementNS(namespaceURIsvg, 'line');
+ // const attr = `${x1},${y1} ${x2},${y2} ${positionX},${positionY}`
+ // const attr = `${x1},${y1} ${x2},${y2} ${positionX},${positionY}`
+ el.setAttribute('x1', x1);
+ el.setAttribute('y1', y1);
+ el.setAttribute('x2', x2);
+ el.setAttribute('y2', y2);
+ lineContainer.appendChild(el)
+ });
function drawTriangles(container, pts, [positionX, positionY]) {
pts.forEach(([[x1, y1], [x2, y2]]) => {
@@ -376,6 +397,8 @@
// updateLines(position);
const visibleTriangles = updateTriangles(position);
+ // console.log(visibleTriangles);
+
// info.innerText = [...visibleTriangles].map(t => {
// const [[ax, ay], [bx, by], [shipx, shipy]] =
// t.getAttribute('points').split(' ').map(n => n.split(',').map(n => +n));