diff --git a/html/images/space.svg b/html/images/space.svg index b8dcdfe..ba61374 100644 --- a/html/images/space.svg +++ b/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; } }; })();