diff --git a/app.js b/app.js index 3e44563..61e85e5 100644 --- a/app.js +++ b/app.js @@ -33,7 +33,7 @@ app.configure('production', function(){ app.get('/', routes.index); -app.listen(8888); +app.listen(80); console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env); diff --git a/public/javascripts/canvas.js b/public/javascripts/canvas.js index 7dfd2b8..2b34774 100644 --- a/public/javascripts/canvas.js +++ b/public/javascripts/canvas.js @@ -7,7 +7,6 @@ var init = function () { listen(); (function animloop(){ requestAnimFrame(animloop); - // run(); render(canvas, ctx, Circles); })(); }; @@ -29,8 +28,6 @@ var listen = function () { var mx = e.layerX - e.currentTarget.offsetLeft, my = e.layerY - e.currentTarget.offsetTop, circle = new Circle(mx, my); - // Emits circle on click - //socket.emit('sendcircle', circle); }); socket.on('updatesocketcircle', function(username, circle) { @@ -57,42 +54,6 @@ var render = function(canvas, context, circlesArray) { circlesArray = CirclesNext; }; -// var run = function() { -// ctx.clearRect(0, 0, canvas.width, canvas.height); -// var CirclesNext = []; -// for(var i = 0; i < Circles.length; i++) { -// Circles[i].create(); -// if(Circles[i].i <= 30) { -// CirclesNext.push(Circles[i]); -// } -// } -// Circles = CirclesNext; -// }; - -/** Start original working code **/ -// var Circle = function(mx, my) { -// var thisCircle = {}, -// r = Math.floor(Math.random() * 256), -// g = Math.floor(Math.random() * 256), -// b = Math.floor(Math.random() * 256); -// thisCircle.mx = mx; -// thisCircle.my = my; -// thisCircle.i = 0; - -// thisCircle.create = function() { -// if (thisCircle.i <= 30) { -// ctx.fillStyle = 'rgba(' + r + ',' + g + ',' + b + ',' + ((30 - thisCircle.i) / 30) + ')'; -// ctx.beginPath(); -// ctx.arc(thisCircle.mx, thisCircle.my, thisCircle.i * 2, 0, Math.PI * 2, true); -// ctx.fill(); -// thisCircle.i++; -// } -// }; - -// return thisCircle; -// }; -/** End original working code **/ - /** Start experimental prototype code **/ var Circle = function(mx, my) { this.r = Math.floor(Math.random() * 256), diff --git a/public/javascripts/client-socket.js b/public/javascripts/client-socket.js index e524b12..cd4241e 100644 --- a/public/javascripts/client-socket.js +++ b/public/javascripts/client-socket.js @@ -1,4 +1,5 @@ -var socket = io.connect('http://10.101.2.63:8888'); +var socket = io.connect('http://10.101.26.78:80'), + GLOBAL_USERNAME; // on connection to server, ask for user's name with an anonymous callback socket.on('connect', function(){ @@ -7,8 +8,6 @@ socket.on('connect', function(){ socket.emit('adduser', GLOBAL_USERNAME); }); -var GLOBAL_USERNAME; - // listener, whenever the server emits 'updatechat', this updates the chat body socket.on('updatechat', function (username, data) { $('.conversation').append(''+username + ': ' + data + '
'); @@ -22,21 +21,31 @@ socket.on('updateusers', function(data) { }); }); -// on load of page -$(function(){ - // when the client clicks SEND - $('#datasend').click( function() { - var message = $('.data').val(); - $('.data').val(''); - // tell server to execute 'sendchat' and send along one parameter - socket.emit('sendchat', message); +var sendChatMessage = function () { + var message = $('.data').val(); + $('.data').val(''); + // tell server to execute 'sendchat' and send along message + socket.emit('sendchat', message); +}; + +$(document).ready(function() { + $('.clear-data .clear-chat').bind('click', function(event) { + event.preventDefault(); + $('.conversation').empty(); + }); + + $('.clear-data .clear-canvas').bind('click', function(event) { + event.preventDefault(); + socketCtx.clearRect(0, 0, socketCanvas.width, socketCanvas.height); + }); + + $('#datasend').bind('click', function() { + sendChatMessage(); }); - // when the client hits ENTER on their keyboard - $('.data').keypress(function(e) { - if(e.which == 13) { - $(this).blur(); - $('#datasend').focus().click(); + $('.data').keypress(function(event) { + if(event.which == 13) { + sendChatMessage(); } }); }); diff --git a/public/javascripts/socket-circles.js b/public/javascripts/socket-circles.js index f4aad10..6dcdbe1 100644 --- a/public/javascripts/socket-circles.js +++ b/public/javascripts/socket-circles.js @@ -6,7 +6,7 @@ socketCircle.init = function() { socketCanvas.setAttribute('height', window.innerHeight ); socketCtx = socketCanvas.getContext('2d'); -// Fires off no method create when used. Data isn't passed along? Point coords are passed along, but no moethod +// Data isn't passed along? Point coords are go through, but not methods. Socket.io converts data to JSON before sending. // (function animloop(){ // requestAnimFrame(animloop); // render(socketCanvas, socketCtx, socketCircle.Circles); diff --git a/views/index.jade b/views/index.jade index 2e2bd59..2306cda 100644 --- a/views/index.jade +++ b/views/index.jade @@ -3,6 +3,9 @@ h2 USERS .users-list .conversation-container + .clear-data + input.clear-chat(type="button", value="Clear Chat") + input.clear-canvas(type="button", value="Clear Canvas") .conversation input.data input#datasend(type="button", value="send")