var WIDTH = 400;

var HEIGHT = 400;

setSize(WIDTH, HEIGHT);

var NUM_ROWS = 3;
var NUM_COLS = 3;
var OFFSET= 50;
var CIRCLE_BORDER = 5;
var BOX_SIZE = WIDTH / NUM_COLS;
var board = new Grid(NUM_ROWS, NUM_COLS);
var turn = true;
var inPlay = true;

function start(){
drawBoard();
mouseClickMethod(handleClick);
}

function drawBoard() {
var vert = WIDTH / 3;
var horz = HEIGHT / 3;
add(new Line(vert, 0, vert, HEIGHT));
add(new Line(WIDTH - vert, 0, WIDTH - vert, HEIGHT));
add(new Line(0, horz, WIDTH, horz));
add(new Line(0, HEIGHT - horz, WIDTH, HEIGHT - horz));
}

function drawX(row, col) {

var centerX = col * BOX_SIZE + BOX_SIZE / 2;
var centerY = row * BOX_SIZE + BOX_SIZE / 2;
var left = centerX - OFFSET;
var right = centerX + OFFSET;
var top = centerY - OFFSET;
var bottom = centerY + OFFSET;
var lineOne = new Line(left, top, right, bottom);
var lineTwo = new Line(right, top, left, bottom);
add(lineOne);
add(lineTwo);
}

function drawO(row, col) {

var centerX = col * BOX_SIZE + BOX_SIZE / 2;
var centerY = row * BOX_SIZE + BOX_SIZE / 2;
var circle = new Circle(OFFSET);
circle.setPosition(centerX, centerY);
circle.setColor(Color.white);
circle.setBorderWidth(CIRCLE_BORDER);
add(circle);
}

function handleClick(e) {
if (inPlay) {
var xPos = e.getX();
var yPos = e.getY();
var col = getColForClick(xPos);
var row = getRowForClick(yPos);
if (!board.get(row, col)) {
if (turn) {
board.set(row, col, "X");
 drawX(row, col); }
else {
board.set(row, col, "O");
drawO(row, col);
}
turn= !turn;
}
}
}

function getColForClick(xPos) {
var xtab = xPos / BOX_SIZE;
if(xtab < 1) {
return 0;
}
else
if(xtab > 1 && xtab < 2) {
return 1;
}
else {
return 2;
}
}

function getRowForClick(yPos) {
var ytab = yPos / BOX_SIZE;
if(ytab < 1) {
return 0;
} else
if(ytab > 1 && ytab < 2) {
return 1; }
else {
return 2;
}
}