diff options
Diffstat (limited to 'public/js')
| -rw-r--r-- | public/js/color.js | 2 | ||||
| -rw-r--r-- | public/js/draw.js | 33 | ||||
| -rw-r--r-- | public/js/game.js | 10 |
3 files changed, 35 insertions, 10 deletions
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: { |