var getSocketIO = new XMLHttpRequest();
getSocketIO.open('GET', 'https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js');
getSocketIO.send();
var response = "";
getSocketIO.onload = function() {
if (getSocketIO.status == 200) {
   response = getSocketIO.responseText;
   alert("Now type in eval(response) in the console");
}
};
var targetPlayerId = "";
function moveBots() {
 let actions = ['left', 'right', 'up'];
  setTimeout(function () {
          for(var i = 0;i < socketArray.length;i++){
              socketArray[i].emit('release', actions[0]);
              socketArray[i].emit('release', actions[1]);
              socketArray[i].emit('release', actions[2]);
          }
     for(var i = 0;i < socketArray.length;i++){
        let moveFlag = 0; //0 means don't move, 1 means move right, 2 means move left
       let playerPos = getPlayerPos(socketArray[i].id);
        if(playerPos.x == null){playerPos.x=400;}
       var userPos = getPlayerPos(targetPlayerId);
       if(userPos.x > playerPos.x){
         moveFlag = 1;
       }
       if(userPos.x < playerPos.x){
         moveFlag = 2;
       }
        if(playerPos.x < 400){ moveFlag = 1; }
        if(playerPos.x > 400){ moveFlag = 2; }
        if(moveFlag == 1){
            socketArray[i].emit('press', 'right');
        }else if(moveFlag == 2){
            socketArray[i].emit('press', 'left');
        }
       socketArray[i].emit('press', 'shoot');
       socketArray[i].emit('press', 'up');
       socketArray[i].emit('update', userPos);
     }
      moveBots();
  }, 100);
}
var socketArray = [];
var xhr = "";
function makeBots(lobby, number, prefix){
  let tempLetters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
  for(var i = 0;i<number;i++){
      xhr = new XMLHttpRequest();
      xhr.open('GET', '/');
      xhr.send();
      var temp = io();
      var name = String(prefix+" "+tempLetters[i%tempLetters.length]);
      temp.emit('pick name', name);
      temp.emit('join lobby', lobby);
   socketArray.push(temp);
  }
 moveBots();
}
function randomMousePos() {
var x = window.innerWidth * Math.random();
var y = window.innerHeight * Math.random() + 100;
return {
  x: x,
  y: y
}
}
function getPlayerPos(playerID){
 let index = -1;
 for(var i = 0;i < gs.players.length;i++){
      if(gs.players[i].id==playerID){
          index=i;
      }
  }
 if(index == -1){
      return{
          x: null,
          y: null
      };
  }
 return{
   x: gs.players[index].x,
   y: gs.players[index].y
  };
}
var selectBox = document.createElement('div');
selectBox.style.zIndex = 100;
selectBox.id = 'selectBox';
selectBox.style.position = 'fixed';
selectBox.style.top = '10px';
selectBox.style.left = '10px';
selectBox.style.width = '300px';
selectBox.style.height = '400px';
selectBox.style.backgroundColor = '#222';
selectBox.style.overflowY = 'scroll';
document.body.appendChild(selectBox);
function updateSelectBox(){
 setTimeout(function(){
      selectBox.innerHTML = "";
      for(var i = 0;i < gs.players.length;i++){
          let userBox = document.createElement('button');
          userBox.innerHTML = gs.players[i].name;
          userBox.innerHTML += '<span class="id" style="display:none">'+gs.players[i].id+'</span>';
          userBox.style.width = '100%';
          userBox.style.display = 'block';
          userBox.style.padding = ' 10px 20px';
     if(targetPlayerId == gs.players[i].id){
       userBox.style.backgroundColor = 'green';
     }
          selectBox.appendChild(userBox);
          selectBox.scrollTo(0, selectBox.scrollHeight);
      }
   updateSelectBox();
  }, 500);
}
var targetPlayerId = "";
document.addEventListener('click', function(e){
if(e.target.tagName=="BUTTON"){
  targetPlayerId = e.target.childNodes[1].innerHTML;
  var buttonArray = document.querySelectorAll('button');
  buttonArray.forEach(function(elem){elem.style.backgroundColor='';});
 e.target.style.backgroundColor = 'green';
}
});
updateSelectBox();