Remove viewed edges

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]]) => {
+      edges.forEach(e => {
-      const el = document.createElementNS(namespaceURIsvg, 'line');
+        const [x, y] = e.split(' ');
-      // const attr = `${x1},${y1} ${x2},${y2} ${positionX},${positionY}`
+        const [x1, y1] = x.split(',');
-      // const attr = `${x1},${y1} ${x2},${y2} ${positionX},${positionY}`
+        const [x2, y2] = y.split(',');
-      el.setAttribute('x1', x1);
+        const el = document.createElementNS(namespaceURIsvg, 'line');
-      el.setAttribute('y1', y1);
+        // const attr = `${x1},${y1} ${x2},${y2} ${positionX},${positionY}`
-      el.setAttribute('x2', x2);
+        // const attr = `${x1},${y1} ${x2},${y2} ${positionX},${positionY}`
-      el.setAttribute('y2', y2);
+        el.setAttribute('x1', x1);
-      lineContainer.appendChild(el)
+        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));