fix movement 2d array

azharaiz · Nov 29, 2019 · 5f9b2c9 · 5f9b2c9
1 parent ba88de8
commit 5f9b2c9
Show file tree

Hide file tree

Showing 2 changed files with 113 additions and 65 deletions.
diff --git a/src/components/piece/piece.js b/src/components/piece/piece.js
@@ -1,40 +1,37 @@
 export default class Piece {
-    constructor(player, iconUrl){
-        this.player = player;
-        this.style = {backgroundImage: "url("+iconUrl+")"};
+  constructor(player, iconUrl) {
+    this.player = player;
+    this.style = { backgroundImage: "url(" + iconUrl + ")" };
+  }
+  // src = [xSrc, ySrc], dest = [xDest, yDest], isDestEnemyOccupied t/f, isEnemyBeforeOccupied t/f
+  isMovePossible(src, dest, isDestEnemyOccupied, isEnemyBeforeOccupied) {
+    const xSrc = src[0],
+      ySrc = src[1],
+      xDest = dest[0],
+      yDest = dest[1];
+    let xDiff = xDest - xSrc,
+      yDiff = yDest - ySrc;
+    if (
+      !isDestEnemyOccupied &&
+      !(xDiff === 0 && yDiff === 0) &&
+      xDiff >= -1 && xDiff <= 1 &&
+      yDiff >= -1 && yDiff <= 1
+    ) {
+      return true;
+    } else if (
+      isEnemyBeforeOccupied &&
+      !isDestEnemyOccupied &&
+      (xDiff === 2 || xDiff === -2 || xDiff === 0) &&
+      (yDiff === 2 || yDiff === -2 || yDiff === 0) &&
+      !(xDiff === 0 && yDiff === 0)
+    ) {
+      return true;
     }
-
-    isMovePossible(src, dest, isDestEnemyOccupied, isEnemyBeforeOccupied) {
-        if (
-          (src + 1 === dest ||
-            src + 4 === dest ||
-            src + 5 === dest ||
-            src + 6 === dest ||
-            src - 1 === dest ||
-            src - 4 === dest ||
-            src - 5 === dest ||
-            src - 6 === dest) &&
-          !isDestEnemyOccupied
-        ) {
-          return true;
-        } else if (
-          (src + 2 === dest ||
-            src + 8 === dest ||
-            src + 10 === dest ||
-            src + 12 === dest ||
-            src - 2 === dest ||
-            src - 8 === dest ||
-            src - 10 === dest ||
-            src - 12 === dest) &&
-          isEnemyBeforeOccupied
-        ) {
-          return true;
-        }
-        return false;
-      }
-
-      getSrcToDestPath(src, dest) {
-        let path = [];
-        return path;
-      }
-}
+    return false;
+  }
+
+  getSrcToDestPath(src, dest) {
+    let path = [];
+    return path;
+  }
+}
diff --git a/src/pages/game.js b/src/pages/game.js
@@ -13,7 +13,7 @@ export default class Game extends React.Component {
       player: 1,
       sourceSelection: -1,
       status: "",
-      turn: "red",
+      turn: "white",
       score1: 0,
       score2: 0
     };
@@ -23,16 +23,21 @@ export default class Game extends React.Component {
     const squares = this.state.squares.slice();
     const xAxis = index[1],
       yAxis = index[0];
-    console.log(index);
 
     if (this.state.sourceSelection === -1) {
-      if (!squares[yAxis][xAxis] || squares[yAxis][xAxis].player !== this.state.player) {
+      if (
+        !squares[yAxis][xAxis] ||
+        squares[yAxis][xAxis].player !== this.state.player
+      ) {
         this.setState({
           status:
             "Wrong selection. Choose player " + this.state.player + " pieces."
         });
         if (squares[yAxis][xAxis]) {
-          squares[yAxis][xAxis].style = { ...squares[yAxis][xAxis].style, backgroundColor: "" };
+          squares[yAxis][xAxis].style = {
+            ...squares[yAxis][xAxis].style,
+            backgroundColor: ""
+          };
         }
       } else {
         squares[yAxis][xAxis].style = {
@@ -41,32 +46,71 @@ export default class Game extends React.Component {
         };
         this.setState({
           status: "Choose destination for the selected piece",
-          sourceSelection: [xAxis,yAxis]
+          sourceSelection: [xAxis, yAxis]
         });
       }
     } else {
-      console.log(this.state.sourceSelection)
-      const x = this.state.sourceSelection[0], y = this.state.sourceSelection[1]; 
+      // xAxis & yAxis === destination click
+      // x & y === source click
+      console.log("src:", this.state.sourceSelection);
+      console.log("dest:", [xAxis, yAxis]);
+      const x = this.state.sourceSelection[0],
+        y = this.state.sourceSelection[1];
       squares[y][x].style = {
         ...squares[y][x].style,
         backgroundColor: ""
       };
-
-      if (squares[yAxis][xAxis] && squares[yAxis][xAxis].player === this.state.player) {
+
+      if (
+        squares[yAxis][xAxis] &&
+        squares[yAxis][xAxis].player === this.state.player
+      ) {
         this.setState({
           status: "Wrong selection. Choose valid source and destination again.",
           sourceSelection: -1
         });
       } else {
         const squares = this.state.squares.slice();
-
-        // const isMovePossible,isMoveLegal;
+        const isDestOccupied = squares[yAxis][xAxis] ? true : false;
+        const diffX = xAxis - x,
+          diffY = y - yAxis;
+        let isMoveLegal = true;
+        console.log("diff:", [diffX, diffY]);
+        if (
+          diffX > 2 ||
+          diffY > 2 ||
+          diffX < -2 ||
+          diffY < -2 ||
+          (diffX === 0 && diffY === 0)
+        ) {
+          isMoveLegal = false;
+        }
+        let enemy = false;
+        let isEnemyBeforeOccupied = false;
+        if (this.checkMovement(diffX, diffY)) {
+          enemy = this.checkMovement(diffX, diffY);
+          isEnemyBeforeOccupied = squares[enemy[1] + y][enemy[0] + x]
+            ? true
+            : false;
+        }
 
-        if (this.isMoveLegal){//isMovePossible && isMoveLegal) {
-          squares[yAxis][xAxis] = squares[this.state.sourceSelection];
-          squares[this.state.sourceSelection] = null;
+        const isMovePossible = squares[y][x].isMovePossible(
+          [x, y],
+          [xAxis, yAxis],
+          isDestOccupied,
+          isEnemyBeforeOccupied
+        );
+        // const isMovePossible,isMoveLegal;
+        if (isMoveLegal && isMovePossible) {
+          squares[yAxis][xAxis] = squares[y][x];
+          squares[y][x] = null;
+          if (enemy) {
+            console.log("return:", [enemy[0], enemy[1]]);
+            console.log("eat:", [enemy[0] + x, enemy[1] + y]);
+            squares[enemy[1] + y][enemy[0] + x] = null;
+          }
           let player = this.state.player === 1 ? 2 : 1;
-          let turn = this.state.turn === "red" ? "green" : "red";
+          let turn = this.state.turn === "white" ? "black" : "white";
           this.setState({
             sourceSelection: -1,
             squares: squares,
@@ -82,22 +126,29 @@ export default class Game extends React.Component {
           });
         }
       }
+      console.log("=====");
     }
   }
 
-  /**
-   * Check all path indices are null. For one steps move of pawn/others or jumping moves of knight array is empty, so  move is legal.
-   * @param  {[type]}  srcToDestPath [array of board indices comprising path between src and dest ]
-   * @return {Boolean}
-   */
-  isMoveLegal(srcToDestPath) {
-    let isLegal = true;
-    for (let i = 0; i < srcToDestPath.length; i++) {
-      if (this.state.squares[srcToDestPath[i]] !== null) {
-        isLegal = false;
-      }
+  checkMovement(x, y) {
+    if (x === 0 && y === 2) {
+      return [0, -1];
+    } else if (x === 0 && y === -2) {
+      return [0, 1];
+    } else if (x === 2 && y === 0) {
+      return [1, 0];
+    } else if (x === -2 && y === 0) {
+      return [-1, 0];
+    } else if (x === 2 && y === 2) {
+      return [1, -1];
+    } else if (x === -2 && y === 2) {
+      return [-1, -1];
+    } else if (x === 2 && y === -2) {
+      return [1, 1];
+    } else if (x === -2 && y === -2) {
+      return [-1, 1];
     }
-    return isLegal;
+    return false;
   }
 
   render() {