diff options
Diffstat (limited to 'public')
| -rw-r--r-- | public/css/drawdrawdraw.css | 4 | ||||
| -rw-r--r-- | public/index.html | 10 | ||||
| -rw-r--r-- | public/js/color.js | 2 | ||||
| -rw-r--r-- | public/js/draw.js | 33 | ||||
| -rw-r--r-- | public/js/game.js | 10 |
5 files changed, 45 insertions, 14 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: { |