Shot ships fall with gravity

html/images/space.svg

@@ -43,6 +43,16 @@
       opacity: 0;
     }
 
+    .explosion {
+      r: 5px;
+      transition: r 0.01s ease-in;
+      opacity: 0.7;
+    }
+
+    .explosion.flash {
+      r: 0px;
+    }
+
     #triangles polygon {
       fill-opacity: 0.2;
       stroke-width: 1px;
@@ -299,7 +309,7 @@ const Combat = (() => {
         target.x = pt.x;
         target.y = pt.y;
 
-        const hitShips = Ships.find(({ entity_id: id }) => {
+        const hitShips = Ships.filter(({ entity_id: id }) => {
           const node = Nodes[id];
           const p = Position[id];
           const body = node.querySelector(".body");
@@ -311,8 +321,10 @@ const Combat = (() => {
         const offBg = !bg.isPointInFill(pt);
         const wallHits = [...wallElements].find(el => el.isPointInFill(pt));
 
+        hitShips.forEach(({ entity_id }) => GravityEffect[entity_id] = true);
+
         i += 1;
-        if (hitShips || offBg || wallHits) break;
+        if (hitShips.length || offBg || wallHits) break;
       }
 
       return {
@@ -335,6 +347,7 @@ const Draw = (() => {
 
     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);
@@ -343,11 +356,24 @@ const Draw = (() => {
       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);
+
+      const explosionEl = document.createElementNS(namespaceURIsvg, 'circle');
+      explosionEl.classList.add('explosion');
+      explosionEl.setAttribute('cx', shot.target.x);
+      explosionEl.setAttribute('cy', shot.target.y);
+      explosionEl.setAttribute('fill', 'orange');
+      explosionEl.addEventListener('transitionend', e => e.target.remove());
+      setTimeout(() => explosionEl.classList.add('flash'), 100);
+
+      const le = bulletsContainer.appendChild(lineEl);
+      bulletsContainer.appendChild(explosionEl);
+
+      return le;
     }
   };
 })();