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


window.onload = function () {

    // GET THE IMAGE.
    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];
    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.width = 576;
        canvas.height = 576;
        var ctx = canvas.getContext('2d');


        generateWorld()

        ctx.drawImage(background, 0, 0);       // DRAW THE IMAGE TO THE CANVAS.
        let x, y = 0
        for(x = 0; x < getBlockDimensions()[0]; x++){
          for(y = 0; y < getBlockDimensions()[1]; y++){

            if (world[x][y].type == 0) {

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

          }
        }
    }
}

function getBlockDimensions(){

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

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

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

      var value = (noise.perlin2(x/3.0, y/3.0))*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 < 20; i){
    x = randomNumber(0,24);
    y = randomNumber(0,24);
    if (world[x][y].type == 0) {
      i++;
      world[x][y].structure = 1
    }
  }
  console.log(world)
}