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));