draw line when racket/mouse is pushed

public/ClientCollision.js

@@ -20,7 +20,7 @@ function ClientCollision(Playground, Ball, Racket) {
             var ballVectors = attributes.ball.getVectors();
 
             var playgroundDimension = attributes.playground.getDimension();
-            var racketVectors = attributes.racket.getVectors();
+            var racketVectors = attributes.racket.getVector();
 
 
             /**

public/ClientMain.js

@@ -28,7 +28,7 @@ $(function () {
     var clientPlayground = new ClientPlayground( $("#playground"));
     clientPlayground.init();
 
-    var collision = new ClientCollision( clientPlayground, ball);
+    var collision = new ClientCollision( clientPlayground, ball, racket);
 
 
     ball.create();
@@ -58,33 +58,11 @@ $(function () {
             x: event.pageX - $playground.offset().left,
             y: event.pageY - $playground.offset().top
         };
+        racket.setAxis(event.pageX - $playground.offset().left,event.pageY - $playground.offset().top);
         drawRacket(d)
         socket.emit('move racket', d);
     });
 
-    var startX = 0;
-    var startY = 0;
-    $( "#playground" ).mousedown(function(event) {
-        startX = event.pageX - $playground.offset().left;
-        startY = event.pageY - $playground.offset().top;
-    });
-
-    $( "#playground" ).mouseup(function(event) {
-        var endX = event.pageX - $playground.offset().left;
-        var endY = event.pageY - $playground.offset().top;
-        var newLine = document.createElementNS('http://www.w3.org/2000/svg','line');
-        newLine.setAttribute('id','line');
-        newLine.setAttribute('x1', startX);
-        newLine.setAttribute('y1', startY);
-        newLine.setAttribute('x2', endX);
-        newLine.setAttribute('y2', endY);
-        $("#map").html(newLine);
-        $('#map').fadeIn().delay(20000).fadeOut( "slow", function() {
-            $("#map").html("");
-        });
-        racket.setVector(endX-startX, endY-startY);
-    });
-
     // Whenever the server emits 'login', log the login message
     socket.on('login', function (data) {
         connected = true;

public/ClientRacket.js

@@ -3,22 +3,26 @@ function ClientRacket(){
 
     var attributes = {
         'el': '',
-        'vx': 0,
-        'vy': 0
+        'prevX': 0,
+        'prevY': 0,
+        'x': 0,
+        'y': 0
     };
 
     return {
         setEl: function(el){
             attributes.el = el;
         },
-        setVector : function(vx, vy){
-            attributes.vx = vx;
-            attributes.vy = vy;
+        setAxis : function(x,y){
+            attributes.prevX = attributes.x;
+            attributes.prevY = attributes.y;
+            attributes.x = x;
+            attributes.y = y;
         },
         getVector: function(){
             return {
-                vx: attributes.vx,
-                vy: attributes.vy
+                vx: attributes.x-attributes.prevX,
+                vy: attributes.y-attributes.prevY
             }
         }
     }

public/index.html

@@ -77,6 +77,7 @@
 
 <script src="/socket.io/socket.io.js"></script>
 <script src="/ClientScore.js"></script>
+<script src="/ClientRacket.js"></script>
 <script src="/ClientCollision.js"></script>
 <script src="/ClientPlayground.js"></script>
 <script src="/ClientBall.js"></script>