display dynamically rackets

public/ClientBall.js

@@ -29,6 +29,12 @@ function ClientBall($el) {
                 y:attributes.y
             };
         },
+        getWidth: function() {
+            return attributes.width;
+        },
+        getHeight: function() {
+            return attributes.height;
+        },
         getVectors: function(){
             return {
                 vx:attributes.vx,

public/ClientCollision.js

@@ -40,16 +40,20 @@ function ClientCollision(Ball, Racket, User) {
             var racketVector = attributes.racket.getVector();
             var racketAxis = attributes.racket.getAxis();
             var racketDimension = attributes.racket.getDimension();
+
             /**
              * Racket collision
              */
             if (
                 //attributes.user.getIsTurn()
                 //&&
-                (ballAxis.x > racketAxis.x && ballAxis.x < racketAxis.x + racketDimension.width) //x coordinate
+                attributes.racket.getIsActive()
+                &&
+                (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
             ) {
+                attributes.racket.setIsActive(false);
                 console.log('collision ball with racket');
                 var BD = racketAxis, // bod dotyku (poz. lopticky)
                     vR = racketVector, //vektor rakety

public/ClientMain.js

@@ -64,8 +64,9 @@ $(function () {
         if(user.getTeam() == 1 && d.x > playgroundHalf){
             d.x = playgroundHalf;
         }
-
-        racket.setAxis(event.pageX - $playground.offset().left,event.pageY - $playground.offset().top);
+        if(racket.getIsActive()) {
+            racket.setAxis(event.pageX - $playground.offset().left,event.pageY - $playground.offset().top);
+        }
 
         drawRacket(d);
         socket.emit('move racket', d);
@@ -76,6 +77,11 @@ $(function () {
         };
     });
 
+    $playground.click(function(event) {
+        racket.setIsActive(true);
+        racket.setPrevAxis(event.pageX - $playground.offset().left,event.pageY - $playground.offset().top);
+    })
+
     var $rackets = $(".rackets");
     // Whenever the server emits 'login', log the login message
     socket.on('login', function (data) {
@@ -119,7 +125,6 @@ $(function () {
         log.add(data.username + ' is team ' + data.team);
         user.setTeam(data.team);
         displayRackets(data);
-        console.log(data);
     });
 
     // Whenever the server emits 'user left', log it in the chat body

public/ClientRacket.js

@@ -7,7 +7,8 @@ function ClientRacket() {
         'prevX': 0,
         'prevY': 0,
         'x': 0,
-        'y': 0
+        'y': 0,
+        'isActive': false
     };
 
     return {
@@ -22,19 +23,29 @@ function ClientRacket() {
                 'height': attributes.height
             }
         },
-        setAxis: function (x, y) {
-            attributes.prevX = attributes.x;
-            attributes.prevY = attributes.y;
+        setPrevAxis: function(x, y) {
+            attributes.prevX = x;
+            attributes.prevY = y;
+            console.log(x, y);
+        },
+        setAxis: function(x, y) {
             attributes.x = x;
             attributes.y = y;
         },
-        getAxis: function () {
+        getAxis: function() {
             return {
                 'x': attributes.x,
                 'y': attributes.y
             }
         },
+        setIsActive: function(isActive) {
+            attributes.isActive = isActive;
+        },
+        getIsActive: function() {
+            return attributes.isActive;
+        },
         getVector: function () {
+            console.log(attributes.x - attributes.prevX, attributes.y - attributes.prevY, 'lala');
             return {
                 vx: attributes.x - attributes.prevX,
                 vy: attributes.y - attributes.prevY

public/style_boot.css

@@ -63,6 +63,7 @@ body {
     width: 30px;
     height: 30px;
     z-index: 99999;
+    border:1px solid silver;
 }
 
 .racket0 {
@@ -130,6 +131,7 @@ body {
     left: 100px;
     background: url(images/ball.png) no-repeat;
     z-index: 2;
+    border:1px solid red;
 }
 
 #map{

server.js

@@ -42,7 +42,7 @@ setInterval(function () {
             'vy': newVector.vy
         });
     }
-}, 10);
+}, 1);
 
 // Routing
 app.use(express.static(__dirname + '/public'));