Move drawing the shot out of the Shoot system

html/images/space.svg

@@ -245,42 +245,15 @@ const Shoot = (() => {
       const { x, y } = Position[entity_id];
       const rise = Math.sin(radians) * cannonLength;
       const run = Math.cos(radians) * cannonLength;
+      const origin = { x: x + run, y: y + rise };
 
-      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);
+      return {
+        origin,
+        target: {
+          x: origin.x + run * scalar,
+          y: origin.y + rise * scalar
+        }
+      };
     }
   };
 })();
@@ -1358,6 +1331,31 @@ let rotateCWPressed = false;
 let rotateCCWPressed = false;
 const { entity_id } = Ships[0];
 
+function drawShot(shot) {
+  const lineEl = document.createElementNS(namespaceURIsvg, 'line');
+  lineEl.classList.add('bullet');
+  lineEl.setAttribute('x1', shot.origin.x);
+  lineEl.setAttribute('y1', shot.origin.y);
+  lineEl.setAttribute('x2', shot.target.x);
+  lineEl.setAttribute('y2', shot.target.y);
+  lineEl.addEventListener('transitionend', e => e.target.remove());
+  setTimeout(() => lineEl.classList.add('fade'), 1000);
+
+  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);
+  }
+
+  return bulletsContainer.appendChild(lineEl);
+}
+
 document.addEventListener("keydown", function(e) {
   if (!isReadingKeys) return;
 
@@ -1371,7 +1369,7 @@ document.addEventListener("keydown", function(e) {
     case "Space":
       if (!spacePressed) {
         spacePressed = true;
-        Shoot.update(Ships[0]);
+        drawShot(Shoot.update(Ships[0]));
       }
       break;
     case "KeyW":