John Conway's Game Of Life in React

index.pug

head
 link(href='https://fonts.googleapis.com/css?family=Baloo+Bhaina', rel='stylesheet')
body
 .container
   h1.text-center John Conway's Game of Life
   ol Instructions
    li Set grid size
    li Create a random pattern and choose from speed options or draw your own pattern onto the grid and then play in 3 different speeds
    li Remember to click stop before you play again
    li Watch the video at the bottom to understand the rules of the game
   br
   h6#Generation
   #grid.well
   .menu
    button.menubtn#ten 10 X 10 
    button.menubtn#twenty 20 X 20
    button.menubtn#forty 40 X 40
    button.menubtn#eighty 80 X 80
   br
   button.btn.btn-block#random Create Random Pattern And Start
    a.speed.btn#randomslow(href='#') Slow
    a.speed.btn#randommedium(href='#') Medium
    a.speed.btn#randomfast(href='#') Fast
   button.btn.btn-block#play Start
    a.speed.btn#slow(href='#') Slow      
    a.speed.btn#medium(href='#') Medium
    a.speed.btn#fast(href='#') Fast
   a.btn.btn-block#stop(href='') Stop
   button.btn.btn-block#clear Clear
   br
   .rules
    h6.text-center See John Conway Explain The Rules Below 
    iframe(width='600', height='300', src='https://www.youtube.com/embed/E8kUJL04ELA')
   
   

john-conway-s-game-of-life-in-react-jquery.markdown

John Conway's Game Of Life in React & jQuery

A Pen by Karthik on CodePen.

License.

script.babel

var e = {};
/*------------------------------------------------------------------------ */
var Gridone = React.createClass({
  getInitialState: function() {
    var array = [];
    for (var i = 0; i < 100; i++) {
      array.push(<Cell index={i} cells={array} />);
      // console.log(i);
    };
    return {
      cells: array
    };
  },

  render: function() {
    return (<div>{this.state.cells}</div>);
  }
});
/*------------------------------------------------------------------------ */
var Gridtwo = React.createClass({
  getInitialState: function() {
    var array = [];
    for (var i = 0; i < 400; i++) {
      array.push(<Cell index={i} cells={array} />);
      // console.log(i);
    };
    return {
      cells: array
    };
  },

  render: function() {
    return (<div>{this.state.cells}</div>);
  }
});
/*------------------------------------------------------------------------ */
var Gridthree = React.createClass({
  getInitialState: function() {
    var array = [];
    for (var i = 0; i < 1600; i++) {
      array.push(<Cell index={i} cells={array} />);
      // console.log(i);
    };
    return {
      cells: array
    };
  },

  render: function() {
    return (<div>{this.state.cells}</div>);
  }
});
/*------------------------------------------------------------------------ */
var Gridfour = React.createClass({
  getInitialState: function() {
    var array = [];
    for (var i = 0; i < 6400; i++) {
      array.push(<Cell index={i} cells={array} />);
      // console.log(i);
    };
    return {
      cells: array
    };
  },

  render: function() {
    return (<div>{this.state.cells}</div>);
  }
});
/*------------------------------------------------------------------------ */
var Cell = React.createClass({
  getInitialState: function() {
    return {
      alive: false,
      germinate: false
    };
  },

  componentWillMount: function() {
    $(e).on("play", this.getRowColNeighbours);
    $(e).on("rerender", this.newGeneration);
    //$(e).on("clear", this.clear);
    $(e).on("random", this.genRandomPattern);
    this.props.cells[this.props.index] = this
  },

  genRandomPattern: function() {
    for(var q = 0; q<this.props.cells.length;q++){
     var randomCell = Math.floor(Math.random() * 2);
		if (randomCell === 0) {
			this.props.cells[q].state.germinate = true
		} else {
			this.props.cells[q].state.germinate = false
		} 
    }
  },
  
  /*clear: function(){
    for(var p = 0;p<this.props.cells.length;p++){
      if (this.props.cells[p].state.alive === true){this.props.cells[p].state.germinate = false}
    }
  },*/

  getRowColNeighbours: function() {
    var dim = Math.sqrt(this.props.cells.length);
    //console.log(dim);
    var row = Math.floor(this.props.index / dim);
    var column = this.props.index - (row * dim);
   // console.log('row:' + row + ',col:' + column);
    //console.log(this.props.index);

    var neighbours = 0;
    //COUNTING NEIGHBOURS AFTER FEEDING PARAMS TO NEXT FUNC
    if (this.checkCellStatus(row, column - 1)) {
      neighbours += 1;
    };
    if (this.checkCellStatus(row, column + 1)) {
      neighbours += 1;
    };
    if (this.checkCellStatus(row - 1, column - 1)) {
      neighbours += 1;
    };
    if (this.checkCellStatus(row - 1, column)) {
      neighbours += 1;
    };
    if (this.checkCellStatus(row - 1, column + 1)) {
      neighbours += 1;
    };
    if (this.checkCellStatus(row + 1, column - 1)) {
      neighbours += 1;
    };
    if (this.checkCellStatus(row + 1, column)) {
      neighbours += 1;
    };
    if (this.checkCellStatus(row + 1, column + 1)) {
      neighbours += 1;
    };
    console.log('neigh: ' + neighbours);
    //APPLY RULES OF GAME
    if (this.state.alive) {
      if (neighbours < 2) {
        this.state.germinate = false
        //console.log('dead');
      };
      if (neighbours > 3) {
        this.state.germinate = false
       // console.log('dead');
      };
      if (neighbours == 2 || neighbours == 3) {
        this.state.germinate = true
       // console.log('alive');
      };

    } else {
      if (neighbours == 3) {
        this.state.germinate = true
       // console.log('alive');
      };

    }
  },

  checkCellStatus: function(x, y) {
    //EDGES AND CORNERS
    var dim = Math.sqrt(this.props.cells.length);
    if (x == -1) {
      x = dim - 1
    };
    if (x == dim) {
      x = 0
    };
    if (y == -1) {
      y = dim - 1
    };
    if (y == dim) {
      y = 0
    };
    //CHECKING ALIVE OR DEAD STATUS OF NEIGHBOUR
    var index = x * dim + y;
    return this.props.cells[index].state.alive;
    //console.log('checked');
  },

  onClick: function() {
    //TOGGLE ALIVE OR DEAD ON CLICK
    this.setState({
      alive: !this.state.alive
    });
  },

  render: function() {
    // console.log('index: ' + this.props.index);
    return (<div className={this.state.alive?"cell alive":"cell"} onClick={this.onClick}></div>);
  },

  newGeneration: function() {
    //console.log('next');
    this.setState({
      alive: this.state.germinate
    });
   // console.log(this.state.germinate);
  }
});

/*----------------------------------------------------------------------- */
var Break = false;

function slow() {
  for (var j = 0; j < 100000; j++) {
    if(Break){break;}
    (function main(j) {
      setTimeout(function() {
        $(e).trigger("play");
        $(e).trigger("rerender");
        $('#Generation').text('Generation: ' + j);
      }, 1000 * j / 2);
    }(j));
  }
};

function medium() {
  for (var j = 0; j < 10000; j++) {
    if(Break){break;}
    (function main(j) {
      setTimeout(function() {
        $(e).trigger("play");
        $(e).trigger("rerender");
        $('#Generation').text('Generation: ' + j);
      }, 1000 * j / 8);
    }(j));
  }
};

function fast() {
  for (var j = 0; j < 1000; j++) {
    if(Break){break;}
    (function main(j) {
      setTimeout(function() {
        $(e).trigger("play");
        $(e).trigger("rerender");
        $('#Generation').text('Generation: ' + j);
      }, 1000 * j / 16);
    }(j));
  }
};

$('#randomslow').click(function() {
  $(e).trigger("random");
  setTimeout(slow, 1000);
});
$('#randommedium').click(function() {
  $(e).trigger("random");
  setTimeout(medium, 1000);
});
$('#randomfast').click(function() {
  $(e).trigger("random");
  setTimeout(fast, 1000);
});
$('#slow').click(function() {
  slow();
});
$('#medium').click(function() {
  medium();
});
$('#fast').click(function() {
  fast();
});
/*$('#stop').click(function(events) {
  events.preventDefault();
  Break = true;
});*/
/*$('#clear').click(function() {
  $(e).trigger("clear");
});
/*----------------------------------------------------------------------- */
$('#ten').click(function() {
  ReactDOM.render(<Gridone />, document.getElementById('grid'));
  $('.cell').css({'width': '58px','height': '58px'});
});
$('#twenty').click(function() {
  ReactDOM.render(<Gridtwo />, document.getElementById('grid'));
  $('.cell').css({'width': '29px','height': '29px'});
});
$('#forty').click(function() {
  ReactDOM.render(<Gridthree />, document.getElementById('grid'));
  $('.cell').css({'width': '14.5px','height': '14.5px'});
});
$('#eighty').click(function() {
  ReactDOM.render(<Gridfour />, document.getElementById('grid'));
  $('.cell').css({'width': '7.25px','height': '7.25px'});
});
/*----------------------------------------------------------------------- */

/*User Story: When I first arrive at the game, it will randomly generate a board and start playing.

User Story: I can start and stop the board.

User Story: I can set up the board.

User Story: I can clear the board.

User Story: When I press start, the game will play out.

User Story: Each time the board changes, I can see how many generations have gone by. 
/*.floating-action-btn
 position: absolute !important

.speed
 box-shadow: 0px 5px 11px -2px rgba(0, 0, 0, 0.18), 0px 4px 12px -7px rgba(0, 0, 0, 0.15)
 border-radius: 50%
 display: block
 width: 56px
 height: 56px
 margin: 20px auto 0
 position: relative
 -webkit-transition: all .1s ease-out
 transition: all .1s ease-out

 &:active, &:focus, &:hover
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28)

 &:not(:last-child)
  width: 40px
  height: 40px
  margin: 20px auto 0
  opacity: 0
  -webkit-transform: translateY(50px)
  -ms-transform: translateY(50px)
  transform: translateY(50px)

.nav:hover .speed:not(:last-child)
 opacity: 1
 -webkit-transform: none
 -ms-transform: none
 transform: none
 margin: 15px auto 0
 
    
 
 
/*hr
 border-top: 10px

*/

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>

style.sass

* 
 margin: 0
 padding: 0
 
.well
 background: url("https://cdn.shutterstock.com/shutterstock/videos/13791776/thumb/1.jpg") 
 border: 10px solid #222
 box-shadow: 0px 16px 24px 2px rgba(204,68,68,0.8)

body
 background-image: radial-gradient(#c44,#111)
 color: white
 font-family: 'Baloo Bhaina', cursive

#grid
 width: 600px
 height: 600px 
 margin: auto
 display: block
  
.rules
 border: 5px solid grey
 color: grey
 border-radius: 10%
 width: 610px
 margin: auto

iframe
 border-radius: 10%

.cell
 width: 58px
 height: 58px
 border-right: solid black 1px
 border-bottom: solid black 1px
 display: block
 float: left

.cell.alive 
 background: rgba(100,221,23,0.6)

.btn-block
 background: url("https://cdn.shutterstock.com/shutterstock/videos/13791776/thumb/1.jpg")
 box-shadow: 0px 16px 24px 2px rgba(204,68,68,0.8)
 font-family: 'Baloo Bhaina'
 color: white

.menu
 margin: 0px auto
 background: #222
 width: 500px
 box-shadow: 0px 16px 24px 2px rgba(204,68,68,0.8)
 margin-top: 0.3px

.menubtn
 margin: 0 4.4px
 width: 112.6px

#clear
 display: none
 

 /*76,175,80,
 

 

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />