-
-
Notifications
You must be signed in to change notification settings - Fork 344
/
GamePanel.jsx
100 lines (87 loc) · 2.43 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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import React from 'react';
import { STOPPED, PLAYING, PAUSED } from '../constants/states';
import { SHAPES, COLORS } from '../constants/tetrimino';
import { attachPointerDownEvent } from '../lib/events';
import Tetrimino from './Tetrimino';
require('./GamePanel.less');
class GamePanel extends React.Component {
/**
* The game panel contains:
* - The next Tetrimino to be inserted
* - The score and lines cleared
* - Start or pause/resume controls
*/
getNextTetriminoClass() {
const 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(' ');
}
renderGameButton() {
const {
gameState,
onStart,
onPause,
onResume,
} = this.props;
let eventHandler;
let label;
switch (gameState) {
case PLAYING:
eventHandler = onPause;
label = 'Pause';
break;
case PAUSED:
eventHandler = onResume;
label = 'Resume';
break;
default:
eventHandler = onStart;
label = 'New game';
}
return React.DOM.button(attachPointerDownEvent(eventHandler), label);
}
render() {
const {
score,
lines,
nextTetrimino,
} = this.props;
return (
<div className="game-panel">
<p className="title">Flatris</p>
<p className="label">Score</p>
<p className="count">{score}</p>
<p className="label">Lines Cleared</p>
<p className="count">{lines}</p>
<p className="label">Next Shape</p>
<div className={this.getNextTetriminoClass()}>
{nextTetrimino ? (
<Tetrimino
key={nextTetrimino}
color={COLORS[nextTetrimino]}
grid={SHAPES[nextTetrimino]}
/>
) : null}
</div>
{this.renderGameButton()}
</div>
);
}
}
GamePanel.propTypes = {
gameState: React.PropTypes.oneOf([STOPPED, PLAYING, PAUSED]).isRequired,
score: React.PropTypes.number.isRequired,
lines: React.PropTypes.number.isRequired,
nextTetrimino: React.PropTypes.string,
onStart: React.PropTypes.func.isRequired,
onPause: React.PropTypes.func.isRequired,
onResume: React.PropTypes.func.isRequired,
};
GamePanel.defaultProps = {
nextTetrimino: null,
};
module.exports = GamePanel;