Refactor map struct

html/images/space.svg

@@ -258,45 +258,42 @@ const acclIndic = document.querySelector('#acceleration-indicator');
 const bulletPt = svg.createSVGPoint();
 const cornerPt = svg.createSVGPoint();
 
-const allWallCorners = [...wallElements].map(wall => {
-  const cs = wall.getAttribute('points').split(' ').map(coords => {
-    const [x, y] = coords.split(',');
-    return [+x, +y];
-  });
+const map = (function(els) {
+  let corners, edges;
 
-  return wall.classList.contains("inverse") ? cs.reverse() : cs;
-});
+  return {
+    walls: [...els].map(node => {
+      const corners = node.getAttribute('points').split(' ').map(coords => {
+        const [x, y] = coords.split(',');
+        const pt = svg.createSVGPoint();
+        pt.x = +x;
+        pt.y = +y;
+        return pt;
+      });
 
-const mapWalls = [...wallElements].map(node => {
-  const corners = node.getAttribute('points').split(' ').map(coords => {
-    const [x, y] = coords.split(',');
-    const pt = svg.createSVGPoint();
-    pt.x = +x;
-    pt.y = +y;
-    return pt;
-  });
+      const edges = corners.map(({ x: xa, y: ya }, i, arr) => {
+        const { x: xb, y: yb } = arr[(i + 1) % arr.length];
+        return { xa: xa, ya: ya, xb: xb, yb: yb };
+      });
 
-  const edges = corners.map(({ x: xa, y: ya }, i, arr) => {
-    const { x: xb, y: yb } = arr[(i + 1) % arr.length];
-    return { xa: xa, ya: ya, xb: xb, yb: yb };
-  });
+      return { node, corners, edges };
+    }),
 
-  return { node, corners, edges };
-});
+    get corners() {
+      if (corners) return corners;
 
-const mapCorners = mapWalls.reduce(
-  (acc, wall) => [...acc, ...wall.corners.map(c => ({ corner: c, wall: wall }))],
-  []
-);
+      return this.walls.reduce((acc, wall) =>
+        [...acc, ...wall.corners.map(c => ({ corner: c, wall: wall }))], []);
+    },
 
-const mapEdges = mapWalls.reduce(
-  (acc, wall) => [...acc, ...wall.edges.map(e => ({ edge: e, wall: wall }))],
-  []
-);
+    get edges() {
+      if (edges) return edges;
 
-console.log("walls on map", mapWalls);
-console.log("corners on map", mapCorners);
-console.log("edges on map", mapEdges);
+      return this.walls.reduce((acc, wall) =>
+        [...acc, ...wall.edges.map(e => ({ edge: e, wall: wall }))], []);
+    }
+  };
+})(wallElements);
 
 let allStartingEdges;
 init();
@@ -305,27 +302,6 @@ function distance(x1, y1, x2, y2) {
   return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
 }
 
-function drawAllEdges(walls) {
-  walls.forEach(edges => drawEdges(edges));
-}
-
-function drawEdges(pts) {
-  let edges = pts.map(e => e.join(' '));
-
-  edges.forEach(e => {
-    const [x, y] = e.split(' ');
-    const [x1, y1] = x.split(',');
-    const [x2, y2] = y.split(',');
-    const el = document.createElementNS(namespaceURIsvg, 'line');
-
-    el.setAttribute('x1', x1);
-    el.setAttribute('y1', y1);
-    el.setAttribute('x2', x2);
-    el.setAttribute('y2', y2);
-    edgeContainer.appendChild(el)
-  });
-}
-
 function drawTriangles(container, walls, [positionX, positionY]) {
   walls.forEach(pts =>
     pts.forEach(([[x1, y1], [x2, y2]]) => {
@@ -566,7 +542,8 @@ function slope({ xa, ya, xb, yb }) {
 
 function isLandable(edge) {
   // console.log("edge", edge, "slope", slope(edge));
-  return Object.is(slope(edge), +0);
+  return edge.xa < edge.xb && edge.ya === edge.yb;
+  // return Object.is(slope(edge), +0);
 }
 
 function detectEdgeCollision([xc, yc], [x, y], radius) {
@@ -594,15 +571,15 @@ function detectEdgeCollision([xc, yc], [x, y], radius) {
     const roundedT = +t.toFixed(2);
     const roundedS = +s.toFixed(2);
 
-    if (roundedS >= 0 && roundedS <= 1 && roundedT >= 0 && roundedT <= 1) {
-      const xs = (x1 + s * (x2 - x1));
-      const ys = (y1 + s * (y2 - y1));
-      const xt = (x3 + t * (x4 - x3));
-      const yt = (y3 + t * (y4 - y3));
-      const collisionPt = [xs, ys];
-      // [xs, ys] === [xt, yt];
-      drawCircle(...collisionPt, "red"); // collision position
-    }
+    // if (roundedS >= 0 && roundedS <= 1 && roundedT >= 0 && roundedT <= 1) {
+    //   const xs = (x1 + s * (x2 - x1));
+    //   const ys = (y1 + s * (y2 - y1));
+    //   const xt = (x3 + t * (x4 - x3));
+    //   const yt = (y3 + t * (y4 - y3));
+    //   const collisionPt = [xs, ys];
+    //   // [xs, ys] === [xt, yt];
+    //   drawCircle(...collisionPt, "red"); // collision position
+    // }
 
     return roundedS >= 0 && roundedS <= 1 && roundedT >= 0 && roundedT <= 1;
   };
@@ -647,7 +624,7 @@ function detectCornerCollision([xc, yc], [x, y], radius) {
   };
 }
 
-function detectCollision(currentPos, intendedPos, velocity, radius, edges, corners) {
+function detectCollision(currentPos, intendedPos, velocity, radius, { edges, corners }) {
   const { x: xc, y: yc } = intendedPos;
   const [x, y] = currentPos;
   // edges oriented clockwise with ship
@@ -763,7 +740,7 @@ function updateShip(s, elapsed) {
   const p = { x: pDelta.x + px, y: pDelta.y + py };
   current = s.collision;
 
-  s.collision = detectCollision([px, py], p, s.velocity, shipRadius, mapEdges, mapCorners);
+  s.collision = detectCollision([px, py], p, s.velocity, shipRadius, map);
   if (s.collision) console.log("COLLISION", s.collision);
 
   legs.style.display = s.gearDown ? "initial" : "none";