From e3a1a0f66c081441c913282760a5bc604611c18c Mon Sep 17 00:00:00 2001
From: Jared Ashcraft <jaredmashcraft@gmail.com>
Date: Fri, 10 Feb 2017 23:18:29 -0500
Subject: [PATCH] Complete basic implementation of control panel draw options

---
 src/Components/ControlPanel.js | 35 ++++++++--------------------------
 src/Components/Grid.js         | 32 ++++++++++++++++++++++++++-----
 src/Components/GridCell.js     |  1 -
 3 files changed, 35 insertions(+), 33 deletions(-)

diff --git a/src/Components/ControlPanel.js b/src/Components/ControlPanel.js
index 79323d7..7695c79 100644
--- a/src/Components/ControlPanel.js
+++ b/src/Components/ControlPanel.js
@@ -10,12 +10,7 @@ export default class ControlPanel extends Component {
       gridSizeX: 30,
       gridSizeY: 30,
       cellSize: 25,
-      drawFlags: {
-        paint: false,
-        toggle: false,
-        clear: false,
-        stamp: false,
-      }
+      drawFlag: "paint",
     };
   }
 
@@ -23,25 +18,10 @@ export default class ControlPanel extends Component {
     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,10 +86,10 @@ 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>
@@ -117,6 +97,7 @@ export default class ControlPanel extends Component {
               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
index a903782..318348f 100644
--- 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
index a1f14c4..474f184 100644
--- 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>
     );