added gameover

Score.js

@@ -24,6 +24,18 @@ module.exports = function(Ball, playgroundDimension){
                team1: attributes.team1
             };
         },
+        getSumScore: function() {
+            return attributes.team0 + attributes.team1;
+        },
+        getWinTeam: function() {
+            if(attributes.team0 > attributes.team1){
+                return 'Team 0';
+            } else if (attributes.team1 > attributes.team0){
+                return 'Team 1';
+            } else {
+                return "Draw";
+            }
+        },
         collision: function(){
             var ballAxis = attributes.ball.getAxis();
             //console.log(ballAxis,attributes.playgroundDimension.w);

WhoIsOnServe.js

@@ -52,8 +52,7 @@ module.exports = function (PlayersColliction, Score) {
         },
 
         getWhoIsOnServe: function () {
-            var sumScoreTeams = _score.getScore();
-            var sumScore = sumScoreTeams.team0 + sumScoreTeams.team1;
+            var sumScore = _score.getSumScore();
             if(sumScore % 2 == 0){
                 if (_whichTeam) {
                     _whichTeam = 0;

public/ClientMain.js

@@ -111,6 +111,13 @@ $(function () {
             user.setIsTurn( false );
         }
     })
+
+    socket.on('game over', function (data) {
+        $(".container").hide();
+        $("#gameover").show();
+        $("#gameover #winteam").html(data.winTeam);
+    })
+
     socket.on('change score', function (data) {
         score.updateScore(data.score);
         //console.log(data, 'serve');

public/index.html

@@ -39,7 +39,6 @@
         </nav>
 
         <div class="container">
-
             <div id="playground">
                 <div id="table"></div>
                 <div class="rackets">
@@ -53,6 +52,13 @@
         </div>
     </div>
 
+    <div class="login-page" id="gameover">
+        <div class="form">
+            <h3 class="title">Game over</h3>
+            <h3 class="title" id="winteam"></h3>
+        </div>
+    </div>
+
     <div class="login-page">
         <div class="form">
             <h3 class="title">What's your nickname?</h3>

public/style_boot.css

@@ -141,4 +141,8 @@ line {
     z-index: 9999;
     stroke:rgb(1,1,1);
     stroke-width:3;
+}
+
+#gameover{
+    display: none;
 }
\ No newline at end of file

server.js

@@ -32,6 +32,11 @@ setInterval(function () {
         ball.calculateNewAxis();
 
         if(score.collision()){
+            if(score.getSumScore() >= 11) {
+                io.emit('game over', {
+                    winTeam: score.getWinTeam()
+                });
+            }
             io.emit('change score', {
                 'score': score.getScore(),
                 'userId': whoIsOnServe.getWhoIsOnServe()