Complete basic implementation of control panel draw options

jmash · Feb 11, 2017 · e3a1a0f · e3a1a0f
1 parent c1b5b85
commit e3a1a0f
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 33 deletions.
diff --git a/src/Components/ControlPanel.js b/src/Components/ControlPanel.js
@@ -10,38 +10,18 @@ export default class ControlPanel extends Component {
       gridSizeX: 30,
       gridSizeY: 30,
       cellSize: 25,
-      drawFlags: {
-        paint: false,
-        toggle: false,
-        clear: false,
-        stamp: false,
-      }
+      drawFlag: "paint",
     };
   }
 
   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)
+      drawFlag: e.target.name
+    })
   }
 
   render() {
@@ -106,17 +86,18 @@ export default class ControlPanel extends Component {
               />
             </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>
+              <label>Paint<input checked={ (this.state.drawFlag === "paint") } type="radio" value="Paint" id="paint" name="paint" onChange={ this.handleDrawOptionChange }/></label>
+              <label>Toggle<input checked={ (this.state.drawFlag === "toggle") } type="radio" value="Toggle" id="toggle" name="toggle" onChange={ this.handleDrawOptionChange} /></label>
+              <label>Clear<input checked={ (this.state.drawFlag === "clear") } type="radio" value="Clear" id="clear" name="clear" onChange={ this.handleDrawOptionChange} /></label>
+              <label>Stamp<input checked={ (this.state.drawFlag === "stamp") } type="radio" value="Stamp" id="stamp" name="stamp" onChange={ this.handleDrawOptionChange} /></label>
             </div>
           </div>
         </div>
         <Grid
               gridSizeX={ this.state.gridSizeX }
               gridSizeY={ this.state.gridSizeY }
               cellSize={ this.state.cellSize }
+              drawFlag={ this.state.drawFlag }
         />
       </div>
     );

diff --git a/src/Components/Grid.js b/src/Components/Grid.js
@@ -16,11 +16,33 @@ export default class Grid extends Component {
   }
 
   handleCellClick = (x, y) => {
-    console.log(x);
-    console.log(y);
-    this.setState({
-      lifeGrid: update(this.state.lifeGrid, {[y]: {[x]: {life: {$set: 'alive'}}}})
-    });
+    console.log(this.state.lifeGrid[y][x].life)
+    switch(this.props.drawFlag) {
+      case "paint":
+        this.setState({
+          lifeGrid: update(this.state.lifeGrid, {[y]: {[x]: {life: {$set: 'alive'}}}})
+        });
+        break;
+      case "toggle":
+        console.log(this.state.lifeGrid[y][x].life);
+        if (this.state.lifeGrid[y][x].life === 'dead') {
+          console.log("entering first toggle case");
+          this.setState({
+            lifeGrid: update(this.state.lifeGrid, {[y]: {[x]: {life: {$set: 'alive'}}}})
+          }, function() {  });
+        } else {
+          console.log("entering second toggle case");
+          this.setState({
+            lifeGrid: update(this.state.lifeGrid, {[y]: {[x]: {life: {$set: 'dead'}}}})
+          });
+        }
+        break;
+      case "clear":
+          this.setState({
+            lifeGrid: update(this.state.lifeGrid, {[y]: {[x]: {life: {$set: 'dead'}}}})
+          });
+        break;
+    }
   }
 
   updateGrid() {

diff --git a/src/Components/GridCell.js b/src/Components/GridCell.js
@@ -26,7 +26,6 @@ export default class GridCell extends Component {
         background:"white",
       },
     }
-
     return (
       <div onClick={ this.clickEventHandler.bind(this, this.props.x, this.props.y) } style={ (this.props.life === "dead") ? styles.dead : styles.alive }></div>
     );
-Original file line number
+Diff line change
@@ Expand Up / @@ -26,7 +26,6 @@ export default class GridCell extends Component { @@
             background:"white",
           },
         }
         return (
           <div onClick={ this.clickEventHandler.bind(this, this.props.x, this.props.y) } style={ (this.props.life === "dead") ? styles.dead : styles.alive }></div>
         );
@@ Expand Down @@