Edit handle click on 2d array

azharaiz · Nov 28, 2019 · ba88de8 · ba88de8
1 parent f3a584e
commit ba88de8
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 74 deletions.
diff --git a/src/components/board/index.js b/src/components/board/index.js
@@ -7,6 +7,7 @@ export default class Board extends React.Component {
 
     renderSquare(i, j, squareShade) {
         return <Square
+            key = {i + j}
             piece = {this.props.squares[i][j]}
             style = {this.props.squares[i][j]? this.props.squares[i][j].style : null}
             shade = {squareShade}
@@ -21,7 +22,7 @@ export default class Board extends React.Component {
             for(let j = 0; j < 5; j++){
                 squareRows.push(this.renderSquare(i, j, "square"));
             }
-            board.push(<div className="board-row">{squareRows}</div>)
+            board.push(<div key={i} className="board-row">{squareRows}</div>)
         }
 
         return (
@@ -30,8 +31,4 @@ export default class Board extends React.Component {
             </div>
         );
     }
-}
-
-function isEven(num){
-    return num % 2 === 0;
 }
diff --git a/src/pages/game.js b/src/pages/game.js
@@ -19,98 +19,52 @@ export default class Game extends React.Component {
     };
   }
 
-  handleClick(i) {
+  handleClick(index) {
     const squares = this.state.squares.slice();
+    const xAxis = index[1],
+      yAxis = index[0];
+    console.log(index);
 
     if (this.state.sourceSelection === -1) {
-      if (!squares[i] || squares[i].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[i]) {
-          squares[i].style = { ...squares[i].style, backgroundColor: "" };
+        if (squares[yAxis][xAxis]) {
+          squares[yAxis][xAxis].style = { ...squares[yAxis][xAxis].style, backgroundColor: "" };
         }
       } else {
-        squares[i].style = {
-          ...squares[i].style,
+        squares[yAxis][xAxis].style = {
+          ...squares[yAxis][xAxis].style,
           backgroundColor: "RGB(220,220,220)"
-        }; // Emerald from http://omgchess.blogspot.com/2015/09/chess-board-color-schemes.html
+        };
         this.setState({
           status: "Choose destination for the selected piece",
-          sourceSelection: i
+          sourceSelection: [xAxis,yAxis]
         });
       }
-    } else if (this.state.sourceSelection > -1) {
-      squares[this.state.sourceSelection].style = {
-        ...squares[this.state.sourceSelection].style,
+    } else {
+      console.log(this.state.sourceSelection)
+      const x = this.state.sourceSelection[0], y = this.state.sourceSelection[1]; 
+      squares[y][x].style = {
+        ...squares[y][x].style,
         backgroundColor: ""
       };
-      if (squares[i] && squares[i].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 isDestEnemyOccupied = squares[i] ? true : false;
-        const diffSrcDest = i - this.state.sourceSelection;
-        let enemy = 0;
-        let enemyBefore;
-        if (diffSrcDest === 10) {
-          enemy = i - 5;
-        } else if (diffSrcDest === -10) {
-          enemy = i + 5;
-        } else if (diffSrcDest === 2) {
-          enemy = i - 1;
-        } else if (diffSrcDest === -2) {
-          enemy = i + 1;
-        } else if (diffSrcDest === 12) {
-          enemy = i - 6;
-        } else if (diffSrcDest === -12) {
-          enemy = i + 6;
-        } else if (diffSrcDest === 8) {
-          enemy = i - 4;
-        } else if (diffSrcDest === -8) {
-          enemy = i + 4;
-        }
-        enemyBefore = squares[enemy];
-        const isEnemyBeforeOccupied = enemyBefore ? true : false;
-        const isMovePossible = squares[
-          this.state.sourceSelection
-        ].isMovePossible(
-          this.state.sourceSelection,
-          i,
-          isDestEnemyOccupied,
-          isEnemyBeforeOccupied
-        );
-        const srcToDestPath = squares[
-          this.state.sourceSelection
-        ].getSrcToDestPath(this.state.sourceSelection, i);
-        const isMoveLegal = this.isMoveLegal(srcToDestPath);
+
+        // const isMovePossible,isMoveLegal;
 
-        if (isMovePossible && isMoveLegal) {
-          squares[i] = squares[this.state.sourceSelection];
+        if (this.isMoveLegal){//isMovePossible && isMoveLegal) {
+          squares[yAxis][xAxis] = squares[this.state.sourceSelection];
           squares[this.state.sourceSelection] = null;
-          if (isEnemyBeforeOccupied) {
-            if (diffSrcDest === 12) {
-              squares[i - 6] = null;
-            } else if (diffSrcDest === -12) {
-              squares[i + 6] = null;
-            } else if (diffSrcDest === 10) {
-              squares[i - 5] = null;
-            } else if (diffSrcDest === -10) {
-              squares[i + 5] = null;
-            } else if (diffSrcDest === 8) {
-              squares[i - 4] = null;
-            } else if (diffSrcDest === -8) {
-              squares[i + 4] = null;
-            } else if (diffSrcDest === 2) {
-              squares[i - 1] = null;
-            } else if (diffSrcDest === -2) {
-              squares[i + 1] = null;
-            }
-          }
           let player = this.state.player === 1 ? 2 : 1;
           let turn = this.state.turn === "red" ? "green" : "red";
           this.setState({
@@ -153,7 +107,7 @@ export default class Game extends React.Component {
           <div className="game-board">
             <Board
               squares={this.state.squares}
-              onClick={i => this.handleClick(i)}
+              onClick={index => this.handleClick(index)}
             />
           </div>
           <div className="game-info">