WIP: move multiple ships

html/images/space.svg

@@ -255,6 +255,8 @@ const Acceleration = {};
 const AngularAcceleration = {};
 const AngularVelocity = {};
 const Degrees = {};
+const Nodes = {};
+const CannonNodes = {};
 
 // Points = {
 //   "wall_1": "0,0 2,0 1,1",
@@ -288,6 +290,18 @@ const Shoot = (() => {
   };
 })();
 
+const Draw = (() => {
+  return {
+    update: ({ entity_id }) => {
+      const node = Nodes[entity_id];
+      const gun = CannonNodes[entity_id];
+      newPos = Position[entity_id];
+      node.style.transform = `translate(${newPos.x}px, ${newPos.y}px)`;
+      gun.style.transform = `rotate(${Degrees[entity_id]}deg)`;
+    }
+  };
+})();
+
 const Rotate = (() => {
   const metersPerMillisecond = 0.001;
 
@@ -778,9 +792,12 @@ const Move = (() => {
 
   return {
     update: ({ entity_id }, elapsed) => {
+      const gravity = 0.1;
+      // affectedByWalls & affectedByGravity toggles?
       const { x: px, y: py } = Position[entity_id];
       const { x: vx, y: vy } = Velocity[entity_id];
-      const { x: ax, y: ay } = Acceleration[entity_id];
+      let { x: ax, y: ay } = Acceleration[entity_id];
+      ay += gravity;
 
       const vr = {
         x: Math.round(vx * 100 + ax * 100) / 100,
@@ -1039,8 +1056,10 @@ function init() {
     AngularAcceleration[entity_id] = s.angularAcceleration;
     AngularVelocity[entity_id] = s.angularVelocity;
     Degrees[entity_id] = s.degrees;
-    let node = document.querySelector(`#${entity_id}`);
-    node.style.transform = `translate(${s.position.x}px, ${s.position.y}px)`;
+    Nodes[entity_id] = document.querySelector(`#${entity_id}`);
+    CannonNodes[entity_id] = document.querySelector(`#${entity_id} .cannon`);
+    // let node = document.querySelector(`#${entity_id}`);
+    // node.style.transform = `translate(${s.position.x}px, ${s.position.y}px)`;
   }
 
   Ships.forEach(({ entity_id }) => {
@@ -1063,6 +1082,10 @@ function init() {
     degrees: 0
   });
 
+  Ships.forEach(({ entity_id }) => {
+    Draw.update({ entity_id });
+  });
+
   [...edgeContainer.children].forEach(c => c.remove());;
 
   wallElements.forEach(w => w.setAttribute('fill', 'black'));
@@ -1333,17 +1356,9 @@ function animate(timestamp) {
   Ships.forEach(({ entity_id }) => {
     Move.update({ entity_id }, elapsed);
     Rotate.update({ entity_id }, elapsed);
+    Draw.update({ entity_id });
   });
 
-  // let newPos = updateShip(s, elapsed);
-  newPos = Position[Ships[0].entity_id];
-  let newVel = Velocity[Ships[0].entity_id];
-
-  s.node.style.transform = `translate(${newPos.x}px, ${newPos.y}px)`;
-  positionEl.innerText = `${newPos.x},${newPos.y}`;
-  velocityEl.innerText = `${newVel.x},${newVel.y}`;
-  gun.style.transform = `rotate(${Degrees[Ships[0].entity_id]}deg)`;
-
   // updateEdges(position);
   if (drawCollisionLines) updateTriangles(position);
 
@@ -1392,7 +1407,7 @@ function drawShot(shot) {
   lineEl.setAttribute('y2', shot.target.y);
   lineEl.addEventListener('transitionend', e => e.target.remove());
   setTimeout(() => lineEl.classList.add('fade'), 1000);
-  const tipEl = document.querySelector(".cannon .tip")
+  const tipEl = document.querySelector("#ship1 .cannon .tip")
   tipEl.classList.remove("recoil");
   setTimeout(() => tipEl.classList.add('recoil'), 0);