constructor(x, y, w, h) {

    this.i = x;

    this.j = y;

    this.w = w;

    this.h = h;

    this.x = this.w/2 + this.i * this.w;

    this.y = this.h/2 + this.j * this.h;

    this.id = this.i + this.j * cols;

    this.taken = false;

  }

  show() {

    if (this.taken) {

      fill(252, 238, 33);

    } else if (!this.taken) {

      fill(45, 197, 244);

    }

    noStroke();

    rectMode(CENTER);

    rect(this.x, this.y, h-2, h-2);

  }

  hover(x, y) {

    return (

      x > this.x - this.w/2 &&

      x < this.x + this.w/2 &&

      y > this.y - this.h/2 &&

      y < this.y + this.h/2

    );

  }

  showID() {

    noStroke();

    rectMode(CENTER);

    fill(255, 50);

    rect(this.x, this.y, this.h*4, this.h*4);

    fill(0);

    textSize(16);

    textAlign(CENTER, CENTER);

    text(this.id, this.x, this.y);

  }

}