added basic map drawing

added tmxloader [wip]
added disconnect listener

1 files changed, 110 insertions, 8 deletions

diff --git a/client/index.html b/client/index.html
index 5d4e72b..fcd82b7 100644
--- a/client/index.html
+++ b/client/index.html
@@ -3,11 +3,27 @@
   <meta charset="UTF-8">
 
   <!-- Login -->
-  <div id="signDiv">
+  <div id="signDiv" style='text-align:center;'>
     Username: <input id="signDiv-username" type="text"></input><br>
     Password: <input id="signDiv-password" type="password"></input><br>
     <button id="signDiv-signIn">Sign In</button>
     <button id="signDiv-signUp">Sign Up</button>
+
+    <hr>
+    <div>
+      <h3 style='color:red;'>Dev-Note:</h3>
+      ThePixelWorld requires to load some huge map files, in case u have trouble:<br>
+      Firefox dev tools network inspector truncates responses to 1MB by default.<br>
+      You can change or disable the limit by navigating to <b>about:config</b><br>
+      and changing <b>devtools.netmonitor.responseBodyLimit</b>.<br>
+      To disable the limit, set it to <b>0</b>.
+      <hr>
+      <h3>News:</h3>
+      I have some trouble while parsing tmx maps.<br>
+      currently we are using just a sprite file as "map" :D<br>
+      <h3>ToDo</h3>
+      to much, and to lazy to write it down *blush*
+    </div>
   </div>
 
   <!-- Game -->
@@ -21,9 +37,18 @@
 
    <!-- loading socket.io library -->
   <script src="https://cdn.socket.io/4.1.3/socket.io.js"></script>
+  <script src="client/consts.js"></script>
+  <script src="client/tmxloader.js"></script>
 
   <script>
-    var socket = io();    
+    var socket = io();
+    var errno = 0;
+
+    socket.on('disconnect', function(){
+      errno = CONNECTION_LOST;
+      alert("Connection lost..." + err);
+    });
+
     // Login
     var signDiv = document.getElementById("signDiv");
     var signDivUsername = document.getElementById("signDiv-username");
@@ -74,8 +99,21 @@
           socket.emit("sendMsgToServer", chatInput.value);
         chatInput.value = "";
     }
-  
+
+    var TMXMap = function(mapId){
+      var self = new TMXLoader(mapId);
+      return self;
+    };
+
     // Game
+    var Img = {};
+    Img.player = new Image();
+    Img.player.src = '/client/assets/sprites/races/human-female.png';
+    Img.bullet = new Image();
+    Img.bullet.src = '/client/assets/sprites/blaze.png';
+    Img.map = new Image();
+    Img.map.src = '/client/assets/sprites/races/human-female.png';
+
     var ctx = document.getElementById("ctx").getContext("2d");
     ctx.font = '30px Arial';
 
@@ -85,6 +123,30 @@
       self.number = initPack.number;
       self.x = initPack.x;
       self.y = initPack.y;
+      self.map = initPack.map;
+      self.hp = initPack.hp;
+      self.hpMax = initPack.hpMax;
+      self.score = initPack.score;
+
+      self.draw = function(){
+        var x = self.x - Player.list[selfId].x + WIDTH/2;
+        var y = self.y - Player.list[selfId].y + HEIGHT/2;
+
+        var hpWidth = 30 * self.hp / self.hpMax;
+        // hp-bar
+        ctx.fillStyle="rgba(255,0,0,0.8)";
+        ctx.fillRect(x - hpWidth/2, y - 40, hpWidth, 4);
+        // 'player'
+        var width = 64;
+        var height = 64;
+
+        ctx.drawImage(Img.player,
+          0,0,
+          width, height,
+          x-width/2, y-height/2, 
+          width, height);
+      }
+
       Player.list[self.id] = self;
       return self;
     };
@@ -97,6 +159,22 @@
       self.number = initPack.number;
       self.x = initPack.x;
       self.y = initPack.y;
+      self.map = initPack.map;
+
+      self.draw = function(){
+        var width = Img.bullet.width;
+        var height = Img.bullet.height;
+
+        var x = self.x - Player.list[selfId].x + WIDTH/2;
+        var y = self.y - Player.list[selfId].y + HEIGHT/2;
+
+        ctx.drawImage(Img.bullet,
+          0,0,
+          width, height,
+          x-width/2, y-height/2, 
+          width, height);
+      }
+
       Bullet.list[self.id] = self;
       return self;
     };
@@ -104,13 +182,19 @@
     Bullet.list = {};
     
     // init (all)
+    var selfId = null;
     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++){
         new Bullet(data.bullet[i]);
       }
+      if(data.selfId){
+        selfId = data.selfId;
+        new TMXMap(Player.list[selfId].map);
+      }
     });
     // update (diff)
     socket.on('update', function(data){
@@ -122,6 +206,10 @@
             p.x = pack.x;
           if(pack.y !== undefined)
             p.y = pack.y;
+          if(pack.hp !== undefined)
+            p.hp = pack.hp;
+          if(pack.score !== undefined)
+            p.score = pack.score;
         }
       }
       for(var i = 0; i < data.bullet.length; i++){
@@ -136,7 +224,7 @@
       }
     });
 
-    // remove (del by id)
+    // remove
     socket.on('remove', function(data){
       for(var i = 0; i < data.player.length; i++){
         delete Player.list[data.player[i]];
@@ -147,17 +235,31 @@
     });
 
     setInterval(function(){
+      if(!selfId)
+        return;
       ctx.clearRect(0,0,500,500);
+
+      drawMap();
+      //drawScore();
       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);
+        Player.list[i].draw();
       }
       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);
+        Bullet.list[i].draw();
       }
     }, 1000/25);
 
+    var drawMap = function(){
+      var x = WIDTH/2 - Player.list[selfId].x;
+      var y= HEIGHT/2 - Player.list[selfId].y;
+      ctx.drawImage(Img.map,x,y);
+    }
+
+    var drawScore = function(){
+      ctx.fillStyle = 'green';
+      ctx.fillText(Player.list[selfId].score, 0, 30);
+    }
+
     document.onkeydown = function(event){
       //console.log(event.keyCode);
       if(event.keyCode === 68 || event.keyCode === 39) // d