text: "use strict";
  
  //Possible directions a user can move
  //their character. These are mapped
  //to integers for fast/small storage
  var directions = {
    DOWNLEFT: 0,
    DOWN: 1,
    DOWNRIGHT: 2,
    LEFT: 3,
    UPLEFT: 4,
    RIGHT: 5,
    UPRIGHT: 6,
    UP: 7,
    NONE: 8
  };
  
  //size of our character sprites
  var spriteSizes = {
    WIDTH: 50,
    HEIGHT: 50
  };
  
  //function to lerp (linear interpolation)
  //Takes position one, position two and the 
  //percentage of the movement between them (0-1)
  var lerp = function lerp(v0, v1, alpha) {
    return (1 - alpha) * v0 + alpha * v1;
  };
  
  //redraw with requestAnimationFrame
  var redraw = function redraw(time) {
    //update this user's positions
    updatePosition();
  
    ctx.clearRect(0, 0, 500, 500);
  
    //each user id
    var keys = Object.keys(squares);
  
    //for each user
    for (var i = 0; i < keys.length; i++) {
  
      var square = squares[keys[i]];
  
      //if alpha less than 1, increase it by 0.01
      if (square.alpha < 1) square.alpha += 0.05;
  
      //applying a filter effect to other characters
      //in order to see our character easily
      if (square.hash === hash) {
        ctx.fillStyle = "red";
      } else {
        ctx.fillStyle = "blue";
      }
  
      //calculate lerp of the x/y from the destinations
      square.x = lerp(square.prevX, square.destX, square.alpha);
      square.y = lerp(square.prevY, square.destY, square.alpha);
  
      //draw our characters
      ctx.fillRect(square.x, square.y, spriteSizes.WIDTH, spriteSizes.HEIGHT);
  
      //highlight collision box for each character
      ctx.strokeRect(square.x, square.y, spriteSizes.WIDTH, spriteSizes.HEIGHT);
    }
  
    //set our next animation frame
    animationFrame = requestAnimationFrame(redraw);
  };
  'use strict';
  
  var canvas = void 0;
  var ctx = void 0;
  var walkImage = void 0;
  var slashImage = void 0;
  //our websocket connection
  var socket = void 0;
  var hash = void 0;
  var animationFrame = void 0;
  
  var squares = {};
  var attacks = [];
  
  var keyDownHandler = function keyDownHandler(e) {
    var keyPressed = e.which;
    var square = squares[hash];
  
    // W OR UP
    if (keyPressed === 87 || keyPressed === 38) {
      square.moveUp = true;
    }
    // A OR LEFT
    else if (keyPressed === 65 || keyPressed === 37) {
        square.moveLeft = true;
      }
      // S OR DOWN
      else if (keyPressed === 83 || keyPressed === 40) {
          square.moveDown = true;
        }
        // D OR RIGHT
        else if (keyPressed === 68 || keyPressed === 39) {
            square.moveRight = true;
          }
  };
  
  var keyUpHandler = function keyUpHandler(e) {
    var keyPressed = e.which;
    var square = squares[hash];
  
    // W OR UP
    if (keyPressed === 87 || keyPressed === 38) {
      square.moveUp = false;
    }
    // A OR LEFT
    else if (keyPressed === 65 || keyPressed === 37) {
        square.moveLeft = false;
      }
      // S OR DOWN
      else if (keyPressed === 83 || keyPressed === 40) {
          square.moveDown = false;
        }
        // D OR RIGHT
        else if (keyPressed === 68 || keyPressed === 39) {
            square.moveRight = false;
          }
  };
  
  var init = function init() {
    walkImage = document.querySelector('#walk');
    slashImage = document.querySelector('#slash');
  
    canvas = document.querySelector('#canvas');
    ctx = canvas.getContext('2d');
  
    socket = io.connect();
  
    socket.on('joined', setUser); //when user joins
    socket.on('updatedMovement', update); //when players move
    socket.on('attackHit', playerDeath); //when a player dies
    socket.on('left', removeUser); //when a user leaves
  
    document.body.addEventListener('keydown', keyDownHandler);
    document.body.addEventListener('keyup', keyUpHandler);
  };
  
  window.onload = init;
  'use strict';
  
  //when we receive a character update
  var update = function update(data) {
    //if we do not have that character (based on their id)
    //then add them
    if (!squares[data.hash]) {
      squares[data.hash] = data;
      return;
    }
  
    //if the update is for our own character (we dont need it)
    //Although, it could be used for player validation
  
  
    //if we received an old message, just drop it
    if (squares[data.hash].lastUpdate >= data.lastUpdate) {
      return;
    }
  
    if (data.hash === hash) {
      var square = squares[data.hash];
      square.speedX = data.speedX;
      square.speedY = data.speedY;
    } else {
      //grab the character based on the character id we received
      var _square = squares[data.hash];
      //update their direction and movement information
      //but NOT their x/y since we are animating those
      _square.prevX = data.prevX;
      _square.prevY = data.prevY;
      _square.destX = data.destX;
      _square.destY = data.destY;
      _square.direction = data.direction;
      _square.moveLeft = data.moveLeft;
      _square.moveRight = data.moveRight;
      _square.moveDown = data.moveDown;
      _square.moveUp = data.moveUp;
      _square.alpha = 0.05;
      _square.speedX = data.speedX;
      _square.speedY = data.speedY;
    }
    //console.dir(data.speedX)
  };
  
  //function to remove a character from our character list
  var removeUser = function removeUser(data) {
    //if we have that character, remove them
    if (squares[data.hash]) {
      delete squares[data.hash];
    }
  };
  
  //function to set this user's character
  var setUser = function setUser(data) {
    hash = data.hash; //set this user's hash to the unique one they received
    squares[hash] = data; //set the character by their hash
    requestAnimationFrame(redraw); //start animating
  };
  
  //when receiving an attack (cosmetic, not collision event)
  //add it to our attacks to draw
  
  
  //when a character is killed
  var playerDeath = function playerDeath(data) {};
  
  //update this user's positions based on keyboard input
  var updatePosition = function updatePosition() {
    var square = squares[hash];
  
    //move the last x/y to our previous x/y variables
    square.prevX = square.x;
    square.prevY = square.y;
  
    //if user is moving up, decrease y
    if (square.moveUp && square.destY > 0 && square.speedY < 1) {
      square.destY -= 2;
    }
    //if user is moving down, increase y
    if (square.moveDown && square.destY < 400 && square.speedY > -1) {
      square.destY += 2;
    }
    //if user is moving left, decrease x
    if (square.moveLeft && square.destX > 0 && square.speedX < 1) {
      square.destX -= 2;
    }
    //if user is moving right, increase x
    if (square.moveRight && square.destX < 400 && square.speedX > -1) {
      square.destX += 2;
    }
  
    //if(square.destX < 400 && square.destX > 0)   square.destX += square.speedX;
    //if(square.destY < 400 && square.destY > 0)   square.destY += square.speedY;
  
    square.destX += square.speedX;
    square.destY += square.speedY;
  
    //determine direction based on the inputs of direction keys
    if (square.moveUp && square.moveLeft) square.direction = directions.UPLEFT;
  
    if (square.moveUp && square.moveRight) square.direction = directions.UPRIGHT;
  
    if (square.moveDown && square.moveLeft) square.direction = directions.DOWNLEFT;
  
    if (square.moveDown && square.moveRight) square.direction = directions.DOWNRIGHT;
  
    if (square.moveDown && !(square.moveRight || square.moveLeft)) square.direction = directions.DOWN;
  
    if (square.moveUp && !(square.moveRight || square.moveLeft)) square.direction = directions.UP;
  
    if (square.moveLeft && !(square.moveUp || square.moveDown)) square.direction = directions.LEFT;
  
    if (square.moveRight && !(square.moveUp || square.moveDown)) square.direction = directions.RIGHT;
  
    if (!square.moveRight && !square.moveUp && !square.moveDown && !square.moveLeft) square.direction = directions.NONE;
  
    console.dir(square.direction);
    //reset this character's alpha so they are always smoothly animating
    square.alpha = 0.05;
  
    //send the updated movement request to the server to validate the movement.
    socket.emit('movementUpdate', square);
  };
  