const squareSize = 100; //for drawing in boxes

const bg = 220; //so O's look transparent

let playerTracker = 0;

​

function between(value, min, max){

  if(value > min && value < max){

    return true;

  }else{

    return false;

  }

}

function mouseWithinSquare(bounding){

  let x1 = bounding[0]; let y1 = bounding[1];

  let x2 = bounding[2]; let y2 = bounding[3];

  if(between(mouseX,x1,x2) && between(mouseY,y1,y2)){

    return true

  }else{

    return false

  }

}

//bounding = (x1, y1, x2, y2)

let a1 = {

  topLeft: [20,20],

  centre: [70,70],

  bounding: [10, 10, 130, 130],

  player: ''

};

let a2 = {

  topLeft: [150,20],

  centre: [200,70],

  bounding: [135, 10, 264, 130],

  player: ''

}

let a3 = {

  topLeft: [280, 20],

  centre: [330, 70],

  bounding: [270, 10, 390, 130],

  player: ''

}

let b1 = {

  topLeft: [20, 150],

  centre: [70, 200],

  bounding: [10, 135, 130, 264],

  player: ''

}

let b2 = {

  topLeft: [150,150],

  centre: [200,200],

  bounding: [135, 135, 264, 264],

  player: ''

}

let b3 = {

  topLeft: [280, 150],

  centre: [330, 200],

  bounding: [270, 135, 390, 264],

  player: ''

}

let c1 = {

  topLeft: [20, 280],

  centre: [70, 330],

  bounding: [10, 270, 130, 390],

  player: ''

}

let c2 = {

  topLeft: [150, 280],

  centre: [200, 330],

  bounding: [135, 270, 264, 390],

  player: ''

}

let c3 = {

  topLeft: [280, 280],

  centre: [330, 330],

  bounding: [270, 270, 390, 390],

  player: ''

}

​

let xRGB;

let oRGB;

​

function arrayToRect(array){

  rectMode(CORNERS);

  rect(array[0],array[1],array[2],array[3]);

}

​

function setup() {

  rectMode(CORNERS);

  createCanvas(400, 400);

  background(bg);

  strokeWeight(2);

  xRGB = color(0,100,200);

  oRGB = color(200,50,0);

  //rect(margin,margin,width-2*margin,height-2*margin);

  line(width/3, margin, width/3, height-margin);

  line(2*width/3, margin, 2*width/3, height-margin);

  line(margin, height/3, width-margin, height/3);

  line(margin, 2*height/3, width-margin, 2*height/3);

/*  Looking over how everything looks

  arrayToRect(a1.bounding); arrayToRect(a2.bounding); arrayToRect(a3.bounding); arrayToRect(b1.bounding); arrayToRect(b2.bounding); arrayToRect(b3.bounding); arrayToRect(c1.bounding); arrayToRect(c2.bounding); arrayToRect(c3.bounding);

  drawO(a1.centre); drawO(a2.centre); drawO(a3.centre); drawO(b1.centre); drawO(b2.centre); drawO(b3.centre); drawO(c1.centre); drawO(c2.centre); drawO(c3.centre);

  drawX(a1.topLeft); drawX(a2.topLeft); drawX(a3.topLeft); drawX(b1.topLeft); drawX(b2.topLeft); drawX(b3.topLeft); drawX(c1.topLeft); drawX(c2.topLeft); drawX(c3.topLeft);

*/

}

​

function drawX(topLeft){

  stroke(xRGB);

  let x = topLeft[0]; let y = topLeft[1]; 

  line(x, y, x+squareSize, y+squareSize);

  line(x+squareSize, y, x, y+squareSize);

}

function drawO(centre){

  stroke(oRGB);

  let x = centre[0]; let y = centre[1]

  fill(bg);

  circle(x,y,squareSize);

}

​

function grid(coordinate){

    if(coordinate.player != ''){

      return

    }

    switch(playerTracker){

      case 0:

        drawX(coordinate.topLeft);

        coordinate.player = 'x';

        playerTracker = 1;

        break

      case 1:

        drawO(coordinate.centre);

        coordinate.player='o';

        playerTracker = 0;

        break

      case 2:

        console.log("X already won!");

        break

      case 3:

        console.log("O already won!");

        break

      default:

        console.log("Y'all broke...uh...something.");

    }

}

function draw() {

  switch(b2.player){

    case 'x':

      if(a1.player == b2.player && c3.player == b2.player){

        playerTracker = 2;

        line(10,10,390,390);

      }

      if(a2.player == b2.player && c2.player == b2.player){

        playerTracker = 2;

        line(200,10,200,390);

      }

      if(a3.player == b2.player && c1.player == b2.player){

        playerTracker = 2;

        line(390,10,10,390);

      }

      if(b1.player == b2.player && b3.player == b2.player){

        playerTracker = 2;

        line(10,200,390,200);

      }

      break

      case 'o':

      if(a1.player == b2.player && c3.player == b2.player){

        playerTracker = 3;

        line(10,10,390,390);

      }

      if(a2.player == b2.player && c2.player == b2.player){

        playerTracker = 3;

        line(200,10,200,390);

      }

      if(a3.player == b2.player && c1.player == b2.player){

        playerTracker = 3;

        line(390,10,10,390);

      }

      if(b1.player == b2.player && b3.player == b2.player){

        playerTracker = 3;

        line(10,200,390,200);

      }

      break

  }

  switch(a1.player){

    case 'x':

      if(a2.player == a1.player && a3.player == a1.player){

        playerTracker = 2;

        line(10,70,390,70);

      }

      if(b1.player == a1.player && c1.player == a1.player){

        playerTracker = 2;

        line(70,10,70,390);

      }

      break

    case 'o':

      if(a2.player == a1.player && a3.player == a1.player){

        playerTracker = 3;

        line(10,70,390,70);

      }

      if(b1.player == a1.player && c1.player == a1.player){

        playerTracker = 3;

        line(70,10,70,390);

      }

      break

  }

  switch(c3.player){

    case 'x':

      if(a3.player == c3.player && b3.player == c3.player){

        playerTracker = 2;

        line(330, 10, 330, 390);

      }

      if(c1.player == c3.player && c2.player == c3.player){

        playerTracker = 2;

        line(10,330,390,330);

      }

      break

    case 'o':

      if(a3.player == c3.player && b3.player == c3.player){

        playerTracker = 3;

        line(330, 10, 330, 390);

      }

      if(c1.player == c3.player && c2.player == c3.player){

        playerTracker = 3;

        line(10,330,390,330);

      }

      break

  }

  textSize(50)

  textAlign(CENTER)

  switch(playerTracker){

    case 2:

      rect(10,170,390,215);

      text('The winner is X!', 200, 210);

      break

    case 3:

      rect(10,170,390,215);

      text('The winner is O!', 200, 210);

      break

  }

}

​

​

function mouseClicked(){

  if(mouseWithinSquare(a1.bounding)){

    grid(a1);

  }

  if(mouseWithinSquare(a2.bounding)){

    grid(a2);

  }

  if(mouseWithinSquare(a3.bounding)){

    grid(a3);

  }

  if(mouseWithinSquare(b1.bounding)){

    grid(b1);

  }

  if(mouseWithinSquare(b2.bounding)){

    grid(b2);

  }

  if(mouseWithinSquare(b3.bounding)){

    grid(b3);

  }

  if(mouseWithinSquare(c1.bounding)){

    grid(c1);

  }

  if(mouseWithinSquare(c2.bounding)){

    grid(c2);

  }

  if(mouseWithinSquare(c3.bounding)){

    grid(c3);

  }

}