I have a grid of divs that update bases on the Game of Life Rules.
How can I get one of these divs to change colors onClick either while the game is running or while it has been paused?
I have tried several different approaches to this problem and nothing I have devised has worked.
My CodePen for this is here
var ButtonsAndGrid = React.createClass({
getInitialState: function() {
return {
gameStatus: 'stopped',
currentData: [],
totalColumns: 30,
totalRows: 30,
runRate: 100,
fastestRunRate: 10000,
slowestRunRate: 1000,
generation: 0,
pausestatus: 0,
pausebutton: 'Pause',
runratesetting: 'default',
handleClickArray: []
};
},
switchColors: function() {
var evaluatedArray = this.state.currentData;
var newArray = [];
var evaltotal = this.state.totalColumns * this.state.totalRows;
var i;
if(this.state.pausestatus === 0){
for ( i = 0; i < evaltotal; i++) {
var adjacent = 0;
if(evaluatedArray[i] === 'red'){
if(evaluatedArray[i + this.state.totalColumns]==='red')
{adjacent++}
if(evaluatedArray[i + this.state.totalColumns -1]==='red')
{adjacent++}
if(evaluatedArray[i + this.state.totalColumns + 1]==='red')
{adjacent++}
if(evaluatedArray[i - this.state.totalColumns]==='red')
{adjacent++}
if(evaluatedArray[i - this.state.totalColumns - 1]==='red')
{adjacent++}
if(evaluatedArray[i - this.state.totalColumns + 1]==='red')
{adjacent++}
if(evaluatedArray[i + 1]==='red')
{adjacent++}
if(evaluatedArray[i - 1]==='red')
{adjacent++}
if(adjacent > 3 ){newArray.push('white');}
else if(adjacent < 2 ){newArray.push('white');}
else{newArray.push('red');}
}
if(evaluatedArray[i] === 'white'){
if(evaluatedArray[i + this.state.totalColumns]==='red')
{adjacent++}
if(evaluatedArray[i + this.state.totalColumns -1]==='red')
{adjacent++}
if(evaluatedArray[i + this.state.totalColumns + 1]==='red')
{adjacent++}
if(evaluatedArray[i - this.state.totalColumns]==='red')
{adjacent++}
if(evaluatedArray[i - this.state.totalColumns - 1]==='red')
{adjacent++}
if(evaluatedArray[i - this.state.totalColumns + 1]==='red')
{adjacent++}
if(evaluatedArray[i + 1]==='red')
{adjacent++}
if(evaluatedArray[i - 1]==='red')
{adjacent++}
if(adjacent === 3 ){newArray.push('red');}
else{newArray.push('white');}
}
}
this.setState({
currentData: newArray
});
}else{
this.setState({
currentData: currentData
});
}
},
componentWillMount: function() {
this.getRandom();
},
componentDidMount: function() {
this.run();
},
componentWillUnmount: function() {
clearInterval(this.state.runRate);
},
getRandom: function() {
var tempArr = [],
gridtotal = this.state.totalColumns * this.state.totalRows;
for (var r = 0; r < gridtotal; r++) {
tempArr.push(Math.floor((Math.random() * 2)) ? 'red' : 'white');
}
this.setState({
currentData: tempArr
});
console.log(this.state.currentData);
},
run: function() {
if (this.state.pausestatus === 0){
this.setState({
runRate: setInterval(this.switchColors, this.state.runRate)
});
this.updateGeneration();
}
console.log(this.state.gameStatus);
},
getNewGeneration: function() {
if(this.state.pausestatus === 0){
this.setState({
generation: (this.state.generation + 1)
});
}else{this.setState({
generation: this.state.generation
});}
},
updateGeneration: function() {
this.setState({
generation: setInterval(this.getNewGeneration, this.state.runRate)
});
},
clearAll: function() {
this.pauseAction();
this.setState({
generation:0
})
var whiteArray = [],
tempgridtotal3 = this.state.totalColumns * this.state.totalRows;
for(var w = 0; w< tempgridtotal3; w++){
whiteArray.push('white');
}
this.setState({
currentData: whiteArray
})
},
pauseAction: function() {
if(this.state.pausestatus === 0){
this.setState({
pausestatus: 1
});
this.setState({
pausebutton: 'Start'
});
}else{this.setState({
pausestatus: 0
});
this.setState({
pausebutton: 'Pause'
});
}
},
handleClick: function(divcolor, e){
console.log(divcolor)
this.setState({backgroundColor: 'blue'});
},
toggleCell: function(divkey, e) {
var grid = this,
tempgridtotal6 = this.state.totalColumns * this.state.totalRows;
return function() {
var temp = [];
for (var k = 0; k < tempgridtotal6; k++)
if(k === divkey){
if(grid.state.currentData[k] === 'white'){temp.push('red');}
else{temp.push('white');}
}
else{
temp.push(grid.state.currentData[k].slice(0));
}
grid.setState({currentData: temp});
};
},
render: function() {
var tempgrid = [],
tempgridtotal2 = this.state.totalColumns * this.state.totalRows;
for (var x = 0; x < tempgridtotal2; x++) {
//var boundClick = this.handleClick.bind(this, x);
tempgrid.push(<ActionBox divkey={x} Name={x} divcolor={this.state.currentData[x]} onKlick={this.toggleCell} stateHolder={this}/>);
}
return (
<div>
<div>
Generation: {this.state.generation}
</div>
<div>
<button type="button" className="normalBtn" id="btn1" onClick={this.pauseAction} style={{backgroundColor:this.state.bgColor}} >{this.state.pausebutton}</button>
<button type="button" className="normalBtn" id="btn1" onClick={this.clearAll} style={{backgroundColor:this.state.bgColor}}>Clear</button>
</div>
<div id="applicationGrid">
{tempgrid}
</div>
</div>
);
}
});
var ActionBox = React.createClass({
getInitialState: function() {
return {
backColor:this.props.divcolor
}
},
render: function() {
return(
<div id="actionBox" index={this.props.divkey} style={{backgroundColor:this.props.divcolor}} onClick={this.props.onKlick.bind(this.props.stateHolder, this.props.divkey)} >
</div>
);
},
});
var MyApp = React.createClass({
getInitialState: function() {
return {
seed: 'default'
}
},
render: function() {
return(
<div id="mainDiv" >
<h1> Game of Life! </h1>
<ButtonsAndGrid /> <Footer />
</div>
);
},
});
var Footer = React.createClass({
render() {
return (
<footer>
<div id="containerfooter">
<p>Written by <a href="http://codepen.io/profaneVoodoo/full/dXBJzN/">John Gillespie</a> for FreeCodeCamp Campers (and also to impress my kids). Happy Coding!</p>
</div>
</footer>
);
}
});
ReactDOM.render(
<MyApp /> ,
document.getElementById('GoL')
);