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 } /> +
+ + + + +
{ - 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 ( -
+
); } }