diff --git a/html/images/space.svg b/html/images/space.svg
index 16a619e..a863e41 100644
--- a/html/images/space.svg
+++ b/html/images/space.svg
@@ -154,20 +154,30 @@
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(',')]);
+
+
+ function drawEdges() {
+ const lpts = wall.getAttribute('points').split(' ');
+ let edges = lpts.map((pt, i) => [pt, lpts[(i + 1) % lpts.length]]).map(e => e.join(' '));
// 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)
- });
+ edges.forEach(e => {
+ const [x, y] = e.split(' ');
+ const [x1, y1] = x.split(',');
+ const [x2, y2] = y.split(',');
+ 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)
+ });
+ }
+ // const edges = lpts.map((pt, i) => [pt.split(','), lpts[(i + 1) % lpts.length].split(',')]);
+
+ drawEdges();
function drawTriangles(container, pts, [positionX, positionY]) {
pts.forEach(([[x1, y1], [x2, y2]]) => {
@@ -391,14 +401,38 @@
let [x, y] = getTranslate(hitbox);
let position = [positionX, positionY] = restart ? [0, 0] : wrapPos(changeX + x, changeY + y);
- if (restart) restart = false;
+
updateBullets(elapsed);
- // updateLines(position);
+
const visibleTriangles = updateTriangles(position);
+ const visibleTrianglePoints = [...visibleTriangles].map(p => p.getAttribute("points"));
+ const mappedEdges = visibleTrianglePoints.map(vt => {
+ vt = vt.split(' ');
+ vt.pop();
+ return vt.join(' ');
+ });
- // console.log(visibleTriangles);
+ [...lineContainer.children].forEach(l => {
+ const x1 = l.getAttribute('x1');
+ const y1 = l.getAttribute('y1');
+ const x2 = l.getAttribute('x2');
+ const y2 = l.getAttribute('y2');
+ const str = `${x1},${y1} ${x2},${y2}`;
+ if (mappedEdges.includes(str)) {
+ l.remove();
+ }
+ });
+ if (restart) {
+ restart = false;
+ [...lineContainer.children].forEach(c => c.remove());;
+ drawEdges();
+ }
+
+ // edges = [...edges.filter(e => !mappedEdges.includes(e))]
+
+ // console.log(edges)
// info.innerText = [...visibleTriangles].map(t => {
// const [[ax, ay], [bx, by], [shipx, shipy]] =
// t.getAttribute('points').split(' ').map(n => n.split(',').map(n => +n));