WIP: landing

html/images/space.svg

@@ -6,6 +6,7 @@
       font-size: 4pt;
       font-family: courier;
       color: white;
+      display: none;
     }
 
     #info {
@@ -81,7 +82,7 @@
     }
 
     line#acceleration-indicator {
-      stroke: maroon;
+      stroke: none;
       /* stroke-width: 0.5px; */
     }
 
@@ -292,8 +293,8 @@ const map = (function(els) {
 let allStartingEdges;
 init();
 
-const b = map.edges.map(({ edge }) => getEdgeCollisionBoundary(edge, shipRadius));
-b.forEach(b => drawLine(b.xa, b.ya, b.xb, b.yb, "orange"));
+// const b = map.edges.map(({ edge }) => getEdgeCollisionBoundary(edge, shipRadius));
+// b.forEach(b => drawLine(b.xa, b.ya, b.xb, b.yb, "orange"));
 
 function distance(x1, y1, x2, y2) {
   return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
@@ -554,20 +555,12 @@ function getEdgeCollisionBoundary(edge, dist) {
   return { xa: xa + riol, ya: ya - ruol, xb: xb + riol, yb: yb - ruol};
 }
 
-function detectEdgeCollision([xc, yc], [x, y], radius) {
-  return ({ edge, wall }) => {
+function detectEdgeCollision([xc, yc], [x, y], radius, gearDown) {
+  return (collision) => {
     if (xc === x && yc === y) return;
-
-    // const { xa, ya, xb, yb } = edge;
-    // const length = distance(xa, ya, xb, yb);
-    // const rise = yb - ya;
-    // const run = xb - xa;
-    //
-    // const riol = rise / length * radius;
-    // const ruol = run / length * radius;
-    //
-    // const edgeSeg = { xa: xa + riol, ya: ya - ruol, xb: xb + riol, yb: yb - ruol};
-    const edgeSeg = getEdgeCollisionBoundary(edge, radius);
+    const { edge, wall } = collision;
+    const dist = edge.xa < edge.xb && edge.ya === edge.yb && gearDown ? radius + 1.5 : radius;
+    const edgeSeg = getEdgeCollisionBoundary(edge, dist);
     const positionSeg = { xa: x, ya: y, xb: xc, yb: yc };
 
     const { xa: x1, ya: y1, xb: x2, yb: y2 } = positionSeg;
@@ -580,17 +573,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));
+      collision.position = { x: xs, y: ys };
 
-    return roundedS >= 0 && roundedS <= 1 && roundedT >= 0 && roundedT <= 1;
+      return true;
+    }
+    // return roundedS >= 0 && roundedS <= 1 && roundedT >= 0 && roundedT <= 1;
+    return;
   };
 }
 
@@ -633,12 +624,12 @@ function detectCornerCollision([xc, yc], [x, y], radius) {
   };
 }
 
-function detectCollision(currentPos, intendedPos, velocity, radius, { edges, corners }) {
+function detectCollision(currentPos, intendedPos, velocity, radius, { edges, corners }, gearDown) {
   const { x: xc, y: yc } = intendedPos;
   const [x, y] = currentPos;
   // edges oriented clockwise with ship
   const fwdEdges = getForwardEdges(edges, { x, y })
-  const edgeColl = fwdEdges.find(detectEdgeCollision([xc, yc], [x, y], radius));
+  const edgeColl = fwdEdges.find(detectEdgeCollision([xc, yc], [x, y], radius, gearDown));
 
   if (edgeColl) return edgeColl;
 
@@ -758,38 +749,38 @@ function updateShip(s, elapsed) {
   const p = { x: pDelta.x + px, y: pDelta.y + py };
   current = s.collision;
 
-  const tempRadius = 10;
+  // const tempRadius = 7;
 
-  s.collision = detectCollision([px, py], p, s.velocity, tempRadius, map);
+  // s.collision = detectCollision([px, py], p, s.velocity, tempRadius, map);
+  s.collision = detectCollision([px, py], p, s.velocity, shipRadius, map, s.gearDown);
   if (s.collision) console.log("COLLISION", s.collision);
 
   legs.style.display = s.gearDown ? "initial" : "none";
 
   if (!current && s.collision) {
-    // just check if ya and yb are == ?, but then how do you know if the
-    // edge is facing up or down? compare xs?
-
-    // const baseSlope = slope(s.collision.edge);
-    // if (Object.is(baseSlope, 0) && s.gearDown) s.isLanded = true;
-    // s.isLanded = true;
     let posP;
     if (s.collision.corner) {
       posP = cornerContactPosition(p.x, p.y, px, py, s.collision.corner, shipRadius);
     } else if (s.collision.edge) {
-      posP = edgeContactPosition(p.x, p.y, px, py, s.collision.edge, tempRadius);
+      if (isLandable(s.collision.edge) && s.gearDown) s.isLanded = true;
+
+      posP = s.collision.position;
     }
 
     s.velocity = { x: 0, y: 0 };
     s.position = { x: posP.x, y: posP.y }
     s.node.style.transform = `translate(${s.position.x}px, ${s.position.y}px)`;
   } else if (current && s.collision) {
-    s.velocity = { x: 0, y: 0 };
-  } else {
-    if (s.isLanded) {
+    if (s.isLanded && s.velocity.y < 0) {
       s.gearDown = false;
       s.isLanded = false;
+      s.position = { x: p.x, y: p.y };
+      s.node.style.transform = `translate(${s.position.x}px, ${s.position.y}px)`;
+      s.collision = null;
+    } else {
+      s.velocity = { x: 0, y: 0 };
     }
-
+  } else {
     s.position = { x: p.x, y: p.y };
     s.node.style.transform = `translate(${s.position.x}px, ${s.position.y}px)`;
   }
@@ -867,9 +858,9 @@ function init() {
   const mult = 10;
 
   s.position = { x: 10, y: 10 };
-  // s.velocity = { x: 0, y: 0 };
+  s.velocity = { x: 0, y: 0 };
 
-  s. velocity = { x: -5*mult, y: 7*mult };
+  // s. velocity = { x: -5*mult, y: 7*mult };
 
   s.acceleration = { x: 0, y: 0 };
   s.rotate = 0;