Beginning to implement grid interaction. Working on toggling radio bu…

…ttons.
jmash · Feb 11, 2017 · c1b5b85 · c1b5b85
1 parent b340176
commit c1b5b85
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "react": "^15.4.2",
+    "react-addons-update": "^15.4.2",
     "react-dom": "^15.4.2"
   },
   "scripts": {

diff --git a/public/index.html b/public/index.html
@@ -13,7 +13,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Conway's Game of Life</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/Components/ControlPanel.js b/src/Components/ControlPanel.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import Grid from './Grid';
+import update from 'react-addons-update';
 
 export default class ControlPanel extends Component {
   constructor(props) {
@@ -9,22 +10,47 @@ export default class ControlPanel extends Component {
       gridSizeX: 30,
       gridSizeY: 30,
       cellSize: 25,
+      drawFlags: {
+        paint: false,
+        toggle: false,
+        clear: false,
+        stamp: false,
+      }
     };
   }
 
   handleCellSize = (e) => {
     this.setState({ cellSize: Number(e.target.value) })
   };
 
+  handleDrawOptionClick = (e) => {
+    // this.uncheckDrawOptions();
 
+  };
+
+  handleDrawOptionChange = (e) => {
+    let clearedFlags = {
+      paint: false,
+      toggle: false,
+      clear: false,
+      stamp: false,
+    };
+    console.log(e.target.id);
+    this.setState({
+      drawFlags: clearedFlags
+    }, this.setState({
+      drawFlags: update(this.state.drawFlags, {[e.target.id]: {$set: true}})
+    }));
+    console.log(this.state.drawFlags)
+  }
 
   render() {
     const styles = {
       viewport: {
 
       },
       controlpanel: {
-        height:70,
+        // height:70,
         width:"100%",
         background:"grey",
         opacity:"0.7",
@@ -48,6 +74,9 @@ export default class ControlPanel extends Component {
       slidersSection: {
         display:"inline-block"
       },
+      radioSection: {
+        display:"block"
+      },
       options_h3: {
         margin:0,
       }
@@ -76,6 +105,12 @@ export default class ControlPanel extends Component {
                     step={ 1 }
               />
             </div>
+            <div style={ styles.radioSection }>
+              <label>Paint<input checked={ this.state.drawFlags.paint } type="radio" value="Paint" id="paint" onChange={ this.handleDrawOptionChange }/></label>
+              <label>Toggle<input checked={ this.state.drawFlags.toggle } type="radio" value="Toggle" id="toggle" onChange={ this.handleDrawOptionChange} /></label>
+              <label>Clear<input checked={ this.state.drawFlags.clear } type="radio" value="Clear" id="clear" onChange={ this.handleDrawOptionChange} /></label>
+              <label>Stamp<input checked={ this.state.drawFlags.stamp } type="radio" value="Stamp" id="stamp" onChange={ this.handleDrawOptionChange} /></label>
+            </div>
           </div>
         </div>
         <Grid
@@ -87,3 +122,4 @@ export default class ControlPanel extends Component {
     );
   }
 }
+/*onClick={ this.handleDrawOptionClick }*/
diff --git a/src/Components/Grid.js b/src/Components/Grid.js
@@ -1,21 +1,26 @@
 import React, { Component } from 'react';
 import GridCell from './GridCell';
+import update from 'react-addons-update';
 
 export default class Grid extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
       lifeGrid: (function(gridSizeX, gridSizeY) {
-        const xs = new Array(gridSizeX).fill({life: "alive"});
+        const xs = new Array(gridSizeX).fill({life: "dead"});
         const ys = new Array(gridSizeY).fill(xs);
         return ys;
       })(this.props.gridSizeX, this.props.gridSizeY)
     }
   }
 
-  handleCellClick = (e) => {
-    console.log(e);
+  handleCellClick = (x, y) => {
+    console.log(x);
+    console.log(y);
+    this.setState({
+      lifeGrid: update(this.state.lifeGrid, {[y]: {[x]: {life: {$set: 'alive'}}}})
+    });
   }
 
   updateGrid() {
@@ -49,18 +54,16 @@ export default class Grid extends Component {
       for (let j = 0; j < Number(y); j++) {
         cells.push(<GridCell key={ i + "_" + j }
                    id={ i + "_" + j }
-                   x={ i }
-                   y={ j }
+                   x={ j }
+                   y={ i }
                    cellSize={ this.props.cellSize }
-                   life={ (this.state.lifeGrid[i][j].life === "dead") ? styles.dead : styles.alive }
+                   life={ (this.state.lifeGrid[i][j].life === "dead") ? "dead" : "alive" }
                    onClick={ this.handleCellClick.bind(this) }
                  />)
       }
       var row = React.createElement('div', { style: styles.row, key: i }, cells);
-      // console.log(row);
       rows.push(row);
     }
-    // console.log(rows);
     return (
       <div style={ styles.grid }>{ rows }</div>
     )

diff --git a/src/Components/GridCell.js b/src/Components/GridCell.js
@@ -1,27 +1,34 @@
 import React, { Component } from 'react';
 
 export default class GridCell extends Component {
+  clickEventHandler(x, y) {
+    this.props.onClick(x, y);
+  }
 
   render() {
     const styles = {
-      cell: {
+      alive: {
         borderStyle: "solid",
         borderColor: "black",
         borderWidth: "1px",
         height:this.props.cellSize,
         width:this.props.cellSize,
-        display:"inline-block"
-      },
-      alive: {
+        display:"inline-block",
         background:"red",
       },
       dead: {
+        borderStyle: "solid",
+        borderColor: "black",
+        borderWidth: "1px",
+        height:this.props.cellSize,
+        width:this.props.cellSize,
+        display:"inline-block",
         background:"white",
       },
     }
 
     return (
-      <div style={ styles.cell (this.props.life === "dead") ? styles.dead : styles.alive }></div>
+      <div onClick={ this.clickEventHandler.bind(this, this.props.x, this.props.y) } style={ (this.props.life === "dead") ? styles.dead : styles.alive }></div>
     );
   }
 }