racket collision with the ball

PlayersCollection.js

@@ -33,6 +33,13 @@ module.exports = function() {
                 this.decreaseCount();
             }
         },
+        getWhoIsTurn: function(userId){
+            var nextId = 1;
+            if(this.getPlayerById(userId + 1)){
+                nextId++;
+            }
+            return nextId;
+        },
         stringify: function(){
             var strUser = {};
             for (var key in _players) {

public/ClientBall.js

@@ -43,10 +43,11 @@ function ClientBall($el) {
             attributes.vx = vx;
             attributes.vy = vy;
         },
-        redraw: function () {
+        calculateNewAxis: function(){
             attributes.x += attributes.vx;
             attributes.y += attributes.vy;
-
+        },
+        redraw: function () {
             attributes.el.css('top', attributes.y);
             attributes.el.css('left', attributes.x);
         },

public/ClientCollision.js

@@ -6,12 +6,13 @@
  * @constructor
  */
 
-function ClientCollision(Playground, Ball, Racket) {
+function ClientCollision(Playground, Ball, Racket, User) {
 
     var attributes = {
         'ball': Ball,
         'playground': Playground,
-        'racket': Racket
+        'racket': Racket,
+        'user': User
     };
 
     return {
@@ -46,20 +47,32 @@ function ClientCollision(Playground, Ball, Racket) {
             /**
              * Racket collision
              */
-            if (
+            if (attributes.user.getIsTurn()
+                &&
                 (ballAxis.x > racketAxis.x && ballAxis.x < racketAxis.x + racketDimension.width) //x coordinate
-                    &&
-                    (ballAxis.y < racketAxis.y && ballAxis.y > racketAxis.y - racketDimension.height) //y 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);
+                if (vL2.x == 0 && vL2.y == 0) {
+                    attributes.ball.setVectors(1, 1);
+                }
+                //if (vL2.x == 0 && vL2.y == 0) {
+                //    attributes.user.setIsTurn(true);
+                //} else {
+                //    attributes.user.setIsTurn(false);
+                //}
 
-                return;
+                attributes.user.setIsTurn(false);
+                return true;
             }
 
             if (ballAxis.y > playgroundDimension.h) {
@@ -87,6 +100,7 @@ function ClientCollision(Playground, Ball, Racket) {
             attributes.ball.setAxis(ballAxis.x, ballAxis.y);
             attributes.ball.setVectors(ballVectors.vx, ballVectors.vy);
 
+            return false;
         }
     }
 }

public/ClientMain.js

@@ -22,19 +22,16 @@ $(function () {
     var score = new ClientScore( $('.score') );
     var ball = new ClientBall( $('#ball') );
     var racket = new ClientRacket();
+    var user = new ClientPlayer($('.pages'));
 
     ball.setAxis(100,100);
 
     var clientPlayground = new ClientPlayground( $("#playground"));
     clientPlayground.init();
 
-    var collision = new ClientCollision( clientPlayground, ball, racket);
-
-
+    var collision = new ClientCollision( clientPlayground, ball, racket, user);
     ball.create();
 
-    // Prompt for setting a username
-    var user = new ClientPlayer($('.pages'));
     user.setLoginCallback(function () {
         $loginPage.fadeOut();
         $gamePage.fadeIn({
@@ -69,21 +66,48 @@ $(function () {
         log.add("Joined: " + data.numUsers);
         log.add("Your name: " + data.username);
         user.setId(data.id);
-
+        if(data.id == 1){
+            user.setIsTurn(true);
+        }
         racket.setEl($('div.racket' + data.id));
 
         function animloop() {
             init = requestAnimFrame(animloop);
-            ball.redraw();
-            collision.collision();
+
+            if(user.getIsTurn()){
+                ball.redraw();
+                ball.calculateNewAxis();
+                var newAxis = ball.getAxis();
+
+                socket.emit('ball position', newAxis);
+
+                if(collision.collision()){
+                    socket.emit('how played', {userId:  data.id});
+                }
+            }
+
         }
 
         animloop();
     });
 
+
+
+    socket.on('who is turn', function (data) {
+        //console.log(data);
+        if(data.userId == user.getId()){
+            user.setIsTurn( true );
+        }
+    })
+
+    socket.on('ball position', function (data) {
+        ball.setAxis(data.x, data.y);
+        ball.redraw();
+    })
+
     socket.on('show racket', function (data) {
         drawRacket(data);
-    })
+    });
     // Whenever the server emits 'user joined', log it in the chat body
     socket.on('user joined', function (data) {
         log.add(data.username + ' joined');

server.js

@@ -52,15 +52,32 @@ io.on('connection', function (socket) {
 
             socket.broadcast.emit('show racket', {
                 'id': data.id,
-                'x':data.x,
-                'y':data.y
+                'x': data.x,
+                'y': data.y
             });
-        })
+        });
+
+        socket.on('how played', function (data) {
+            console.log('who is turn', data);
+
+            socket.broadcast.emit('who is turn', {
+                'userId': PlayersCollection.getWhoIsTurn(data.userId)
+            });
+        });
+
+        socket.on('ball position', function (data) {
+            //console.log(data);
+
+            socket.broadcast.emit('ball position', {
+                'x': data.x,
+                'y': data.y,
+            });
+        });
 
         // when the user disconnects.. perform this
         socket.on('disconnectUser', function (data) {
 
-            PlayersCollection.removeById( data.id );
+            PlayersCollection.removeById(data.id);
 
             //@todo remove racket