optimized packet handling

1 files changed, 83 insertions, 16 deletions

diff --git a/client/index.html b/client/index.html
index 666c078..4404a4a 100644
--- a/client/index.html
+++ b/client/index.html
@@ -27,6 +27,7 @@
     // Login
     var signDiv = document.getElementById("signDiv");
     var signDivUsername = document.getElementById("signDiv-username");
+    var signDivUsername = document.getElementById("signDiv-username");
     var signDivPassword = document.getElementById("signDiv-password");
     var signDivSignIn = document.getElementById("signDiv-signIn");
     var signDivSignUp = document.getElementById("signDiv-signUp");
@@ -66,31 +67,97 @@
       console.log(data);
     });
     
+    chatForm.onsubmit = function(e){
+        e.preventDefault();
+        if (chatInput.value[0] === "/")
+          socket.emit("evalServer", chatInput.value.slice(1));
+        else
+          socket.emit("sendMsgToServer", chatInput.value);
+        chatInput.value = "";
+    }
+  
     // Game
     var ctx = document.getElementById("ctx").getContext("2d");
     ctx.font = '30px Arial';
 
-    socket.on('newPositions', function(data){
-      ctx.clearRect(0,0,500,500);
-      for(var i =0; i < data.player.length; i++){
-        ctx.fillStyle="rgba(55,55,55,0.8)";
-        ctx.fillText(''+ data.player[i].number,data.player[i].x, data.player[i].y);
+    var Player = function(initPack){
+      var self = {};
+      self.id = initPack.id;
+      self.number = initPack.number;
+      self.x = initPack.x;
+      self.y = initPack.y;
+      Player.list[self.id] = self;
+      return self;
+    };
+
+    Player.list = {};
+    
+    var Bullet = function(initPack){
+      var self = {};
+      self.id = initPack.id;
+      self.number = initPack.number;
+      self.x = initPack.x;
+      self.y = initPack.y;
+      Bullet.list[self.id] = self;
+      return self;
+    };
+
+    Bullet.list = {};
+    
+    // init (all)
+    socket.on('init', function(data){
+      for(var i = 0; i < data.player.length; i++){
+        new Player(data.player[i]);
       }
-      for(var i =0; i < data.bullet.length; i++){
-        ctx.fillStyle="rgba(55,55,55,0.8)";
-        ctx.fillRect(data.bullet[i].x-5, data.bullet[i].y-5, 10, 10);
+      for(var i = 0; i < data.bullet.length; i++){
+        new Bullet(data.bullet[i]);
+      }
+    });
+    // update (diff)
+    socket.on('update', function(data){
+      for(var i = 0; i < data.player.length; i++){
+        var pack = data.player[i];
+        var p = Player.list[pack.id];
+        if(p){
+          if(pack.x !== undefined)
+            p.x = pack.x;
+          if(pack.y !== undefined)
+            p.y = pack.y;
+        }
+      }
+      for(var i = 0; i < data.bullet.length; i++){
+        var pack = data.bullet[i];
+        var b = Bullet.list[pack.id];
+        if(b){
+          if(pack.x !== undefined)
+            b.x = pack.x;
+          if(pack.y !== undefined)
+            b.y = pack.y;
+        }
       }
     });
 
+    // remove (del by id)
+    socket.on('remove', function(data){
+      for(var i = 0; i < data.player.length; i++){
+        delete Player.list[data.player[i]];
+      }
+      for(var i = 0; i < data.bullet.length; i++){
+        delete Bullet.list[data.bullet[i]];
+      }
+    });
 
-    chatForm.onsubmit = function(e){
-        e.preventDefault();
-        if (chatInput.value[0] === "/")
-          socket.emit("evalServer", chatInput.value.slice(1));
-        else
-          socket.emit("sendMsgToServer", chatInput.value);
-        chatInput.value = "";
-    }
+    setInterval(function(){
+      ctx.clearRect(0,0,500,500);
+      for(var i in Player.list){
+        ctx.fillStyle="rgba(55,55,55,0.8)";
+        ctx.fillText(''+ Player.list[i].number,Player.list[i].x, Player.list[i].y);
+      }
+      for(var i in Bullet.list){
+        ctx.fillStyle="rgba(55,55,55,0.8)";
+        ctx.fillRect(Bullet.list[i].x-5, Bullet.list[i].y-5, 10, 10);
+      }
+    }, 1000/25);
 
     document.onkeydown = function(event){
       //console.log(event.keyCode);