// The width of the canvas.
var width;
// The height of the canvas.
var height;

// The state of the game board.
var state = [
  ['', '', '',],
  ['', '', '',],
  ['', '', '',],
];

// The array of canvas elements.
var boxes = [];

// Symbol for player 1.
var player1 = 'x';
// Symbol for player 2.
var player2 = 'o';

// The current player.
var currentPlayer = player1;

window.onload = function () {
  canvas = document.getElementById("grid");
  ctx = canvas.getContext("2d");
  width = canvas.width;
  height = canvas.height;
  drawGrid();
  addClickListener();
};

function addClickListener() {
  // Add event listener for `click` events.
  canvas.addEventListener("click", canvasClick, false);
}

function canvasClick(event) {
  const rect = canvas.getBoundingClientRect();
  var x = event.clientX - rect.left,
    y = event.clientY - rect.top;

  // Collision detection between clicked offset and element.
  boxes.forEach(function (element) {
    if (
      y > element.y &&
      y < element.y + element.height &&
      x > element.x &&
      x < element.x + element.width
    ) {
      if (state[element.row][element.column] !== "") {
        return;
      }

      // Record the player's play event.
      play(element.row, element.column);

      // See if there is a winner.
      let winner = isWin();
      if (winner === "draw") {
        document.getElementById("win").innerHTML = "draw!";
      } else if (winner === player1 || winner === player2) {
        document.getElementById("win").innerHTML = winner;
      }

      if (winner !== false) {
        canvas.removeEventListener("click", canvasClick);
        return;
      }
    }
  });
}

function play(row, column) {
  if (state[row][column] === "") {
    // assign the letter to the square.
    state[row][column] = currentPlayer;

    // draw the new state of the board
    drawState();

    // swap the player
    if (currentPlayer == player1) {
      currentPlayer = player2;
    } else {
      currentPlayer = player1;
    }
  }
}

function isWin() {
  let winner = null;

  let row = 0;
  let column = 0;

  // horizontal
  for (let i = 0; i < state.length; i++) {
    for (let j = 0; j < state[i].length - 2; j++) {
      if (
        (state[i][j] == player1 && state[i][j + 1]) == player1 &&
        state[i][j + 2] == player1
      ) {
        return player1;
      }
      if (
        (state[i][j] == player2 && state[i][j + 1]) == player2 &&
        state[i][j + 2] == player2
      ) {
        return player2;
      }
    }
  }

  // vertical
  for (let i = 0; i < state.length - 2; i++) {
    for (let j = 0; j < state[i].length; j++) {
      if (
        (state[i][j] == player1 && state[i + 1][j]) == player1 &&
        state[i + 2][j] == player1
      ) {
        return player1;
      }
      if (
        (state[i][j] == player2 && state[i + 1][j]) == player2 &&
        state[i + 2][j] == player2
      ) {
        return player2;
      }
    }
  }

  // diagonal
  for (let i = 0; i < state.length - 2; i++) {
    for (let j = 0; j < state[i].length - 2; j++) {
      if (
        (state[i][j] == player1 && state[i + 1][j + 1]) == player1 &&
        state[i + 2][j + 2] == player1
      ) {
        return player1;
      }
      if (
        (state[i + 2][j] == player1 && state[i + 1][j + 1]) == player1 &&
        state[i][j + 2] == player1
      ) {
        return player1;
      }
      if (
        (state[i][j] == player2 && state[i + 1][j + 1]) == player2 &&
        state[i + 2][j + 2] == player2
      ) {
        return player2;
      }
      if (
        (state[i + 2][j] == player2 && state[i + 1][j + 1]) == player2 &&
        state[i][j + 2] == player2
      ) {
        return player2;
      }
    }
  }

  // if there are any gaps left then return false
  for (let i = 0; i < state.length; i++) {
    for (let j = 0; j < state[i].length; j++) {
      if (state[i][j] == "") {
        return false;
      }
    }
  }

  return "draw";
}

function drawGrid() {
  let row = 0;
  let column = 0;

  state.forEach(function (line) {
    column = 0;
    let stateFactorY = state.length;
    let y = row * (width / stateFactorY);

    line.forEach(function (value) {
      let stateFactorX = line.length;

      let x = column * (width / stateFactorX);
      let rectWidth = width / stateFactorX;
      let rectHeight = height / stateFactorY;

      ctx.strokeRect(x, y, rectWidth, rectHeight);

      boxes.push({
        column: column,
        row: row,
        x: x,
        y: y,
        width: rectWidth,
        height: rectHeight
      });

      column++;
    });
    row++;
  });
}

function drawState() {
  let row = 0;
  let column = 0;

  state.forEach(function (line) {
    column = 0;
    let stateFactorY = state.length;
    let y = row * (width / stateFactorY);

    line.forEach(function (value) {
      let stateFactorX = line.length;

      let x = column * (width / stateFactorX);
      let rectWidth = width / stateFactorX;
      let rectHeight = height / stateFactorY;

      if (value == player1) {
        // Draw a "X".
        ctx.beginPath();
        ctx.moveTo(x + rectWidth * 0.15, y + rectHeight * 0.15);
        ctx.lineTo(
          x + rectWidth - rectWidth * 0.15,
          y + rectHeight - rectHeight * 0.15
        );
        ctx.moveTo(x + rectWidth - rectWidth * 0.15, y + rectHeight * 0.15);
        ctx.lineTo(x + rectWidth * 0.15, y + rectHeight - rectHeight * 0.15);
        ctx.stroke();
      } else if (value == player2) {
        // Draw a "O".
        ctx.beginPath();
        ctx.arc(
          x + rectWidth / 2,
          y + rectHeight / 2,
          rectHeight / 3,
          0,
          Math.PI * 2,
          true
        );
        ctx.stroke();
      }
      column++;
    });
    row++;
  });
}