Bounded movement against robots.

client/board.js

@@ -3,17 +3,23 @@ const Board = function({ parent, squares }) {
     this.squares = squares;
     
     this.walls = {};
+    this.robots = {};
     this.listeners = {};
 
     this.drawSquares();
 };
 
 Board.prototype.drawRobots = function(robots) {
+    this.robots = {};
+
     robots.forEach(({ color, i, j }) => {
+        this.robots[`${i}-${j}`] = true;
+
         const { x, y } = this.squares.ijToXy({ i, j });
         const s = this.squares.sideLength;
         const id = color.replace('#', '').toUpperCase();
 
+        // Get robot from ij: document.querySelector('[data-robot=i-j]')
         const robot = document.createElement('div');
         robot.className = 'content-robot';
         robot.style.background = color;
@@ -22,9 +28,7 @@ Board.prototype.drawRobots = function(robots) {
         robot.style.width = s + 'px';
         robot.style.left = x + 'px';
         robot.style.top = y + 'px';
-        robot.id = id
+        robot.id = id;
-
-        // Find if a robot is on a square: document.querySelector('[data-robot=i-j]')
         robot.dataset.robot = `${i}-${j}`;
 
         const shadow = document.createElement('div');
@@ -36,8 +40,7 @@ Board.prototype.drawRobots = function(robots) {
         shadow.style.left = x + 'px';
         shadow.style.top = y + 'px';
         shadow.dataset.parentRobot = id;
-        shadow.dataset.currentI = i;
+        shadow.dataset.currentIJ = `${i}-${j}`;
-        shadow.dataset.currentJ = j;
 
         this.parent.appendChild(robot);
         this.parent.appendChild(shadow);
@@ -86,7 +89,7 @@ Board.prototype.drawWalls = function(edges) {
         wall.style.left = x + 'px';
         wall.style.top = y + 'px';
 
-        // Find if edge has a wall: document.querySelector('[data-wall=i1-j1-i2-j2]')
+        // Get wall from edge: document.querySelector('[data-wall=i1-j1-i2-j2]')
         wall.dataset.wall = edge;
 
         if (i1 === i2) {
@@ -105,21 +108,21 @@ Board.prototype.drawWalls = function(edges) {
 // i2 and j2 are the requested position.
 // Check all the edges crossed between the two to find if it's a valid move.
 Board.prototype.getBlockers = function({ i1, j1, i2, j2 }) {
-    // const upperEdge = `${i1}-${j1}-${i2}-${j2}`;
-    // const lowerEdge = `${i1}-${j1}-${i2}-${j2}`;
-
     if (i1 !== i2 && j1 !== j2) {
-        return "uh oh";
+        return "diagonal move";
     }
 
-
     if (i1 === i2 && j1 == j2) {
         return;
     } else if (i1 === i2 && j1 > j2) {
-        // Moving up
+        // Moving up.
-        // Moving down.
         for (let j = j2; j < j1; j++) {
             const edge = `${i1}-${j + 1}-${i1 + 1}-${j + 1}`;
+            const ij = `${i1}-${j}`;
+
+            if (this.robots[ij]) {
+                return document.querySelector(`[data-robot='${ij}']`);
+            }
 
             if (this.walls[edge]) {
                 return document.querySelector(`[data-wall='${edge}']`);
@@ -130,6 +133,11 @@ Board.prototype.getBlockers = function({ i1, j1, i2, j2 }) {
         // Moving down.
         for (let j = j1; j < j2; j++) {
             const edge = `${i1}-${j + 1}-${i1 + 1}-${j + 1}`;
+            const ij = `${i1}-${j + 1}`;
+
+            if (this.robots[ij]) {
+                return document.querySelector(`[data-robot='${ij}']`);
+            }
 
             if (this.walls[edge]) {
                 return document.querySelector(`[data-wall='${edge}']`);
@@ -139,23 +147,31 @@ Board.prototype.getBlockers = function({ i1, j1, i2, j2 }) {
         // Moving right.
         for (let i = i1; i < i2; i++) {
             const edge = `${i + 1}-${j1}-${i + 1}-${j1 + 1}`;
+            const ij = `${i + 1}-${j1}`;
+
+            if (this.robots[ij]) {
+                return document.querySelector(`[data-robot='${ij}']`);
+            }
 
             if (this.walls[edge]) {
                 return document.querySelector(`[data-wall='${edge}']`);
             }
         }
-    } else if (j1 === j2 && i1 > i2) {
+    } else {
         // Moving left.
         for (let i = i2; i < i1; i++) {
             const edge = `${i + 1}-${j1}-${i + 1}-${j1 + 1}`;
+            const ij = `${i}-${j1}`;
+
+            if (this.robots[ij]) {
+                return document.querySelector(`[data-robot='${ij}']`);
+            }
 
             if (this.walls[edge]) {
                 return document.querySelector(`[data-wall='${edge}']`);
             }
         }
     }
-
-    // return "uh oh";
 };
 
 Board.prototype.onRobotDragStart = function(evt) {
@@ -175,9 +191,8 @@ Board.prototype.onRobotDragStart = function(evt) {
 };
 
 Board.prototype.onRobotDrag = function(dragTarget, evt) {
-    const i1 = dragTarget.dataset.currentI * 1;
+    const [ i1, j1 ] = dragTarget.dataset.currentIJ.split('-').map(v => v * 1);
-    const j1 = dragTarget.dataset.currentJ * 1;
+    // cost { i: i1, j: j1 } = this.squares.xyToIj({ x: evt.x - evt.movementX, y: evt.y - evt.movementY });
-    // const { i: i1, j: j1 } = this.squares.xyToIj({ x: evt.x - evt.movementX, y: evt.y - evt.movementY });
     const { i: i2, j: j2 } = this.squares.xyToIj({ x: evt.x, y: evt.y });
 
     const blockage = this.getBlockers({ i1, j1, i2, j2 });

server/game.js

@@ -24,7 +24,7 @@ Game.prototype.getPlayers = function() {
 Game.prototype.getRobots = function() {
     return [
         {i: 4, j: 3, color: '#E00000' },
-        {i: 1, j: 3, color: '#00C000' },
+        {i: 4, j: 7, color: '#00C000' },
         {i: 1, j: 19, color: '#0000C0' }
     ];
 }