Spike

lib/chat/controller.js

@@ -19,9 +19,8 @@ var Message = mongoose.model("Message");
 var winston = require("winston");
 
 module.exports = namespace => {
-
 	var broadcastUpdate = message => {
-		namespace.emit("message:append", message);
+		namespace.emit("message:append", { chatHistory: [message.toJson()]});
 	};
 
 	var refreshMessages = socket => {
@@ -48,13 +47,12 @@ module.exports = namespace => {
 				return;
 			}
 			socket.emit("message:append", {
-				messages: messages
+				messages: messages.map(message => message.toJson())
 			});
 		});
 	}
 
 	namespace.on('connection', socket => {
-
 		socket.on('message:new', data => {
 			Message.create({
 				author: {

lib/react/init.jsx

@@ -41,14 +41,15 @@ var showGatherBanNotice = () => {
 };
 
 var renderPage = (socket) => {
-	initialiseVisibilityMonitoring(socket);
+	// initialiseVisibilityMonitoring(socket);
 	soundController = new SoundController();
-	React.render(<UserMenu />, document.getElementById('side-menu'));
-	React.render(<Chatroom />, document.getElementById('chatroom'));
-	React.render(<Gather />, document.getElementById('gathers'));
-	React.render(<CurrentUser />, document.getElementById('currentuser'));
-	React.render(<SoundPanel />, document.getElementById('soundcontroller'));
-	React.render(<ArchivedGathers />, document.getElementById('archived-gathers'));
+	// React.render(<UserMenu />, document.getElementById('side-menu'));
+	// React.render(<Chatroom />, document.getElementById('chatroom'));
+	// React.render(<Gather />, document.getElementById('gathers'));
+	// React.render(<CurrentUser />, document.getElementById('currentuser'));
+	// React.render(<SoundPanel />, document.getElementById('soundcontroller'));
+	// React.render(<ArchivedGathers />, document.getElementById('archived-gathers'));
+	React.render(<App />, document.getElementById("body_content"));
 };
 
 var initialiseComponents = () => {

lib/react/main.jsx

@@ -0,0 +1,109 @@
+"use strict";
+
+var App = React.createClass({
+	getDefaultProps() {
+		return {
+			gather: {
+				gatherers: []
+			},
+			users: [],
+			messages: []
+		}
+	},
+
+	componentDidMount() {
+		let self = this;
+
+		socket.on("users:update", 
+			data => self.setProps({user: data.currentUser}));
+
+		socket.on('users:update', 
+			data => self.setProps({users: data.users}));
+
+		socket.on("message:append", data => {
+			self.setProps({
+				messages: self.props.messages
+					.concat(data.chatHistory)
+					.sort((a, b) => {
+						return new Date(a.createdAt) - new Date(b.createdAt);
+					})
+			});
+		});
+
+		// Message History Retrieved
+		socket.on("message:refresh", data => {
+			self.setProps({
+				messages: data.chatHistory
+			});
+		});
+
+		socket.emit("users:refresh");
+		socket.emit("message:refresh");
+	},
+
+	render() {
+		return <div id="wrapper">
+			<nav className="navbar navbar-default navbar-static-top" 
+				role="navigation" 
+				style={{marginBottom: "0"}}>
+				<div className="navbar-header">
+					<a className="navbar-brand" href="/">ENSL.org Gathers <strong>Alpha</strong></a>
+				</div>
+			  <ul className="nav navbar-top-links navbar-right" id="currentuser">
+			  	<CurrentUser user={this.props.user} />
+			  </ul>
+			  <ul className="nav navbar-top-links navbar-right" id="soundcontroller">
+			  	{/*<SoundPanel />*/}
+			  </ul>
+			  <ul className="nav navbar-top-links navbar-right">
+				  <li className="dropdown">
+						<a className="dropdown-toggle" data-toggle="dropdown" href="#">
+							Info &nbsp;<i className="fa fa-caret-down"></i>
+						</a>
+						<ul className="dropdown-menu">
+							<li>
+								<a href="https://github.com/cblanc/sws_gathers" target="_blank">
+									Github&nbsp;<i className="fa fa-github">&nbsp;</i>
+								</a>
+							</li>
+							<li>
+								<a href="http://steamcommunity.com/id/nslgathers" target="_blank">
+									Steam Bot&nbsp;<i className="fa fa-external-link">&nbsp;</i>
+								</a>
+							</li>
+							<li>
+								<a href="http://www.ensl.org/articles/464" target="_blank">
+									Gather Rules&nbsp;<i className="fa fa-external-link">&nbsp;</i>
+								</a>
+							</li>
+						</ul>
+					</li>
+			  </ul>
+			</nav>
+			<AdminPanel />
+			<ProfileModal user={this.props.user} />
+			<div style={{minHeight: "750px"}}>
+				<div className="container-fluid">
+					<div className="row">
+						<div className="col-md-2 hidden-xs">
+							<ul className="nav" id="side-menu">
+								<UserMenu users={this.props.users} />
+							</ul>
+						</div>
+						<div className="col-md-4" id="chatroom">
+							<Chatroom 
+								messages={this.props.messages} 
+								user={this.props.user} />
+						</div>
+						<div className="col-md-6" id="gathers">
+							{/*<Gather />*/}
+						</div>	
+						<div className="col-md-6 col-md-offset-6" id="archived-gathers">
+							{/*<ArchivedGathers />*/}
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	}
+});

lib/react/message.jsx

@@ -1,52 +1,12 @@
 "use strict";
 
 var Chatroom = React.createClass({
-	getDefaultProps() {
-		return {
-			history: []
-		};
-	},
-
 	componentDidMount() {
-		let self = this;
-
-		socket.on("message:append", data => {
-			let history = self.props.history;
-			let historicalUpdate = !!data.messages;
-			if (historicalUpdate) {
-				history = history.concat(data.messages);
-			} else {
-				history.push(data);
-			}
-			self.setProps({
-				history: history.sort((a, b) => {
-					return new Date(a.createdAt) - new Date(b.createdAt);
-				})
-			});
-			if (!historicalUpdate) {
-				self.scrollToBottom();
-			}
-		});
-
-		// Message History Retrieved
-		socket.on("message:refresh", data => {
-			self.setProps({
-				history: data.chatHistory
-			});
-			self.scrollToBottom();
-		});
-
-		socket.on("users:update", data => {
-			self.setProps({
-				currentUser: data.currentUser
-			});
-		});
-
-		socket.emit("message:refresh", {});
+		this.scrollToBottom();
 	},
 
 	loadMoreMessages() {
-		var earliestMessage = this.props.history[0];
+		var earliestMessage = this.props.messages[0];
 		if (earliestMessage === undefined) return;
 		socket.emit("message:refresh", {
 			before: earliestMessage.createdAt
@@ -63,10 +23,11 @@ var Chatroom = React.createClass({
 	},
 
 	render() {
-		let messages = this.props.history.map(message => 
+		console.log(this.props.messages);
+		let messages = this.props.messages.map(message => 
 			<ChatMessage message={message} 
 				key={message.id} 
-				currentUser={this.props.currentUser} />
+				user={this.props.user} />
 		);
 		return (
 			<div className="panel panel-primary chatbox">
@@ -140,8 +101,8 @@ var ChatMessage = React.createClass({
 
 	render() {
 		let deleteButton;
-		let currentUser = this.props.currentUser;
-		if (currentUser && currentUser.admin) {
+		let user = this.props.user;
+		if (user && user.admin) {
 			deleteButton = <DeleteMessageButton messageId={this.props.message._id} />;
 		}
 		return (
@@ -227,4 +188,3 @@ var MessageBar = React.createClass({
 		);
 	}
 });
-

lib/react/user.jsx

@@ -42,17 +42,6 @@ var UserLogin = React.createClass({
 })
 
 var UserMenu = React.createClass({
-	getDefaultProps() {
-		return {
-			users: []
-		};
-	},
-
-	componentDidMount() {
-		let self = this;
-		socket.on('users:update', data => self.setProps({users: data.users}));
-	},
-
 	render() {
 		let users = this.props.users.map(user => {
 			return (
@@ -85,26 +74,35 @@ var AdminPanel = React.createClass({
 
 	render() {
 		return (
-		<div>
-			<h5>Swap Into a Different Account</h5>
-			<UserLogin />
-			<h5>Gather Options</h5>
-			<div>
-				<button
-					className="btn btn-danger max-width"
-					onClick={this.handleGatherReset}>
-					Reset Gather</button>
+			<div className="modal fade" id="adminmodal">
+			  <div className="modal-dialog">
+			    <div className="modal-content">
+			      <div className="modal-header">
+			        <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+			        <h4 className="modal-title">Administration Panel</h4>
+			      </div>
+			      <div className="modal-body" id="admin-menu">
+				      <h5>Swap Into a Different Account</h5>
+							<UserLogin />
+							<h5>Gather Options</h5>
+							<div>
+								<button
+									className="btn btn-danger max-width"
+									onClick={this.handleGatherReset}>
+									Reset Gather</button>
+							</div>
+			      </div>
+			      <div className="modal-footer">
+			        <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
+			      </div>
+			    </div>
+			  </div>
 			</div>
-		</div>
 		);
 	}
 });
 
 var ProfileModal = React.createClass({
-	componentDidMount() {
-		let self = this;
-		socket.on("users:update", data => self.setProps({user: data.currentUser}));
-	},
 	handleUserUpdate(e) {
 		e.preventDefault();
 		let abilities = {
@@ -124,6 +122,7 @@ var ProfileModal = React.createClass({
 			}
 		});
 	},
+
 	render() {
 		if (!this.props.user) return false;
 		let abilities = this.props.user.profile.abilities;
@@ -146,47 +145,51 @@ var ProfileModal = React.createClass({
 			.map(skill => { return <option key={skill}>{skill}</option>});
 
 		return (
-			<form>
-			  <div className="form-group">
-			    <label>Player Skill</label><br />
-				  <select 
-				  	defaultValue={skillLevel}
-				  	className="form-control" 
-				  	ref="playerskill">
-					  {skillLevels}
-					</select>
-					<p className="add-top"><small>Try to give an accurate representation of your skill to raise the quality of your gathers</small></p>
+			<div className="modal fade" id="profilemodal">
+			  <div className="modal-dialog">
+			    <div className="modal-content">
+			      <div className="modal-header">
+			        <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+			        <h4 className="modal-title">Profile</h4>
+			      </div>
+			      <div className="modal-body" id="profile-panel">
+			      	<form>
+							  <div className="form-group">
+							    <label>Player Skill</label><br />
+								  <select 
+								  	defaultValue={skillLevel}
+								  	className="form-control" 
+								  	ref="playerskill">
+									  {skillLevels}
+									</select>
+									<p className="add-top"><small>Try to give an accurate representation of your skill to raise the quality of your gathers</small></p>
+							  </div>
+							  <hr />
+							  <div className="form-group">
+							  	<label>Preferred Lifeforms</label><br />
+								  {abilitiesForm}
+								  <p><small>Specify which lifeforms you'd like to play in the gather</small></p>
+							  </div>
+							  <hr />
+						  	<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>
+			      </div>
+			    </div>
 			  </div>
-			  <hr />
-			  <div className="form-group">
-			  	<label>Preferred Lifeforms</label><br />
-				  {abilitiesForm}
-				  <p><small>Specify which lifeforms you'd like to play in the gather</small></p>
-			  </div>
-			  <hr />
-		  	<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>
+			</div>
 		);
 	}
 });
 
 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");
-	},
-
 	render() {
 		if (this.props.user) {
 			var adminOptions;
@@ -213,9 +216,6 @@ var CurrentUser = React.createClass({
 								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>
 						{adminOptions}
 					</ul>
 				</li>
@@ -249,4 +249,6 @@ var AssumeUserIdButton = React.createClass({
 				onClick={this.assumeId}>Assume User ID</button>
 		}
 	}
-});
+});
+
+$(function () { initialiseComponents();	});

views/layouts/main.hbs

@@ -1,6 +1,8 @@
 <html>
 	{{>head}}
 	<body>
-		{{{ body }}}
+		<div id="body_content">
+			{{{ body }}}
+		</div>
 	</body>
 </html>

views/partials/foot.hbs

@@ -1,33 +1 @@
-<div class="modal fade" id="adminmodal">
-  <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">Administration Panel</h4>
-      </div>
-      <div class="modal-body" id="admin-menu">
-      </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="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();	});
-</script>
+<script src="/js/app.js"></script>