-
Notifications
You must be signed in to change notification settings - Fork 444
/
Leaderboard.jsx
63 lines (53 loc) · 1.56 KB
/
Leaderboard.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
var PlayerList = require('./PlayerList.jsx');
var PlayerSelector = require('./PlayerSelector.jsx');
var React = require('react');
var _ = require('underscore');
var connection = require('./connection');
class Leaderboard extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedPlayerId: null,
players: []
};
this.handlePlayerSelected = this.handlePlayerSelected.bind(this);
this.handleAddPoints = this.handleAddPoints.bind(this);
}
componentDidMount() {
var comp = this;
var query = connection.createSubscribeQuery('players', {$sort: {score: -1}});
query.on('ready', update);
query.on('changed', update);
function update() {
comp.setState({players: query.results});
}
}
componentWillUnmount() {
query.destroy();
}
selectedPlayer() {
return _.find(this.state.players, function(x) {
return x.id === this.state.selectedPlayerId;
}.bind(this));
}
handlePlayerSelected(id) {
this.setState({selectedPlayerId: id});
}
handleAddPoints() {
var op = [{p: ['score'], na: 5}];
connection.get('players', this.state.selectedPlayerId).submitOp(op, function(err) {
if (err) { console.error(err); return; }
});
}
render() {
return (
<div>
<div className="leaderboard">
<PlayerList {...this.state} onPlayerSelected={this.handlePlayerSelected} />
</div>
<PlayerSelector selectedPlayer={this.selectedPlayer()} onAddPoints={this.handleAddPoints} />
</div>
);
}
}
module.exports = Leaderboard;