Limited By Boredom

            
              var w = 1536;
var h = 864;
var canvas;
var epoch = 0;
var col = ["rgb(244, 204, 161)", "rgb(57, 123, 68)", "rgb(113, 170, 52)", "rgb(40, 204, 223)"];
var names = ["HQ (beige)", "forest (green)", "sawmill (lime)", "fishing zone (cyan)"]
var nkinds = col.length-1;
var tiles = [new Tile(0, 0, 0)];
var next;

function setup() {
  canvas = createCanvas(w,h);
  canvas.parent("cc");
  textFont("Montserrat");
  rectMode(CORNER);
  noStroke();
  next = Math.floor(Math.random()*nkinds)+1;
}

function draw() {
  background(57, 120, 168);
  let e = ends();
  let mapw = e[1] - e[0] + 1;
  let maph = e[3] - e[2] + 1;
  for (let t in tiles) {
    fill(col[tiles[t].kind]);
    rect(w*(tiles[t].x-e[0]+1)/(mapw+2), h*(tiles[t].y-e[2]+1)/(maph+2), w/(mapw+2), h/(maph+2));
  }
  fill(0);
  textSize(36);
  textAlign(CENTER, CENTER);
  text("Upcoming: "+names[next], w/2, h-36);
}

function mouseClicked() {
  let e = ends();
  let mapw = e[1] - e[0] + 1;
  let maph = e[3] - e[2] + 1;
  let x = Math.floor(mouseX*(mapw+2)/w)+e[0]-1;
  let y = Math.floor(mouseY*(maph+2)/h)+e[2]-1;
  erect(x, y, next);
}

function Tile(x, y, kind) {
  this.x = x;
  this.y = y;
  this.kind = kind;
}

function erect(x, y, kind) {
  tile = new Tile(x, y, kind);
  if (find(x, y) < 0 && (find(x-1, y) > -1 || find(x+1, y) > -1 || find(x, y-1) > -1 || find(x, y+1) > -1)) {
    next = Math.floor(Math.random()*nkinds)+1;
    return tiles.push(tile);
  }
  return false;
}

function find(x, y) {
  let k = -1;
  for (let t in tiles) {
    if (tiles[t].x == x && tiles[t].y == y) {
      k = tiles[t].kind;
      break;
    }
  }
  return k;
}

function ends() {
  let maxx = 0;
  let minx = 0;
  let maxy = 0;
  let miny = 0;
  for (let t in tiles) {
    maxx = max(maxx, tiles[t].x);
    minx = min(minx, tiles[t].x);
    maxy = max(maxy, tiles[t].y);
    miny = min(miny, tiles[t].y);
  }
  return [minx, maxx, miny, maxy];
}