Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//fb.me/react-with-addons-0.14.3.js"></script>
<script src="//fb.me/react-dom-0.14.3.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body class="container">
  <div id="btn-group"></div>
  <div id="react"></div>
</body>
</html>
 
body {
  padding: 10px 0 0 10px;
  background-color: lightgray;
  font-size: 11px;
  font-weight: bold;
}
​
.row {
  width: 700px;
}
​
.inline-center {
  text-align: center;
}
​
.col-md-1 {
  margin-bottom: 0;
  width: 30px;
  display: inline-block;
}
 
    var columns = 21, rows = 51;
var create2DArray = function(num) {
    var obj = [];
    for (var i = 0; i < num; i++) {
      obj[i] = [];
    }
    return obj;
  };
  
  var getRandomNumber = function(num) {
    return Math.floor((Math.random() * num) + 0);
  };
​
var CommonMixins = {
columns: columns,
rows: rows,
rgba: 255,
  create2DArray: create2DArray,
  getRandomNumber: getRandomNumber
};
​
var Grid = React.createClass({
  mixins: [CommonMixins],
  getInitialState: function() {
    return {
      rndX: 0,
      rndY: 0,
      x: 0,
      y: 0,
      keys: {
        rgba1: create2DArray(columns),
        rgba2: create2DArray(columns),
        rgba3: create2DArray(columns),
        cells: create2DArray(columns)
      },
      style: {}
    }
  },
  render: function() {
  
    this.state.x = this.props.x;
    this.state.y = this.props.y;
    this.state.rndX = this.getRandomNumber(this.columns);
    this.state.rndY = this.getRandomNumber(this.rows);
    var x = this.state.x,
        y = this.state.y,
        rndX = this.state.rndX,
        rndY = this.state.rndY;
​
    var areKeys = Object.keys(this.state.keys).length > 0;
    if (areKeys) {
      var values = this.state.objects;
      this.state.keys.cells[rndX][rndY] = this.props.objects.rndNum;  
      this.state.keys.rgba1[rndX][rndY] = this.props.objects.rgba1Val;
      this.state.keys.rgba2[rndX][rndY] = this.props.objects.rgba2Val;
      this.state.keys.rgba3[rndX][rndY] = this.props.objects.rgba3Val; 
    
      this.state.style = {
        backgroundColor: "rgba(" + this.state.keys.rgba1[x][y] + "," + this.state.keys.rgba2[x][y] + "," + this.state.keys.rgba3[x][y] + "," + 1 + ")"
      };
    } else {
      this.state.style = {
        color: "white"
      }
    }
    
    return (
      <div>
      {this.props.rows.map(function(row) {
        <div className="row">
          {this.props.columns.map(function(column) {
            <div className="col-md-1 thumbnail inline-center" style={this.state.style}>
              <div>
                {areKeys ? this.state.keys.cells[x][y] : ''}
              </div>
            </div>
          })}
        </div>
      })}
      </div>
    )
  }
});
​
var Buttons = React.createClass({
  render: function() {
  console.log(this.props.isInterval);
    return (
      <div>
          {!this.props.isInterval  
          ? <button className="btn btn-primary" onClick={this.props.start}>Start</button>
          : <button className="btn btn-danger" onClick={this.props.stop}>Stop</button>
          }
      </div>
    )
  }
});
​
var GridMixins = {
  getInitialState: function() {
    return {
      interval: {},
      isInterval: false,
      objects: {}
    }
  },
  randomizeCells: function() {
    this.setState({
      isInterval: true,
      objects: {
        rndNum: this.getRandomNumber(this.rgba),
        rgba1Val: this.getRandomNumber(this.rgba),
        rgba2Val: this.getRandomNumber(this.rgba),
        rgba3Val: this.getRandomNumber(this.rgba)
      }
    });
  },
  startTimer: function() {
    console.log("Starting timer...");
    this.state.interval = setInterval(this.randomizeCells, 0);
  },
  stopTimer: function() {
    console.log("Stopping timer...");
    clearInterval(this.state.interval);
    this.setState({
      isInterval: false
    });
  }
};
​
var GridWrapper1 = React.createClass({
  mixins: [CommonMixins, GridMixins],
  render: function() {    
    return (
        <div>
        <Buttons start={this.startTimer} stop={this.stopTimer} isInterval={this.state.isInterval} /><br/>
        <div className="grid"><Grid columns={this.columns} rows={this.rows} objects={this.state.objects} /></div>
        </div>
    )
  }
});
​
ReactDOM.render(
  <GridWrapper1 />,
  document.body
);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
shojibpro
0viewers