From 101454ef1a20bea1a961a1aaa0ec77e0d5369e97 Mon Sep 17 00:00:00 2001
From: jak1 <jak1@themanaworld.org>
Date: Fri, 13 Jan 2023 14:55:04 +0100
Subject: changed a lot formating seperated Utils & Commands

---
 app.js                    | 300 +--------------
 client/consts.js          |   7 +-
 client/index.html         | 938 +++++++++++++++++++++++++---------------------
 client/tmxloader.js       | 122 +++---
 server/Entities/Bullet.js |  43 ++-
 server/Entities/Entity.js |  20 +-
 server/Entities/Player.js | 127 ++++---
 7 files changed, 698 insertions(+), 859 deletions(-)

diff --git a/app.js b/app.js
index d677d3e..fbf081d 100644
--- a/app.js
+++ b/app.js
@@ -17,6 +17,8 @@ console.log("Server started.");
 var SOCKET_LIST = {};
 const servermsg = "Server: ";
 
+const Commands = require('./server/Commands')
+const Utils = require('./server/Utils')
 const Entity = require('./server/Entities/Entity')
 const Player = require('./server/Entities/Player')
 const Bullet = require('./server/Entities/Bullet')
@@ -46,21 +48,6 @@ var addUser = function(data, cb){
     });
 }
 
-var updateGMLevel = function(username, lvl, cb){
-    db.account.update({username:username},{$set:{gmlvl:lvl}},function(err){
-        cb();
-    });
-}
-
-var hasPermission = function(username, req, cb){
-    db.account.find({username:username},function(err,res){
-        if (res[0].gmlvl >= req)
-            cb(true);
-        else
-            cb(false);
-    });
-}
-
 var io = require('socket.io')(serv, {});
 io.sockets.on('connection', function(socket){
     socket.id = Math.random();
@@ -96,238 +83,16 @@ io.sockets.on('connection', function(socket){
     socket.on('sendMsgToServer', function(data){
         if (data)
             for (var i in SOCKET_LIST){
-                SOCKET_LIST[i].emit('addToChat', {ctimestamp: getTimeStamp(0), content: socket.playerName + ': ' + escapeHTML(chatEmote(data)), tab: "world"});
+                SOCKET_LIST[i].emit('addToChat', {ctimestamp: Utils.getTimeStamp(0), content: socket.playerName + ': ' + Utils.escapeHTML(Utils.chatEmote(data)), tab: "world"});
             }
     });
 
     socket.on('command', function(data){
-        modifyer = data[0];
-        command = data.slice(1).split(' ');
-
-        //staff cmd
-        if(modifyer === '@'){
-            hasPermission(socket.playerName, 1, function(res){
-                if (res)
-                    switch (command[0].toLowerCase()) {
-                        // @bc (args: <message>)
-                        case "bc":
-                        case "broadcast":
-                            res = joinArgs(command, 1, 0);
-                            for (var i in SOCKET_LIST){
-                                SOCKET_LIST[i].emit('addToChat', {ctimestamp: getTimeStamp(0), content: "<font color='red' weight='bold'>GlobalAnnounce: " + escapeHTML(res) + "</font>", tab: "world"});
-                            }
-                            break;
-                        
-                        // @lbc (args: <message>)
-                        case "lbc":
-                        case "localbroadcast":
-                            res = joinArgs(command, 1, 0);
-                            for (var i in Player.Player.list){
-                                if (Player.Player.list[i].map == Player.Player.list[socket.id].map)
-                                    SOCKET_LIST[i].emit('addToChat', {ctimestamp: getTimeStamp(0), content: "<font color='red' weight='bold'>GlobalAnnounce: " + escapeHTML(res) + "</font>", tab: "world"});
-                            }
-                            break;
-
-                        // @who (args: none)
-                        case "who":
-                            res = servermsg;
-                            for (var i in Player.Player.list){
-                                res+=Player.Player.list[i].playerName + ", ";
-                            }
-                            socket.emit('addToChat', {ctimestamp: getTimeStamp(0), content: res, tab:"any"});
-                            break;
-
-                        // @where (args:[playername])
-                        case "where":
-                            found = false;
-                            if(command.length <= 1)
-                                command[1] = socket.playerName;
-                            for (var i in Player.Player.list){
-                                if (Player.Player.list[i].playerName.includes(command[1])){
-                                    socket.emit('addToChat', {ctimestamp: getTimeStamp(0), content: servermsg + Player.Player.list[i].playerName + ": " + Player.Player.list[i].map + " [" +  Player.Player.list[i].x + ", " + Player.Player.list[i].y + "]",tab: "any"});
-                                    found = true;
-                                }
-                            }
-                            if (!found)
-                                socket.emit('addToChat', {ctimestamp: getTimeStamp(0), content: servermsg + "Player not found", tab: "any"});                
-                            break;
-
-                        // @goto (args:<playername>)
-                        case "goto":
-                            found = false;
-                            if(command.length <= 1)
-                                command[1] = socket.playerName;
-                            for (var i in Player.Player.list){
-                                if (Player.Player.list[i].playerName.includes(command[1])){
-                                    Player.Player.list[socket.id].map = Player.Player.list[i].map;
-                                    Player.Player.list[socket.id].x = Player.Player.list[i].x;
-                                    Player.Player.list[socket.id].y = Player.Player.list[i].y;
-                                    socket.emit('addToChat', {ctimestamp: getTimeStamp(0), content: servermsg + "Warped to " + Player.Player.list[i].playerName, tab: "any"});
-                                    found = true;
-                                    break;
-                                }
-                            }
-                            if (!found)
-                                socket.emit('addToChat', {ctimestamp: getTimeStamp(0), content: servermsg + "Player not found", tab:"any"});                
-                            break;
-
-                        // @recall (args:<playername>)
-                        case "recall":
-                            found = false;
-                            if(command.length <= 1)
-                                command[1] = socket.playerName;
-                            for (var i in Player.Player.list){
-                                if (Player.Player.list[i].playerName.includes(command[1])){
-                                    Player.Player.list[i].map = Player.Player.list[socket.id].map;
-                                    Player.Player.list[i].x = Player.Player.list[socket.id].x;
-                                    Player.Player.list[i].y = Player.Player.list[socket.id].y;
-                                    socket.emit('addToChat', {ctimestamp: getTimeStamp(0), content: servermsg + "Recalled " + Player.Player.list[i].playerName + " to you.", tab: "any"});
-                                    SOCKET_LIST[Player.Player.list[i].id].emit('addToChat', {ctimestamp: getTimeStamp(0), content: servermsg + "You were Recalled from " + socket.playerName, tab: "any"});
-                                    found = true;
-                                    break;
-                                }
-                            }
-                            if (!found)
-                                socket.emit('addToChat', {ctimestamp: getTimeStamp(0), content: servermsg + "Player not found", tab: "any"});                
-                            break;
-                        
-                        // @warp/@tele/@teleport (args:[map] [<x> <y>])
-                        case "warp":
-                        case "tele":
-                        case "teleport":
-                            hasPermission(socket.playerName, 60, function(res)
-                            {
-                                if(res)
-                                {
-                                    if(command.length < 2 || command.length > 4){
-                                        socket.emit('addToChat', {ctimestamp: getTimeStamp(0), content: servermsg + escapeHTML("Wrong syntax: @warp [map] [<x> <y>]"), tab: "any"});
-                                        return;
-                                    }
-                                    else if(command.length == 2){
-                                        Player.Player.list[socket.id].map = command[1];
-                                        var new_x = Math.random()*500; // TODO: map size?!
-                                        var new_y = Math.random()*500;
-                                        Player.Player.list[socket.id].x = new_x;
-                                        Player.Player.list[socket.id].y = new_y;
-                                        socket.emit('addToChat', {ctimestamp: getTimeStamp(0), content: servermsg + "Warped to map:" + command[1] + " x:" + new_x + " y:" + new_y, tab: "any"});
-                                    }
-                                    else if(command.length == 3){ // only cords
-                                        // TODO: check if map exists
-                                        Player.Player.list[socket.id].x = parseInt(command[1]);
-                                        Player.Player.list[socket.id].y = parseInt(command[2]);
-                                        socket.emit('addToChat', {ctimestamp: getTimeStamp(0), content: servermsg + "Warped to x:" + command[1] + " y:" + command[2], tab: "any"});
-                                    }
-                                    else if(command.length == 4){ // map x y
-                                        // TODO: check if map exists
-                                        Player.Player.list[socket.id].map = command[1];
-                                        Player.Player.list[socket.id].x = parseInt(command[2]);
-                                        Player.Player.list[socket.id].y = parseInt(command[3]);
-                                        socket.emit('addToChat', {ctimestamp: getTimeStamp(0), content: servermsg + "Warped to map:" + command[1] + " x:" + command[2] + " y:" + command[3], tab: "any"});
-                                    }
-                                }
-                                else
-                                {
-                                    socket.emit('addToChat', {ctimestamp: getTimeStamp(0), content: servermsg + "you dont have permission to use this command!", tab: "any"});
-                                }
-                            });
-                            break;
-
-                        // @hide
-                        case "hide":
-                            hasPermission(socket.playerName, 60, function(res){
-                            if (res){
-                                Player.Player.list[socket.id].ignorePlayerAttack = ! Player.Player.list[socket.id].ignorePlayerAttack;
-                                if (Player.Player.list[socket.id].ignorePlayerAttack)
-                                    socket.emit('addToChat', {ctimestamp: getTimeStamp(0), content: servermsg + "You are now immune to player and monster attacks", tab:"any"});
-                                else
-                                    socket.emit('addToChat', {ctimestamp: getTimeStamp(0), content: servermsg + "You are no longer immune to player and monster attacks", tab:"any"});
-                            }
-                            else
-                                socket.emit('addToChat', {ctimestamp: getTimeStamp(0), content: servermsg + "you dont have permission to use this command!", tab: "any"});
-                            });
-                            break;
-
-                        // @setgm (args:<playername> <lvl>)
-                        case "setgm":
-                            hasPermission(socket.playerName, 99, function(res){
-                                if (res)
-                                    updateGMLevel(command[1],parseInt(command[2]), function(){
-                                        socket.emit('addToChat', {ctimestamp: getTimeStamp(0), content: servermsg + "GM level set.", tab:"any"});
-                                    });
-                                else
-                                    socket.emit('addToChat', {ctimestamp: getTimeStamp(0), content: servermsg + "you dont have permission to use this command!", tab: "any"});
-                            });
-                            break;    
-                        default:
-                            socket.emit('addToChat', {ctimestamp: getTimeStamp(0), content: servermsg + "Command not found.", tab: "any"});
-                            break;
-                    }
-                    else{
-                        socket.emit('addToChat', {ctimestamp: getTimeStamp(0), content: servermsg + "you dont have permission to use this command!", tab: "any"});
-                    }
-                });
-        }
-
-        // player cmd
-        else if(modifyer === '/'){
-            switch (command[0]) {
-                // /who (args: none)
-                case "who":
-                    socket.emit('addToChat', {ctimestamp: getTimeStamp(0), content: servermsg + Object.keys(Player.Player.list).length + " Player" + ((Object.keys(Player.Player.list).length > 1)? "s" : "") + " Online.", tab: "any"});
-                    break;
-                 
-                // /where (args: none)
-                case "where":
-                    socket.emit('addToChat', {ctimestamp: getTimeStamp(0), content: servermsg + Player.Player.list[socket.id].playerName + ": " + 
-                        Player.Player.list[socket.id].map + " [" +  Player.Player.list[socket.id].x + ", " + Player.Player.list[socket.id].y + "]", tab: "any"});
-       
-                    break;
-
-                // /whisper (args: <playername> <message>)
-                case "w":
-                case "whisper":
-                case "tell":
-                case "msg":
-                    found = false;
-                    
-                    for (var i in Player.Player.list){
-                        if (Player.Player.list[i].playerName == command[1]){
-                            res = escapeHTML(joinArgs(command, 2, 0));
-                            socket.emit('addToChat', {ctimestamp: getTimeStamp(0), content: socket.playerName + ": " + res, tab: Player.Player.list[i].playerName});
-                            SOCKET_LIST[Player.Player.list[i].id].emit('addToChat', {ctimestamp: getTimeStamp(0), content: socket.playerName + ": " + res, tab: socket.playerName});
-                            found = true;
-                            break;
-                        }
-                    }
-                    if (!found)
-                        socket.emit('addToChat', {ctimestamp: getTimeStamp(0), content: servermsg + "Player not found", tab: "any"});
-                    break;
-    
-                default:
-                    socket.emit('addToChat', {ctimestamp: getTimeStamp(0), content: servermsg + "Command not found.", tab: "any"});
-                    break;
-            }
-        }
-        
-        // guild commands
-        else if(modifyer === '#'){
-
-        }
-        // party commands
-        else if(modifyer === '.'){
-
-        }
-        // help commands
-        else if(modifyer === '?'){
-            // ?
-        }
-        else{
-            // this should never happen...
-        }
+        Commands.dispatch(data, socket, SOCKET_LIST, servermsg, db, Player);
     });
 
     socket.on('evalServer', function(data){
-        hasPermission(socket.playerName, 80, function(res){
+        Utils.hasPermission(db, socket.playerName, 80, function(res){
             if (res)
                 socket.emit('evalAnswer', eval(data));
             else
@@ -355,58 +120,3 @@ setInterval(function(){
     Entity.removePack.bullet = [];
 
 }, 1000/25);
-
-//removes (number)remArgsBefore and (number)remArgsAfter from argument array/list
-joinArgs = function(argsList, remArgsBefore, remArgsAfter){
-    var res = "";
-    for(var i = 0; i<argsList.length; i++){
-        if(i < remArgsBefore)
-            continue;
-        if(argsList.length - i <= remArgsAfter)
-            continue;
-        res +=argsList[i] + " ";
-    }
-    return res;
-}
-
-// gets the current (weird formated) timestamp
-getTimeStamp = function(){
-    var date_ob = new Date();
-    day = addLeadingZero(date_ob.getDate());
-    month = addLeadingZero(date_ob.getMonth());
-    year = date_ob.getFullYear();
-    hours = addLeadingZero(date_ob.getHours());
-    minutes = addLeadingZero(date_ob.getMinutes());
-    seconds = addLeadingZero(date_ob.getSeconds());
-
-    return (year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds);
-}
-
-// formats number (n) to 2-digit
-addLeadingZero = function(n){
-    if (n <= 9)
-        return "0"+n;
-    return n;
-}
-
-escapeHTML = function(unsafe) {
-    return unsafe
-         .replace(/&/g, "&amp;")
-         .replace(/</g, "&lt;")
-         .replace(/>/g, "&gt;")
-         .replace(/"/g, "&quot;")
-         .replace(/'/g, "&#039;");
- }
-
-chatEmote = function(msg) {
-    return msg.replace(":D", "😀")
-    .replace("O:)", "😇")
-    .replace("0:)", "😇")
-    .replace(":)", "🙂")
-    .replace(":(", "🙁")
-    .replace(":o", "😮")
-    .replace(":O", "😲")
-    .replace(":'(", "😢")
-    .replace(":')", "🥲")
-    .replace(":P", "😛");
-}
diff --git a/client/consts.js b/client/consts.js
index b7df81d..c64aff5 100644
--- a/client/consts.js
+++ b/client/consts.js
@@ -1,7 +1,6 @@
 // game settings
-const WIDTH     = 500;
-const HEIGHT    = 500;
-
+const WIDTH = 500;
+const HEIGHT = 500;
 
 // error codes
-const CONNECTION_LOST = 10001;
\ No newline at end of file
+const CONNECTION_LOST = 10001;
diff --git a/client/index.html b/client/index.html
index c961d93..24403e3 100644
--- a/client/index.html
+++ b/client/index.html
@@ -1,480 +1,546 @@
 <!DOCTYPE html>
 <html lang="en_US" style='background-color:#858590;'>
-  <meta charset="UTF-8">
-  <title>ThePixelWorld</title>
-  <!-- Login -->
-  <style type="text/css">
-    .chat-tab{
-      margin-left: 2px; 
-      margin-right: 2px;
-      padding-left: 3px; 
-      padding-right: 3px;
-      float: left; 
-      color: #858590; 
-      background-color: #555555;
-      border-radius: 4px;
-    }
-    #active{
-      color: lime;
-    }
-  </style>
-  <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>
-
+<meta charset="UTF-8">
+<title>ThePixelWorld</title>
+<!-- Login -->
+<style type="text/css">
+  .chat-tab {
+    margin-left: 2px;
+    margin-right: 2px;
+    padding-left: 3px;
+    padding-right: 3px;
+    float: left;
+    color: #858590;
+    background-color: #555555;
+    border-radius: 4px;
+  }
+
+  #active {
+    color: lime;
+  }
+
+</style>
+<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>
-    <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>
-      tmx maps loading and rendering nearly done, beside collision system.<br>
-      basic chat system (guild/party/... wip) {may also implement an api for irc usage?}<br>
-      every player has a name drawn above there head now.<br>
-      <h3>ToDo</h3>
-      to much, and to lazy to write it down *blush*
-    </div>
+    <h3>News:</h3>
+    tmx maps loading and rendering nearly done, beside collision system.<br>
+    basic chat system (guild/party/... wip) {may also implement an api for irc usage?}<br>
+    every player has a name drawn above there head now.<br>
+    <h3>ToDo</h3>
+    to much, and to lazy to write it down *blush*
   </div>
-
-  <!-- Game -->
-  <div id="gameDiv" style="display:none;">
-    <div id="game">
-      <canvas id="ctx" width="500" height="500" tabindex="1" style="position:absolute; border:1px solid #000000;"></canvas>
-      <div id="ui" tabindex="2" style="position:absolute; width:502px; height:502px; display:none;">
-        <div id="ui-statusbar" style="position:absolute; border:1px solid #000000; top:50px; left:0px; width:450px; height: 40px;">
+</div>
+
+<!-- Game -->
+<div id="gameDiv" style="display:none;">
+  <div id="game">
+    <canvas id="ctx" width="500" height="500" tabindex="1"
+      style="position:absolute; border:1px solid #000000;"></canvas>
+    <div id="ui" tabindex="2" style="position:absolute; width:502px; height:502px; display:none;">
+      <div id="ui-statusbar"
+        style="position:absolute; border:1px solid #000000; top:50px; left:0px; width:450px; height: 40px;">
         Status Bar
-        </div>
-        <div id="ui-navigation" style="position:absolute; border:1px solid #000000; top:0px; left:0px; width:450px; height: 40px;">
+      </div>
+      <div id="ui-navigation"
+        style="position:absolute; border:1px solid #000000; top:0px; left:0px; width:450px; height: 40px;">
         Navigation Bar
-        </div>
-        <div id="ui-menu" style="position:absolute; border:1px solid #000000; top:0px; right:0px; width:40px; height: 40px;">
+      </div>
+      <div id="ui-menu"
+        style="position:absolute; border:1px solid #000000; top:0px; right:0px; width:40px; height: 40px;">
         Menu
-        </div>
-        <div id="ui-shortcuts" style="position:absolute; border:1px solid #000000; bottom:0px; right:0px; height:450px; width: 40px;">
+      </div>
+      <div id="ui-shortcuts"
+        style="position:absolute; border:1px solid #000000; bottom:0px; right:0px; height:450px; width: 40px;">
         Shortcut Bar
-        </div>
-        <div id="ui-hook" style="position:absolute; border:1px solid #000000; bottom:210px; left:0px; width:240px; height: 190px;">
+      </div>
+      <div id="ui-hook"
+        style="position:absolute; border:1px solid #000000; bottom:210px; left:0px; width:240px; height: 190px;">
         Storage/NPC(HOOKS)
-        </div>
-        <div id="ui-inventory" style="position:absolute; border:1px solid #000000; bottom:0px; left:0px; width:240px; height: 200px;">
+      </div>
+      <div id="ui-inventory"
+        style="position:absolute; border:1px solid #000000; bottom:0px; left:0px; width:240px; height: 200px;">
         Inventory
-        </div>
-        <div id="ui-equip" style="position:absolute; border:1px solid #000000; bottom:0px; left:250px; width:100px; height: 200px;">
+      </div>
+      <div id="ui-equip"
+        style="position:absolute; border:1px solid #000000; bottom:0px; left:250px; width:100px; height: 200px;">
         Equip
-        </div>
-        <div id="ui-spells-quests" style="position:absolute; border:1px solid #000000; bottom:210px; left:250px; width:100px; height: 190px;">
+      </div>
+      <div id="ui-spells-quests"
+        style="position:absolute; border:1px solid #000000; bottom:210px; left:250px; width:100px; height: 190px;">
         Spells/<br>Quests
-        </div>
-        <div id="ui-undefined" style="position:absolute; border:1px solid #000000; bottom:0px; left:360px; width:90px; height: 400px;">
+      </div>
+      <div id="ui-undefined"
+        style="position:absolute; border:1px solid #000000; bottom:0px; left:360px; width:90px; height: 400px;">
         ???
-        </div>
       </div>
     </div>
-    <div id="chat" style="margin-top:520px;">
-      <div id="chat-wrapper" style="width:500px; height:20px; overflow: hidden; white-space: nowrap;">
-          <div class="chat-tab" id='active' onclick="setActiveChatTab('world', this)" >WORLD</div>
-          <!-- TODO only show up on permission to use the GM tab. 
+  </div>
+  <div id="chat" style="margin-top:520px;">
+    <div id="chat-wrapper" style="width:500px; height:20px; overflow: hidden; white-space: nowrap;">
+      <div class="chat-tab" id='active' onclick="setActiveChatTab('world', this)">WORLD</div>
+      <!-- TODO only show up on permission to use the GM tab. 
           <div class="chat-tab" onclick="setActiveChatTab('gm', this)"> GM</div> -->
-          <div class="chat-tab" onclick="setActiveChatTab('guild', this)">[#] Guild (WIP)</div>
-          <div class="chat-tab" onclick="setActiveChatTab('party', this)">[.] Party (WIP)</div>
-        </div>
-        <div id="chat-text" style="width:500px; height:100px; overflow-y:scroll;"></div>
-        <form id="chat-form">
-          <input id="chat-input" type="text" style="width:500px;"></input>
-        </form>
-      </div>
+      <div class="chat-tab" onclick="setActiveChatTab('guild', this)">[#] Guild (WIP)</div>
+      <div class="chat-tab" onclick="setActiveChatTab('party', this)">[.] Party (WIP)</div>
     </div>
-  </div> 
-
-   <!-- loading socket.io library -->
-  <script src="https://cdn.socket.io/4.2.0/socket.io.js"></script>
-  <script src="client/consts.js"></script>
-  <script src="client/tmxloader.js"></script>
-
-  <script>
-    var socket = io();
-    var errno = 0;
-    
-    socket.on('disconnect', function(){
-      errno = CONNECTION_LOST;
-      alert("Connection lost..." + errno);
-    });
-
-    // Login
-    var signDiv = document.getElementById("signDiv");
-    var signDivUsername = document.getElementById("signDiv-username");
-    var signDivPassword = document.getElementById("signDiv-password");
-    var signDivSignIn = document.getElementById("signDiv-signIn");
-    var signDivSignUp = document.getElementById("signDiv-signUp");
-
-    signDivSignIn.onclick = function(){
-      socket.emit('signIn', {username:signDivUsername.value, password:signDivPassword.value})
-    }
-
-    signDivSignUp.onclick = function(){
-      socket.emit('signUp', {username:signDivUsername.value, password:signDivPassword.value})
+    <div id="chat-text" style="width:500px; height:100px; overflow-y:scroll;"></div>
+    <form id="chat-form">
+      <input id="chat-input" type="text" style="width:500px;"></input>
+    </form>
+  </div>
+</div>
+</div>
+
+<!-- loading socket.io library -->
+<script src="https://cdn.socket.io/4.2.0/socket.io.js"></script>
+<script src="client/consts.js"></script>
+<script src="client/tmxloader.js"></script>
+
+<script>
+  var socket = io();
+  var errno = 0;
+
+  socket.on('disconnect', function ()
+  {
+    errno = CONNECTION_LOST;
+    alert("Connection lost..." + errno);
+  });
+
+  // Login
+  var signDiv = document.getElementById("signDiv");
+  var signDivUsername = document.getElementById("signDiv-username");
+  var signDivPassword = document.getElementById("signDiv-password");
+  var signDivSignIn = document.getElementById("signDiv-signIn");
+  var signDivSignUp = document.getElementById("signDiv-signUp");
+
+  signDivSignIn.onclick = function ()
+  {
+    socket.emit('signIn', { username: signDivUsername.value, password: signDivPassword.value })
+  }
+
+  signDivSignUp.onclick = function ()
+  {
+    socket.emit('signUp', { username: signDivUsername.value, password: signDivPassword.value })
+  }
+  socket.on('signInResponse', function (data)
+  {
+    if (data.success)
+    {
+      signDiv.style.display = 'none';
+      gameDiv.style.display = 'inline-block';
     }
-    socket.on('signInResponse', function(data){
-      if(data.success){
-        signDiv.style.display = 'none';
-        gameDiv.style.display = 'inline-block';
-      } 
-      else
-        alert("Sign in unsuccessful.");
-    });
-    socket.on('signUpResponse', function(data){
-      if(data.success){
-        alert("Sign up successful.");
-      } 
-      else
-        alert("Sign up unsuccessful.");
-    });
-
-    // Chat
-    var activeChatTab = "world"; // default tab on join.
-    var chatContents = [];
-    chatContents[activeChatTab] = "";
-
-    var chatText = document.getElementById("chat-text");
-    var chatInput = document.getElementById("chat-input");
-    var chatForm = document.getElementById("chat-form");
-
-    socket.on('addToChat', function(data){
-      if(data.tab === "any")
-        data.tab = activeChatTab;
-      if (chatContents[data.tab] === undefined)
-        document.getElementById("chat-wrapper").innerHTML += "<div class=\"chat-tab\" onclick=\"setActiveChatTab('" + data.tab + "', this)\">" + data.tab + "</div>";
-
-      if(!chatContents[data.tab])
-        chatContents[data.tab] = "<div title=\"" + data.ctimestamp + "\">" + data.content + "</div>"
-      else
-        chatContents[data.tab] += "<div title=\"" + data.ctimestamp + "\">" + data.content + "</div>"
-      
-      if (activeChatTab === data.tab){
-        chatText.innerHTML = chatContents[activeChatTab];
-        //scroll down
-        chatText.scrollTop = chatText.scrollHeight;
-        }
-    });
-    socket.on('evalAnswer', function(data){
-      console.log(data);
-    });
-    
-    chatForm.onsubmit = function(e){
-        e.preventDefault();
-        if (chatInput.value[0] === "*")
-          socket.emit("evalServer", chatInput.value.slice(1));
-        else if (chatInput.value[0] === "@" || chatInput.value[0] === "/"
-          || chatInput.value[0] === "." || chatInput.value[0] === "#")
-          socket.emit("command", chatInput.value);
-        else if(activeChatTab !== "world")
-          socket.emit("command", "/w " + activeChatTab + " " + chatInput.value);
-        else
-          socket.emit("sendMsgToServer", chatInput.value);
-        chatInput.value = "";
+    else
+      alert("Sign in unsuccessful.");
+  });
+  socket.on('signUpResponse', function (data)
+  {
+    if (data.success)
+    {
+      alert("Sign up successful.");
     }
-
-    // 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';
-
-    var ctx = document.getElementById("ctx").getContext("2d");
-    ctx.font = '16px Arial';
-
-    var Player = function(initPack){
-      var self = {};
-      self.id = initPack.id;
-      self.playerName = initPack.playerName;
-      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.dir = initPack.dir;
-      self.shift = false;
-      self.sit = false;
-      self.inInventory = false;
-      self.ignorePlayerAttack = initPack.ignorePlayerAttacky;
-
-      self.drawPlayer = function(){
-        var x = self.x - Player.list[selfId].x + WIDTH/2;
-        var y = self.y - Player.list[selfId].y + HEIGHT/2;
-
-        // 'player'
-        var width = 64;
-        var height = 64;
-        if (self.sit){
-          finalWidth = width * self.dir;
-          finalHeight = height * 4;
-        } else {
-          finalWidth = 0;
-          finalHeight = height * self.dir;
-        }
-        ctx.drawImage(Img.player,
-          finalWidth /* base sprite */, finalHeight,
-          width, height,
-          x-width/2, y-height/2, 
-          width, height);
-      }
-      self.drawPlayerName = 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);
-        ctx.fillStyle="rgba(75,75,75,0.8)";
-        var metrics = ctx.measureText(Player.list[self.id].playerName);
-        ctx.fillText(Player.list[self.id].playerName,
-          x - metrics.width/2, y - 45, metrics.width, 4);
-      }
-      
-      Player.list[self.id] = self;
-      return self;
-    };
-
-    Player.list = {};
-    tmxmap=null;
-    
-    var Bullet = function(initPack){
-      var self = {};
-      self.id = initPack.id;
-      self.x = initPack.x;
-      self.y = initPack.y;
-      self.map = initPack.map;
-      self.dir = initPack.dir;
-
-      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;
-    };
-
-    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;
-        tmxmap = new TMXLoader(Player.list[selfId].map);
-      }
-    });
-    // 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;
-          if(pack.hp !== undefined)
-            p.hp = pack.hp;
-          if(pack.score !== undefined)
-            p.score = pack.score;
-          if(pack.dir !== undefined)
-            p.dir = pack.dir;
-          if(pack.playerName !== undefined)
-            p.playerName = pack.playerName;
-          if(pack.sit !== undefined)
-            p.sit = pack.sit;
-          if (pack.inInventory !== undefined)
-            p.inInventory = pack.inInventory;
-          if (pack.ignorePlayerAttack != undefined)
-            p.ignorePlayerAttack = pack.ignorePlayerAttack;
-        }
-      }
-      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;
-          if(pack.dir !== undefined)
-            b.dir = pack.dir;
-        }
-      }
-    });
-
-    // remove
-    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]];
-      }
-    });
-    
-    setActiveChatTab = function(tabName, tab){
-      if (!chatContents[tabName])
-        chatContents[tabName] = "";
-      activeChatTab = tabName;
+    else
+      alert("Sign up unsuccessful.");
+  });
+
+  // Chat
+  var activeChatTab = "world"; // default tab on join.
+  var chatContents = [];
+  chatContents[activeChatTab] = "";
+
+  var chatText = document.getElementById("chat-text");
+  var chatInput = document.getElementById("chat-input");
+  var chatForm = document.getElementById("chat-form");
+
+  socket.on('addToChat', function (data)
+  {
+    if (data.tab === "any")
+      data.tab = activeChatTab;
+    if (chatContents[data.tab] === undefined)
+      document.getElementById("chat-wrapper").innerHTML += "<div class=\"chat-tab\" onclick=\"setActiveChatTab('" + data.tab + "', this)\">" + data.tab + "</div>";
+
+    if (!chatContents[data.tab])
+      chatContents[data.tab] = "<div title=\"" + data.ctimestamp + "\">" + data.content + "</div>"
+    else
+      chatContents[data.tab] += "<div title=\"" + data.ctimestamp + "\">" + data.content + "</div>"
+
+    if (activeChatTab === data.tab)
+    {
       chatText.innerHTML = chatContents[activeChatTab];
-      Array.from(document.getElementsByClassName("chat-tab")).forEach(function(element, index, array) {
-       element.setAttribute("id", "");
-      })
-      tab.setAttribute("id", "active");
+      //scroll down
       chatText.scrollTop = chatText.scrollHeight;
     }
-    
-    setInterval(function(){
-      if(!selfId || errno != 0)
-        return;
-      ctx.clearRect(0,0,500,500);
-      drawMapGround();
-      drawGFXGround();
-      drawEntities();
-      drawMapOver();
-      drawPlayerNames();
-      drawGFXOver();
-      drawInventory();
-      //drawScore();
-    }, 1000/25);
-
-    var drawMapGround = function(){
-      var x = WIDTH/2 - Player.list[selfId].x;
-      var y = HEIGHT/2 - Player.list[selfId].y;
-
-      tmxmap.drawLayer("ground",x,y);
+  });
+  socket.on('evalAnswer', function (data)
+  {
+    console.log(data);
+  });
+
+  chatForm.onsubmit = function (e)
+  {
+    e.preventDefault();
+    if (chatInput.value[0] === "*")
+      socket.emit("evalServer", chatInput.value.slice(1));
+    else if (chatInput.value[0] === "@" || chatInput.value[0] === "/"
+      || chatInput.value[0] === "." || chatInput.value[0] === "#")
+      socket.emit("command", chatInput.value);
+    else if (activeChatTab !== "world")
+      socket.emit("command", "/w " + activeChatTab + " " + chatInput.value);
+    else
+      socket.emit("sendMsgToServer", chatInput.value);
+    chatInput.value = "";
+  }
+
+  // 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';
+
+  var ctx = document.getElementById("ctx").getContext("2d");
+  ctx.font = '16px Arial';
+
+  var Player = function (initPack)
+  {
+    var self = {};
+    self.id = initPack.id;
+    self.playerName = initPack.playerName;
+    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.dir = initPack.dir;
+    self.shift = false;
+    self.sit = false;
+    self.inInventory = false;
+    self.ignorePlayerAttack = initPack.ignorePlayerAttacky;
+
+    self.drawPlayer = function ()
+    {
+      var x = self.x - Player.list[selfId].x + WIDTH / 2;
+      var y = self.y - Player.list[selfId].y + HEIGHT / 2;
+
+      // 'player'
+      var width = 64;
+      var height = 64;
+      if (self.sit)
+      {
+        finalWidth = width * self.dir;
+        finalHeight = height * 4;
+      } else
+      {
+        finalWidth = 0;
+        finalHeight = height * self.dir;
+      }
+      ctx.drawImage(Img.player,
+        finalWidth /* base sprite */, finalHeight,
+        width, height,
+        x - width / 2, y - height / 2,
+        width, height);
+    }
+    self.drawPlayerName = 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);
+      ctx.fillStyle = "rgba(75,75,75,0.8)";
+      var metrics = ctx.measureText(Player.list[self.id].playerName);
+      ctx.fillText(Player.list[self.id].playerName,
+        x - metrics.width / 2, y - 45, metrics.width, 4);
     }
 
-    var drawPlayerNames = function(){
-      for(var i in Player.list){
-        Player.list[i].drawPlayerName();
-      }
+    Player.list[self.id] = self;
+    return self;
+  };
+
+  Player.list = {};
+  tmxmap = null;
+
+  var Bullet = function (initPack)
+  {
+    var self = {};
+    self.id = initPack.id;
+    self.x = initPack.x;
+    self.y = initPack.y;
+    self.map = initPack.map;
+    self.dir = initPack.dir;
+
+    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);
     }
 
-    var drawGFXGround = function(){
+    Bullet.list[self.id] = self;
+    return self;
+  };
 
-    }
+  Bullet.list = {};
 
-    var drawEntities = function(){
-      for(var i in Player.list){
-        Player.list[i].drawPlayer();
+  // 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;
+      tmxmap = new TMXLoader(Player.list[selfId].map);
+    }
+  });
+  // 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;
+        if (pack.hp !== undefined)
+          p.hp = pack.hp;
+        if (pack.score !== undefined)
+          p.score = pack.score;
+        if (pack.dir !== undefined)
+          p.dir = pack.dir;
+        if (pack.playerName !== undefined)
+          p.playerName = pack.playerName;
+        if (pack.sit !== undefined)
+          p.sit = pack.sit;
+        if (pack.inInventory !== undefined)
+          p.inInventory = pack.inInventory;
+        if (pack.ignorePlayerAttack != undefined)
+          p.ignorePlayerAttack = pack.ignorePlayerAttack;
       }
-      for(var i in Bullet.list){
-        Bullet.list[i].draw();
+    }
+    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;
+        if (pack.dir !== undefined)
+          b.dir = pack.dir;
       }
     }
-
-    var drawMapOver = function(){
-      var x = WIDTH/2 - Player.list[selfId].x;
-      var y = HEIGHT/2 - Player.list[selfId].y;
-      tmxmap.drawLayer("fringe",x,y); // needs to get rendered on last pos.
-      tmxmap.drawLayer("over",x,y);
+  });
+
+  // remove
+  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]];
+    }
+  });
+
+  setActiveChatTab = function (tabName, tab)
+  {
+    if (!chatContents[tabName])
+      chatContents[tabName] = "";
+    activeChatTab = tabName;
+    chatText.innerHTML = chatContents[activeChatTab];
+    Array.from(document.getElementsByClassName("chat-tab")).forEach(function (element, index, array)
+    {
+      element.setAttribute("id", "");
+    })
+    tab.setAttribute("id", "active");
+    chatText.scrollTop = chatText.scrollHeight;
+  }
+
+  setInterval(function ()
+  {
+    if (!selfId || errno != 0)
+      return;
+    ctx.clearRect(0, 0, 500, 500);
+    drawMapGround();
+    drawGFXGround();
+    drawEntities();
+    drawMapOver();
+    drawPlayerNames();
+    drawGFXOver();
+    drawInventory();
+    //drawScore();
+  }, 1000 / 25);
+
+  var drawMapGround = function ()
+  {
+    var x = WIDTH / 2 - Player.list[selfId].x;
+    var y = HEIGHT / 2 - Player.list[selfId].y;
+
+    tmxmap.drawLayer(ctx, "ground", x, y);
+  }
+
+  var drawPlayerNames = function ()
+  {
+    for (var i in Player.list)
+    {
+      Player.list[i].drawPlayerName();
+    }
+  }
 
-    var drawGFXOver = function(){
+  var drawGFXGround = function ()
+  {
 
-    }
+  }
 
-    var drawInventory = function(){
-      if(Player.list[selfId].inInventory) {
-        ui.style.display = 'inline-block';
-      }
-      else {
-        ui.style.display = 'none';
-      }
+  var drawEntities = function ()
+  {
+    for (var i in Player.list)
+    {
+      Player.list[i].drawPlayer();
     }
-    // TODO Collision
-
-    var drawScore = function(){
-      ctx.fillStyle = 'green';
-      ctx.fillText(Player.list[selfId].score, 0, 30);
+    for (var i in Bullet.list)
+    {
+      Bullet.list[i].draw();
     }
-
-    document.onkeydown = function(event){
-      //console.log(event.keyCode);
-      if (document.activeElement === document.getElementById('ui') ||
-        document.activeElement === document.getElementById('game') ||
-        document.activeElement === document.getElementById('ctx')){
-        // shift
-        if(event.keyCode === 16)
-          self.shift = true;
-        // inventory (i)
-        if(event.keyCode === 73)
-          socket.emit('keyPress',{inputId: 'inInventory', state: !Player.list[selfId].inInventory, shift: self.shift});
-        // movement
-        if(event.keyCode === 68 || event.keyCode === 39) // d
-          socket.emit('keyPress',{inputId: 'right', state: true, shift: self.shift});
-        else if(event.keyCode === 65 || event.keyCode === 37) // a
-          socket.emit('keyPress',{inputId: 'left', state: true, shift: self.shift});
-        else if(event.keyCode === 83 || event.keyCode === 40) // s
-          socket.emit('keyPress',{inputId: 'down', state: true, shift: self.shift});
-        else if(event.keyCode === 87 || event.keyCode === 38) // w
-          socket.emit('keyPress',{inputId: 'up', state: true, shift: self.shift});
-        else if(event.keyCode === 88)
-          socket.emit('keyPress',{inputId: 'sit', state: !Player.list[selfId].sit, shift: self.shift});
-      }
+  }
+
+  var drawMapOver = function ()
+  {
+    var x = WIDTH / 2 - Player.list[selfId].x;
+    var y = HEIGHT / 2 - Player.list[selfId].y;
+    tmxmap.drawLayer(ctx, "fringe", x, y); // needs to get rendered on last pos.
+    tmxmap.drawLayer(ctx, "over", x, y);
+  }
+
+  var drawGFXOver = function ()
+  {
+
+  }
+
+  var drawInventory = function ()
+  {
+    if (Player.list[selfId].inInventory)
+    {
+      ui.style.display = 'inline-block';
     }
-
-    document.onkeyup = function(event){
+    else
+    {
+      ui.style.display = 'none';
+    }
+  }
+  // TODO Collision
+
+  var drawScore = function ()
+  {
+    ctx.fillStyle = 'green';
+    ctx.fillText(Player.list[selfId].score, 0, 30);
+  }
+
+  document.onkeydown = function (event)
+  {
+    //console.log(event.keyCode);
+    if (document.activeElement === document.getElementById('ui') ||
+      document.activeElement === document.getElementById('game') ||
+      document.activeElement === document.getElementById('ctx'))
+    {
       // shift
-      if(event.keyCode === 16)
-        self.shift = false;
+      if (event.keyCode === 16)
+        self.shift = true;
+      // inventory (i)
+      if (event.keyCode === 73)
+        socket.emit('keyPress', { inputId: 'inInventory', state: !Player.list[selfId].inInventory, shift: self.shift });
       // movement
-      if(event.keyCode === 68 || event.keyCode === 39) // d
-        socket.emit('keyPress', {inputId: 'right', state: false, shift: self.shift});
-      else if(event.keyCode === 65 || event.keyCode === 37) // a
-        socket.emit('keyPress', {inputId: 'left', state: false, shift: self.shift});
-      else if(event.keyCode === 83 || event.keyCode === 40) // s
-        socket.emit('keyPress', {inputId: 'down', state: false, shift: self.shift});
-      else if(event.keyCode === 87 || event.keyCode === 38) // w
-        socket.emit('keyPress', {inputId: 'up', state: false, shift: self.shift});
+      if (event.keyCode === 68 || event.keyCode === 39) // d
+        socket.emit('keyPress', { inputId: 'right', state: true, shift: self.shift });
+      else if (event.keyCode === 65 || event.keyCode === 37) // a
+        socket.emit('keyPress', { inputId: 'left', state: true, shift: self.shift });
+      else if (event.keyCode === 83 || event.keyCode === 40) // s
+        socket.emit('keyPress', { inputId: 'down', state: true, shift: self.shift });
+      else if (event.keyCode === 87 || event.keyCode === 38) // w
+        socket.emit('keyPress', { inputId: 'up', state: true, shift: self.shift });
+      else if (event.keyCode === 88)
+        socket.emit('keyPress', { inputId: 'sit', state: !Player.list[selfId].sit, shift: self.shift });
     }
+  }
 
-    document.onmousedown = function(event){
-      if (document.activeElement === document.getElementById('ui') ||
-        document.activeElement === document.getElementById('game') ||
-        document.activeElement === document.getElementById('ctx')){
-        socket.emit('keyPress',{inputId: 'attack', state: true});
-      }
-    }
-    
-    document.onmouseup = function(event){
-        socket.emit('keyPress',{inputId: 'attack', state: false});
-    }
-    
-    document.onmousemove = function(event){
-      var x = -250 + event.clientX - 8;
-      var y = -250 + event.clientY - 8;
-      var angle = Math.atan2(y, x) / Math.PI * 180;
-      socket.emit('keyPress',{inputId: 'mouseAngle', state: angle});
+  document.onkeyup = function (event)
+  {
+    // shift
+    if (event.keyCode === 16)
+      self.shift = false;
+    // movement
+    if (event.keyCode === 68 || event.keyCode === 39) // d
+      socket.emit('keyPress', { inputId: 'right', state: false, shift: self.shift });
+    else if (event.keyCode === 65 || event.keyCode === 37) // a
+      socket.emit('keyPress', { inputId: 'left', state: false, shift: self.shift });
+    else if (event.keyCode === 83 || event.keyCode === 40) // s
+      socket.emit('keyPress', { inputId: 'down', state: false, shift: self.shift });
+    else if (event.keyCode === 87 || event.keyCode === 38) // w
+      socket.emit('keyPress', { inputId: 'up', state: false, shift: self.shift });
+  }
+
+  document.onmousedown = function (event)
+  {
+    if (document.activeElement === document.getElementById('ui') ||
+      document.activeElement === document.getElementById('game') ||
+      document.activeElement === document.getElementById('ctx'))
+    {
+      socket.emit('keyPress', { inputId: 'attack', state: true });
     }
+  }
+
+  document.onmouseup = function (event)
+  {
+    socket.emit('keyPress', { inputId: 'attack', state: false });
+  }
+
+  document.onmousemove = function (event)
+  {
+    var x = -250 + event.clientX - 8;
+    var y = -250 + event.clientY - 8;
+    var angle = Math.atan2(y, x) / Math.PI * 180;
+    socket.emit('keyPress', { inputId: 'mouseAngle', state: angle });
+  }
+
+</script>
 
-  </script>
-</html>
\ No newline at end of file
+</html>
diff --git a/client/tmxloader.js b/client/tmxloader.js
index 2b3ff0c..9e61012 100644
--- a/client/tmxloader.js
+++ b/client/tmxloader.js
@@ -1,4 +1,5 @@
-var TMXLoader = function(mapName){
+var TMXLoader = function (mapName)
+{
     var self = {};
 
     self.mapName = mapName;
@@ -46,19 +47,23 @@ var TMXLoader = function(mapName){
     self.xml2 = new XMLHttpRequest();
     self.parser = new DOMParser();
 
-    self.loadMap = function(){
+    self.loadMap = function ()
+    {
         self.xml.open('GET', "/client/assets/maps/" + mapName + ".tmx");
-        self.xml.onload = function(){
-            dom = self.parser.parseFromString(self.xml.response, "text/xml");
+        self.xml.onload = function ()
+        {
+            var dom = self.parser.parseFromString(self.xml.response, "text/xml");
 
             self.map.width = dom.documentElement.getAttribute('width');
             self.map.height = dom.documentElement.getAttribute('height');
 
             // tilesets
-            for (var i=0; i < dom.documentElement.getElementsByTagName('tileset').length; i++){
+            for (var i = 0; i < dom.documentElement.getElementsByTagName('tileset').length; i++)
+            {
                 var tileset = {};
                 tileset.firstGID = parseInt(dom.documentElement.getElementsByTagName('tileset').item(i).getAttribute('firstgid'));
-                if(!dom.documentElement.getElementsByTagName('tileset').item(i).hasAttribute('source')){
+                if (!dom.documentElement.getElementsByTagName('tileset').item(i).hasAttribute('source'))
+                {
                     tileset.source = dom.documentElement.getElementsByTagName('tileset').item(i).getElementsByTagName('image')[0].getAttribute('source').replace("../", "/client/assets/");
                     tileset.width = parseInt(dom.documentElement.getElementsByTagName('tileset').item(i).getElementsByTagName('image')[0].getAttribute('width'));
                     tileset.height = parseInt(dom.documentElement.getElementsByTagName('tileset').item(i).getElementsByTagName('image')[0].getAttribute('height'));
@@ -67,7 +72,8 @@ var TMXLoader = function(mapName){
                     tileset.tileCount = parseInt(dom.documentElement.getElementsByTagName('tileset').item(i).getAttribute('tilecount'));
                     tileset.img = self.addImg(tileset.source);
                     self.map.tilesets[i] = tileset;
-                }else{
+                } else
+                {
                     tileset.isTsx = true;
                     tileset.tsxSource = dom.documentElement.getElementsByTagName('tileset').item(i).getAttribute('source').replace("../", "/client/assets/");
                     self.map.tilesets[i] = tileset;
@@ -76,34 +82,40 @@ var TMXLoader = function(mapName){
             }
 
             // layers
-            for (var i=0; i < dom.documentElement.getElementsByTagName('layer').length; i++){
+            for (var i = 0; i < dom.documentElement.getElementsByTagName('layer').length; i++)
+            {
                 var layer = {};
                 layer.name = dom.documentElement.getElementsByTagName('layer').item(i).getAttribute('name');
                 layer.tilesStr = dom.documentElement.getElementsByTagName('layer').item(i).getElementsByTagName('data')[0].innerHTML;
                 layer.id = parseInt(dom.documentElement.getElementsByTagName('layer').item(i).getAttribute('id'));
-                layer.tiles= [];
+                layer.tiles = [];
                 self.map.layers[i] = layer;
             }
             self.parseLayer();
         }
         self.xml.send();
     }
-    
-    self.addImg = function(source){
+
+    self.addImg = function (source)
+    {
         var TSet = {};
         TSet.new = new Image();
         TSet.new.src = source;
         return TSet.new;
     }
 
-    self.loadTSX = function(){
-        for(var i=0; i < self.map.tilesets.length; i++){
-            
-            if(self.map.tilesets[i].isTsx && self.map.tilesets[i].tsxSource != null){
+    self.loadTSX = function ()
+    {
+        for (var i = 0; i < self.map.tilesets.length; i++)
+        {
+
+            if (self.map.tilesets[i].isTsx && self.map.tilesets[i].tsxSource != null)
+            {
                 self.xml2.open('GET', self.map.tilesets[i].tsxSource);
-                tileset = self.map.tilesets[i];
-                self.xml2.onload = function(){
-                    dom2 = self.parser.parseFromString(self.xml2.response, "text/xml");
+                var tileset = self.map.tilesets[i];
+                self.xml2.onload = function ()
+                {
+                    var dom2 = self.parser.parseFromString(self.xml2.response, "text/xml");
                     tileset.source = "/client/assets/tilesets/" + dom2.documentElement.getElementsByTagName('image')[0].getAttribute('source')
                     tileset.width = parseInt(dom2.documentElement.getElementsByTagName('image')[0].getAttribute('width'));
                     tileset.height = parseInt(dom2.documentElement.getElementsByTagName('image')[0].getAttribute('height'));
@@ -118,58 +130,70 @@ var TMXLoader = function(mapName){
         }
     }
 
-    self.getTileIdAt = function(x, y, layer){
+    self.getTileIdAt = function (x, y, layer)
+    {
         return self.map.layers[layer].tiles[y][x];
     }
 
-    self.parseLayer = function() {
-        for (var i=0; i < self.map.layers.length; i++){
-            for(var mapX = 0; mapX < self.map.height; mapX++){
+    self.parseLayer = function ()
+    {
+        for (var i = 0; i < self.map.layers.length; i++)
+        {
+            for (var mapX = 0; mapX < self.map.height; mapX++)
+            {
                 self.map.layers[i].tiles[mapX] = [];
-                for(var mapY = 0; mapY < self.map.width; mapY++){
-                    tileId = parseInt(self.map.layers[i].tilesStr.replace('\n','').split(',')[mapY * self.map.width + mapX]);
-                    self.map.layers[i].tiles[mapX][mapY] = {id : tileId,
-                    index : mapX * self.map.width + mapY };
+                for (var mapY = 0; mapY < self.map.width; mapY++)
+                {
+                    var tileId = parseInt(self.map.layers[i].tilesStr.replace('\n', '').split(',')[mapY * self.map.width + mapX]);
+                    self.map.layers[i].tiles[mapX][mapY] = {
+                        id: tileId,
+                        index: mapX * self.map.width + mapY
+                    };
                 }
             }
             self.map.layers[i].tilesStr = "";
         }
     }
 
-    self.getCollision = function(direction){
+    self.getCollision = function (direction)
+    {
         // TODO
     }
 
-    self.drawLayer = function(layerName, xOffset, yOffset){
-        for(var layerId=0; layerId < self.map.layers.length; layerId++)
+    self.drawLayer = function (canvas, layerName, xOffset, yOffset)
+    {
+        for (var layerId = 0; layerId < self.map.layers.length; layerId++)
         {
             var t = 0;
-            if (self.map.layers[layerId].name.toLowerCase().includes(layerName)){
-                for (var mapY=0; mapY < self.map.height; mapY++){
-                    for (var mapX=0; mapX < self.map.width; mapX++){
+            if (self.map.layers[layerId].name.toLowerCase().includes(layerName))
+            {
+                for (var mapY = 0; mapY < self.map.height; mapY++)
+                {
+                    for (var mapX = 0; mapX < self.map.width; mapX++)
+                    {
                         var gid = self.map.layers[layerId].tiles[mapX][mapY].id;
-        
-                        for(var sets=0; sets< self.map.tilesets.length; sets++)
+
+                        for (var sets = 0; sets < self.map.tilesets.length; sets++)
                         {
                             if (gid <= (self.map.tilesets[sets].firstGID + self.map.tilesets[sets].tileCount) &&
-                            gid >= self.map.tilesets[sets].firstGID)
-                                t=sets;
+                                gid >= self.map.tilesets[sets].firstGID)
+                                t = sets;
                         }
-        
-                        tsGid = gid - self.map.tilesets[t].firstGID;
-        
-                        if(self.map.tilesets[t].img == null && tsGid == 0)
+
+                        var tsGid = gid - self.map.tilesets[t].firstGID;
+
+                        if (self.map.tilesets[t].img == null && tsGid == 0)
                             continue;
-        
-                        tilesinrow = self.map.tilesets[t].width / self.map.tilesets[t].tileWidth;
-        
-                        y= Math.floor(tsGid / tilesinrow);
-                        x= tsGid % (tilesinrow);
-        
-                        ctx.drawImage(self.map.tilesets[t].img,
+
+                        var tilesinrow = self.map.tilesets[t].width / self.map.tilesets[t].tileWidth;
+
+                        var y = Math.floor(tsGid / tilesinrow);
+                        var x = tsGid % (tilesinrow);
+
+                        canvas.drawImage(self.map.tilesets[t].img,
                             x * self.map.tilesets[t].tileWidth, y * self.map.tilesets[t].tileHeight,
                             self.map.tilesets[t].tileWidth, self.map.tilesets[t].tileHeight,
-                            mapX*self.map.tilesets[t].tileWidth+ xOffset,mapY*self.map.tilesets[t].tileWidth+ yOffset, 
+                            mapX * self.map.tilesets[t].tileWidth + xOffset, mapY * self.map.tilesets[t].tileWidth + yOffset,
                             self.map.tilesets[t].tileWidth, self.map.tilesets[t].tileHeight)
                     }
                 }
@@ -178,6 +202,6 @@ var TMXLoader = function(mapName){
     }
 
     self.loadMap();
-    
+
     return self;
 }
diff --git a/server/Entities/Bullet.js b/server/Entities/Bullet.js
index 6ae6c0f..cc47362 100644
--- a/server/Entities/Bullet.js
+++ b/server/Entities/Bullet.js
@@ -1,27 +1,32 @@
 const Entity = require('./Entity');
 const Player = require('./Player');
 
-var Bullet = function(parent, angle) {
+var Bullet = function (parent, angle)
+{
     var self = Entity.Entity();
     self.id = Math.random();
-    self.speedX = Math.cos(angle/180*Math.PI) *10;
-    self.speedY = Math.sin(angle/180*Math.PI) *10;
+    self.speedX = Math.cos(angle / 180 * Math.PI) * 10;
+    self.speedY = Math.sin(angle / 180 * Math.PI) * 10;
     self.dir = 0;
     self.parent = parent;
     self.timer = 0;
     self.toRemove = false;
 
     var super_update = self.update;
-    self.update = function(){
+    self.update = function ()
+    {
         if (self.timer++ > 100)
             self.toRemove = true;
         super_update();
-        for (var i in Player.list){
+        for (var i in Player.list)
+        {
             var p = Player.list[i];
-            if(self.getDistance(p) < 32 && self.parent !== p.id){
+            if (self.getDistance(p) < 32 && self.parent !== p.id)
+            {
                 if (!p.ignorePlayerAttack)
                     p.hp -= 1;
-                if (p.hp <= 0){
+                if (p.hp <= 0)
+                {
                     var shooter = Player.list[self.parent];
                     if (shooter)
                         shooter.score += 1;
@@ -35,7 +40,8 @@ var Bullet = function(parent, angle) {
         }
     }
 
-    self.getInitPack = function() {
+    self.getInitPack = function ()
+    {
         return {
             id: self.id,
             x: self.x,
@@ -45,7 +51,8 @@ var Bullet = function(parent, angle) {
         };
     }
 
-    self.getUpdatePack = function() {
+    self.getUpdatePack = function ()
+    {
         return {
             id: self.id,
             x: self.x,
@@ -60,14 +67,17 @@ var Bullet = function(parent, angle) {
     return self;
 }
 
-Bullet.list= {};
+Bullet.list = {};
 
-Bullet.update = function(){
+Bullet.update = function ()
+{
     var pack = [];
-    for(var i in Bullet.list){
+    for (var i in Bullet.list)
+    {
         var bullet = Bullet.list[i];
         bullet.update();
-        if(bullet.toRemove){
+        if (bullet.toRemove)
+        {
             delete Bullet.list[i];
             Entity.removePack.bullet.push(bullet.id);
         }
@@ -77,12 +87,13 @@ Bullet.update = function(){
     return pack;
 }
 
-Bullet.getAllInitPack = function(){
+Bullet.getAllInitPack = function ()
+{
     var bullets = [];
-    for(var i in Bullet.list)
+    for (var i in Bullet.list)
         bullets.push(Bullet.list[i].getInitPack());
     return bullets;
 }
 
 module.exports = { Bullet };
-exports.list = Bullet.list;
\ No newline at end of file
+exports.list = Bullet.list;
diff --git a/server/Entities/Entity.js b/server/Entities/Entity.js
index d65492d..04ea6b3 100644
--- a/server/Entities/Entity.js
+++ b/server/Entities/Entity.js
@@ -1,8 +1,9 @@
 
-var initPack = {player:[], bullet:[]};
-var removePack = {player:[], bullet:[]};
+var initPack = { player: [], bullet: [] };
+var removePack = { player: [], bullet: [] };
 
-var Entity = function(){
+var Entity = function ()
+{
     var self = {
         x: 250,
         y: 250,
@@ -11,17 +12,20 @@ var Entity = function(){
         speedY: 0,
         id: "",
     }
-    self.update = function(){
+    self.update = function ()
+    {
         self.updatePosition();
     }
-    self.updatePosition = function(){
+    self.updatePosition = function ()
+    {
         self.x += self.speedX;
         self.y += self.speedY;
     }
-    self.getDistance = function(pt){
-        return Math.sqrt(Math.pow(self.x-pt.x,2)) + Math.pow(self.y-pt.y,2);
+    self.getDistance = function (pt)
+    {
+        return Math.sqrt(Math.pow(self.x - pt.x, 2)) + Math.pow(self.y - pt.y, 2);
     }
     return self;
 }
 
-module.exports = { Entity, initPack, removePack };
\ No newline at end of file
+module.exports = { Entity, initPack, removePack };
diff --git a/server/Entities/Player.js b/server/Entities/Player.js
index 4c67f45..2e70d2a 100644
--- a/server/Entities/Player.js
+++ b/server/Entities/Player.js
@@ -3,7 +3,8 @@ const Entity = require('./Entity');
 const Bullet = require('./Bullet');
 
 
-var Player = function(id){
+var Player = function (id)
+{
     var self = Entity.Entity();
     self.id = id;
     self.playerName = "";
@@ -24,48 +25,57 @@ var Player = function(id){
     self.ignorePlayerAttack = false;
 
     var super_update = self.update;
-    self.update = function(){
+    self.update = function ()
+    {
         self.updateSpeed();
         super_update();
-        if(self.pressingAttack){
+        if (self.pressingAttack)
+        {
             self.shootBullet(self.mouseAngle);
         }
     }
 
-    self.shootBullet = function(angle){
+    self.shootBullet = function (angle)
+    {
         var b = Bullet.Bullet(self.id, angle);
         b.x = self.x
         b.y = self.y
     }
 
-    self.updateSpeed = function(){
-            if(self.pressingRight){
-                self.speedX = self.maxSpeed * self.move;
-                self.dir = 3;
-            }
-            else if(self.pressingLeft){
-                self.speedX = -self.maxSpeed * self.move;
-                self.dir = 1;
-            }
-            else
-                self.speedX = 0;
-
-            if(self.pressingUp){
-                self.speedY = -self.maxSpeed * self.move;
-                self.dir = 2;
-            }
-            else if(self.pressingDown){
-                self.speedY = self.maxSpeed * self.move;
-                self.dir = 0;
-            }
-            else
-                self.speedY = 0;
-            // dont sit while moving, in case we dont press shift(rotation/dir)
-            if(self.pressingAttack + self.pressingDown + self.pressingLeft + self.pressingRight + self.pressingUp != 0 && self.move)
-                self.sit = false;
+    self.updateSpeed = function ()
+    {
+        if (self.pressingRight)
+        {
+            self.speedX = self.maxSpeed * self.move;
+            self.dir = 3;
+        }
+        else if (self.pressingLeft)
+        {
+            self.speedX = -self.maxSpeed * self.move;
+            self.dir = 1;
+        }
+        else
+            self.speedX = 0;
+
+        if (self.pressingUp)
+        {
+            self.speedY = -self.maxSpeed * self.move;
+            self.dir = 2;
+        }
+        else if (self.pressingDown)
+        {
+            self.speedY = self.maxSpeed * self.move;
+            self.dir = 0;
+        }
+        else
+            self.speedY = 0;
+        // dont sit while moving, in case we dont press shift(rotation/dir)
+        if (self.pressingAttack + self.pressingDown + self.pressingLeft + self.pressingRight + self.pressingUp != 0 && self.move)
+            self.sit = false;
     }
 
-    self.getInitPack = function() {
+    self.getInitPack = function ()
+    {
         return {
             id: self.id,
             playerName: self.playerName,
@@ -80,7 +90,8 @@ var Player = function(id){
             ignorePlayerAttack: self.ignorePlayerAttack,
         };
     }
-    self.getUpdatePack = function() {
+    self.getUpdatePack = function ()
+    {
         return {
             id: self.id,
             playerName: self.playerName,
@@ -102,69 +113,83 @@ var Player = function(id){
 
 Player.list = {};
 
-Player.onConnect = function(socket, pName){
+Player.onConnect = function (socket, pName)
+{
     var player = Player(socket.id);
 
     player.playerName = pName;
 
-    socket.on('keyPress', function(data){
+    socket.on('keyPress', function (data)
+    {
         if (data.shift)
             player.move = false;
         else
             player.move = true;
 
-        if (data.inputId === 'left'){
+        if (data.inputId === 'left')
+        {
             player.pressingLeft = data.state;
             player.dir = 1;
         }
-        else if (data.inputId === 'right'){
+        else if (data.inputId === 'right')
+        {
             player.pressingRight = data.state;
             player.dir = 3;
         }
-        else if (data.inputId === 'up'){
+        else if (data.inputId === 'up')
+        {
             player.pressingUp = data.state;
             player.dir = 2;
         }
-        else if (data.inputId === 'down'){
+        else if (data.inputId === 'down')
+        {
             player.pressingDown = data.state;
             player.dir = 0;
         }
-        else if(data.inputId === 'sit'){
+        else if (data.inputId === 'sit')
+        {
             player.sit = data.state;
         }
-        else if (data.inputId === 'attack'){
+        else if (data.inputId === 'attack')
+        {
             player.pressingAttack = data.state;
         }
-        else if (data.inputId === 'mouseAngle'){
+        else if (data.inputId === 'mouseAngle')
+        {
             player.mouseAngle = data.state;
         }
-        if (data.inputId === 'inInventory'){
+        if (data.inputId === 'inInventory')
+        {
             player.inInventory = data.state;
         }
     });
 
-    socket.emit('init',{
-        selfId:socket.id,
-        player:Player.getAllInitPack(),
-        bullet:Bullet.Bullet.getAllInitPack(),
+    socket.emit('init', {
+        selfId: socket.id,
+        player: Player.getAllInitPack(),
+        bullet: Bullet.Bullet.getAllInitPack(),
     });
 }
 
-Player.getAllInitPack = function(){
+Player.getAllInitPack = function ()
+{
     var players = [];
-    for(var i in Player.list)
+    for (var i in Player.list)
         players.push(Player.list[i].getInitPack());
     return players;
 }
 
-Player.onDisconnect = function(socket){
+Player.onDisconnect = function (socket)
+{
     delete Player.list[socket.id];
     Entity.removePack.player.push(socket.id);
 }
 
-Player.update = function(){
+Player.update = function ()
+{
     var pack = [];
-    for(var i in Player.list){
+    for (var i in Player.list)
+    {
         var player = Player.list[i];
         player.update();
         pack.push(player.getUpdatePack());
@@ -175,4 +200,4 @@ Player.update = function(){
 }
 
 module.exports = { Player };
-exports.list = Player.list;
\ No newline at end of file
+exports.list = Player.list;
-- 
cgit v1.2.3-60-g2f50