forked from ovidiuch/flatris
-
Notifications
You must be signed in to change notification settings - Fork 0
/
GamePanel.jsx
85 lines (74 loc) · 2.14 KB
/
GamePanel.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
var React = require('react'),
ComponentTree = require('react-component-tree'),
constants = require('../constants.js'),
events = require('../lib/events.js'),
Tetrimino = require('./Tetrimino.jsx');
require('./GamePanel.less');
class GamePanel extends ComponentTree.Component {
/**
* The game panel contains:
* - The next Tetrimino to be inserted
* - The score and lines cleared
* - Start or pause/resume controls
*/
constructor() {
super();
this.children = {
nextTetrimino: function() {
var tetrimino = this.props.nextTetrimino;
return {
component: Tetrimino,
key: tetrimino,
color: constants.COLORS[tetrimino],
grid: constants.SHAPES[tetrimino]
};
}
};
}
render() {
return <div className="game-panel">
<p className="title">Flatris</p>
<p className="label">Score</p>
<p className="count">{this.props.score}</p>
<p className="label">Lines Cleared</p>
<p className="count">{this.props.lines}</p>
<p className="label">Next Shape</p>
<div className={this._getNextTetriminoClass()}>
{this.props.nextTetrimino ? this.loadChild('nextTetrimino') : null}
</div>
{this._renderGameButton()}
</div>;
}
_renderGameButton() {
var eventHandler,
label;
if (!this.props.playing) {
eventHandler = this.props.onPressStart;
label = 'New game';
} else if (this.props.paused) {
eventHandler = this.props.onPressResume;
label = 'Resume';
} else {
eventHandler = this.props.onPressPause;
label = 'Pause';
}
return React.DOM.button(events.attachPointerDownEvent(eventHandler), label);
}
_getNextTetriminoClass() {
var classes = ['next-tetrimino'];
// We use this extra class to position tetriminos differently from CSS
// based on their type
if (this.props.nextTetrimino) {
classes.push('next-tetrimino-' + this.props.nextTetrimino);
}
return classes.join(' ');
}
}
GamePanel.defaultProps = {
playing: false,
paused: false,
score: 0,
lines: 0,
nextTetrimino: null
};
module.exports = GamePanel;