var socket;

function init() {
  var server = "mw.hatthieves.es";
  var host = "wss://" + server + "/?channelName=" + channel + "&username=" + userName;
  try {
    socket = new WebSocket(host);
    log('WebSocket - status ' + socket.readyState);
    socket.onopen = function (msg) {
      log("Welcome - status " + this.readyState);
    };
    socket.onmessage = function (msg) {
      data = msg.data;
      var username = data.split(" ")[0];
      var type = data.split(" ")[1];
      switch (type) {
        case "create":
          map = JSON.parse(data.split(" ")[2]);
          map.players = {};
          run(socket);
          break;

        case "left":
          if (map.players[username]) {
            map.players[username].deleted = true;
            $("#chatOutput").html($("#chatOutput").html() + "<b>[" + [username] + "]</b>" + " left the game.<br>");
            $("#chatOutput").scrollTop($("#chatOutput").get(0).scrollHeight);
          }
          break;

        case "chat":
          $("#chatOutput").html($("#chatOutput").html() + "<b>[" + [username] + "]</b>" + ": " + data.replace(username + " chat ", "") + "<br>");
          $("#chatOutput").scrollTop($("#chatOutput").get(0).scrollHeight);
          break;

        default:
          if (username != userName) {
            if (!map.players) {
              map.players = {};
            }

            if (!map.players[username]) {
              map.players[username] = {};
            }            
            let jsonData = JSON.parse(data.replace(username + " ", ""));
            if (!map.players[username].item) {
              map.players[username].deleted = false;
              map.players[username].landscapeTexture = new PIXI.Texture.fromImage(map.player.url);
              map.players[username].texture = new PIXI.Texture(map.players[username].landscapeTexture);
              map.players[username].item = new PIXI.Sprite(map.players[username].texture);
              map.players[username].nameStyle = new PIXI.TextStyle({
                fontFamily: 'komtit',
                fontSize: 24,
                fill: ['#FFF1E1', '#FFF1E1'], // gradient
                stroke: '#35130B',
                strokeThickness: 5,
                dropShadow: true,
                dropShadowColor: '#724833',
                dropShadowBlur: 4,
                dropShadowAngle: Math.PI / 2,
                dropShadowDistance: 1,
                wordWrap: false,
                wordWrapWidth: 440,
                padding: 20
              });
              map.players[username].username = username;
              map.players[username].name = new PIXI.Text([username], map.players[username].nameStyle);
              $("#chatOutput").html($("#chatOutput").html() + "<b>[" + [username] + "]</b>" + " join the game.<br>");
              $("#chatOutput").scrollTop($("#chatOutput").get(0).scrollHeight);
            }
            map.players[username].position = jsonData.position;
            map.players[username].direction = jsonData.direction;
            map.players[username].state = jsonData.state;
            map.players[username].scale = jsonData.scale;
            map.players[username].lives = jsonData.lives;
            map.players[username].score = jsonData.score;
          } else {
            let jsonData = JSON.parse(data.replace(username + " ", ""))
            position = jsonData.position;
            scale = jsonData.scale;
            lives = jsonData.lives;
            score = jsonData.score;
          }
          break;
      }

    };
    socket.onclose = function (msg) {
      reconnect();
    };

  } catch (ex) {
    log(ex);
  }
}

function quit() {
  if (socket != null) {
    log("Goodbye!");
    socket.close();
    socket = null;
  }
}

function reconnect() {
  quit();
  init();
}

function log(msg) {
  console.log(msg);
}

init();