Refactor timeouts

html/images/space.svg

@@ -355,11 +355,9 @@ const Draw = (() => {
       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'), 100);
 
       const explosionEl = document.createElementNS(namespaceURIsvg, 'circle');
       explosionEl.classList.add('explosion');
@@ -367,10 +365,15 @@ const Draw = (() => {
       explosionEl.setAttribute('cy', shot.target.y);
       explosionEl.setAttribute('fill', 'orange');
       explosionEl.addEventListener('transitionend', e => e.target.remove());
-      setTimeout(() => explosionEl.classList.add('flash'), 100);
+      bulletsContainer.appendChild(explosionEl);
+
+      setTimeout(() => {
+        explosionEl.classList.add('flash');
+        tipEl.classList.add('recoil');
+      }, 100);
 
       const le = bulletsContainer.appendChild(lineEl);
-      bulletsContainer.appendChild(explosionEl);
+      setTimeout(() => lineEl.classList.add('fade'), 1000);
 
       return le;
     }