ensl_gathers/public/js/app.js

$(function () {

"use strict";

var UserCounter = React.createClass({displayName: "UserCounter",
	render: function () {
		return (
			React.createElement("li", null, 
				React.createElement("a", {href: "#"}, 
					React.createElement("i", {className: "fa fa-users fa-fw"}), " Online",  
					React.createElement("span", {className: "badge add-left"}, " ", this.props.count, " ")
				)
			)
		);
	}
});

var UserLogin = React.createClass({displayName: "UserLogin",
	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 (
			React.createElement("form", {onSubmit: this.handleSubmit}, 
				React.createElement("div", {className: "input-group signin"}, 
					React.createElement("input", {
						id: "btn-input", 
						type: "text", 
						className: "form-control", 
						ref: "authorize_id", 
						placeholder: "Choose an ID..."}), 
					React.createElement("span", {className: "input-group-btn"}, 
						React.createElement("input", {
							type: "submit", 
							className: "btn btn-primary", 
							id: "btn-chat", 
							value: "Login"})
					)
				), 
				React.createElement("div", {className: "signin"}, 
				React.createElement("p", {className: "text-center"}, React.createElement("small", null, "Just a temporary measure until genuine authentication is implemented"))
				)
			)
		);
	}
})

var UserMenu = React.createClass({displayName: "UserMenu",
	getDefaultProps: function () {
		return {
			count: 0,
			users: []
		};
	},
	componentDidMount: function () {
		socket.on('userCount', this.updateUsers);
	},
	updateUsers: function (data) {
		this.setProps({
			count: data.count,
			users: data.users
		});
	},
	render: function () {
		var users = this.props.users.map(function (user) {
			return (
				React.createElement("li", {key: user.id}, React.createElement("a", {href: "#"}, user.username))
			);
		});
		return (
			React.createElement("ul", {className: "nav", id: "side-menu"}, 
				React.createElement(UserCounter, React.__spread({},  this.props)), 
				users, 
				React.createElement("li", null, React.createElement("br", null), React.createElement(UserLogin, null), React.createElement("br", null))
			)
		);
	}
});

var Chatroom = React.createClass({displayName: "Chatroom",
	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 (
				React.createElement(ChatMessage, {
					avatar: message.author.avatar, 
					username: message.author.username, 
					content: message.content, 
					ref: "messages", 
					createdAt: message.createdAt})
			);
		});
		return (
			React.createElement("div", {className: "panel panel-default"}, 
				React.createElement("div", {className: "panel-heading"}, "Gather Chat"), 
				React.createElement("div", {className: "panel-body"}, 
					React.createElement("ul", {className: "chat", id: "chatmessages", ref: "messageContainer"}, 
						messages
					)
				), 
				React.createElement("div", {className: "panel-footer"}, 
					React.createElement(MessageBar, null)
				)
			)
		);
	}
});

var ChatMessage = React.createClass({displayName: "ChatMessage",
	getInitialState: function () {
		return {
			timeAgo: $.timeago(this.props.createdAt)
		}
	},
	refreshTime: function () {
		var self = this;
		self.setState({
			timeAgo: $.timeago(self.props.createdAt)
		});
	},
	render: function () {
		return (
			React.createElement("li", {className: "left clearfix"}, 
				React.createElement("span", {className: "chat-img pull-left"}, 
						React.createElement("img", {
							src: this.props.avatar, 
							alt: "User Avatar", 
							height: "40", 
							width: "40", 
							className: "img-circle"})
				), 
				React.createElement("div", {className: "chat-body clearfix"}, 
					React.createElement("div", {className: "header"}, 
						React.createElement("strong", {className: "primary-font"}, this.props.username), 
						React.createElement("small", {className: "pull-right text-muted"}, 
							React.createElement("i", {className: "fa fa-clock-o fa-fw"}), " ", this.state.timeAgo
						)
					), 
					React.createElement("p", null, this.props.content)
				)
			)
		);
	}
});

var CurrentUser = React.createClass({displayName: "CurrentUser",
	getDefaultProps: function () {
		return {
			username: "",
			avatar: ""
		}
	},
	componentDidMount: function () {
		
	},
	render: function () {
		return (
			React.createElement("a", {href: "#"}, this.props.user.username, "  ", React.createElement("img", {src: this.props.user.avatar, 
				alt: "User Avatar", 
				height: "20", 
				width: "20"}))
		);
	}
});

var MessageBar = React.createClass({displayName: "MessageBar",
	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 (
			React.createElement("form", {onSubmit: this.handleSubmit}, 
				React.createElement("div", {className: "input-group"}, 
					React.createElement("input", {
						id: "btn-input", 
						type: "text", 
						className: "form-control", 
						ref: "content", 
						placeholder: "Be polite please..."}), 
					React.createElement("span", {className: "input-group-btn"}, 
						React.createElement("input", {
							type: "submit", 
							className: "btn btn-primary", 
							id: "btn-chat", 
							value: "Send"})
					)
				)
			)
		);
	}
});

var JoinGatherButton = React.createClass({displayName: "JoinGatherButton",
	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 (React.createElement("button", {
							onClick: this.joinGather, 
							className: buttonClass}, message))
	}
});

var GatherProgress = React.createClass({displayName: "GatherProgress",
	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 (
				React.createElement("div", {className: "panel-body"}, 
					React.createElement("p", null, "Gather Progress"), 
					React.createElement("div", {className: "progress"}, 
					  React.createElement("div", {className: "progress-bar progress-bar-striped active", 
					  	"data-role": "progressbar", 
					  	"data-aria-valuenow": progress.num, 
					  	"data-aria-valuemin": "0", 
					  	"data-aria-valuemax": progress.den, 
					  	style: style}, 
					    progress.message
					  )
				  )
				)
			);
		} else {
			return false;
		}
	}
});

var Gather = React.createClass({displayName: "Gather",
	getDefaultProps: function () {
		return {
			gather: {
				gatherers: []
			}
		}
	},
	joinedGather: function () {
		var self = this;
		return this.props.gather.gatherers.some(function (gatherer) {
			return gatherer.user.id === self.props.user.id;
		});
	},
	componentDidMount: function () {
		var self = this;
		socket.on("gather:refresh", function (data) {
			self.setProps({
				gather: data.gather,
				user: data.user
			});
		});
	},
	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";
		}
	},
	leaveGather: function (e) {
		e.preventDefault();
		socket.emit("gather:leave", {});
	},
	inviteToGather: function (e) {
		e.preventDefault();
	},
	render: function () {
		var joinButton;
		if (this.joinedGather()) {
			joinButton = (React.createElement("li", null, React.createElement("button", {
							onClick: this.leaveGather, 
							className: "btn btn-danger"}, "Leave Gather")));
		} else {
			joinButton = (React.createElement("li", null, React.createElement(JoinGatherButton, null)));
		}
		var inviteButton;
		if (this.props.gather.state === 'gathering') {
			inviteButton = (React.createElement("li", null, React.createElement("button", {
							onClick: this.inviteToGather, 
							className: "btn btn-primary"}, "Invite to Gather")));
		}
		return (
			React.createElement("div", {className: "panel panel-default"}, 
				React.createElement("div", {className: "panel-heading"}, 
					React.createElement("strong", null, "NS2 Gather "), 
					React.createElement("span", {className: "badge add-left"}, this.props.gather.gatherers.length), 
					React.createElement("br", null), 
					this.stateDescription()
				), 
				React.createElement(Gatherers, {gatherers: this.props.gather.gatherers}), 
				React.createElement(GatherProgress, {gather: this.props.gather}), 
				React.createElement("div", {className: "panel-footer text-right"}, 
					React.createElement("ul", {className: "list-inline"}, 
						inviteButton, 
						joinButton
					)
				)
			)
		);
	}
});

var LeaderPoll = React.createClass({displayName: "LeaderPoll",
	render: function () {
		return (
			React.createElement("div", {className: "panel-body"}
			)
		);
	}
});

var Gatherers = React.createClass({displayName: "Gatherers",
	render: function () {
		var gatherers = this.props.gatherers.map(function (gatherer) {
			var lifeforms = (
				gatherer.user.ability.lifeforms.map(function (lifeform) {
					return (React.createElement("span", {className: "label label-default"}, lifeform));
				})
			);
			var division = (React.createElement("span", {className: "label label-primary"}, gatherer.user.ability.division));
			var commBadge;
			if (gatherer.user.ability.commander) {
				commBadge = (React.createElement("img", {src: "/images/commander.png", 
							alt: "Commander", 
							height: "20", 
							width: "20"}));
			}

			return (
				React.createElement("tr", {key: gatherer.user.id}, 
					React.createElement("td", {className: "col-md-1"}, commBadge), 
					React.createElement("td", {className: "col-md-5"}, gatherer.user.username), 
					React.createElement("td", {className: "col-md-3"}, division, " "), 
					React.createElement("td", {className: "col-md-3"}, lifeforms, " ")
				)
			);
		})
		if (this.props.gatherers.length) {
			return (
				React.createElement("div", {className: "panel-body"}, 
					React.createElement("div", {className: "panel panel-default"}, 
						React.createElement("div", {className: "panel-heading"}, 
							React.createElement("h5", {className: "panel-title"}, "Roster")
						), 
						React.createElement("table", {className: "table roster-table"}, 
							React.createElement("tbody", null, 
								gatherers
							)
						)
					)
				)
			);
		} else {
			return (React.createElement("div", {className: "panel-body text-center"}, React.createElement(JoinGatherButton, {buttonClass: "btn-lg", buttonName: "Start a Gather"})));
		}
	}
});

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(React.createElement(UserMenu, null), document.getElementById('side-menu'));
	React.render(React.createElement(Chatroom, null), document.getElementById('chatroom'));
	React.render(React.createElement(Gather, null), document.getElementById('gathers'));
	React.render(React.createElement(CurrentUser, null), document.getElementById('currentuser'));
};

initialiseComponents();



});


//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJhbnNmb3JtZWQuanMiLCJzb3VyY2VzIjpbbnVsbF0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLENBQUMsQ0FBQyxZQUFZOztBQUVkLFlBQVksQ0FBQzs7QUFFYixJQUFJLGlDQUFpQywyQkFBQTtDQUNwQyxNQUFNLEVBQUUsWUFBWTtFQUNuQjtHQUNDLG9CQUFBLElBQUcsRUFBQSxJQUFDLEVBQUE7SUFDSCxvQkFBQSxHQUFFLEVBQUEsQ0FBQSxDQUFDLElBQUEsRUFBSSxDQUFDLEdBQUksQ0FBQSxFQUFBO0tBQ1gsb0JBQUEsR0FBRSxFQUFBLENBQUEsQ0FBQyxTQUFBLEVBQVMsQ0FBQyxtQkFBb0IsQ0FBSSxDQUFBLEVBQUEsU0FBQSxFQUFBLENBQUE7QUFBQSxLQUNyQyxvQkFBQSxNQUFLLEVBQUEsQ0FBQSxDQUFDLFNBQUEsRUFBUyxDQUFDLGdCQUFpQixDQUFBLEVBQUEsR0FBQSxFQUFFLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxFQUFDLEdBQVEsQ0FBQTtJQUN6RCxDQUFBO0dBQ0EsQ0FBQTtJQUNKO0VBQ0Y7QUFDRixDQUFDLENBQUMsQ0FBQzs7QUFFSCxJQUFJLCtCQUErQix5QkFBQTtDQUNsQyxXQUFXLEVBQUUsVUFBVSxFQUFFLEVBQUU7RUFDMUIsRUFBRSxHQUFHLFFBQVEsQ0FBQyxFQUFFLEVBQUUsRUFBRSxDQUFDLENBQUM7RUFDdEIsTUFBTSxDQUFDLElBQUksQ0FBQyxpQkFBaUIsRUFBRTtHQUM5QixFQUFFLEVBQUUsRUFBRTtHQUNOLENBQUMsQ0FBQztFQUNIO0NBQ0QsWUFBWSxFQUFFLFVBQVUsQ0FBQyxFQUFFO0VBQzFCLENBQUMsQ0FBQyxjQUFjLEVBQUUsQ0FBQztFQUNuQixJQUFJLEVBQUUsR0FBRyxLQUFLLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUMsS0FBSyxDQUFDLElBQUksRUFBRSxDQUFDO0VBQ2hFLElBQUksQ0FBQyxFQUFFLEVBQUUsT0FBTztFQUNoQixLQUFLLENB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