gistfile1.txt

var gameOfLife = {
  width: 50,
  height: 50,
  stepInterval: null,

  createAndShowBoard: function () {
    // create <table> element
    var goltable = document.createElement("tbody");

    // build Table HTML
    var tablehtml = '';
    for (var h=0; h<this.height; h++) {
      tablehtml += "<tr id='row+" + h + "'>";
      for (var w=0; w<this.width; w++) {
        tablehtml += "<td data-status='dead' id='" + w + "-" + h + "'></td>";
      }
      tablehtml += "</tr>";
    }
    goltable.innerHTML = tablehtml;

    // add table to the #board element
    var board = document.getElementById('board');
    board.appendChild(goltable);

    // once html elements are added to the page, attach events to them
    this.setupBoardEvents();
  },

  forEachCell: function (iteratorFunc) {
    /*
      Write forEachCell here. You will have to visit
      each cell on the board, call the "iteratorFunc" function,
      and pass into func, the cell and the cell's x & y
      coordinates. For example: iteratorFunc(cell, x, y)
    */

    for (var h = 0; h < this.height; h++) {
      for (var w = 0; w < this.width; w++) {
        var cell = document.getElementById(h+'-'+w);
          iteratorFunc(cell,h,w);
        }
    }

  },

  setupBoardEvents: function() {
    // each board cell has an CSS id in the format of: "x-y"
    // where x is the x-coordinate and y the y-coordinate
    // use this fact to loop through all the ids and assign
    // them "on-click" events that allow a user to click on
    // cells to setup the initial state of the game
    // before clicking "Step" or "Auto-Play"

    // clicking on a cell should toggle the cell between "alive" & "dead"
    // for ex: an "alive" cell be colored "blue", a dead cell could stay white

    // EXAMPLE FOR ONE CELL
    // Here is how we would catch a click event on just the 0-0 cell
    // You need to add the click event on EVERY cell on the board
    var stepButton = document.getElementById('step_btn');
    var playButton = document.getElementById('play_btn');
    var clearedButton = document.getElementById('clear_btn');
    var randButton = document.getElementById('reset_btn');
    
    stepButton.onclick = this.step.bind(this);
    playButton.onclick = this.enableAutoPlay.bind(this);
    clearedButton.onclick = this.cleared.bind(this);




    var onCellClick = function (e) {
      // QUESTION TO ASK YOURSELF: What is "this" equal to here?
      // how to set the style of the cell when it's clicked
      if (this.getAttribute('data-status') == 'dead') {
        this.className = "alive";
        this.setAttribute('data-status', 'alive');
      } else {
        this.className = "dead";
        this.setAttribute('data-status', 'dead');
      }
    };


    // this.forEachCell().onclick = onCellClick;
    this.forEachCell(function(cell){
      cell.onclick = onCellClick;
    });
  },

  step: function () {
    // Here is where you want to loop through all the cells
    // on the board and determine, based on it's neighbors,
    // whether the cell should be dead or alive in the next
    // evolution of the game.
    //
    // You need to:
    // 1. Count alive neighbors for all cells
    // 2. Set the next state of all cells based on their alive neighbors
    var obj ={};
    this.forEachCell(function(cell) {
      var h;
      var w;
      // var obj = {};

        w = Number(cell.getAttribute('id').split('-')[0]);
        h = Number(cell.getAttribute('id').split('-')[1]);
        obj[cell.getAttribute('id')] = cell.getAttribute('data-status');
    });
    

    this.forEachCell(function(cell,h,w) {
      var status = cell.getAttribute('data-status');

      var counter = 0;
      if(obj[h+"-"+ (w+1)] === "alive"){
        counter++;
      }

      if(obj[(h+1)+"-"+ w] === "alive"){
        counter++;
      }

      if(obj[(h+1)+"-"+ (w+1)] === "alive"){
        counter++;
      }

      if(obj[(h-1)+"-"+ w] === "alive") {
        counter++
      }

      if(obj[h+"-"+ (w-1)] === "alive") {
        counter++
      }

      if(obj[(h-1) +"-"+ (w-1)] === "alive") {
        counter++
      }

      if(obj[(h+1) +"-"+ (w-1)] === "alive") {
        counter++
      }

      if(obj[(h-1) +"-"+ (w+1)] === "alive") {
        counter++
      }

      if(counter === 2 || counter === 3) {
        cell.setAttribute('data-status', 'alive');
        cell.className = 'alive';
      }

      if(counter < 2) {
       cell.setAttribute('data-status', 'dead');
       cell.className = 'dead';

      }

      if(counter > 3) {
        cell.setAttribute('data-status', 'dead');
        cell.className = 'dead';
      }

      if(status === 'dead' && counter === 3) {
        cell.setAttribute('data-status', 'alive');
        cell.className = 'alive';
      }

    });



  },

  cleared: function () {
    this.forEachCell(function(cell) {
      cell.setAttribute('data-status', 'dead');
      cell.className = 'dead';
    });

  },

  enableAutoPlay: function () {
    // Start Auto-Play by running the 'step' function
    // automatically repeatedly every fixed time interval
    setInterval(this.step.bind(this), 200);
   

  }
};

  gameOfLife.createAndShowBoard();