//Game of Life React + Redux Implementation
//You may prefer to view the source here:
//https://github.com/thepeted/game-of-life-redux
//CONSTANTS
const GRID_HEIGHT = 25;
const GRID_WIDTH = 40;
//REACT & REDUX LIBRARIES SET UP
const { Component } = React;
const { createStore, applyMiddleware } = Redux;
const { Provider } = ReactRedux;
const { connect } = ReactRedux;
const { combineReducers } = Redux;
//HELPERS - generate the gamestate by constructing 2d arrays
const makeGrid = (height, width, makeRandom = false) => {
let grid = [];
for (var i = 0; i < height; i++){
var row = [];
for (var j = 0; j < width; j++){
let value;
if (makeRandom){
value = Math.random() > 0.85;
}
row.push({
status: value,
newBorn: value
});
}
grid.push(row);
}
return grid;
};
const advanceGrid = function(grid = []){
let gridHeight = grid.length;
let gridWidth = grid[0].length;
let calculateNeighbours = function(x,y) {
//since the world is toroidal: if the cell is at the edge of the grid we
//will reference the cell on the opposite edge
let topRow = x-1 < 0 ? (gridHeight - 1) : x-1;
let bottomRow = (x+1 === gridHeight) ? 0 : x+1;
let leftColumn = y-1 < 0 ? (gridWidth - 1) : y-1;
let rightColumn = (y+1 === gridWidth) ? 0 : y+1;
let total = 0;
total+= grid[topRow][leftColumn].status;
total+= grid[topRow][y].status;
total+= grid[topRow][rightColumn].status;
total+= grid[x][leftColumn].status;
total+= grid[x][rightColumn].status;
total+= grid[bottomRow][leftColumn].status;
total+= grid[bottomRow][y].status;
total+= grid[bottomRow][rightColumn].status;
return total;
};
//apply the rules of the game by comparing with the existing grid to build
//a new array
let gameState = [];
for (let i = 0; i < gridHeight; i++) {
let row = [];
for (let j = 0; j < gridWidth; j++) {
let cellIsAlive = grid[i][j].status;
let neighbours = calculateNeighbours(i,j);
if (cellIsAlive) {
if (neighbours < 2) {
row.push({ status: 0 });
} else if (neighbours > 3){
row.push({ status: 0 });
} else {
row.push({ status: 1 });
}
}
if (!cellIsAlive) {
if (neighbours === 3) {
row.push({
status: 1,
newBorn: true
});
} else {
row.push({ status: 0 });
}
}
}
gameState.push(row);
}
return gameState;
};
//ACTIONS
function toggleAlive(x,y) {
return {
type: 'TOGGLE_ALIVE',
x,
y
};
}
function makeRandomGrid() {
return {
type: 'MAKE_RANDOM'
};
}
function tick() {
return {
type: 'TICK'
};
}
function startPlaying(timerId) {
return {
type: 'PLAY',
timerId
};
}
function stopPlaying(timerId) {
return {
type: 'STOP',
timerId
};
}
function clear() {
return {
type: 'CLEAR',
};
}
//COMPONENTS - 'dumb' functional components only receive props. They don't need to dispatch actions nor to they care about the overall state of the app
const Button = ({title, icon, handleClick}) => (
<span onClick={handleClick} className="button">
<i className={icon}></i> {title}
</span>
)
const Cell = ({alive, newBorn, handleClick}) => (
<td
onClick={handleClick}
className={`${alive ? 'alive' : ''} ${newBorn ? 'new-born' : ''}`}
>
</td>
)
//CONTAINERS - define a React component and use React-Redux to connect up to the Redux store
class Board_ extends Component {
render(){
return (
<div>
<table>
<tbody>
{this.props.board.map((row,i) =>
<tr key={i}> {row.map((cell,j) =>
<Cell
key={j}
alive={cell.status}
newBorn={cell.newBorn}
handleClick={() => this.props.toggleAlive(i,j)}
/>)}
</tr> )}
</tbody>
</table>
</div>
);
}
}
const mapStateToProps_1 = ({ board }) => {
return { board } ;
}
const mapDispatchToProps_1 = (dispatch) => {
return { toggleAlive: (x,y) => dispatch(toggleAlive(x,y)) }
}
const Board = connect(mapStateToProps_1, mapDispatchToProps_1)(Board_);
//
class Control_ extends Component {
componentDidMount(){
this.props.random();
this.togglePlay();
}
render(){
return (
<div className="controls">
<div className="buttons">
<Button
handleClick={() => this.props.random()}
title={'Randomise'}
icon={'fa fa-random'}
/>
<Button
handleClick={() => this.clear()}
title={'Clear'}
icon={'fa fa-undo'}
/>
<div className="button-group">
<Button
icon={this.props.playState.isRunning ? 'fa fa-pause' : 'fa fa-play' }
handleClick={() => this.togglePlay()}
/>
<Button
handleClick={() => this.props.tick()}
icon={'fa fa-step-forward'}
/>
</div>
</div>
</div>
);
}
togglePlay(){
if (this.props.playState.isRunning) {
clearInterval(this.props.playState.timerId);
this.props.stopPlaying();
} else {
let interval = setInterval(this.props.tick,100);
this.props.startPlaying(interval);
}
}
clear(){
if (this.props.playState.isRunning) {
clearInterval(this.props.playState.timerId);
this.props.stopPlaying();
}
this.props.clear();
}
}
const mapStateToProps_2 = ({playState}) => {
return { playState };
}
const mapDispatchToProps_2 = (dispatch) => {
return {
random: () => dispatch(makeRandomGrid()),
tick: () => dispatch(tick()),
startPlaying: (timerId) => dispatch(startPlaying(timerId)),
stopPlaying: () => dispatch(stopPlaying()),
clear: () => dispatch(clear())
};
}
const Control = connect(mapStateToProps_2,mapDispatchToProps_2)(Control_)
//
class Counter_ extends Component {
render(){
return (
<div className="counter">
Generations: {this.props.generations}
</div>
);
}
}
const mapStateToProps_3 = ({counter}) => {
return { generations: counter }
};
const Counter = connect(mapStateToProps_3)(Counter_);
//
const App = () => (
<div>
<h1>Game of Life (React + Redux)</h1>
<Board />
<Control />
<Counter />
</div>
)
//REDUCERS
const initialGrid = makeGrid(GRID_HEIGHT,GRID_WIDTH);
const boardReducer = (state = initialGrid, action) => {
switch(action.type){
case 'TOGGLE_ALIVE':
let board = state.slice(0);
let cell = board[action.x][action.y];
cell.status = !cell.status;
cell.newBorn = !cell.newBorn;
return board;
case 'MAKE_RANDOM':
//true param requests a random grid from makeGrid method
return makeGrid(GRID_HEIGHT, GRID_WIDTH, true);
case 'CLEAR':
return makeGrid(GRID_HEIGHT,GRID_WIDTH);
case 'TICK':
return advanceGrid(state.slice(0));
default:
return state;
}
};
const generationCounterReducer = (state = 0, action) => {
switch(action.type){
case 'TICK':
return state + 1;
case 'CLEAR':
return 0;
case 'MAKE_RANDOM':
return 0;
default:
return state;
}
};
const playInitialState = {
timerId: null,
isRunning: false
};
const playStatusReducer = (state = playInitialState, action) => {
switch(action.type){
case 'PLAY':
return {
timerId: action.timerId,
isRunning: true
};
case 'STOP':
return {
timerId: null,
isRuninng: false
};
default:
return state;
}
};
//COMBINE REDUCERS
const reducers = combineReducers({
board: boardReducer,
playState: playStatusReducer,
counter: generationCounterReducer,
});
//APPLICATION WRAPPER - wrap the app with the redux store and render to the DOM
const createStoreWithMiddleware = applyMiddleware()(createStore);
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<App />
</Provider>
, document.querySelector('.container'));
!
