uploading images to server working

author: Jules Laplace <jules@okfoc.us> 2013-02-24 17:16:32 -0800
committer: Jules Laplace <jules@okfoc.us> 2013-02-24 17:16:32 -0800
commit: f031288fbd95ebb47729835a2930d0266482adcf (patch)
tree: 4705df0f7fb5401c9954bebc6cca011ecb7df3f4
parent: 818c99a0fa7ac29fbe11c382ef2d76e243e8e8f8 (diff)
6 files changed, 64 insertions, 32 deletions
diff --git a/public/css/drawdrawdraw.css b/public/css/drawdrawdraw.css
index dc95b82..b2fc47c 100644
--- a/public/css/drawdrawdraw.css
+++ b/public/css/drawdrawdraw.css
@@ -23,6 +23,7 @@ html,body { padding: 0; margin: 0; width: 100%; height: 100%;
 	width: 100%;
 	height: 100%;
 	background: rgba(255,255,255,0.9);
+	z-index: 1024;
 }
 .curtain .inner {
 	position: absolute;
@@ -41,4 +42,7 @@ html,body { padding: 0; margin: 0; width: 100%; height: 100%;
 	top: 50px;
 }
 #palette {
+}
+#image {
+	display: none;
 }
 \ No newline at end of file
diff --git a/public/index.html b/public/index.html
index c14aa37..1a47a20 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html>
 <head>
-<title>CocoPaint</title>
+<title>CocoaPaint</title>
 <link rel="stylesheet" href="/css/drawdrawdraw.css" type="text/css">
 <link rel="stylesheet" href="/css/chat.css" type="text/css">
 <script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
@@ -14,7 +14,7 @@
 <script type="text/javascript" src="/js/game.js"></script>
 </head>
 <body>
-	<h1>Cocopaint</h1>
+	<h1>Cocoapaint</h1>
 
 	<div id="chat_container">
 		<div id="chat"><div id="chat_shim"></div></div>
@@ -29,7 +29,7 @@
 	
 	<div id="login" class="curtain">
 		<div class="inner">
-			Welcome to Cocopaint!
+			Welcome to Cocoapaint!
 			<br>
 			<br>
 			Enter your name to start playing..
@@ -41,9 +41,11 @@
 	</div>
 	
 	<div id="drawing">
-		<canvas id="workspace" width="400" height="200">
+		<canvas id="workspace" width="400" height="200"></canvas>
 		<div id="palette">
 		</div>
+		<button id="save-drawing">SAVE</button>
+		<img id="image">
 	</div>
 	
 </body>
diff --git a/public/js/color.js b/public/js/color.js
index 5063423..85fe95d 100644
--- a/public/js/color.js
+++ b/public/js/color.js
@@ -33,7 +33,7 @@ Color.prototype.alpha = function(a){
 }
 
 var colors = {
-  red: new Color([ 255,0,0,0.1 ]),
+  red: new Color([ 255,0,0 ]),
   blue: new Color([ 0,0,255 ]),
   black: new Color([ 0,0,0 ]),
   green: new Color([ 0,128,0 ]),
diff --git a/public/js/draw.js b/public/js/draw.js
index 14a112d..d97dba1 100644
--- a/public/js/draw.js
+++ b/public/js/draw.js
@@ -6,15 +6,14 @@ $(function(){
 	var workspaceCtx = workspace.getContext('2d');
 	var lastpoint;
 	
-	workspaceCtx.fillStyle = "#fff";
-	workspaceCtx.fillRect(0,0,workspace.width,workspace.height);
+	clearWorkspace();
 	
 	var offset = $(workspace).offset();
 	
-	workspace.onmousedown = function(e){
+	$(workspace).mousedown(function(e){
 		drawing = true;
-	}
-	document.onmousemove = function(e){
+	});
+	$(window).mousemove(function(e){
 		if (drawing) {
 			newpoint = new Point(e, offset);
 			if (lastpoint) {
@@ -22,17 +21,35 @@ $(function(){
 			}
 			lastpoint = newpoint;
 		}
-	}
-	window.onmouseup = function(){
+	});
+	$(window).mouseup(function(){
 		if (drawing) {
 			drawing = false;
 			lastpoint = null;
 		}
+	});
+	function clearWorkspace(){
+		workspaceCtx.fillStyle = "#fff";
+		workspaceCtx.fillRect(0,0,workspace.width,workspace.height);
 	}
+	$("#save-drawing").click(function(){
+		var uri = workspace.toDataURL("image/png").replace("data:image/png;base64,","");
+		console.log(uri.length);
+		console.log(atob(uri).length);
+
+		var params = {
+			image: uri,
+			nick: Game.nick
+		};
+		$.post("/upload", params, function(){
+			console.log("saved");
+		});
+		clearWorkspace();
+	});
+	
 	function draw(start, end){
 		var halfBrushW = brush.width/2;
 		var halfBrushH = brush.height/2;
-	 console.log(start.x, end.x);
 		var distance = parseInt( Trig.distanceBetween2Points( start, end ) );
 		var angle = Trig.angleBetween2Points( start, end );
 		for ( var z=0; (z<=distance || z==0); z += 2 ) {
diff --git a/public/js/game.js b/public/js/game.js
index af05ad9..c348e9a 100644
--- a/public/js/game.js
+++ b/public/js/game.js
@@ -8,6 +8,7 @@ var Game = {
 		// Bind events from the server
 		socket.on('event-join', Events.receive.join);
 		socket.on('event-message', Events.receive.message);
+		socket.on('event-image', Events.receive.image);
 		Auth.init();
 		Chat.init();
 	}
@@ -23,9 +24,16 @@ var Events = {
 			}
 		},
 		
-		message: function(msg){
+		message: function(msg) {
 			Chat.add(msg);
+		},
+		
+		image: function(data) {
+			console.log(data);
+			if (data.nick == Game.nick) return;
+			$("#image").attr("src", data.url).show();
 		}
+		
 	},
 
 	send: {
diff --git a/server.js b/server.js
index cbff284..a16ad84 100644
--- a/server.js
+++ b/server.js
@@ -9,7 +9,7 @@ var express = require('express'),
 var s3 = knox.createClient({
   key: process.env.ASDF_S3_KEY,
   secret: process.env.ASDF_S3_SECRET,
-  bucket: 'dump2'
+  bucket: 'cocoapaint'
 });
 
 app.configure(function(){
@@ -29,26 +29,27 @@ app.get('/latest', function(req, res){
 });
 
 app.post('/upload', function(req, res) {
-  var user = req.body.socketid;
-  var image = req.files.image;
-  var filename = "/test/" + timestamp() + "-" + image.name
-  
-  var s3req = s3.putFile(image.path, filename, {
-    'Content-Length': image.size,
-    'Content-Type': image.type,
+
+  var nick = req.body.nick;
+  var image = new Buffer(req.body.image, 'base64');
+  var filename = "/test/" + nick + "-" + Date.now() + "-" + "test" + ".png";
+
+	var s3req = s3.putBuffer(image, filename, {
+		'Content-Length': image.length,
+		'Content-Type': 'image/png',
     'x-amz-acl': 'public-read'
-  }, function(err, s3res){
-    if (200 == s3res.statusCode) {
-      ImageURL = s3res.client._httpMessage.url; // janked
-      Images.push( ImageURL );
+	}, function(err, s3res){
+	
+		if (200 == s3res.statusCode) {
+			console.log('saved to %s', s3req.url);
 
-      console.log('saved to %s', ImageURL);
+			io.sockets.emit( 'event-image', {
+				'nick': nick,
+				'url': s3req.url
+			});
+		}
+	});
 
-      var data = { 'status': 'ok' };
-      res.setHeader('Content-Type', 'application/json');
-      res.send(JSON.stringify(data));
-    }
-  });
 });
 
 /******************************* WEBSOCKETS
author	Jules Laplace <jules@okfoc.us>	2013-02-24 17:16:32 -0800
committer	Jules Laplace <jules@okfoc.us>	2013-02-24 17:16:32 -0800
commit	f031288fbd95ebb47729835a2930d0266482adcf (patch)
tree	4705df0f7fb5401c9954bebc6cca011ecb7df3f4
parent	818c99a0fa7ac29fbe11c382ef2d76e243e8e8f8 (diff)