let gridSize = 60;

​

let waterColor = [31, 107, 191];

let plainsColor = [255, 189, 0];

let forestColor = [46, 182, 119];

let mountainColor = [242, 92, 30];

​

let img01 = "img/mapmaker-02.png";

let img02 = "img/mapmaker-04.png";

let img03 = "img/mapmaker-01.png";

let img04 = "img/mapmaker-03.png";

​

let waterImage, plainsImage, forestImage, mountainImage;

​

let waterButton, plainsButton, forestButton, mountainButton;

let buttons = [];

let colors = [];

​

let hudPositionY = -45;

​

function preload() {

  waterImage = loadImage(img01);

  plainsImage = loadImage(img02);

  forestImage = loadImage(img03);

  mountainImage = loadImage(img04);

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  hexgrid(

    (windowWidth / gridSize) * 3,

    (windowHeight / gridSize) * 3,

    gridSize

  );

​

  for (let i = 0; i < hexArray.length; i++) {

    hexArray[i].state = min(max(round(randomGaussian(1, 1.3)), 0), 3);

  }

​

  waterButton = new Button(

    windowWidth / 2 - 150,

    windowHeight - hudPositionY,

    90,

    0,

    false

  );

​

  plainsButton = new Button(

    windowWidth / 2 - 50,

    windowHeight - hudPositionY,

    90,

    1,

    true

  );

​

  forestButton = new Button(

    windowWidth / 2 + 50,

    windowHeight - hudPositionY,

    90,

    2,

    false

  );

​

  mountainButton = new Button(

    windowWidth / 2 + 150,

    windowHeight - hudPositionY,

    90,

    3,

    false

  );

​

  buttons = [waterButton, plainsButton, forestButton, mountainButton];

  colors = [waterColor, plainsColor, forestColor, mountainColor];

}

​

function draw() {

  background(waterColor);

​

  for (let i = 0; i < hexArray.length; i++) {

    hexArray[i].display();

  }

​

  push();

  fill(0);

  rectMode(CENTER);

  rect(windowWidth / 2, windowHeight, 450, hudPositionY * 2 + 160, 30);

  pop();

​

  for (let i = 0; i < buttons.length; i++) {

    buttons[i].display();

  }

​

  if (mouseY > windowHeight - 100) {

    hudPositionY = min(hudPositionY + 10, 75);

  } else {

    hudPositionY = max(hudPositionY - 10, -45);

  }

​

  for (let i = 0; i < buttons.length; i++) {

    buttons[i].y = windowHeight - hudPositionY;

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

​

  waterButton.x = windowWidth / 2 - 150;

  waterButton.y = windowHeight - 75;

​

  plainsButton.x = windowWidth / 2 - 50;

  plainsButton.y = windowHeight - 75;

​

  forestButton.x = windowWidth / 2 + 50;

  forestButton.y = windowHeight - 75;

​

  mountainButton.x = windowWidth / 2 + 150;

  mountainButton.y = windowHeight - 75;

  let backupArray = [];

​

  for (let i = 0; i < hexArray.length; i++) {

    backupArray.push(hexArray[i]);

  }

​

  hexArray.splice(0, hexArray.length);

​

  for (let i = 0; i < backupArray.length; i++) {

    hexArray.push(backupArray[i]);

  }

​

  backupArray.splice(0, backupArray.length);

​

  for (let i = 0; i < buttons.length; i++) {

    buttons[i].y = windowHeight - hudPositionY;

  }

}

​