diff --git a/html/images/space.svg b/html/images/space.svg
index c0d9d9f..972e743 100644
--- a/html/images/space.svg
+++ b/html/images/space.svg
@@ -6,7 +6,6 @@
font-size: 4pt;
font-family: courier;
color: white;
- display: none;
}
#info {
@@ -491,6 +490,11 @@ function fireBullet(position, velocity) {
observer.observe(bulletsContainer, config);
const lineEl = document.createElementNS(namespaceURIsvg, 'line');
+ // bulletsContainer.addEventListener("DOMContentLoaded", (event) => {
+ // console.log("bulletsContainer fully loaded and parsed");
+ // });
+
+
lineEl.classList.add('bullet');
// lineEl.setAttribute('x1', position.x + vx * cannonLength);
// x: position.x + vx * cannonLength,
@@ -505,17 +509,45 @@ function fireBullet(position, velocity) {
y: position.y + rise
}
+ const bulletDestination = {
+ x: bulletOrigin.x + run * 50,
+ y: bulletOrigin.y + rise * 50
+ }
+
lineEl.setAttribute('x1', bulletOrigin.x);
lineEl.setAttribute('y1', bulletOrigin.y);
- lineEl.setAttribute('x2', bulletOrigin.x + run * 50);
- lineEl.setAttribute('y2', bulletOrigin.y + rise * 50);
+ lineEl.setAttribute('x2', bulletDestination.x);
+ lineEl.setAttribute('y2', bulletDestination.y);
+
+ const startTime = performance.now()
+
+ 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;
+ }
+
+ const endTime = performance.now()
+
+ console.log(`Took ${endTime - startTime} milliseconds`)
+
// lineEl.addEventListener('transitionrun', e => console.log('transitionrun', e));
// lineEl.addEventListener('transitionstart', e => console.log('transitionstart', e));
// lineEl.addEventListener('transitionend', e => console.log('transitionend', e));
lineEl.addEventListener('transitionend', e => e.target.remove());
- lineEl.addEventListener('transitioncancel', e => console.log(e));
+
+ if (hit) {
+ lineEl.setAttribute('x2', pt.x);
+ lineEl.setAttribute('y2', pt.y);
+ }
+
const appended = bulletsContainer.appendChild(lineEl);
+ // [...bulletsContainer.children][0].classList.add('fade');
// I don't know why I have to delay it
+ // console.log("path length", lineEl.getTotalLength());
+
+
setTimeout(() => appended.classList.add('fade'), 1000);
// const bullet = {