Clean up

html/images/space.svg

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- <svg viewBox="-200 -150 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg"> -->
+<svg viewBox="-200 -150 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
-<svg viewBox="-10 -10 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
+<!-- <svg viewBox="-10 -10 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"> -->
   <style>
     foreignObject {
       font-size: 4pt;
@@ -127,6 +127,11 @@
 
   <!-- <polygon class="wall" points="34,56 56,78 45,98 23,89" /> -->
   <polygon class="wall" points="44,55 55,66 33,88 22,66" />
+  <polygon class="wall" points="-55,-44 -33,-33 -55,-22 -66,-33" />
+  <polygon class="wall" points="77,-22 133,-6 99,0 88,-5" />
+  <polygon class="wall" points="-77,99 -66,88 -44,122 -88,133" />
+  <polygon class="wall" points="-99,44 -77,44 -88,55" />
+
   <!-- <polygon class="wall" points="-50,50 -40,60 -50,70 -60,60" /> -->
   <!-- <polygon class="wall" points="50,-30 40,-60 50,-70 60,-60" /> -->
   <!-- <polygon class="wall" points="50,50 60,60 50,70 40,60" /> -->
@@ -184,7 +189,7 @@
     </div>
   </foreignObject>
 
-  <script type="text/javascript">//<![CDATA[
+<script type="text/javascript">//<![CDATA[
 // entities
 // const Ships = [{ entity_id: "ship_1" }];
 // const Walls = [{ entity_id: "wall_1" }, { entity_id: "wall_2" }];
@@ -569,9 +574,9 @@ function detectEdgeCollision([xc, yc], [x, y], radius) {
     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 length = distance(xa, ya, xb, yb);
 
     const riol = rise / length * radius;
     const ruol = run / length * radius;
@@ -642,7 +647,9 @@ function detectCornerCollision([xc, yc], [x, y], radius) {
   };
 }
 
-function detectCollision(edges, corners, [xc, yc], [x, y], velocity, radius) {
+function detectCollision(currentPos, intendedPos, velocity, radius, edges, corners) {
+  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));
@@ -695,8 +702,8 @@ function edgeContactPosition(xc, yc, x, y, edge, radius) {
   const baseSlope = slope(edge);
   // if (Object.is(baseSlope, 0)) s.isLanded = true;
   let { xa, ya, xb, yb } = edge;
-  const edgeSeg = { x1: xa, y1: ya, x2: xb, y2: yb };
   const positionSeg = { x1: x, y1: y, x2: xc, y2: yc };
+  const edgeSeg = { x1: xa, y1: ya, x2: xb, y2: yb };
 
   const baseNrmlIntxn = perpIntxn(baseSlope, xa, ya, x, y);
   const basePosIntxn = lineIntxnPt(edgeSeg, positionSeg);
@@ -737,8 +744,8 @@ function updateShip(s, elapsed) {
   const { x: ax, y: ay } = s.acceleration;
 
   s.velocity = {
-    x: vx > 0 && vx + ax < 0 ? 0 : vx + ax,
+    x: vx > 0 && vx + ax <= 0 ? 0 : vx + ax,
-    y: vy > 0 && vy + ay < 0 ? 0 : vy + ay
+    y: vy > 0 && vy + ay <= 0 ? 0 : vy + ay
   };
 
   velIndic.setAttribute('x2', s.velocity.x);
@@ -746,12 +753,17 @@ function updateShip(s, elapsed) {
   acclIndic.setAttribute('x2', s.acceleration.x);
   acclIndic.setAttribute('y2', s.acceleration.y);
 
-  const changeX = 0.001 * elapsed * s.velocity.x;
+  const metersPerMillisecond = 0.001;
-  const changeY = 0.001 * elapsed * s.velocity.y;
-  const [xc, yc] = [changeX + px, changeY + py];
 
+  const pDelta = {
+    x: elapsed * s.velocity.x * metersPerMillisecond,
+    y: elapsed * s.velocity.y * metersPerMillisecond
+  };
+
+  const p = { x: pDelta.x + px, y: pDelta.y + py };
   current = s.collision;
-  s.collision = detectCollision(mapEdges, mapCorners, [xc, yc], [px, py], s.velocity, shipRadius);
+
+  s.collision = detectCollision([px, py], p, s.velocity, shipRadius, mapEdges, mapCorners);
   if (s.collision) console.log("COLLISION", s.collision);
 
   legs.style.display = s.gearDown ? "initial" : "none";
@@ -765,9 +777,9 @@ function updateShip(s, elapsed) {
     s.isLanded = true;
     let posP;
     if (s.collision.corner) {
-      posP = cornerContactPosition(xc, yc, px, py, s.collision.corner, shipRadius);
+      posP = cornerContactPosition(p.x, p.y, px, py, s.collision.corner, shipRadius);
     } else if (s.collision.edge) {
-      posP = edgeContactPosition(xc, yc, px, py, s.collision.edge, shipRadius);
+      posP = edgeContactPosition(p.x, p.y, px, py, s.collision.edge, shipRadius);
     }
 
     s.velocity = { x: 0, y: 0 };
@@ -781,8 +793,8 @@ function updateShip(s, elapsed) {
       s.isLanded = false;
     }
 
-    s.position = { x: xc, y: yc };
+    s.position = { x: p.x, y: p.y };
-    s.node.style.transform = `translate(${xc}px, ${yc}px)`;
+    s.node.style.transform = `translate(${s.position.x}px, ${s.position.y}px)`;
   }
 }
 
@@ -1081,6 +1093,7 @@ svg.addEventListener("pointermove", function({ clientX, clientY }) {
     yp.innerText = Math.trunc(svgP.y);
   }
 });
-  //]]></script>
+
+//]]></script>
 </svg>