Cleaned up some code.

tklun · Feb 17, 2012 · e660661 · e660661
1 parent b32ecf7
commit e660661
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 57 deletions.
diff --git 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
@@ -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
@@ -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('<b>'+username + ':</b> ' + data + '<br>');
@@ -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
@@ -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
@@ -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")