let p1, p2;

let turn;

let table;

let board_size = 3;

​

class Board {

  constructor(player1, player2) {

    this.win = false;

    this.result = "";

​

    this.size = board_size;

    this.cells = [];

    this.cell_size = (width - 1) / this.size;

​

    this.p1 = player1;

    this.p2 = player2;

    this.turn = this.p1.t;

    this.startNewGame();

  }

  startNewGame() {

    this.win = false;

    this.turn = this.p1.t;

    table.html("Turn: " + this.p1.t);

    this.cells = [];

    for (let i = 0; i < this.size; i++) {

      for (let j = 0; j < this.size; j++) {

        this.cells.push({ r: i, c: j, t: "", v: 0 });

      }

    }

  }

​

  display() {

    let cell_size = this.cell_size;

    if (this.win) {

      textAlign(CENTER);

      textSize(36);

      //fill(0);

      text(this.result, width / 2, height / 2);

      text("Do you want to start a new game?", width / 2, height / 2 + 40);

      text("Click anywhere!", width / 2, height / 2 + 80);

    } else {

      this.cells.forEach(function (element) {

        fill(179, 236, 255);

        rect(

          element.r * cell_size,

          element.c * cell_size,

          cell_size,

          cell_size

        );

        fill(0);

        textSize(64);

        textAlign(CENTER);

        text(

          element.t,

          element.r * cell_size,

          element.c * cell_size,

          cell_size,

          cell_size

        );

      });

    }

  }

  update_cell(cell) {

    if (cell.r == r && cell.c == c && 0 == cell.v) {

      cell.t = t;

      if (this.turn == "IM") {

        cell.v = 1;

      } else {

        cell.v = -1;

      }

    }

  }

  update_board(r, c, t) {

    let turn = this.turn;

    this.cells.forEach(function (cell) {

      if (cell.r == r && cell.c == c && 0 == cell.v) {

        cell.t = t;

        if (turn == "IM") {

          cell.v = 1;

        } else {

          cell.v = -1;

        }

      }

    });

    let playerWon = this.checkResult();

    if (playerWon) {

      this.win = true;

      if (playerWon != "Looks like it's a tie") {

        this.result = " The winner is " + playerWon;

      } else {

        this.result = playerWon;

      }

    }

  }

  update_turn() {

    if (this.turn == player1.t) {

      this.turn = player2.t;

      table.html("Turn:" + player2.t);

    } else {

      this.turn = player1.t;

      table.html("Turn:" + player1.t);

    }

  }

  checkResult() {

    let winner;

    let p1 = this.p1;

    let p2 = this.p2;

    let s = this.size;

    let row_sum = new Array(s);

    let col_sum = new Array(s);

    let diag_sum = new Array(s);

    let opencell_count = s * s;

    for (let i = 0; i < s; i++) {

      row_sum[i] = 0;

      col_sum[i] = 0;

      diag_sum[i] = 0;

    }

    this.cells.forEach(function (element) {

      row_sum[element.r] += element.v;

      col_sum[element.c] += element.v;

      opencell_count -= abs(element.v);

      if (0 == abs(element.r - element.c)) {

        diag_sum[0] += element.v;

      }

      if (

        2 == abs(element.r - element.c) ||

        (1 == element.r && 1 == element.c)

      ) {

        diag_sum[1] += element.v;

      }

    });

    row_sum.forEach(function (element) {

      if (element == s) {

        winner = p1.t;

      }

      if (element == -1 * s) {

        winner = p2.t;

      }

    });

    col_sum.forEach(function (element) {

      if (element == s) {

        winner = p1.t;

      }

      if (element == -1 * s) {

        winner = p2.t;

      }

    });

    diag_sum.forEach(function (element) {

      if (element == s) {

        winner = p1.t;

      }

      if (element == -1 * s) {

        winner = p2.t;

      }

    });

    if (0 == opencell_count) {

      winner = "Looks like it's a tie";

      return winner;

    }

    return winner;

  }

}

​

class Player {

  constructor(player) {

    this.t = player;

  }

  make_move(board) {

    if (board.turn == this.t) {

      let cell_x = int(Math.floor(mouseX / board.cell_size));

      let cell_y = int(Math.floor(mouseY / board.cell_size));

      board.update_board(cell_x, cell_y, this.t);

    }

  }

}

​

function setup() {

  createCanvas(600, 600);

  player1 = new Player("IM");

  player2 = new Player("CS");

  table = createDiv("").size(200, 50);

  board = new Board(player1, player2);

}

​

function draw() {

  background(255);

  board.display();

}

​

function mousePressed() {

  if (!board.win) {

    if (board.turn == "IM") {

      player1.make_move(board);

    } else {

      player2.make_move(board);

    }

    board.update_turn();

  } else {

    board.startNewGame();

  }

}