diff options
author | jak1 <jak1@themanaworld.org> | 2023-01-13 14:55:04 +0100 |
---|---|---|
committer | jak1 <jak1@themanaworld.org> | 2023-01-13 14:55:04 +0100 |
commit | 101454ef1a20bea1a961a1aaa0ec77e0d5369e97 (patch) | |
tree | 2481431a816ba83e00e2aa704b04026f52b6a915 | |
parent | 99382fd6fa9c943880eed2b77263797c20ae43cb (diff) | |
download | thepixelworld-101454ef1a20bea1a961a1aaa0ec77e0d5369e97.tar.gz thepixelworld-101454ef1a20bea1a961a1aaa0ec77e0d5369e97.tar.bz2 thepixelworld-101454ef1a20bea1a961a1aaa0ec77e0d5369e97.tar.xz thepixelworld-101454ef1a20bea1a961a1aaa0ec77e0d5369e97.zip |
changed a lot formating
seperated Utils & Commands
-rw-r--r-- | app.js | 300 | ||||
-rw-r--r-- | client/consts.js | 7 | ||||
-rw-r--r-- | client/index.html | 938 | ||||
-rw-r--r-- | client/tmxloader.js | 122 | ||||
-rw-r--r-- | server/Entities/Bullet.js | 43 | ||||
-rw-r--r-- | server/Entities/Entity.js | 20 | ||||
-rw-r--r-- | server/Entities/Player.js | 127 |
7 files changed, 698 insertions, 859 deletions
@@ -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, "&") - .replace(/</g, "<") - .replace(/>/g, ">") - .replace(/"/g, """) - .replace(/'/g, "'"); - } - -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; |