const perlinScale = 3;
tileSize = 24;
const gridSize = [18, 18];
var cash = 99;

var world = Array.from(Array(gridSize[0]), () => new Array(gridSize[1]));
for (x = 0; x < gridSize[0]; x++){
  for (y = 0; y < gridSize[1]; y++){
    world[x][y] = {type: 0, structure: 0}
  }
}


window.onload = function () {

    // GET THE IMAGE.
    var city = new Image();
    city.src = 'city.png';
    var rock = new Image();
    rock.src = 'rock.png';
    var background = new Image();
    var grass = new Image();
    grass.src = 'grass.png'
    var sea = new Image();
    sea.src = 'sea.png'
    var hills = new Image();
    hills.src = 'hills.png'
    tiles = [grass,hills,sea,rock,city];
    background.src = 'background.png';
    // WAIT TILL IMAGE IS LOADED.
    background.onload = function () {
        fill_canvas();       // FILL THE CANVAS WITH THE IMAGE.
    }

    function fill_canvas() {
        // CREATE CANVAS CONTEXT.
        var canvas = document.getElementById('canvas');
        canvas.addEventListener("mousedown", function(e)
        {
            getMousePosition(canvas, e);
        });
        canvas.width = tileSize*gridSize[0];
        canvas.height = tileSize*gridSize[1];
        var ctx = canvas.getContext('2d');


        generateWorld()
        render(ctx)
        updateUI();

    }
}

function getBlockDimensions(){

return [canvas.width/24, canvas.height/24]
}

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

function render(ctx) {      // 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);
}

function generateWorld(){
  let x, y = 0
  noise.seed(Math.random())
  for(x = 0; x < gridSize[0]; x++){
    for(y = 0; y < gridSize[1]; y++){

      var value = (noise.perlin2(x/perlinScale, y/perlinScale))*10;
      if (value >= -3) {
        world[x][y].type = 0
      } else if (value < -3) {
        world[x][y].type = 1
      }
      if (value > 1.4) {
        world[x][y].type = 2
      }

    }
  }
  for (i = 0; i < gridSize[0]*gridSize[1]/15; i){
    x = randomNumber(0,gridSize[0]);
    y = randomNumber(0,gridSize[1]);
    if (world[x][y].type != 1) {
      i++;
      world[x][y].structure = 1
    }
  }
}
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!")
    const tile = world[xu][yu];
    if (tile.type != 1 && tile.structure != 1 && cash > 10) {
      tile.structure = 2
      cash = cash - 10;
      updateUI();
      render(document.getElementById('canvas').getContext('2d'))
    }

}