Use socketio to obtain all loggedin users. Display it on gui.

Author: Tomek

game/events.py

@@ -15,12 +15,14 @@ class UserNamespace(BaseNamespace, BroadcastMixin):
 
     def on_join(self, user):
         user['gamestate'] = GAME_STATES['AVAILABLE']
-        for u in self.users:
-            if u['username'] == user['username']:
-                self.error("USER IS CONNECTED")
-        self.users.append(user)
+        if any(filter(lambda u: u['username'] == user['username'], self.users)):
+            self.error("user_connected", "User is connected")     
+        else:
+            self.users.append(user)
+            self.broadcast_event_not_me('connected', user)
+        
         self.emit('join', self.users)
-        self.broadcast_event_not_me('connected', user)
+        
 
     def recv_disconnect(self):
         # Remove nickname from the list.

game/static/js/custom.js

@@ -1,8 +1,33 @@
-// $(document).ready(function(){
-	// $('#logout').click(function(){
-		// $.post('/accounts/logout/').
-		  // done(function(){
-		  	// location.reload();
-		  // });
-	// });
-// });
+$(document).ready(function(){
+		var username = $("#username").text(); 
+		var usocket = io.connect('/users');
+		
+		usocket.on('join', function(users){
+			var tbl_body = "";
+			for (var i = 0; i < users.length; i++) {
+				tbl_body += "<tr><td>" + users[i].username + "</td>" + "<td>" + users[i].gamestate + "</td>";
+				if(users[i].gamestate == 2  ){
+					tbl_body += "<td></td>";
+				}
+				else{
+					tbl_body += "<td><button>Small button</button></td>";
+				}
+			}
+			$('#playerTable').append(tbl_body);	
+		});		
+		
+		usocket.on('connected', function(user) {
+			var tbl_body = "";
+			tbl_body += "<tr><td>" + user.username + "</td>" + "<td>" + user.gamestate + "</td>";
+			if(user.gamestate == 2  ){
+				tbl_body += "<td></td>";
+			} else {
+				tbl_body += "<td><button>Small button</button></td>";
+			}
+			tbl_body += "</tr>";
+			$('#playerTable').append(tbl_body);	
+		});
+		
+		
+		usocket.emit('join', {'username':username});
+});

memo/templates/base_index.html

@@ -49,7 +49,7 @@
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
-    <script src="{{ STATIC_URL }}/js/bootstrap.min.js"></script>
+    <script src="{{ STATIC_URL }}js/bootstrap.min.js"></script>
     {% block js_import %}
     {% endblock %}
 

memo/templates/main_view.html

@@ -19,49 +19,10 @@ <h2>Games in progress</h2>
 
     </div>
 
+<div id="username">{{ user.username }}</div>
 {% endblock %}
 {% block js_import %}
 {% socketio %}
-<script src="{{ STATIC_URL }}/js/fabric.js"></script>
-<script>
-	$(document).ready(function(){
-		//var json = '{"players" : [	{"username":"tomek","gamestate":0},{"username":"rysiek","gamestate":1}, {"username":"kamil","gamestate":2}]}';
-		
-		var usocket = io.connect('/users');
-		
-		usocket.on('join', function(users){
-			var tbl_body = "";
-			for (var i = 0; i < users.length; i++) {
-				tbl_body += "<tr><td>" + users[i].username + "</td>" + "<td>" + users[i].gamestate + "</td>";
-				if(users[i].gamestate == 2  ){
-					tbl_body += "<td></td>";
-				}
-				else{
-					tbl_body += "<td><button>Small button</button></td>";
-				}
-				tbl_body += "</tr>";
-			}
-			$('#playerTable').append(tbl_body);	
-		});		
-		
-		usocket.on('connected', function(user) {
-			var tbl_body = "";
-			tbl_body += "<tr><td>" + user.username + "</td>" + "<td>" + user.gamestate + "</td></tr>";
-			if(user.gamestate == 2  ){
-				tbl_body += "<td></td>";
-			}
-			else{
-				tbl_body += "<td><button>Small button</button></td>";
-			}
-			$('#playerTable').append(tbl_body);	
-		});
-		
-		
-		usocket.emit('join', {'username':'rysiek'});			
-		
-	});
-	
-	
-	
-</script>
+<script src="{{ STATIC_URL }}js/fabric.js"></script>
+<script src="{{ STATIC_URL }}js/custom.js"></script>
 {% endblock %}