golscript.babel

var playback={
    "paused":"no",
    "anim": null,
    "restart":"no"
};

var Button =React.createClass({
  render: function(){
    var iconClass;
    switch(this.props.id){
      case "play"   : iconClass= "ion-play"; break;
      case "pause"  : iconClass= "ion-pause"; break;
      case "clear"  : iconClass= "ion-android-delete"; break;
      case "random" : iconClass= "ion-shuffle"; break;
      case "grid"   : iconClass= "ion-grid"; break;
      case "fade"   : iconClass= "ion-star"; break;
    }
    return(
      <button {...this.props} className="panel-button" title={this.props.id.toUpperCase()}>
        <i className={iconClass} id={this.props.id}/>
      </button>
      )
  }
});

var Panel= React.createClass({
  render: function(){
    var list= ["play", "pause", "clear", "random", "grid", "fade"];
    var gen= this.props.gen;

    return(
      <div {...this.props} className="control-panel">
        <div className="timer" >
          <span className="timerDescription">Generation: </span> 
          <span className="timerNumber">{gen}</span>
          <div className="ConwayName"><span className="actualtitle"> Conway's Game Of Life : React.js</span></div>
        </div>

          {
            list.map(function(data){
            return(
            <Button id={data}> 
            </Button>
            )
          })
        }
      </div>
      )
  }
});

var Cell= React.createClass({
  render: function(){
    //color stuff
    //var arr    = ["#96F751", "#16DB93", "#EFEA5A", "#F29E4C"],
    var ind    = +this.props.id.slice(4),
        colors = {
      "background":"hsl("+ (50+Math.floor((Math.floor(ind/40)+ (ind%60))*1.5))+", 80%, 70%)"
    };

    return(
     <div {...this.props} style={ this.props.randomness=="on" ? ( this.props.alive == "alive" ? colors : null) : null}>  
      </div>
    )
  }  
});

var GameBox= React.createClass({
  //create random cells in list
  getInitialState: function(){
    return({
      list: this.createCells(),
      grid: "off",
      fade: "off"
    })
  },

  //initial rows and columns
  getDefaultProps: function(){
    return({
      rows: 40,
      cols: 60,
    })
  },

  //for converting cartesian coordinates
  //to the relevant index in cell array
  Num: function(r, c){
    return (r*this.props.cols + c)
  },

  //returns number of live neighbors of
  //a cell at [row, col] in the grid
  checkalive: function(row, col){
    var cellarr = this.state.list.slice(),
        _cols   = this.props.cols,
        _rows   = this.props.rows,
        ind     = this.Num(row, col),
        top     = ind-_cols,
        bottom  = ind+_cols,
        S       = ind+_cols,
        N       = ind-_cols,
        W       = ind-1,
        E       = ind+1,
        NW      = top-1,
        NE      = top+1,
        SW      = bottom-1,
        SE      = bottom+1,
          neighbors = [ ];
    //corner cases--literally

    //top row
    if(row===0){
      top = ind+((_rows-1)*_cols),
      N   = top,
      NE  = top+1,
      NW  = top-1;
      //top-left corner
      if(col===0){
        SW =  _rows+_cols-1,
        W  =  (_cols-1),
        NW =  (_rows*_cols)-1;
      }
      //top-right corner
      else if(col==_cols-1){
        SE =  ind+1,
        E  =  0,
        NE =  (_rows-1)*_cols;       
      }
    }
    
    //bottom row
    else if(row ==_rows-1){
      S  = ind - ((_rows-1)*_cols),
      SW = S-1,
      SE = S+1;

      //bottom-left corner
      if(col===0){
        SW = (_cols-1),
        W  = (_rows*_cols) -1,
        NW = (ind-1);
      }
      //bottom-right corner
      else if(col==_cols-1){
        E  = ind-_cols+1,
        NE = ind-2*_cols+1,
        SE = 0;
      }
    }
    
    //all cells on left edge except those on bottom
    //and top
    else if((row!==0 && row!=_rows) &&col===0){
      W  = ind + _cols - 1,
      SW = ind + 2*_cols-1,
      NW = ind - 1;
    }

    //all cells on right edge except those on
    //bottom and top
    else if((row!==0 && row!=_rows) && col==_cols-1){
      E  = ind - _cols + 1,
      NE = ind - 2*_cols + 1,
      SE = ind + 1;
    }

    //get indices of all 8 neighbors
    neighbors.push(N, NW, NE, S, SW, SE, W, E); 
    var countlive=0;   
    for(var jj in neighbors){
      if(cellarr[neighbors[jj]]=="alive"){
        countlive++;
      } 
    }
    return countlive;
  },

  //will only be called once, at the beginning
  //creates random cells 
  createCells: function(option){
    var choice;
    var arr=[];
    for(var i=0; i<this.props.rows; i++){
      for(var j=0; j<this.props.cols; j++){
        if(option=="dead" || option=="alive"){
          choice = option;
        }
        else{
          choice= Math.floor(Math.random()*10) == 1? "alive": "dead";
        }
        arr.push(choice);
      }
    }
    return arr;
  },

  //this is the main animation function 
  //it changes every time props are recieved
  //the time prop changes every X seconds and 
  //thus the animation is started
  componentWillReceiveProps: function(){
    var ls      = this.state.list.slice(),
        deadcnt = 0;

    for(var r=0; r<this.props.rows; r++){
      for(var c=0; c<this.props.cols; c++){
        var ind   = this.checkalive(r,c),
           actind = this.Num(r,c);
           status = ls[actind];
        //Conway's Game of Life:
        //A dead cell becomes alive iff it has 3 live neighbors
        if(status=="dead"){
          if(ind==3) ls[actind]="alive";
        }
        //a live cell dies when surrounded by less than 2 neighbors
        //or more than 3 neighbors
        else{
          if(ind<2) ls[actind] ="dead";
          else if(ind>3) ls[actind]="dead";
        }
        if(ls[actind]=="dead") deadcnt++;
      }
    }
    
    //change the state
    //this causes us to have only one state component
    //all cells are stateless
    if(deadcnt == this.props.rows*this.props.cols) playback.paused="yes",playback.restart="yes";
    this.setState(function(){
      return(
        {list:ls}
        );
    })
  },

  handleClick: function(e){
    //panel options
    switch(e.target.id){
      case "play": 
        if(playback.paused=="yes"){
          playback.paused="no";
          window.requestAnimationFrame(playback.anim);
        }
        return;

      case "pause":
        if(playback.paused=="no"){
          playback.paused="yes";
        }
        return;

      case "clear":
        playback.paused="yes";
        playback.restart="yes";

        this.setState(function(){
          return({
            list: this.createCells("dead")
          })
        });
        return;

      case "random":
        playback.restart="yes";
        this.setState(function(){
          return({list: this.createCells()});
        });
        return;

      case "grid":
        this.setState(function(){
          if(this.state.grid=="off")
            { 
              var ans= "on";
              document.getElementById("grid").classList.add("activebutt");
            }
          else {
            ans= "off";
            document.getElementById("grid").classList.remove("activebutt");
          }
          return ({grid: ans})
        }) 
        return;

        case "fade":
        if(this.state.fade=="off")
        {
          var fadeval="on";
          document.getElementById("fade").classList.add("activebutt");
        }
        else {
          fadeval="off";
          document.getElementById("fade").classList.remove("activebutt");
        }
        this.setState(function(){
          return({fade:fadeval})
        });
        return;
    }

    //for clicking cells
    var ls = e.target.classList;
    var cop= this.state.list.slice();
    var ind= +e.target.id.slice(4);
    for(var i in ls){
      if(ls[i]=="cell-alive"){
        e.target.classList.remove("cell-alive");
        e.target.classList.add("cell-dead");
        cop[ind]="dead";
        break;
      }
      else if(ls[i]=="cell-dead"){
        e.target.classList.remove("cell-dead");
        e.target.classList.add("cell-alive");
        cop[ind]="alive";
        break;
      }
    }
    this.setState(function(){
      return({
        list: cop,})
    });
  },

  //render the cells
  render: function(){
    var rows  = this.props.rows,
      cols    = this.props.cols,
      gridval = this.state.grid,
      fadeval = this.state.fade,
      over    = {
        overflow : gridval=="off"? "visible" : "hidden"
      };

    return(
    <div className={this.props.className} onClick={this.handleClick} style={over}>  
      <Panel id="panel" gen = {playback.restart=="no"? this.props.generation: 0}/>
        {this.state.list.map(function(data, index){
          return(
            <Cell className={"cell cell-"+data+" grid-"+gridval+" fade-"+fadeval} id={"val-"+index} key={index} randomness={gridval} alive={data}/>
          )
        })}
    </div>
      )
  }
});

(function(){
  //time: to keep the animation going and get the generation
  var time=0;
  playback.anim = function (){
    if(playback.restart=="yes"){
      time=0;
      playback.restart="no";
    }

    ReactDOM.render(
    <GameBox className="outerbox" generation={time}/> , document.getElementById("Board"));
    if(playback.paused=="no"){
        window.requestAnimationFrame(playback.anim);
    }
    time+=1;
  }
  window.requestAnimationFrame(playback.anim);
}).call(this);