forked from ovidiuch/flatris
-
Notifications
You must be signed in to change notification settings - Fork 0
/
WellGrid.jsx
82 lines (70 loc) · 1.99 KB
/
WellGrid.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
var React = require('react'),
ComponentTree = require('react-component-tree'),
constants = require('../constants.js'),
SquareBlock = require('./SquareBlock.jsx');
require('./WellGrid.less');
class WellGrid extends ComponentTree.Component {
/**
* Isolated matrix for the Tetriminos that landed inside the Well.
*/
constructor(props) {
super(props);
this.children = {
squareBlock: function(col, row, color) {
return {
component: SquareBlock,
ref: 'c' + col + 'r' + row,
color: color
};
}
}
}
render() {
return <ul className="well-grid">
{this._renderGridBlocks()}
</ul>;
}
_renderGridBlocks() {
var blocks = [],
rows = this.props.grid.length,
cols = this.props.grid[0].length,
widthPercent = 100 / cols,
heightPercent = 100 / rows,
row,
col,
blockValue;
for (row = 0; row < rows; row++) {
for (col = 0; col < cols; col++) {
if (!this.props.grid[row][col]) {
continue;
}
blockValue = this.props.grid[row][col];
blocks.push(
<li className="grid-square-block"
key={this._getIdFromBlockValue(blockValue)}
style={{
width: widthPercent + '%',
height: heightPercent + '%',
top: (row * heightPercent) + '%',
left: (col * widthPercent) + '%'
}}>
{this.loadChild('squareBlock',
col,
row,
this._getColorFromBlockValue(blockValue))}
</li>);
}
}
return blocks;
}
shouldComponentUpdate(nextProps, nextState) {
return nextProps.gridBlockCount !== this.props.gridBlockCount;
}
_getIdFromBlockValue(blockValue) {
return blockValue.split('#')[0];
}
_getColorFromBlockValue(blockValue) {
return '#' + blockValue.split('#')[1];
}
}
module.exports = WellGrid;