Clean up some

html/images/space.svg

@@ -198,10 +198,12 @@
 
   <!-- <polygon class="wall" points="20,20 40,20 40,40 20,40" /> -->
   <!-- <polygon class="wall" points="10,10 20,10 20,20 10,20" /> -->
-  <!-- <polygon class="wall" points="20,-50 -50,-50 -60,-70 -50,-100 80,-100 80,-90 -20,-90 -20,-60 40,-60 40,40 20,40" /> -->\
+  <!-- <polygon class="wall" points="20,-50 -50,-50 -60,-70 -50,-100 80,-100 80,-90 -20,-90 -20,-60 40,-60 40,40 20,40" /> -->
+
+  <polygon class="wall" points="-20,20 10,40 40,20 0,100" />
 
   <!-- Wrench shape -->
-  <polygon class="wall" points="-10,-30 -10,-40 30,-50 60,-30 80,0 150,0 150,10 60,50 -10,40 -20,20 20,20 20,-20" />
+  <!-- <polygon class="wall" points="-10,-30 -10,-40 30,-50 60,-30 80,0 150,0 150,10 60,50 -10,40 -20,20 20,20 20,-20" /> -->
 
   <!-- <g> -->
   <!--   <polygon class="wall" points="-130,-80 -40,-70 -70,-10" /> -->
@@ -340,9 +342,10 @@ const Draw = (() => {
     ship: ({ entity_id }) => {
       const node = Nodes[entity_id];
       const gun = CannonNodes[entity_id];
-      newPos = Position[entity_id];
+      const p = Position[entity_id];
-      node.style.transform = `translate(${newPos.x}px, ${newPos.y}px)`;
+      const deg = Degrees[entity_id];
-      gun.style.transform = `rotate(${Degrees[entity_id]}deg)`;
+      node.style.transform = `translate(${p.x}px, ${p.y}px)`;
+      gun.style.transform = `rotate(${deg}deg)`;
     },
 
     shot: ({ entity_id }, shot) => {
@@ -1138,12 +1141,21 @@ function init() {
     Nodes[entity_id] = document.querySelector(`#${entity_id}`);
     CannonNodes[entity_id] = document.querySelector(`#${entity_id} .cannon`);
     GravityEffect[entity_id] = false;
-    // let node = document.querySelector(`#${entity_id}`);
-    // node.style.transform = `translate(${s.position.x}px, ${s.position.y}px)`;
   }
 
   Ships.forEach(({ entity_id }) => {
     setInits(entity_id, {
+      acceleration: { x: 0, y: 0 },
+      velocity: { x: 0, y: 0 },
+      position: { x: 3, y: 0 },
+      angularAcceleration: 0,
+      angularVelocity: 0,
+      degrees: 0
+    });
+  });
+
+  // player ship
+  setInits("ship1", {
     acceleration: { x: 0, y: 0 },
     velocity: { x: 0, y: 0 },
     position: { x: -50, y: 0 },
@@ -1151,20 +1163,8 @@ function init() {
     angularVelocity: 0,
     degrees: 0
   });
-  });
 
-  setInits("ship1", {
+  Ships.forEach(Draw.ship);
-    acceleration: { x: 0, y: 0 },
-    velocity: { x: 0, y: 0 },
-    position: { x: 3, y: -6 },
-    angularAcceleration: 0,
-    angularVelocity: 0,
-    degrees: 0
-  });
-
-  Ships.forEach(({ entity_id }) => {
-    Draw.ship({ entity_id });
-  });
 
   [...edgeContainer.children].forEach(c => c.remove());;
 
@@ -1433,10 +1433,10 @@ function animate(timestamp) {
     frameCount++;
   }
 
-  Ships.forEach(({ entity_id }) => {
+  Ships.forEach(s => {
-    Move.ship({ entity_id }, elapsed);
+    Move.ship(s, elapsed);
-    Rotate.update({ entity_id }, elapsed);
+    Rotate.update(s, elapsed);
-    Draw.ship({ entity_id });
+    Draw.ship(s);
   });
 
   // updateEdges(position);
@@ -1478,34 +1478,6 @@ 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);
-  const tipEl = document.querySelector("#ship1 .cannon .tip")
-  tipEl.classList.remove("recoil");
-  setTimeout(() => tipEl.classList.add('recoil'), 0);
-
-  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;