Move shooting into a system

html/images/space.svg

@@ -235,6 +235,56 @@ const Degrees = {};
 // };
 
 // systems
+const Shoot = (() => {
+  const cannonLength = 8;
+  const scalar = 50;
+
+  return {
+    update: ({ entity_id }) => {
+      const radians = Degrees[entity_id] * Math.PI / 180; // toFixed(15)?
+      const { x, y } = Position[entity_id];
+      const rise = Math.sin(radians) * cannonLength;
+      const run = Math.cos(radians) * cannonLength;
+
+      const bulletOrigin = {
+        x: x + run,
+        y: y + rise
+      }
+
+      const bulletDestination = {
+        x: bulletOrigin.x + run * scalar,
+        y: bulletOrigin.y + rise * scalar
+      }
+
+      const lineEl = document.createElementNS(namespaceURIsvg, 'line');
+
+      lineEl.classList.add('bullet');
+      lineEl.setAttribute('x1', bulletOrigin.x);
+      lineEl.setAttribute('y1', bulletOrigin.y);
+      lineEl.setAttribute('x2', bulletDestination.x);
+      lineEl.setAttribute('y2', bulletDestination.y);
+      lineEl.addEventListener('transitionend', e => e.target.remove());
+
+      let pt, hit;
+      for (let i = 0; i <= lineEl.getTotalLength(); i++) {
+        pt = lineEl.getPointAtLength(i);
+        hit = [...wallElements].find(el => el.isPointInFill(pt));
+        if (hit) break;
+      }
+
+      if (hit) {
+        lineEl.setAttribute('x2', pt.x);
+        lineEl.setAttribute('y2', pt.y);
+      }
+
+      const appended = bulletsContainer.appendChild(lineEl);
+
+      // I don't know why I have to delay it
+      setTimeout(() => appended.classList.add('fade'), 1000);
+    }
+  };
+})();
+
 const Rotate = (() => {
   const metersPerMillisecond = 0.001;
 
@@ -957,7 +1007,6 @@ const map = (function(els) {
 })(wallElements);
 
 let allStartingEdges;
-let rotationSpeed = 0.25;
 let started = false;
 let restart = false;
 let isReadingKeys = true;
@@ -1053,90 +1102,6 @@ function wrapPos(positionX, positionY) {
   return [x, y];
 }
 
-function fireBullet(position, degrees) {
-  const cannonLength = 8;
-  const radians = degrees * Math.PI / 180; // toFixed(15)?
-  const rise = Math.sin(radians) * cannonLength;
-  const run = Math.cos(radians) * cannonLength;
-
-  const bulletOrigin = {
-    x: position.x + run,
-    y: position.y + rise
-  }
-
-  const bulletDestination = {
-    x: bulletOrigin.x + run * 50,
-    y: bulletOrigin.y + rise * 50
-  }
-
-  // Options for the observer (which mutations to observe)
-  const config = { attributes: false, childList: true, subtree: true };
-  // Callback function to execute when mutations are observed
-  const callback = (mutationList, observer) => {
-    for (const mutation of mutationList) {
-      if (mutation.type === "childList") {
-        // [...mutation.addedNodes].forEach(b => b.classList.add('fade'));
-        // mutation.addedNodes.forEach(bullet => bullet.classList.add('fade'));
-      } else if (mutation.type === "attributes") {
-      }
-    }
-  };
-
-  // Create an observer instance linked to the callback function
-  const observer = new MutationObserver(callback);
-
-  // Start observing the target node for configured mutations
-  // observer.observe(bulletsContainer, config);
-
-  const lineEl = document.createElementNS(namespaceURIsvg, 'line');
-
-  lineEl.classList.add('bullet');
-  lineEl.setAttribute('x1', bulletOrigin.x);
-  lineEl.setAttribute('y1', bulletOrigin.y);
-  lineEl.setAttribute('x2', bulletDestination.x);
-  lineEl.setAttribute('y2', bulletDestination.y);
-  // lineEl.addEventListener('transitionrun', e => console.log('transitionrun', e));
-  // lineEl.addEventListener('transitionstart', e => console.log('transitionstart', e));
-  lineEl.addEventListener('transitionend', e => e.target.remove());
-
-  const startTime = performance.now()
-
-  let pt, hit;
-  for (let i = 0; i <= lineEl.getTotalLength(); i++) {
-    pt = lineEl.getPointAtLength(i);
-    hit = [...wallElements].find(el => el.isPointInFill(pt));
-    if (hit) break;
-  }
-
-  const endTime = performance.now()
-  // console.log(`Took ${endTime - startTime} milliseconds`)
-
-  // const screenCTM = svg.getScreenCTM();
-  // const startTime = performance.now()
-  //
-  // let pt, hit;
-  // for (let i = 0; i <= lineEl.getTotalLength(); i++) {
-  //   pt = lineEl.getPointAtLength(i);
-  //   const domPt = pt.matrixTransform(screenCTM);
-  //   const elements = document.elementsFromPoint(domPt.x, domPt.y);
-  //   hit = elements.find(el => el.classList.contains('wall'));
-  //
-  //   if (hit) break;
-  // }
-  //
-  // const endTime = performance.now()
-
-  if (hit) {
-    lineEl.setAttribute('x2', pt.x);
-    lineEl.setAttribute('y2', pt.y);
-  }
-
-  const appended = bulletsContainer.appendChild(lineEl);
-
-  // I don't know why I have to delay it
-  setTimeout(() => appended.classList.add('fade'), 1000);
-}
-
 function drawLine(xa, ya, xb, yb, color = "black") {
   const el = document.createElementNS(namespaceURIsvg, 'line');
   el.setAttribute('x1', xa);
@@ -1374,22 +1339,18 @@ function animate(timestamp) {
     frameCount++;
   }
 
-  // s.node.style.transform = `translate(${s.position.x}px, ${s.position.y}px)`;
-
-  // Move.update(Ships[0], elapsed);
   Ships.forEach(({ entity_id }) => {
     Move.update({ entity_id }, elapsed);
     Rotate.update({ entity_id }, elapsed);
   });
 
-  let newPos = updateShip(s, elapsed);
+  // let newPos = updateShip(s, elapsed);
   newPos = Position[Ships[0].entity_id];
   let newVel = Velocity[Ships[0].entity_id];
 
   s.node.style.transform = `translate(${newPos.x}px, ${newPos.y}px)`;
   positionEl.innerText = `${newPos.x},${newPos.y}`;
   velocityEl.innerText = `${newVel.x},${newVel.y}`;
-
   gun.style.transform = `rotate(${Degrees[Ships[0].entity_id]}deg)`;
 
   // updateEdges(position);
@@ -1444,7 +1405,7 @@ document.addEventListener("keydown", function(e) {
     case "Space":
       if (!spacePressed) {
         spacePressed = true;
-        fireBullet(s.position, s.degrees);
+        Shoot.update(Ships[0]);
       }
       break;
     case "KeyW":