Merge pull request #1 from t03jam8/boardsize

Boardsize

package.json

@@ -12,5 +12,8 @@
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "devDependencies": {
+    "babel": "^6.23.0"
   }
-}
+}

public/index.html

@@ -10,6 +10,7 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans|Carrois+Gothic+SC" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/App.css

@@ -1 +1,160 @@
+* {
+  font-family: "Alegreya Sans";
+}
 
+button {
+  background-color: #fafafa;
+  box-shadow: 0 0 0 0;
+}
+
+h1 {
+  font-size: 50px;
+  background-color: rgba(255, 255, 255, 0.75);
+  border-bottom: solid;
+  border-top: solid;
+  border-width: thin;
+}
+
+.MaxWidth {
+  max-width: 100vw;
+  height: 100vh;
+  margin: auto;
+  /* background-color: #fafafa; */
+  background: radial-gradient(
+      farthest-corner at 200px 40px,
+      rgba(255, 255, 255, 0.6),
+      rgba(155, 155, 155, 1)
+    ),
+    url("https://i.pinimg.com/564x/dc/db/25/dcdb25898500b461badb22d17f3a1835.jpg");
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.Rook {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background-color: red;
+  cursor: pointer;
+}
+.BoardSizeChoice {
+  flex: 1;
+  display: flex;
+  justify-content: space-around;
+  flex-direction: column;
+  align-items: center;
+  background-color: transparent;
+  border-bottom: solid;
+  border-width: thin;
+  margin-right: 10px;
+  margin-left: 10px;
+}
+#DarkSquare {
+  background-color: black;
+}
+#LightSquare {
+  background-color: white;
+}
+.CenteringContainer {
+  height: 620px;
+  width: 800px;
+  display: flex;
+  justify-content: space-between;
+}
+.BoardPositions {
+  height: 620px;
+  width: 620px;
+  border: solid;
+  border-color: black;
+  border-width: thin;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.75);
+}
+.UserOptions {
+  height: 400px;
+  width: 150px;
+  display: flex;
+  flex-direction: column;
+  border: solid;
+  border-width: thin;
+  border-color: black;
+  background: rgba(255, 255, 255, 0.75);
+}
+.Square:hover {
+  filter: invert(20%);
+}
+.Title {
+  flex: 0.33;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.GameType {
+  flex: 0.4;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.Type {
+  font-size: 15px;
+  margin-left: 20px;
+}
+.CheckBox {
+  margin-right: 20px;
+}
+.Color {
+  background-color: orange;
+  flex: 2;
+  display: flex;
+  flex-direction: column;
+}
+.ColorChoice {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-left: 20px;
+  margin-right: 20px;
+}
+#Blues {
+  background-color: blue;
+}
+#Blacks {
+  background-color: red;
+}
+#Reds {
+  background-color: yellow;
+}
+#Oranges {
+  background-color: green;
+}
+#Purples {
+  background-color: purple;
+}
+.Controler {
+  flex: 1;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+.PreviousButtion {
+  width: 0;
+  height: 0;
+  border-top: 15px solid transparent;
+  border-bottom: 15px solid transparent;
+  border-right: 15px solid black;
+}
+.SolutionNumber {
+  font-size: 40px;
+}
+.NextButtion {
+  width: 0;
+  height: 0;
+  border-top: 15px solid transparent;
+  border-bottom: 15px solid transparent;
+  border-left: 15px solid black;
+}

src/App.js

@@ -1,9 +1,87 @@
 import React, { Component } from "react";
+import UserSettings from "./components/UserSettings";
+import { calc } from "./RooksEquation";
+import Board from "./components/Board";
 import "./App.css";
 
 class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      tileColor: ["black", "white"],
+      allRes: null,
+      solutionNumber: 0,
+      displaySolution: null,
+      totalNumberOfSolutions: null,
+      boardDim: 4
+    };
+  }
+
+  async findSolutions() {
+    await this.setState({ allRes: calc(4) });
+    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" />;
+        }
+      });
+    }
+  }
+
+  colorChoice = (color1, color2) => {
+    this.setState({ tileColor: [color1, color2] });
+  };
+
+  updateSolutionNumber = value => {
+    console.log("value", value);
+    this.setState({ solutionNumber: value });
+    this.setState((prevState, props) => {
+      console.log(prevState.allRes);
+      return { displaySolution: prevState.allRes[value] };
+    });
+  };
+
+  updateBoardDim = settingsBoardDim => {
+    this.setState({ boardDim: settingsBoardDim });
+  };
+
+  ////////////////////////////////////////////
+  solutionDisplayUpdate() {}
   render() {
-    return <div className="App" />;
+    console.log("the state", this.state);
+    return (
+      <div className="MaxWidth">
+        <h1> nQueens & nRooks Algorithm </h1>
+        <div className="CenteringContainer">
+          <div className="BoardPositions">
+            <Board
+              boardDim={this.state.boardDim}
+              displaySolution={this.state.displaySolution}
+              theRook={this.theRook}
+              theChosenTileColor={this.state.tileColor}
+            />
+          </div>
+          <UserSettings
+            updateBoardDim={this.updateBoardDim}
+            findSolutions={this.findSolutionsSwitch}
+            colorChoice={this.colorChoice}
+            totalNumberOfSolutions={this.state.totalNumberOfSolutions}
+            updateSolutionNumber={this.updateSolutionNumber}
+          />
+        </div>
+      </div>
+    );
   }
 }
 

src/RooksEquation.js

@@ -0,0 +1,31 @@
+exports.calc = n => {
+  let rooks = 0;
+  let j = 0;
+  let solutions = 0;
+  let col = Array(n).fill(0);
+  const individualRes = [1, 2, 3, 4];
+  const allRes = [];
+
+  function recur() {
+    for (let i = 0; i < n; i++) {
+      if (col[i] === 0) {
+        col[i] = 1;
+        individualRes[j] = i;
+        rooks++;
+        if (rooks === n) {
+          allRes.push(individualRes.concat());
+          solutions++;
+        }
+        j++;
+        recur();
+        col[i] = 0;
+        j--;
+        rooks--;
+      }
+    }
+  }
+  recur();
+  return allRes;
+};
+
+// calc(3);