// const perlinScale = 3;
const tileSize = 24;
var gridSize;
var cash = 99;
var world
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var socket = io.connect('http://127.0.0.1:8082/');
function joinGame(tankName, tankType, socket){
	if(tankName != ''){
		socket.emit('joinGame', {name: tankName, type: tankType});
	}
}
joinGame("aaa", "blue", socket);


socket.on('gameVars', function(tank){
  gridSize = tank.gridSize;
  world = tank.world;
  console.log(gridSize, world)
  console.log(tank)
  fill_canvas()
});

socket.on('sync', function (sync){
  world = sync.world;
  render()
})

window.onload = function () {

    // GET THE IMAGE.
    var city = new Image();
    city.src = 'img/city.png';
    var rock = new Image();
    rock.src = 'img/rock.png';
    var grass = new Image();
    grass.src = 'img/grass.png'
    var sea = new Image();
    sea.src = 'img/sea.png'
    var hills = new Image();
    hills.src = 'img/hills.png'
    tiles = [grass,hills,sea,rock,city];



}

function fill_canvas() {
    // CREATE CANVAS CONTEXT.

    canvas.addEventListener("mousedown", function(e)
    {
        getMousePosition(canvas, e);
    });
    canvas.width = tileSize*gridSize[0];
    canvas.height = tileSize*gridSize[1];



    render()
    updateUI();

}


function randomNumber(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
}

function render() {      // DRAW THE IMAGE TO THE CANVAS.
  let x, y = 0
  for(x = 0; x < gridSize[0]; x++){
    for(y = 0; y < gridSize[1]; y++){
      const xu = x*tileSize;
      const yu = y*tileSize;
      if (world[x][y].type == 0) {

        ctx.drawImage(tiles[0], xu,yu)
      } else if (world[x][y].type == 1) {
        ctx.drawImage(tiles[2], xu,yu)
      }
      if (world[x][y].type == 2) {
        ctx.drawImage(tiles[1], xu,yu)
      }
      if (world[x][y].structure == 1) {
      ctx.drawImage(tiles[3], xu,yu)
      }
      if (world[x][y].structure == 2) {
      ctx.drawImage(tiles[4], xu,yu)
      }

    }
  }
  console.log("image Rendered")
}
function updateUI(){
  document.getElementById("cash").innerHTML = ("$" + cash +socket.id);
}

function getMousePosition(canvas, event) {
    // Get mouse position on canvas
    const rect = canvas.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    const xu = Math.floor(x/tileSize)
    const yu = Math.floor(y/tileSize)
    // Convert canvas coordinates to usable coordinates within the coordinate system


    console.log("Click!")

		socket.emit('clickCanvas', {tilePosition: [xu,yu], structure: 2});
    // if (tile.type != 1 && tile.structure != 1 && cash > 10) {
    //   tile.structure = 2
    //   cash = cash - 10;

    // }

}