Add run until constraints algo

package.json

@@ -7,14 +7,15 @@
     "react": "^16.7.0",
     "react-checkbox-group": "^4.0.1",
     "react-dom": "^16.7.0",
+    "react-radio-buttons": "^1.2.2",
     "react-scripts": "2.1.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "deploy" : "npm run build && gh-pages -d build"
+    "deploy": "npm run build && gh-pages -d build"
   },
   "eslintConfig": {
     "extends": "react-app"

src/App.css

@@ -1,38 +1,65 @@
 .App {
-  /*background-color: #282c34;*/
   text-align: center;
 }
 
 .App-body {
   min-height: 100vh;
   display: flex;
-  /*align-items: center;*/
   justify-content: space-around;
 }
 
 .left-pane,
 .right-pane {
   width: 50%;
+  padding: 0 1rem;
 }
 
 .right-pane {
   text-align: left;
 }
 
-.right-pane h2 {
-    text-align: cetner;
-  }
+.radio-button {
+  width: 70%;
+}
 
-.options {
+.column {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
+.column-right {
+  display: flex;
+  flex-direction: column;
+}
+
+.heading {
+  align-self: center;
+  margin: 0 1rem;
+}
+
+.data-entry-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+.data-entry-section-with-subsections {
+  display: flex;
+  flex-direction: row;
+}
+
+.data-entry-subsection {
+  width: 50%;
+  padding: 0 0.25rem;
+}
+
 .checkbox-group {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  text-align: left;
 }
 
 .form-group {
@@ -44,19 +71,13 @@
 }
 
 .form-input[type='number'] {
-  width: 2rem;
+  width: 3rem;
 }
 
 .game-input {
   width: 8rem;
 }
 
-.tables {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
 .table-list {
   padding-left: 0;
   margin: 0;

src/Components/Algorithms.jsx

@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { RadioGroup, RadioButton } from 'react-radio-buttons';
+import Constraints from './Constraints';
+
+class Algorithms extends Component {
+  static propTypes = {
+    algorithmChoice: PropTypes.string.isRequired,
+    totalRounds: PropTypes.number.isRequired,
+    options: PropTypes.array.isRequired,
+    maxPlayedWithAllowed: PropTypes.number.isRequired,
+    maxAveragePlayedWithAllowed: PropTypes.number.isRequired,
+    minUniqueTablesAllowed: PropTypes.number.isRequired,
+    maxRuns: PropTypes.number.isRequired,
+    handleAlgorithmChange: PropTypes.func.isRequired,
+    handleNumberChange: PropTypes.func.isRequired
+  }
+
+  render() {
+    return (
+      <div className='data-entry-section'>
+        <h3>Algorithm Options</h3>
+        <RadioGroup onChange={ this.props.handleAlgorithmChange } value={this.props.algorithmChoice} className='radio-button'>
+          <RadioButton value='runRandomXTimes' css={{width: '100%'}}>
+            Best of X Random Runs
+          </RadioButton>
+          <RadioButton value='runUntilConstraints'>
+            Run Until Custom Constraints Met
+          </RadioButton>
+        </RadioGroup>
+        <Constraints
+          algorithmChoice={this.props.algorithmChoice}
+          totalRounds={this.props.totalRounds}
+          options={this.props.options}
+          numTimesToRun={this.props.numTimesToRun}
+          maxPlayedWithAllowed={this.props.maxPlayedWithAllowed}
+          maxAveragePlayedWithAllowed={this.props.maxAveragePlayedWithAllowed}
+          minUniqueTablesAllowed={this.props.minUniqueTablesAllowed}
+          maxRuns={this.props.maxRuns}
+          handleNumberChange={this.props.handleNumberChange}
+         />
+      </div>
+    );
+  }
+
+}
+export default Algorithms;