diff --git a/html/images/space.svg b/html/images/space.svg
index 26616e6..26ae702 100644
--- a/html/images/space.svg
+++ b/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":