From ea1805809860b4a934c4a175d9005967d1d08c0f Mon Sep 17 00:00:00 2001
From: Simon G <simongiesel@gmail.com>
Date: Sat, 21 Jan 2017 19:23:47 +0100
Subject: [PATCH] Cleaned code

---
 index.html | 142 +++++++++++++++++++++++------------------------------
 index.js   |  25 ++++------
 2 files changed, 71 insertions(+), 96 deletions(-)

diff --git a/index.html b/index.html
index dc44f1a..23aedd6 100644
--- a/index.html
+++ b/index.html
@@ -15,8 +15,52 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     <script src="/socket.io/socket.io.js"></script>
     <script>
+      /** Initialize Canvas **/
+      var c = document.getElementById("test");
+      var ctx = c.getContext("2d");
+      c.width = $(window).width();
+      c.height = $(window).height();
+
+      /** FPS Vars **/
+      var lastCalledTime,
+          lastFPSshown,
+          fps;
+
+      /** Global Configuration **/
+      var localcoop = false, // Local Coop in 1 window CURRENTLY BORKEN [WONTFIX]
+          width = $(window).width(),
+          height = $(window).height();
+
+      /** Prop-Config **/
+      var cube_width = 50,
+          cube_height = 200,
+          cube_speed = 7,
+          ball_size = 15,
+          ball_speed = 8,
+          ballX = cube_width+ball_size,
+          ballY = cube_height/2,
+          ball_owner = 1,
+          ball_VX = 0,
+          ball_VY = 0,
+          ball_maxAngle = 5*Math.PI/12;
+
+      /** Game Variables **/
+      var pid,
+          leftY = 0,
+          rightY = 0,
+          leftV = 0,
+          rightV = 0,
+          leftColor = 'red',
+          rightColor = 'blue',
+          score = [0,0],
+          gameState = 0; // 0 == Waiting for Players, 1 == Countdown, 2 == inGame, 3 == ??Win??
+
+      /** Initalize Socketio **/
       var socket = io();
-      var pid;
+
+      /** ############## **/
+      /** SERVER EVENTS **/
+      /** ############# **/
       socket.on('handshake', function(id, state, c_width, c_height, sp, score, fn){
         $('id').text(id);
         pid = id;
@@ -40,38 +84,16 @@
         gameState = state;
       });
 
-      socket.on('scoreChange', function(val){
+      socket.on('score', function(val){
         score = val;
       });
 
-// Obsolete
-      // socket.on('shootball', function(y){
-      //   if(ball_owner == 1) leftY = y;
-      //   if(ball_owner == 2) rightY = y;
-      //   shootBall();
-      // });
-
-      /** Make Countdown serversided No cheating possible **/
+      /** Serversided Countdown to prevent desync **/
       socket.on('countdown', function(i){
         text = 'Starting in ' + i;
       });
 
-      socket.on('start', function(){
-        leftOr = 'none';
-        rightOr = 'none';
-        leftY = 0;
-        rightY = 0;
-        leftV = 0;
-        rightV = 0;
-        ballX = cube_width+ball_size;
-        ballY = cube_height/2;
-        ball_owner = 1;
-        ball_VX = 0;
-        ball_VY = 0;
-        gameState = 2;
-      });
-
-      socket.on('changeV', function(pos, val, y){
+      socket.on('paddlepos', function(pos, val, y){
         if(pos == 1){
           leftV = val;
           leftY = y;
@@ -92,48 +114,15 @@
         ball_owner = data['owner'];
       });
 
-      socket.on('test', function(arg){
-        (arg);
+      /** Print text in local console **/
+      socket.on('debug', function(arg){
+        console.log(arg);
       });
-      /** Initialize Canvas **/
-      var c = document.getElementById("test");
-      var ctx = c.getContext("2d");
-      c.width = $(window).width();
-      c.height = $(window).height();
-
-      var leftY = 0;
-      var rightY = 0;
-      var leftV = 0;
-      var rightV = 0;
-      var leftColor = 'red';
-      var rightColor = 'blue';
-      var gameState = 0; // 0 == Waiting for Players, 1 == Countdown, 2 == inGame, 3 == ??Win??
-      var score = [0,0];
-
-      /** FPS Vars **/
-      var lastCalledTime,
-          lastFPSshown,
-          fps;
-
-      /** Global Configuration **/
-      var localcoop = false, // Local Coop in 1 window
-          width = $(window).width(),
-          height = $(window).height();
-
-      /** Prop-Config **/
-      var cube_width = 50,
-          cube_height = 200,
-          cube_speed = 7,
-          ball_size = 15,
-          ball_speed = 8,
-          ballX = cube_width+ball_size,
-          ballY = cube_height/2,
-          ball_owner = 1,
-          ball_VX = 0,
-          ball_VY = 0,
-          ball_maxAngle = 5*Math.PI/12;
 
 
+      /** ############ **/
+      /** DEBUG TOOLS **/
+      /** ########### **/
       /** Meassure Ping and show **/
       setInterval(function(){
         var connTime = Date.now();
@@ -166,7 +155,7 @@
           lastFPSshown = Date.now();
           $('fps').text(Math.round(fps));
 
-          /** Use this timer for displaying loading indicator **/
+          /** Use this timer to display loading indicator **/
           if(gameState == 0)
             switch(texti){
               case 0: text = nativtext; texti++; break;
@@ -176,14 +165,14 @@
             }
           }
 
-
+        /** ############## **/
+        /** CLIENT RENDER **/
+        /** ############# **/
         /** Clear Drawing-Region **/
         ctx.fillStyle = 'white';
         ctx.fillRect(0, 0, width, height);
 
 
-
-
         /** Points **/
         var scoretxt = score[0] + ' : ' + score[1];
         ctx.fillStyle = 'black';
@@ -221,6 +210,8 @@
         ctx.fillStyle = rightColor;
         ctx.fillRect(width-cube_width, rightY, cube_width, cube_height);
 
+
+        // NOTE Physics moved to Server
         // /** Move Ball with Paddle if owned by owner (@roundstart) **/
         // if(ball_owner == 1){
         //   ballX = cube_width+ball_size,
@@ -269,7 +260,6 @@
         //   }
         // }
         //
-        // /** TODO INCREASE SPEED ON PADDLE HIT (weiter außen = schneller) **/
         //
         // /** Collide with walls **/
         // if(ballY <= 0 || ballY >= height-ball_size){
@@ -331,16 +321,7 @@
         if(localcoop){
           switch(e.keyCode) {
             case 38 :
-            case 40 :
-//TODO (maybe) add Smooth stopping to Paddles
-            // case 40 : var i = 100;
-            //           var interval = setInterval(function(){
-            //             i--;
-            //             leftV = i/100*(0,002-i/100);
-            //             if(i == 0) clearInterval(interval);
-            //           }, Math.round((1*delta)*60)*10);
-            setV(1, 0);
-             break;
+            case 40 : setV(1, 0); break;
             case 87 :
             case 83 : setV(2, 0); break;
           }
@@ -380,6 +361,7 @@
       }
 
       function shootBall() {
+        // NOTE moved to Server
         // console.log('### Ball shoot event ###');
         // /** TODO Tewak and Add MAX_Speed **/
         // if(ball_owner == 1){
diff --git a/index.js b/index.js
index 3d90b4d..3592279 100644
--- a/index.js
+++ b/index.js
@@ -23,7 +23,6 @@ var cube_width = 50,
 /** Networking-Config **/
 var tickrate = 20;
 
-
 /** Ball-Config **/
 var ball_size = 15,
     ball_speed = 15,
@@ -66,10 +65,6 @@ if(gameState > 0) socket.emit('size', width, height);
   /** Ballshoot **/
   /** ######### **/
   socket.on('ballshoot', function(y){
-    // shottball event obsolet
-    // socket.emit('shootball', y);
-    // socket.broadcast.emit('shootball', y);
-
     console.log('### Ball shoot event ###');
     if(ball_owner == 1){
       ball_VX = ball_speed;
@@ -114,8 +109,8 @@ if(gameState > 0) socket.emit('size', width, height);
     // console.log('Diff:' + diff);
     // console.log('Got: ' + y + ' @ ' + timestamp);
     // console.log('Expected:' + players[pos-1].y + ' @ ' + Date.now());
-    socket.emit('changeV', pos, val, players[pos-1].y);
-    socket.broadcast.emit('changeV', pos, val, players[pos-1].y);
+    // socket.emit('changeV', pos, val, players[pos-1].y);
+    // socket.broadcast.emit('changeV', pos, val, players[pos-1].y);
   });
 
   /** ########## **/
@@ -133,7 +128,7 @@ if(gameState > 0) socket.emit('size', width, height);
     clients.splice(index, 1);
     console.log('Client disconnected. ID=' + (oldid+1));
     if(clients.length == 1){
-      clients[0].socket.emit('test', 'player_left'); //TODO win-event
+      clients[0].socket.emit('debug', 'player_left'); //TODO win-event
       console.log('Only one Player left. Sending win-event');
       // Debug Restart:
       gameState = 0;
@@ -204,8 +199,8 @@ function setUp(socket){
       clearInterval(startinterval);
       gameState = 2;
       broadcastGameState(socket);
-      socket.emit('start');
-      socket.broadcast.emit('start');
+      socket.emit('gamestate');
+      socket.broadcast.emit('gamestate');
     }
   }, 1000);
 }
@@ -229,8 +224,8 @@ function calculatePlayerPosition(){
     if(player.y > height-player.height || player.y < 0) player.vY = 0;
     if(player.y < 0) player.y = 0;
     if(player.y > height-player.height) player.y = height-player.height;
-    player.socket.emit('changeV', player.id, player.vY, player.y);
-    player.socket.broadcast.emit('changeV', player.id, player.vY, player.y);
+    player.socket.emit('paddlepos', player.id, player.vY, player.y);
+    player.socket.broadcast.emit('paddlepos', player.id, player.vY, player.y);
   });
 }
 
@@ -289,8 +284,6 @@ function calculateBallPosition(){
     }
   }
 
-  /** TODO INCREASE SPEED ON PADDLE HIT (weiter außen = schneller) **/
-
   /** Collide with walls **/
   if(ballY <= 0 || ballY >= height-ball_size){
     ball_VY = -ball_VY;
@@ -311,8 +304,8 @@ function calculateBallPosition(){
 
 function changeScore(id, val){
   score[id-1] = val;
-  players[0].socket.emit('scoreChange', score);
-  players[0].socket.broadcast.emit('scoreChange', score);
+  players[0].socket.emit('score', score);
+  players[0].socket.broadcast.emit('score', score);
 }
 
 function resetPlayers(){