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")