feat: squares and rooks added

package.json

@@ -12,7 +12,9 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build"
   },
   "devDependencies": {
     "babel": "^6.23.0",

src/App.css

@@ -7,6 +7,11 @@ button {
   box-shadow: 0 0 0 0;
 }
 
+.quaterBox {
+  flex: 1;
+  background-color: blue;
+}
+
 h1 {
   font-size: 50px;
   background-color: rgba(255, 255, 255, 0.75);
@@ -33,10 +38,10 @@ h1 {
 }
 
 .Rook {
-  width: 30px;
-  height: 30px;
+  width: 150px;
+  height: 150px;
   border-radius: 50%;
-  background-color: red;
+  background-image: url(require("./src/rook.svg"));
   cursor: pointer;
 }
 .BoardSizeChoice {

src/App.js

@@ -13,27 +13,21 @@ class App extends Component {
       solutionNumber: 0,
       displaySolution: null,
       totalNumberOfSolutions: null,
-      boardDim: 4
+      boardDim: 0
     };
   }
 
-  async findSolutions() {
-    await this.setState({ allRes: calc(4) });
+  findSolutions = async n => {
+    await this.setState({ allRes: calc(Number(n)) });
     await this.setState({ displaySolution: this.state.allRes[0] });
     this.setState({ totalNumberOfSolutions: this.state.allRes.length });
-  }
-
-  // delay(t) {
-  //   return new Promise(resolve => {
-  //     setTimeout(() => resolve(console.log("happy")), t);
-  //   });
-  // }
+  };
 
   theRook(local, displaySolution) {
     if (displaySolution) {
       return displaySolution.map((possi, possj) => {
         if ("poss" + possj + possi === local) {
-          return <div className="Rook" />;
+          return <img src={require("./rook.svg")} className="Rook" />;
         }
       });
     }
@@ -44,10 +38,8 @@ class App extends Component {
   };
 
   updateSolutionNumber = value => {
-    console.log("value", value);
     this.setState({ solutionNumber: value });
     this.setState((prevState, props) => {
-      console.log(prevState.allRes);
       return { displaySolution: prevState.allRes[value] };
     });
   };
@@ -59,7 +51,6 @@ class App extends Component {
   ////////////////////////////////////////////
   solutionDisplayUpdate() {}
   render() {
-    console.log("the state", this.state);
     return (
       <div className="MaxWidth">
         <h1> nQueens & nRooks Algorithm </h1>
@@ -74,7 +65,7 @@ class App extends Component {
           </div>
           <UserSettings
             updateBoardDim={this.updateBoardDim}
-            findSolutions={this.findSolutionsSwitch}
+            findSolutions={this.findSolutions}
             colorChoice={this.colorChoice}
             totalNumberOfSolutions={this.state.totalNumberOfSolutions}
             updateSolutionNumber={this.updateSolutionNumber}

src/Rooks.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+
+
+class Rooks extends Component {
+
+
+  render(){
+    return(
+
+    )
+  }
+}
+
+export default Rooks;

src/components/Board.js

@@ -4,7 +4,7 @@ class Board extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      boardDim: 4,
+      boardDim: 0,
       boardHeight: "600px",
       boardWidth: "600px",
       tileDim: "150px",
@@ -23,12 +23,7 @@ class Board extends Component {
     }
     return arri.map((el, i) => {
       return (
-        <div
-          className="Square"
-          key={i}
-          id={"poss" + el + arrj[i]}
-          style={this.squareDimentions(el, i, this.state.boardDim)}
-        >
+        <div key={i} style={this.squareDimentions(el, i, this.state.boardDim)}>
           {this.props.theRook(
             "poss" + el + arrj[i],
             this.props.displaySolution
@@ -75,21 +70,14 @@ class Board extends Component {
   sortingTheTileColor(el, i, dim) {
     if (dim % 2 === 0) {
       return el % 2
-        ? i % 2
-          ? this.state.theChosenTileColor[0]
-          : this.state.theChosenTileColor[1]
-        : i % 2
-          ? this.state.theChosenTileColor[1]
-          : this.state.theChosenTileColor[0];
+        ? i % 2 ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.7)"
+        : i % 2 ? "rgba(255, 255, 255, 0.7)" : "rgba(0, 0, 0, 0.7)";
     } else {
-      return i % 2
-        ? this.state.theChosenTileColor[1]
-        : this.state.theChosenTileColor[0];
+      return i % 2 ? "rgba(255, 255, 255, 0.7)" : "rgba(0, 0, 0, 0.7)";
     }
   }
 
   squareDimentions(el, i, dim) {
-    console.log(this.props.theChosenTileColor[1]);
     return {
       width: this.state.tileDim,
       height: this.state.tileDim,
@@ -101,7 +89,6 @@ class Board extends Component {
   }
 
   render() {
-    console.log("the state", this.boardDimentions());
     return (
       <div style={this.boardDimentions()}>{this.renderingThesquares()}</div>
     );

src/components/UserSettings.js

@@ -5,7 +5,7 @@ class UserSettings extends Component {
     super(props);
     this.state = {
       solutionNumber: 0,
-      boardDim: 4
+      boardDim: 0
     };
   }
   gameType(type) {
@@ -65,8 +65,11 @@ class UserSettings extends Component {
             />
           </div>
           <button
-            onClick={() =>
-              this.props.updateBoardDim(Number(this.boardDim.value))}
+            onClick={() => {
+              if (this.boardDim.value < 12) {
+                this.props.updateBoardDim(Number(this.boardDim.value));
+              }
+            }}
           >
             Make Board
           </button>
@@ -75,7 +78,9 @@ class UserSettings extends Component {
         {this.gameType("nQueens")}
         {this.gameType("nRooks")}
         <div className="Title">
-          <button onClick={this.props.findSolutions}> GO! </button>
+          <button onClick={() => this.props.findSolutions(this.boardDim.value)}>
+            GO!
+          </button>
         </div>
         {/* <div className="Color">
           {this.boardColor("blue", "lightblue")}