SHARE
TWEET

Untitled

a guest Jul 21st, 2019 87 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /**************************************************
  2. ** GAME VARIABLES
  3. **************************************************/
  4. var canvas,     // Canvas DOM element
  5.     bgCanvas,   // Canvas for static background
  6.     ctx,        // Canvas rendering context
  7.     bgCtx,      // Canvas background rendering context
  8.     aCtx,       // Canvas above player and background
  9.     aCanvas,
  10.     mapCanvas,
  11.     mapCtx,
  12.     inventoryCanvas,
  13.     inventoryCtx,
  14.     invBuffer,
  15.     invBufferCtx,
  16.     bagCanvas,
  17.     bagCtx,
  18.     bagBuffer,
  19.     bagBufferCtx,
  20.     localPlayer,    // Local player
  21.     remotePlayers,  // Remote players
  22.     projectiles, //projectiles
  23.     enemies,    // Contains the enemies
  24.     quests,
  25.     pName,
  26.     items,
  27.     npcs,
  28.     playername,
  29.     playerPass,
  30.     playersprite,
  31.     spritesheet,
  32.     itemsprites,
  33.     lootbags,
  34.     npcsprite,
  35.     tile,
  36.     worldX,
  37.     worldY,
  38.     mapName,
  39.     renderMap,      // Contains the map
  40.     collisionWorld, // Map containing NPCs and enemies, 0 = walkable, 1 = enemy, 2 = enemy, 3 = not walkable
  41.     worldSize,
  42.     tileSize,
  43.     adjustedTileSize,
  44.     showMap = false,
  45.     showInventory = false,
  46.     showQuests = false,
  47.     showStats = false,
  48.     lastClicked = {x: null, y: null},
  49.     lastMapUpdate = Date.now(),
  50.     mousedownID,  //Global ID of mouse down interval
  51.     socket;     // Socket connection
  52.     var innerWidth = window.innerWidth, innerHeight = window.innerHeight;
  53.     var keysDown = [];
  54.     var inventoryDown = false, chatDown = false, inventoryDrag = false, chatDrag = false, itemDown = false;
  55.     var itemDownID = -1;
  56.     var itemDownBagID = -1;
  57.     var invOffX = 0, invOffY = 0;
  58.     var bagOffX = 0, bagOffY = 0;
  59.     var invWidth = 368, invHeight = 242;
  60.     var invStartX = 0, invStartY = 0, invEndX = 368, invEndY =  242;
  61.     var bagWidth = 171, bagHeight = 147;
  62.     var bagStartX = 0, bagStartY = 0, bagEndX = 171, bagEndY =  147;
  63.     var chatOffX = 0, chatOffY = 0;
  64.     var chatStartX = 25, chatStartY = window.innerHeight - 150, chatEndX = 425, chatEndY = window.innerHeight - 25;
  65.     var chatWidth = 400, chatHeight = 125;
  66.     var skillBOffX = 0, skillBOffY = 0;
  67.     var skillBStartX = (window.document.body.clientWidth / 2) - 125, skillBStartY = window.document.body.clientHeight - 85, skillBEndX = (window.document.body.clientWidth / 2) + 125, skillBEndY = window.document.body.clientHeight - 25;
  68.     var skillBWidth = 250, skillBHeight = 60;
  69.     var skillOffX = 0, skillOffY = 0;
  70.     var skillStartX = (window.innerWidth / 2) - 125, skillStartY = window.innerHeight - 600, skillEndX = (window.innerWidth / 2) + 125, skillEndY = window.innerHeight - 100;
  71.     var skillWidth = 300, skillHeight = 500;
  72.     var showSkills = false;
  73.     var noOffX = 0, noOffY = 0;
  74.     var drawCursor = false, mouseX = 0, mouseY = 0, mouseDownX = 0, mouseDownY = 0;
  75.     var skillBDown = false, skillDown = false;
  76.     var cursorSprite = "";
  77.     var lastBox = -1, lastBagBox = -1;
  78.     var newEnemies = [], newItems = [];
  79.     var showBag = false;
  80.     var bag;
  81.     var bagDown = false;
  82.     var bagDrag = false;
  83.     var hoveringItem = false;
  84.     var takeHover = false;
  85.     var disposeHover = false;
  86.     var newBag = false;
  87.     var skillEdit = false;
  88.     var skillEditId = -1;
  89.     var droppingItem = -1;
  90.     var remotePlayers = [];
  91.     var tabSelected = 0;
  92.     var abilityDown = -1, abilityDown2 = -1;
  93.  
  94. /*Input.mouse = {x:0,y:0,drag:{active:0,sx:0,sy:0,vx:0,vy:0},left:0,right:0};
  95. Input.offset = {left:0,top:0};  //updated in loop
  96.  
  97. Input.key.move = [
  98.             [68], //d - right
  99.             [83], //s - down
  100.             [65], //a - left
  101.             [87]  //w - up
  102.         ];
  103.  
  104. Input.reset = function(){ Input.press = {'move':[0,0,0,0],'ability':[0,0,0,0,0,0],'combo':[0,0]}; }
  105. */
  106.  
  107. /**************************************************
  108. ** GAME INITIALISATION
  109. **************************************************/
  110.         document.addEventListener("keydown", keyPress);
  111.         document.addEventListener("keyup", keyRelease);
  112.  
  113. function init() {
  114.     // Initialise socket connection
  115.     //socket = io.connect("http://127.0.0.1", {port: 8010, transports: ["websocket"]});
  116.     //socket = io.connect('http://25.168.179.255:8000');
  117.     socket = io.connect('http://localhost:8000');
  118.     //socket = io.connect('http://foreverpkers.no-ip.org:8000');
  119.     //socket = io.connect("http://paranerd.dyndns.org", {port: 8000, transports: ["websocket"]});
  120.     //socket = io.connect("http://foreverpkers.no-ip.org", {port: 8000, transports: ["websocket"]});
  121.     //socket = io.connect("http://192.168.178.27", {port: 8000, transports: ["websocket"]});
  122.  
  123.     // Start listening for events
  124.     setEventHandlers();
  125.     setGameClickHandler();
  126.  
  127. };
  128. /**************************************************
  129. ** GAME EVENT HANDLERS
  130. **************************************************/
  131. var setEventHandlers = function() {
  132.     // Keyboard
  133.     document.getElementById("message").addEventListener("keydown", localMessage, false);
  134.     document.getElementById("bLogout").addEventListener("mousedown", logout, false);
  135.  
  136.     $("#mapButton").click(function() {toggleMap()});
  137.     $("#questButton").click(function() {toggleQuests()});
  138.  
  139.     // Window resize
  140.     window.addEventListener("resize", onResize, false);
  141.  
  142.     // Socket connection successful
  143.     socket.on("connect", onSocketConnected);
  144.  
  145.     // Socket disconnection
  146.     socket.on("disconnect", onSocketDisconnect);
  147.  
  148.     // Player move message received
  149.     socket.on("move player", onMovePlayer);
  150.  
  151.     // Player move message received
  152.     socket.on("move player new", onMovePlayerNew);
  153.  
  154.     // Enemy move message received
  155.     socket.on("move enemy", onMoveEnemy);
  156.  
  157.     // Player removed message received
  158.     socket.on("remove player", onRemovePlayer);
  159.  
  160.     // New enemy
  161.     socket.on("new enemy", onNewEnemy);
  162.  
  163.     // New enemies
  164.     socket.on("new enemies", onNewEnemies);
  165.  
  166.     // New projectile
  167.     socket.on("new projectile", onNewProjectile);
  168.  
  169.     // New message
  170.     socket.on("new message", onNewMessage);
  171.  
  172.     // Remove item from player
  173.     socket.on("remove item", onRemoveItem);
  174.  
  175.     socket.on("open bag", openBag);
  176.  
  177.     socket.on("close bag", closeBag);
  178.  
  179.     socket.on("new bags", onNewBags);
  180.  
  181.     socket.on("enemy hurt", onEnemyHurt);
  182.  
  183.     socket.on("enemy heal", onEnemyHeal);
  184.  
  185.     socket.on("enemy dead", onEnemyDead);
  186.  
  187.     socket.on("respawn enemy", onRespawnEnemy);
  188.  
  189.     socket.on("player hurt", onPlayerHurt);
  190.  
  191.     socket.on("player dead", onPlayerDead);
  192.  
  193.     socket.on("player respawn", onPlayerRespawn);
  194.  
  195.     socket.on("update world", onUpdateWorld);
  196.  
  197.     socket.on("new item", onNewItem);
  198.  
  199.     socket.on("item taken", onItemTaken);
  200.  
  201.     socket.on("new npc", onNewNpc);
  202.  
  203.     socket.on("create localplayer", onCreateLocalPlayer);
  204.  
  205.     socket.on("new remote player", onNewRemotePlayer);
  206.  
  207.     socket.on("init map", onInitMap);
  208.  
  209.     socket.on("init collisionMap", onInitCollisionMap);
  210.  
  211.     socket.on("validated", startGame);
  212.  
  213.     socket.on("no player", playerNotFound);
  214.  
  215.     socket.on("remove projectile", onRemoveProjectile);
  216.  
  217.     socket.on("update angle", updateAngle);
  218.  
  219.     socket.on("player reconnected", onReconnect);
  220.  
  221.     socket.on("kick", goLogin);
  222.  
  223.     socket.on("display item", displayItemDetails);
  224.  
  225.     socket.on("display equip", displayEquipDetails);
  226.  
  227.     socket.on("display ability", onDisplayAbility);
  228.  
  229.     socket.on("send equip", onSendEquip);
  230.  
  231.     socket.on("update equip", updateEquip);
  232.  
  233.     socket.on("remove equip", onRemoveEquip);
  234.  
  235.     socket.on("send player stats", showPlayerStats);
  236.  
  237.     socket.on("swap inventory item", swapInventoryItem);
  238.  
  239.     socket.on("swap equip", swapEquip);
  240.  
  241.     socket.on("respawn player", onRespawnPlayer);
  242.  
  243.     socket.on("new skilltab", onNewSkilltab);
  244.  
  245.     socket.on("update cooldown", onUpdateCooldown);
  246.  
  247.     socket.on("heal player", onHealPlayer);
  248.  
  249.     socket.on("buff used", onBuffUsed);
  250.  
  251. };
  252.  
  253. /*Input.event.typeNormal = function(){
  254.     var str = document.activeElement.constructor.toString();
  255.     return str.have('HTMLInputElement') || str.have('HTMLTextAreaElement');
  256.    
  257.    
  258.    
  259.     /*$("#chatBoxInput").is(":focus") || $("#questionInput").is(":focus")
  260.             || $("#contactMeTitle").is(":focus") || $("#contactMeText").is(":focus")
  261.             || $("#tsInput").is(":focus");*/
  262. /*}
  263. Input.event.key = function(code,dir,event){
  264.     var start = +Input.event.typeNormal();
  265.     var num = dir === 'down' ? 1 : 0;
  266.  
  267.     for(var i in Input.key.move){
  268.         for(var j = start ; j < Input.key.move[i].length; j++){
  269.             if(code === Input.key.move[i][j]){
  270.                 Input.press.move[i] = num;
  271.                 if(Game.started) event.preventDefault();
  272.             }
  273.         }
  274.     }
  275.    
  276.     //for(var i in Input.key.combo){if(code === Input.key.combo[i].key){    Input.press.combo[i] = num;}}
  277.     Input.press.combo[0] = +event.shiftKey; //quickfix
  278.     if(event.shiftKey){Input.press.ability[0] = 0; Input.press.ability[1] = 0; } //quickfix
  279.     if(!event.shiftKey){Input.press.ability[2] = 0; Input.press.ability[3] = 0; } //quickfix
  280.    
  281.     code += Input.event.combo();
  282.    
  283.     if(dir === 'down'){
  284.         for(var i in Input.key.custom){
  285.             for(var j = start ; j < Input.key.custom[i].keyCode.length; j++){
  286.                 if(code === Input.key.custom[i].keyCode[j]){
  287.                     if(Game.started) Input.key.custom[i].func(event);
  288.                 }
  289.             }
  290.         }
  291.     }
  292.    
  293.     for(var i in Input.key.ability){
  294.         for(var j = start ; j < Input.key.ability[i].length; j++){
  295.             if(code == Input.key.ability[i][j]){
  296.                 Input.press.ability[i] = num;
  297.                 if(Game.started) event.preventDefault();
  298.             }
  299.         }
  300.     }
  301.    
  302.     var blackList = [16,17,1016,1017,10016,11016,17,1017,10017,11017];  //prevent binding plain shift or ctrl to ability
  303.     if(!blackList.have(code)){
  304.         if(Input.binding.move !== null){ $(".ui-tooltip-content").parents('div').remove(); Input.key.move[Input.binding.move][0] = code; Input.save(); }
  305.         if(Input.binding.ability !== null){ $(".ui-tooltip-content").parents('div').remove(); Input.key.ability[Input.binding.ability][0] = code; Input.save(); }
  306.         Input.binding.move = null;
  307.         Input.binding.ability = null;
  308.     }  
  309.     return false;
  310. }
  311.  
  312. Input.send = function(){
  313.     if(Input.event.typeNormal() && Input.press.move.toString() !== "0,0,0,0"){
  314.         //facing right direction if typing and using secondary move
  315.         Input.mouse.x = CST.WIDTH2 + 10*Input.press.move[0] - 10*Input.press.move[2];
  316.         Input.mouse.y = CST.HEIGHT2 + 10*Input.press.move[1] - 10*Input.press.move[3];     
  317.     }
  318.    
  319.     var d = {};
  320.     var newKey = Input.press.move.join('') + Input.press.ability.join('');
  321.     var newMouse = [Math.round(Input.mouse.x),Math.round(Input.mouse.y)];
  322.  
  323.     if(Input.send.old.key !== newKey){ d.i = newKey; }
  324.     if(Input.send.old.mouse.toString() !== newMouse.toString()){ d.m = newMouse; }
  325.    
  326.     //$("#largeLog")[0].innerHTML = newKey; //TOREMOVE
  327.    
  328.     if(d.i || d.m){ socket.emit("input", d ); }
  329.    
  330.    
  331.    
  332.     Input.send.old.key = newKey;
  333.     Input.send.old.mouse = newMouse;
  334. }*/
  335. function onReconnect(data) {
  336.     var player = playerById(data.oldId);
  337.     if(player) {
  338.         player["id"] = data.newId;
  339.     }
  340. }
  341.  
  342. function startGame() {
  343.     playerName = sessionStorage.playerName;
  344.     playerPass = sessionStorage.playerPass;
  345.     $("#pName").html(playerName);
  346.     $("#pPass").html(playerPass);
  347.  
  348.     playersprite = new Image();
  349.     playersprite.src = 'sprites/playersprite.png';
  350.     spritesheet = new Image();
  351.     spritesheet.src = 'sprites/spritesheet.png';
  352.     npcsprite = new Image();
  353.     npcsprite.src = 'sprites/npc.png';
  354.     //cursorSprite = new Image();
  355.     //cursorSprite.src = 'sprites/monster.png';
  356.  
  357.     itemsprites = new Image();
  358.     itemsprites.src = 'sprites/itemsprites.png';
  359.  
  360.     lootbags = new Image();
  361.     lootbags.src = 'sprites/lootbag.png';
  362.  
  363.     // Background music
  364.     var bgMusic = new Audio("sounds/bgmusic.ogg");
  365.     //bgMusic.play();
  366.  
  367.     enemies = [];
  368.     projectiles = [];
  369.     items = [];
  370.     npcs = [];
  371.  
  372.     /*var projectileLoop = setInterval(function() {
  373.         theProjectileLoop();
  374.     }, 30);*/
  375.     //theProjectileLoop();
  376.  
  377.     quests = new Quests();
  378.  
  379.     pName = playerName;
  380.     pPass = playerPass;
  381.  
  382.     // Canvas for above layer
  383.     aCanvas = document.getElementById("aCanvas");
  384.     aCtx = aCanvas.getContext("2d");
  385.     aCtx.globalAlpha = 0.5;
  386.  
  387.     // Declare the canvas and rendering context
  388.     canvas = document.getElementById("gameCanvas");
  389.     ctx = canvas.getContext("2d");
  390.     ctx.globalAlpha = 0.1;
  391.  
  392.     // Canvas for static background
  393.     bgCanvas = document.getElementById("bgCanvas");
  394.     bgCtx = bgCanvas.getContext("2d");
  395.     bgCtx.globalAlpha = 0.5;
  396.  
  397.     // Canvas for map
  398.     mapCanvas = document.getElementById("mapCanvas");
  399.     mapCtx = mapCanvas.getContext("2d");
  400.  
  401.     //canvas for inventory
  402.     inventoryCanvas = document.getElementById("inventoryCanvas");
  403.     inventoryCtx = inventoryCanvas.getContext("2d");
  404.  
  405.     //canvas for bag
  406.     bagCanvas = document.getElementById("bagCanvas");
  407.     bagCtx = bagCanvas.getContext("2d");
  408.  
  409.     //canvas for skills
  410.     skillCanvas = document.getElementById("skillCanvas");
  411.     skillCtx = skillCanvas.getContext("2d");
  412.  
  413.     //canvas for skill buttons
  414.     skillBCanvas = document.getElementById("skillBCanvas");
  415.     skillBCtx = skillBCanvas.getContext("2d");
  416.  
  417.     // Maximise the canvas
  418.     //canvas.width = window.innerWidth; //window.innerWidth;
  419.     //canvas.height = window.innerHeight; //window.innerHeight;
  420.     canvas.width = window.innerWidth; //window.innerWidth;
  421.     canvas.height = window.innerHeight; //window.innerHeight;
  422.     inventoryCanvas.left = invStartX;
  423.     inventoryCanvas.top = invStartY;
  424.     inventoryCanvas.width = 400; //window.innerWidth;
  425.     inventoryCanvas.height = 240; //window.innerHeight;
  426.     bagCanvas.width = 365; //window.innerWidth;
  427.     bagCanvas.height = 200; //window.innerHeight;
  428.     skillCanvas.width = skillWidth;
  429.     skillCanvas.height = skillHeight;
  430.     skillCanvas.left = skillStartX;
  431.     skillCanvas.top = skillStartY;
  432.     skillBCanvas.left = skillBStartX;
  433.     skillBCanvas.top = skillBStartY;
  434.     /*bgCanvas.width = 5184;
  435.     bgCanvas.height = 5184;
  436.     aCanvas.width = 5184;
  437.     aCanvas.height = 5184;*/
  438.     bgCanvas.width = 5184;
  439.     bgCanvas.height = 5184;
  440.     aCanvas.width = 5184;
  441.     aCanvas.height = 5184;
  442.     $("#bLogout").css({
  443.         top: "5px",
  444.         left: eval(canvas.width - 52) + "px"
  445.     });
  446.     $("#skillBCanvas").css({
  447.         left: skillBStartX,
  448.         top: skillBStartY,
  449.         width: skillBWidth,
  450.         height: skillBHeight
  451.     });
  452.     $("#chatlog").css({
  453.         left: chatStartX,
  454.         top: chatStartY,
  455.         width: chatWidth,
  456.         height: chatHeight
  457.     });
  458.  
  459.     //init
  460.     drawSkillButtons();
  461.  
  462.     var left = parseInt($("#inventoryCanvas").css("left"), 10);
  463.     var top = parseInt($("#inventoryCanvas").css("top"), 10);
  464.         invStartX = left;
  465.         invStartY = top;
  466.         invEndX = left + invWidth;
  467.         invEndY = top + invHeight;
  468.  
  469.     var left = parseInt($("#bagCanvas").css("left"), 10);
  470.     var top = parseInt($("#bagCanvas").css("top"), 10);
  471.         bagStartX = left;
  472.         bagStartY = top;
  473.         bagEndX = left + bagWidth;
  474.         bagEndY = top + bagHeight;
  475.  
  476.     // Initialise remote players array
  477.     remotePlayers = [];
  478. };
  479.  
  480. function playerNotFound() {
  481.     window.location = "login.html";
  482. };
  483.  
  484. function toggleMap() {
  485.     if(!showMap) {
  486.         showMap = true;
  487.         $("#mapCanvas").removeClass("hideClass");
  488.         drawMap();
  489.     }
  490.     else {
  491.         $("#mapCanvas").fadeOut(250);
  492.         showMap = false;
  493.     }
  494. };
  495.  
  496. function toggleInventory() {
  497.     if(!showInventory) {
  498.         showInventory = true;
  499.         //$("#gameContainer").removeClass("hideClass");
  500.         $("#inventoryCanvas").removeClass("hideClass");
  501.         //inventoryCanvas.width = inventoryCanvas.width;
  502.         drawInventory();
  503.         $("#inventoryCanvas").fadeIn(1);
  504.     } else {
  505.         $("#inventoryCanvas").fadeOut(100);
  506.         clearHoverItem2();
  507.         showInventory = false;
  508.     }
  509. };
  510.  
  511. function openBag(data) {
  512.         if(!localPlayer)
  513.             return;
  514.  
  515.         localPlayer["viewBagId"] = data.bag.id;
  516.         $("#bagCanvas").removeClass("hideClass");
  517.         showBag = true;
  518.         bag = data.bag;
  519.         takeHover = false;
  520.         disposeHover = false;
  521.         drawBag(bag);
  522.         drawBagText(bag);
  523.         $("#bagCanvas").fadeIn(1);
  524. };
  525.  
  526. function closeBag(data) {
  527.     if(!localPlayer)
  528.         return;
  529.  
  530.     if(typeof data.id !== "undefined") {
  531.             if(localPlayer.viewBagId == data.id) {
  532.                 lastBagBox = -1;
  533.                 showBag = false;
  534.                 $("#bagCanvas").fadeOut(100);
  535.                 if(hoveringItem)
  536.                     clearHoverItem();
  537.             }
  538.             for(var i=0;i<items.length;i++) {
  539.                     if(items[i]["id"] == data.id) {
  540.                         items.splice(i, 1);
  541.                         break;
  542.                 }
  543.             }
  544.         } else {
  545.             lastBagBox = -1;
  546.             showBag = false;
  547.             $("#bagCanvas").fadeOut(100);
  548.             if(hoveringItem)
  549.                 clearHoverItem();
  550.     }
  551. };
  552.  
  553. function toggleSkills() {
  554.     if(!showSkills) {
  555.         showSkills = true;
  556.         $("#skillCanvas").removeClass("hideClass");
  557.         drawSkills();
  558.         $("#skillCanvas").fadeIn(1);
  559.     }
  560.     else {
  561.         $("#skillCanvas").fadeOut(100);
  562.         showSkills = false;
  563.     }
  564. };
  565.  
  566. function toggleQuests() {
  567.     if(!showQuests) {
  568.         $("#questMenu").html("<h1>Quests</h1></br></br>");
  569.         var quests = localPlayer.playerQuests();
  570.         if(quests.length == 0) {
  571.             $("#questMenu").append("<p>No Quests available</p>");
  572.         }      
  573.         else {
  574.             for(var i = 0; i < quests.length; i += 1) {
  575.                 $("#questMenu").append("<p>"+quests[i][9]+": "+quests[i][5]+" / "+quests[i][4]+"</p>");
  576.             }
  577.         }
  578.         showQuests = true;
  579.         $("#questMenu").removeClass("hideClass");
  580.     }
  581.     else {
  582.         showQuests = false;
  583.         $("#questMenu").addClass("hideClass");
  584.     }
  585. };
  586.  
  587. function showPlayerStats(data) {
  588.     var stats = data.stats;
  589.     $("#statMenu").html('</br><h1 align="center">Stats "C"</h1></br>');
  590.         if(stats.length == 0) {
  591.                 $("#statMenu").append("<p></p>");
  592.             } else {
  593.                 localPlayer["stats"] = stats;
  594.                 localPlayer.displayStats();
  595.             for(var stat in stats) {
  596.                 if(stat == "maxhealth") $("#statMenu").append("Health: "+stats[stat]+"");
  597.                 if(stat == "health") $("#statMenu").append(" / "+stats[stat]+"</br>");
  598.                 if(stat == "defense") $("#statMenu").append("Defense: "+stats[stat]+"</br>");
  599.                 if(stat == "damage") $("#statMenu").append("Damage: "+stats[stat]+"");
  600.             }
  601.     }
  602. }
  603.  
  604. function toggleStats() {
  605.     socket.emit("request stats", { pid: localPlayer.getID() });
  606.     if(!showStats) {
  607.         showStats = true;
  608.         $("#statMenu").removeClass("hideClass");
  609.     }
  610.     else {
  611.         showStats = false;
  612.         $("#statMenu").addClass("hideClass");
  613.     }
  614. };
  615.  
  616. function onInitCollisionMap(data) {
  617.     collisionMap = data.collisionMap;
  618. };
  619.  
  620. function onNewNpc(data) {
  621.     var newNpc = new Npc(data.x, data.y, data.id, data.quest, data.questID);
  622.     npcs.push(newNpc);
  623. };
  624.  
  625. function onInitMap(data) {
  626.     console.log("map" + data.id)
  627.     if(data.id == localPlayer.getID()) {
  628.         var wait = setTimeout(function(){
  629.             remotePlayers = [];
  630.             console.log("initMap")
  631.             enemies = [];
  632.             items = [];
  633.             worldSize = data.worldSize;
  634.             tileSize = data.tileSize;
  635.             worldX = data.x;
  636.             worldY = data.y;
  637.             mapName = data.name;
  638.             onResize();
  639.             initMap();
  640.         },500);
  641.     }
  642. };
  643.  
  644. function isStackable(id) {
  645.     switch(id) {
  646.         case 0:
  647.         case 1:
  648.         return true;
  649.     }
  650.     return false
  651. }
  652.  
  653. // Draw Map
  654. function drawMap() {
  655.     var spriteNum = 0;
  656.     mapCtx.clearRect(0, 0, mapCanvas.width, mapCanvas.height);
  657.     /*for (var w=0; w < worldSize; w++)
  658.     {
  659.         for (var h=0; h < worldSize; h++)
  660.         {
  661.             spriteNum = renderMap[w][h];
  662.  
  663.             // Draw it
  664.             mapCtx.drawImage(spritesheet, spriteNum*tileSize, 0, tileSize, tileSize, w*adjustedTileSize, h*adjustedTileSize, adjustedTileSize, adjustedTileSize);
  665.         }
  666.     }
  667.     var absPos = localPlayer.getAbsPos();
  668.     mapCtx.drawImage(playersprite, 88, 0, 44, 44, absPos.absX/32*adjustedTileSize, absPos.absY/32*adjustedTileSize, adjustedTileSize, adjustedTileSize);
  669.     $("#mapCanvas").fadeIn(500);*/
  670. };
  671.  
  672. var abilityKey = [ 49, 50, 51, 52, 998, 999 ];
  673.  
  674. var nameForKey = function(key) {
  675.     switch(key) {
  676.         case -1:
  677.             return '. . .';
  678.         case 8:
  679.             return 'BkSpce';
  680.         case 9:
  681.             return 'Tab';
  682.         case 13:
  683.             return 'Enter';
  684.         case 16:
  685.             return 'Shift';
  686.         case 17:
  687.             return 'Ctrl';
  688.         case 18:
  689.             return 'Alt';
  690.         case 19:
  691.             return 'Pause';
  692.         case 20:
  693.             return 'CapsLk';
  694.         case 32:
  695.             return 'Space';
  696.         case 33:
  697.             return 'Pg Up';
  698.         case 34:
  699.             return 'Pg Down';
  700.         case 35:
  701.             return 'End';
  702.         case 36:
  703.             return 'Home';
  704.         case 37:
  705.             return 'Left';
  706.         case 38:
  707.             return 'Up';
  708.         case 39:
  709.             return 'Right';
  710.         case 40:
  711.             return 'Down';
  712.         case 45:
  713.             return 'Ins';
  714.         case 46:
  715.             return 'Del';
  716.         case 48:
  717.             return '0';
  718.         case 49:
  719.             return '1';
  720.         case 50:
  721.             return '2';
  722.         case 51:
  723.             return '3';
  724.         case 52:
  725.             return '4';
  726.         case 53:
  727.             return '5';
  728.         case 54:
  729.             return '6';
  730.         case 55:
  731.             return '7';
  732.         case 56:
  733.             return '8';
  734.         case 57:
  735.             return '9';
  736.         case 65:
  737.             return 'A';
  738.         case 66:
  739.             return 'B';
  740.         case 67:
  741.             return 'C';
  742.         case 68:
  743.             return 'D';
  744.         case 69:
  745.             return 'E';
  746.         case 70:
  747.             return 'F';
  748.         case 71:
  749.             return 'G';
  750.         case 72:
  751.             return 'H';
  752.         case 73:
  753.             return 'I';
  754.         case 74:
  755.             return 'J';
  756.         case 75:
  757.             return 'K';
  758.         case 76:
  759.             return 'L';
  760.         case 77:
  761.             return 'M';
  762.         case 78:
  763.             return 'N';
  764.         case 79:
  765.             return 'O';
  766.         case 80:
  767.             return 'P';
  768.         case 81:
  769.             return 'Q';
  770.         case 82:
  771.             return 'R';
  772.         case 83:
  773.             return 'S';
  774.         case 84:
  775.             return 'T';
  776.         case 85:
  777.             return 'U';
  778.         case 86:
  779.             return 'V';
  780.         case 87:
  781.             return 'W';
  782.         case 88:
  783.             return 'X';
  784.         case 89:
  785.             return 'Y';
  786.         case 90:
  787.             return 'Z';
  788.         case 112:
  789.             return 'F1';
  790.         case 113:
  791.             return 'F2';
  792.         case 114:
  793.             return 'F3';
  794.         case 115:
  795.             return 'F4';
  796.         case 116:
  797.             return 'F5';
  798.         case 117:
  799.             return 'F6';
  800.         case 118:
  801.             return 'F7';
  802.         case 119:
  803.             return 'F8';
  804.         case 120:
  805.             return 'F9';
  806.         case 121:
  807.             return 'F10';
  808.         case 122:
  809.             return 'F11';
  810.         case 123:
  811.             return 'F12';
  812.         case 186:
  813.             return ';';
  814.         case 187:
  815.             return '=';
  816.         case 188:
  817.             return ',';
  818.         case 189:
  819.             return '-';
  820.         case 190:
  821.             return '.';
  822.         case 191:
  823.             return '/';
  824.         case 192:
  825.             return '`';
  826.         case 219:
  827.             return '[';
  828.         case 220:
  829.             return '\\';
  830.         case 221:
  831.             return ']';
  832.         case 222:
  833.             return "'";
  834.         case 998:
  835.             return 'L Mouse';
  836.         case 999:
  837.             return 'R Mouse';
  838.         default:
  839.             return '';
  840.     }
  841. }
  842.  
  843. var skillButtonList = [[39,30],[78,30],[117,30],[156,30],[199,30],[236,30]]; // Skill buttons in Skill menu (not hotbar)
  844.  
  845. var skillBarButtonList = [[12,10],[51,10],[90,10],[129,10],[172,10],[209,10]]; // Skill buttons in Skill menu (not hotbar)
  846.  
  847. var skillList = []; // Skills in Skill menu
  848.  
  849. var skillLines = []; // Lines in Skill menu
  850.  
  851. var skillTabs = { startX: 20, startY: 85, tabs: [["Basic", 40, 15], ["Warrior", 50, 15]] }; // Tabs in Skill menu
  852.  
  853. var maxSkills = 6;
  854. var mySkills = new Array(maxSkills);
  855.  
  856. var skillSprites = {};
  857. var mySkillSprites = {};
  858.  
  859. var lastSkillY = 0;
  860.  
  861. function drawSkills() {
  862.     skillCanvas.width = skillWidth;
  863.     skillCanvas.height = skillHeight;
  864.     skillCtx.fillStyle = "rgba(0, 0, 0, 0.6)";
  865.     skillCtx.fillRect(0, 0, skillWidth, skillHeight);
  866.     skillCtx.font = "6pt Minecraftia";
  867.     skillCtx.textAlign = "right";
  868.     skillCtx.fillStyle = "rgba(200, 200, 200, 0.7)";
  869.     if(!skillEdit)
  870.             skillCtx.fillText("Key settings", skillWidth - 5, 13);
  871.         else
  872.             skillCtx.fillText("Save settings", skillWidth - 5, 13);
  873.     skillCtx.textAlign = "center";
  874.     var sW = 32, sH = 32;
  875.     var sbW = 32, sbH = 32;
  876.     var curW = 30, curH = 30;
  877.  
  878.     var skillX = 20, skillY = 85;
  879.     for(var i=0;i<skillTabs.tabs.length;i++) {
  880.         if(tabSelected == i) {
  881.             skillCtx.fillStyle = "rgba(00, 00, 00, 0.3)";
  882.             skillCtx.fillRect(skillX, skillY, skillTabs.tabs[i][1], skillTabs.tabs[i][2]);
  883.         }
  884.         skillCtx.fillStyle = "rgba(255, 255, 255, 0.7)";
  885.         skillCtx.font = "6pt Minecraftia";
  886.         skillCtx.fillText(skillTabs.tabs[i][0], skillX + (skillTabs.tabs[i][1] / 2) + 1, skillY + (skillTabs.tabs[i][2] / 2) + 4);
  887.         skillX += skillTabs.tabs[i][1];
  888.         lastSkillY = skillTabs.tabs[i][2];
  889.         if(skillX + skillTabs.startX + 20 >= skillWidth) {
  890.             skillX = skillTabs.startX;
  891.             skillY += skillTabs.tabs[i][2];
  892.         }
  893.     }
  894.     skillCtx.fillStyle = "rgba(0, 0, 0, 0.3)";
  895.     skillCtx.fillRect(skillTabs.startX, skillY + lastSkillY, skillWidth - 40, skillHeight - 20 - skillY - lastSkillY);
  896.  
  897.  
  898.     if(skillWidth > 100) {
  899.                 skillCtx.font = "9pt Minecraftia";
  900.                 skillCtx.fillStyle = "rgba(200, 200, 200, 0.7)";
  901.                 skillCtx.fillText("Abilities", skillWidth / 2, 14);
  902.         } else {
  903.                 skillCtx.font = "6pt Minecraftia";
  904.                 skillCtx.fillStyle = "rgba(200, 200, 200, 0.7)";
  905.                 skillCtx.fillText("Abilities", skillWidth / 2, 14);
  906.     }
  907.  
  908.     skillCtx.fillRect(20, 20, skillWidth - 40, 2);
  909.     skillCtx.strokeStyle = "rgba(255, 255, 255, 1)";
  910.     if(typeof skillLines !== "undefined") {
  911.         for(var i=0;i<skillLines.length;i++) {
  912.             if(localPlayer.abilityLevels[skillLines[i][1]][0] >= skillLines[i][2] && localPlayer.playerLevel >= skillLines[i][0])
  913.                 skillCtx.fillStyle = "rgba(255, 255, 255, 1)";
  914.                     else
  915.                 skillCtx.fillStyle = "rgba(255, 255, 255, .2)";
  916.  
  917.             skillCtx.fillRect(skillTabs.startX + skillLines[i][3], skillTabs.startY + 15 + skillLines[i][4], (skillLines[i][5] - skillLines[i][3]), (skillLines[i][6] - skillLines[i][4]));
  918.         }
  919.     }
  920.     spriteIndex = 0;
  921.     for(var i=0;i<skillButtonList.length;i++) {
  922.         skillCtx.strokeRect(skillButtonList[i][0], skillButtonList[i][1], sbW, sbH);
  923.         spriteIndex += 1;
  924.         if(typeof mySkillSprites[spriteIndex] === "undefined" && mySkills[i] && typeof mySkills[i] !== "undefined" && mySkills[i] != null) {
  925.             var texLoc = 'sprites/'+mySkills[i][2]+".png";
  926.             mySkillSprites[spriteIndex] = new Image();
  927.             mySkillSprites[spriteIndex].src = texLoc;
  928.             mySkillSprites[spriteIndex].onload = (function () {
  929.             var thisX = skillButtonList[i][0];
  930.             var thisY = skillButtonList[i][1];
  931.             return function () {
  932.                 skillCtx.drawImage(this, thisX, thisY);
  933.             };
  934.             }());
  935.         } else if(typeof mySkillSprites[spriteIndex] !== "undefined" && i != abilityDown2){
  936.             var thisX = skillButtonList[i][0];
  937.             var thisY = skillButtonList[i][1];
  938.                 skillCtx.drawImage(mySkillSprites[spriteIndex], thisX, thisY);
  939.         }
  940.         if(typeof mySkills[i] !== "undefined") {
  941.             var skill = mySkills[i][3];
  942.             if(Date.now() - localPlayer.abilities[skill] < cooldowns[skill]) {
  943.                 skillCtx.fillStyle = "rgba(0, 0, 0, 0.6)";
  944.                 skillCtx.fillRect(skillButtonList[i][0]-1, skillButtonList[i][1]-1 + (sbH * ((Date.now() - localPlayer.abilities[skill]) / cooldowns[skill])), sbW+2, 2 + 32 - (sbH * ((Date.now() - localPlayer.abilities[skill]) / cooldowns[skill])));
  945.             }
  946.         }
  947.         if(skillEdit)
  948.             skillCtx.fillStyle = "yellow";
  949.         else
  950.             skillCtx.fillStyle = "rgba(200, 200, 200, 0.7)";
  951.         skillCtx.font = "5pt Minecraftia";
  952.         var keyName = nameForKey(abilityKey[i]);
  953.         skillCtx.fillText(keyName, skillButtonList[i][0] + 16, skillButtonList[i][1] + 42);
  954.         skillCtx.fillStyle = "rgba(200, 200, 200, 0.7)";
  955.     }
  956.  
  957.         skillCtx.fillRect(20, 75, skillWidth - 40, 2);
  958.  
  959.         spriteIndex = 0;
  960.         skillCtx.textAlign = "center";
  961.         skillCtx.font = "6pt Minecraftia";
  962.         skillCtx.fillText("Points Available: "+localPlayer.abilityPoints, skillTabs.startX + ((skillWidth - 44) / 2), skillY + lastSkillY + 12);
  963.         skillCtx.textAlign = "left";
  964.         skillCtx.font = "6pt Minecraftia";
  965.     if(typeof skillList !== "undefined") {
  966.         for(var i=0;i<skillList.length;i++) {
  967.             spriteIndex += 1;
  968.  
  969.             if(typeof skillSprites[spriteIndex] === "undefined") {
  970.                 var texLoc = 'sprites/'+skillList[i][2]+".png";
  971.                 skillSprites[spriteIndex] = new Image();
  972.                 skillSprites[spriteIndex].src = texLoc;
  973.                 skillSprites[spriteIndex].onload = (function () {
  974.                 var thisX = skillList[i][0] + skillTabs.startX;
  975.                 var thisY = skillList[i][1] + skillY + lastSkillY;
  976.                 return function () {
  977.                     skillCtx.drawImage(this, thisX, thisY);
  978.                 };
  979.                 }());
  980.             } else {
  981.                 var thisX = skillList[i][0] + skillTabs.startX;
  982.                 var thisY = skillList[i][1] + skillY + lastSkillY;
  983.                     skillCtx.drawImage(skillSprites[spriteIndex], thisX, thisY);
  984.             }
  985.  
  986.                     var levelReq = skillList[i][4];
  987.                     var abilReq = skillList[i][5];
  988.                     var abilLevelReq = skillList[i][6];
  989.  
  990.             if(abilReq >= 0 || levelReq > 1) {
  991.                     if(localPlayer.playerLevel < levelReq || (abilReq < 0 || (abilReq >= 0 && localPlayer.abilityLevels[abilReq][0] < abilLevelReq))) {
  992.                             skillCtx.strokeStyle = "rgba(255, 255, 255, 0.2)";
  993.                             skillCtx.fillStyle = "rgba(0, 0, 0, 0.5)";
  994.                             skillCtx.fillRect(skillList[i][0] + skillTabs.startX, skillList[i][1] + skillY + lastSkillY, sW, sH);
  995.                         } else {
  996.                             skillCtx.strokeStyle = "rgba(255, 255, 255, 1)";
  997.                     }
  998.                 } else {
  999.                     skillCtx.strokeStyle = "rgba(255, 255, 255, 1)";
  1000.             }
  1001.                 skillCtx.strokeRect(skillList[i][0] + skillTabs.startX, skillList[i][1] + skillY + lastSkillY, sW, sH);
  1002.                 var maxLevel = localPlayer.abilityLevels[skillList[i][3]][1];
  1003.                 var xS = 0, xM = 1;
  1004.                 if(maxLevel == 1) {
  1005.                         xM = 1;
  1006.                     } else if(maxLevel == 3) {
  1007.                         xM = 8;
  1008.                         xS = 5;
  1009.                     } else if(maxLevel == 5) {
  1010.                         xM = 6.75;
  1011.                     } else {
  1012.                         xM = 5;
  1013.                 }
  1014.                 for(var j=0;j<maxLevel;j++) {
  1015.                     if(localPlayer.abilityLevels[skillList[i][3]][0] > j) {
  1016.                             skillCtx.fillStyle = "rgba(255, 255, 255, 1)";
  1017.                         } else {
  1018.                             skillCtx.fillStyle = "rgba(255, 255, 255, 0.2)";
  1019.                     }
  1020.                     skillCtx.fillRect(skillList[i][0] + skillTabs.startX + 1 + xS + (j * xM), skillList[i][1] + skillY + lastSkillY + 36, 3, 3);
  1021.                 }
  1022.             if(localPlayer.playerLevel >= levelReq && (abilReq < 0 || (abilReq >= 0 && localPlayer.abilityLevels[abilReq][0] >= abilLevelReq))) {
  1023.                 if(localPlayer.abilityLevels[skillList[i][3]][0] < localPlayer.abilityLevels[skillList[i][3]][1]) {
  1024.                     if(localPlayer.abilityPoints > 0) {
  1025.                             skillCtx.fillStyle = "rgba(0, 255, 0, 1)";
  1026.                         } else {
  1027.                             skillCtx.fillStyle = "rgba(155, 155, 155, .5)";
  1028.                     }
  1029.                     /*skillCtx.strokeStyle = "rgba(255, 255, 255, 1)";
  1030.                     skillCtx.strokeRect(skillList[i][0] + skillTabs.startX, skillList[i][1] + skillY + lastSkillY + 22, 10, 10);*/
  1031.                     skillCtx.font = "8pt Minecraftia";
  1032.                     skillCtx.fillText("+", skillList[i][0] + skillTabs.startX + 2, skillList[i][1] + skillY + lastSkillY + 32);
  1033.                 }
  1034.             }
  1035.         }
  1036.     }
  1037. }
  1038.  
  1039. function drawSkillButtons() {
  1040.     skillBCanvas.width = skillBWidth;
  1041.     skillBCanvas.height = skillBHeight;
  1042.     skillBCtx.fillStyle = "rgba(0, 0, 0, 0.6)";
  1043.     skillBCtx.fillRect(0, 0, skillBWidth, skillBHeight);
  1044.     skillBCtx.fillStyle = "rgba(200, 200, 200, 0.7)";
  1045.     skillBCtx.textAlign = "center";
  1046.     spriteIndex = 0;
  1047.     var sbW = 32, sbH = 32;
  1048.     for(var i=0;i<skillBarButtonList.length;i++) {
  1049.         //console.log(i)
  1050.         skillBCtx.strokeStyle = "white";
  1051.         skillBCtx.strokeRect(skillBarButtonList[i][0], skillBarButtonList[i][1], sbW, sbH);
  1052.         spriteIndex += 1;
  1053.         if(typeof mySkillSprites[spriteIndex] === "undefined" && mySkills[i] && typeof mySkills[i] !== "undefined" && mySkills[i] != null) {
  1054.             var texLoc = 'sprites/'+mySkills[i][2]+".png";
  1055.             mySkillSprites[spriteIndex] = new Image();
  1056.             mySkillSprites[spriteIndex].src = texLoc;
  1057.             mySkillSprites[spriteIndex].onload = (function () {
  1058.             var thisX = skillBarButtonList[i][0];
  1059.             var thisY = skillBarButtonList[i][1];
  1060.             return function () {
  1061.                 skillBCtx.drawImage(this, thisX, thisY);
  1062.             };
  1063.             }());
  1064.         } else if(typeof mySkillSprites[spriteIndex] !== "undefined" && mySkillSprites[spriteIndex] !== null){
  1065.             var thisX = skillBarButtonList[i][0];
  1066.             var thisY = skillBarButtonList[i][1];
  1067.                 skillBCtx.drawImage(mySkillSprites[spriteIndex], thisX, thisY);
  1068.         }
  1069.         if(typeof mySkills[i] !== "undefined") {
  1070.             var skill = mySkills[i][3];
  1071.             if(Date.now() - localPlayer.abilities[skill] < cooldowns[skill]) {
  1072.                 skillBCtx.fillStyle = "rgba(0, 0, 0, 0.6)";
  1073.                 skillBCtx.fillRect(skillBarButtonList[i][0]-1, skillBarButtonList[i][1]-1 + (sbH * ((Date.now() - localPlayer.abilities[skill]) / cooldowns[skill])), sbW+2, 2 + 32 - (sbH * ((Date.now() - localPlayer.abilities[skill]) / cooldowns[skill])));
  1074.             }
  1075.         }
  1076.         skillBCtx.font = "5pt Minecraftia";
  1077.         var keyName = nameForKey(abilityKey[i]);
  1078.         skillBCtx.fillText(keyName, skillBarButtonList[i][0] + 16, skillBarButtonList[i][1] + 42);
  1079.         skillBCtx.fillStyle = "rgba(200, 200, 200, 0.7)";
  1080.     }
  1081. }
  1082.  
  1083. function onNewSkilltab(data) {
  1084.     skillSprites = {};
  1085.     localPlayer["abilityPoints"] = data.points;
  1086.     localPlayer["abilityLevels"] = data.levels;
  1087.     skillList = data.tab;
  1088.     skillLines = data.lines;
  1089.     mySkills = new Array(6);
  1090.     for(var i=0;i<data.myAbilities.length;i++) {
  1091.         if(data.myAbilities[i] !== null && typeof data.myAbilities[i] !== "undefined")
  1092.             mySkills[i] = data.myAbilities[i];
  1093.         else {
  1094.             mySkills[i] = false;
  1095.         }
  1096.     }
  1097.     if(showSkills)
  1098.         drawSkills();
  1099. }
  1100.  
  1101. function getHoveredAbility(mouseX, mouseY) {
  1102.     var left = parseInt($("#skillCanvas").css("left"), 10);
  1103.     var top = parseInt($("#skillCanvas").css("top"), 10);
  1104.     for(var i=0;i<skillList.length;i++) {
  1105.         if(inSquare(mouseX, mouseY, left + skillTabs.startX + skillList[i][0], left + skillTabs.startX + skillList[i][0] + 32, top + skillTabs.startY + 15 + skillList[i][1], top + skillTabs.startY + 15 + skillList[i][1] + 32)) {
  1106.             return i;
  1107.         }          
  1108.     }
  1109.     return -1;
  1110. }
  1111.  
  1112. function getHoveredAbility2(mouseX, mouseY) {
  1113.     var left = parseInt($("#skillCanvas").css("left"), 10);
  1114.     var top = parseInt($("#skillCanvas").css("top"), 10);
  1115.     for(var i=0;i<skillButtonList.length;i++) {
  1116.         if(inSquare(mouseX, mouseY, left + skillButtonList[i][0], left + skillButtonList[i][0] + 32, top + skillButtonList[i][1], top + skillButtonList[i][1] + 32)) {
  1117.             return i;
  1118.         }          
  1119.     }
  1120.     return -1;
  1121. }
  1122.  
  1123. var invItemSprites = [];
  1124.  
  1125. function drawInventory() {
  1126.     inventoryCanvas.width = inventoryCanvas.width;
  1127.     console.log("drawinventory")
  1128.     if(showInventory) {
  1129.     var spriteNum = 0;
  1130.     var spriteIndex = 0;
  1131.    
  1132.     var drawX = 18, drawY = 38;// item drawing position
  1133.     if(localPlayer)
  1134.     var inventoryMax = localPlayer.getInventoryMax();
  1135.     chatWidth = chatEndX - chatStartX;
  1136.     chatHeight = chatEndY - chatStartY;
  1137.     invWidth = invEndX - invStartX;
  1138.     invHeight = invEndY - invStartY;
  1139.  
  1140.     if(chatWidth < 80)
  1141.         chatWidth = 80;
  1142.     if(chatHeight < 100)
  1143.         chatHeight = 100;
  1144.     if(chatWidth > innerWidth - 200)
  1145.         chatWidth = innerWidth - 200;
  1146.     if(chatHeight > innerHeight - 200)
  1147.         chatHeight = innerHeight - 200;
  1148.     if(invWidth < 80)
  1149.         invWidth = 80;
  1150.     if(invHeight < 100)
  1151.         invHeight = 100;
  1152.     if(invWidth > innerWidth - 200)
  1153.         invWidth = innerWidth - 200;
  1154.     if(invHeight > innerHeight - 200)
  1155.         invHeight = innerHeight - 200;
  1156.     inventoryCanvas.width = invWidth;
  1157.     inventoryCanvas.height = invHeight;
  1158.     $('#inventoryCanvas').css({
  1159.             width: invWidth,
  1160.             height: invHeight
  1161.     });
  1162.     //inventoryCtx.globalAlpha = 1;
  1163.     inventoryCtx.fillStyle = "rgba(0, 0, 0, .6)";
  1164.     inventoryCtx.fillRect(10, 10, invWidth-20, invHeight-20);
  1165.     inventoryCtx.textAlign = "center";
  1166.  
  1167.     if(invWidth > 100) {
  1168.                 inventoryCtx.font = "9pt Minecraftia";
  1169.                 inventoryCtx.fillStyle = "rgba(200, 200, 200, 0.7)";
  1170.                 inventoryCtx.fillText("Inventory", invWidth / 2, 24);
  1171.             } else {
  1172.                 inventoryCtx.font = "6pt Minecraftia";
  1173.                 inventoryCtx.fillStyle = "rgba(200, 200, 200, 0.7)";
  1174.                 inventoryCtx.fillText("Inventory", invWidth / 2, 24);
  1175.         }
  1176.     inventoryCtx.fillRect(20, 30, invWidth - 40, 2);
  1177.     inventoryCtx.globalAlpha = 1;
  1178.     for(var i = 0; i <= inventoryMax; i++) {
  1179.                     noItem = false;
  1180.                 if(localPlayer.inventory[i] != null) {
  1181.  
  1182.                     itemPath = getItemPath(localPlayer.inventory[i]["type"]);
  1183.                     if(itemPath == "none")
  1184.                         noItem = true;
  1185.  
  1186.                     if(!noItem) {
  1187.                         if(drawY + 60 > invHeight)
  1188.                             break;
  1189.  
  1190.                            
  1191.  
  1192.                             //itemSprite = new Image();
  1193.                             //itemSprite.src = 'sprites/'+itemPath;
  1194.                             if(i == itemDownID && itemDown)
  1195.                                 inventoryCtx.strokeStyle = "grey";
  1196.                             else
  1197.                                 inventoryCtx.strokeStyle = localPlayer.getBonusColor(localPlayer.inventory[i].rarity);
  1198.                                
  1199.                             inventoryCtx.strokeRect(drawX, drawY, 44, 44);
  1200.                             if(i == itemDownID && itemDown) {
  1201.                                     //inventoryCtx.drawImage(invItemSprites[spriteIndex], drawX, drawY);
  1202.                                     spriteIndex += 1;
  1203.                                 } else {
  1204.                                     var texLoc = 'sprites/'+itemPath;
  1205.                                     if(!invItemSprites[spriteIndex] || typeof invItemSprites[spriteIndex] === "undefined") {
  1206.                                         invItemSprites[spriteIndex] = new Image();
  1207.                                         invItemSprites[spriteIndex].onload = (function () {
  1208.                                             var thisX = drawX;
  1209.                                             var thisY = drawY;
  1210.                                             return function () {
  1211.                                                 inventoryCtx.drawImage(this, thisX, thisY);
  1212.                                             };
  1213.                                         }());
  1214.                                         invItemSprites[spriteIndex].src = texLoc;
  1215.                                     } else {
  1216.                                         inventoryCtx.drawImage(invItemSprites[spriteIndex], drawX, drawY);
  1217.                                     }
  1218.                                     spriteIndex += 1;
  1219.                                     //inventoryCtx.drawImage(itemSprite, 0, 0, 44, 44, drawX, drawY, 44, 44);
  1220.                                     inventoryCtx.font = "6pt PressStart";
  1221.                                     inventoryCtx.fillStyle = "rgba(0, 0, 0, 1)";
  1222.                                     if(isStackable(localPlayer.inventory[i]["type"])) {
  1223.                                         inventoryCtx.textAlign = "right";
  1224.                                         inventoryCtx.fillText(localPlayer.inventory[i]["amount"], drawX + 41, drawY + 41);
  1225.                                         inventoryCtx.fillStyle = "rgba(255, 255, 255, 1)";
  1226.                                         inventoryCtx.fillText(localPlayer.inventory[i]["amount"], drawX + 42, drawY + 42);
  1227.                                     }
  1228.                             }
  1229.  
  1230.                             if(drawX + 108 > invWidth){
  1231.                                 drawX = 18;
  1232.                                 drawY += 48;
  1233.                                 } else {
  1234.                                 drawX += 48;
  1235.                             }
  1236.                     }
  1237.                 } else {
  1238.                         if(drawY + 60 > invHeight)
  1239.                             break;
  1240.                             inventoryCtx.strokeStyle = "grey";
  1241.                             inventoryCtx.strokeRect(drawX, drawY, 44, 44);
  1242.                             if(drawX + 108 > invWidth){
  1243.                                 drawX = 18;
  1244.                                 drawY += 48;
  1245.                                 } else {
  1246.                                 drawX += 48;
  1247.                             }
  1248.                     }
  1249.             }
  1250.     //$("#inventoryCanvas").fadeIn(1);
  1251. }
  1252. };
  1253.  
  1254. function dropItem(i) {
  1255.     $("#confirmation").removeClass("hideClass");
  1256.     $("#confirmContainer").html("Really drop "+localPlayer.inventory[i].name+"?");
  1257.     droppingItem = i;
  1258. }
  1259.  
  1260. function drawBag(data) {
  1261.  
  1262.     if(data)
  1263.         bag = data;
  1264.  
  1265.     bagCanvas.width = bagCanvas.width;
  1266.  
  1267.     if(showBag && bag) {
  1268.         var spriteNum = 0;
  1269.         var spriteIndex = 0;
  1270.         var sprites = [];
  1271.  
  1272.         var drawX = 15, drawY = 38;// start position
  1273.  
  1274.         bagWidth = bagEndX - bagStartX;
  1275.         bagHeight = bagEndY - bagStartY;
  1276.  
  1277.         if(bagWidth < 80)
  1278.             bagWidth = 80;
  1279.         if(bagHeight < 100)
  1280.             bagHeight = 100;
  1281.         if(bagWidth > innerWidth - 200)
  1282.             bagWidth = innerWidth - 200;
  1283.         if(bagHeight > innerHeight - 200)
  1284.             bagHeight = innerHeight - 200;
  1285.  
  1286.         bagCanvas.width = bagWidth;
  1287.         bagCanvas.height = bagHeight;
  1288.         $('#bagCanvas').css({
  1289.                 width: bagWidth,
  1290.                 height: bagHeight
  1291.             });
  1292.         bagCtx.fillStyle = "rgba(0, 0, 0, 0.6)";
  1293.         bagCtx.fillRect(10, 10, bagWidth-20, bagHeight-20);
  1294.         bagCtx.fillRect(20, 30, bagWidth - 40, 2);
  1295.         bagCtx.globalAlpha = 1;
  1296.         for(var i = 0; i <= 20; i++) {
  1297.                         noItem = false;
  1298.                     if(bag["items"][i] != null) {
  1299.                         itemPath = getItemPath(bag["items"][i]["type"]);
  1300.  
  1301.                         if(itemPath == "none")
  1302.                             noItem = true;
  1303.  
  1304.                         if(!noItem) {
  1305.  
  1306.                             if(drawY + 57 > bagHeight)
  1307.                                 break;
  1308.  
  1309.                                 //bagCtx.strokeStyle = "#FFF";
  1310.                                
  1311.                                 bagCtx.strokeStyle = localPlayer.getBonusColor(bag["items"][i].rarity);
  1312.                                 bagCtx.strokeRect(drawX, drawY, 44, 44);
  1313.  
  1314.                                 if(i == itemDownID && itemDown) {
  1315.                                    
  1316.                                     } else {
  1317.                                             var texLoc = 'sprites/'+itemPath;
  1318.                                             sprites[spriteIndex] = new Image();
  1319.                                             sprites[spriteIndex].onload = (function () {
  1320.                                                 var thisX = drawX;
  1321.                                                 var thisY = drawY;
  1322.                                                 return function () {
  1323.                                                     bagCtx.drawImage(this, thisX, thisY);
  1324.                                                 };
  1325.                                             }());
  1326.                                             sprites[spriteIndex].src = texLoc;
  1327.                                             spriteIndex += 1;
  1328.                                             bagCtx.font = "6pt Minecraftia";
  1329.                                             bagCtx.fillStyle = "rgba(200, 200, 200, 0.8)";
  1330.                                             if(isStackable(bag["items"][i]["type"]))
  1331.                                                 bagCtx.fillText(bag["items"][i]["amount"], drawX + 8, drawY + 40);
  1332.                                             //newBag = false;
  1333.                                 }
  1334.  
  1335.                                 if(drawX + 105 > bagWidth){
  1336.                                         drawX = 15;
  1337.                                         drawY += 48;
  1338.                                     } else {
  1339.                                         drawX += 48;
  1340.                                 }
  1341.                         }
  1342.                     } else {
  1343.                             if(drawY + 57 > bagHeight)
  1344.                                 break;
  1345.                                 bagCtx.strokeStyle = "grey";
  1346.                                 bagCtx.strokeRect(drawX, drawY, 44, 44);
  1347.                                 if(drawX + 105 > bagWidth){
  1348.                                         drawX = 15;
  1349.                                         drawY += 48;
  1350.                                     } else {
  1351.                                         drawX += 48;
  1352.                                 }
  1353.                         }
  1354.                 }
  1355.         //$("#bagCanvas").fadeIn(1);
  1356.     }
  1357. };
  1358.  
  1359. function drawBagText(data) {
  1360.  
  1361.     if(data)
  1362.         bag = data;
  1363.  
  1364.     //bagCanvas.width = bagCanvas.width;
  1365.  
  1366.     if(showBag && bag) {
  1367.         var spriteNum = 0;
  1368.         var spriteIndex = 0;
  1369.         var sprites = [];
  1370.         var drawX = 18, drawY = 38;// start position
  1371.  
  1372.         bagWidth = bagEndX - bagStartX;
  1373.         bagHeight = bagEndY - bagStartY;
  1374.  
  1375.         if(bagWidth < 80)
  1376.             bagWidth = 80;
  1377.         if(bagHeight < 100)
  1378.             bagHeight = 100;
  1379.         if(bagWidth > innerWidth - 200)
  1380.             bagWidth = innerWidth - 200;
  1381.         if(bagHeight > innerHeight - 200)
  1382.             bagHeight = innerHeight - 200;
  1383.  
  1384.         //bagCanvas.width = bagWidth;
  1385.         //bagCanvas.height = bagHeight;
  1386.         $('#bagCanvas').css({
  1387.             //  width: bagWidth,
  1388.                 //height: bagHeight
  1389.             });
  1390.         //bagBuffer.width = bagWidth;
  1391.         //bagBuffer.height = bagHeight;
  1392.         bagCtx.fillStyle = "rgba(0, 0, 0, 0.6)";
  1393.         //bagCtx.fillRect(10, 10, bagWidth-20, bagHeight-20);
  1394.         bagCtx.clearRect(10, 10, bagWidth-20, 20);
  1395.         bagCtx.fillRect(10, 10, bagWidth-20, 20);
  1396.         bagCtx.textAlign = "center";
  1397.  
  1398.         if(bagWidth > 100) {
  1399.                 bagCtx.font = "9pt Minecraftia";
  1400.                 bagCtx.fillStyle = "rgba(200, 200, 200, 0.7)";
  1401.                 bagCtx.fillText("Bag", bagWidth / 2, 24);
  1402.                 bagCtx.font = "7pt Minecraftia";
  1403.                 bagCtx.textAlign = "left";
  1404.                 if(takeHover)
  1405.                     bagCtx.fillStyle = "rgba(100, 100, 100, 0.7)";
  1406.                 bagCtx.fillText("Take all", 12, 24);
  1407.                     bagCtx.fillStyle = "rgba(200, 200, 200, 0.7)";
  1408.                 bagCtx.textAlign = "right";
  1409.                 if(disposeHover)
  1410.                     bagCtx.fillStyle = "rgba(100, 100, 100, 0.7)";
  1411.                 bagCtx.fillText("Dispose", bagWidth - 12, 24);
  1412.                 bagCtx.fillStyle = "rgba(200, 200, 200, 0.7)";
  1413.             } else {
  1414.                 bagCtx.font = "6pt Minecraftia";
  1415.                 bagCtx.fillStyle = "rgba(200, 200, 200, 0.7)";
  1416.                 bagCtx.fillText("Bag", bagWidth / 2, 24);
  1417.                 bagCtx.font = "5pt Minecraftia";
  1418.                 bagCtx.textAlign = "left";
  1419.                 if(takeHover)
  1420.                     bagCtx.fillStyle = "rgba(100, 100, 100, 0.7)";
  1421.                 bagCtx.fillText("Take all", 12, 24);
  1422.                 bagCtx.fillStyle = "rgba(200, 200, 200, 0.7)";
  1423.                 bagCtx.textAlign = "right";
  1424.                 if(takeHover)
  1425.                     bagCtx.fillStyle = "rgba(100, 100, 100, 0.7)";
  1426.                 bagCtx.fillText("Dispose", bagWidth - 12, 24);
  1427.                 bagCtx.fillStyle = "rgba(200, 200, 200, 0.7)";
  1428.         }
  1429.     }
  1430. };
  1431.  
  1432. function onBuffUsed(data) {
  1433.     var aid = data.id;
  1434.     var player = playerByPid(data.pid);
  1435.  
  1436.     if(!player)
  1437.         return;
  1438.  
  1439.     switch(aid) {
  1440.         case 8:
  1441.             player.dragonOpacity = .01;
  1442.         break;
  1443.  
  1444.         default:
  1445.             console.log("No buff")
  1446.     }
  1447. }
  1448.  
  1449. function onRemoveItem(data) {
  1450.     if(localPlayer.getID() == data.pid) {
  1451.         localPlayer.removeItem(data.type, data.amount);
  1452.         if(typeof data.slot !== "undefined")
  1453.             if(!localPlayer.inventory[data.slot])
  1454.                 clearHoverItem();
  1455.         invItemSprites = [];
  1456.         if(showInventory)
  1457.             drawInventory();
  1458.     }
  1459. }
  1460.  
  1461. function onItemTaken(data) {
  1462.         var playerPos = localPlayer.getPos();
  1463.         var playerAbsPos = localPlayer.getAbsPos();
  1464.         localPlayer.takeItem(data.name, data.type, data.amount, data.rarity, data.stacks);
  1465.         console.log("Item taken, name: "+data.name+" type: "+data.type+" amount: "+data.amount+" player: "+playerPos.x+" y:"+playerPos.y+' absX '+playerAbsPos.absX+" absy:"+playerAbsPos.absY);
  1466.         localPlayer.displayStats();
  1467.         localPlayer.initInventory();
  1468.         localPlayer.initEquipment();
  1469.         invItemSprites = [];
  1470.         if(showInventory)
  1471.             drawInventory();
  1472. };
  1473.  
  1474. function onNewItem(data) {
  1475.     var item = {x: data.x, y: data.y, type: data.type, id: data.id};
  1476.     items.push(item);
  1477. };
  1478.  
  1479. function onNewBags(data) {
  1480.     //var item = {x: data.x, y: data.y, type: data.type};
  1481.     if(data.id == localPlayer.getID()) {
  1482.         for(var i = 0; i < data.bags.length; i++)
  1483.             newItems.push(data.bags[i]);
  1484.         //for(var i=0; i<newItems.length;i++)
  1485.             //items.push(newItems[i]);
  1486.  
  1487.         //newItems = [];
  1488.     }
  1489. };
  1490.  
  1491. function onUpdateWorld(data) {
  1492.     renderMap[data.x][data.y] = data.id;
  1493. };
  1494.  
  1495. function onPlayerHurt(data) {
  1496.     var movePlayer = playerByPid(data.pid);
  1497.         if (!movePlayer) {
  1498.             console.log("MovePlayer - Player not found: "+data.id);
  1499.             return;
  1500.         };
  1501.         movePlayer.getHurt(data.amount);
  1502.         if(movePlayer.currhp <= 0) {
  1503.             movePlayer.setAbsPos(data.respawnx, data.respawny);
  1504.             movePlayer.setPos(data.respawnx, data.respawny);
  1505.             movePlayer.setHp(data.hp);
  1506.         }
  1507.     if(data.id == localPlayer.getID()) {
  1508.         //localPlayer.getHurt(data.amount);
  1509.         localPlayer.displayStats();
  1510.         if(localPlayer.currhp <= 0) {
  1511.             //localPlayer.setBgPos(0, 0);
  1512.             //localPlayer.setAbsPos(data.respawnx, data.respawny);
  1513.             //localPlayer.setPos(data.respawnx, data.respawny);
  1514.             //localPlayer.setHp(data.hp);
  1515.             localPlayer.displayStats();
  1516.         }
  1517.     }
  1518.    
  1519. };
  1520.  
  1521. function onHealPlayer(data) {
  1522.     var player = playerByPid(data.pid);
  1523.  
  1524.         if (!player) {
  1525.             console.log("onHealPlayer - Player not found: "+data.id);
  1526.             return;
  1527.         };
  1528.  
  1529.         player.getHeal(data.amount);
  1530.  
  1531.         if(data.pid == localPlayer.pid) {
  1532.             localPlayer.displayStats();
  1533.         }
  1534. };
  1535.  
  1536. function onPlayerDead(data) {
  1537.  
  1538. };
  1539.  
  1540. function onPlayerRespawn(data) {
  1541.     var movePlayer = playerByPid(data.pid);
  1542.     // Player not found
  1543.     if (!movePlayer) {
  1544.         console.log("MovePlayer - Player not found: "+data.id);
  1545.         return;
  1546.     };
  1547.     // Update player position
  1548.     movePlayer.setAbsPos(data.respawnx, data.respawny);
  1549.     movePlayer.setPos(data.respawnx, data.respawny);
  1550.     movePlayer.setHp(data.hp);
  1551.     if(data.id == localPlayer.getID()) {
  1552.         localPlayer.setBgPos(0, 0);
  1553.         localPlayer.setAbsPos(data.respawnx, data.respawny);
  1554.         localPlayer.setPos(data.respawnx, data.respawny);
  1555.         localPlayer.setHp(data.hp);
  1556.         localPlayer.displayStats();
  1557.     }
  1558.     console.log(data.respawnx)
  1559. };
  1560.  
  1561. function onEnemyHurt(data) {
  1562.     var pos = localPlayer.getPos();
  1563.     var enemy = enemyById(data.enemyID);
  1564.     enemy.getHurt(data.amount);
  1565.     enemy["fightingId"] = data.pid;
  1566.     localPlayer.playerDistSound(pos.x, pos.y, enemy.getX(), enemy.getY(), "bowshot",1);
  1567. };
  1568.  
  1569. function onEnemyHeal(data) {
  1570.     var pos = localPlayer.getPos();
  1571.     var enemy = enemyById(data.enemyID);
  1572.     enemy.getHeal(data.amount);
  1573. };
  1574.  
  1575. var tellCounter = 0;
  1576. function onEnemyDead(data) {
  1577.     var enemy = enemyById(data.enemyID);
  1578.     enemy.killed();
  1579.     if(data.enemyID == localPlayer.enemyID()) {
  1580.         lastClicked = {x: null, y: null};
  1581.         localPlayer.setGoAttack(false);
  1582.         localPlayer.addXP(data.xp);
  1583.         socket.emit("updatexp", {xp: data.xp, level: localPlayer.playerLevel, id: localPlayer.getID()});
  1584.         enemy["hitArray"].length = 0;
  1585.         tellCounter = 0;
  1586.  
  1587.         // Check if player had a killing quest
  1588.         var playerQuests = localPlayer.playerQuests();
  1589.         for(var i = 0; i < playerQuests.length; i += 1) {
  1590.             console.log("playerQuests[i][2] = "+playerQuests[i][2]+", playerQuests[i][3] = "+playerQuests[i][3]+", data.type = "+data.type);
  1591.             if(playerQuests[i][2] == 0 && playerQuests[i][3] == data.type) {
  1592.                 if(playerQuests[i][5] < playerQuests[i][4]) {
  1593.                     localPlayer.updateQuest(i, 1);
  1594.                 }
  1595.                 if(playerQuests[i][5] >= playerQuests[i][4]) {
  1596.                     localPlayer.questCompleted(i);
  1597.                 }
  1598.                 //break; - auskommentiert, denn wenn es z.B. 2 Kill-Bat-Quests gibt, wird nur die erste geupdated
  1599.             }
  1600.         }
  1601.     }
  1602.     //renderMap[data.x][data.y] = data.id;
  1603. };
  1604.  
  1605. function onNewRemotePlayer(data) {
  1606.     // Initialise new remote player
  1607.     var newPlayer = new Player(data.x, data.y, data.playerName, data.realName, data.playerPass, data.currhp, 0, data.level, [], [], "null", data.pid, "remote");
  1608.    
  1609.     //newPlayer.setWorldData(tileSize, worldSize);
  1610.  
  1611.     // Remove player if they already exist
  1612.     if(typeof remotePlayers !== "undefined") {
  1613.         console.log(newPlayer)
  1614.  
  1615.         for(var i=0;i<remotePlayers.length;i++)
  1616.             if(remotePlayers[i].pid == data.pid)
  1617.                 var playerFound = true;
  1618.                 //remotePlayers.splice(i,1);
  1619.  
  1620.         //if(localPlayer.pid != newPlayer.pid)
  1621.         if(!playerFound)
  1622.             remotePlayers.push(newPlayer);
  1623.     }
  1624. };
  1625.  
  1626. function onCreateLocalPlayer(data) {
  1627.     var player = data.player;
  1628.     $("#aCanvas,#bgCanvas,#gameCanvas").fadeOut(500);
  1629.     localPlayer = new Player(data.x, data.y, player.playerName, player.realName, player.playerPass, player.currhp, player.experience, player.level, player.inventory, player.equipment, player.id, player.pid, "local");
  1630.     remotePlayers.push(localPlayer);
  1631.     var wait = setTimeout(function() {
  1632.     localPlayer.setDir(player.dir);
  1633.     localPlayer.setBgPos(0, 0);
  1634.     console.log("data: "+player.x+" "+player.y)
  1635.     localPlayer.setPos(player.x, player.y);
  1636.     localPlayer.setAbsPos(player.x, player.y);
  1637.     localPlayer["x"] = player.x;
  1638.     localPlayer["y"] = player.y;
  1639.     }, 500)
  1640.     localPlayer.displayStats();
  1641.     initInventory();
  1642.     localPlayer.initInventory();
  1643.     initEquipment();
  1644.     localPlayer.initEquipment();
  1645.     localPlayer.setWorldData(tileSize, worldSize);
  1646.     //$("#gameContainer").removeClass("hideClass");
  1647.     animate();
  1648.     setTimeout(theProjectileLoop, 30);
  1649.     setTimeout(thePlayerLoop, 30);
  1650.     //doTheMove();
  1651.     socket.emit("retrieve login", { pid: localPlayer.getID() });
  1652. };
  1653.  
  1654. function getItemPath(id) {
  1655.         var itemPath = 'none';
  1656.                 switch(id){
  1657.                     case 0:
  1658.                         itemPath = "healthPotion.png";
  1659.                         break;
  1660.                     case 1:
  1661.                         itemPath = "coins.png"
  1662.                         break;
  1663.                     case 2:
  1664.                         itemPath = "bronzeHelmInv.png";
  1665.                         break;
  1666.                     case 3:
  1667.                         itemPath = "leatherBootsInv.png";
  1668.                         break;
  1669.                     case 4:
  1670.                         itemPath = "leatherBodyInv.png";
  1671.                         break;
  1672.                     case 5:
  1673.                         itemPath = "bronzeLegsInv.png";
  1674.                         break;
  1675.                     case 6:
  1676.                         itemPath = "bronzeSwordInv.png";
  1677.                         break;
  1678.                     case 7:
  1679.                         itemPath = "bronzeShieldInv.png";
  1680.                         break;
  1681.                     case 8:
  1682.                         itemPath = "diaRingInv.png";
  1683.                         break;
  1684.                     case 9:
  1685.                         itemPath = "necklaceInv.png";
  1686.                         break;
  1687.                     case 10:
  1688.                         itemPath = "capeInv.png";
  1689.                         break;
  1690.                     default:
  1691.                         itemPath = "none";
  1692.                         break;
  1693.                 }
  1694.                
  1695.                     return itemPath;
  1696.     };
  1697.  
  1698. function initInvItems(data) {
  1699.     var inventoryMax = localPlayer.getInventoryMax();
  1700.     for(var i = 0; i < inventoryMax; i += 1) {
  1701.         localPlayer.inventory[i] = data.inventory[i];
  1702.     }
  1703. }
  1704.  
  1705. function initEquipItems(data) {
  1706.     for(var i = 0; i < equipmentMax; i += 1) {
  1707.         localPlayer.equipment[i] = data.equipment[i];
  1708.     }
  1709. }
  1710.  
  1711. function useItem(box) {
  1712.     var boxID = box;
  1713.     lastBox = -1;
  1714.     socket.emit("use item", {pid: localPlayer.getID(), box: boxID});
  1715.     socket.emit("request stats", { pid: localPlayer.getID() });
  1716. }
  1717.  
  1718. function useBagItem(box) {
  1719.     var boxID = box;
  1720.     lastBox = -1;
  1721.     socket.emit("take bag item", { pid: localPlayer.getID(), box: boxID });
  1722.     //socket.emit("request stats", { pid: localPlayer.getID() });
  1723. }
  1724.  
  1725. function useItemEquip(box) {
  1726.     var boxID = ($(box).attr("id").substring(4));
  1727.     socket.emit("use item equip", {pid: localPlayer.getID(), box: boxID});
  1728.     socket.emit("request stats", { pid: localPlayer.getID() });
  1729. }
  1730.  
  1731. function initInventory() {
  1732.     /*var inventoryMax = localPlayer.getInventoryMax();
  1733.  
  1734.     for(var i = 0; i < inventoryMax; i += 1) {
  1735.         //$("#inventoryContainer").append('<div id="box'+i+'" class="invBox"></div>');
  1736.         $('#box'+i).append('<div id="box'+i+'index" class="invBoxIndex"></div>');
  1737.         $('#box'+i).click(function() {
  1738.             localPlayer.useItem(this);
  1739.             useItem(this);
  1740.             getItemDetails(this);
  1741.         });
  1742.         //$("#box"+i+"").mouseenter(function() {getItemDetails(i)});
  1743.         $("#box"+i+"").mouseenter(function() {
  1744.             getItemDetails(this)
  1745.         });
  1746.         $("#box"+i+"").mouseleave(function() {
  1747.             clearHoverItem();
  1748.             clearHoverItem2();
  1749.         });
  1750.     }
  1751.     console.log("Inventory initialized");*/
  1752. };
  1753.  
  1754. function initEquipment() {
  1755.     /*var equipmentMax = localPlayer.getEquipmentMax();
  1756.  
  1757.     for(var i = 0; i < equipmentMax; i += 1) {
  1758.         $("#equipmentContainer").append('<div id="ebox'+i+'" class="eBox"></div>');
  1759.         $('#ebox'+i).append('<div id="ebox'+i+'index" class="invBoxIndex"></div>');
  1760.         $('#ebox'+i).click(function() {
  1761.             //localPlayer.useItem(this);
  1762.             useItemEquip(this);
  1763.             clearHoverItem();
  1764.         });
  1765.         //$("#box"+i+"").mouseenter(function() {getItemDetails(i)});
  1766.         $("#ebox"+i+"").mouseenter(function() {getEquipDetails(this)});
  1767.         $("#ebox"+i+"").mouseleave(function() {clearHoverItem()});
  1768.     }
  1769.     console.log("Equipment initialized");*/
  1770. };
  1771. //var sprite;
  1772. var sprite = new Image();
  1773. function initMap() {
  1774.     // Draw World
  1775.  
  1776.     var playerAbs = localPlayer.getAbsPos();
  1777.  
  1778.     var worldRight = worldSize * tileSize;
  1779.     var worldBottom = worldSize * tileSize;
  1780.  
  1781.     var spriteNum = 0;
  1782.     var sprites = [];
  1783.     var spriteIndex = 0;
  1784.     enemies = [];
  1785.     //remotePlayers = [];
  1786.     remotePlayers.push(localPlayer);
  1787.     for(var i=0;i<newEnemies.length;i++)
  1788.         enemies.push(newEnemies[i]);
  1789.  
  1790.     for(var i=0; i<newItems.length;i++) {
  1791.         console.log(newItems[i])
  1792.         items.push(newItems[i]);
  1793.     }
  1794.  
  1795.     //items = newItems;
  1796.     newEnemies = [];
  1797.     newItems = [];
  1798.  
  1799.     //console.log("hi")
  1800.     bgCtx.clearRect(0, 0, worldX * 640, worldY * 360);
  1801.     aCtx.clearRect(0, 0, worldX * 640, worldY * 360);
  1802.  
  1803.     for (var w=0; w < worldX; w++)
  1804.     {
  1805.         for (var h=0; h < worldY; h++)
  1806.         {
  1807.             var texLoc = 'maps/map/'+mapName+'B_('+w+','+h+').png';
  1808.             sprites[spriteIndex] = new Image();
  1809.  
  1810.             sprites[spriteIndex].onload = (function () {
  1811.             var thisX = w * 640;
  1812.             var thisY = h * 360;
  1813.  
  1814.             return function () {
  1815.                 bgCtx.drawImage(this, thisX, thisY);
  1816.             };
  1817.         }());
  1818.             sprites[spriteIndex].src = texLoc;
  1819.             spriteIndex += 1;
  1820.         }
  1821.     }
  1822.     for (var w=0; w < worldX; w++)
  1823.     {
  1824.         for (var h=0; h < worldY; h++)
  1825.         {
  1826.             var texLoc = 'maps/map/'+mapName+'A_('+w+','+h+').png';
  1827.             sprites[spriteIndex] = new Image();
  1828.  
  1829.             sprites[spriteIndex].onload = (function () {
  1830.             var thisX = w * 640;
  1831.             var thisY = h * 360;
  1832.  
  1833.             return function () {
  1834.                 aCtx.drawImage(this, thisX, thisY);
  1835.             };
  1836.         }());
  1837.             sprites[spriteIndex].src = texLoc;
  1838.             spriteIndex += 1;
  1839.         }
  1840.     }
  1841.     var wait = setTimeout(function(){
  1842.         $("#aCanvas,#bgCanvas,#gameCanvas,#gameContainer").removeClass("hideClass");
  1843.         $("#aCanvas,#bgCanvas,#gameCanvas,#gameContainer").fadeIn(1000);
  1844.     },1000);
  1845. };
  1846.  
  1847. var sayMode;
  1848. var chatTo;
  1849. function localMessage(e) {
  1850.     if(e.keyCode == 13) {
  1851.         if(this.value) {
  1852.             var text = this.value;
  1853.             if(text.charAt(0) == "#") {
  1854.                 if(text.charAt(1) == "s") {
  1855.                     sayMode = "s";
  1856.                     chatTo = null;
  1857.                     text = text.substring(3);
  1858.                 }
  1859.                 else if(text.charAt(1) == "w") {
  1860.                     sayMode = "w";
  1861.                     chatTo = text.substring(3, text.indexOf(' ', 3));
  1862.                     text = text.substring(text.indexOf(' ', 3));
  1863.                 }
  1864.                 else if(text.charAt(1) == "n") {
  1865.                     sayMode = "n";
  1866.                     chatTo = null;
  1867.                     text = text.substring(3);
  1868.                 }
  1869.             }
  1870.             socket.emit("new message", {mode: sayMode, text: text, chatTo: chatTo});
  1871.             onNewMessage({mode: sayMode, text: text, player: localPlayer.realName});
  1872.         }
  1873.         $("#message").blur();
  1874.     }
  1875. }
  1876.  
  1877. function keyRelease(e) {
  1878.     //movement = [0, 0, 0, 0];
  1879.  
  1880.     if(keysDown[e.keyCode])
  1881.         keysDown[e.keyCode] = false;
  1882.  
  1883.     if(e.keyCode == walkUp) {
  1884.         movement[0] = 0;
  1885.         doTheMove();
  1886.     }
  1887.     if(e.keyCode == walkLeft) {
  1888.         movement[1] = 0;
  1889.         doTheMove();
  1890.     }
  1891.     if(e.keyCode == walkDown) {
  1892.         movement[2] = 0;
  1893.         doTheMove();
  1894.     }
  1895.     if(e.keyCode == walkRight) {
  1896.         movement[3] = 0;
  1897.         doTheMove();
  1898.     }
  1899.     if(e.keyCode == sprintKey) {
  1900.         doTheMove();
  1901.     }
  1902. }
  1903.  
  1904. var walkUp = 87, walkDown = 83, walkLeft = 65, walkRight = 68, sprintKey = 16;
  1905.  
  1906. function keyPress(e) {
  1907.     //console.log(e.keyCode)
  1908.     if(skillEditId > -1) {
  1909.         abilityKey[skillEditId] = e.keyCode;
  1910.         skillEditId = -1;
  1911.     }
  1912.     for(var i=0;i<abilityKey.length;i++) {
  1913.         if(e.keyCode == abilityKey[i]) {
  1914.             var endPos = {'x': localPlayer.tile.x, 'y': localPlayer.tile.y};
  1915.             socket.emit("request ability", { ability: i, id: localPlayer.id, data: { x: endPos.x, y: endPos.y } });
  1916.         }
  1917.     }
  1918.     if(e.keyCode == 27) {
  1919.         if(showSkills) {
  1920.             $("#skillCanvas").fadeOut(100);
  1921.             showSkills = false;
  1922.         } else if(showBag) {
  1923.             viewBagId = -1;
  1924.             showBag = false;
  1925.             $("#bagCanvas").fadeOut(100);
  1926.             if(hoveringItem)
  1927.                 clearHoverItem();
  1928.         } else if(showInventory) {
  1929.             $("#inventoryCanvas").fadeOut(100);
  1930.             showInventory = false;
  1931.         }
  1932.     }
  1933.     if(e.keyCode == walkUp) {
  1934.         localPlayer["moving"] = true;
  1935.         keysDown['87'] = true;
  1936.         movement[0] = 1;
  1937.         doTheMove();
  1938.     }
  1939.     if(e.keyCode == walkLeft) {
  1940.         localPlayer["moving"] = true;
  1941.         keysDown['65'] = true;
  1942.         movement[1] = 1;
  1943.         doTheMove();
  1944.     }
  1945.     if(e.keyCode == walkDown) {
  1946.         localPlayer["moving"] = true;
  1947.         keysDown['83'] = true;
  1948.         movement[2] = 1;
  1949.         doTheMove();
  1950.     }
  1951.     if(e.keyCode == walkRight) {
  1952.         localPlayer["moving"] = true;
  1953.         keysDown['68'] = true;
  1954.         movement[3] = 1;
  1955.         doTheMove();
  1956.     }
  1957.     if(e.keyCode == sprintKey) {
  1958.         keysDown['16'] = true;
  1959.         doTheMove();
  1960.     }
  1961. }
  1962.  
  1963. var movement = [0,0,0,0];
  1964. var lastRender = Date.now();
  1965.  
  1966. function doTheMove2() {
  1967.     var pos = localPlayer.getPos();
  1968.     var absPos = localPlayer.getAbsPos();
  1969.     var bgPos = localPlayer.getBgPos();
  1970.     var sprint = false;
  1971.     var movement = [0,0,0,0];
  1972.     if(keysDown['87'])
  1973.         movement[0] = 1;
  1974.     if(keysDown['65'])
  1975.         movement[1] = 1;
  1976.     if(keysDown['83'])
  1977.         movement[2] = 1;
  1978.     if(keysDown['68'])
  1979.         movement[3] = 1;
  1980.     if(keysDown['16'])
  1981.         sprint = true;
  1982.     //var lastRender = Date.now();
  1983.     //var delta = (Date.now() - lastRender)/1000;
  1984.         //if(localPlayer.hasMoved){
  1985.         //localPlayer.playerMove(delta);
  1986.         socket.emit("send move", {move: movement, id: localPlayer.getID(),x: pos.x, y: pos.y, absX: absPos.absX, absY: absPos.absY, dir: localPlayer.getDir(), canvasX: bgPos.x, canvasY: bgPos.y, sprint: sprint});
  1987.     //}
  1988. }
  1989.  
  1990. function doTheMove() {
  1991.     var pos = localPlayer.getPos();
  1992.     var absPos = localPlayer.getAbsPos();
  1993.     var bgPos = localPlayer.getBgPos();
  1994.     var player = localPlayer;
  1995.     var slow = 1;
  1996.     var increase = 1;
  1997.     /*console.log("movement below")
  1998.     console.log(pos)
  1999.     console.log(bgPos)
  2000.     console.log(absPos)*/
  2001.     var sprint = false;
  2002.     /*if(keysDown['87'])
  2003.         movement[0] = 1;
  2004.     if(keysDown['65'])
  2005.         movement[1] = 1;
  2006.     if(keysDown['83'])
  2007.         movement[2] = 1;
  2008.     if(keysDown['68'])
  2009.         movement[3] = 1;*/
  2010.  
  2011.     if(keysDown[sprintKey]) {
  2012.             sprint = true;
  2013.             player["sprint"] = true;
  2014.         } else {
  2015.             player["sprint"] = false;
  2016.     }
  2017.  
  2018.  
  2019.     //var delta = (Date.now() - lastRender);
  2020.         //lastRender = Date.now();
  2021.  
  2022.         localPlayer.playerMove(delta);
  2023.         //localPlayer.moveProcess(delta);
  2024.     var flat = .56735;
  2025.     var dt = (delta / 10) * flat;
  2026.  
  2027.     if(sprint)
  2028.         increase = 1.3;
  2029.  
  2030.     //player["xSpeed"] = 0, player["ySpeed"] = 0;
  2031.  
  2032.     var accel = player.accel;
  2033.  
  2034.     if(movement[0] == 1) { player["ySpeed"] = (-accel * increase * slow * dt ); }
  2035.     if(movement[1] == 1) { player["xSpeed"] = (-accel * increase * slow * dt ); }
  2036.     if(movement[2] == 1) { player["ySpeed"] = (accel * increase * slow * dt ); }
  2037.     if(movement[3] == 1) { player["xSpeed"] = (accel * increase * slow * dt ); }
  2038.  
  2039.     var isMoving = false; // Make sure they are still moving
  2040.  
  2041.         if(movement[1] == 1 || movement[3] == 1) {
  2042.                 isMoving = true;
  2043.                 player["movingH"] = true;
  2044.             } else {
  2045.                 player["movingH"] = false;
  2046.         }
  2047.         if(movement[0] == 1 || movement[2] == 1) {
  2048.                 isMoving = true;
  2049.                 player["movingV"] = true;
  2050.             } else {
  2051.                 player["movingV"] = false;
  2052.         }
  2053.  
  2054.  
  2055.         if(isMoving)
  2056.             player["isMoving"] = true;
  2057.         else {
  2058.             player["accel"] = 1;
  2059.             player["isMoving"] = false
  2060.         }
  2061.  
  2062.  
  2063.     /*if(player.xSpeed != 0 || player.ySpeed != 0)
  2064.         player["isMoving"] = true;
  2065.     else {
  2066.         player["accel"] = 1;
  2067.         player["isMoving"] = false;
  2068.     }*/
  2069.  
  2070.         socket.emit("update movement", { pid: player.pid, movement: movement, sprint: sprint });
  2071.  
  2072.         //socket.emit("send move", { move: movement, id: localPlayer.getID(),x: pos.x, y: pos.y, absX: absPos.absX, absY: absPos.absY, dir: localPlayer.getDir(), canvasX: bgPos.x, canvasY: bgPos.y, sprint: sprint});
  2073. }
  2074.  
  2075. function updateAngle(data) {
  2076.     var player = playerByPid(data.pid);
  2077.     if(player) {
  2078.         if(data.pid != localPlayer.getID())
  2079.             player["angle"] = data.angle;
  2080.     }
  2081. }
  2082.  
  2083. var chatTxtClr = "#c96";
  2084. var pColor = "green";
  2085. function onNewMessage(data) {
  2086.     pColor = "#fff";
  2087.  
  2088.     switch(data.mode) {
  2089.         case "s":
  2090.             chatTxtClr = "yellow";
  2091.         break;
  2092.         case "w":
  2093.             chatTxtClr = "lightblue";
  2094.         break;
  2095.         default:
  2096.             chatTxtClr = "#c96";
  2097.         break;
  2098.     }
  2099.     $(".text .mCSB_container").append("<span style='color: "+pColor+";'>"+data.player+": </span>"+"<span style='color: "+chatTxtClr+";'>"+data.text+"</span></br>");
  2100.     $(".text").mCustomScrollbar("update");
  2101.     $(".text").mCustomScrollbar("scrollTo","bottom");
  2102.     $("#message").val('');
  2103. }
  2104.  
  2105. function logout() {
  2106.     //socket.emit("logout", {id: localPlayer.getID()});
  2107.     socket.emit("logout", {id: localPlayer.getID()});
  2108.     console.log("Player "+localPlayer.getID()+" logged out");
  2109.     socket.emit("disconnect");
  2110.     window.location = "login.html";
  2111. }
  2112.  
  2113. function goLogin() {
  2114.     console.log("Player "+localPlayer.getID()+" kicked out");
  2115.     window.location = "login.html";
  2116. }
  2117.  
  2118. document.onkeyup = function(e)
  2119. {
  2120.     if(!$("#message").is(":focus")) {
  2121.         // M for map
  2122.         if(e.keyCode == 77) {
  2123.             toggleMap();
  2124.         }
  2125.         else if(e.keyCode == 73) { // i
  2126.             toggleInventory();
  2127.         }
  2128.         else if(e.keyCode == 75) { // k
  2129.             toggleSkills();
  2130.         }
  2131.         else if(e.keyCode == 81) {
  2132.             toggleQuests();
  2133.         }
  2134.         else if(e.keyCode == 67) {
  2135.             toggleStats();
  2136.         }
  2137.         // Quick access to the inventory, numbers 1 - 9
  2138.         else if(e.keyCode > 48 && e.keyCode < 58) {
  2139.             localPlayer.useItem($("#box"+(e.keyCode-48-1)));
  2140.         }
  2141.         // Show chat-input-prompt on "Return"
  2142.         else if(e.keyCode == 13) {
  2143.             if($("#input").hasClass("hideClass")) {
  2144.                 $("#input").removeClass("hideClass");
  2145.                 $("#message").focus();
  2146.             }
  2147.             else {
  2148.                 $("#message").blur();
  2149.                 $("#input").addClass("hideClass");
  2150.             }
  2151.         }
  2152.     }
  2153. }
  2154.  
  2155. function getClickedTile(e, bgPos) {
  2156.     var x = e.pageX - $("#gameArea").position().left - canvas.offsetLeft;
  2157.     var y = e.pageY - $("#gameArea").position().top - canvas.offsetTop;
  2158.     x = Math.floor((x - bgPos.x)/tileSize);
  2159.     y = Math.floor((y - bgPos.y)/tileSize);
  2160.     return {x: x, y: y};
  2161. }
  2162.  
  2163. function getClickedSquare(e, bgPos) {
  2164.     var x = e.pageX - $("#gameArea").position().left - canvas.offsetLeft;
  2165.     var y = e.pageY - $("#gameArea").position().top - canvas.offsetTop;
  2166.     x = Math.floor((x - bgPos.x));
  2167.     y = Math.floor((y - bgPos.y));
  2168.     return {x: x, y: y};
  2169. }
  2170.  
  2171. function domousepress(e) {
  2172.         mouseDownX = e.pageX, mouseDownY = e.pageY;
  2173.     }
  2174.  
  2175. function domousedown(e) {
  2176.     e.preventDefault();
  2177.     if(e.which == 1) {
  2178.         clearInterval(mousedownID);
  2179.             leftmousedown(e);
  2180.             mousedownID = setInterval(function() {
  2181.             this.leftmousedown(e);
  2182.         }, 500);
  2183.     } else if(e.which == 3 || e.button == 2){
  2184.         clearInterval(mousedownID);
  2185.             rightmousedown(e);
  2186.             mousedownID = setInterval(function() {
  2187.             this.rightmousedown(e);
  2188.         }, 500);
  2189.     }
  2190.    
  2191.     return false;
  2192. }
  2193.  
  2194. function domousedownbag(e) {
  2195.     e.preventDefault();
  2196.     if(e.which == 1) {
  2197.             leftmousedownbag(e);
  2198.         } else if(e.which == 3 || e.button == 2) {
  2199.        
  2200.     }
  2201.  
  2202.     return false;
  2203. }
  2204.  
  2205. function inSquare (x, y, startX, endX, startY, endY) {
  2206.     if((x > startX && x < endX && y > startY && y < endY))
  2207.         return true;
  2208.     return false;
  2209. }
  2210.  
  2211. function getHoveredInvItem(mouseX, mouseY) {
  2212.     inventoryMax = localPlayer.getInventoryMax();
  2213.         drawX = 18, drawY = 38;
  2214.         for(var i = 0; i < inventoryMax; i++) {
  2215.                     noItem = false;
  2216.                    
  2217.                     if(!noItem) {
  2218.                         if(drawY > invStartY + invHeight)
  2219.                             continue;
  2220.                         if(!inSquare(mouseX, mouseY, invStartX + drawX, invStartX + drawX + 44, invStartY + drawY, invStartY + drawY + 44) && showInventory){
  2221.                             if(drawX + 108 > invWidth){
  2222.                                 drawX = 18;
  2223.                                 drawY += 48;
  2224.                                 } else {
  2225.                                 drawX += 48;
  2226.                             }
  2227.                             continue;
  2228.                         } else {
  2229.                             if((invHeight + invStartY) < (drawY + invStartY + 60)) {
  2230.                                     return -1;
  2231.                                 } else {
  2232.                                     return i;
  2233.                             }
  2234.                             if(drawX + 108 > invWidth){
  2235.                                 drawX = 18;
  2236.                                 drawY += 48;
  2237.                                 } else {
  2238.                                 drawX += 48;
  2239.                             }
  2240.                         }  
  2241.                     }
  2242.             }
  2243. }
  2244.  
  2245. function getHoveredBagItem(mouseX, mouseY) {
  2246.         drawX = 15, drawY = 38;
  2247.         for(var i = 0; i < 20; i++) {
  2248.                     noItem = false;
  2249.                    
  2250.                     if(!noItem) {
  2251.                         if(drawY > bagStartY + bagHeight)
  2252.                             continue;
  2253.                         if(!inSquare(mouseX, mouseY, bagStartX + drawX, bagStartX + drawX + 44, bagStartY + drawY, bagStartY + drawY + 44) && showBag) {
  2254.                             if(drawX + 105 > bagWidth){
  2255.                                     drawX = 15;
  2256.                                     drawY += 48;
  2257.                                 } else {
  2258.                                     drawX += 48;
  2259.                             }
  2260.                             continue;
  2261.                         } else {
  2262.                             if((bagHeight + bagStartY) < (drawY + bagStartY + 60)) {
  2263.                                     return -1;
  2264.                                 } else {
  2265.                                     return i;
  2266.                             }
  2267.                         }  
  2268.                     }
  2269.             }
  2270. }
  2271.  
  2272. var cooldowns = [1000,500];
  2273.  
  2274. function onUpdateCooldown(data) {
  2275.         cooldowns = data.cooldowns;
  2276.         localPlayer.abilities[data.aid] = Date.now();
  2277. }
  2278.  
  2279. function leftmousedownbag(e) {
  2280. var clickX = e.pageX, clickY = e.pageY;
  2281.     if(showBag) {
  2282.             var left = parseInt($("#bagCanvas").css("left"), 10);
  2283.             var top = parseInt($("#bagCanvas").css("top"), 10);
  2284.             if(inSquare(clickX, clickY, left, left + bagWidth, top, top + bagHeight) && (showBag && !bagDrag)) {
  2285.                 shoot = false;
  2286.             }
  2287.             if(inSquare(clickX, clickY, left+60, left + bagWidth - 60, top+10, top + 30) && (showBag && !bagDrag)) {
  2288.                 bagDown = true;
  2289.                 bagOffX = clickX - left;
  2290.                 bagOffY = clickY - top;
  2291.                 bagStartX = clickX - bagOffX - 10;
  2292.                 bagStartY = clickY - bagOffY - 10;
  2293.                 bagEndX = bagStartX + bagWidth;
  2294.                 bagEndY = bagStartY + bagHeight;
  2295.                 bagWidth = bagEndX - bagStartX;
  2296.                 bagHeight = bagEndY - bagStartY;
  2297.             }
  2298.     }
  2299. }
  2300.  
  2301. function leftmousedown(e) {
  2302.     //var bgPos = localPlayer.getBgPos();
  2303.     //var tile = localPlayer.tile;
  2304.     var clickX = e.pageX, clickY = e.pageY;
  2305.     mouseDownX = clickX, mouseDownY = clickY;
  2306.     var shoot = true;
  2307.     console.log("leftmousedown")
  2308.     if(skillEditId > -1) {
  2309.         abilityKey[skillEditId] = 998;
  2310.         skillEditId = -1;
  2311.     }
  2312.  
  2313.     if(bagDown)
  2314.         shoot = false;
  2315.    
  2316. //if(showInventory) {
  2317.    
  2318.     if(showInventory) {
  2319.         var left = parseInt($("#inventoryCanvas").css("left"), 10);
  2320.         var top = parseInt($("#inventoryCanvas").css("top"), 10);
  2321.     if(inSquare(clickX, clickY, left, left + invWidth, top, top + invHeight) && showInventory) {
  2322.         if(inSquare(clickX, clickY, left, left + 20, top, top + 20) && showInventory) {
  2323.                 inventoryDrag = true;
  2324.                 dragType = 0;
  2325.             } else if(inSquare(e.pageX, e.pageY, left, left + 20, top+20, top + invHeight - 20) && showInventory) {
  2326.                 inventoryDrag = true;
  2327.                 dragType = 1;
  2328.             } else if(inSquare(e.pageX, e.pageY, left, left + 20, top + invHeight - 20, top + invHeight) && showInventory) {
  2329.                 inventoryDrag = true;
  2330.                 dragType = 2;
  2331.             } else if(inSquare(e.pageX, e.pageY, left + 20, left + invWidth - 20, top + invHeight - 20, top + invHeight) && showInventory) {
  2332.                 inventoryDrag = true;
  2333.                 dragType = 3;
  2334.             } else if(inSquare(e.pageX, e.pageY, left + invWidth - 20, left + invWidth, top + invHeight - 20, top + invHeight) && showInventory) {
  2335.                 inventoryDrag = true;
  2336.                 dragType = 4;
  2337.             } else if(inSquare(e.pageX, e.pageY, left + invWidth - 20, left + invWidth, top + 20, top + invHeight - 20) && showInventory) {
  2338.                 inventoryDrag = true;
  2339.                 dragType = 5;
  2340.             } else if(inSquare(e.pageX, e.pageY, left + invWidth - 20, left + invWidth, top, top + 20) && showInventory) {
  2341.                 inventoryDrag = true;
  2342.                 dragType = 6;
  2343.             } else if(inSquare(e.pageX, e.pageY, left + 20, left + invWidth - 20, top, top + 10) && showInventory) {
  2344.                 inventoryDrag = true;
  2345.                 dragType = 7;
  2346.             } else {
  2347.                 $('#inventoryCanvas').css('cursor', 'auto');
  2348.         }
  2349.         if(inventoryDrag) {
  2350.             invOffX = 0, invOffY = 0;
  2351.             invWidth = invEndX - e.pageX;
  2352.             invHeight = invEndY - e.pageY;
  2353.         }
  2354.     }
  2355.    
  2356.     if(inSquare(clickX, clickY, left+10, left + invWidth - 20, top+10, top + 30) && (showInventory && !inventoryDrag)) {
  2357.         inventoryDown = true;
  2358.         invOffX = clickX - left;
  2359.         invOffY = clickY - top;
  2360.         invStartX = clickX - invOffX - 10;
  2361.         invStartY = clickY - invOffY - 10;
  2362.         invEndX = invStartX + invWidth;
  2363.         invEndY = invStartY + invHeight;
  2364.         invWidth = invEndX - invStartX;
  2365.         invHeight = invEndY - invStartY;
  2366.         console.log(invWidth+", "+invHeight)
  2367.     }
  2368.  
  2369.     if(inSquare(clickX, clickY, left+10, left + invWidth - 20, top+30, top + invHeight - 20) && (showInventory && !inventoryDrag && !inventoryDown && !itemDown)) {
  2370.         if(itemDownID < 0)
  2371.             itemDownID = getHoveredInvItem(e.pageX, e.pageY);
  2372.            
  2373.             /*if((clickX != e.pageX || clickY != e.pageY) && itemDownID >= 0) {
  2374.             itemDown = true;
  2375.             if(localPlayer.inventory[itemDownID])
  2376.                 cursorSprite = 'sprites/'+getItemPath(localPlayer.inventory[itemDownID]["type"]);
  2377.             }*/
  2378.             //mouseDownX = mouseX, mouseDownY = mouseY;
  2379.     }
  2380.  
  2381.     if(inSquare(clickX, clickY, left, left + invWidth, top, top + invHeight) && (showInventory || inventoryDown || inventoryDrag || itemDown))
  2382.         shoot = false;
  2383.  
  2384.             } else if(showSkills) {
  2385.  
  2386.                 left = parseInt($("#skillCanvas").css("left"), 10);
  2387.                 top = parseInt($("#skillCanvas").css("top"), 10);
  2388.                 skillStartX = left;
  2389.                 skillStartY = top;
  2390.                 if(inSquare(e.pageX, e.pageY, left, left + skillWidth - 75, top, top + 20)) {
  2391.                         skillDown = true;
  2392.                         skillOffX = clickX - left;
  2393.                         skillOffY = clickY - top;
  2394.                         skillStartX = clickX - skillOffX - 10;
  2395.                         skillStartY = clickY - skillOffY - 10;
  2396.                         skillEndX = skillStartX + skillWidth;
  2397.                         skillEndY = skillStartY + skillHeight;
  2398.                         skillWidth = skillEndX - skillStartX;
  2399.                         skillHeight = skillEndY - skillStartY;
  2400.                         console.log(skillWidth+", "+skillHeight)
  2401.                     } else if(inSquare(e.pageX, e.pageY, left + skillTabs.startX, left + skillWidth, top + skillTabs.startY, top + skillTabs.startY + 30)) {
  2402.                         shoot = false;
  2403.                         var totalX = 0, totalY = 0;
  2404.                         for(var i=0;i<skillTabs.tabs.length;i++){
  2405.                             if(inSquare(e.pageX, e.pageY, left + skillTabs.startX + totalX, left + skillTabs.startX + skillTabs.tabs[i][1] + totalX, top + skillTabs.startY + totalY, top + skillTabs.startY + 15 + totalY)) {
  2406.                                 tabSelected = i;
  2407.                                 socket.emit("request skilltab", { pid: localPlayer.pid, tab: i});
  2408.                                 break;
  2409.                             }
  2410.  
  2411.                             totalX += skillTabs.tabs[i][1];
  2412.                             if(totalX + skillTabs.startX + 40 >= skillWidth) {
  2413.                                 totalX = 0;
  2414.                                 totalY += 15;
  2415.                             }
  2416.                         }
  2417.                     } else if(inSquare(e.pageX, e.pageY, left + skillWidth - 75, left + skillWidth, top, top + 20) && !skillDown) {
  2418.                         shoot = false;
  2419.                         skillEdit = !skillEdit;
  2420.                     } else if(inSquare(e.pageX, e.pageY, left, left + skillWidth, top + skillButtonList[0][1], top + skillButtonList[0][1] + 32) || inSquare(e.pageX, e.pageY, left, left + skillWidth, top + skillButtonList[0][1] + 42, top + skillHeight)) {
  2421.                         shoot = false;
  2422.                         var abilHov = getHoveredAbility(e.pageX, e.pageY);
  2423.                         if(abilHov >= 0) {
  2424.                             if(inSquare(e.pageX, e.pageY, left + skillList[abilHov][0] + skillTabs.startX, left + skillList[abilHov][0] + skillTabs.startX + 10, top + skillList[abilHov][1] + skillTabs.startY + lastSkillY + 22, top + skillList[abilHov][1] + skillTabs.startY + lastSkillY + 32))
  2425.                                 socket.emit("level ability", { id: localPlayer.id, ability: abilHov, tab: tabSelected })
  2426.                             else {
  2427.                                 var levelReq = skillList[abilHov][4];
  2428.                                 var abilReq = skillList[abilHov][5];
  2429.                                 var abilLevelReq = skillList[abilHov][6];
  2430.  
  2431.                                 if(localPlayer.abilityLevels[abilReq][0] >= abilLevelReq && localPlayer.playerLevel >= levelReq)
  2432.                                     abilityDown = abilHov;
  2433.                             }
  2434.                         }
  2435.  
  2436.                         var abilHov2 = getHoveredAbility2(e.pageX, e.pageY);
  2437.                         if(abilHov2 >= 0) {
  2438.                             abilityDown2 = abilHov2;
  2439.                         }
  2440.                     } else if(skillEdit && inSquare(e.pageX, e.pageY, left + skillButtonList[0][0], left + skillButtonList[5][0] + 32, top + skillButtonList[0][1] + 32, top + skillButtonList[0][1] + 32 + 10)) {
  2441.                         shoot = false;
  2442.                         for(var i=0;i<skillButtonList.length;i++) {
  2443.                             if(inSquare(e.pageX, e.pageY, left + skillButtonList[i][0], left + skillButtonList[i][0] + 32, top + skillButtonList[i][1] + 32, top + skillButtonList[i][1] + 32 + 10)) {
  2444.                                 skillEditId = i;
  2445.                                 abilityKey[i] = -1;
  2446.                             }
  2447.                         }
  2448.                 }
  2449.  
  2450.             } else {
  2451.                     left = parseInt($("#skillBCanvas").css("left"), 10);
  2452.                     top = parseInt($("#skillBCanvas").css("top"), 10);
  2453.                     if(inSquare(e.pageX, e.pageY, left, left + skillBWidth, top, top + 20)) {
  2454.                         skillBDown = true;
  2455.                         skillBOffX = clickX - left;
  2456.                         skillBOffY = clickY - top;
  2457.                         skillBStartX = clickX - skillBOffX - 10;
  2458.                         skillBStartY = clickY - skillBOffY - 10;
  2459.                         skillBEndX = skillBStartX + skillBWidth;
  2460.                         skillBEndY = skillBStartY + skillBHeight;
  2461.                         skillBWidth = skillBEndX - skillBStartX;
  2462.                         skillBHeight = skillBEndY - skillBStartY;
  2463.                     }
  2464.                 left = parseInt($("#chatlog").css("left"), 10);
  2465.                 top = parseInt($("#chatlog").css("top"), 10);
  2466.                 if(inSquare(e.pageX, e.pageY, left - 10, left + chatWidth + 20, top - 10, top + chatHeight + 20) && !chatDrag && !chatDown) {
  2467.                     shoot = false;
  2468.                     if(inSquare(e.pageX, e.pageY, left - 10, left + 10, top - 10, top + 10)) {
  2469.                             chatDrag = true;
  2470.                             dragType = 0;
  2471.                         } else if(inSquare(e.pageX, e.pageY, left - 10, left + 10, top+10, top + chatHeight - 10)) {
  2472.                             chatDrag = true;
  2473.                             dragType = 1;
  2474.                         } else if(inSquare(e.pageX, e.pageY, left - 10, left + 10, top + chatHeight, top + chatHeight + 20)) {
  2475.                             chatDrag = true;
  2476.                             dragType = 2;
  2477.                         } else if(inSquare(e.pageX, e.pageY, left + 10, left + chatWidth - 10, top + chatHeight, top + chatHeight + 20)) {
  2478.                             chatDrag = true;
  2479.                             dragType = 3;
  2480.                         } else if(inSquare(e.pageX, e.pageY, left + chatWidth, left + chatWidth + 20, top + chatHeight, top + chatHeight + 20)) {
  2481.                             chatDrag = true;
  2482.                             dragType = 4;
  2483.                         } else if(inSquare(e.pageX, e.pageY, left + chatWidth, left + chatWidth + 20, top + 10, top + chatHeight - 10)) {
  2484.                             chatDrag = true;
  2485.                             dragType = 5;
  2486.                         } else if(inSquare(e.pageX, e.pageY, left + chatWidth, left + chatWidth + 20, top - 10, top + 10)) {
  2487.                             chatDrag = true;
  2488.                             dragType = 6;
  2489.                         } else if(inSquare(e.pageX, e.pageY, left + 10, left + chatWidth - 10, top-10, top)) {
  2490.                             chatDrag = true;
  2491.                             dragType = 7;
  2492.                         } else {
  2493.                             $('#gameCanvas,#chatlog').css('cursor', 'auto');
  2494.                     }
  2495.                     if(inSquare(e.pageX, e.pageY, left, left + chatWidth, top, top + 20) && !chatDrag) {
  2496.                         chatDrag = false;
  2497.                         chatDown = true;
  2498.                         chatOffX = clickX - left;
  2499.                         chatOffY = clickY - top;
  2500.                         chatStartX = clickX - chatOffX - 10;
  2501.                         chatStartY = clickY - chatOffY - 10;
  2502.                         chatEndX = chatStartX + chatWidth;
  2503.                         chatEndY = chatStartY + chatHeight;
  2504.                         chatWidth = chatEndX - chatStartX;
  2505.                         chatHeight = chatEndY - chatStartY;
  2506.                     }
  2507.                     if(chatDrag && !chatDown) {
  2508.                         shoot = false;
  2509.                         chatOffX = 0, chatOffY = 0;
  2510.                         chatWidth = chatEndX - e.pageX;
  2511.                         chatHeight = chatEndY - e.pageY;
  2512.                     }
  2513.             }
  2514.         }
  2515.         if(shoot && !inventoryDrag && !inventoryDown && !chatDrag && !chatDown && !skillBDown && !skillDown) {
  2516.             var absPos = localPlayer.getAbsPos();
  2517.             var endPos = {'x': localPlayer.tile.x, 'y': localPlayer.tile.y};
  2518.             socket.emit("request ability", { ability: 4, id: localPlayer.id, data: { x: endPos.x, y: endPos.y } });
  2519.         }
  2520. }
  2521.  
  2522. function rightmousedown(e) {
  2523.     if(skillEditId > -1) {
  2524.         abilityKey[skillEditId] = 999;
  2525.         skillEditId = -1;
  2526.     }
  2527.     console.log("rightmousedown")
  2528.     var left = parseInt($("#inventoryCanvas").css("left"), 10);
  2529.     var top = parseInt($("#inventoryCanvas").css("top"), 10);
  2530.     var clickX = e.pageX, clickY = e.pageY;
  2531.     var shoot = true;
  2532.     if(inSquare(clickX, clickY, left, left + invWidth, top, top + invHeight) && (showInventory || inventoryDown || inventoryDrag || itemDown))
  2533.         shoot = false;
  2534.     if(shoot && !inventoryDrag && !inventoryDown && !chatDrag && !chatDown && !skillBDown && !skillDown) {
  2535.         var absPos = localPlayer.getAbsPos();
  2536.         var endPos = {'x': localPlayer.tile.x, 'y': localPlayer.tile.y};
  2537.         socket.emit("request ability", { ability: 5, id: localPlayer.id, data: { x: endPos.x, y: endPos.y } });
  2538.     }
  2539. }
  2540.  
  2541. var boxi, datastats, datastats2;
  2542.  
  2543. function getItemDetails(invId) {
  2544.     var boxID = invId;
  2545.     if((boxID != lastBox && localPlayer.inventory[boxID]) || lastBagBox >= 0) {
  2546.         socket.emit("request item", {pid: localPlayer.getID(), i: boxID});
  2547.         lastBox = boxID;
  2548.         lastBagBox = -1;
  2549.     } else {
  2550.         if(typeof datastats !== "undefined" && localPlayer.inventory[boxID])
  2551.             localPlayer.showItemDetails(boxi, mouseX, mouseY, datastats, datastats2, canvas.width, canvas.height);
  2552.     }
  2553. }
  2554. function getBagItemDetails(invId) {
  2555.     var boxID = invId;
  2556.     if(!bag || typeof bag === "undefined")
  2557.         return;
  2558.     console.log("getBagItemDetails")
  2559.     if((boxID != lastBagBox && bag["items"][boxID]) || lastBox >= 0) {
  2560.             socket.emit("request bag item", {pid: localPlayer.getID(), i: boxID});
  2561.             lastBagBox = boxID;
  2562.             lastBox = -1;
  2563.         } else {
  2564.             if(typeof datastats !== "undefined" && bag["items"][boxID])
  2565.                 localPlayer.showItemDetails(boxi, mouseX, mouseY, datastats, datastats2, canvas.width, canvas.height);
  2566.     }
  2567. }
  2568. function getEquipDetails(invId) {
  2569.     var boxID = ($(invId).attr("id").substring(4));
  2570.     socket.emit("request equip", {pid: localPlayer.getID(), i: boxID});
  2571. }
  2572. function displayItemDetails(data) {
  2573.     boxi = data.i, datastats = data.stats;
  2574.     if(typeof data.stats2 !== "undefined")
  2575.         datastats2 = data.stats2;
  2576.     else
  2577.         datastats2 = false;
  2578.     localPlayer.showItemDetails(data.i, mouseX, mouseY, datastats, datastats2, canvas.width, canvas.height);
  2579. }
  2580. function displayEquipDetails(data) {
  2581.     localPlayer.showItemDetails(data.i, $("#ebox"+data.i).offset().left, $("#ebox"+data.i).offset().top, data.stats, {}, canvas.width, canvas.height);
  2582. }
  2583. function onDisplayAbility(data) {
  2584.     boxi = data.ability, datastats = data.data;
  2585.     localPlayer.showAbilityDetails(data.ability, mouseX, mouseY, data.name, data.data, canvas.width, canvas.height);
  2586. }
  2587. function onSendEquip(data) {
  2588.     localPlayer.equipment[data.slot] = data.stats;
  2589. }
  2590. function clearHoverItem() {
  2591.     itemDownID = -1;
  2592.     itemDownBagID = -1;
  2593.     hoveringItem = false;
  2594.     localPlayer.hideItemDetails();
  2595. }
  2596. function clearHoverItem2() {
  2597.     localPlayer.hideItemDetails();
  2598. }
  2599. function swapInventoryItem(data) {
  2600.     //var localPlayer = playerById(data.pid);
  2601.     itemDown = false;
  2602.     itemDownID = -1;
  2603.     lastBox = -1;
  2604.     var newItem = localPlayer.inventory[data.box2];
  2605.     var oldItem = localPlayer.inventory[data.box1];
  2606.     localPlayer.inventory[data.box1] = newItem;
  2607.     localPlayer.inventory[data.box2] = oldItem;
  2608.  
  2609.     invItemSprites = [];
  2610.     if(showInventory)
  2611.         drawInventory();
  2612.     getItemDetails(data.box2);
  2613.     //inventoryCanvas.width = inventoryCanvas.width;
  2614.     //inventoryCtx.width = inventoryCtx.width;
  2615.     //inventoryCtx.drawImage(inventoryBuffer, 0, 0);
  2616. }
  2617. function dragElement (el, e) {
  2618.     if(el === "#inventoryCanvas"){
  2619.         $('#inventoryCanvas').css({
  2620.             left: e.pageX - invOffX,
  2621.             top: e.pageY - invOffY
  2622.         });
  2623.         var left = parseInt($("#inventoryCanvas").css("left"), 10);
  2624.         var top = parseInt($("#inventoryCanvas").css("top"), 10);
  2625.         invStartX = left;
  2626.         invStartY = top;
  2627.         invEndX = left + invWidth;
  2628.         invEndY = top + invHeight;
  2629.     } else
  2630.     if(el === "#skillBCanvas"){
  2631.         $('#skillBCanvas').css({
  2632.             left: e.pageX - skillBOffX,
  2633.             top: e.pageY - skillBOffY
  2634.         });
  2635.         var left = parseInt($("#skillBCanvas").css("left"), 10);
  2636.         var top = parseInt($("#skillBCanvas").css("top"), 10);
  2637.         skillBStartX = left;
  2638.         skillBStartY = top;
  2639.         skillBEndX = left + skillBWidth;
  2640.         skillBEndY = top + skillBHeight;
  2641.     } else
  2642.     if(el === "#skillCanvas"){
  2643.         $('#skillCanvas').css({
  2644.             left: e.pageX - skillOffX,
  2645.             top: e.pageY - skillOffY
  2646.         });
  2647.         var left = parseInt($("#skillCanvas").css("left"), 10);
  2648.         var top = parseInt($("#skillCanvas").css("top"), 10);
  2649.         skillStartX = left;
  2650.         skillStartY = top;
  2651.         skillEndX = left + skillWidth;
  2652.         skillEndY = top + skillHeight;
  2653.     } else
  2654.     if(el === "#chatlog"){
  2655.         $('#chatlog').css({
  2656.             left: e.pageX - chatOffX,
  2657.             top: e.pageY - chatOffY
  2658.         });
  2659.         var left = parseInt($("#chatlog").css("left"), 10);
  2660.         var top = parseInt($("#chatlog").css("top"), 10);
  2661.         chatStartX = left;
  2662.         chatStartY = top;
  2663.         chatEndX = left + chatWidth;
  2664.         chatEndY = top + chatHeight;
  2665.     } else
  2666.     if(el === "#bagCanvas"){
  2667.         $('#bagCanvas').css({
  2668.             left: e.pageX - bagOffX,
  2669.             top: e.pageY - bagOffY
  2670.         });
  2671.         var left = parseInt($("#bagCanvas").css("left"), 10);
  2672.         var top = parseInt($("#bagCanvas").css("top"), 10);
  2673.         bagStartX = left;
  2674.         bagStartY = top;
  2675.         bagEndX = left + bagWidth;
  2676.         bagEndY = top + bagHeight;
  2677.     }
  2678. }
  2679. function pressYes() {
  2680.     localPlayer.playerProxSound("hybris", -1, 1);
  2681.     socket.emit("drop item", { pid: localPlayer.getID(), slot: droppingItem });
  2682.     if(droppingItem >= 0) {
  2683.         localPlayer.removeItemFromSlot(droppingItem);
  2684.         invItemSprites = [];
  2685.         if(showInventory)
  2686.             drawInventory();
  2687.         droppingItem = -1;
  2688.     }
  2689. }
  2690.  
  2691. function pressNo() {
  2692.     droppingItem = -1;
  2693. }
  2694.  
  2695.     var onFocus = function() {
  2696.         if(typeof enemies === "undefined")
  2697.             return;
  2698.  
  2699.         for(var i=0;i<enemies.length;i++)
  2700.             enemies[i].setViewed();
  2701.     }
  2702.  
  2703. function setGameClickHandler() {
  2704.  
  2705.     //$("#inventoryContainer").hover(getHoverItem, clearHoverItem);
  2706.     $("#playerDefense").mouseenter(function() {localPlayer.showStatInfo("Defense", $("#playerDefense").offset().left, $("#playerDefense").offset().top)});
  2707.     $("#playerDefense").mouseleave(function() {clearHoverItem()});
  2708.     $("#playerDamage").mouseenter(function() {localPlayer.showStatInfo("Damage", $("#playerDamage").offset().left, $("#playerDamage").offset().top)});
  2709.     $("#playerDamage").mouseleave(function() {clearHoverItem()});
  2710.     $("#bLogout").mouseenter(function() {localPlayer.showStatInfo("Logout", $("#bLogout").offset().left, $("#bLogout").offset().top)});
  2711.     $("#bLogout").mouseleave(function() {clearHoverItem()});
  2712.     $("#playerCold").mouseenter(function() {localPlayer.showStatInfo("Cold resist", $("#playerCold").offset().left, $("#playerCold").offset().top)});
  2713.     $("#playerCold").mouseleave(function() {clearHoverItem()});
  2714.     $("#playerFire").mouseenter(function() {localPlayer.showStatInfo("Fire resist", $("#playerFire").offset().left, $("#playerFire").offset().top)});
  2715.     $("#playerFire").mouseleave(function() {clearHoverItem()});
  2716.     $("#details,#details2,#details3,#details4").mousemove(function() {clearHoverItem2()});
  2717.  
  2718.     $("#chatlog,#skillBCanvas,#skillCanvas,#inventoryCanvas,#gameArea,#gameCanvas,#bgCanvas,#aCanvas").mousedown(domousedown);
  2719.  
  2720.     $("#bagCanvas").mousedown(domousedownbag);
  2721.  
  2722.     $('body').on('contextmenu', '#bagCanvas', function(e){ return false; });
  2723.     $('body').on('contextmenu', '#inventoryCanvas', function(e){ return false; });
  2724.     $('body').on('contextmenu', '#gameCanvas', function(e){ return false; });
  2725.     $('body').on('contextmenu', '#mapCanvas', function(e){ return false; });
  2726.     $('body').on('contextmenu', '#gameArea', function(e){ return false; });
  2727.     $('body').on('contextmenu', '#gameContainer', function(e){ return false; });
  2728.     $('body').on('contextmenu', '#confirmation', function(e){ return false; });
  2729.  
  2730.     $("#yes").mouseup(function(e){
  2731.         $("#confirmation").addClass("hideClass");
  2732.         pressYes();
  2733.     });
  2734.     $("#no").mouseup(function(e){
  2735.         $("#confirmation").addClass("hideClass");
  2736.         pressNo();
  2737.     });
  2738.     $("#gameArea").mouseup(function(e){
  2739.         cursorSprite = '';
  2740.         if(mousedownID)//Only stop if exists
  2741.             clearInterval(mousedownID);
  2742.         bagDown = false;
  2743.         inventoryDown = false;
  2744.         inventoryDrag = false;
  2745.         skillBDown = false;
  2746.         skillDown = false;
  2747.         chatDown = false;
  2748.         chatDrag = false;
  2749.         if(itemDownID >= 0 && itemDown) {
  2750.             dropItem(itemDownID);
  2751.         }
  2752.         itemDown = false;
  2753.         itemDownID = -1;
  2754.         dragType = -1;
  2755.         if(abilityDown2 >= 0) {
  2756.             delete mySkills[abilityDown2];
  2757.             socket.emit("change ability", { id: localPlayer.id, box2: abilityDown2 });
  2758.             mySkillSprites = {};
  2759.             drawSkillButtons();
  2760.         }
  2761.         abilityDown = -1, abilityDown2 = -1;
  2762.         if(showInventory) {
  2763.             drawInventory();
  2764.         }
  2765.     });
  2766.     $("#chatlog,#skillBCanvas,#skillCanvas,#bagCanvas").mouseup(function(e){
  2767.         cursorSprite = '';
  2768.         if(mousedownID)//Only stop if exists
  2769.             clearInterval(mousedownID);
  2770.         chatDown = false;
  2771.         skillBDown = false;
  2772.         skillDown = false;
  2773.         bagDown = false;
  2774.         inventoryDown = false;
  2775.         inventoryDrag = false;
  2776.         chatDrag = false;
  2777.         dragType = -1;
  2778.         itemDownID = -1;
  2779.         if(abilityDown >= 0) {
  2780.             mySkillSprites = {};
  2781.             if(getHoveredAbility2(e.pageX, e.pageY) != -1) {
  2782.                 var newAbil = getHoveredAbility2(e.pageX, e.pageY);
  2783.                 mySkills[newAbil] = skillList[abilityDown];
  2784.                 mySkills[newAbil]["cooltime"] = skillList[abilityDown][4];
  2785.                 socket.emit("change ability", { id: localPlayer.id, box: newAbil, ability: abilityDown });
  2786.                 drawSkillButtons();
  2787.             }
  2788.         } else if(abilityDown2 >= 0) {
  2789.             mySkillSprites = {};
  2790.             var hov = getHoveredAbility2(e.pageX, e.pageY);
  2791.             if(hov != -1 && hov != abilityDown2) {
  2792.                 var newAbilId = hov;
  2793.                 var oldAbil = mySkills[abilityDown2];
  2794.                 var newAbil = mySkills[newAbilId];
  2795.                 mySkills[newAbilId] = oldAbil;
  2796.                 mySkills[abilityDown2] = newAbil;
  2797.                 socket.emit("change ability", { id: localPlayer.id, box2: hov, box: abilityDown2, ability: abilityDown });
  2798.                 drawSkillButtons();
  2799.             } else if(hov == -1) {
  2800.                 delete mySkills[abilityDown2];
  2801.                 socket.emit("change ability", { id: localPlayer.id, box: abilityDown2, ability: abilityDown });
  2802.                 mySkillSprites = {};
  2803.                 drawSkillButtons();
  2804.             }
  2805.         }
  2806.         abilityDown = -1, abilityDown2 = -1;
  2807.     });
  2808.     $("#inventoryCanvas").mouseup(function(e){
  2809.         abilityDown = -1, abilityDown2 = -1;
  2810.         cursorSprite = '';
  2811.         if(mousedownID)//Only stop if exists
  2812.             clearInterval(mousedownID);
  2813.         var newId = getHoveredInvItem(e.pageX, e.pageY);
  2814.         var oldItem = localPlayer.inventory[itemDownID];
  2815.         var inventoryMax = localPlayer.getInventoryMax();
  2816.         var drawX = 18, drawY = 38;
  2817.         var swappingItem = false;
  2818.         if(showInventory && itemDownID == newId && (Math.abs(e.pageX - mouseDownX) <= 3 && Math.abs(e.pageY - mouseDownY) <= 3)) {
  2819.             //localPlayer.useItem(newId);
  2820.             useItem(newId);
  2821.             getItemDetails(newId);
  2822.         }
  2823.         if(itemDown) {
  2824.             if(oldItem !== "undefined" && oldItem != null && newId >= 0) {
  2825.                 socket.emit("swap inventory item", {pid: localPlayer.getID(), box1: itemDownID, box2: newId});
  2826.                 swappingItem = true;
  2827.             } else {
  2828.                 itemDownID = -1;
  2829.                 itemDown = false;
  2830.             }
  2831.         }
  2832.         chatDown = false;
  2833.         inventoryDown = false;
  2834.         inventoryDrag = false;
  2835.         skillBDown = false;
  2836.         skillDown = false;
  2837.         chatDrag = false;
  2838.         //if(!swappingItem) {
  2839.             itemDown = false;
  2840.             itemDownID = -1;
  2841.         //}
  2842.         dragType = -1;
  2843.         if(showInventory) {
  2844.             //drawInventory();
  2845.         }
  2846.     });
  2847.     $("#inventoryCanvas").mousemove(function(e){
  2848.         //inventoryCanvas.width = inventoryCanvas.width;
  2849.         drawInventory();
  2850.     });
  2851.     $("#bagCanvas").mousemove(function(e){
  2852.         var clickX = e.pageX, clickY = e.pageY;
  2853.         var left = parseInt($("#bagCanvas").css("left"), 10);
  2854.         var top = parseInt($("#bagCanvas").css("top"), 10);
  2855.         /*if(inSquare(clickX, clickY, left + 10, left + 60, top + 10, top + 30) && (showBag && !bagDrag)) {
  2856.             takeHover = true;
  2857.         } else if(inSquare(clickX, clickY, left + bagWidth - 60, left + bagWidth - 10, top + 10, top + 30) && (showBag && !bagDrag)) {
  2858.             disposeHover = true;
  2859.         } else {
  2860.             takeHover = false;
  2861.             disposeHover = false;
  2862.         }*/
  2863.         //drawBag(bag);
  2864.         if(!bagDown)
  2865.             drawBagText(bag);
  2866.     });
  2867.     $("#gameArea,#inventoryCanvas,#chatlog,#skillBCanvas,#skillCanvas,#bagCanvas").mousemove(function(e){
  2868.         var bgPos = localPlayer.getBgPos();
  2869.         var inventoryMax = localPlayer.getInventoryMax();
  2870.        
  2871.         var drawX = 18, drawY = 38;
  2872.         if(showSkills) {
  2873.             drawSkills();
  2874.         }
  2875.         mouseX = e.pageX, mouseY = e.pageY;
  2876.  
  2877.         if(showSkills) {
  2878.             var abilHov = getHoveredAbility(e.pageX, e.pageY);
  2879.             if(abilHov >= 0) {
  2880.                 socket.emit("request ability info", { id: localPlayer.id, tab: tabSelected, ability: abilHov });
  2881.             } else {
  2882.                 clearHoverItem();
  2883.             }
  2884.         }
  2885.  
  2886.         if(showBag) {
  2887.             var left = parseInt($("#bagCanvas").css("left"), 10);
  2888.             var top = parseInt($("#bagCanvas").css("top"), 10);
  2889.             if(bagDown && !chatDrag && !inventoryDrag) {
  2890.                 dragElement("#bagCanvas", e);
  2891.             }
  2892.             if(inSquare(e.pageX, e.pageY, left, left + bagWidth, top, top + bagHeight)) {
  2893.                 var item = getHoveredBagItem(e.pageX, e.pageY);
  2894.                 if(bag["items"][item]) {
  2895.                         hoveringItem = true;
  2896.                         getBagItemDetails(item);
  2897.                     } else if(itemDownBagID >= 0) {
  2898.                         hoveringItem = true;
  2899.                         getBagItemDetails(itemDownBagID);
  2900.                     } else if(itemDownBagID < 0) {
  2901.                         clearHoverItem();
  2902.                         hoveringItem = false;
  2903.                 }
  2904.             }
  2905.         }
  2906.        
  2907.         if(showInventory) {
  2908.             var left = parseInt($("#inventoryCanvas").css("left"), 10);
  2909.             var top = parseInt($("#inventoryCanvas").css("top"), 10);
  2910.             if((Math.abs(e.pageX - mouseDownX) > 3 || Math.abs(e.pageY - mouseDownY) > 3) && localPlayer.inventory[itemDownID]) {
  2911.                 itemDown = true;
  2912.                 if(localPlayer.inventory[itemDownID])
  2913.                     cursorSprite = 'sprites/'+getItemPath(localPlayer.inventory[itemDownID]["type"]);
  2914.             }
  2915.             var item = getHoveredInvItem(e.pageX, e.pageY);
  2916.             if(!hoveringItem) {
  2917.                 if(localPlayer.inventory[item])
  2918.                     getItemDetails(item)
  2919.                 else if(itemDownID >= 0)
  2920.                     getItemDetails(itemDownID);
  2921.                 else if(itemDownID < 0)
  2922.                     clearHoverItem();
  2923.             }
  2924.             if(inSquare(e.pageX, e.pageY, left, left + invWidth, top, top + invHeight) && showInventory) {
  2925.                 if(inSquare(e.pageX, e.pageY, left, left + 20, top, top + 20) && showInventory) {
  2926.                         $('#inventoryCanvas').css('cursor', 'nw-resize');
  2927.                     } else if(inSquare(e.pageX, e.pageY, left, left + 20, top+20, top + invHeight - 20) && showInventory) {
  2928.                         $('#inventoryCanvas').css('cursor', 'w-resize');
  2929.                     } else if(inSquare(e.pageX, e.pageY, left, left + 20, top + invHeight - 20, top + invHeight) && showInventory) {
  2930.                         $('#inventoryCanvas').css('cursor', 'sw-resize');
  2931.                     } else if(inSquare(e.pageX, e.pageY, left + 20, left + invWidth - 20, top + invHeight - 20, top + invHeight) && showInventory) {
  2932.                         $('#inventoryCanvas').css('cursor', 's-resize');
  2933.                     } else if(inSquare(e.pageX, e.pageY, left + invWidth - 20, left + invWidth, top + invHeight - 20, top + invHeight) && showInventory) {
  2934.                         $('#inventoryCanvas').css('cursor', 'se-resize');
  2935.                     } else if(inSquare(e.pageX, e.pageY, left + invWidth - 20, left + invWidth, top + 20, top + invHeight - 20) && showInventory) {
  2936.                         $('#inventoryCanvas').css('cursor', 'e-resize');
  2937.                     } else if(inSquare(e.pageX, e.pageY, left + invWidth - 20, left + invWidth, top, top + 20) && showInventory) {
  2938.                         $('#inventoryCanvas').css('cursor', 'ne-resize');
  2939.                     } else if(inSquare(e.pageX, e.pageY, left + 20, left + invWidth - 20, top, top + 10) && showInventory) {
  2940.                         $('#inventoryCanvas').css('cursor', 'n-resize');
  2941.                     } else {
  2942.                         $('#inventoryCanvas').css('cursor', 'auto');
  2943.                 }
  2944.             }
  2945.            
  2946.            
  2947.             if(inventoryDown && !chatDrag && !inventoryDrag) {
  2948.                 dragElement("#inventoryCanvas", e);
  2949.             }
  2950.             if(inventoryDrag && !chatDrag && !inventoryDown) {
  2951.                 elementResize("#inventoryCanvas", "inventoryCanvas", dragType, e, "invStart", "invEnd", "invWidth", "invHeight", "invOffX", "invOffY");
  2952.             }
  2953.         }
  2954.  
  2955.             if(skillBDown) {
  2956.                 dragElement("#skillBCanvas", e);
  2957.             }
  2958.             if(skillDown) {
  2959.                 dragElement("#skillCanvas", e);
  2960.             }
  2961.             if(abilityDown >= 0)
  2962.                 cursorSprite = 'sprites/'+skillList[abilityDown][2]+".png";
  2963.             else if(abilityDown2 >= 0) {
  2964.                 if(mySkills[abilityDown2] && typeof mySkills[abilityDown2] !== "undefined" && mySkills[abilityDown2] != null)
  2965.                 cursorSprite = 'sprites/'+mySkills[abilityDown2][2]+".png";
  2966.             }
  2967.  
  2968.             left = parseInt($("#chatlog").css("left"), 10);
  2969.             top = parseInt($("#chatlog").css("top"), 10);
  2970.             if(inSquare(e.pageX, e.pageY, left - 10, left + chatWidth + 20, top - 10, top + chatHeight + 20)) {
  2971.                 if(inSquare(e.pageX, e.pageY, left - 10, left + 10, top - 10, top + 10)) {
  2972.                         $('#chatlog,#gameCanvas').css('cursor', 'nw-resize');
  2973.                     } else if(inSquare(e.pageX, e.pageY, left - 10, left + 10, top+10, top + chatHeight - 10)) {
  2974.                         $('#chatlog,#gameCanvas').css('cursor', 'w-resize');
  2975.                     } else if(inSquare(e.pageX, e.pageY, left - 10, left + 10, top + chatHeight, top + chatHeight + 20)) {
  2976.                         $('#chatlog,#gameCanvas').css('cursor', 'sw-resize');
  2977.                     } else if(inSquare(e.pageX, e.pageY, left + 10, left + chatWidth - 10, top + chatHeight, top + chatHeight + 20)) {
  2978.                         $('#chatlog,#gameCanvas').css('cursor', 's-resize');
  2979.                     } else if(inSquare(e.pageX, e.pageY, left + chatWidth, left + chatWidth + 20, top + chatHeight, top + chatHeight + 20)) {
  2980.                         $('#chatlog,#gameCanvas').css('cursor', 'se-resize');
  2981.                     } else if(inSquare(e.pageX, e.pageY, left + chatWidth, left + chatWidth + 20, top + 10, top + chatHeight - 10)) {
  2982.                         $('#chatlog,#gameCanvas').css('cursor', 'e-resize');
  2983.                     } else if(inSquare(e.pageX, e.pageY, left + chatWidth, left + chatWidth + 20, top - 10, top + 10)) {
  2984.                         $('#chatlog,#gameCanvas').css('cursor', 'ne-resize');
  2985.                     } else if(inSquare(e.pageX, e.pageY, left + 10, left + chatWidth - 10, top-10, top)) {
  2986.                         $('#chatlog,#gameCanvas').css('cursor', 'n-resize');
  2987.                     } else {
  2988.                         $('#gameCanvas,#chatlog').css('cursor', 'auto');
  2989.                 }
  2990.             } else {
  2991.                 $('#chatlog,#gameCanvas').css('cursor', 'auto');
  2992.             }
  2993.             if(chatDown) {
  2994.                 dragElement("#chatlog", e);
  2995.             }
  2996.             if(chatDrag && !inventoryDrag && !inventoryDown) {
  2997.                 elementResize("#chatlog", "chatlog", dragType, e, "chatStart", "chatEnd", "chatWidth", "chatHeight", "chatOffX", "chatOffY");
  2998.             }
  2999.     });
  3000.     $("#gameArea").mousemove(function(e){
  3001.         var bgPos = localPlayer.getBgPos();
  3002.         localPlayer.tile = getClickedSquare(e, bgPos);
  3003.         var absPos = localPlayer.getAbsPos();
  3004.         var endPos = {'x': localPlayer.tile.x, 'y': localPlayer.tile.y};
  3005.         var theta = Math.atan2(endPos.y - absPos.absY, endPos.x - absPos.absX);
  3006.         theta += Math.PI/2.0;
  3007.         var newAngle = toDegrees(theta) - 90;
  3008.         if (newAngle < 0.0) {
  3009.             newAngle += 360.0;
  3010.         }
  3011.         localPlayer["angle"] = newAngle;
  3012.         socket.emit("send angle", { id: localPlayer.id, angle: newAngle } );
  3013.         if(showInventory && itemDown) {
  3014.             drawInventory();
  3015.         }
  3016.         for(var i=0;i<enemies.length;i++) {
  3017.             if(inSquare(e.pageX, e.pageY, enemies[i].getX()+bgPos.x, enemies[i].getX()+enemies[i].getSize().width+bgPos.x, enemies[i].getY()+bgPos.y, enemies[i].getY()+enemies[i].getSize().height+bgPos.y)) {
  3018.                 //if(Date.now() - enemies[i].getLastViewed() > 2500) {
  3019.                     enemies[i].setViewed();
  3020.                 //}
  3021.             } else {
  3022.                 if(enemies[i].isViewing())
  3023.                     enemies[i].unView();
  3024.             }
  3025.         }
  3026.     });
  3027.  
  3028.     $(document).ready(function() { $(window).on("focus", onFocus); });
  3029.  
  3030.     $("#bagCanvas").mouseup(function(e){
  3031.         var left = parseInt($("#bagCanvas").css("left"), 10);
  3032.         var top = parseInt($("#bagCanvas").css("top"), 10);
  3033.         var clickX = e.pageX, clickY = e.pageY;
  3034.         var newBagId = getHoveredBagItem(clickX, clickY);
  3035.         if(inSquare(clickX, clickY, left + 10, left + 60, top + 10, top + 30) && (showBag && !bagDrag)) {
  3036.                 socket.emit("take all", { pid: localPlayer.id, takeAll: true });
  3037.             } else if(inSquare(clickX, clickY, left + bagWidth - 60, left + bagWidth - 10, top + 10, top + 30) && (showBag && !bagDrag)) {
  3038.                 socket.emit("take all", { pid: localPlayer.id, takeAll: false });
  3039.         }
  3040.         if(showBag && newBagId >= 0) {
  3041.             itemDownBagID = -1;
  3042.             useBagItem(newBagId);
  3043.             console.log(newBagId);
  3044.         }
  3045.         bagDown = false;
  3046.         lastBagBox = -1;
  3047.     });
  3048. }
  3049.  
  3050. function elementResize (el, elname, drag, e, start, end, width, height, offX, offY) {
  3051.             //invOffX = 0, invOffY = 0;
  3052.             width2 = parseInt($(el).css("width"), 10), height2 = parseInt($(el).css("height"), 10);
  3053.             var clickX = e.pageX, clickY = e.pageY;
  3054.             var left = parseInt($(el).css("left"), 10);
  3055.             var top = parseInt($(el).css("top"), 10);
  3056.             var startX = eval(start+'X'), startY = eval(start+'Y'), endX = eval(end+'X'), endY = eval(end+'Y');
  3057.             var startXvar = start+'X', startYvar = start+'Y', endXvar = end+'X', endYvar = end+'Y';
  3058.         if(drag == 0) {
  3059.             if(endX > clickX)
  3060.                 width2 = endX - clickX;
  3061.             if(endX < clickX)
  3062.                 width2 = clickX - endX;
  3063.             if(endY > clickY)
  3064.                 height2 = endY - clickY;
  3065.             if(endY < clickY)
  3066.                 height2 = clickY - endY;
  3067.             height2 += 0;//increase final size by 10..
  3068.             width2 += 0;
  3069.             if(width2 > window.innerWidth - 200)//prevent large
  3070.                 width2 = window.innerWidth - 200;
  3071.             if(height2 >  window.innerHeight - 200)
  3072.                 height2 =  window.innerHeight - 200;
  3073.             if(width2 < 80)//prevent small
  3074.                 width2 = 80;
  3075.             if(height2 < 100)
  3076.                 height2 = 100;
  3077.  
  3078.             window[startXvar] = left - window[offX];//inventory variables initialize
  3079.             window[startYvar] = top - window[offY];
  3080.             window[width] = (endX - startX);
  3081.             window[height] = (endY - startY);
  3082.  
  3083.             if(window[width] < 80)//prevent small inventory
  3084.                 window[width] = 80;
  3085.             if(window[height] < 100)
  3086.                 window[height] = 100;
  3087.  
  3088.             window[elname].left = clickX - window[offX];//resize canvas
  3089.             window[elname].top = clickY - window[offY];
  3090.             window[elname].width = width2;
  3091.             window[elname].height = height2;
  3092.             $(el).css({
  3093.                 left: clickX - window[offX],
  3094.                 top: clickY - window[offY],
  3095.                 width: width2,
  3096.                 height: height2
  3097.             });
  3098.         } else if (drag == 1) {
  3099.             if(endX > clickX)
  3100.                 width2 = endX - clickX;
  3101.             if(endX < clickX)
  3102.                 width2 = clickX - endX;
  3103.             width2 += 0;
  3104.  
  3105.             if(width2 > window.innerWidth - 200)//prevent large
  3106.                 width2 = window.innerWidth - 200;
  3107.             if(height2 >  window.innerHeight - 200)
  3108.                 height2 =  window.innerHeight - 200;
  3109.             if(width2 < 80)//prevent small inventory
  3110.                 width2 = 80;
  3111.             if(height2 < 100)
  3112.                 height2 = 100;
  3113.  
  3114.             window[startXvar] = left - window[offX];//inventory variables initialize
  3115.             window[width] = (endX - startX);
  3116.  
  3117.             if(window[width] < 80)//prevent small inventory
  3118.                 window[width] = 80;
  3119.             if(window[height] < 100)
  3120.                 window[height] = 100;
  3121.  
  3122.             window[elname].left = clickX - window[offX];//resize canvas
  3123.             window[elname].width = width2;
  3124.             $(el).css({
  3125.                 left: clickX - window[offX],
  3126.                 width: width2
  3127.             });
  3128.         } else if(drag == 2) {
  3129.             if(endX > clickX)
  3130.                 width2 = endX - clickX;
  3131.             if(endX < clickX)
  3132.                 width2 = clickX - endX;
  3133.             if(startY > clickY)
  3134.                 height2 = endY - clickY;
  3135.             if(startY < clickY)
  3136.                 height2 = clickY - startY;
  3137.             height2 += 0;//increase final size by 10..
  3138.             width2 += 0;
  3139.             if(width2 > window.innerWidth - 200)//prevent large
  3140.                 width2 = window.innerWidth - 200;
  3141.             if(height2 >  window.innerHeight - 200)
  3142.                 height2 =  window.innerHeight - 200;
  3143.             if(width2 < 80)//prevent small inventory
  3144.                 width2 = 80;
  3145.             if(height2 < 100)
  3146.                 height2 = 100;
  3147.  
  3148.             window[startXvar] = left - window[offX];//inventory variables initialize
  3149.             window[endYvar] = clickY + window[offY];
  3150.             window[width] = (endX - startX);
  3151.             window[height] = (endY - startY);
  3152.  
  3153.             if(window[width] < 80)//prevent small inventory
  3154.                 window[width] = 80;
  3155.             if(window[height] < 100)
  3156.                 window[height] = 100;
  3157.  
  3158.             window[elname].left = clickX - window[offX];//resize canvas
  3159.             window[elname].width = width2;
  3160.             window[elname].height = height2;
  3161.             $(el).css({
  3162.                 left: clickX - window[offX],
  3163.                 width: width2,
  3164.                 height: height2
  3165.             });
  3166.         } else if(drag == 3) {
  3167.             if(startY > clickY)
  3168.                 height2 = startY - clickY;
  3169.             if(startY < clickY)
  3170.                 height2 = clickY - startY;
  3171.             height2 += 0;//increase final size by 10..
  3172.             if(width2 > window.innerWidth - 200)//prevent large
  3173.                 width2 = window.innerWidth - 200;
  3174.             if(height2 >  window.innerHeight - 200)
  3175.                 height2 =  window.innerHeight - 200;
  3176.             if(width2 < 80)//prevent small inventory
  3177.                 width2 = 80;
  3178.             if(height2 < 100)
  3179.                 height2 = 100;
  3180.  
  3181.             window[endYvar] = clickY + window[offY] ;
  3182.             window[height] = (endY - startY);
  3183.  
  3184.             if(window[width] < 80)//prevent small inventory
  3185.                 window[width] = 80;
  3186.             if(window[height] < 100)
  3187.                 window[height] = 100;
  3188.  
  3189.             window[elname].height = height2;
  3190.             $(el).css({
  3191.                 height: height2
  3192.             });
  3193.         } else if(drag == 4) {
  3194.             if(startX > clickX)
  3195.                 width2 = startX - clickX;
  3196.             if(startX < clickX)
  3197.                 width2 = clickX - startX;
  3198.             if(startY > clickY)
  3199.                 height2 = startY - clickY;
  3200.             if(startY < clickY)
  3201.                 height2 = clickY - startY;
  3202.             height2 += 0;//increase final size by 10..
  3203.             width2 += 0;
  3204.             if(width2 > window.innerWidth - 200)//prevent large
  3205.                 width2 = window.innerWidth - 200;
  3206.             if(height2 >  window.innerHeight - 200)
  3207.                 height2 =  window.innerHeight - 200;
  3208.             if(width2 < 80)//prevent small inventory
  3209.                 width2 = 80;
  3210.             if(height2 < 100)
  3211.                 height2 = 100;
  3212.  
  3213.             window[endYvar] = clickY + window[offY] ;
  3214.             window[endXvar] = clickX + window[offX] ;
  3215.             window[width] = (endX - startX);
  3216.             window[height] = (endY - startY);
  3217.  
  3218.             if(window[width] < 80)//prevent small inventory
  3219.                 window[width] = 80;
  3220.             if(window[height] < 100)
  3221.                 window[height] = 100;
  3222.  
  3223.             window[elname].width = width2;
  3224.             window[elname].height = height2;
  3225.             $(el).css({
  3226.                 width: width2,
  3227.                 height: height2
  3228.             });
  3229.         } else if(drag == 5) {
  3230.             if(startX > clickX)
  3231.                 width2 = startX - clickX;
  3232.             if(startX < clickX)
  3233.                 width2 = clickX - startX;
  3234.             width2 += 0;
  3235.             if(width2 > window.innerWidth - 200)//prevent large
  3236.                 width2 = window.innerWidth - 200;
  3237.             if(height2 >  window.innerHeight - 200)
  3238.                 height2 =  window.innerHeight - 200;
  3239.             if(width2 < 80)//prevent small inventory
  3240.                 width2 = 80;
  3241.             if(height2 < 100)
  3242.                 height2 = 100;
  3243.  
  3244.             window[endXvar] = clickX + window[offX] ;
  3245.             window[width] = (endX - startX);
  3246.  
  3247.             if(window[width] < 80)//prevent small inventory
  3248.                 window[width] = 80;
  3249.             if(window[height] < 100)
  3250.                 window[height] = 100;
  3251.  
  3252.             window[elname].width = width2;
  3253.             $(el).css({
  3254.                 width: width2
  3255.             });
  3256.         } else if(drag == 6) {
  3257.             if(startX > clickX)
  3258.                 width2 = startX - clickX;
  3259.             if(startX < clickX)
  3260.                 width2 = clickX - startX;
  3261.             if(endY > clickY)
  3262.                 height2 = endY - clickY;
  3263.             if(endY < clickY)
  3264.                 height2 = clickY - endY;
  3265.             height2 += 0;//increase final size by 10
  3266.             width2 += 0;
  3267.             if(width2 > window.innerWidth - 200)//prevent large
  3268.                 width2 = window.innerWidth - 200;
  3269.             if(height2 >  window.innerHeight - 200)
  3270.                 height2 =  window.innerHeight - 200;
  3271.             if(width2 < 80)//prevent small inventory
  3272.                 width2 = 80;
  3273.             if(height2 < 100)
  3274.                 height2 = 100;
  3275.  
  3276.             window[startYvar] = top - window[offY];
  3277.             window[endXvar] = clickX + window[offX] ;
  3278.             window[width] = (endX - startX);
  3279.             window[height] = (endY - startY);
  3280.  
  3281.             if(window[width] < 80)//prevent small inventory
  3282.                 window[width] = 80;
  3283.             if(window[height] < 100)
  3284.                 window[height] = 100;
  3285.  
  3286.             window[elname].width = width2;
  3287.             window[elname].height = height2;
  3288.             $(el).css({
  3289.                 top: clickY - window[offY],
  3290.                 width: width2,
  3291.                 height: height2
  3292.             });
  3293.         } else if(drag == 7) {
  3294.             if(endY > clickY)
  3295.                 height2 = endY - clickY;
  3296.             if(endY < clickY)
  3297.                 height2 = clickY - endY;
  3298.             height2 += 0;//increase final size by 10..
  3299.             if(width2 > window.innerWidth - 200)//prevent large
  3300.                 width2 = window.innerWidth - 200;
  3301.             if(height2 >  window.innerHeight - 200)
  3302.                 height2 =  window.innerHeight - 200;
  3303.             if(width2 < 80)//prevent small inventory
  3304.                 width2 = 80;
  3305.             if(height2 < 100)
  3306.                 height2 = 100;
  3307.  
  3308.             window[startYvar] = top - window[offY];
  3309.             window[height] = (endY - startY);
  3310.  
  3311.             if(window[width] < 80)//prevent small inventory
  3312.                 window[width] = 80;
  3313.             if(window[height] < 100)
  3314.                 window[height] = 100;
  3315.  
  3316.             window[elname].height = height2;
  3317.             $(el).css({
  3318.                 top: clickY - window[offY],
  3319.                 height: height2
  3320.             });
  3321.         }
  3322.     if(elname === "inventoryCanvas") {
  3323.         //inventoryCtx.drawImage(inventoryBuffer, 0, 0);
  3324.         var left = parseInt($("#inventoryCanvas").css("left"), 10);
  3325.         var top = parseInt($("#inventoryCanvas").css("top"), 10);
  3326.         invStartX = left;
  3327.         invStartY = top;
  3328.         invEndX = left + width2;
  3329.         invEndY = top + height2;
  3330.         drawInventory();
  3331.     }
  3332. }
  3333. function updateEquip(data) {
  3334.         var slot = data.i;
  3335.         var slot2 = data.inv;
  3336.         var type = data.type;
  3337.         localPlayer.equipment[slot] = {type: data.type};
  3338.         localPlayer.removeItemFromSlot(slot2);
  3339.         invItemSprites = [];
  3340.         //drawInventory();
  3341.         clearHoverItem();
  3342.         lastBox = -1;
  3343. }
  3344.  
  3345. function onRemoveEquip(data) {
  3346.     var player = playerByPid(data.pid);
  3347.     var slot = data.slot;
  3348.     localPlayer.equipment[slot] = null;
  3349.     //localPlayer.inventory.splice(slot2, 1);
  3350.     //localPlayer.inventory[slot2] = [];
  3351.     //localPlayer.inventory[slot2] = {};
  3352.     //delete localPlayer.inventory[slot2];
  3353.     //localPlayer.inventory[slot2]["type"] = 7;
  3354.     //console.log(localPlayer.inventory[slot2])
  3355.     //console.log("slot2")
  3356.     localPlayer.initEquipment();
  3357.     //localPlayer.initInventory();
  3358.     invItemSprites = [];
  3359.     //drawInventory();
  3360. }
  3361.  
  3362. function swapEquip(data) {
  3363.     var slot = data.i;
  3364.     var slot2 = data.inv;
  3365.     var type = data["type"];
  3366.     var oldItem = localPlayer.inventory[slot2];
  3367.     //console.log(localPlayer.equipment[slot])
  3368.     localPlayer.inventory[slot2] = localPlayer.equipment[slot];
  3369.     localPlayer.equipment[slot] = oldItem;
  3370.     //invItemSprites = [];
  3371.     if(showInventory)
  3372.         drawInventory();
  3373.     if(typeof data.item !== "undefined" && localPlayer.inventory[slot]) {
  3374.             datastats2 = data.item["stats"];
  3375.             localPlayer.showItemDetails(boxi, mouseX, mouseY, datastats, datastats2, canvas.width, canvas.height);
  3376.     }
  3377. }
  3378.  
  3379. // Browser window resize
  3380. function onResize(e) {
  3381.     // Maximise the canvas
  3382.  
  3383.     var cWidth = window.document.body.clientWidth;
  3384.     var cHeight = $(window).height();
  3385.  
  3386.     /*canvas.width = window.innerWidth;
  3387.     canvas.height = window.innerWidth;
  3388.     aCanvas.width = window.innerWidth;
  3389.     aCanvas.height = window.innerHeight;
  3390.     bgCanvas.width = 5184;
  3391.     bgCanvas.height = 5184;*/
  3392.  
  3393.     $("#bLogout").css({
  3394.         top: "5px",
  3395.         left: eval(cWidth - 52) + "px"
  3396.     });
  3397.  
  3398.     skillBStartX = (cWidth / 2) - 80;
  3399.     skillBStartY = cHeight - 85;
  3400.  
  3401.     $("#skillBCanvas").css({
  3402.         left: eval(skillBStartX)+"px",
  3403.         top: eval(skillBStartY)+"px",
  3404.         width: skillBWidth,
  3405.         height: skillBHeight
  3406.     });
  3407.  
  3408.     chatStartX = 25;
  3409.     chatStartY = cHeight - 155;
  3410.  
  3411.     $("#chatlog").css({
  3412.         left: chatStartX,
  3413.         top: chatStartY,
  3414.         width: chatWidth,
  3415.         height: chatHeight
  3416.     });
  3417.  
  3418.  
  3419.         $('#gameArea').css({
  3420.             //left: ($(window).width() - $('#gameArea').outerWidth())/2,
  3421.             //top: ($(window).height() - $('#gameArea').outerHeight())/2,
  3422.             width: window.innerWidth,
  3423.             height: window.innerHeight
  3424.             //width: cWidth,
  3425.             //height: cHeight
  3426.         });
  3427.         $('#gameCanvas').css({
  3428.             //left: ($(window).width() - $('#gameArea').outerWidth())/2,
  3429.             //top: ($(window).height() - $('#gameArea').outerHeight())/2,
  3430.             //width: window.innerWidth,
  3431.             //height: window.innerHeight
  3432.         });
  3433.         $('#aCanvas').css({
  3434.             //left: ($(window).width() - $('#gameArea').outerWidth())/2,
  3435.             //top: ($(window).height() - $('#gameArea').outerHeight())/2,
  3436.             //width: window.innerWidth,
  3437.             //height: window.innerHeight
  3438.         });
  3439.         $('#bgCanvas').css({
  3440.             //left: ($(window).width() - $('#gameArea').outerWidth())/2,
  3441.             //top: ($(window).height() - $('#gameArea').outerHeight())/2,
  3442.             //width: 5184,
  3443.             //height: 5184
  3444.         });
  3445.         $('#input').css({
  3446.             left: ($(window).width() - $('#input').outerWidth())/2,
  3447.             top: ($(window).height() - $('#input').outerHeight())/1.2
  3448.         });
  3449.         $('#questMenu').css({
  3450.             left: ($(window).width() - $('#questMenu').outerWidth())/2,
  3451.             top: ($(window).height() - $('#questMenu').outerHeight())/2
  3452.         });
  3453.         $('#statMenu').css({
  3454.             left: ($(window).width() - $('#statMenu').outerWidth())/2,
  3455.             top: ($(window).height() - $('#statMenu').outerHeight())/2
  3456.         });
  3457.  
  3458.         $('#confirmation').css({
  3459.             left: ($(window).width() - $('#confirmation').outerWidth())/2,
  3460.         });
  3461.         adjustedTileSize = Math.floor(window.innerHeight/worldSize);
  3462.         $('#mapCanvas').css({
  3463.             left: ($(window).width() - adjustedTileSize * worldSize)/2,
  3464.             top: ($(window).height() - adjustedTileSize * worldSize)/2,
  3465.             width: adjustedTileSize * worldSize,
  3466.             height: adjustedTileSize * worldSize
  3467.         });
  3468.         $('#inventoryCanvas').css({
  3469.             width: 400,
  3470.             height: 240
  3471.         });
  3472.         $('#conversation').css({
  3473.             left: ($(window).width() - $('#conversation').outerWidth())/2,
  3474.         });
  3475.         mapCanvas.width = adjustedTileSize * worldSize;
  3476.         mapCanvas.height = adjustedTileSize * worldSize;
  3477.         if(showMap) {
  3478.             drawMap();
  3479.         }
  3480.         if(showInventory) {
  3481.             drawInventory();
  3482.         }
  3483.         if(showBag) {
  3484.             //newBag = true;
  3485.             drawBag(bag);
  3486.             drawBagText(bag);
  3487.         }
  3488.  
  3489. };
  3490.  
  3491. function onSocketConnected() {
  3492.     socket.emit("player connected", {playerName: sessionStorage.playerName, playerPass: sessionStorage.playerPass});
  3493. };
  3494. function thePlayerLoop() {
  3495.     setTimeout(thePlayerLoop, 30);
  3496.     if(remotePlayers.length == 0)
  3497.             return;
  3498.     for (var i = 0; i < remotePlayers.length; i++) {
  3499.         if(!keysDown['16'] && remotePlayers[i]["stamina"] < remotePlayers[i]["maxStamina"])
  3500.         remotePlayers[i]["stamina"] += .05;
  3501.         if(remotePlayers[i]["swingTime"] > 0)
  3502.             remotePlayers[i]["swingTime"]--;
  3503.     }
  3504. };
  3505. function theProjectileLoop() {
  3506.     setTimeout(theProjectileLoop, 30);
  3507.     if(projectiles.length == 0)
  3508.             return;
  3509.     for(var i = 0; i < projectiles.length; i++) {
  3510.         if(projectiles[i]){
  3511.             if(projectiles[i].getHP() > 0) {
  3512.                 projectiles[i].setHP(projectiles[i].getHP() - 1);
  3513.                 projectiles[i].setY(projectiles[i].getY() + projectiles[i].getmoveY());//sin
  3514.                 projectiles[i].setX(projectiles[i].getX() + projectiles[i].getmoveX());//cos
  3515.                 //projectiles[i].setAngle(projectiles[i].getAngle() + 1);
  3516.                 //console.log(projectiles[i].getX() + projectiles[i].getmoveX())
  3517.             }
  3518.         }
  3519.     }
  3520.    
  3521. };
  3522.  
  3523. // Socket disconnected
  3524. function onSocketDisconnect() {
  3525.     //window.location = "login.html";
  3526. };
  3527.  
  3528. // Move player
  3529. function onMovePlayer(data) {
  3530.     var movePlayer = playerByPid(data.pid);
  3531.     // Player not found
  3532.     if (!movePlayer) {
  3533.         console.log("MovePlayer - Player not found: "+data.pid);
  3534.         return;
  3535.     };
  3536.     if(typeof data.isMoving !== "undefined" && !data.isMoving)
  3537.         movePlayer["moving"] = false;
  3538.     else {
  3539.         movePlayer["moving"] = true;
  3540.         movePlayer["footStep"] = data.footStep;
  3541.         movePlayer["stamina"] = data.stamina;
  3542.     }
  3543.  
  3544.     // Update player position
  3545.     movePlayer.setAbsPos(data.x, data.y);
  3546.     movePlayer.setPos(data.x, data.y);
  3547.     movePlayer.setDir(data.dir);
  3548.    
  3549.     //localPlayer.setBgPos(movePlayer.canvasXnull, movePlayer.canvasYnull);
  3550.  
  3551. };
  3552.  
  3553. // Move player
  3554. function onMovePlayerNew(data) {
  3555.     var movePlayer = playerByPid(data.pid);
  3556.     // Player not found
  3557.     if (!movePlayer) {
  3558.         console.log("MovePlayer - Player not found: "+data.pid);
  3559.         return;
  3560.     };
  3561.     if(typeof data.isMoving !== "undefined" && !data.isMoving)
  3562.         movePlayer["moving"] = false;
  3563.     else {
  3564.         movePlayer["moving"] = true;
  3565.         movePlayer["footStep"] = data.footStep;
  3566.         movePlayer["stamina"] = data.stamina;
  3567.     }
  3568.  
  3569.     // Update player position
  3570.     //movePlayer.setAbsPos(data.x, data.y);
  3571.     console.log(movePlayer.absPos.absX+" "+data.x)
  3572.  
  3573.     if(distance(movePlayer.absPos.absX, movePlayer.absPos.absY, data.x, data.y) >= 5) {
  3574.     //  movePlayer.setAbsPos(data.x, data.y);
  3575.         movePlayer.setPos(data.x, data.y);
  3576.     }
  3577.  
  3578.     movePlayer.setDir(data.dir);
  3579.    
  3580.     //localPlayer.setBgPos(movePlayer.canvasXnull, movePlayer.canvasYnull);
  3581.  
  3582. };
  3583.  
  3584. function onRespawnPlayer(data) {
  3585.     var movePlayer = playerByPid(data.pid);
  3586.  
  3587.     // Player not found
  3588.     if (!movePlayer) {
  3589.         console.log("MovePlayer - Player not found: "+data.id);
  3590.         return;
  3591.     };
  3592.     // Update player position
  3593.     //movePlayer.setAbsPos(data.x, data.y);
  3594.     movePlayer.setPos(data.x, data.y);
  3595.     movePlayer.setDir(data.dir);
  3596.     movePlayer["footStep"] = data.footStep;
  3597.     movePlayer.setHp(data.hp);
  3598.  
  3599.     if(data.pid == localPlayer.pid) {
  3600.         localPlayer.displayStats();
  3601.         onNewMessage({mode: "s", text: "You have died. Better luck next time!", player: "Server"});
  3602.     }
  3603.     //localPlayer.setBgPos(movePlayer.canvasXnull, movePlayer.canvasYnull);
  3604.  
  3605. };
  3606.  
  3607. function onMoveEnemy(data) {
  3608.     if(!localPlayer)
  3609.         return;
  3610.     var moveEnemy = enemyById(data.id);
  3611.     // Enemy not found
  3612.     if (!moveEnemy) {
  3613.         console.log("MoveEnemy - Enemy not found: "+data.id);
  3614.         return;
  3615.     };
  3616.     // Update player position
  3617.     if(typeof data.fighting !== "undefined")
  3618.         moveEnemy["fightingId"] = data.fighting;
  3619.  
  3620.     if(Math.abs(data.x - data.movingX) >= 5 && Math.abs(data.x - data.movingX) >= 5)
  3621.         moveEnemy["isMoving"] = true;
  3622.     else
  3623.         moveEnemy["isMoving"] = false;
  3624.  
  3625.     moveEnemy.setX(data.x);
  3626.     moveEnemy.setY(data.y);
  3627.     moveEnemy.setMovingX(data.movingX);
  3628.     moveEnemy.setMovingY(data.movingY);
  3629.  
  3630. };
  3631.  
  3632. // Remove player
  3633. function onRemovePlayer(data) {
  3634.     var removePlayer = playerByPid(data.pid);
  3635.  
  3636.     if (!removePlayer) {
  3637.         console.log("RemovePlayer - Player not found: "+data.id);
  3638.         return;
  3639.     };
  3640.  
  3641.     remotePlayers.splice(remotePlayers.indexOf(removePlayer), 1);
  3642. };
  3643.  
  3644. function onRemoveProjectile(data) {
  3645.     var removeProjectile = projectileById(data.id);
  3646.  
  3647.     if (!removeProjectile) {
  3648.         console.log("RemoveProjectile- Projectile not found: "+data.id);
  3649.         return;
  3650.     };
  3651.  
  3652.     projectiles.splice(projectiles.indexOf(removeProjectile), 1);
  3653. };
  3654.  
  3655. // New Enemy
  3656. function onNewEnemy(data) {
  3657.     var newEnemy = new Enemy(data.x, data.y, data.size, data.id, data.type);
  3658.     enemies.push(newEnemy);
  3659. };
  3660.  
  3661. function onNewEnemies(data) {
  3662.     console.log(data.id)
  3663.     if(data.id == localPlayer.getID()) {
  3664.         for(var i = 0; i < data.enemies.length; i++) {
  3665.             var newEnemy = new Enemy(data.enemies[i].x, data.enemies[i].y, data.enemies[i].npc, data.enemies[i].id);
  3666.             newEnemies.push(newEnemy);
  3667.         }
  3668.     }
  3669. };
  3670.  
  3671. function onNewProjectile(data) {
  3672.     var bgPos = localPlayer.getBgPos();
  3673.     var absPos = localPlayer.getAbsPos();
  3674.     var player = playerByPid(data.pid);
  3675.     var endPos = {x: data.x, y: data.y};
  3676.     var newProjectile = false;
  3677.     if(data.visible)
  3678.         newProjectile = new Projectile(data.name, data.type, data.startX, data.startY, endPos.x, endPos.y, data.moveX, data.moveY, data.hp, 10, data.id, data.pid);
  3679.     var theta = Math.atan2(endPos.y - data.startY, endPos.x - data.startX);
  3680.  
  3681.     if(localPlayer.pid == data.pid && data.type != 1)
  3682.         localPlayer.playerSound("bowshot");
  3683.  
  3684.     theta += Math.PI/2.0;
  3685.     var newAngle = toDegrees(theta) - 90;
  3686.     if (newAngle < 0.0) {
  3687.         newAngle += 360.0;
  3688.     }
  3689.     player.swingTime = 20;
  3690.  
  3691.     if(newProjectile) {
  3692.         newProjectile["angle"] = newAngle;
  3693.         projectiles.push(newProjectile);
  3694.         startMove({id: data.id}, {absX: data.startX, absY: data.startY}, endPos);//use game to move, not the object
  3695.     }
  3696. };
  3697.  
  3698. function toRadians (angle) {
  3699.   return angle * (Math.PI / 180);
  3700. }
  3701.  
  3702. function toDegrees (angle) {
  3703.   return angle * (180 / Math.PI);
  3704. }
  3705.  
  3706. var moveNow = function(){
  3707.  
  3708.         //console.log(this);
  3709.  
  3710.         setY(y + 1);//sin
  3711.         setX(x + 1);//cos
  3712.  
  3713.     }
  3714.  
  3715.     var startMove = function(id,player,endPos) {
  3716.         var Point = player;
  3717.         var Target = endPos;
  3718.         var Angle = Math.atan2(Target.y - Point.absY, Target.x - Point.absX);
  3719.         var Per_Frame_Distance = 5;
  3720.         var Sin = Math.sin(Angle) * Per_Frame_Distance;
  3721.         var Cos = Math.cos(Angle) * Per_Frame_Distance;
  3722.         //console.log('Moving: '+id.id);
  3723.         //console.log('Ty:' +Target.y+' Py:'+Point.absY+' Tx:'+Target.x+' Px:'+Point.absX);
  3724.         //console.log('Moving: Angle:'+Angle+' Sin:'+Sin+' Cos:'+Cos);
  3725.         var thisProjectile = projectileById(id.id);
  3726.         thisProjectile.isMoving = true;
  3727.         //thisProjectile.moveX = Cos;
  3728.         //thisProjectile.moveY = Sin;
  3729.         //console.log(thisProjectile)
  3730.         //setInterval(moveNow, 1000);
  3731.     }
  3732.  
  3733. function onRespawnEnemy(data) {
  3734.     var enemy = enemyById(data.id);
  3735.     enemy.setAlive();
  3736.     enemy.setX(data.x);
  3737.     enemy.setY(data.y);
  3738. };
  3739.  
  3740.  
  3741. /**************************************************
  3742. ** GAME ANIMATION LOOP
  3743. **************************************************/
  3744. var lastRender = Date.now();
  3745. var lastFpsCycle = Date.now();
  3746. var delta = 0;
  3747. var FPS = 30;
  3748. function animate() {
  3749.     //setTimeout(animate, 1000 / FPS);
  3750.    
  3751.     delta = (Date.now() - lastRender);
  3752.     lastRender = Date.now();
  3753.     //console.log(delta)
  3754.     update(delta);
  3755.     //setTimeout(theProjectileLoop, 1000);
  3756.     //console.log(Math.round(1/delta))
  3757.    
  3758.     draw();
  3759.  
  3760.     if(Date.now() - lastFpsCycle > 1000) {
  3761.         lastFpsCycle = Date.now();
  3762.         var fps = Math.round(1/delta);
  3763.         $("#fps").html("FPS: "+fps);
  3764.     }
  3765.     // Request a new animation frame using Paul Irish's shim
  3766.     //window.requestAnimFrame(animate);
  3767.     requestAnimFrame(animate);
  3768. };
  3769.  
  3770. window.requestAnimFrame = (function(){
  3771.       return  window.requestAnimationFrame       ||
  3772.               window.webkitRequestAnimationFrame ||
  3773.               window.mozRequestAnimationFrame    ||
  3774.               window.oRequestAnimationFrame      ||
  3775.               window.msRequestAnimationFrame     ||
  3776.               function(/* function */ callback){
  3777.                 window.setTimeout(callback, 1000 / 60);
  3778.               };
  3779.     })();
  3780.  
  3781. /**************************************************
  3782. ** GAME UPDATE
  3783. **************************************************/
  3784. function update(dt) {
  3785.     if(localPlayer.moving) {
  3786.         var pos = localPlayer.getPos();
  3787.         var absPos = localPlayer.getAbsPos();
  3788.         var bgPos = localPlayer.getBgPos();
  3789.         if(localPlayer.hasMoved) {
  3790.             localPlayer.playerMove(dt);
  3791.             socket.emit("move player", {id: localPlayer.getID(), x: pos.x, y: pos.y, absX: absPos.absX, absY: absPos.absY, dir: localPlayer.getDir(), canvasX: bgPos.x, canvasY: bgPos.y});
  3792.         }
  3793.     } else if(!localPlayer.isFighting()){
  3794.         doTheMove2();
  3795.     }
  3796.  
  3797.     /*localPlayer.moveProcess(dt);
  3798.     localPlayer.playerMove(dt);
  3799.     localPlayer.doTheMove2();
  3800.  
  3801.     //if(typeof localPlayer !== "undefined")
  3802.         //localPlayer.setPos(localPlayer.absX, localPlayer.absY);
  3803.     if(localPlayer.moving) {
  3804.         //var pos = localPlayer.getPos();
  3805.         //var absPos = localPlayer.getAbsPos();
  3806.         //var bgPos = localPlayer.getBgPos();
  3807.         //doTheMove();
  3808.     }*/
  3809. };
  3810.  
  3811. var angleUpdate = function(dest_angle, anglee, speed, cap) {
  3812.     var angle = anglee;
  3813. var diff = dest_angle - angle;
  3814.  
  3815. //This is where the action is!
  3816. if (diff >= 180 && angle < 180) { angle += 360; }
  3817. else if (diff <= -180) { angle -= 360; return angle; }
  3818.  
  3819. //Check the cap
  3820. if (cap == -1) { angle += diff / speed; }
  3821. else {
  3822.     if (diff / speed < cap) { angle += diff / speed; }
  3823.     else { angle += cap*diff; } }
  3824.    
  3825. //Spit it out...
  3826. console.log(angle)
  3827. return angle;
  3828. }
  3829.  
  3830. function distance(x1, y1, x2, y2) {
  3831.   return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
  3832. }
  3833.  
  3834.  
  3835. /**************************************************
  3836. ** GAME DRAW
  3837. **************************************************/
  3838. var draw = function() {
  3839.  
  3840.     if(showSkills)
  3841.         drawSkills();
  3842.  
  3843.     drawSkillButtons();
  3844.  
  3845.     // Move Background if necessary
  3846.     var bgPos = localPlayer.getBgPos();
  3847.     if(parseInt(document.getElementById("bgDiv").style.marginLeft) != bgPos.x) {
  3848.         document.getElementById("bgDiv").style.marginLeft = bgPos.x + "px";
  3849.     }
  3850.     if(parseInt(document.getElementById("bgDiv").style.marginTop) != bgPos.y) {
  3851.         document.getElementById("bgDiv").style.marginTop = bgPos.y + "px";
  3852.     }
  3853.     //document.getElementById("inventoryCanvas").setAttribute("style", "cursor:url(sprites/monster.png);");
  3854.     //$('#inventoryCanvas').css('cursor', 'url(sprites/monster.png)');
  3855.     //document.body.style.cursor = "sprites/monster.png";
  3856.     //document.getElementById("inventoryCanvas").style.cursor = "sprites/monster.png";
  3857.     // Wipe the canvas clean
  3858.     ctx.clearRect(0, 0, canvas.width, canvas.height);
  3859.  
  3860.     // Draw World
  3861.     var worldRight = worldSize * tileSize;
  3862.     var worldBottom = worldSize * tileSize;
  3863.     if(cursorSprite != "" && ((itemDown && (mouseX != mouseDownX || mouseY != mouseDownY)) || abilityDown >= 0 || abilityDown2 >= 0) ) {
  3864.         cursor = new Image();
  3865.         cursor.src = cursorSprite;
  3866.         //ctx.drawImage(cursor, 0, 0, 44, 44, cursorX, items[i]["y"]+bgPos.y, 32, 32);
  3867.         inventoryCtx.drawImage(cursor, 0, 0, 44, 44, (mouseX) - (invStartX) - 22, mouseY - (invStartY) - 22, 44, 44);
  3868.         skillCtx.drawImage(cursor, 0, 0, 44, 44, (mouseX) - (skillStartX) - 22, mouseY - (skillStartY) - 22, 44, 44);
  3869.         ctx.drawImage(cursor, 0, 0, 44, 44, mouseX - 22, mouseY - 22, 44, 44);
  3870.     }
  3871.  
  3872.     // Draw items
  3873.     for (var i = 0; i < items.length; i++) {
  3874.             ctx.drawImage(lootbags, items[i]["type"]*44, 0, 44, 44, items[i]["x"]+bgPos.x, items[i]["y"]+bgPos.y, 32, 32);
  3875.             //ctx.drawImage(enemysprite, 32+96, 0, 32+96, 32, x+cXnull, y+cYnull, 32, 32);
  3876.             //items[i].draw(ctx, bgPos.x, bgPos.y);
  3877.     }
  3878.  
  3879.     // Draw enemies
  3880.     for (var i = 0; i < enemies.length; i++) {
  3881.         if(enemies[i].isAlive() || enemies[i].deadTimer() > 0) {
  3882.             if(!enemies[i].isAlive())
  3883.                 enemies[i].setDeadTime(enemies[i].deadTimer() - 1);
  3884.             var fighting = playerByPid(enemies[i].fightingId);
  3885.             if((fighting || enemies[i].isMoving) && enemies[i].rotates) {
  3886.             var theta = Math.atan2(enemies[i].getMovingY() - enemies[i].getY(), enemies[i].getMovingX() - enemies[i].getX());
  3887.                 theta += Math.PI/2.0;
  3888.                 var newAngle = toDegrees(theta) - 90;
  3889.                     if (newAngle < 0.0) {
  3890.                         newAngle += 360.0;
  3891.                     }
  3892.  
  3893.                     //newAngle = angleUpdate(newAngle, enemies[i].getAngle(), 1, 1);
  3894.                     //enemies[i].setAngle(angleU);
  3895.                     var myAngle = enemies[i].getAngle();
  3896.                 if(Math.abs(myAngle - newAngle) > 0) {
  3897.                     if(Math.abs(myAngle - newAngle) >= 180) {
  3898.                         var speed = 2 - (distance(enemies[i].getX(), enemies[i].getMovingX(), enemies[i].getY(), enemies[i].getMovingY()) / 100);
  3899.                             if(speed < 1)
  3900.                                 speed = 1;
  3901.  
  3902.                         if(newAngle > 180) {
  3903.                             myAngle -= 5 * speed;
  3904.                             } else {
  3905.                             myAngle += 5 * speed;
  3906.                         }
  3907.                         if(myAngle >= 360)
  3908.                             myAngle -= 360;
  3909.                         else if(myAngle <= 0)
  3910.                             myAngle += 360
  3911.                     }
  3912.                    
  3913.                         if(Math.abs(enemies[i].getAngle() - newAngle) < 30) {
  3914.                             if(enemies[i].getAngle() > newAngle)
  3915.                                 enemies[i].setAngle(enemies[i].getAngle() - 1);
  3916.                             else
  3917.                                 enemies[i].setAngle(enemies[i].getAngle() + 1);
  3918.                         } else if(Math.abs(enemies[i].getAngle() - newAngle) < 180) {
  3919.                             if(enemies[i].getAngle() > newAngle)
  3920.                                 enemies[i].setAngle(enemies[i].getAngle() - 3);
  3921.                             else
  3922.                                 enemies[i].setAngle(enemies[i].getAngle() + 3);
  3923.                         } else {
  3924.                             enemies[i].setAngle(myAngle);
  3925.                         }
  3926.  
  3927.                 }
  3928.             }
  3929.  
  3930.             enemies[i].draw(ctx, bgPos.x, bgPos.y);
  3931.         }
  3932.     }
  3933.  
  3934.     // Draw projectiles
  3935.     for (var i = 0; i < projectiles.length; i++) {
  3936.         //if(projectiles[i].isAlive()) {
  3937.             projectiles[i].draw(ctx, bgPos.x, bgPos.y, projectiles[i].angle);
  3938.     };
  3939.  
  3940.     // Draw remote players
  3941.     for (var i = 0; i < remotePlayers.length; i++) {
  3942.         remotePlayers[i].draw(ctx, bgPos.x, bgPos.y, remotePlayers[i].angle);
  3943.     };
  3944.  
  3945.     // Draw local player
  3946.     localPlayer.draw(ctx, bgPos.x, bgPos.y, localPlayer.angle);
  3947.  
  3948.     // Draw npcs
  3949.     for (var i = 0; i < npcs.length; i++) {
  3950.             npcs[i].draw(ctx, bgPos.x, bgPos.y);
  3951.     }
  3952.  
  3953.     // If player is in fight, display stats of enemy
  3954.     if(localPlayer.isGoingToFight()) {
  3955.         var enemy = enemies[localPlayer.enemyID()];
  3956.         var value = localPlayer.isFighting();
  3957.         if(enemy.isAlive() && $("#enemyLevel").hasClass('hideClass')) {
  3958.             enemy.displayStats();
  3959.         }
  3960.     }
  3961.     else if(!$("#enemyLevel").hasClass('hideClass')) {
  3962.         $("#enemyLevel").addClass('hideClass');
  3963.         $("#enemyName").addClass('hideClass');
  3964.         $("#enemyHeart").addClass('hideClass');
  3965.         $("#enemyHealthBorder").addClass('hideClass');
  3966.         $("#enemyHealth").addClass('hideClass');
  3967.     }
  3968. };
  3969.  
  3970. /**************************************************
  3971. ** GAME HELPER FUNCTIONS
  3972. **************************************************/
  3973. // Find player by ID
  3974. function playerById(id) {
  3975.     if(!localPlayer)
  3976.         return;
  3977. if(remotePlayers.length == 0)
  3978.     return false;
  3979.     for (var i = 0; i < remotePlayers.length; i++) {
  3980.         if(remotePlayers[i]) {
  3981.             if (remotePlayers[i].getID() == id) {
  3982.                 return remotePlayers[i];
  3983.             }
  3984.         }
  3985.     };
  3986.     return false;
  3987. };
  3988.  
  3989. function playerByPid(id) {
  3990.     if(!localPlayer)
  3991.         return false;
  3992.     if(remotePlayers.length == 0)
  3993.         return false;
  3994.     for (var i = 0; i < remotePlayers.length; i++) {
  3995.         if(remotePlayers[i]) {
  3996.             if (remotePlayers[i].getPid() == id) {
  3997.                 return remotePlayers[i];
  3998.             }
  3999.         }
  4000.     };
  4001.     return false;
  4002. };
  4003.  
  4004. function playerByPid(pid) {
  4005.     if(!localPlayer)
  4006.         return;
  4007.     if(remotePlayers.length == 0)
  4008.         return false;
  4009.     for (var i = 0; i < remotePlayers.length; i++) {
  4010.         if(remotePlayers[i]) {
  4011.         if (remotePlayers[i].getPid() == pid) {
  4012.             //console.log(remotePlayers);
  4013.             return remotePlayers[i];
  4014.         }
  4015.     }
  4016.     };
  4017.     return false;
  4018. };
  4019.  
  4020. function enemyById(id) {
  4021.     //console.log(remotePlayers);
  4022.     if(!localPlayer)
  4023.         return;
  4024. if(enemies.length == 0)
  4025.     return false;
  4026.     for (var i = 0; i < enemies.length; i++) {
  4027.         if(enemies[i]) {
  4028.         if (enemies[i].getID() == id) {
  4029.             return enemies[i];
  4030.         }
  4031.     }
  4032.     };
  4033.     return false;
  4034. };
  4035.  
  4036. function projectileById(id) {
  4037.     if(!localPlayer)
  4038.         return;
  4039.     //console.log(projectiles);
  4040.     for (var i = 0; i < projectiles.length; i++) {
  4041.         if (projectiles[i].getID() == id) {
  4042.             return projectiles[i];
  4043.         }
  4044.     };
  4045.     return false;
  4046. };
  4047.  
  4048. //Input.send.old = {'key':'','mouse':[0,0]};
RAW Paste Data