WIP: landing

html/images/space.svg

@@ -21,7 +21,7 @@
     }
 
     rect#bg {
-      fill: black;
+      fill: gray;
     }
 
     .ship circle {
@@ -69,7 +69,7 @@
 
   <rect id="bg" x="-200" y="-150" width="400" height="300"/>
   <!-- <polygon class="wall inverse" points="-180,-40 -170,-120 40,-130 170,-120 180,40 170,130 -40,130 -170,120" /> -->
-  <polygon class="wall inverse" points="-160,-40 -170,-120 40,-110 170,-120 160,40 170,130 -40,110 -170,120" />
+  <!-- <polygon class="wall inverse" points="-160,-40 -170,-120 40,-110 170,-120 160,40 170,130 -40,110 -170,120" /> -->
 
   <g class="ship">
     <line id="cannon" x1="0" y1="0" x2="0" y2="8" stroke="black"/>
@@ -80,7 +80,7 @@
     </g>
   </g>
 
-  <!-- <polygon class="wall" points="20,20 40,20 40,40 20,40" /> -->
+  <polygon class="wall" points="20,20 40,20 40,40 20,40" />
   <!-- <polygon class="wall" points="10,10 20,10 20,20 10,20" /> -->
   <!-- <polygon class="wall" points="20,-50 -50,-50 -60,-70 -50,-100 80,-100 80,-90 -20,-90 -20,-60 40,-60 40,40 20,40" /> -->
   <!-- <polygon class="wall" points="-10,-30 -10,-40 30,-50 60,-30 80,0 150,0 150,10 60,50 -10,40 -20,20 20,20 20,-20" /> -->
@@ -147,9 +147,9 @@
     let position; // meters
     let velocity; // meters per second
     let acceleration; // meters per second per second
+    let rotate = 0;
 
     let friction = 0;
-    let rotate = 0;
     let rotationSpeed = 0.25;
     let started = false;
     let restart = false;
@@ -181,10 +181,37 @@
       return wall.classList.contains("inverse") ? cs.reverse() : cs;
     });
 
+    const edgeszz = [...walls].map(wall => {
+      const es = wall.getAttribute('points').split(' ').map((coords, i, arr) => {
+        const [x, y] = coords.split(',');
+        // return [+x, +y];
+        // const [xb, yb] = arr[i]++;
+        const [xb, yb] = arr[(i + 1) % arr.length].split(',');
+        console.log("coords", { xa: +x, ya: +y, xb: +xb, yb: +yb, inverse: wall.classList.contains("inverse") });
+
+        // return `${+x},${+y} ${+xb},${+yb}`;
+        return {
+          xa: +x,
+          ya: +y,
+          xb: +xb,
+          yb: +yb,
+        };
+      });
+
+      // return wall.classList.contains("inverse") ? cs.reverse() : cs;
+      return { node: wall, edges: es };
+    });
+
+
+    console.log("edgeszz", edgeszz);
+    // console.log("wall corners", allWallCorners);
+
     const allEdgePts = allWallCorners.map(w =>
       w.map((pt, i, arr) => [pt, arr[(i + 1) % arr.length]])
     );
 
+    console.log("all edge points", allEdgePts);
+
     let allStartingEdges;
     init(allEdgePts);
 
@@ -264,6 +291,14 @@
       }, []);
     }
 
+    function getCollisionEdges(walls, [xc, yc]) {
+      return walls.reduce((acc, wall) => {
+        return [...acc, ...wall.edges.filter(({ xa, ya, xb, yb }) => {
+          return [isClockwise, isAcute].every(c => c([xa, ya], [xb, yb], [xc, yc]));
+        }).map(e => { return { edge: e, node: wall }; })];
+      }, []);
+    }
+
     function updateTriangles([positionX, positionY]) {
       const delim = ' ';
       const className = 'clockwise-orientation';
@@ -371,7 +406,14 @@
       });
     }
 
-    function detectEdgeCollision([xc, yc], edge) {
+    function slope(edge) {
+      const [[xa, ya], [xb, yb]] = edge.split(' ').map(n => n.split(',').map(n => +n));
+      return (yb - ya) / (xb - xa);
+    }
+
+    // i need to know which edge
+    function detectEdgeCollision([xc, yc], edge, edgee) {
+      // console.log("edge", edge, "edgee", edgee);
       const shipRadius = 5;
       const [[xa, ya], [xb, yb]] = edge.split(' ').map(n => n.split(',').map(n => +n));
 
@@ -395,11 +437,43 @@
       return shipBody.isPointInFill(cornerPt);
     }
 
-    function detectCollisions(position, walls, edges) {
+    function detectCollisions(position, walls, edges, z) {
-      return [
+      // console.log("edges to test for collision", edgesToCheck);
-        [walls, wall => wall.some(corner => detectCornerCollision(position, corner))],
+      console.log("walls", walls);
-        [edges, edge => detectEdgeCollision(position, edge)]
+      // this returns the wall with the corner, no the corner
-      ].some(([t, f]) => t.some(f))
+      let actualCorner;
+      const corner = walls.find(wall => {
+        // console.log("checking corners on wall", wall);
+        const c = wall.find(corner => detectCornerCollision(position, corner));
+        // console.log("corner", c);
+        actualCorner = c;
+        // console.log("c", c);
+        return c;
+      });
+
+      // console.log("actual corner", actualCorner);
+      // if (corner) console.log("corner collision", corner);
+
+      const edge = z.find(({ edge: e, node: ee }) => {
+        const str = `${e.xa},${e.ya} ${e.xb},${e.yb}`;
+          return detectEdgeCollision(position, str, e);
+        }
+      );
+
+      console.log("collision detected", "edge", edge, "corner", actualCorner);
+
+      // if (found) console.log("found", found.node, found.node.node.classList.contains("inverse"));
+
+      // return [
+      //   [walls, wall => wall.some(corner => detectCornerCollision(position, corner))],
+      //   [edges, edge => {
+      //     const coll = detectEdgeCollision(position, edge);
+      //     if (coll) console.log(edge, slope(edge) == -0);
+      //     return coll;
+      //   }]
+      // ].some(([t, f]) => t.some(f))
+
+      return edge || actualCorner;
     }
 
     function updateShip(elapsed) {
@@ -454,6 +528,10 @@
       });
     }
 
+    function isLandable(edge) {
+      return true;
+    }
+
     function init(edgePts) {
       started = false;
       position = [0, 0]; // meters
@@ -466,7 +544,7 @@
       allStartingEdges = findAllEdges(edgePts, position);
       ship.style.transform = "";
       walls.forEach(w => w.setAttribute('fill', 'black'));
-      bg.style.fill = 'black';
+      // bg.style.fill = 'black';
       time.innerText = "0";
     }
 
@@ -503,14 +581,22 @@
       updateEdges(position);
       if (drawCollisionLines) updateTriangles(position);
 
-      const collision = detectCollisions(position, allWallCorners, findAllEdges(allEdgePts, position));
+      const collision = detectCollisions(position, allWallCorners, findAllEdges(allEdgePts, position), getCollisionEdges(edgeszz, position));
+
+      console.log("collision", collision && collision.hasOwnProperty("edge"));
+      // console.log("landable?", isLandable(collision));
 
       if (collision) {
+        if (collision.hasOwnProperty("edge") && isLandable(collision)) {
+          // stop velocity in all directions
+          velocity = [0, 0];
+        } else {
           started = false;
           isReadingKeys = false;
           walls.forEach(w => w.setAttribute('fill', 'red'));
           bg.style.fill = 'red';
         }
+      }
 
       if (restart) {
         started = false;