// Tic Tac Toe AI with Minimax Algorithm

// The Coding Train / Daniel Shiffman

// https://thecodingtrain.com/CodingChallenges/154-tic-tac-toe-minimax.html

// https://youtu.be/I64-UTORVfU

// https://editor.p5js.org/codingtrain/sketches/0zyUhZdJD

​

let cnvW = 400;

let cnvH = 400;

let divisions = 3;

let pad, edgePad;

let resultP;

let winMarker = []

let board = Array.from(Array(divisions), () => Array(divisions).fill(''));

// console.log(board)

let w;

let h;

​

let ai = 'X';

let human = 'O';

let currentPlayer = human;

​

function setup() {

  createCanvas(cnvW, cnvH).position((windowWidth-width)/2, (windowHeight-height)/2);

  w = width / divisions;

  h = height / divisions;

  pad = w*0.72;

  edgePad = w*0.1;

  resultP = createP('');

  resultP.style('font-size', '32pt').style('color', '#000000').style('font-family', 'Ubuntu').style('padding','2rem');

  bestMove();

  drawGame();

}

​

function equals3(a, b, c) {

  return a == b && b == c && a != '';

}

​

function checkWinner() {

  let winner = null;

  // horizontal

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

    if (equals3(board[i][0], board[i][1], board[i][2])) {

      winner = board[i][0];

      winMarker = [(w*i)+w/2, 0+edgePad*2, (w*i)+w/2, height-edgePad*2];

    }

  }

  // Vertical

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

    if (equals3(board[0][i], board[1][i], board[2][i])) {

      winner = board[0][i];

      winMarker = [0+edgePad*2, (w*i)+w/2, height-edgePad*2, (w*i)+w/2];

    }

  }

  // Diagonals

  if (equals3(board[0][0], board[1][1], board[2][2])) {

    winner = board[0][0];

    winMarker = [0+edgePad*2, 0+edgePad*2, width-edgePad*2, height-edgePad*2];

  }

  if (equals3(board[2][0], board[1][1], board[0][2])) {

    winner = board[2][0];

    winMarker = [width-edgePad*2, 0+edgePad*2, 0+edgePad*2, height-edgePad*2];

  }

​

  let openSpots = 0;

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

    for (let j = 0; j < divisions; j++) {

      if (board[i][j] == '') {

        openSpots++;

      }

    }

  }

​

  if (winner == null && openSpots == 0) {

    return 'tie';

  } else {

    return winner;

  }

}

​

function mousePressed() {

  if (currentPlayer == human) {

    // Human make turn

    let i = floor(mouseX / w);

    let j = floor(mouseY / h);

    // If valid turn

    if (board[i][j] == '') {

      board[i][j] = human;

      // move only if there are available spots

      let availableSpots = false;

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

        for(let j = 0; j < divisions; j++) {

          if(board[i][j]=="") {

            availableSpots = true;

          }

        }

      }

      if(availableSpots) {

        currentPlayer = ai;

        bestMove();

        drawGame();

      } else {

        drawGame();

        console.log("no available spots")

      };

    }

  }

}

​

function drawGame() {

  background(20);

  stroke(220);

  strokeWeight(8);

  noFill();

​

  for (let i = w; i < width; i+=w) {

    for (let j = w; j < height; j+=w) {

      line(i, 0, i, height);

      line(0, j, width, j);

    }

  }

  // line(w, 0, w, height);

  // line(w * 2, 0, w * 2, height);

  // line(0, h, width, h);

  // line(0, h * 2, width, h * 2);

  strokeWeight(20);

  for (let j = 0; j < divisions; j++) {

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

      let x = w * i + w / 2;

      let y = h * j + h / 2;

      let spot = board[i][j];

      let r = w / 4;

      if (spot == human) {

        ellipse(x, y, r * 2);

      } else if (spot == ai) {

        line(x - r, y - r, x + r, y + r);

        line(x + r, y - r, x - r, y + r);

      }

    }

  }

​

  let result = checkWinner();

  if (result != null) {

    // noLoop();

    // let resultP = createP('');

    // resultP.style('font-size', '32pt');

    if (result == 'tie') {

      resultP.html('Tie!');

    } else {

      blendMode(ADD);

      stroke(10,134,115,240);

      line(winMarker[0], winMarker[1], winMarker[2], winMarker[3]);

      resultP.html(`${result} wins!`);

    }

  }

}

​