Skip to content

Commit 6f9ac63

Browse files
hipertrackerhipertracker
committed
added code and updated README
1 parent 9b55e1d commit 6f9ac63

File tree

5 files changed

+196
-1
lines changed

5 files changed

+196
-1
lines changed

‎.idea/leaderboard.iml‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎README.md‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,14 @@
11
# meteor-reactjs-examples
2-
Examples of using ReactJS with Meteor
2+
3+
Examples of using [hipertracker:meteor-reactjs](https://github.com/hipertracker/meteor-reactjs)
4+
5+
## Usage
6+
```
7+
$ git clone https://github.com/hipertracker/meteor-reactjs-examples
8+
$ cd meteor-reactjs-examples/examples/leaderboard
9+
$ meteor add hipertracker/meteor-reactjs
10+
$ meteor
11+
```
12+
13+
The leaderboard example is based on [that code](https://github.com/reactjs/react-meteor/tree/master/examples/leaderboard) but it's upgraded to new Meteor and new JSX syntax with enabled ES6 transforms.
14+

‎examples/leaderboard/Leaderboard.css‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
body {
2+
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
3+
font-weight: 200;
4+
margin: 50px 0;
5+
padding: 0;
6+
-webkit-user-select: none;
7+
-khtml-user-select: none;
8+
-moz-user-select: none;
9+
-o-user-select: none;
10+
user-select: none;
11+
}
12+
13+
#outer {
14+
width: 600px;
15+
margin: 0 auto;
16+
}
17+
18+
.player {
19+
cursor: pointer;
20+
padding: 5px;
21+
}
22+
23+
.player .name {
24+
display: inline-block;
25+
width: 300px;
26+
font-size: 1.75em;
27+
}
28+
29+
.player .score {
30+
display: inline-block;
31+
width: 100px;
32+
text-align: right;
33+
font-size: 2em;
34+
font-weight: bold;
35+
color: #777;
36+
}
37+
38+
.player.selected {
39+
background-color: yellow;
40+
}
41+
42+
.player.selected .score {
43+
color: black;
44+
}
45+
46+
.details, .none {
47+
font-weight: bold;
48+
font-size: 2em;
49+
border-style: dashed none none none;
50+
border-color: #ccc;
51+
border-width: 4px;
52+
margin: 50px 10px;
53+
padding: 10px 0px;
54+
}
55+
56+
.none {
57+
color: #777;
58+
}

‎examples/leaderboard/Leaderboard.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<head>
2+
<title>EXAMPLE</title>
3+
</head>
4+
5+
<body>
6+
<div id="outer"></div>
7+
</body>
8+

‎examples/leaderboard/Leaderboard.jsx‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
Players = new Meteor.Collection('players');
2+
3+
if (Meteor.isClient) {
4+
Meteor.startup(() => React.render(<Leaderboard/>, document.getElementById('outer')));
5+
}
6+
7+
// On server startup, create some players if the database is empty.
8+
if (Meteor.isServer) {
9+
Meteor.startup(() => {
10+
if (!Players.find().count()) {
11+
var names = [
12+
'Ada Lovelace',
13+
'Grace Hopper',
14+
'Marie Curie',
15+
'Carl Friedrich Gauss',
16+
'Nikola Tesla',
17+
'Claude Shannon'
18+
];
19+
names.forEach((name) => {
20+
Players.insert({name: name, score: Math.floor(Random.fraction() * 10) * 5});
21+
});
22+
}
23+
});
24+
}
25+
26+
var Leaderboard = React.createClass({
27+
mixins: [ReactMeteor.Mixin],
28+
29+
30+
getMeteorState() {
31+
var selectedPlayer = Players.findOne(Session.get("selected_player"));
32+
return {
33+
players: Players.find({}, {sort: {score: -1, name: 1}}).fetch(),
34+
selectedPlayer: selectedPlayer,
35+
selectedName: selectedPlayer && selectedPlayer.name
36+
};
37+
},
38+
39+
addFivePoints() {
40+
Players.update(Session.get("selected_player"), {$inc: {score: 5}});
41+
},
42+
43+
selectPlayer(id) {
44+
Session.set("selected_player", id);
45+
},
46+
47+
renderPlayer(model) {
48+
var _id = this.state.selectedPlayer && this.state.selectedPlayer._id;
49+
return (
50+
<Player
51+
key={model._id}
52+
name={model.name}
53+
score={model.score}
54+
className={model._id === _id ? "selected" : ""}
55+
onClick={this.selectPlayer.bind(this, model._id)}
56+
/>
57+
)
58+
},
59+
60+
render() {
61+
if (!this.state.players.length) {
62+
return <span/>;
63+
}
64+
var children = [
65+
<div className="leaderboard">
66+
{ this.state.players.map(this.renderPlayer) }
67+
</div>
68+
];
69+
70+
if (this.state.selectedName) {
71+
children.push(
72+
<div className="details">
73+
<div className="name">{this.state.selectedName}</div>
74+
<input
75+
type="button"
76+
value="Give 5 points"
77+
onClick={this.addFivePoints}
78+
onClick={this.addFivePoints}
79+
/>
80+
</div>
81+
);
82+
83+
} else {
84+
children.push(
85+
<div className="none">Click a player to select</div>
86+
);
87+
}
88+
89+
return <div>{ children }</div>;
90+
}
91+
});
92+
93+
Player = React.createClass({
94+
render() {
95+
var {name, score, className, ...other} = this.props;
96+
var cx = React.addons.classSet;
97+
var classes = cx({
98+
player: true,
99+
selected: className
100+
});
101+
return (
102+
<div {...other} className={classes}>
103+
<span className="name">{name}</span>
104+
<span className="score">{score}</span>
105+
</div>
106+
);
107+
}
108+
});
109+

0 commit comments

Comments
 (0)