feat: added queens choice, just need to get the svg to change

src/App.css

@@ -21,9 +21,8 @@ h1 {
 }
 
 .MaxWidth {
-  max-width: 100vw;
+  width: 100vw;
   height: 100vh;
-  margin: auto;
   /* background-color: #fafafa; */
   background: radial-gradient(
       farthest-corner at 200px 40px,
@@ -41,9 +40,9 @@ h1 {
   width: 150px;
   height: 150px;
   border-radius: 50%;
-  background-image: url(require("./src/rook.svg"));
   cursor: pointer;
 }
+
 .BoardSizeChoice {
   flex: 1;
   display: flex;
@@ -56,12 +55,7 @@ h1 {
   margin-right: 10px;
   margin-left: 10px;
 }
-#DarkSquare {
-  background-color: black;
-}
-#LightSquare {
-  background-color: white;
-}
+
 .CenteringContainer {
   height: 620px;
   width: 800px;
@@ -125,21 +119,7 @@ h1 {
   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;
@@ -163,3 +143,47 @@ h1 {
   border-bottom: 15px solid transparent;
   border-left: 15px solid black;
 }
+
+input {
+  font-size: 20px;
+}
+
+button {
+  font-size: 15px;
+}
+@media only screen and (max-device-width: 375px) and (-webkit-min-device-pixel-ratio: 2) {
+  * {
+    margin: 0;
+  }
+
+  div.MaxWidth {
+    height: 655px;
+    width: 370px;
+  }
+
+  .UserOptions {
+    background-color: blue;
+    width: 300px;
+    height: 200px;
+  }
+
+  .CenteringContainer {
+    flex-direction: column-reverse;
+    align-content: center;
+    width: 95vw;
+    height: 300px;
+  }
+
+  .BoardPositions {
+    width: 95vw;
+  }
+
+  div.Board {
+    width: 200px;
+    height: 200px;
+  }
+
+  h1 {
+    font-size: 20px;
+  }
+}

src/App.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import UserSettings from "./components/UserSettings";
-import { calc } from "./RooksEquation";
+import { calcRooks } from "./RooksEquation";
+import { calcQueens } from "./QueensEquation";
 import Board from "./components/Board";
 import "./App.css";
 
@@ -13,21 +14,30 @@ class App extends Component {
       solutionNumber: 0,
       displaySolution: null,
       totalNumberOfSolutions: null,
-      boardDim: 0
+      boardDim: 0,
+      gameType: "Rooks"
     };
   }
 
   findSolutions = async n => {
-    await this.setState({ allRes: calc(Number(n)) });
+    if (this.state.gameType === "Rooks") {
+      await this.setState({ allRes: calcRooks(Number(n)) });
+    } else {
+      await this.setState({ allRes: calcQueens(Number(n)) });
+    }
     await this.setState({ displaySolution: this.state.allRes[0] });
     this.setState({ totalNumberOfSolutions: this.state.allRes.length });
   };
 
-  theRook(local, displaySolution) {
+  theRook(local, displaySolution, GameType) {
     if (displaySolution) {
       return displaySolution.map((possi, possj) => {
         if ("poss" + possj + possi === local) {
-          return <img src={require("./rook.svg")} className="Rook" />;
+          if (GameType === "Rooks") {
+            return <img src={require("./rook.svg")} className="Rook" />;
+          } else {
+            return <img src={require("./queen.svg")} className="Rook" />;
+          }
         }
       });
     }
@@ -48,6 +58,10 @@ class App extends Component {
     this.setState({ boardDim: settingsBoardDim });
   };
 
+  updateGameType = type => {
+    this.setState({ gameType: type });
+  };
+
   ////////////////////////////////////////////
   solutionDisplayUpdate() {}
   render() {
@@ -64,6 +78,7 @@ class App extends Component {
             />
           </div>
           <UserSettings
+            gameType={this.updateGameType}
             updateBoardDim={this.updateBoardDim}
             findSolutions={this.findSolutions}
             colorChoice={this.colorChoice}

src/QueensEquation.js

@@ -0,0 +1,52 @@
+exports.calcQueens = n => {
+  let queens = 0;
+  let j = 0;
+  let solutions = 0;
+  let col = Array(n).fill(0);
+  let aL = Array(n).fill(0);
+  let aR = Array(n).fill(0);
+  const individualRes = [1, 2, 3, 4];
+  const allRes = [];
+
+  function recur() {
+    for (let i = 0; i < n; i++) {
+      var paL = aL.slice(); // hiostory
+      var paR = aR.slice(); // hoistory, needs nerw reference
+      if (col[i] === 0 && aL[i] === 0 && aR[i] === 0) {
+        col[i] = 1;
+        individualRes[j] = i;
+        // the prevous ones
+        // take the next linearaL.push(0)
+        aL.push(0);
+        aL.shift();
+        aR.unshift(0);
+        aR.pop();
+        // adding the new diag avoid
+        if (aL[i - 1] === 0) aL[i - 1] = 1;
+        if (aR[i + 1] === 0) aR[i + 1] = 1;
+        queens++;
+        /// are there any spaces
+        let test = [];
+        aL.forEach((el, i) => (test[i] = aL[i] | aR[i] | col[i]));
+        if (queens === n) {
+          allRes.push(individualRes.concat());
+          solutions++;
+        }
+        j++;
+        if (!(test.join("") === "1".repeat(n))) recur();
+        j--;
+        col[i] = 0;
+        aL = paL;
+        aR = paR;
+        queens--;
+      }
+    }
+  }
+  recur();
+  // console.log('Solution: ', solutions)
+  return allRes;
+};
+
+// console.log(calc(4));
+
+// module.exports = calc;

src/RooksEquation.js

@@ -1,4 +1,4 @@
-exports.calc = n => {
+exports.calcRooks = n => {
   let rooks = 0;
   let j = 0;
   let solutions = 0;

src/components/Board.js

@@ -26,7 +26,8 @@ class Board extends Component {
         <div key={i} style={this.squareDimentions(el, i, this.state.boardDim)}>
           {this.props.theRook(
             "poss" + el + arrj[i],
-            this.props.displaySolution
+            this.props.displaySolution,
+            "Rooks"
           )}
         </div>
       );
@@ -90,7 +91,9 @@ class Board extends Component {
 
   render() {
     return (
-      <div style={this.boardDimentions()}>{this.renderingThesquares()}</div>
+      <div style={this.boardDimentions()} className="Board">
+        {this.renderingThesquares()}
+      </div>
     );
   }
 }

src/components/UserSettings.js

@@ -70,6 +70,9 @@ class UserSettings extends Component {
         <div className="Title">
           <h2>Options</h2>
         </div>
+        <div className="Title">Type</div>
+        <button onClick={() => this.props.gameType("Queens")}>nQueens</button>
+        <button onClick={() => this.props.gameType("Rooks")}>nRooks</button>
         <div className="BoardSizeChoice">
           <div>Board Size</div>
           <div>
@@ -92,7 +95,6 @@ class UserSettings extends Component {
             Make Board
           </button>
         </div>
-        {/* <div className="Title">Type</div> */}
 
         {/* <div className="Title">
           <button onClick={() => this.props.findSolutions(this.boardDim.value)}>

src/index.css

@@ -1,5 +1 @@
-body {
-  margin: 0;
-  padding: 0;
-  font-family: sans-serif;
-}
+