-
-
Notifications
You must be signed in to change notification settings - Fork 344
/
Well.jsx
90 lines (80 loc) · 2.44 KB
/
Well.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
83
84
85
86
87
88
89
90
import React from 'react';
import { COLORS } from '../constants/tetrimino';
import { getExactPosition } from '../lib/grid';
import WellGrid from './WellGrid';
import Tetrimino from './Tetrimino';
require('./Well.less');
class Well extends React.Component {
/**
* A rectangular vertical shaft, where Tetriminos fall into during a Flatris
* game. The Well has configurable size and speed. Tetrimino pieces can be
* inserted inside the well and they will fall until they hit the bottom, and
* eventually fill it. Whenever the pieces form a straight horizontal line it
* will be cleared, emptying up space and allowing more pieces to enter
* afterwards.
*/
shouldComponentUpdate(nextProps) {
return (
nextProps.grid !== this.props.grid ||
nextProps.activeTetrimino !== this.props.activeTetrimino ||
nextProps.activeTetriminoGrid !== this.props.activeTetriminoGrid ||
nextProps.activeTetriminoPosition !== this.props.activeTetriminoPosition
);
}
getNumberOfRows() {
return this.props.grid.length;
}
getNumberOfCols() {
return this.props.grid[0].length;
}
getActiveTetriminoStyles() {
const rows = this.getNumberOfRows();
const cols = this.getNumberOfCols();
const { x, y } = getExactPosition(this.props.activeTetriminoPosition);
return {
top: `${(100 / rows) * y}%`,
left: `${(100 / cols) * x}%`,
width: `${(100 / cols) * 4}%`,
height: `${(100 / rows) * 4}%`,
};
}
render() {
return (
<div className="well">
{this.props.activeTetrimino ? (
<div
className="active-tetrimino"
style={this.getActiveTetriminoStyles()}
>
<Tetrimino
color={COLORS[this.props.activeTetrimino]}
grid={this.props.activeTetriminoGrid}
/>
</div>
) : null}
<WellGrid
grid={this.props.grid}
/>
</div>
);
}
}
Well.propTypes = {
grid: React.PropTypes.arrayOf(
React.PropTypes.arrayOf(React.PropTypes.array),
).isRequired,
activeTetrimino: React.PropTypes.string,
activeTetriminoGrid: React.PropTypes.arrayOf(
React.PropTypes.arrayOf(React.PropTypes.number),
),
activeTetriminoPosition: React.PropTypes.shape({
x: React.PropTypes.number,
y: React.PropTypes.number,
}),
};
Well.defaultProps = {
activeTetrimino: null,
activeTetriminoGrid: null,
activeTetriminoPosition: null,
};
export default Well;