multiple canvas worlds now

Author: timatooth

public/draw.js

@@ -14,6 +14,7 @@ $(function(){
     setColor = '#000';
     defaultName = "Guest",
     draggingTool = false,
+    canvasName = $('#canvasName').text(),
     dragging = false;
     alertify.set({ delay: 1000*30 });
 
@@ -30,10 +31,18 @@ $(function(){
     var clients = {};
     var cursors = {};
 
+    if(canvasName === ""){
+	canvasName = "lobby";
+	$('#canvasName').text('Main Lobby');
+    }
+
     var socket = io.connect();
 
     socket.on('connect', function(){
 	$('#bigTitle').text('Connected to server');
+	socket.emit('drawActionHistory', {
+	    canvasName: canvasName
+	});
     });
 
     socket.on('moving', function (data) {
@@ -75,7 +84,7 @@ $(function(){
 	$('#bigTitle').text("Rendering history...");
 	//offscreen canvas
 	var osc = document.createElement('canvas');
-	osc.width = 1600;
+	osc.width = 1900;
 	osc.height = 1000;
 	var osctx = osc.getContext('2d');
 
@@ -155,7 +164,8 @@ $(function(){
 		    'y': e.pageY,
 		    'drawing': drawing,
 		    'id': id,
-		    'color': setColor
+		    'color': setColor,
+		    'canvasName': canvasName
 		});
 		lastEmit = $.now();
 	    }
@@ -230,7 +240,7 @@ $(function(){
 	    $('#settingsPanel').animate({bottom: 0}, 200);
 	    settingsTabOpen = true;
 	} else {
-	    $('#settingsPanel').animate({bottom: -300}, 200);
+	    $('#settingsPanel').animate({bottom: -320}, 200);
 	    settingsTabOpen = false;
 	}
 

public/style.css

@@ -134,9 +134,9 @@ h3{
 #settingsPanel {
     position: fixed;
     right: 20px;
-    bottom: -300px;
+    bottom: -320px;
     width: 200px;
-    height: 300px;
+    height: 320px;
     background-color: #3C5969;
     z-index: 12;
     border-radius: 10px 0px 0px 0px;
@@ -145,7 +145,7 @@ h3{
 
 #settingsPanel {
     color: white;
-    font-size: 0.8em;
+    font-size: 0.85em;
 }
 #settingsPanel input, p, label, table {
     margin: 10px;
@@ -158,6 +158,17 @@ h3{
     display: none;
 }
 
+#settingsPanel h2 {
+    font-size: 1.6em;
+    text-align: center;
+}
+
+#settingsPanel h3 {
+    font-size: 1.1em;
+    text-align: center;
+    text-transform: uppercase;
+}
+
 
 #bottomAttribution {
     position: absolute;

server.js

@@ -50,7 +50,7 @@ new compressor.minify({
 
 app.use(compression())
 app.use(express.static(__dirname + '/public', {maxAge: 60*60*24*1000}));
-app.use(morgan('dev'));
+app.use(morgan('combined'));
 
 app.set('views', __dirname + '/views');
 app.set('view engine', 'jade');
@@ -64,7 +64,7 @@ app.get('/', function(req, res){
 
 /* User canvas */
 app.get("/c/:canvasname", function (req, res, next) {
-    res.render('main.jade');
+    res.render('main.jade', {canvasName: req.params.canvasname});
 });
 
 
@@ -76,22 +76,29 @@ redisClient.on("error", function(err){
 redisClient.setnx("clientcount", 0);
 
 io.sockets.on('connection', function(socket){
-    var drawActions = [];
     localConnectedClients += 1;
     redisClient.incr("clientcount");
 
-    //TODO Need to optimise this
-    redisClient.lrange("drawactions", 0, -1, function(err, replies){
-	replies.forEach(function(reply, i){
-	    drawActions.push(JSON.parse(reply));
-	});
+    socket.on('drawActionHistory', function(data){
+	//client has asked for all the draw action history.
+	var drawActions = [];
+	var key = "drawactions:"+data.canvasName;
+	redisClient.lrange(key, 0, -1, function(err, replies){
+	    if(err){
+		console.log("Error fetching draw history key: " + key);
+		return;
+	    }
+	    replies.forEach(function(reply, i){
+		drawActions.push(JSON.parse(reply));
+	    });
 
-	//compress drawaction history data
-	var compressedActions = lzwCompress.pack(drawActions)
-	//send it
-	socket.emit('drawActionHistory', compressedActions);
-	//increment netusage tracker.
-	netUsage += sizeof(compressedActions);
+	    //compress drawaction history data
+	    var compressedActions = lzwCompress.pack(drawActions)
+	    //send it
+	    socket.emit('drawActionHistory', compressedActions);
+	    //increment netusage tracker.
+	    netUsage += sizeof(compressedActions);
+	});
     });
 
     socket.on('mousemove', function(data){
@@ -106,9 +113,8 @@ io.sockets.on('connection', function(socket){
 		    toY: data.y,
 		    color: data.color
 		};
-
-		redisClient.rpush("drawactions",
-				  JSON.stringify(drawAction));
+		var key = "drawactions:"+data.canvasName;
+		redisClient.rpush(key, JSON.stringify(drawAction));
 	    }
 
 	} else {
@@ -146,10 +152,12 @@ io.sockets.on('connection', function(socket){
 	    netUsageKB: (netUsage / 1000).toFixed(1),
 	    nodeConnections: localConnectedClients
 	};
-
+	
+	/*
 	multi.llen("drawactions", function(err, reply){
 	    data['drawStackSize'] = reply;
 	});
+	*/
 
 	multi.get('clientcount', function(err, reply){
 	    data['globalConnectedClients'] = reply;

views/main.jade

@@ -1,7 +1,10 @@
 doctype html
 html
   head
-    title udraw: Multiplayer Drawing
+    if canvasName
+      title #{canvasName} | udraw Multiplay Drawing
+    else
+      title udraw: Multiplayer Drawing
     meta(name="viewport" content="initial-scale=1")
     meta(name="description" content="Draw with everyone else in realtime on a HTML5 canvas")
     meta(property="og:url" content="https://udraw.me")
@@ -33,14 +36,16 @@ html
       h3 Note: Drawings are saved on the server. Come back any time!
     div#settingsPanel
       div#settingsPanelTab Settings
+      h2 You're drawing in
+      h3#canvasName #{canvasName}
       label(for="usernameInput") Chat Name
       input(type="text" id="usernameInput" placeholder="Username: Guest")
 
       table#serverStats
       div#bottomAttribution
         p
           a(id="statsShow" href="javascript:void(0)") Server Stats
-        p node-multidraw v0.5 by <a href="https://timatooth.com">Tim Sullivan</a>
+        p v0.5 by <a href="https://timatooth.com">Tim Sullivan</a>
         p Source code on <a href="https://github.com/timatooth/node-multidraw">GitHub</a>
     input(type="text" id="chatBox" placeholder="Chat" maxlength="135")
     script(src="//code.jquery.com/jquery-2.1.1.min.js")