diff --git a/package.json b/package.json
index 7690761..845be5e 100644
--- 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
index aab5e3b..9dcea14 100644
--- 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`.
-->
-
React App
+ Conway's Game of Life
diff --git a/src/Components/ControlPanel.js b/src/Components/ControlPanel.js
index bfd8f6d..79323d7 100644
--- 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,6 +10,12 @@ export default class ControlPanel extends Component {
gridSizeX: 30,
gridSizeY: 30,
cellSize: 25,
+ drawFlags: {
+ paint: false,
+ toggle: false,
+ clear: false,
+ stamp: false,
+ }
};
}
@@ -16,7 +23,26 @@ 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)
+ }
render() {
const styles = {
@@ -24,7 +50,7 @@ export default class ControlPanel extends Component {
},
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 }
/>
+
+ Paint
+ Toggle
+ Clear
+ Stamp
+
{
- 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( )
}
var row = React.createElement('div', { style: styles.row, key: i }, cells);
- // console.log(row);
rows.push(row);
}
- // console.log(rows);
return (
{ rows }
)
diff --git a/src/Components/GridCell.js b/src/Components/GridCell.js
index 52465ed..a1f14c4 100644
--- 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 (
-
+
);
}
}