Created
December 9, 2017 05:19
-
-
Save ashlynnpai/76d35878fd91eb8dafaa9dd2d994fd4e to your computer and use it in GitHub Desktop.
first draft of game of life with react
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class Game extends React.Component { | |
constructor(props) { | |
super(props); | |
let initialSquares = Array(4900).fill(null); | |
//set initial seed | |
let seed = [730, 800, 870]; | |
for (let i=0; i<seed.length; i++) { | |
initialSquares[seed[i]]="X"; | |
} | |
this.state = { | |
count: 0, | |
squares: initialSquares | |
}; | |
} | |
componentDidMount() { | |
this.timerID = setInterval( | |
() => this.tick(), | |
1000000 | |
//change to 1000 | |
); | |
} | |
componentWillUnmount() { | |
clearInterval(this.timerID); | |
} | |
tick() { | |
this.setState({ | |
count: this.state.count + 1 | |
}); | |
this.dostuff() | |
} | |
dostuff() { | |
let adjacents = []; | |
let s = this.state.squares; | |
let neighborCount = 0; | |
let n = Math.sqrt(4900); | |
for (var i=0; i<s.length; i++) { | |
adjacents.push(i-1, i+1, i-n-1, i-n, i-n+1, i+n-1, i+n, i+n+1); | |
for (var j=0; j<adjacents.length; j++) { | |
if (s[adjacents[j]] == "X") { | |
neighborCount++; | |
} | |
} | |
if (neighborCount > 1) { | |
console.log("index " + i + " neighbors " + neighborCount); | |
} | |
if (s[i] == null && neighborCount == 3) { | |
s[i] = "X"; | |
document.getElementById("square" + i).style.background = "#E55EA2"; | |
} | |
else if ((s[i] == "X" && neighborCount < 2) | |
|| (s[i] == "X" && neighborCount > 3)) | |
{ | |
s[i] = null; | |
document.getElementById("square" + i).style.background = "#4b535c"; | |
} | |
//change this to update all changes at once? | |
neighborCount = 0; | |
adjacents = []; | |
} | |
this.setState({ | |
squares: s | |
} | |
) | |
} | |
render() { | |
return ( | |
<div> | |
<h1>{this.state.count}</h1> | |
<div id="board" className="flex-container"> | |
{this.state.squares.map((square,index) => | |
<div id={"square" + index} key={index}></div>)} | |
</div> | |
</div> | |
); | |
} | |
} | |
ReactDOM.render( | |
<Game />, | |
document.getElementById('app') | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment