Refactor shooting and drawing

html/images/space.svg

@@ -265,27 +265,59 @@ const GravityEffect = {}
 // };
 
 // systems
-const Shoot = (() => {
+const Combat = (() => {
   const cannonLength = 8;
   const scalar = 50;
 
   return {
-    update: ({ entity_id }) => {
+    shoot: ({ 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 origin = { x: x + run, y: y + rise };
 
+      const mag = Math.sqrt(rise**2 + run**2)
+      const normalized = {
+        rise: rise / mag,
+        run: run / mag
+      }
+
+      // console.log("RISE", rise);
+      // console.log("RUN", run);
+      // console.log("NORMALIZED", normalized);
+
       const { x: vx, y: vy } = Velocity[entity_id];
       Velocity[entity_id] = { x: vx - run, y: vy - rise };
 
+      const target = {};
+      let i = 0;
+      while (true) {
+        const x = origin.x + normalized.run * i;
+        const y = origin.y + normalized.rise * i;
+        const pt = { x, y };
+        target.x = pt.x;
+        target.y = pt.y;
+
+        const hitShips = Ships.find(({ entity_id: id }) => {
+          const node = Nodes[id];
+          const p = Position[id];
+          const body = node.querySelector(".body");
+          const hit = body.isPointInFill({ x: pt.x - p.x, y: pt.y - p.y });
+          // console.log("checking ship", id, "position", pt, hit);
+          return hit;
+        });
+
+        const offBg = !bg.isPointInFill(pt);
+        const wallHits = [...wallElements].find(el => el.isPointInFill(pt));
+
+        i += 1;
+        if (hitShips || offBg || wallHits) break;
+      }
+
       return {
         origin,
-        target: {
-          x: origin.x + run * scalar,
-          y: origin.y + rise * scalar
-        }
+        target
       };
     }
   };
@@ -293,12 +325,29 @@ const Shoot = (() => {
 
 const Draw = (() => {
   return {
-    update: ({ entity_id }) => {
+    ship: ({ entity_id }) => {
       const node = Nodes[entity_id];
       const gun = CannonNodes[entity_id];
       newPos = Position[entity_id];
       node.style.transform = `translate(${newPos.x}px, ${newPos.y}px)`;
       gun.style.transform = `rotate(${Degrees[entity_id]}deg)`;
+    },
+
+    shot: ({ entity_id }, shot) => {
+      const gun = CannonNodes[entity_id];
+      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);
+      const tipEl = gun.querySelector(".tip")
+      tipEl.classList.remove("recoil");
+      setTimeout(() => tipEl.classList.add('recoil'), 0);
+
+      return bulletsContainer.appendChild(lineEl);
     }
   };
 })();
@@ -792,8 +841,8 @@ const Move = (() => {
   }
 
   return {
-    update: ({ entity_id }, elapsed) => {
-      const gravity = 0.1;
+    ship: ({ entity_id }, elapsed) => {
+      const gravity = 1;
       // affectedByWalls & affectedByGravity toggles?
       const isAffectedByGravity = GravityEffect[entity_id];
       const { x: px, y: py } = Position[entity_id];
@@ -1060,7 +1109,7 @@ function init() {
     Degrees[entity_id] = s.degrees;
     Nodes[entity_id] = document.querySelector(`#${entity_id}`);
     CannonNodes[entity_id] = document.querySelector(`#${entity_id} .cannon`);
-    GravityEffect[entity_id] = true;
+    GravityEffect[entity_id] = false;
     // let node = document.querySelector(`#${entity_id}`);
     // node.style.transform = `translate(${s.position.x}px, ${s.position.y}px)`;
   }
@@ -1086,7 +1135,7 @@ function init() {
   });
 
   Ships.forEach(({ entity_id }) => {
-    Draw.update({ entity_id });
+    Draw.ship({ entity_id });
   });
 
   [...edgeContainer.children].forEach(c => c.remove());;
@@ -1357,9 +1406,9 @@ function animate(timestamp) {
   }
 
   Ships.forEach(({ entity_id }) => {
-    Move.update({ entity_id }, elapsed);
+    Move.ship({ entity_id }, elapsed);
     Rotate.update({ entity_id }, elapsed);
-    Draw.update({ entity_id });
+    Draw.ship({ entity_id });
   });
 
   // updateEdges(position);
@@ -1442,7 +1491,8 @@ document.addEventListener("keydown", function(e) {
     case "Space":
       if (!spacePressed) {
         spacePressed = true;
-        drawShot(Shoot.update(Ships[0]));
+        const coords = Combat.shoot(Ships[0]);
+        Draw.shot(Ships[0], coords);
       }
       break;
     case "KeyW":