diff --git a/gulpfile.js b/gulpfile.js
new file mode 100644
index 0000000..ad0e1db
--- /dev/null
+++ b/gulpfile.js
@@ -0,0 +1,21 @@
+"use strict";
+
+var gulp = require("gulp");
+var react = require("gulp-react");
+var concat = require("gulp-concat");
+var watch = require("gulp-watch");
+var plumber = require("gulp-plumber");
+
+gulp.task('default', ['compile']);
+
+gulp.task('compile', function () {
+ return gulp.src('lib/react/**')
+ .pipe(plumber())
+ .pipe(concat('app.js'))
+ .pipe(react())
+ .pipe(gulp.dest('public/js/'));
+});
+
+gulp.task('watch', function () {
+ gulp.watch('lib/react/**', ['compile']);
+});
\ No newline at end of file
diff --git a/lib/gather/controller.js b/lib/gather/controller.js
index 3496d97..f126cbb 100644
--- a/lib/gather/controller.js
+++ b/lib/gather/controller.js
@@ -53,7 +53,11 @@ async.parallel(instructions, function (error) {
console.log("Error while adding gatherers", error);
} else {
console.log("Loaded gatherers");
-
+ gather.gatherers.forEach(function (gatherer, index, array) {
+ var candidate = Math.floor(Math.random() * array.length);
+ array[index].leaderVote = array[candidate].id;
+ });
+ console.log("Assigned vote for each gatherer");
}
});
@@ -65,7 +69,7 @@ module.exports = function (namespace) {
namespace.sockets.forEach(function (socket) {
socket.emit("gather:refresh", {
gather: gather.toJson(),
- currentUser: socket._user
+ currentGatherer: gather.getGatherer(socket._user)
});
});
};
diff --git a/lib/gather/gather.js b/lib/gather/gather.js
index 637f26e..e08161b 100644
--- a/lib/gather/gather.js
+++ b/lib/gather/gather.js
@@ -164,6 +164,14 @@ Gather.prototype.voteForLeader = function (voter, candidate) {
});
};
+Gather.prototype.getGatherer = function (user) {
+ var matchingGatherer = null;
+ this.gatherers.forEach(function (gatherer) {
+ if (gatherer.id === user.id) matchingGatherer = gatherer;
+ });
+ return matchingGatherer;
+};
+
// Gather States
// - Gathering
// - Election
diff --git a/lib/react/app.jsx b/lib/react/app.jsx
deleted file mode 100644
index fa35ebb..0000000
--- a/lib/react/app.jsx
+++ /dev/null
@@ -1,573 +0,0 @@
-$(function () {
-
-"use strict";
-
-var UserCounter = React.createClass({
- render: function () {
- return (
-
-
- Online
- {this.props.count}
-
-
- );
- }
-});
-
-var UserLogin = React.createClass({
- authorizeId: function (id) {
- id = parseInt(id, 10);
- socket.emit("users:authorize", {
- id: id
- });
- },
- handleSubmit: function (e) {
- e.preventDefault();
- var id = React.findDOMNode(this.refs.authorize_id).value.trim();
- if (!id) return;
- React.findDOMNode(this.refs.authorize_id).value = '';
- this.authorizeId(id);
- return;
- },
- render: function () {
- return (
-
- );
- }
-})
-
-var UserMenu = React.createClass({
- getDefaultProps: function () {
- return {
- count: 0,
- users: []
- };
- },
- componentDidMount: function () {
- socket.on('users:update', this.updateUsers);
- },
- updateUsers: function (data) {
- this.setProps({
- count: data.count,
- users: data.users
- });
- },
- render: function () {
- var users = this.props.users.map(function (user) {
- return (
- {user.username}
- );
- });
- return (
-
- );
- }
-});
-
-var Chatroom = React.createClass({
- getDefaultProps: function () {
- return {
- history: []
- };
- },
- componentDidMount: function () {
- var self = this;
- var TIMER_INTERVAL = 60000; // Every minute
-
- socket.on("message:new", function (data) {
- var history = self.props.history;
- history.push(data);
- self.setProps({
- history: history
- });
- self.scrollToBottom();
- });
-
- // Message History Retrieved
- socket.on("message:refresh", function (data) {
- self.setProps({
- history: data.chatHistory
- });
- self.scrollToBottom();
- });
-
- socket.emit("message:refresh", {});
-
- self.timer = setInterval(function () {
- if (self.refs.messages) self.refs.messages.refreshTime();
- }, TIMER_INTERVAL);
- },
-
- componentDidUnmount: function () {
- clearInterval(this.timer);
- },
- sendMessage: function (message) {
- socket.emit("newMessage", {message: message});
- },
- scrollToBottom: function () {
- var node = React.findDOMNode(this.refs.messageContainer);
- node.scrollTop = node.scrollHeight;
- },
- render: function () {
- var messages = this.props.history.map(function (message) {
- return (
-
- );
- });
- return (
-
- );
- }
-});
-
-var ChatMessage = React.createClass({
- getInitialState: function () {
- return {
- timeAgo: $.timeago(this.props.createdAt)
- }
- },
- refreshTime: function () {
- var self = this;
- self.setState({
- timeAgo: $.timeago(self.props.createdAt)
- });
- },
- render: function () {
- return (
-
-
- 
-
-
-
- {this.props.username}
-
- {this.state.timeAgo}
-
-
-
{this.props.content}
-
- );
- } else {
- return false;
- }
- }
-});
-
-var VoteButton = React.createClass({
- cancelVote: function (e) {
- socket.emit("gather:vote", {
- leader: {
- candidate: null
- }
- });
- },
- vote: function (e) {
- e.preventDefault();
- socket.emit("gather:vote", {
- leader: {
- candidate: parseInt(e.target.value, 10)
- }
- });
- },
- render: function () {
- if (this.props.currentGatherer === null) {
- return false;
- }
- if (this.props.currentGatherer.leaderVote === this.props.candidate.id) {
- return (
-
- );
- } else {
- return (
-
- );
- }
- }
-});
-
-var MessageBar = React.createClass({
- sendMessage: function (content) {
- socket.emit("message:new", {
- content: content
- });
- },
- handleSubmit: function (e) {
- e.preventDefault();
- var content = React.findDOMNode(this.refs.content).value.trim();
- if (!content) return;
- React.findDOMNode(this.refs.content).value = '';
- this.sendMessage(content);
- return;
- },
- render: function () {
- return (
-
- );
- }
-});
-
-var JoinGatherButton = React.createClass({
- joinGather: function (e) {
- e.preventDefault();
- socket.emit("gather:join", {});
- },
- render: function () {
- var message = this.props.buttonName || "Join Gather";
- var buttonClass = "btn btn-primary";
- if (this.props.buttonClass) {
- buttonClass += " " + this.props.buttonClass;
- }
- return ()
- }
-});
-
-var GatherProgress = React.createClass({
- gatheringProgress: function () {
- var num = this.props.gather.gatherers.length;
- var den = 12;
- return {
- num: num,
- den: den,
- message: num + " / " + den
- };
- },
- electionProgress: function () {
- var num = this.props.gather.gatherers.reduce(function (acc, gatherer) {
- if (gatherer.leaderVote) acc++;
- return acc;
- }, 0);
- var den = 12;
- return {
- num: num,
- den: den,
- message: den - num + " more votes required"
- };
- },
- selectionProgress: function () {
- var num = this.props.gather.gatherers.reduce(function (acc, gatherer) {
- if (gatherer.team !== "lobby") acc++;
- return acc;
- }, 0);
- var den = 12;
-
- return {
- num: num,
- den: den,
- message: num + " out of " + den + " players assigned"
- };
- },
- render: function () {
- var progress;
- var gatherState = this.props.gather.state;
- if (gatherState === 'gathering' && this.props.gather.gatherers.length) {
- progress = this.gatheringProgress();
- } else if (gatherState === 'election') {
- progress = this.electionProgress();
- } else if (gatherState === 'selection') {
- progress = this.selectionProgress();
- }
- if (progress) {
- var style = {
- width: Math.round((progress.num / progress.den * 100)) + "%"
- };
- return (
-
-
Gather Progress
-
-
- {progress.message}
-
-
-
-
- NS2 Gather
- {this.props.gather.gatherers.length}
-
- {this.stateDescription()}
-
-
-
-
-
- {inviteButton}
- {joinButton}
-
-
-
-
- );
- }
-});
-
-var Gatherers = React.createClass({
- render: function () {
- var self = this;
- var gatherers = this.props.gather.gatherers.map(function (gatherer) {
- var lifeforms = (
- gatherer.user.ability.lifeforms.map(function (lifeform) {
- return ({lifeform});
- })
- );
-
- var commBadge;
- if (gatherer.user.ability.commander) {
- commBadge = (
);
- }
-
- var division = ({gatherer.user.ability.division});
- var action = lifeforms;
- if (self.props.gather.state === "election") {
- var votes = self.props.gather.gatherers.reduce(function (acc, voter) {
- if (voter.leaderVote === gatherer.id) acc++;
- return acc;
- }, 0)
- action = (
-
- {votes + " votes"}
-
-
-
- );
- }
-
- return (
-
- | {commBadge} |
- {gatherer.user.username} |
- {division} |
- {action} |
-
- );
- })
- if (this.props.gather.gatherers.length) {
- return (
-
- );
- } else {
- return (
);
- }
- }
-});
-
-var socket;
-
-function initialiseComponents () {
- var socketUrl = window.location.protocol + "//" + window.location.host;
- socket = io(socketUrl)
- .on("connect", function () {
- console.log("Connected");
- })
- .on("reconnect", function () {
- console.log("Reconnected");
- })
- .on("disconnect", function () {
- console.log("Disconnected")
- });
-
- React.render(, document.getElementById('side-menu'));
- React.render(, document.getElementById('chatroom'));
- React.render(, document.getElementById('gathers'));
- React.render(, document.getElementById('currentuser'));
-};
-
-initialiseComponents();
-
-
-
-});
-
diff --git a/lib/react/gather.jsx b/lib/react/gather.jsx
new file mode 100644
index 0000000..4e3ab91
--- /dev/null
+++ b/lib/react/gather.jsx
@@ -0,0 +1,354 @@
+"use strict";
+
+var VoteButton = React.createClass({
+ cancelVote: function (e) {
+ socket.emit("gather:vote", {
+ leader: {
+ candidate: null
+ }
+ });
+ },
+ vote: function (e) {
+ e.preventDefault();
+ socket.emit("gather:vote", {
+ leader: {
+ candidate: parseInt(e.target.value, 10)
+ }
+ });
+ },
+ render: function () {
+ if (this.props.currentGatherer === null) {
+ return false;
+ }
+ if (this.props.currentGatherer.leaderVote === this.props.candidate.id) {
+ return (
+
+ );
+ } else {
+ return (
+
+ );
+ }
+ }
+});
+
+var JoinGatherButton = React.createClass({
+ joinGather: function (e) {
+ e.preventDefault();
+ socket.emit("gather:join", {});
+ },
+ render: function () {
+ var message = this.props.buttonName || "Join Gather";
+ var buttonClass = "btn btn-primary";
+ if (this.props.buttonClass) {
+ buttonClass += " " + this.props.buttonClass;
+ }
+ return ()
+ }
+});
+
+var SelectPlayerButton = React.createClass({
+ selectPlayer: function (e) {
+ e.preventDefault();
+ },
+ render: function () {
+ if (!this.props.currentGatherer.leader) {
+ return false;
+ } else {
+ return (
+ );
+ }
+ }
+})
+
+var GatherTeams = React.createClass({
+ alienGatherers: function () {
+ return this.props.gather.gatherers.filter(function (gatherer) {
+ return gatherer.team === "alien";
+ }).sort(function (gatherer) {
+ return (gatherer.leader) ? 1 : 0;
+ });
+ },
+ marineGatherers: function () {
+ return this.props.gather.gatherers.filter(function (gatherer) {
+ return gatherer.team === "marine";
+ }).sort(function (gatherer) {
+ return (gatherer.leader) ? 1 : 0;
+ });
+ },
+ render: function () {
+ var extractGatherer = function (gatherer) {
+ var image;
+ if (gatherer.leader) {
+ image = ();
+ }
+ return (
+
+ | {image} |
+ {gatherer.user.username} |
+
+ );
+ }
+ var marines = this.marineGatherers().map(extractGatherer);
+ var aliens = this.alienGatherers().map(extractGatherer);
+ return (
+
+ );
+ }
+})
+
+var GatherProgress = React.createClass({
+ stateDescription: function () {
+ switch(this.props.gather.state) {
+ case "gathering":
+ return "Waiting for more gatherers.";
+ case "election":
+ return "Currently voting for team leaders.";
+ case "selection":
+ return "Waiting for leaders to picking teams.";
+ case "done":
+ return "Gather completed.";
+ default:
+ return "Initialising gather.";
+ }
+ },
+ gatheringProgress: function () {
+ var num = this.props.gather.gatherers.length;
+ var den = 12;
+ var remaining = den - num;
+ var message = (remaining === 1) ? "Waiting for last player" : "Waiting for " + remaining + " more players";
+ return {
+ num: num,
+ den: den,
+ message: message
+ };
+ },
+ electionProgress: function () {
+ var num = this.props.gather.gatherers.reduce(function (acc, gatherer) {
+ if (gatherer.leaderVote) acc++;
+ return acc;
+ }, 0);
+ var den = 12;
+ return {
+ num: num,
+ den: den,
+ message: den - num + " more votes required"
+ };
+ },
+ selectionProgress: function () {
+ var num = this.props.gather.gatherers.reduce(function (acc, gatherer) {
+ if (gatherer.team !== "lobby") acc++;
+ return acc;
+ }, 0);
+ var den = 12;
+
+ return {
+ num: num,
+ den: den,
+ message: num + " out of " + den + " players assigned"
+ };
+ },
+ render: function () {
+ var progress;
+ var gatherState = this.props.gather.state;
+ if (gatherState === 'gathering' && this.props.gather.gatherers.length) {
+ progress = this.gatheringProgress();
+ } else if (gatherState === 'election') {
+ progress = this.electionProgress();
+ } else if (gatherState === 'selection') {
+ progress = this.selectionProgress();
+ }
+ if (progress) {
+ var style = {
+ width: Math.round((progress.num / progress.den * 100)) + "%"
+ };
+ return (
+
+
{this.stateDescription()} {progress.message}
+
+
+
+ NS2 Gather
+ {this.props.gather.gatherers.length}
+
+
+ {gatherTeams}
+
+
+
+ {inviteButton}
+ {joinButton}
+
+
+
+ | {online} |
+ {gatherer.user.username} |
+ {division} |
+ {action} |
+
+ );
+ })
+ if (this.props.gather.gatherers.length) {
+ return (
+
+ );
+ } else {
+ return (
);
+ }
+ }
+});
+
+
+
diff --git a/lib/react/init.jsx b/lib/react/init.jsx
new file mode 100644
index 0000000..dfbbd5c
--- /dev/null
+++ b/lib/react/init.jsx
@@ -0,0 +1,22 @@
+"use strict";
+
+var socket;
+
+function initialiseComponents () {
+ var socketUrl = window.location.protocol + "//" + window.location.host;
+ socket = io(socketUrl)
+ .on("connect", function () {
+ console.log("Connected");
+ })
+ .on("reconnect", function () {
+ console.log("Reconnected");
+ })
+ .on("disconnect", function () {
+ console.log("Disconnected")
+ });
+
+ React.render(, document.getElementById('side-menu'));
+ React.render(, document.getElementById('chatroom'));
+ React.render(, document.getElementById('gathers'));
+ React.render(, document.getElementById('currentuser'));
+};
\ No newline at end of file
diff --git a/lib/react/message.jsx b/lib/react/message.jsx
new file mode 100644
index 0000000..503a97d
--- /dev/null
+++ b/lib/react/message.jsx
@@ -0,0 +1,146 @@
+"use strict";
+
+var Chatroom = React.createClass({
+ getDefaultProps: function () {
+ return {
+ history: []
+ };
+ },
+ componentDidMount: function () {
+ var self = this;
+ var TIMER_INTERVAL = 60000; // Every minute
+
+ socket.on("message:new", function (data) {
+ var history = self.props.history;
+ history.push(data);
+ self.setProps({
+ history: history
+ });
+ self.scrollToBottom();
+ });
+
+ // Message History Retrieved
+ socket.on("message:refresh", function (data) {
+ self.setProps({
+ history: data.chatHistory
+ });
+ self.scrollToBottom();
+ });
+
+ socket.emit("message:refresh", {});
+
+ self.timer = setInterval(function () {
+ if (self.refs.messages) self.refs.messages.refreshTime();
+ }, TIMER_INTERVAL);
+ },
+
+ componentDidUnmount: function () {
+ clearInterval(this.timer);
+ },
+ sendMessage: function (message) {
+ socket.emit("newMessage", {message: message});
+ },
+ scrollToBottom: function () {
+ var node = React.findDOMNode(this.refs.messageContainer);
+ node.scrollTop = node.scrollHeight;
+ },
+ render: function () {
+ var messages = this.props.history.map(function (message) {
+ return (
+
+ );
+ });
+ return (
+
+ );
+ }
+});
+
+var ChatMessage = React.createClass({
+ getInitialState: function () {
+ return {
+ timeAgo: $.timeago(this.props.createdAt)
+ }
+ },
+ refreshTime: function () {
+ var self = this;
+ self.setState({
+ timeAgo: $.timeago(self.props.createdAt)
+ });
+ },
+ render: function () {
+ return (
+
+
+
+
+
+
+ {this.props.username}
+
+ {this.state.timeAgo}
+
+
+
{this.props.content}
+