Added player profiles

lib/react/gather.jsx

@@ -406,7 +406,7 @@ var VoteButton = React.createClass({
 			return (
 				<button 
 					onClick={this.vote} 
-					className="btn btn-xs btn-default"
+					className="btn btn-xs btn-primary"
 					value={this.props.candidate.id}>Vote
 				</button>
 			);
@@ -643,7 +643,7 @@ var Gatherers = React.createClass({
 			}
 			var lifeform = (
 				abilities.map(lifeform => {
-					return (<span className="label label-default" 
+					return (<span className="label label-default add-right" 
 												key={[lifeform, gatherer.id].join("-")}>{lifeform}</span>);
 				})
 			);
@@ -684,11 +684,10 @@ var Gatherers = React.createClass({
 
 			return (
 				<tr key={gatherer.user.id} data-userid={gatherer.user.id}>
-					<td className="col-md-5">{country} {gatherer.user.username}&nbsp;</td>
-					<td className="col-md-5">
-						{lifeform} {division} {team}&nbsp;
+					<td className="col-md-9">{gatherer.user.username} <br />
+						{country} {lifeform} {division} {team}&nbsp;
 					</td>
-					<td className="col-md-2 text-right">{action}&nbsp;</td>
+					<td className="col-md-3 text-right">{action}&nbsp;</td>
 				</tr>
 			);
 		})

lib/react/init.jsx

@@ -48,7 +48,6 @@ var renderPage = (socket) => {
 	React.render(<Gather />, document.getElementById('gathers'));
 	React.render(<CurrentUser />, document.getElementById('currentuser'));
 	React.render(<SoundPanel />, document.getElementById('soundcontroller'));
-	React.render(<AdminPanel />, document.getElementById('admin-menu'));
 };
 
 var initialiseComponents = () => {

lib/react/user.jsx

@@ -95,9 +95,85 @@ var AdminPanel = React.createClass({
 	}
 });
 
+var ProfileModal = React.createClass({
+	componentDidMount() {
+		let self = this;
+		socket.on("users:update", data => self.setProps({user: data.currentUser}));
+	},
+	handleUserUpdate(e) {
+		e.preventDefault();
+		let abilities = {
+			skulk: React.findDOMNode(this.refs.skulk).checked,
+			lerk: React.findDOMNode(this.refs.lerk).checked,
+			fade: React.findDOMNode(this.refs.fade).checked,
+			onos: React.findDOMNode(this.refs.onos).checked,
+			commander: React.findDOMNode(this.refs.commander).checked
+		};
+		let division = React.findDOMNode(this.refs.playerskill).value;
+		socket.emit("users:update:profile", {
+			id: this.props.user.id,
+			profile: {
+				abilities: abilities,
+				division: division
+			}
+		});
+	},
+	render() {
+		if (!this.props.user) return false;
+		let abilities = this.props.user.profile.abilities;
+		let abilitiesForm = [];
+		for (let lifeform in abilities) {
+			abilitiesForm.push(
+				<div key={lifeform} className="checkbox">
+					<label className="checkbox-inline">
+						<input type="checkbox" 
+							ref={lifeform}
+							defaultChecked={abilities[lifeform]}/> {_.capitalize(lifeform)}
+					</label>
+				</div>
+			);
+		}
+
+		let division = this.props.user.profile.division;
+
+		let skillLevels = ["Div 1", "Div 2", "Div 3", "Div 4"].map(skill => {
+			if (skill === division) {
+				return <option defaultValue key={skill}>{skill}</option>
+			} else {
+				return <option key={skill}>{skill}</option>
+			}
+		});
+
+		return (
+			<form>
+			  <div className="form-group">
+			    <label>Player Skill</label><br />
+				  <select className="form-control" ref="playerskill">
+					  {skillLevels}
+					</select>
+			  </div>
+			  <div className="form-group">
+				  {abilitiesForm}
+			  </div>
+		  	<p className="small">You will need to rejoin the gather to see your updated profile</p>
+			  <div className="form-group">
+				  <button 
+				  	type="submit"
+				  	className="btn btn-primary"
+				  	data-dismiss="modal"
+				  	onClick={this.handleUserUpdate}>
+				  	Update &amp; Close</button>
+		  	</div>
+			</form>
+		);
+	}
+});
+
 var CurrentUser = React.createClass({
 	componentDidMount() {
 		let self = this;
+		React.render(<AdminPanel />, document.getElementById('admin-menu'));
+		React.render(<ProfileModal />, document.getElementById('profile-panel'));
 		socket.on("users:update", data => self.setProps({user: data.currentUser}));
 		socket.emit("users:refresh");
 	},
@@ -108,7 +184,9 @@ var CurrentUser = React.createClass({
 			if (this.props.user.admin) {
 				adminOptions = (
 					<li>
-					 	<a href="#" data-toggle="modal" data-target="#adminmodal">Administration</a>
+					 	<a href="#" data-toggle="modal" data-target="#adminmodal">
+					 		<i className="fa fa-magic fa-fw"></i> Administration
+					 	</a>
 					</li>
 				)
 			}
@@ -122,21 +200,16 @@ var CurrentUser = React.createClass({
 					</a>
 					<ul className="dropdown-menu dropdown-user">
 						<li>
-							<a href="#"><i className="fa fa-gear fa-fw"></i> Profile</a>
+							<a data-toggle="modal" 
+								data-target="#profilemodal" 
+								href="#"><i className="fa fa-gear fa-fw"></i> Profile</a>
 						</li>
 						<li>
 							<a href="#"><i className="fa fa-flag fa-fw"></i> Notifications</a>
 						</li>
-						<li>
-							<a href="#"><i className="fa fa-music fa-fw"></i> Sounds</a>
-						</li>
-						<li>
-						 	<a href="#" data-toggle="modal" data-target="#designmodal">Design Goals</a>
-						</li>
 						{adminOptions}
 					</ul>
 				</li>
-
 			);
 		} else {
 			return false;

lib/user/controller.js

@@ -63,6 +63,17 @@ module.exports = namespace => {
 			socket._user.online = false;
 		});
 
+		socket.on('users:update:profile', data => {
+			if (socket._user.id !== data.id) return;
+			socket._user.updateProfile(data.profile, function (error) {
+				if (error) {
+					winston.error(error);
+					return;
+				}
+				refreshUsers();
+			});
+		});
+
 		socket.on("users:authorize", data => {
 			if (!socket._user.admin) return;
 			var id = parseInt(data.id, 10);

lib/user/user.js

@@ -19,20 +19,27 @@ function User (user) {
 	this.admin = user['admin'];
 	this.team = user['team'];
 	this.bans = user['bans'];
-	if (user['steam']) {
-		this.steam = {
-			url: user['steam']['url'],
-			nickname: user['steam']['nickname']
-		};
-	} else {
-		this.steam = {
-			url: null,
-			nickname: null
-		};
-	}
+	this.steam = {
+		url: user['steam']['url'] || null,
+		nickname: user['steam']['nickname'] || null
+	};
 	this.profile = null;
 }
 
+User.prototype.updateProfile = function (data, callback) {
+	let self = this;
+	Profile.update({
+		userId: self.id
+	}, data, function (error) {
+		if (error) return callback(error);
+		Profile.findOne({userId: self.id}, function (error, profile) {
+			if (error) return callback(error);
+			self.profile = profile.toJson();
+			return callback(error, profile);
+		});
+	});
+};
+
 User.find = (id, callback) => {
 	client.getUserById({
 		id: id

views/partials/foot.hbs

@@ -1,29 +1,3 @@
-<div class="modal fade" id="designmodal">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4 class="modal-title">Design Goals</h4>
-      </div>
-      <div class="modal-body">
-        <ul>
-					<li>Create a nice place where the NS2 community can assemble and have fun</li>
-					<li>Create an efficient, easy-to-use and flexible system to create NS2 gathers</li>
-					<li>Support the modern web and meet modern expectactions (e.g. realtime, phone &amp; tablet screens)</li>
-				</ul>
-				<p>If you want to improve it 
-					<a href="https://github.com/cblanc/sws_gathers" target="_blank">click here to visit the repository</a>
-				</p>
-				<p>That is all.</p>
-				<p><strong>Have fun and be excellent to each other.</strong></p>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-      </div>
-    </div>
-  </div>
-</div>
-
 <div class="modal fade" id="adminmodal">
   <div class="modal-dialog">
     <div class="modal-content">
@@ -40,6 +14,19 @@
   </div>
 </div>
 
+<div class="modal fade" id="profilemodal">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title">Profile</h4>
+      </div>
+      <div class="modal-body" id="profile-panel">
+      </div>
+    </div>
+  </div>
+</div>
+
 <script src="/js/app.js"></script>
 <script>
 $(function () { initialiseComponents();	});