Game list input for tables

bbailey27 · Dec 20, 2019 · d285fd1 · d285fd1
1 parent 6857f2b
commit d285fd1
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 13 deletions.
diff --git a/src/App.css b/src/App.css
@@ -43,6 +43,14 @@
   width: 4rem;
 }
 
+.form-input[type='number'] {
+  width: 2rem;
+}
+
+.game-input {
+  width: 8rem;
+}
+
 .tables {
   display: flex;
   flex-direction: column;

diff --git a/src/Components/DataEntry.jsx b/src/Components/DataEntry.jsx
@@ -25,22 +25,26 @@ class DataEntry extends Component {
           {
             id: 1,
             name: 'Table 1',
-            size: 2
+            size: 2,
+            games: []
           },
           {
             id: 2,
             name: 'Table 2',
-            size: 2
+            size: 2,
+            games: []
           },
           {
             id: 3,
             name: 'Table 3',
-            size: 3
+            size: 3,
+            games: []
           },
           {
             id: 4,
             name: 'Table 4',
-            size: 3
+            size: 3,
+            games: []
           },
       ],
       result: {}
@@ -106,7 +110,6 @@ class DataEntry extends Component {
     totalKids: this.state.options.includes('kidsTable') ? this.state.totalKids : 0,
     numTables: this.state.tables.length,
     tables: this.state.tables
-
   };
 
   console.log('Send this in a POST request:', formPayload);
@@ -148,10 +151,9 @@ class DataEntry extends Component {
     );
   }
 }
-//TODO on form submit, convert options to booleans
+
 //TODO render tables without isKidsTable option for now
-//TODO consider mimicing excel and optimizing after randomness not during picking
-/*TODO add Configuration and Constraints middle pane or bottom section:
+/*TODO add Configuration and Constraints middle pane or bottom/top section:
 * Runtime options: run once, get the best of x number of times, or maybe run until the conditions are met (with a max/timeout returning the best so far?)
 * Constraints: conditions to define best (e.g. no playedWithCount over 3, minimize all playedWithCounts, no stayAtTableCount over 2)
 */

diff --git a/src/Components/Results.jsx b/src/Components/Results.jsx
@@ -26,7 +26,8 @@ class Results extends Component {
       let tableData = "";
       player.assignedTables.forEach((tableId, index) => {
         const tableDetails = this.props.tables.find(t => t.id === tableId);
-        tableData += `Round ${index+1}: ${tableDetails.name}\n`;
+        const tableGame = tableDetails.games[index] && tableDetails.games[index].trim();
+        tableData += `Round ${index+1}: ${tableDetails.name}${tableGame ? ` - ${tableGame}` : ''}\n`;
       });
       formattedData += `${playerTitle}\n${tableData}\n\n`;
     });

diff --git a/src/Components/Subcomponents/SingleInput.jsx b/src/Components/Subcomponents/SingleInput.jsx
@@ -5,7 +5,7 @@ const SingleInput = (props) => (
       <div className="form-group">
         <label className="form-label">{props.title}</label>
         <input
-          className="form-input"
+          className={`form-input ${props.classNames}`}
           name={props.name}
           type={props.inputType}
           value={props.content}

diff --git a/src/Components/Tables.jsx b/src/Components/Tables.jsx
@@ -11,6 +11,7 @@ class Tables extends Component {
     super(props);
     this.handleTableNameChange = this.handleTableNameChange.bind(this);
     this.handleTableSizeChange = this.handleTableSizeChange.bind(this);
+    this.handleTableGamesChange = this.handleTableGamesChange.bind(this);
     this.addTableRow = this.addTableRow.bind(this);
     this.removeTable = this.removeTable.bind(this);
 }
@@ -24,7 +25,7 @@ class Tables extends Component {
         return {...table, name: changedTableValue};
       }
       return table;
-    })
+    });
     handleTablesChange(newTables);
   }
 
@@ -37,7 +38,21 @@ class Tables extends Component {
         return {...table, size: changedTableValue};
       }
       return table;
-    })
+    });
+    handleTablesChange(newTables);
+  }
+
+  handleTableGamesChange(e) {
+    const {tables, handleTablesChange} = this.props;
+    const changedTableValue = e.target.value;
+    const newGameList = changedTableValue.split(',');
+    const changedTableId = parseInt(e.target.parentNode.parentNode.id);
+    const newTables = tables.map(table => {
+      if(table.id === changedTableId) {
+        return {...table, games: newGameList};
+      }
+      return table;
+    });
     handleTablesChange(newTables);
   }
 
@@ -55,7 +70,8 @@ class Tables extends Component {
     const newTables = tables.concat({
       id: newTableNum,
       name: tableName,
-      size: 4
+      size: 4,
+      games: []
     })
     handleTablesChange(newTables);
   }
@@ -86,6 +102,14 @@ class Tables extends Component {
           controlFunc={this.handleTableSizeChange}
           content={table.size}
           />
+        <SingleInput
+          inputType='text'
+          classNames='game-input'
+          title='Games: '
+          name='tableGames'
+          controlFunc={this.handleTableGamesChange}
+          content={table.games.toString()}
+          />
         <button type='button' className='remove-button' onClick={this.removeTable}>X</button>
       </li>
     );
@@ -95,6 +119,7 @@ class Tables extends Component {
     return (
       <div className='tables'>
         <h3>Tables</h3>
+        <h5>Please enter a comma-separated list of games, with the same number of games as rounds</h5>
         {this.renderTableRows()}
         <button type='button' className='button' onClick={this.addTableRow}>Add Table</button>
       </div>