-
Notifications
You must be signed in to change notification settings - Fork 0
/
Cell.jsx
87 lines (72 loc) · 1.65 KB
/
Cell.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
var react = require('react'),
cx = require('react-classset');
var Cell = react.createClass({
getCellContent: function(){
if (!this.props.covered){
if (this.props.bomb){
return 'X';
} else {
return this.props.adjacentBombs;
}
}
},
getInitialState: function(){
return {flagged: false}
},
componentDidMount: function(){
var node = react.findDOMNode(this);
node.style.width = this.props.size + '%';
},
componentDidUpdate: function(){
var node = react.findDOMNode(this);
node.style.width = this.props.size + '%';
},
handleCellClick: function(){
if (!this.timeout){
this.props.handleCellClick()
}
},
handleMouseDown: function(){
var state = this.state;
var toggleFlagged = _.bind(function(){
this.setState({flagged: !this.state.flagged})
}, this);
this.timeOut = setTimeout(function(){
toggleFlagged()
}, 1000);
},
handleMouseUp: function(){
clearTimeout(this.timeOut);
this.timeout = null;
},
getCellClasses: function(){
var classes = {
"cell": true,
"bomb": this.props.bomb,
"covered": this.props.covered,
"showCount": !this.props.bomb && !this.props.covered,
"gameLost": this.props.hasLost,
"gameWon": this.props.hasWon
};
return cx(classes);
},
render: function(){
return (
<div
onMouseDown = {this.handleMouseDown}
onMouseUp = {this.handleMouseUp}
onClick = {this.handleCellClick}
className = {this.getCellClasses()}
bomb = {this.props.bomb}
adjacentBombs = {this.props.adjacentBombs}
covered = {this.props.covered}
>
<div className = {'cellContent'}
>
{this.getCellContent()}
</div>
</div>
)
}
});
module.exports = Cell;