draw line when racket/mouse is pushed

public/ClientCollision.js

@@ -15,19 +15,52 @@ function ClientCollision(Playground, Ball, Racket) {
     };
 
     return {
+        reflect: function (v, n) {
+            var d = this.dot(v, n);
+            return {
+                x: v.vx - 2 * d * n.vx,
+                y: v.vy - 2 * d * n.vy
+            }
+        },
+        dot: function (v1, v2) {
+            return ( v1.vx * v2.vx ) + ( v1.vy * v2.vy );
+        },
+        normalize: function (v) {
+            var len = this.getLength(v);
+            v.vx /= len;
+            v.vy /= len;
+            return v;
+        },
+        getLength: function (v) {
+            return Math.sqrt(v.vx * v.vx + v.vy * v.vy);
+        },
         collision: function () {
             var ballAxis = attributes.ball.getAxis();
             var ballVectors = attributes.ball.getVectors();
 
             var playgroundDimension = attributes.playground.getDimension();
-            var racketVectors = attributes.racket.getVector();
-
+            var racketVector = attributes.racket.getVector();
 
+            var racketAxis = attributes.racket.getAxis();
+            var racketDimension = attributes.racket.getDimension();
             /**
              * Racket collision
              */
+            if (
+                (ballAxis.x > racketAxis.x && ballAxis.x < racketAxis.x + racketDimension.width) //x coordinate
+                    &&
+                    (ballAxis.y < racketAxis.y && ballAxis.y > racketAxis.y - racketDimension.height) //y coordinate
+                ) {
+                var BD = racketAxis, // bod dotyku (poz. lopticky)
+                    vR = racketVector, //vektor rakety
+                    vL = ballVectors; // vektor lopticky
 
+                var nvR = this.normalize(vR);
+                var vL2 = this.reflect(vL, nvR);
+                attributes.ball.setVectors(vL2.x, vL2.y);
 
+                return;
+            }
 
             if (ballAxis.y > playgroundDimension.h) {
                 ballVectors.vy = -ballVectors.vy;

public/ClientMain.js

@@ -70,6 +70,8 @@ $(function () {
         log.add("Your name: " + data.username);
         user.setId(data.id);
 
+        racket.setEl($('div.racket' + data.id));
+
         function animloop() {
             init = requestAnimFrame(animloop);
             ball.redraw();

public/ClientPlayer.js

@@ -12,10 +12,17 @@ function ClientPlayer(dom){
         'id': null,
         'inputEl': dom.find('.usernameInput'),
         'signedInEl': dom.find('#signedInAs'),
+        'isTurn': false,
         'loginCallback': function(){}
     };
 
     return {
+        setIsTurn: function(isTurn) {
+            attributes.isTurn = isTurn;
+        },
+        getIsTurn: function() {
+            return attributes.isTurn;
+        },
         init: function(){
             var that = this;
             attributes.inputEl.keydown(function (event) {

public/ClientRacket.js

-
-function ClientRacket(){
+function ClientRacket() {
 
     var attributes = {
+        'width': 0,
+        'height': 0,
         'el': '',
         'prevX': 0,
         'prevY': 0,
@@ -10,19 +11,33 @@ function ClientRacket(){
     };
 
     return {
-        setEl: function(el){
+        setEl: function (el) {
             attributes.el = el;
+            attributes.width = el.width();
+            attributes.height = el.height();
+        },
+        getDimension: function() {
+            return {
+                'width': attributes.width,
+                'height': attributes.height
+            }
         },
-        setAxis : function(x,y){
+        setAxis: function (x, y) {
             attributes.prevX = attributes.x;
             attributes.prevY = attributes.y;
             attributes.x = x;
             attributes.y = y;
         },
-        getVector: function(){
+        getAxis: function () {
+            return {
+                'x': attributes.x,
+                'y': attributes.y
+            }
+        },
+        getVector: function () {
             return {
-                vx: attributes.x-attributes.prevX,
-                vy: attributes.y-attributes.prevY
+                vx: attributes.x - attributes.prevX,
+                vy: attributes.y - attributes.prevY
             }
         }
     }