Cardshifter · acostarelli · Aug 7, 2015 · Aug 6, 2015 · Aug 6, 2015 · Aug 6, 2015
diff --git a/login/login.css → cardshifter.css b/login/login.css → cardshifter.css
diff --git a/cardshifter.html b/cardshifter.html
@@ -3,17 +3,26 @@
 	<head>
 		<title>Cardshifter</title>
 
+		<!-- Boostrap -->
 		<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
 
+		<!-- The main CSS file -->
+		<link href="cardshifter.css" rel="stylesheet"/>
+
+		<!-- AngularJS libraries -->
 		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
 		<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
 
+		<!-- The API for communicating with the server -->
 		<script src="server_interface/server_interface.js"></script>
 
+		<!-- Controllers -->
 		<script src="cardshifter.js"></script>
 		<script src="login/login_controller.js"></script>
+		<script src="lobby/lobby_controller.js"></script>
 	</head>
 	<body>
+		<!-- Application pages will be injected here -->
 		<div ng-view></div>
 	</body>
 </html>
diff --git a/cardshifter.js b/cardshifter.js
@@ -4,9 +4,10 @@ CardshifterApp.config(function($routeProvider) {
 	$routeProvider
 		.when("/", { // default page is Login
 			controller: "LoginController",
-			// file name might change
 			templateUrl: "login/login.html",
-			css: "login/login.css"
 		})
-
+		.when("/lobby", {
+			controller: "LobbyController",
+			templateUrl: "lobby/lobby.html",
+		})
 });
diff --git a/lobby/lobby.html b/lobby/lobby.html
@@ -0,0 +1,20 @@
+<div>
+    <div>
+        <h2>Online users:</h2>
+        <ul>
+            <li ng-repeat="user in users">
+                {{user.name}}
+            </li>
+        </ul>
+        <h2>Chat:</h2>
+        <ul>
+            <li ng-repeat="message in chatMessages">
+                {{message.from}}: {{message.message}}
+            </li>
+        </ul>
+        <form>
+            <input ng-model="user_chat_message" type="text"/>
+            <input ng-click="sendMessage()" ng-disabled="sending" type="button" value="Send Message"/>
+        </form>
+    </div>
+</div>
diff --git a/lobby/lobby_controller.js b/lobby/lobby_controller.js
@@ -0,0 +1,50 @@
+CardshifterApp.controller("LobbyController", function($scope, $interval, $timeout) {
+	var CHAT_FEED_LIMIT = 10;
+	var POLL_FREQ = 2000;
+	var MESSAGE_DELAY = 3000;
+
+	$scope.users = [];
+	$scope.chatMessages = [];
+
+	var getUsersMessage = new CardshifterServerAPI.messageTypes.ServerQueryMessage("USERS", "");
+	CardshifterServerAPI.sendMessage(getUsersMessage);
+
+	$interval(function() { // update chat and users
+		while(message = CardshifterServerAPI.getMessage()) {
+			switch(message.command) {
+				case "userstatus":
+                    // do conditional checking if user is offline
+                    if(message.status === "OFFLINE") {
+						for(var i = 0, length = $scope.users.length; i < length; i++) {
+							// if the user described in the message is the user in this iteration
+							if($scope.users[i].name === message.name) {
+								$scope.users.splice(i, 1); // remove that user from the array
+							}
+						}
+                    } else {
+                    	$scope.users.push(message);
+                    }
+
+					break;
+		        case "chat":
+		        	if($scope.chatMessages.length === CHAT_FEED_LIMIT) {
+		        		// remove the latest (opposite of earliest) chat message
+		        		$scope.chatMessages.shift();
+		        	}
+		            $scope.chatMessages.push(message);
+		            break;
+			}
+		}
+	}, POLL_FREQ);
+
+	$scope.sendMessage = function() {
+		$scope.sending = true;
+		var chatMessage = new CardshifterServerAPI.messageTypes.ChatMessage($scope.user_chat_message);
+		CardshifterServerAPI.sendMessage(chatMessage);
+
+		$scope.user_chat_message = ""; // clear the input box
+		$timeout(function() { // allow another message to be sent in 3 seconds
+			$scope.sending = false;
+		}, MESSAGE_DELAY);
+	}
+});
diff --git a/login/login.html b/login/login.html
@@ -1,4 +1,4 @@
-<div ng-controller="LoginController" class="col-sm-9 col-md-10 main csh-body">
+<div class="col-sm-9 col-md-10 main csh-body">
 	<h1>Cardshifter login</h1>
 	<form name="login_information" id="login_information" class="login-form">
 		<div class="form-group">
@@ -30,7 +30,7 @@ <h1>Cardshifter login</h1>
 			<input name="test_message" id="test_message" type="text" size="100" class="form-control" placeholder="Optional... Leave blank unless using for testing." />
 		</div>
 		<div class="form-group">
-			<input ng-click="login()" name="submit" id="submit" type="button" value="Log in" class="btn btn-success" />
+			<input ng-click="login()" ng-disabled="loggedIn" name="submit" id="submit" type="button" value="Log in" class="btn btn-success" />
 			<input name="test_websocket" id="test_websocket" type="button" value="Test WebSocket" class="btn btn-primary" />
 			<input name="disconnect_websocket" id="disconnect_websocket" type="button" value="Disconnect WebSocket" class="btn btn-danger" />
 		</div>

diff --git a/login/login_controller.js b/login/login_controller.js
@@ -1,16 +1,37 @@
-CardshifterApp.controller("LoginController", function($scope) {
+CardshifterApp.controller("LoginController", function($scope, $location, $rootScope) {
+	var SUCCESS = 200;
+
 	$scope.login = function() {
+		$scope.loggedIn = true;
 		var finalServer = ($scope.server === "other" ? $scope.other_server : $scope.server);
 
-		CardshifterServerAPI.init(finalServer, $scope.is_secure);
-		var login =  new CardshifterServerAPI.messageTypes.LoginMessage($scope.username);
+		CardshifterServerAPI.init(finalServer, $scope.is_secure, function() {
+			var login = new CardshifterServerAPI.messageTypes.LoginMessage($scope.username);
+
+			try {
+				CardshifterServerAPI.sendMessage(login, function(serverResponse) {
+					if(serverResponse.status === SUCCESS && serverResponse.message === "OK") {
+						$rootScope.$apply(function() {
+							$location.path("/lobby");
+						});
+					} else {
+						// I don't actually know what the server will respond with
+						// notify the user that there was an issue logging in (custom server issue ???)
+
+						console.log("server message: " + serverResponse.message);
+						$scope.loggedIn = false;
+					}
+				});
 
-		// TODO: Need to find a way to make this work;
-		// As written it tries to sendMessage the instant that the socket is created, in which case the socket is not ready
-/*		try {
-			CardshifterServerAPI.sendMessage(login);
-		} catch (e) {
-			console.log(e);
-		}*/
+			} catch(e) {
+				// notify the user that there was an issue logging in (loginmessage issue)
+				console.log("LoginMessage error(error 2): " + e);
+				$scope.loggedIn = false;
+			}
+		}, function() {
+			// notify the user that there was an issue logging in (websocket issue)
+			console.log("Websocket error(error 1)");
+			$scope.loggedIn = false;
+		});
 	}
 });
diff --git a/server_interface/server_interface.js b/server_interface/server_interface.js
@@ -17,6 +17,23 @@
 		this.readyState = readyState;
 	}
 
+	/**
+		Returns all the keys of obj and it's inherited keys
+
+		@param obj:Object -- The object
+		@return Object -- a new Object, containing obj's keys and inherited keys
+		@source http://stackoverflow.com/questions/8779249/how-to-stringify-inherited-objects-to-json
+
+		This is used so JSON.stringify can get the .command of a message.
+	*/
+	function flatten(obj) {
+        var result = Object.create(obj);
+        for(var key in result) {
+            result[key] = result[key];
+        }
+        return result;
+    }
+
 	window.CardshifterServerAPI = {
 		socket: null,
 		incomingMessages: [],
@@ -128,13 +145,11 @@
 			* <p>
 			* These are messages printed to the game lobby which are visible to all users present at the time the message is posted.
 			* @constructor
-			* @param chatId  The Id of this chat message
-			* @param from  The Id of the sender of this message
 			* @param message  The content of this chat message
 			*/
-			ChatMessage: function(chatId, from, message) {
-				this.chatId = chatId;
-				this.from = from;
+			ChatMessage: function(message) {
+				this.chatId = 1;
+				this.from = "unused";
 				this.message = message;
 
 				this.toString = function() {
@@ -196,8 +211,9 @@
 		* This sets up all the message types to inherit the main `Message` class, and sets
 		* up the websocket that will be used to communicate to the server, and to recieve
 		* information from the server.
+		*
 		*/
-		init: function(server, isSecure, onReady) {
+		init: function(server, isSecure, onReady, onError) {
 			var types = this.messageTypes;
 			var self = this; // for the events
 
@@ -221,12 +237,13 @@
 			var socket = new WebSocket(protocolAddon + server);
 
 			socket.onmessage = function(message) {
-				self.incomingMessages.push(message);
+				self.incomingMessages.push(JSON.parse(message.data));
 			}
 
 			socket.onopen = onReady;
 
 			socket.onerror = function() {
+				onError();
 				this.socket = null;
 			}
 
@@ -237,15 +254,28 @@
 		* Sends a message to the server.
 		* 
 		* @param message:Message -- The message to send.
+		* @param onReceive:Function (OPTIONAL) -- A function to run when a message has returned
 		* @error NotInitializedException -- If the API has not been initialized yet.
 		* 
 		* This will use websocket setup by `this.init` to send a message to the server.
+		*
+		* NOTE: The onReceive function will NOT NECESSARILY be run when the desired request
+		* is received. However, it is likely.
 		*/
-		sendMessage: function(message) {
+		sendMessage: function(message, onReceive) {
 			var socket = this.socket;
+			var self = this;
 			if(socket) {
 				if(socket.readyState === SOCKET_OPEN) {
-					this.socket.send(JSON.stringify(message));
+					this.socket.send(JSON.stringify(flatten(message)));
+					if(onReceive) {
+						this.socket.onmessage = function(msg) {
+							onReceive(JSON.parse(msg.data));
+							this.onmessage = function(msg2) {
+								self.incomingMessages.push(JSON.parse(msg2.data));
+							}
+						}
+					}
 				} else {
 					throw new SocketNotReadyException("The Websocket is not yet ready to be used", socket.readyState);
 				}