Added gatherers on sidebar

This commit is contained in:
Chris Blanchard 2015-07-21 01:24:14 +01:00
parent 9f4fd9be53
commit 7a5d0ec573
6 changed files with 105 additions and 35 deletions

4
.gitignore vendored
View file

@ -1 +1,3 @@
node_modules
node_modules
npm-debug.log
.module-cache/

View file

@ -4,26 +4,36 @@ module.exports = function (io) {
var root = io.of("/");
var authorised = io.of("/authorised");
var emitCount = function () {
root.emit('gatherCount', {
count: root.sockets.length
// Authorisation
root.use(function (socket, next) {
console.log(socket)
socket._user = {
username: "Chris (" + socket.id.slice(0,5) + ")",
steamId: "11111111",
email: "cablanchard@gmail.com",
bans: []
};
next();
});
var refreshGatherers = function (socket) {
var receiver = (socket !== undefined) ? socket : root;
receiver.emit('gatherCount', {
count: root.sockets.length,
gatherers: root.sockets.map(function (socket) {
return socket._user
})
});
};
var onConnection = function (socket) {
emitCount();
};
var onDisconnect = function (socket) {
emitCount();
};
io.on('connection', function (socket) {
onConnection(socket);
refreshGatherers();
socket.on('refreshGathers', refreshGatherers.bind(null, socket));
socket.on('disconnect', function (socket) {
onDisconnect();
refreshGatherers();
});
});
};

0
lib/chat/index.js Normal file
View file

View file

@ -1,10 +1,4 @@
var MenuCounter = React.createClass({
componentDidMount: function () {
socket.on('gatherCount', this.updateCount)
},
updateCount: function (data) {
this.setProps({count: data.count});
},
var GatherCounter = React.createClass({
render: function () {
return (
<li>
@ -14,4 +8,41 @@ var MenuCounter = React.createClass({
}
});
React.render(<MenuCounter count={0} />, document.getElementById('side-menu'));
var Gatherer = React.createClass({
render: function () {
return (
<li>
<a href="#">{this.props.gatherer.username}</a>
</li>
);
}
});
var GathererMenu = React.createClass({
componentDidMount: function () {
socket.on('gatherCount', this.updateGatherers);
},
updateGatherers: function (data) {
this.setProps({
count: data.count,
gatherers: data.gatherers
});
},
render: function () {
var gatherers = this.props.gatherers.map(function (gatherer) {
return (
<Gatherer gatherer={gatherer} />
);
});
return (
<ul className="nav" id="side-menu">
<GatherCounter {...this.props} />
{gatherers}
</ul>
);
}
});
React.render(<GathererMenu count={0} gatherers={[]} />, document.getElementById('side-menu'));

View file

@ -1,10 +1,4 @@
var MenuCounter = React.createClass({displayName: "MenuCounter",
componentDidMount: function () {
socket.on('gatherCount', this.updateCount)
},
updateCount: function (data) {
this.setProps({count: data.count});
},
var GatherCounter = React.createClass({displayName: "GatherCounter",
render: function () {
return (
React.createElement("li", null,
@ -14,4 +8,41 @@ var MenuCounter = React.createClass({displayName: "MenuCounter",
}
});
React.render(React.createElement(MenuCounter, {count: 0}), document.getElementById('side-menu'));
var Gatherer = React.createClass({displayName: "Gatherer",
render: function () {
return (
React.createElement("li", null,
React.createElement("a", {href: "#"}, this.props.gatherer.username)
)
);
}
});
var GathererMenu = React.createClass({displayName: "GathererMenu",
componentDidMount: function () {
socket.on('gatherCount', this.updateGatherers);
},
updateGatherers: function (data) {
this.setProps({
count: data.count,
gatherers: data.gatherers
});
},
render: function () {
var gatherers = this.props.gatherers.map(function (gatherer) {
return (
React.createElement(Gatherer, {gatherer: gatherer})
);
});
return (
React.createElement("ul", {className: "nav", id: "side-menu"},
React.createElement(GatherCounter, React.__spread({}, this.props)),
gatherers
)
);
}
});
React.render(React.createElement(GathererMenu, {count: 0, gatherers: []}), document.getElementById('side-menu'));

View file

@ -33,10 +33,6 @@
<ul class="nav" id="side-menu">
<li class="">
<a href="#"><i class="fa fa-users fa-fw"></i> Gatherers</a>
</li>
<li class="">
<a href="#"><i class="fa fa-users-o fa-fw"></i> You</a>
</li>