Merge pull request #3 from bbailey27/UI-updates

UI updates

src/App.css

@@ -1,13 +1,59 @@
+:root {
+  /* https://colorffy.com/dark-theme-generator?colors=00c3ff-121212 */
+
+  /** Dark theme primary colors */
+  --color-primary-a0: #00c3ff;
+  --color-primary-a10: #4dcaff;
+  --color-primary-a20: #6ed0ff;
+  --color-primary-a30: #88d7ff;
+  --color-primary-a40: #9fdeff;
+  --color-primary-a50: #b4e4ff;
+
+  /** Dark theme surface colors */
+  --color-surface-a0: #121212;
+  --color-surface-a10: #282828;
+  --color-surface-a20: #3f3f3f;
+  --color-surface-a30: #575757;
+  --color-surface-a40: #717171;
+  --color-surface-a50: #8b8b8b;
+
+  /** Dark theme mixed surface colors */
+  --color-surface-mixed-a0: #1f313a;
+  --color-surface-mixed-a10: #35454d;
+  --color-surface-mixed-a20: #4b5a61;
+  --color-surface-mixed-a30: #636f76;
+  --color-surface-mixed-a40: #7b868b;
+  --color-surface-mixed-a50: #949da2;
+
+  --color-text-white: #fff;
+
+}
+
+html, body {
+  margin: 0;          /* Remove default margins */
+  padding: 0;         /* Remove default padding */
+  height: 100%;       /* Ensure it covers the viewport */
+  background-color: var(--color-surface-mixed-a0); /* Set your desired color */
+}
+
+
 .App {
   text-align: center;
+  background-color: var(--color-surface-mixed-a0);
+  color: var(--color-text-white);
+  min-height: 100vh;
 }
 
 .App-body {
-  min-height: 100vh;
   display: flex;
   justify-content: space-around;
 }
 
+h1 {
+  margin: 0;
+  padding: 1rem;
+}
+
 .left-pane,
 .right-pane {
   width: 50%;
@@ -18,10 +64,6 @@
   text-align: left;
 }
 
-.radio-button {
-  width: 70%;
-}
-
 .column {
   display: flex;
   flex-direction: column;
@@ -55,27 +97,53 @@
   padding: 0 0.25rem;
 }
 
-.checkbox-group {
+.algorithm-button {
+  width: 70%;
+}
+
+.options-group {
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  text-align: left;
+  flex-direction: row;
+  justify-content: space-around;
+  text-align: center;
+  padding: 1rem 2rem;
 }
 
-.form-group {
-  padding: 1px 6px;
+.stateful-button {
+  width: 30%;
+  border-radius: .7rem;
+  padding: 1rem;
+  align-content: center;
+  color: var(--color-primary-a10);
+  border: transparent .2rem solid;
+  font-size: min(10vw, 1.5rem);
+
 }
 
-.form-input {
-  width: 4rem;
+.stateful-button--selected {
+  background-color: var(--color-surface-mixed-a10);
+  font-weight: bold;
 }
 
-.form-input[type='number'] {
-  width: 3rem;
+.stateful-button:hover {
+  background-color: var(--color-surface-mixed-a10);
+  border-color: var(--color-surface-mixed-a20);
+}
+
+textarea, select, input {
+  field-sizing: content;
+}
+
+.form-group {
+  padding: 1px 6px;
 }
 
 .game-input {
-  width: 8rem;
+  min-width: 8rem;
+}
+
+.remove-button {
+  border-radius: 50%;
 }
 
 .table-list {

src/Components/Algorithms.jsx

@@ -2,32 +2,45 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 // import { RadioGroup, RadioButton } from 'react-radio-buttons';
 import Constraints from './Constraints';
+import StatefulButton from './Subcomponents/StatefulButton';
 
 class Algorithms extends Component {
   static propTypes = {
     algorithmChoice: PropTypes.string.isRequired,
     totalRounds: PropTypes.number.isRequired,
-    options: PropTypes.array.isRequired,
+    options: PropTypes.object.isRequired,
     maxPlayedWithAllowed: PropTypes.number.isRequired,
-    maxAveragePlayedWithAllowed: PropTypes.number.isRequired,
+    maxAveragePlayedWithAllowed: PropTypes.string.isRequired,
     minUniqueTablesAllowed: PropTypes.number.isRequired,
+    minAverageUniqueTablesAllowed: PropTypes.string.isRequired,
     maxRuns: PropTypes.number.isRequired,
     handleAlgorithmChange: PropTypes.func.isRequired,
-    handleNumberChange: PropTypes.func.isRequired
+    handleNumberChange: PropTypes.func.isRequired,
+    handleDecimalChange: 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> */}
+        <div className='options-group'>
+          <StatefulButton
+            className='algorithm-button'
+            onChange={(e) => this.props.handleAlgorithmChange('runRandomNTimes')}
+            selected={this.props.algorithmChoice === 'runRandomNTimes'}
+            text="Best of N random runs"
+            name={'runRandomNTimes'}
+            type={'text'}
+            />
+          <StatefulButton
+            className='algorithm-button'
+            onChange={(e) => this.props.handleAlgorithmChange('runUntilConstraints')}
+            selected={this.props.algorithmChoice === 'runUntilConstraints'}
+            text="Run until constraints met"
+            name={'runUntilConstraints'}
+            type={'text'}
+            />
+        </div>
         <Constraints
           algorithmChoice={this.props.algorithmChoice}
           totalRounds={this.props.totalRounds}
@@ -36,8 +49,10 @@ class Algorithms extends Component {
           maxPlayedWithAllowed={this.props.maxPlayedWithAllowed}
           maxAveragePlayedWithAllowed={this.props.maxAveragePlayedWithAllowed}
           minUniqueTablesAllowed={this.props.minUniqueTablesAllowed}
+          minAverageUniqueTablesAllowed={this.props.minAverageUniqueTablesAllowed}
           maxRuns={this.props.maxRuns}
           handleNumberChange={this.props.handleNumberChange}
+          handleDecimalChange={this.props.handleDecimalChange}
          />
       </div>
     );

src/Components/Constraints.jsx

@@ -9,25 +9,27 @@ class Constraints extends Component {
   static propTypes = {
     algorithmChoice: PropTypes.string.isRequired,
     totalRounds: PropTypes.number.isRequired,
-    options: PropTypes.array.isRequired,
+    options: PropTypes.object.isRequired,
     numTimesToRun: PropTypes.number.isRequired,
     maxPlayedWithAllowed: PropTypes.number.isRequired,
-    maxAveragePlayedWithAllowed: PropTypes.number.isRequired,
+    maxAveragePlayedWithAllowed: PropTypes.string.isRequired,
     minUniqueTablesAllowed: PropTypes.number.isRequired,
+    minAverageUniqueTablesAllowed: PropTypes.string.isRequired,
     maxRuns: PropTypes.number.isRequired,
-    handleNumberChange: PropTypes.func.isRequired
+    handleNumberChange: PropTypes.func.isRequired,
+    handleDecimalChange: PropTypes.func.isRequired,
   }
 
   renderRunUntilConstraints() {
-    const {options} = this.props;
-    const changePeopleOption = options.includes('changePeople');
-    const changeTablesOption = options.includes('changeTables');
+    const {changePeople, changeTables} = this.props.options;
+
     return (
       <div>
-        {changePeopleOption && this.renderMaxPlayedWithAllowedInput()}
-        {changePeopleOption && this.renderMaxAveragePlayedWithAllowedInput()}
-        {changeTablesOption && this.renderMinUniqueTablesAllowedInput()}
-        {changeTablesOption && this.renderMaxRunsInput()}
+        {changePeople && this.renderMaxPlayedWithAllowedInput()}
+        {changePeople && this.renderMaxAveragePlayedWithAllowedInput()}
+        {changeTables && this.renderMinUniqueTablesAllowedInput()}
+        {changeTables && this.renderMinAverageUniqueTablesAllowedInput()}
+        {changeTables && this.renderMaxRunsInput()}
       </div>
     );
   }
@@ -39,25 +41,27 @@ class Constraints extends Component {
         inputType='number'
         title='Max number of plays with same person allowed: '
         name='maxPlayedWithAllowed'
-        controlFunc={(e) => handleNumberChange(e, 'maxPlayedWithAllowed')}
+        onChange={(e) => handleNumberChange(e, 'maxPlayedWithAllowed')}
         content={maxPlayedWithAllowed}
         max={totalRounds}
         min={1}
+        step={1}
         />
     );
   }
 
   renderMaxAveragePlayedWithAllowedInput() {
-    const {totalRounds, maxAveragePlayedWithAllowed, handleNumberChange} = this.props;
+    const {totalRounds, maxAveragePlayedWithAllowed, handleDecimalChange} = this.props;
     return (
       <SingleInput
         inputType='number'
         title='Max allowed average number of plays with same person: '
         name='maxAveragePlayedWithAllowed'
-        controlFunc={(e) => handleNumberChange(e, 'maxAveragePlayedWithAllowed')}
+        onChange={(e) => handleDecimalChange(e, 'maxAveragePlayedWithAllowed')}
         content={maxAveragePlayedWithAllowed}
         max={totalRounds}
         min={1}
+        step={0.01}
         />
     );
   }
@@ -69,10 +73,27 @@ class Constraints extends Component {
         inputType='number'
         title='Minimum allowed number of unique tables visited: '
         name='minUniqueTablesAllowed'
-        controlFunc={(e) => handleNumberChange(e, 'minUniqueTablesAllowed')}
+        onChange={(e) => handleNumberChange(e, 'minUniqueTablesAllowed')}
         content={minUniqueTablesAllowed}
         max={totalRounds}
         min={1}
+        step={1}
+        />
+    );
+  }
+
+  renderMinAverageUniqueTablesAllowedInput() {
+    const {totalRounds, minAverageUniqueTablesAllowed, handleDecimalChange} = this.props;
+    return (
+      <SingleInput
+        inputType='number'
+        title='Minimum allowed average number of unique tables visited: '
+        name='minAverageUniqueTablesAllowed'
+        onChange={(e) => handleDecimalChange(e, 'minAverageUniqueTablesAllowed')}
+        content={minAverageUniqueTablesAllowed}
+        max={totalRounds}
+        min={1}
+        step={0.01}
         />
     );
   }
@@ -84,22 +105,22 @@ class Constraints extends Component {
         inputType='number'
         title='Max times to run: '
         name='maxRuns'
-        controlFunc={(e) => handleNumberChange(e, 'maxRuns')}
+        onChange={(e) => handleNumberChange(e, 'maxRuns')}
         content={maxRuns}
         max={10000}
         min={1}
         />
     );
   }
 
-  renderRunXTimesInput() {
+  renderRunNTimesInput() {
     const {numTimesToRun, handleNumberChange} = this.props;
     return (
       <SingleInput
         inputType='number'
         title='Number of times to run: '
         name='numTimesToRun'
-        controlFunc={(e) => handleNumberChange(e, 'numTimesToRun')}
+        onChange={(e) => handleNumberChange(e, 'numTimesToRun')}
         content={numTimesToRun}
         max={10000}
         min={1}
@@ -111,7 +132,7 @@ class Constraints extends Component {
     return (
       <div className='constraints'>
         {this.props.algorithmChoice === 'runUntilConstraints' && this.renderRunUntilConstraints()}
-        {this.props.algorithmChoice === 'runRandomXTimes' && this.renderRunXTimesInput()}
+        {this.props.algorithmChoice === 'runRandomNTimes' && this.renderRunNTimesInput()}
       </div>
     );
   }