clissionsaf avg adsaksg

Ball.js

@@ -5,14 +5,24 @@
 module.exports = function() {
 
     var attributes = {
-        x: 100,
-        y: 100,
+        x: 500,
+        y: 300,
         z: 0,// :)
-        vx: -1.5 + Math.random()*3,
-        vy: 5 * Math.random()*1.5,
+        vx: 0,
+        vy: 0,
         speed: 10,
         width: 20,
-        height: 20
+        height: 20,
+        defaults:{
+            team0:{
+                x:350,
+                y:350
+            },
+            team1:{
+                x:700,
+                y:350
+            }
+        }
     };
 
     return {
@@ -42,6 +52,15 @@ module.exports = function() {
         calculateNewAxis: function(){
             attributes.x += attributes.vx;
             attributes.y += attributes.vy;
+        },
+        reset: function( scoredTeam ){
+            this.setVectors(0,0);
+            if(scoredTeam){
+                this.setAxis(attributes.defaults.team0.x,attributes.defaults.team0.y);
+            }else{
+                this.setAxis(attributes.defaults.team1.x,attributes.defaults.team1.y);
+            }
+
         }
     }
 }

Collision.js

 
-module.exports = function(Playground, Ball) {
+module.exports = function(Playground, Ball, Score) {
 
     var attributes = {
         'ball': Ball,
-        'playground': Playground
+        'playground': Playground,
+        'score': Score
     };
 
     return {
@@ -53,6 +54,7 @@ module.exports = function(Playground, Ball) {
                 ballAxis.x = 0;
             }
 
+
             //console.log(ballVectors.vx, ballVectors.vy);
             attributes.ball.setAxis(ballAxis.x, ballAxis.y);
             attributes.ball.setVectors(ballVectors.vx, ballVectors.vy);

PlayersCollection.js

@@ -19,10 +19,13 @@ module.exports = function() {
         },
         addPlayer: function(player){
             this.increaseCount();
-            _internalIndex++;
+
             player.setId( _internalIndex );
             player.setTeam(_internalIndex % 2);
             _players[player.getId()] = player;
+            _internalIndex++;
+            console.log(player.getTeam());
+
         },
         getPlayerById: function(id){
             return _players[id];
@@ -39,24 +42,6 @@ module.exports = function() {
                 nextId++;
             }
             return nextId;
-        },
-        stringify: function(){
-            var strUser = {};
-            for (var key in _players) {
-                var obj = _players[key];
-                for (var prop in obj) {
-                    // important check that this is objects own property
-                    // not from prototype prop inherited
-                    if(obj.hasOwnProperty(prop)){
-                        strUser[prop] = obj.stringify()
-                    }
-                }
-            }
-
-            return JSON.stringify({
-                '_players': strUser,
-                '_countPlayers': _countPlayers
-            })
         }
     };
 }
\ No newline at end of file

Score.js

+/**
+ * Score
+ * @returns {{increaseScoreTeam0: Function, increaseScoreTeam1: Function}}
+ */
+module.exports = function(Ball, playgroundDimension){
+
+    var attributes = {
+        'team0': 0,
+        'team1': 0,
+        'ball': Ball,
+        'playgroundDimension': playgroundDimension
+    };
+
+    return {
+        increaseScoreTeam0: function(){
+            attributes.team0++;
+        },
+        increaseScoreTeam1: function(){
+            attributes.team1++;
+        },
+        getScore: function(){
+            return {
+               team0: attributes.team0,
+               team1: attributes.team1
+            };
+        },
+        collision: function(){
+            var ballAxis = attributes.ball.getAxis();
+            if((ballAxis.x - 10) > attributes.playgroundDimension.w){
+                this.increaseScoreTeam1();
+                attributes.ball.reset(0);
+                return true;
+            }
+
+            if((ballAxis.x - 10) < 0){
+                this.increaseScoreTeam0();
+                attributes.ball.reset(1);
+                return true;
+            }
+
+            return false;
+        }
+    }
+}

public/ClientCollision.js

@@ -6,11 +6,10 @@
  * @constructor
  */
 
-function ClientCollision(Playground, Ball, Racket, User) {
+function ClientCollision(Ball, Racket, User) {
 
     var attributes = {
         'ball': Ball,
-        'playground': Playground,
         'racket': Racket,
         'user': User
     };
@@ -38,21 +37,20 @@ function ClientCollision(Playground, Ball, Racket, User) {
         collision: function () {
             var ballAxis = attributes.ball.getAxis();
             var ballVectors = attributes.ball.getVectors();
-
-            var playgroundDimension = attributes.playground.getDimension();
             var racketVector = attributes.racket.getVector();
-
             var racketAxis = attributes.racket.getAxis();
             var racketDimension = attributes.racket.getDimension();
             /**
              * Racket collision
              */
-            if (attributes.user.getIsTurn()
-                &&
+            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
             ) {
+                console.log('collision ball with racket');
                 var BD = racketAxis, // bod dotyku (poz. lopticky)
                     vR = racketVector, //vektor rakety
                     vL = ballVectors; // vektor lopticky
@@ -60,44 +58,15 @@ function ClientCollision(Playground, Ball, Racket, User) {
                 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);
-                //}
 
                 attributes.user.setIsTurn(false);
                 return true;
             }
 
-            if (ballAxis.y > playgroundDimension.h) {
-                ballVectors.vy = -ballVectors.vy;
-                ballAxis.y = playgroundDimension.h;
-            }
-            else if (ballAxis.y < 0) {
-                ballVectors.vy = -ballVectors.vy;
-                ballAxis.y = 0;
-            }
-
-            // If ball strikes the vertical walls, invert the
-            // x-velocity vector of ball
-            if (ballAxis.x > playgroundDimension.w) {
-                ballVectors.vx = -ballVectors.vx;
-                ballAxis.x = playgroundDimension.w;
-            }
-
-            else if (ballAxis.x < 0) {
-                ballVectors.vx = -ballVectors.vx;
-                ballAxis.x = 0;
-            }
-
-            //console.log(ballVectors.vx, ballVectors.vy);
-            attributes.ball.setAxis(ballAxis.x, ballAxis.y);
             attributes.ball.setVectors(ballVectors.vx, ballVectors.vy);
 
             return false;

public/ClientMain.js

@@ -29,7 +29,7 @@ $(function () {
     var clientPlayground = new ClientPlayground( $("#playground"));
     clientPlayground.init();
 
-    var collision = new ClientCollision( clientPlayground, ball, racket, user);
+    var collision = new ClientCollision( ball, racket, user);
     ball.create();
 
     user.setLoginCallback(function () {
@@ -66,36 +66,33 @@ $(function () {
         }
 
         racket.setAxis(event.pageX - $playground.offset().left,event.pageY - $playground.offset().top);
-        drawRacket(d)
+
+
+        drawRacket(d);
         socket.emit('move racket', d);
+
+        if(collision.collision()){
+            var ballVector = ball.getVectors();
+            socket.emit('change ball vector', {vx:ballVector.vx, vy:ballVector.vy});
+        };
     });
 
     // Whenever the server emits 'login', log the login message
     socket.on('login', function (data) {
-        connected = true;
         log.add("Joined: " + data.numUsers);
         log.add("Your name: " + data.username);
-        user.setId(data.id);
-        if(data.id == 1){
-            user.setIsTurn(true);
+        console.log(data);
+
+        if(!connected){
+            user.setId(data.id);
+            if(data.id == 1){
+                user.setIsTurn(true);
+            }
+            racket.setEl($('div.racket' + data.id));
+            connected = true;
         }
-        racket.setEl($('div.racket' + data.id));
-
-        //function animloop() {
-        //    init = requestAnimFrame(animloop);
-        //
-        //    if(user.getIsTurn()){
-        //        if(collision.collision()){
-        //            socket.emit('how played', {userId:  data.id});
-        //        }
-        //    }
-        //
-        //}
-        //
-        //animloop();
-    });
-
 
+    });
 
     socket.on('who is turn', function (data) {
         //console.log(data);
@@ -103,9 +100,13 @@ $(function () {
             user.setIsTurn( true );
         }
     })
+    socket.on('change score', function (data) {
+        score.updateScore(data);
+    })
 
     socket.on('ball position', function (data) {
         ball.setAxis(data.x, data.y);
+        ball.setVectors(data.vx, data.vy);
         ball.redraw();
     })
 
@@ -117,6 +118,7 @@ $(function () {
         log.add(data.username + ' joined');
         log.add(data.username + ' is team ' + data.team);
         user.setTeam(data.team);
+        console.log(data);
     });
 
     // Whenever the server emits 'user left', log it in the chat body

public/ClientScore.js

@@ -8,15 +8,9 @@ function ClientScore(el){
     };
 
     return {
-        increaseScoreTeam0: function(){
-            attributes.team0++;
-            this.updateScore()
-        },
-        increaseScoreTeam1: function(){
-            attributes.team1++;
-            this.updateScore();
-        },
-        updateScore: function(){
+        updateScore: function(data){
+            attributes.team0 = data.team0;
+            attributes.team1 = data.team1;
             attributes.$el.find('team0').text( attributes.team0 );
             attributes.$el.find('team1').text( attributes.team1 );
         }

public/client.js

+$(function () {
+
+    // Initialize varibles
+    var $window = $(window);
+
+    var $usernameInput = $('.usernameInput'); // Input for username
+    var $messages = $('.messages'); // Messages area
+    var $inputMessage = $('.inputMessage'); // Input message input box
+
+    var $loginPage = $('.login.page'); // The login page
+    var $chatPage = $('.chat.page'); // The chatroom page
+
+    // Prompt for setting a username
+    var user = {};
+    var connected = false;
+
+    var socket = io();
+
+    function addParticipantsMessage(data) {
+        log("Joined:" + data.numUsers);
+    }
+
+    // Log a message
+    function log(message, options) {
+        var $el = $('<li>').addClass('log').text(message);
+        addMessageElement($el, options);
+    }
+
+    // Sets the client's username
+    function setUsername() {
+        username = cleanInput($usernameInput.val().trim());
+
+        // If the username is valid
+        if (username) {
+            $loginPage.fadeOut();
+            $chatPage.show();
+            $loginPage.off('click');
+
+            // Tell the server your username
+            socket.emit('add user', username);
+        }
+    }
+
+    // Adds a message element to the messages and scrolls to the bottom
+    // el - The element to add as a message
+    // options.fade - If the element should fade-in (default = true)
+    // options.prepend - If the element should prepend
+    //   all other messages (default = false)
+    function addMessageElement (el, options) {
+        $messages.append($(el));
+    }
+
+    // Prevents input from having injected markup
+    function cleanInput(input) {
+        return $('<div/>').text(input).text();
+    }
+    // Keyboard events
+    $window.keydown(function (event) {
+        // When the client hits ENTER on their keyboard
+        if (event.which === 13) {
+            setUsername();
+        }
+    });
+
+    $(document).mousemove(function(event){
+        var d = {
+            id:user.id,
+            x:event.pageX,
+            y:event.pageY
+        };
+        drawRacket(d)
+        socket.emit('move racket', d);
+    });
+
+    // Whenever the server emits 'login', log the login message
+    socket.on('login', function (data) {
+        connected = true;
+
+        user = JSON.parse(data.user);
+
+        // Display the welcome message
+        var message = "Welcome to PiPo – Multiplayer awesome ping pong!!!";
+        log(message, {
+            prepend: true
+        });
+        addParticipantsMessage(data);
+    });
+
+
+    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(data.username + ' joined');
+        addParticipantsMessage(data);
+    });
+
+    // Whenever the server emits 'user left', log it in the chat body
+    socket.on('user left', function (data) {
+        log(data.username + ' left');
+        addParticipantsMessage(data);
+    });
+
+    function drawRacket(data){
+        $('div.racket' + data.id).css({ left:data.x + 20, top: data.y + 20});
+    }
+
+
+    $('.disconnectBtn').click(function(){
+        socket.emit('disconnectUser', user);
+        $chatPage.fadeOut();
+        $loginPage.show();
+    });
+
+});

public/index.html

@@ -43,6 +43,7 @@
             <div id="playground">
                 <div id="table"></div>
                 <div class="rackets">
+                    <div class="racket racket0"></div>
                     <div class="racket racket1"></div>
                     <div class="racket racket2"></div>
                     <div class="racket racket3"></div>

public/style_boot.css

@@ -65,6 +65,10 @@ body {
     z-index: 99999;
 }
 
+.racket0 {
+    background: url(images/azure.png) no-repeat;
+}
+
 .racket1 {
     background: url(images/racket.png) no-repeat;
 }

server.js

@@ -9,27 +9,52 @@ var Player = require('./Player.js');
 var PlayersCollection = require('./PlayersCollection.js')();
 var racket = require('./Racket.js');
 var ball = require('./Ball.js')();
-var collision = require('./Collision.js')({h:776,w:968}, ball);
+
+var playgroundDimmesion = {h: 776, w: 968};
+
+var score = require('./Score.js')(ball, playgroundDimmesion);
+
+var collision = require('./Collision.js')(playgroundDimmesion, ball);
 
 server.listen(port, function () {
     console.log('Server listening at port %d', port);
 });
 
+var isIntervalInit = false;
+var newAxis = {};
 
-
-// Routing
-app.use(express.static(__dirname + '/public'));
-
-io.on('connection', function (socket) {
-    setInterval(function(){
+setInterval(function () {
+    if (isIntervalInit) {
         collision.collision();