From 3fa1e8f72263c0328f2b90eb74de56b1ee5662af Mon Sep 17 00:00:00 2001
From: Catalin Constantin Mititiuc <webdevcat@proton.me>
Date: Wed, 7 Jan 2026 18:13:43 -0800
Subject: [PATCH] Fix indent

---
 html/images/space.svg | 1746 ++++++++++++++++++++---------------------
 1 file changed, 871 insertions(+), 875 deletions(-)

diff --git a/html/images/space.svg b/html/images/space.svg
index e0855fa..29da4b2 100644
--- a/html/images/space.svg
+++ b/html/images/space.svg
@@ -185,932 +185,928 @@
   </foreignObject>
 
   <script type="text/javascript">//<![CDATA[
-    // entities
-    // const Ships = [{ entity_id: "ship_1" }];
-    // const Walls = [{ entity_id: "wall_1" }, { entity_id: "wall_2" }];
+// entities
+// const Ships = [{ entity_id: "ship_1" }];
+// const Walls = [{ entity_id: "wall_1" }, { entity_id: "wall_2" }];
 
-    // systems
-    // Move.update = ({ entity_id }) => {
-      // reads Velocity[entity_id]
-      // sets Position[entity_id]
-    // };
+// systems
+// Move.update = ({ entity_id }) => {
+  // reads Velocity[entity_id]
+  // sets Position[entity_id]
+// };
 
-    // components
-    // Velocity = { "ship_1": { x: 0, y: 0 }};
-    // Position = { "ship_1": { x: 0, y: 0 }};
-    // Points = {
-    //   "wall_1": "0,0 2,0 1,1",
-    //   "wall_2": "0,0 -1,1 -2,0",
-    // };
+// components
+// Velocity = { "ship_1": { x: 0, y: 0 }};
+// Position = { "ship_1": { x: 0, y: 0 }};
+// Points = {
+//   "wall_1": "0,0 2,0 1,1",
+//   "wall_2": "0,0 -1,1 -2,0",
+// };
 
-    const namespaceURIsvg = 'http://www.w3.org/2000/svg';
-    const degsRegex = /(-?\d*\.{0,1}\d+)deg/g;
-    const regex = /(-?\d*\.{0,1}\d+)px/g;
-    const bullets = [];
-    const halfPi = Math.PI / 2;
-    const maxSpeed = 100;
+const namespaceURIsvg = 'http://www.w3.org/2000/svg';
+const degsRegex = /(-?\d*\.{0,1}\d+)deg/g;
+const regex = /(-?\d*\.{0,1}\d+)px/g;
+const bullets = [];
+const halfPi = Math.PI / 2;
+const maxSpeed = 100;
 
-    const drawCollisionLines = false;
+const drawCollisionLines = false;
 
-    let previous, zero, frameCount = 0;
-    // let position = [0, 0]; // meters
-    // let velocity = [0, 0]; // meters per second
-    // let acceleration = [0, 0]; // meters per second per second
-    let position; // meters
-    let velocity; // meters per second
-    let acceleration; // meters per second per second
-    let rotate = 0;
+let previous, zero, frameCount = 0;
+// let position = [0, 0]; // meters
+// let velocity = [0, 0]; // meters per second
+// let acceleration = [0, 0]; // meters per second per second
+let position; // meters
+let velocity; // meters per second
+let acceleration; // meters per second per second
+let rotate = 0;
 
-    let mult = 10000;
+let mult = 10000;
 
-    const ship = document.querySelector(".ship");
-    const s = { node: ship };
+const ship = document.querySelector(".ship");
+const s = { node: ship };
 
-    let friction = 0;
-    let rotationSpeed = 0.25;
-    let started = false;
-    let restart = false;
-    let isReadingKeys = true;
+let friction = 0;
+let rotationSpeed = 0.25;
+let started = false;
+let restart = false;
+let isReadingKeys = true;
 
-    const svg = document.querySelector('svg');
-    const bg = svg.querySelector('#bg');
-    const fps = document.querySelector("#fps");
-    const time = document.querySelector("#time");
-    const debug = document.querySelector("#debug");
-    const gun = ship.querySelector('#cannon');
-    const shipBody = ship.querySelector("#body");
-    const shipRadius = +shipBody.getAttribute('r');
+const svg = document.querySelector('svg');
+const bg = svg.querySelector('#bg');
+const fps = document.querySelector("#fps");
+const time = document.querySelector("#time");
+const debug = document.querySelector("#debug");
+const gun = ship.querySelector('#cannon');
+const shipBody = ship.querySelector("#body");
+const shipRadius = +shipBody.getAttribute('r');
 
-    const legs = ship.querySelector("#legs");
-    const wallElements = document.querySelectorAll('.wall');
-    const bulletsContainer = document.querySelector("#bullets");
-    const triangleContainer = document.querySelector('#triangles');
-    const linesContainer = document.querySelector("#lines");
-    const edgeContainer = document.querySelector('#edges');
-    const velIndic = document.querySelector('#velocity-indicator');
-    const acclIndic = document.querySelector('#acceleration-indicator');
+const legs = ship.querySelector("#legs");
+const wallElements = document.querySelectorAll('.wall');
+const bulletsContainer = document.querySelector("#bullets");
+const triangleContainer = document.querySelector('#triangles');
+const linesContainer = document.querySelector("#lines");
+const edgeContainer = document.querySelector('#edges');
+const velIndic = document.querySelector('#velocity-indicator');
+const acclIndic = document.querySelector('#acceleration-indicator');
 
-    const bulletPt = svg.createSVGPoint();
-    const cornerPt = svg.createSVGPoint();
+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 allWallCorners = [...wallElements].map(wall => {
+  const cs = wall.getAttribute('points').split(' ').map(coords => {
+    const [x, y] = coords.split(',');
+    return [+x, +y];
+  });
 
-      return wall.classList.contains("inverse") ? cs.reverse() : cs;
+  return wall.classList.contains("inverse") ? cs.reverse() : cs;
+});
+
+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 };
+  });
+
+  return { node, corners, edges };
+});
+
+const mapCorners = mapWalls.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 }))],
+  []
+);
+
+console.log("walls on map", mapWalls);
+console.log("corners on map", mapCorners);
+console.log("edges on map", mapEdges);
+
+let allStartingEdges;
+init();
+
+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]]) => {
+      const el = document.createElementNS(namespaceURIsvg, 'polygon');
+      const attr = `${x1},${y1} ${x2},${y2} ${positionX},${positionY}`
+      el.setAttribute('points', attr);
+      container.appendChild(el);
+    })
+  );
+}
+
+// Triangle has a clockwise orientation
+function isClockwise([xa, ya], [xb, yb], [xc, yc]) {
+  // https://en.wikipedia.org/wiki/Curve_orientation#Practical_considerations
+  // Determinant for a convex polygon
+  const det = (+xb - +xa) * (+yc - +ya) - (+xc - +xa) * (+yb - +ya);
+  return det < 0;
+}
+
+function isAcute([xa, ya], [xb, yb], [xc, yc]) {
+  const da = distance(xa, ya, xc, yc);
+  const db = distance(xb, yb, xc, yc);
+  const dc = distance(xa, ya, xb, yb);
+
+  // https://en.wikipedia.org/wiki/Law_of_cosines
+  // Solve for angles alpha and beta with inverse cosine (arccosine)
+  const alpha = Math.acos((db ** 2 + dc ** 2 - da ** 2) / (2 * db * dc));
+  const beta = Math.acos((da ** 2 + dc ** 2 - db ** 2) / (2 * da * dc));
+  return alpha < halfPi && beta < halfPi;
+}
+
+function findEdges(verts, [xc, yc]) {
+  return verts.reduce((acc, [a, b]) => {
+    const isFound = [isClockwise, isAcute].every(c => c(a, b, [xc, yc]));
+    // return isFound ? [...acc, `${xa},${ya} ${xb},${yb}`] : acc;
+    return isFound ? [...acc, `${a[0]},${a[1]} ${b[0]},${b[1]}`] : acc;
+  }, []);
+}
+
+// function findAllEdges(verts, [xc, yc] = [0, 0]) {
+function findAllEdges(verts, [xc, yc]) {
+  return verts.reduce((acc, points) => {
+    points.forEach(([a, b]) => {
+      const isFound = [isClockwise, isAcute].every(c => c(a, b, [xc, yc]));
+      if (isFound) acc.push(`${a[0]},${a[1]} ${b[0]},${b[1]}`);
     });
 
-    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;
-      });
+    return acc;
+  }, []);
+}
 
-      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 };
-      });
+function getForwardEdges(edges, { x, y }) {
+  return edges.filter(({ edge }) => {
+    const { xa, ya, xb, yb } = edge;
+    const det = (xb - xa) * (y - ya) - (x - xa) * (yb - ya);
+    return det < 0;
+  });
+}
 
-      return { node, corners, edges };
-    });
+function getForwardCorners(corners, position, velocity) {
+  const { x: x1, y: y1 } = position;
+  const { x: x2, y: y2 } = velocity;
 
-    const mapCorners = mapWalls.reduce(
-      (acc, wall) => [...acc, ...wall.corners.map(c => ({ corner: c, wall: wall }))],
-      []
-    );
+  const { x: vx, y: vy } = velocity;
 
-    const mapEdges = mapWalls.reduce(
-      (acc, wall) => [...acc, ...wall.edges.map(e => ({ edge: e, wall: wall }))],
-      []
-    );
+  let perppts = {};
 
-    console.log("walls on map", mapWalls);
-    console.log("corners on map", mapCorners);
-    console.log("edges on map", mapEdges);
+  if (vx === 0 && vy === 0) {
+    // none
+  } else if (vx === 0 && vy > 0) {
+    perppts = { a: { x: x1 - 1, y: y1 }, b: { x: x1 + 1, y: y1 }};
+  } else if (vx === 0 && vy < 0) {
+    perppts = { a: { x: x1 + 1, y: y1 }, b: { x: x1 - 1, y: y1 }};
+  } else if (vy === 0 && vx > 0) {
+    perppts = { a: { x: x1, y: y1 + 1 }, b: { x: x1, y: y1 - 1 }};
+  } else if (vy === 0 && vx < 0) {
+    perppts = { a: { x: x1, y: y1 - 1 }, b: { x: x1, y: y1 + 1 }};
+  } else if (vy > 0 && vx > 0) {
+    const vslope = vy / vx;
+    const pslope = 1 / -vslope;
+    // Point-slope line equation
+    const pya = pslope * (x1 - 1) - pslope * x1 + y1;
+    const pyb = pslope * (x1 + 1) - pslope * x1 + y1;
 
-    const allEdgePts = allWallCorners.map(w =>
-      w.map((pt, i, arr) => [pt, arr[(i + 1) % arr.length]])
-    );
+    perppts = { a: { x: x1 - 1, y: pya }, b: { x: x1 + 1, y: pyb }};
+  } else if (vy > 0 && vx < 0) {
+    const vslope = vy / vx;
+    const pslope = 1 / -vslope;
+    const pya = pslope * (x1 - 1) - pslope * x1 + y1;
+    const pyb = pslope * (x1 + 1) - pslope * x1 + y1;
 
-    let allStartingEdges;
-    init(allEdgePts);
+    perppts = { a: { x: x1 - 1, y: pya }, b: { x: x1 + 1, y: pyb }};
+  } else if (vy < 0 && vx > 0) {
+    const vslope = vy / vx;
+    const pslope = 1 / -vslope;
+    const pya = pslope * (x1 + 1) - pslope * x1 + y1;
+    const pyb = pslope * (x1 - 1) - pslope * x1 + y1;
 
-    function distance(x1, y1, x2, y2) {
-      return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
+    perppts = { a: { x: x1 + 1, y: pya }, b: { x: x1 - 1, y: pyb }};
+  } else if (vy < 0 && vx < 0) {
+    const vslope = vy / vx;
+    const pslope = 1 / -vslope;
+    const pya = pslope * (x1 + 1) - pslope * x1 + y1;
+    const pyb = pslope * (x1 - 1) - pslope * x1 + y1;
+
+    perppts = { a: { x: x1 + 1, y: pya }, b: { x: x1 - 1, y: pyb }};
+  } else {
+    //
+  }
+
+  const { a, b } = perppts;
+  // if (a && b) drawLine(a.x, a.y, b.x, b.y);
+
+  return corners.filter(({ corner: c }) => {
+    if (!a || !b) return;
+    const det = (b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x);
+    return det > 0;
+  });
+}
+
+function updateTriangles([positionX, positionY]) {
+  const delim = ' ';
+  const className = 'clockwise-orientation';
+
+  // if (!triangleContainer.childElementCount)
+  //   drawTriangles(triangleContainer, allEdgePts, position);
+
+  const triangles = triangleContainer.querySelectorAll('polygon');
+
+  triangles.forEach(t => {
+    const attr = t.getAttribute('points').split(delim);
+    const [a, b,] = attr.map(t => t.split(','));
+
+    const cw = isClockwise(a, b, [positionX, positionY]);
+    const acute = isAcute(a, b, [positionX, positionY]);
+    const pos = `${positionX},${positionY}`;
+
+    if (pos !== attr.pop()) {
+      attr.push(pos);
+      t.setAttribute('points', attr.join(delim));
     }
 
-    function drawAllEdges(walls) {
-      walls.forEach(edges => drawEdges(edges));
+    t.classList[cw && acute ? "add" : "remove"](className);
+    t.classList[cw && !acute ? "add" : "remove"]("obtuse");
+    t.classList[!cw ? "add" : "remove"]("anti-clockwise");
+  });
+}
+
+function wrapPos(positionX, positionY) {
+  let x, y;
+
+  if (positionY > 150) y = positionY - 300;
+  else if (positionY < -150) y = positionY + 300;
+  else y = positionY;
+
+  if (positionX > 200) x = positionX - 400;
+  else if (positionX < -200) x = positionX + 400;
+  else x = positionX;
+
+  return [x, y];
+}
+
+function fireBullet(position, velocity) {
+  const speed = 200; // meters per second
+  const degrees = getRotate(gun);
+  const radians = degrees * Math.PI / 180; // toFixed(15)?
+  const vx = -Math.sin(radians);
+  const vy = Math.cos(radians);
+  const bulletTimeout = 5000; // miliseconds
+  const cannonLength = 8;
+
+  const el = document.createElementNS(namespaceURIsvg, 'circle');
+  el.classList.add('bullet');
+  el.setAttribute('r', 1);
+  el.setAttribute('cx', 0);
+  el.setAttribute('cy', 0);
+
+  const bullet = {
+    x: position.x + vx * cannonLength,
+    y: position.y + vy * cannonLength,
+    vx: vx * speed + velocity.x,
+    vy: vy * speed + velocity.y,
+    time: bulletTimeout,
+    node: bulletsContainer.appendChild(el)
+  }
+
+  bullets.push(bullet);
+}
+
+function getRotate(el) {
+  let [[, degrees] = ["0deg", "0"]] = [...el.style.transform.matchAll(degsRegex)];
+  return +degrees;
+}
+
+function updateBullets(elapsed) {
+  const deleteCount = 1;
+
+  [...bullets].forEach((bullet, index) => {
+    bullet.time -= elapsed;
+    const x = bullet.x + 0.001 * elapsed * bullet.vx;
+    const y = bullet.y + 0.001 * elapsed * bullet.vy;
+    bulletPt.x = x;
+    bulletPt.y = y;
+
+    if (bullet.time > 0 && ![...wallElements].some(w => w.isPointInFill(bulletPt))) {
+      [bullet.x, bullet.y] = wrapPos(x, y);
+      bullet.node.style.transform = `translate(${bullet.x}px, ${bullet.y}px)`;
+    } else {
+      bullet.node.remove();
+      bullets.splice(index, deleteCount);
+    }
+  });
+}
+
+function perpIntxn(baseSlope, xa, ya, xc, yc) {
+  let isx, isy;
+
+  // base is vertical
+  if (baseSlope === -Infinity || baseSlope === Infinity) {
+    isx = xa;
+    isy = yc;
+  } else if (baseSlope === 0) { // base is horizontal
+    isx = xc;
+    isy = ya;
+  } else {
+    const altitudeSlope = 1 / -baseSlope;
+    isx = (-altitudeSlope * xc + yc + baseSlope * xa - ya) / (baseSlope - altitudeSlope);
+    isy = altitudeSlope * isx - altitudeSlope * xc + yc;
+  }
+
+  return { x: isx, y: isy };
+}
+
+function drawLine(xa, ya, xb, yb, color = "black") {
+  const el = document.createElementNS(namespaceURIsvg, 'line');
+  el.setAttribute('x1', xa);
+  el.setAttribute('y1', ya);
+  el.setAttribute('x2', xb);
+  el.setAttribute('y2', yb);
+  el.setAttribute('stroke', color);
+  svg.appendChild(el);
+  return el;
+}
+
+function drawCircle(cx, cy, color = "black", r = 1) {
+  const el = document.createElementNS(namespaceURIsvg, 'circle');
+  el.setAttribute('cx', cx);
+  el.setAttribute('cy', cy);
+  el.setAttribute('r', r);
+  el.setAttribute('fill', color);
+  svg.appendChild(el);
+  return el;
+}
+
+function slope({ xa, ya, xb, yb }) {
+  return (yb - ya) / (xb - xa);
+}
+
+function isLandable(edge) {
+  // console.log("edge", edge, "slope", slope(edge));
+  return Object.is(slope(edge), +0);
+}
+
+function detectEdgeCollision([xc, yc], [x, y], radius) {
+  return ({ edge, wall }) => {
+    if (xc === x && yc === y) return;
+
+    const { xa, ya, xb, yb } = edge;
+    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;
+
+    const positionSeg = { xa: x, ya: y, xb: xc, yb: yc };
+    const edgeSeg = { xa: xa + riol, ya: ya - ruol, xb: xb + riol, yb: yb - ruol};
+
+    const { xa: x1, ya: y1, xb: x2, yb: y2 } = positionSeg;
+    const { xa: x3, ya: y3, xb: x4, yb: y4 } = edgeSeg;
+
+    // https://en.wikipedia.org/wiki/Intersection_(geometry)#Two_line_segments
+    // https://en.wikipedia.org/wiki/Cramer%27s_rule#Explicit_formulas_for_small_systems
+    const s = ((x3-x1)*(y4-y3)-(x4-x3)*(y3-y1))/((x2-x1)*(y4-y3)-(x4-x3)*(y2-y1));
+    const t = -((x2-x1)*(y3-y1)-(x3-x1)*(y2-y1))/((x2-x1)*(y4-y3)-(x4-x3)*(y2-y1));
+    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
     }
 
-    function drawEdges(pts) {
-      let edges = pts.map(e => e.join(' '));
+    return roundedS >= 0 && roundedS <= 1 && roundedT >= 0 && roundedT <= 1;
+  };
+}
 
-      edges.forEach(e => {
-        const [x, y] = e.split(' ');
-        const [x1, y1] = x.split(',');
-        const [x2, y2] = y.split(',');
-        const el = document.createElementNS(namespaceURIsvg, 'line');
+function detectCornerCollision([xc, yc], [x, y], radius) {
+  return c => {
+    if (xc === x && yc === y) return;
 
-        el.setAttribute('x1', x1);
-        el.setAttribute('y1', y1);
-        el.setAttribute('x2', x2);
-        el.setAttribute('y2', y2);
-        edgeContainer.appendChild(el)
-      });
+    const d = distance(c.corner.x, c.corner.y, xc, yc);
+
+    if (d <= radius) return true;
+
+    const positionSeg = { xa: xc, ya: yc, xb: x, yb: y };
+    const posNormIntxn = perpIntxn(slope(positionSeg), x, y, c.corner.x, c.corner.y);
+    const cornerSeg = { xa: c.corner.x, ya: c.corner.y, xb: posNormIntxn.x, yb: posNormIntxn.y };
+
+    const { x: x0, y: y0 } = c.corner;
+    const { xa: x1, ya: y1, xb: x2, yb: y2 } = positionSeg;
+    const { xa: x3, ya: y3, xb: x4, yb: y4 } = cornerSeg;
+
+    // https://en.wikipedia.org/wiki/Intersection_(geometry)#Two_line_segments
+    // https://en.wikipedia.org/wiki/Cramer%27s_rule#Explicit_formulas_for_small_systems
+    const s = ((x3-x1)*(y4-y3)-(x4-x3)*(y3-y1))/((x2-x1)*(y4-y3)-(x4-x3)*(y2-y1));
+    const t = -((x2-x1)*(y3-y1)-(x3-x1)*(y2-y1))/((x2-x1)*(y4-y3)-(x4-x3)*(y2-y1));
+    const roundedT = +t.toFixed(2);
+
+    if (s >= 0 && roundedT <= 1) {
+      const xs = (x1 + s * (x2 - x1));
+      const ys = (y1 + s * (y2 - y1));
+      const xt = (x3 + roundedT * (x4 - x3));
+      const yt = (y3 + roundedT * (y4 - y3));
+      // [xs, ys] and [xt, yt] should be equal ([xs, ys] === [xy, yt])
+      // (...or about equal, notwithstanding rounding errors)
+      const sCollisionPt = [xs, ys];
+      const tCollisionPt = [xt, yt];
+      // drawCircle(posNormIntxn.x, posNormIntxn.y, "red");
+      // drawCircle(...tCollisionPt, "blue");
     }
 
-    function drawTriangles(container, walls, [positionX, positionY]) {
-      walls.forEach(pts =>
-        pts.forEach(([[x1, y1], [x2, y2]]) => {
-          const el = document.createElementNS(namespaceURIsvg, 'polygon');
-          const attr = `${x1},${y1} ${x2},${y2} ${positionX},${positionY}`
-          el.setAttribute('points', attr);
-          container.appendChild(el);
-        })
-      );
+    return s >= 0 && roundedT <= 1;
+  };
+}
+
+function detectCollision(edges, corners, [xc, yc], [x, y], velocity, radius) {
+  // edges oriented clockwise with ship
+  const fwdEdges = getForwardEdges(edges, { x, y })
+  const edgeColl = fwdEdges.find(detectEdgeCollision([xc, yc], [x, y], radius));
+
+  if (edgeColl) return edgeColl;
+
+  // corners ahead of ship
+  const fwdCorners = getForwardCorners(corners, { x, y }, velocity);
+  const cornersInPath = fwdCorners.filter(withinCollisionDistance({ x, y }, velocity, radius));
+  const cornerColl = cornersInPath.find(detectCornerCollision([xc, yc], [x, y], radius));
+
+  if (cornerColl) return cornerColl;
+}
+
+function withinCollisionDistance({ x: x1, y: y1 }, { x: x2, y: y2 }, distance) {
+  const diffx = x2;
+  const diffy = y2;
+  const detv = x2 * y1 - y2 * x1;
+  const dv = Math.sqrt(diffy ** 2 + diffx ** 2);
+  const slopev = slope({ xa: x1, ya: y1, xb: x1 + x2, yb: y1 + y2 });
+
+  return ({ corner: { x: x0, y: y0 }}) => {
+    const velNormIntxn = perpIntxn(slopev, x1, y1, x0, y0);
+    const dx = Math.max(x0, velNormIntxn.x) - Math.min(x0, velNormIntxn.x);
+    const dy = Math.max(y0, velNormIntxn.y) - Math.min(y0, velNormIntxn.y);
+    const d = Math.sqrt(dy ** 2 + dx ** 2);
+    return d <= distance;
+  };
+}
+
+function cornerContactPosition(xc, yc, x, y, corner, cLength) {
+  const positionSeg = { xa: xc, ya: yc, xb: x, yb: y };
+  const posNormIntxn = perpIntxn(slope(positionSeg), x, y, corner.x, corner.y);
+
+  // shortest distance between corner and path
+  const aLength = distance(corner.x, corner.y, posNormIntxn.x, posNormIntxn.y);
+  // distance from position/normal intersection
+  const bLength = Math.sqrt(Math.abs(cLength ** 2 - aLength ** 2));
+
+  const intxnSeg = document.createElementNS(namespaceURIsvg, 'line');
+  intxnSeg.setAttribute('x1', posNormIntxn.x);
+  intxnSeg.setAttribute('y1', posNormIntxn.y);
+  intxnSeg.setAttribute('x2', x);
+  intxnSeg.setAttribute('y2', y);
+
+  return intxnSeg.getPointAtLength(bLength);
+}
+
+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 baseNrmlIntxn = perpIntxn(baseSlope, xa, ya, x, y);
+  const basePosIntxn = lineIntxnPt(edgeSeg, positionSeg);
+
+  const baseSegLength = distance(baseNrmlIntxn.x, baseNrmlIntxn.y, basePosIntxn.x, basePosIntxn.y);
+  const normalSegLength = distance(baseNrmlIntxn.x, baseNrmlIntxn.y, x, y);
+
+  const theta = Math.atan(normalSegLength / baseSegLength);
+  const h = radius / Math.sin(theta);
+
+  const cl = document.createElementNS(namespaceURIsvg, 'line');
+  cl.setAttribute('x1', basePosIntxn.x);
+  cl.setAttribute('y1', basePosIntxn.y);
+  cl.setAttribute('x2', x);
+  cl.setAttribute('y2', y);
+
+  return cl.getPointAtLength(h);
+}
+
+function lineIntxnPt({ x1, y1, x2, y2 }, { x1: x3, y1: y3, x2: x4, y2: y4 }) {
+  // https://en.wikipedia.org/wiki/Line%E2%80%93line_intersection#Given_two_points_on_each_line
+  const denominator = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
+  const l1Det = x1 * y2 - y1 * x2;
+  const l2Det = x3 * y4 - y3 * x4;
+  const x = (l1Det * (x3 - x4) - (x1 - x2) * l2Det) / denominator;
+  const y = (l1Det * (y3 - y4) - (y1 - y2) * l2Det) / denominator;
+
+  return { x: x, y: y };
+}
+
+function updateShip(s, elapsed) {
+  const degrees = getRotate(gun);
+  if (rotate > 0) gun.style.transform = `rotate(${(+degrees + rotationSpeed * elapsed) % 360}deg)`;
+  else if (rotate < 0) gun.style.transform = `rotate(${(+degrees - rotationSpeed * elapsed) % 360}deg)`;
+
+  let { x: velocityX, y: velocityY } = s.velocity;
+  let { x: accelerationX, y: accelerationY } = s.acceleration;
+
+  velocityX = velocityX > 0 && velocityX + accelerationX < 0 ? 0 : velocityX + accelerationX;
+  velocityY = velocityY > 0 && velocityY + accelerationY < 0 ? 0 : velocityY + accelerationY;
+
+  s.velocity = { x: velocityX, y: velocityY };
+  velIndic.setAttribute('x2', s.velocity.x);
+  velIndic.setAttribute('y2', s.velocity.y);
+  acclIndic.setAttribute('x2', s.acceleration.x);
+  acclIndic.setAttribute('y2', s.acceleration.y);
+
+  const changeX = 0.001 * elapsed * velocityX;
+  const changeY = 0.001 * elapsed * velocityY;
+
+  let { x, y } = s.position;
+  // console.log("current position", x, y);
+  let position = [positionX, positionY] = [changeX + x, changeY + y];
+  let [xc, yc] = position;
+  // console.log("future position", xc, yc);
+
+  current = s.collision;
+  s.collision = detectCollision(mapEdges, mapCorners, [xc, yc], [x, y], s.velocity, shipRadius);
+  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(xc, yc, x, y, s.collision.corner, shipRadius);
+    } else if (s.collision.edge) {
+      posP = edgeContactPosition(xc, yc, x, y, s.collision.edge, shipRadius);
     }
 
-    // Triangle has a clockwise orientation
-    function isClockwise([xa, ya], [xb, yb], [xc, yc]) {
-      // https://en.wikipedia.org/wiki/Curve_orientation#Practical_considerations
-      // Determinant for a convex polygon
-      const det = (+xb - +xa) * (+yc - +ya) - (+xc - +xa) * (+yb - +ya);
-      return det < 0;
-    }
-
-    function isAcute([xa, ya], [xb, yb], [xc, yc]) {
-      const da = distance(xa, ya, xc, yc);
-      const db = distance(xb, yb, xc, yc);
-      const dc = distance(xa, ya, xb, yb);
-
-      // https://en.wikipedia.org/wiki/Law_of_cosines
-      // Solve for angles alpha and beta with inverse cosine (arccosine)
-      const alpha = Math.acos((db ** 2 + dc ** 2 - da ** 2) / (2 * db * dc));
-      const beta = Math.acos((da ** 2 + dc ** 2 - db ** 2) / (2 * da * dc));
-      return alpha < halfPi && beta < halfPi;
-    }
-
-    function findEdges(verts, [xc, yc]) {
-      return verts.reduce((acc, [a, b]) => {
-        const isFound = [isClockwise, isAcute].every(c => c(a, b, [xc, yc]));
-        // return isFound ? [...acc, `${xa},${ya} ${xb},${yb}`] : acc;
-        return isFound ? [...acc, `${a[0]},${a[1]} ${b[0]},${b[1]}`] : acc;
-      }, []);
-    }
-
-    // function findAllEdges(verts, [xc, yc] = [0, 0]) {
-    function findAllEdges(verts, [xc, yc]) {
-      return verts.reduce((acc, points) => {
-        points.forEach(([a, b]) => {
-          const isFound = [isClockwise, isAcute].every(c => c(a, b, [xc, yc]));
-          if (isFound) acc.push(`${a[0]},${a[1]} ${b[0]},${b[1]}`);
-        });
-
-        return acc;
-      }, []);
-    }
-
-    function getForwardEdges(edges, { x, y }) {
-      return edges.filter(({ edge }) => {
-        const { xa, ya, xb, yb } = edge;
-        const det = (xb - xa) * (y - ya) - (x - xa) * (yb - ya);
-        return det < 0;
-      });
-    }
-
-    function getForwardCorners(corners, position, velocity) {
-      const { x: x1, y: y1 } = position;
-      const { x: x2, y: y2 } = velocity;
-
-      const { x: vx, y: vy } = velocity;
-
-      let perppts = {};
-
-      if (vx === 0 && vy === 0) {
-        // none
-      } else if (vx === 0 && vy > 0) {
-        perppts = { a: { x: x1 - 1, y: y1 }, b: { x: x1 + 1, y: y1 }};
-      } else if (vx === 0 && vy < 0) {
-        perppts = { a: { x: x1 + 1, y: y1 }, b: { x: x1 - 1, y: y1 }};
-      } else if (vy === 0 && vx > 0) {
-        perppts = { a: { x: x1, y: y1 + 1 }, b: { x: x1, y: y1 - 1 }};
-      } else if (vy === 0 && vx < 0) {
-        perppts = { a: { x: x1, y: y1 - 1 }, b: { x: x1, y: y1 + 1 }};
-      } else if (vy > 0 && vx > 0) {
-        const vslope = vy / vx;
-        const pslope = 1 / -vslope;
-        // Point-slope line equation
-        const pya = pslope * (x1 - 1) - pslope * x1 + y1;
-        const pyb = pslope * (x1 + 1) - pslope * x1 + y1;
-
-        perppts = { a: { x: x1 - 1, y: pya }, b: { x: x1 + 1, y: pyb }};
-      } else if (vy > 0 && vx < 0) {
-        const vslope = vy / vx;
-        const pslope = 1 / -vslope;
-        const pya = pslope * (x1 - 1) - pslope * x1 + y1;
-        const pyb = pslope * (x1 + 1) - pslope * x1 + y1;
-
-        perppts = { a: { x: x1 - 1, y: pya }, b: { x: x1 + 1, y: pyb }};
-      } else if (vy < 0 && vx > 0) {
-        const vslope = vy / vx;
-        const pslope = 1 / -vslope;
-        const pya = pslope * (x1 + 1) - pslope * x1 + y1;
-        const pyb = pslope * (x1 - 1) - pslope * x1 + y1;
-
-        perppts = { a: { x: x1 + 1, y: pya }, b: { x: x1 - 1, y: pyb }};
-      } else if (vy < 0 && vx < 0) {
-        const vslope = vy / vx;
-        const pslope = 1 / -vslope;
-        const pya = pslope * (x1 + 1) - pslope * x1 + y1;
-        const pyb = pslope * (x1 - 1) - pslope * x1 + y1;
-
-        perppts = { a: { x: x1 + 1, y: pya }, b: { x: x1 - 1, y: pyb }};
-      } else {
-        //
-      }
-
-      const { a, b } = perppts;
-      // if (a && b) drawLine(a.x, a.y, b.x, b.y);
-
-      return corners.filter(({ corner: c }) => {
-        if (!a || !b) return;
-        const det = (b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x);
-        return det > 0;
-      });
-    }
-
-    function updateTriangles([positionX, positionY]) {
-      const delim = ' ';
-      const className = 'clockwise-orientation';
-
-      if (!triangleContainer.childElementCount)
-        drawTriangles(triangleContainer, allEdgePts, position);
-
-      const triangles = triangleContainer.querySelectorAll('polygon');
-
-      triangles.forEach(t => {
-        const attr = t.getAttribute('points').split(delim);
-        const [a, b,] = attr.map(t => t.split(','));
-
-        const cw = isClockwise(a, b, [positionX, positionY]);
-        const acute = isAcute(a, b, [positionX, positionY]);
-        const pos = `${positionX},${positionY}`;
-
-        if (pos !== attr.pop()) {
-          attr.push(pos);
-          t.setAttribute('points', attr.join(delim));
-        }
-
-        t.classList[cw && acute ? "add" : "remove"](className);
-        t.classList[cw && !acute ? "add" : "remove"]("obtuse");
-        t.classList[!cw ? "add" : "remove"]("anti-clockwise");
-      });
-    }
-
-    function wrapPos(positionX, positionY) {
-      let x, y;
-
-      if (positionY > 150) y = positionY - 300;
-      else if (positionY < -150) y = positionY + 300;
-      else y = positionY;
-
-      if (positionX > 200) x = positionX - 400;
-      else if (positionX < -200) x = positionX + 400;
-      else x = positionX;
-
-      return [x, y];
-    }
-
-    function fireBullet(position, velocity) {
-      const speed = 200; // meters per second
-      const degrees = getRotate(gun);
-      const radians = degrees * Math.PI / 180; // toFixed(15)?
-      const vx = -Math.sin(radians);
-      const vy = Math.cos(radians);
-      const bulletTimeout = 5000; // miliseconds
-      const cannonLength = 8;
-
-      const el = document.createElementNS(namespaceURIsvg, 'circle');
-      el.classList.add('bullet');
-      el.setAttribute('r', 1);
-      el.setAttribute('cx', 0);
-      el.setAttribute('cy', 0);
-
-      const bullet = {
-        x: position.x + vx * cannonLength,
-        y: position.y + vy * cannonLength,
-        vx: vx * speed + velocity.x,
-        vy: vy * speed + velocity.y,
-        time: bulletTimeout,
-        node: bulletsContainer.appendChild(el)
-      }
-
-      bullets.push(bullet);
-    }
-
-    function getRotate(el) {
-      let [[, degrees] = ["0deg", "0"]] = [...el.style.transform.matchAll(degsRegex)];
-      return +degrees;
-    }
-
-    function updateBullets(elapsed) {
-      const deleteCount = 1;
-
-      [...bullets].forEach((bullet, index) => {
-        bullet.time -= elapsed;
-        const x = bullet.x + 0.001 * elapsed * bullet.vx;
-        const y = bullet.y + 0.001 * elapsed * bullet.vy;
-        bulletPt.x = x;
-        bulletPt.y = y;
-
-        if (bullet.time > 0 && ![...wallElements].some(w => w.isPointInFill(bulletPt))) {
-          [bullet.x, bullet.y] = wrapPos(x, y);
-          bullet.node.style.transform = `translate(${bullet.x}px, ${bullet.y}px)`;
-        } else {
-          bullet.node.remove();
-          bullets.splice(index, deleteCount);
-        }
-      });
-    }
-
-    function perpIntxn(baseSlope, xa, ya, xc, yc) {
-      let isx, isy;
-
-      // base is vertical
-      if (baseSlope === -Infinity || baseSlope === Infinity) {
-        isx = xa;
-        isy = yc;
-      } else if (baseSlope === 0) { // base is horizontal
-        isx = xc;
-        isy = ya;
-      } else {
-        const altitudeSlope = 1 / -baseSlope;
-        isx = (-altitudeSlope * xc + yc + baseSlope * xa - ya) / (baseSlope - altitudeSlope);
-        isy = altitudeSlope * isx - altitudeSlope * xc + yc;
-      }
-
-      return { x: isx, y: isy };
-    }
-
-    function drawLine(xa, ya, xb, yb, color = "black") {
-      const el = document.createElementNS(namespaceURIsvg, 'line');
-      el.setAttribute('x1', xa);
-      el.setAttribute('y1', ya);
-      el.setAttribute('x2', xb);
-      el.setAttribute('y2', yb);
-      el.setAttribute('stroke', color);
-      svg.appendChild(el);
-      return el;
-    }
-
-    function drawCircle(cx, cy, color = "black", r = 1) {
-      const el = document.createElementNS(namespaceURIsvg, 'circle');
-      el.setAttribute('cx', cx);
-      el.setAttribute('cy', cy);
-      el.setAttribute('r', r);
-      el.setAttribute('fill', color);
-      svg.appendChild(el);
-      return el;
-    }
-
-    function slope({ xa, ya, xb, yb }) {
-      return (yb - ya) / (xb - xa);
-    }
-
-    function isLandable(edge) {
-      // console.log("edge", edge, "slope", slope(edge));
-      return Object.is(slope(edge), +0);
-    }
-
-    function detectEdgeCollision([xc, yc], [x, y], radius) {
-      return ({ edge, wall }) => {
-        if (xc === x && yc === y) return;
-
-        const { xa, ya, xb, yb } = edge;
-        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;
-
-        const positionSeg = { xa: x, ya: y, xb: xc, yb: yc };
-        const edgeSeg = { xa: xa + riol, ya: ya - ruol, xb: xb + riol, yb: yb - ruol};
-
-        const { xa: x1, ya: y1, xb: x2, yb: y2 } = positionSeg;
-        const { xa: x3, ya: y3, xb: x4, yb: y4 } = edgeSeg;
-
-        // https://en.wikipedia.org/wiki/Intersection_(geometry)#Two_line_segments
-        // https://en.wikipedia.org/wiki/Cramer%27s_rule#Explicit_formulas_for_small_systems
-        const s = ((x3-x1)*(y4-y3)-(x4-x3)*(y3-y1))/((x2-x1)*(y4-y3)-(x4-x3)*(y2-y1));
-        const t = -((x2-x1)*(y3-y1)-(x3-x1)*(y2-y1))/((x2-x1)*(y4-y3)-(x4-x3)*(y2-y1));
-        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
-        }
-
-        return roundedS >= 0 && roundedS <= 1 && roundedT >= 0 && roundedT <= 1;
-      };
-    }
-
-    function detectCornerCollision([xc, yc], [x, y], radius) {
-      return c => {
-        if (xc === x && yc === y) return;
-
-        const d = distance(c.corner.x, c.corner.y, xc, yc);
-
-        if (d <= radius) return true;
-
-        const positionSeg = { xa: xc, ya: yc, xb: x, yb: y };
-        const posNormIntxn = perpIntxn(slope(positionSeg), x, y, c.corner.x, c.corner.y);
-        const cornerSeg = { xa: c.corner.x, ya: c.corner.y, xb: posNormIntxn.x, yb: posNormIntxn.y };
-
-        const { x: x0, y: y0 } = c.corner;
-        const { xa: x1, ya: y1, xb: x2, yb: y2 } = positionSeg;
-        const { xa: x3, ya: y3, xb: x4, yb: y4 } = cornerSeg;
-
-        // https://en.wikipedia.org/wiki/Intersection_(geometry)#Two_line_segments
-        // https://en.wikipedia.org/wiki/Cramer%27s_rule#Explicit_formulas_for_small_systems
-        const s = ((x3-x1)*(y4-y3)-(x4-x3)*(y3-y1))/((x2-x1)*(y4-y3)-(x4-x3)*(y2-y1));
-        const t = -((x2-x1)*(y3-y1)-(x3-x1)*(y2-y1))/((x2-x1)*(y4-y3)-(x4-x3)*(y2-y1));
-        const roundedT = +t.toFixed(2);
-
-        if (s >= 0 && roundedT <= 1) {
-          const xs = (x1 + s * (x2 - x1));
-          const ys = (y1 + s * (y2 - y1));
-          const xt = (x3 + roundedT * (x4 - x3));
-          const yt = (y3 + roundedT * (y4 - y3));
-          // [xs, ys] and [xt, yt] should be equal ([xs, ys] === [xy, yt])
-          // (...or about equal, notwithstanding rounding errors)
-          const sCollisionPt = [xs, ys];
-          const tCollisionPt = [xt, yt];
-          // drawCircle(posNormIntxn.x, posNormIntxn.y, "red");
-          // drawCircle(...tCollisionPt, "blue");
-        }
-
-        return s >= 0 && roundedT <= 1;
-      };
-    }
-
-    function detectCollision(edges, corners, [xc, yc], [x, y], velocity, radius) {
-      // edges oriented clockwise with ship
-      const fwdEdges = getForwardEdges(edges, { x, y })
-      const edgeColl = fwdEdges.find(detectEdgeCollision([xc, yc], [x, y], radius));
-
-      if (edgeColl) return edgeColl;
-
-      // corners ahead of ship
-      const fwdCorners = getForwardCorners(corners, { x, y }, velocity);
-      const cornersInPath = fwdCorners.filter(withinCollisionDistance({ x, y }, velocity, radius));
-      const cornerColl = cornersInPath.find(detectCornerCollision([xc, yc], [x, y], radius));
-
-      if (cornerColl) return cornerColl;
-    }
-
-    function withinCollisionDistance({ x: x1, y: y1 }, { x: x2, y: y2 }, distance) {
-      const diffx = x2;
-      const diffy = y2;
-      const detv = x2 * y1 - y2 * x1;
-      const dv = Math.sqrt(diffy ** 2 + diffx ** 2);
-      const slopev = slope({ xa: x1, ya: y1, xb: x1 + x2, yb: y1 + y2 });
-
-      return ({ corner: { x: x0, y: y0 }}) => {
-        const velNormIntxn = perpIntxn(slopev, x1, y1, x0, y0);
-        const dx = Math.max(x0, velNormIntxn.x) - Math.min(x0, velNormIntxn.x);
-        const dy = Math.max(y0, velNormIntxn.y) - Math.min(y0, velNormIntxn.y);
-        const d = Math.sqrt(dy ** 2 + dx ** 2);
-        return d <= distance;
-      };
-    }
-
-    function cornerContactPosition(xc, yc, x, y, corner, cLength) {
-      const positionSeg = { xa: xc, ya: yc, xb: x, yb: y };
-      const posNormIntxn = perpIntxn(slope(positionSeg), x, y, corner.x, corner.y);
-
-      // shortest distance between corner and path
-      const aLength = distance(corner.x, corner.y, posNormIntxn.x, posNormIntxn.y);
-      // distance from position/normal intersection
-      const bLength = Math.sqrt(Math.abs(cLength ** 2 - aLength ** 2));
-
-      const intxnSeg = document.createElementNS(namespaceURIsvg, 'line');
-      intxnSeg.setAttribute('x1', posNormIntxn.x);
-      intxnSeg.setAttribute('y1', posNormIntxn.y);
-      intxnSeg.setAttribute('x2', x);
-      intxnSeg.setAttribute('y2', y);
-
-      return intxnSeg.getPointAtLength(bLength);
-    }
-
-    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 baseNrmlIntxn = perpIntxn(baseSlope, xa, ya, x, y);
-      const basePosIntxn = lineIntxnPt(edgeSeg, positionSeg);
-
-      const baseSegLength = distance(baseNrmlIntxn.x, baseNrmlIntxn.y, basePosIntxn.x, basePosIntxn.y);
-      const normalSegLength = distance(baseNrmlIntxn.x, baseNrmlIntxn.y, x, y);
-
-      const theta = Math.atan(normalSegLength / baseSegLength);
-      const h = radius / Math.sin(theta);
-
-      const cl = document.createElementNS(namespaceURIsvg, 'line');
-      cl.setAttribute('x1', basePosIntxn.x);
-      cl.setAttribute('y1', basePosIntxn.y);
-      cl.setAttribute('x2', x);
-      cl.setAttribute('y2', y);
-
-      return cl.getPointAtLength(h);
-    }
-
-    function lineIntxnPt({ x1, y1, x2, y2 }, { x1: x3, y1: y3, x2: x4, y2: y4 }) {
-      // https://en.wikipedia.org/wiki/Line%E2%80%93line_intersection#Given_two_points_on_each_line
-      const denominator = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
-      const l1Det = x1 * y2 - y1 * x2;
-      const l2Det = x3 * y4 - y3 * x4;
-      const x = (l1Det * (x3 - x4) - (x1 - x2) * l2Det) / denominator;
-      const y = (l1Det * (y3 - y4) - (y1 - y2) * l2Det) / denominator;
-
-      return { x: x, y: y };
-    }
-
-    function updateShip(s, elapsed) {
-      const degrees = getRotate(gun);
-      if (rotate > 0) gun.style.transform = `rotate(${(+degrees + rotationSpeed * elapsed) % 360}deg)`;
-      else if (rotate < 0) gun.style.transform = `rotate(${(+degrees - rotationSpeed * elapsed) % 360}deg)`;
-
-      let { x: velocityX, y: velocityY } = s.velocity;
-      let { x: accelerationX, y: accelerationY } = s.acceleration;
-
-      velocityX = velocityX > 0 && velocityX + accelerationX < 0 ? 0 : velocityX + accelerationX;
-      velocityY = velocityY > 0 && velocityY + accelerationY < 0 ? 0 : velocityY + accelerationY;
-
-      s.velocity = { x: velocityX, y: velocityY };
-      velIndic.setAttribute('x2', s.velocity.x);
-      velIndic.setAttribute('y2', s.velocity.y);
-      acclIndic.setAttribute('x2', s.acceleration.x);
-      acclIndic.setAttribute('y2', s.acceleration.y);
-
-      const changeX = 0.001 * elapsed * velocityX;
-      const changeY = 0.001 * elapsed * velocityY;
-
-      let { x, y } = s.position;
-      // console.log("current position", x, y);
-      let position = [positionX, positionY] = [changeX + x, changeY + y];
-      let [xc, yc] = position;
-      // console.log("future position", xc, yc);
-
-      current = s.collision;
-      s.collision = detectCollision(mapEdges, mapCorners, [xc, yc], [x, y], s.velocity, shipRadius);
-      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(xc, yc, x, y, s.collision.corner, shipRadius);
-        } else if (s.collision.edge) {
-          posP = edgeContactPosition(xc, yc, x, y, s.collision.edge, shipRadius);
-        }
-
-        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) {
-          s.gearDown = false;
-          s.isLanded = false;
-        }
-
-        s.position = { x: positionX, y: positionY }
-        s.node.style.transform = `translate(${positionX}px, ${positionY}px)`;
-      }
-    }
-
-    function updateEdges(position) {
-      const collisionEdges = findAllEdges(allEdgePts, position);
-
-      [...edgeContainer.children].forEach(l => {
-        const x1 = l.getAttribute('x1');
-        const y1 = l.getAttribute('y1');
-        const x2 = l.getAttribute('x2');
-        const y2 = l.getAttribute('y2');
-        const edge = `${x1},${y1} ${x2},${y2}`;
-
-        if (collisionEdges.includes(edge))
-          if ([
-            edgeContainer.childElementCount <= allStartingEdges.length,
-            !allStartingEdges.includes(edge)
-          ].some(c => c))
-            l.remove();
-      });
-    }
-
-    function updateLines(elapsed, walls, position, velocity) {
-      const edges = walls.reduce((acc, wall) => {
-        return [...acc, ...wall.edges];
-      }, []);
-
-      const edgeIds = edges.map(e => `normal${e.xa}-${e.ya}-${e.xb}-${e.yb}`);
-      const nodes = [...linesContainer.children];
-
-      nodes.forEach(n => {
-        if (!edgeIds.includes(n.id)) n.remove();
-      });
-
-      // console.log("EDGES", edges);
-
-      edges.forEach(({ xa, ya, xb, yb }) => {
-        const id = `normal${xa}-${ya}-${xb}-${yb}`;
-        const g = linesContainer.querySelector(`#${id}`) || document.createElementNS(namespaceURIsvg, 'g');
-        const el = g.querySelector('line') || document.createElementNS(namespaceURIsvg, 'line');
-        const star = g.querySelector('circle') || document.createElementNS(namespaceURIsvg, 'circle');
-        star.setAttribute('r', 1);
-        // console.log(position, velocity, xa, ya, xb, yb);
-
-        const baseSlope = slope({ xa, ya, xb, yb });
-
-        let isx, isy;
-
-        // console.log("BASESLOPE", baseSlope);
-
-        if (baseSlope === -Infinity || baseSlope === Infinity) {
-          isx = xa;
-          isy = position.y;
-        } else if (baseSlope === 0) { // base is horizontal
-          isx = position.x;
-          isy = ya;
-        } else {
-          // const clPt = collisionPosition({ xa, ya, xb, yb }, position, velocity);
-          // console.log(clPt);
-          // isx = clPt.x;
-          // isy = clPt.y;
-          star.setAttribute('cx', 0);
-          star.setAttribute('cy', 0);
-        }
-
-        return g;
-      });
-    }
-
-    function init(edgePts) {
-      started = false;
-      const mult = 10000;
-
-      s.position = { x: 0, y: 0 };
-      s.velocity = { x: 0, y: 0 };
-
-      // s. velocity = { x: 2*mult, y: 7*mult };
-
-      s.acceleration = { x: 0, y: 0 };
-      s.rotate = 0;
-      s.collision = null;
-      s.isLanded = false;
+    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) {
       s.gearDown = false;
-
-      // [...edgeContainer.children].forEach(c => c.remove());;
-      // drawAllEdges(edgePts);
-      // allStartingEdges = findAllEdges(edgePts, position);
-      s.node.style.transform = `translate(${s.position.x}px, ${s.position.y}px)`;
-
-      wallElements.forEach(w => w.setAttribute('fill', 'black'));
-      // bg.style.fill = 'black';
-      time.innerText = "0";
+      s.isLanded = false;
     }
 
-    function firstFrame(timestamp) {
-      zero = timestamp;
-      zeroForTimer = timestamp;
-      previous = timestamp;
-      animate(timestamp);
+    s.position = { x: positionX, y: positionY }
+    s.node.style.transform = `translate(${positionX}px, ${positionY}px)`;
+  }
+}
+
+function updateEdges(position) {
+  // const collisionEdges = findAllEdges(allEdgePts, position);
+  const collisionEdges = [];
+
+  [...edgeContainer.children].forEach(l => {
+    const x1 = l.getAttribute('x1');
+    const y1 = l.getAttribute('y1');
+    const x2 = l.getAttribute('x2');
+    const y2 = l.getAttribute('y2');
+    const edge = `${x1},${y1} ${x2},${y2}`;
+
+    if (collisionEdges.includes(edge))
+      if ([
+        edgeContainer.childElementCount <= allStartingEdges.length,
+        !allStartingEdges.includes(edge)
+      ].some(c => c))
+        l.remove();
+  });
+}
+
+function updateLines(elapsed, walls, position, velocity) {
+  const edges = walls.reduce((acc, wall) => {
+    return [...acc, ...wall.edges];
+  }, []);
+
+  const edgeIds = edges.map(e => `normal${e.xa}-${e.ya}-${e.xb}-${e.yb}`);
+  const nodes = [...linesContainer.children];
+
+  nodes.forEach(n => {
+    if (!edgeIds.includes(n.id)) n.remove();
+  });
+
+  // console.log("EDGES", edges);
+
+  edges.forEach(({ xa, ya, xb, yb }) => {
+    const id = `normal${xa}-${ya}-${xb}-${yb}`;
+    const g = linesContainer.querySelector(`#${id}`) || document.createElementNS(namespaceURIsvg, 'g');
+    const el = g.querySelector('line') || document.createElementNS(namespaceURIsvg, 'line');
+    const star = g.querySelector('circle') || document.createElementNS(namespaceURIsvg, 'circle');
+    star.setAttribute('r', 1);
+    // console.log(position, velocity, xa, ya, xb, yb);
+
+    const baseSlope = slope({ xa, ya, xb, yb });
+
+    let isx, isy;
+
+    // console.log("BASESLOPE", baseSlope);
+
+    if (baseSlope === -Infinity || baseSlope === Infinity) {
+      isx = xa;
+      isy = position.y;
+    } else if (baseSlope === 0) { // base is horizontal
+      isx = position.x;
+      isy = ya;
+    } else {
+      // const clPt = collisionPosition({ xa, ya, xb, yb }, position, velocity);
+      // console.log(clPt);
+      // isx = clPt.x;
+      // isy = clPt.y;
+      star.setAttribute('cx', 0);
+      star.setAttribute('cy', 0);
     }
 
-    function animate(timestamp) {
-      const elapsed = timestamp - previous;
-      const delta = timestamp - zero;
-      let degrees = getRotate(gun);
-      previous = timestamp;
+    return g;
+  });
+}
 
-      if (delta >= 1000) {
-        fps.innerText = frameCount;
+function init() {
+  started = false;
+  const mult = 10000;
 
-        // debug.innerText = `velocity ${velocity}\n`
-        //   + 'bullets\nx\ty\tvx\tvy\n'
-        //   + bullets.map(b => {
-        //     return `${b.x.toFixed(2)}\t${b.y.toFixed(2)}\t${b.vx.toFixed(2)}\t${b.vy.toFixed(2)}`;
-        //   }).join("\n");
+  s.position = { x: 0, y: 0 };
+  s.velocity = { x: 0, y: 0 };
 
-        zero = timestamp;
-        frameCount = 0;
-      } else {
-        frameCount++;
+  // s. velocity = { x: 2*mult, y: 7*mult };
+
+  s.acceleration = { x: 0, y: 0 };
+  s.rotate = 0;
+  s.collision = null;
+  s.isLanded = false;
+  s.gearDown = false;
+
+  // [...edgeContainer.children].forEach(c => c.remove());;
+  // drawAllEdges(edgePts);
+  // allStartingEdges = findAllEdges(edgePts, position);
+  s.node.style.transform = `translate(${s.position.x}px, ${s.position.y}px)`;
+
+  wallElements.forEach(w => w.setAttribute('fill', 'black'));
+  // bg.style.fill = 'black';
+  time.innerText = "0";
+}
+
+function firstFrame(timestamp) {
+  zero = timestamp;
+  zeroForTimer = timestamp;
+  previous = timestamp;
+  animate(timestamp);
+}
+
+function animate(timestamp) {
+  const elapsed = timestamp - previous;
+  const delta = timestamp - zero;
+  let degrees = getRotate(gun);
+  previous = timestamp;
+
+  if (delta >= 1000) {
+    fps.innerText = frameCount;
+
+    // debug.innerText = `velocity ${velocity}\n`
+    //   + 'bullets\nx\ty\tvx\tvy\n'
+    //   + bullets.map(b => {
+    //     return `${b.x.toFixed(2)}\t${b.y.toFixed(2)}\t${b.vx.toFixed(2)}\t${b.vy.toFixed(2)}`;
+    //   }).join("\n");
+
+    zero = timestamp;
+    frameCount = 0;
+  } else {
+    frameCount++;
+  }
+
+  updateShip(s, elapsed);
+  updateBullets(elapsed);
+  // updateEdges(position);
+  if (drawCollisionLines) updateTriangles(position);
+
+  if (s.collision && !s.isLanded) {
+    started = false;
+    isReadingKeys = false;
+    wallElements.forEach(w => w.setAttribute('fill', 'red'));
+    // bg.style.fill = 'red';
+  }
+
+  if (restart) {
+    started = false;
+    restart = false;
+    init();
+    time.innerText = 0;
+  }
+
+  // const finished = edgeContainer.childElementCount <= 0;
+  // if (finished) started = false;
+
+  if (started) {
+    time.innerText = ((timestamp - zeroForTimer) * 0.001).toFixed(3);
+    // requestAnimationFrame(t => animate(t));
+    requestAnimationFrame(animate);
+  }
+}
+
+let force = 1;
+let spacePressed = false;
+let restartPressed = false;
+let upPressed = false;
+let downPressed = false;
+let leftPressed = false;
+let rightPressed = false;
+let rotateCWPressed = false;
+let rotateCCWPressed = false;
+
+document.addEventListener("keydown", function(e) {
+  if (!isReadingKeys) return;
+
+  if (!started) {
+    started = true;
+    frameCount = 0;
+    requestAnimationFrame(firstFrame);
+  }
+
+  switch (e.code) {
+    case "Space":
+      if (!spacePressed) {
+        spacePressed = true;
+        fireBullet(s.position, s.velocity);
       }
-
-      updateShip(s, elapsed);
-      updateBullets(elapsed);
-      // updateEdges(position);
-      if (drawCollisionLines) updateTriangles(position);
-
-      if (s.collision && !s.isLanded) {
-        started = false;
-        isReadingKeys = false;
-        wallElements.forEach(w => w.setAttribute('fill', 'red'));
-        // bg.style.fill = 'red';
+      break;
+    case "KeyW":
+    case "ArrowUp":
+      if (!upPressed) {
+        upPressed = true;
+        s.acceleration.y += -force;
       }
-
-      if (restart) {
-        started = false;
-        restart = false;
-        init(allEdgePts);
-        time.innerText = 0;
+      break;
+    case "KeyS":
+    case "ArrowDown":
+      if (!downPressed) {
+        downPressed = true;
+        s.acceleration.y += force;
       }
-
-      // const finished = edgeContainer.childElementCount <= 0;
-      // if (finished) started = false;
-
-      if (started) {
-        time.innerText = ((timestamp - zeroForTimer) * 0.001).toFixed(3);
-        // requestAnimationFrame(t => animate(t));
-        requestAnimationFrame(animate);
+      break;
+    case "KeyA":
+    case "ArrowLeft":
+      if (!leftPressed) {
+        leftPressed = true;
+        if (!s.gearDown) s.acceleration.x += -force;
       }
-    }
-
-    let force = 1;
-    let spacePressed = false;
-    let restartPressed = false;
-    let upPressed = false;
-    let downPressed = false;
-    let leftPressed = false;
-    let rightPressed = false;
-    let rotateCWPressed = false;
-    let rotateCCWPressed = false;
-
-    document.addEventListener("keydown", function(e) {
-      if (!isReadingKeys) return;
-
-      if (!started) {
-        started = true;
-        frameCount = 0;
-        requestAnimationFrame(firstFrame);
+      break;
+    case "KeyD":
+    case "ArrowRight":
+      if (!rightPressed) {
+        rightPressed = true;
+        if (!s.gearDown) s.acceleration.x += force;
       }
-
-      switch (e.code) {
-        case "Space":
-          if (!spacePressed) {
-            spacePressed = true;
-            fireBullet(s.position, s.velocity);
-          }
-          break;
-        case "KeyW":
-        case "ArrowUp":
-          if (!upPressed) {
-            upPressed = true;
-            s.acceleration.y += -force;
-          }
-          break;
-        case "KeyS":
-        case "ArrowDown":
-          if (!downPressed) {
-            downPressed = true;
-            s.acceleration.y += force;
-          }
-          break;
-        case "KeyA":
-        case "ArrowLeft":
-          if (!leftPressed) {
-            leftPressed = true;
-            if (!s.gearDown) s.acceleration.x += -force;
-          }
-          break;
-        case "KeyD":
-        case "ArrowRight":
-          if (!rightPressed) {
-            rightPressed = true;
-            if (!s.gearDown) s.acceleration.x += force;
-          }
-          break;
-        case "KeyQ":
-        case "Comma":
-          if (!rotateCCWPressed) {
-            rotateCCWPressed = true;
-            rotate += -1;
-          }
-          break;
-        case "KeyE":
-        case "Period":
-          if (!rotateCWPressed) {
-            rotateCWPressed = true;
-            rotate += 1;
-          }
-          break;
-        case "KeyP": // Pause
-          started = !started;
-          break;
-        case "KeyG": // Landing gear
-          s.gearDown = !s.gearDown;
-          break;
+      break;
+    case "KeyQ":
+    case "Comma":
+      if (!rotateCCWPressed) {
+        rotateCCWPressed = true;
+        rotate += -1;
       }
-    });
-
-    document.addEventListener("keyup", function(e) {
-      switch (e.code) {
-        case "Space":
-          spacePressed = false;
-          break;
-        case "KeyR":
-          isReadingKeys = true;
-          !started ? init(allEdgePts) : restart = true;
-          break;
-        case "KeyW":
-        case "ArrowUp":
-          if (upPressed) {
-            upPressed = false;
-            s.acceleration.y -= -force;
-          }
-          break;
-        case "KeyS":
-        case "ArrowDown":
-          if (downPressed) {
-            downPressed = false;
-            s.acceleration.y -= force;
-          }
-          break;
-        case "KeyA":
-        case "ArrowLeft":
-          if (leftPressed) {
-            leftPressed = false;
-            if (!s.gearDown) s.acceleration.x -= -force;
-          }
-          break;
-        case "KeyD":
-        case "ArrowRight":
-          if (rightPressed) {
-            rightPressed = false;
-            if (!s.gearDown) s.acceleration.x -= force;
-          }
-          break;
-        case "KeyQ":
-        case "Comma":
-          if (rotateCCWPressed) {
-            rotateCCWPressed = false;
-            rotate -= -1;
-          }
-          break;
-        case "KeyE":
-        case "Period":
-          if (rotateCWPressed) {
-            rotateCWPressed = false;
-            rotate -= 1;
-          }
-          break;
+      break;
+    case "KeyE":
+    case "Period":
+      if (!rotateCWPressed) {
+        rotateCWPressed = true;
+        rotate += 1;
       }
-    });
+      break;
+    case "KeyP": // Pause
+      started = !started;
+      break;
+    case "KeyG": // Landing gear
+      s.gearDown = !s.gearDown;
+      break;
+  }
+});
 
-    const pointer = svg.querySelector('#pointer');
-    const xp = pointer.querySelector('.x');
-    const yp = pointer.querySelector('.y');
-    const pointerPt = svg.createSVGPoint();
-
-    svg.addEventListener("pointermove", function({ clientX, clientY }) {
-      pointerPt.x = clientX;
-      pointerPt.y = clientY;
-      // https://www.sitepoint.com/how-to-translate-from-dom-to-svg-coordinates-and-back-again/
-      const svgP = pointerPt.matrixTransform(svg.getScreenCTM().inverse());
-
-      if (bg.isPointInFill(svgP)) {
-        // console.log(Math.trunc(svgP.x), Math.trunc(svgP.y));
-
-        xp.innerText = Math.trunc(svgP.x);
-        yp.innerText = Math.trunc(svgP.y);
+document.addEventListener("keyup", function(e) {
+  switch (e.code) {
+    case "Space":
+      spacePressed = false;
+      break;
+    case "KeyR":
+      isReadingKeys = true;
+      !started ? init() : restart = true;
+      break;
+    case "KeyW":
+    case "ArrowUp":
+      if (upPressed) {
+        upPressed = false;
+        s.acceleration.y -= -force;
       }
-    });
+      break;
+    case "KeyS":
+    case "ArrowDown":
+      if (downPressed) {
+        downPressed = false;
+        s.acceleration.y -= force;
+      }
+      break;
+    case "KeyA":
+    case "ArrowLeft":
+      if (leftPressed) {
+        leftPressed = false;
+        if (!s.gearDown) s.acceleration.x -= -force;
+      }
+      break;
+    case "KeyD":
+    case "ArrowRight":
+      if (rightPressed) {
+        rightPressed = false;
+        if (!s.gearDown) s.acceleration.x -= force;
+      }
+      break;
+    case "KeyQ":
+    case "Comma":
+      if (rotateCCWPressed) {
+        rotateCCWPressed = false;
+        rotate -= -1;
+      }
+      break;
+    case "KeyE":
+    case "Period":
+      if (rotateCWPressed) {
+        rotateCWPressed = false;
+        rotate -= 1;
+      }
+      break;
+  }
+});
 
+const pointer = svg.querySelector('#pointer');
+const xp = pointer.querySelector('.x');
+const yp = pointer.querySelector('.y');
+const pointerPt = svg.createSVGPoint();
+
+svg.addEventListener("pointermove", function({ clientX, clientY }) {
+  pointerPt.x = clientX;
+  pointerPt.y = clientY;
+  // https://www.sitepoint.com/how-to-translate-from-dom-to-svg-coordinates-and-back-again/
+  const svgP = pointerPt.matrixTransform(svg.getScreenCTM().inverse());
+
+  if (bg.isPointInFill(svgP)) {
+    // console.log(Math.trunc(svgP.x), Math.trunc(svgP.y));
+
+    xp.innerText = Math.trunc(svgP.x);
+    yp.innerText = Math.trunc(svgP.y);
+  }
+});
   //]]></script>
 </svg>