script.js

var setColor = "#79A6D8"
var fullBoard = [[], [], []];
var winningSet = null;
fullBoard[0][0] = null;
fullBoard[0][1] = null;
fullBoard[0][2] = null;
fullBoard[1][0] = null;
fullBoard[1][1] = null;
fullBoard[1][2] = null;
fullBoard[2][0] = null;
fullBoard[2][1] = null;
fullBoard[2][2] = null;

var win = null;

/**
* Will start the game and initialize the variables
*/
function startGame() {
	document.turn = "X";
	if (Math.random() < 0.5) {
		document.turn = "O";
	}
	setMessage(document.turn + " gets to start.");
    //creating a click listener for each element
	var squares = document.getElementsByClassName("Square");
	for (var s = 0; s < squares.length; s++){
            squares[s].addEventListener('click',nextMove,false);
        }
    }

/**
* DIsplay the status message
* @param{string} - The message to display
*/
function setMessage(msg) {
	document.getElementById("message").innerText = msg;
}

/**
* Button to show and hide the rules
*/
function switchVisible() {
    if (document.getElementById('HideRules')) {
        if (document.getElementById('HideRules').style.display == 'none') {
            document.getElementById('HideRules').style.display = 'block';
            document.getElementById('ShowRules').style.display = 'none';
            document.getElementById("Button1").value="Show Rules";
        }
        else {
            document.getElementById('HideRules').style.display = 'none';
            document.getElementById('ShowRules').style.display = 'block';
            document.getElementById("Button1").value="Hide Rules";
        }
    }
}

/**
* Called when the player makes a move
*/
function nextMove() {
	square = this;
        // console.log(square.id);

        if (win == null) {
            // if tile is empty
            if (square.innerText == "") {

                // Print move to board
                square.innerText = document.turn;

                // log player move.
                // console.log("player: " + document.turn + " Played at: " + square.parentNode.parentNode.parentNode.parentNode.id + " || " + square.id);

                // display as last move
                // document.getElementById("sirep").innerText = "last move: " + square.parentNode.parentNode.parentNode.parentNode.id + " || " + square.id;


                // Check if win then change turn
                checkCompletedBoard(square);

                changeColour(square);
                switchTurn();
            }
        }
        else {
        	console.log('Game over');
        }
    }

// alternates player turn
function switchTurn() {
	if (document.turn == "X") {
		document.turn = "O";
	} else {
		document.turn = "X";
	}
	setMessage("It's " + document.turn + "'s turn!");

}

function changeColour(square) {

	var boardID;
	var tileID = square.id;
	tileID = tileID.substring(2);

        // set Next move's playable region boardID

        switch (tileID) {
        	case "s1":
        	boardID = 'B00';
        	break;
        	case "s2":
        	boardID = 'B01';
        	break;
        	case "s3":
        	boardID = 'B02';
        	break;
        	case "s4":
        	boardID = 'B10';
        	break;
        	case "s5":
        	boardID = 'B11';
        	break;
        	case "s6":
        	boardID = 'B12';
        	break;
        	case "s7":
        	boardID = 'B20';
        	break;
        	case "s8":
        	boardID = 'B21';
        	break;
        	case "s9":
        	boardID = 'B22';
        	break;
        }
        if (win == null) {
        	for (var i = 0; i < 3; i++) {
        		for (var j = 0; j < 3; j++) {
        			if (fullBoard[boardID.charAt(1)][boardID.charAt(2)] != null) {
        				if (fullBoard[i][j] == null) {
                            // set all backgound colour
                            document.getElementById("B" + i + j).style.backgroundColor = setColor;
                            // set whole board clickable
                            document.getElementById("B" + i + j).style.pointerEvents = 'auto';
                        }
                        else {
                            // set all backgound colour
                            document.getElementById("B" + i + j).style.backgroundColor = 'none';
                            // set whole board clickable
                            document.getElementById("B" + i + j).style.pointerEvents = 'none';
                        }
                    }
                    else {
                    	if (fullBoard[i][j] == null) {
                            // set all backgound colour
                            document.getElementById("B" + i + j).style.backgroundColor = 'white';
                            // set whole board clickable
                            document.getElementById("B" + i + j).style.pointerEvents = 'none';
                        }
                        // set playable region backgound colour to indicate active area.
                        document.getElementById(boardID).style.backgroundColor = setColor;
                        // set region clickable
                        document.getElementById(boardID).style.pointerEvents = 'auto'
                    }
                }
            }
        }
        else {
        	for (var i = 0; i < 3; i++) {
        		for (var j = 0; j < 3; j++) {
        			if (fullBoard[i][j] == null) {
        				document.getElementById("B" + i + j).style.backgroundColor = 'white';
        			}
        			document.getElementById("B" + i + j).style.pointerEvents = 'none';
        		}
        	}
        }
    }

    function checkCompletedBoard(square) {
    	var color = null;
    	if (square.innerText == 'O') {
    		color = 'red'
    	}
    	else {
    		color = 'pink';
    	}

        //id of the inner board
        var boardID = square.parentNode.parentNode.parentNode.parentNode.id;
        //the inner board element
        var boardTable = document.getElementById(boardID).children[0].children[0].children;
        //getting the inner board as a 2d array
        var innerBoard = getBoard(boardTable);
        //identifying the col and row of the innerBoard in terms of the fullBoard
        var row = boardID.charAt(1);
        var col = boardID.charAt(2);

        // row 1
        if (innerBoard[0][0] == square.innerText && innerBoard [0][1] == square.innerText && innerBoard[0][2] == square.innerText) {
            //changing the color of the inner board to show a win
            document.getElementById(boardID).style.backgroundColor = color;

            //changing the label of the inner board to show a win
            document.getElementById(boardID).innerHTML = document.turn;

            //indicating on the full board that the inner board is won
            fullBoard[row][col] = square.innerText;
            // console.log(fullBoard)
        }
        //row 2
        else if (innerBoard[1][0] == square.innerText && innerBoard [1][1] == square.innerText && innerBoard[1][2] == square.innerText) {
            //changing the color of the inner board to show a win
            document.getElementById(boardID).style.backgroundColor = color;

            //changing the label of the inner board to show a win
            document.getElementById(boardID).innerHTML = document.turn;

            //indicating on the full board that the inner board is won
            fullBoard[row][col] = square.innerText;
            // console.log(fullBoard)
        }
        //row 3
        else if (innerBoard[2][0] == square.innerText && innerBoard [2][1] == square.innerText && innerBoard[2][2] == square.innerText) {
            //changing the color of the inner board to show a win
            document.getElementById(boardID).style.backgroundColor = color;

            //changing the label of the inner board to show a win
            document.getElementById(boardID).innerHTML = document.turn;

            //indicating on the full board that the inner board is won
            fullBoard[row][col] = square.innerText;
            // console.log(fullBoard)
        }
        //col 1
        else if (innerBoard[0][0] == square.innerText && innerBoard [1][0] == square.innerText && innerBoard[2][0] == square.innerText) {
            //changing the color of the inner board to show a win
            document.getElementById(boardID).style.backgroundColor = color;

            //changing the label of the inner board to show a win
            document.getElementById(boardID).innerHTML = document.turn;

            //indicating on the full board that the inner board is won
            fullBoard[row][col] = square.innerText;
            // console.log(fullBoard)
        }
        //col 2
        else if (innerBoard[0][1] == square.innerText && innerBoard [1][1] == square.innerText && innerBoard[2][1] == square.innerText) {
            //changing the color of the inner board to show a win
            document.getElementById(boardID).style.backgroundColor = color;

            //changing the label of the inner board to show a win
            document.getElementById(boardID).innerHTML = document.turn;

            //indicating on the full board that the inner board is won
            fullBoard[row][col] = square.innerText;
            // console.log(fullBoard)
        }
        //col 3
        else if (innerBoard[0][2] == square.innerText && innerBoard [1][2] == square.innerText && innerBoard[2][2] == square.innerText) {
            //changing the color of the inner board to show a win
            document.getElementById(boardID).style.backgroundColor = color;

            //changing the label of the inner board to show a win
            document.getElementById(boardID).innerHTML = document.turn;

            //indicating on the full board that the inner board is won
            fullBoard[row][col] = square.innerText;
            // console.log(fullBoard)
        }
        // diagonal
        else if (innerBoard[0][0] == square.innerText && innerBoard [1][1] == square.innerText && innerBoard[2][2] == square.innerText) {
            //changing the color of the inner board to show a win
            document.getElementById(boardID).style.backgroundColor = color;

            //changing the label of the inner board to show a win
            document.getElementById(boardID).innerHTML = document.turn;

            //indicating on the full board that the inner board is won
            fullBoard[row][col] = square.innerText;
            // console.log(fullBoard)
        }
        //diagonal
        else if (innerBoard[0][2] == square.innerText && innerBoard [1][1] == square.innerText && innerBoard[2][0] == square.innerText) {
            //changing the color of the inner board to show a win
            document.getElementById(boardID).style.backgroundColor = color;

            //changing the label of the inner board to show a win
            document.getElementById(boardID).innerHTML = document.turn;

            //indicating on the full board that the inner board is won
            fullBoard[row][col] = square.innerText;
            // console.log(fullBoard)
        }
        else {
        	var flag = true;

        	for (var i = 0; i < 3; i++) {
        		for (var j = 0; j < 3; j++) {
        			if (innerBoard[i][j] == "") {
        				flag = false;
        				break;
        			}
        		}
        	}

        	if (flag) {
        		fullBoard[row][col] = "-";
                // console.log(fullBoard)
                document.getElementById(boardID).innerHTML = "-";
            }
        }

        win = checkWin();
    }

    function checkWin() {
    	var winner;
    	var winLine;
        // row 1
        if (fullBoard[0][0] == fullBoard[0][1] && fullBoard[0][0] == fullBoard[0][2] && fullBoard[0][0] != null) {
        	winner = fullBoard[0][0];
        	// setMessage(fullBoard[0][0] + " wins the game!!!");
        	window.alert(fullBoard[0][0] + " wins the game!!!");
        	winningSet = ['00', '01', '02'];
        }
        //row 2
        else if (fullBoard[1][0] == fullBoard[1][1] && fullBoard[1][0] == fullBoard[1][2] && fullBoard[1][0] != null) {
        	winner = fullBoard[1][0];
        	// setMessage(fullBoard[1][0] + " wins the game!!!");
        	window.alert(fullBoard[1][0] + " wins the game!!!");
        	winningSet = ['10', '11', '12'];
        }
        //row 3
        else if (fullBoard[2][0] == fullBoard[2][1] && fullBoard[2][0] == fullBoard[2][2] && fullBoard[2][0] != null) {
        	winner = fullBoard[2][0];
        	// setMessage(fullBoard[2][0] + " wins the game!!!");
        	window.alert(fullBoard[2][0] + " wins the game!!!");
        	winningSet = ['20', '21', '22'];
        }
        //col 1
        else if (fullBoard[0][0] == fullBoard[1][0] && fullBoard[0][0] == fullBoard[2][0] && fullBoard[0][0] != null) {
        	winner = fullBoard[0][0];
        	// setMessage(fullBoard[0][0] + " wins the game!!!");
        	window.alert(fullBoard[0][0] + " wins the game!!!");
        	winningSet = ['00', '10', '20'];
        }
        //col 2
        else if (fullBoard[0][1] == fullBoard[1][1] && fullBoard[0][1] == fullBoard[2][1] && fullBoard[0][1] != null) {
        	winner = fullBoard[0][1];
        	// setMessage(fullBoard[0][1] + " wins the game!!!");
        	window.alert(fullBoard[0][1] + " wins the game!!!");
        	winningSet = ['01', '11', '21'];
        }
        //col 3
        else if (fullBoard[0][2] == fullBoard[1][2] && fullBoard[0][2] == fullBoard[2][2] && fullBoard[0][2] != null) {
        	winner = fullBoard[0][2];
        	// setMessage(fullBoard[0][2] + " wins the game!!!");
        	window.alert(fullBoard[0][2] + " wins the game!!!");
        	winningSet = ['02', '12', '22'];
        }
        // diagonal
        else if (fullBoard[0][0] == fullBoard[1][1] && fullBoard[0][0] == fullBoard[2][2] && fullBoard[0][0] != null) {
        	winner = fullBoard[0][0];
        	// setMessage(fullBoard[0][0] + " wins the game!!!");
        	window.alert(fullBoard[0][0] + " wins the game!!!");
        	winningSet = ['00', '11', '22'];
        }
        //diagonal
        else if (fullBoard[0][2] == fullBoard[1][1] && fullBoard[0][2] == fullBoard[2][0] && fullBoard[0][2] != null) {
        	winner = fullBoard[0][2];
        	// setMessage(fullBoard[0][2] + " wins the game!!!");
        	window.alert(fullBoard[0][2] + " wins the game!!!");
        	winningSet = ['02', '11', '20'];
        }
        if (winningSet != null) {
        	for (var i = 0; i < winningSet.length; i++) {
                // set all backgound colour
                document.getElementById("B" + winningSet[i].charAt(0) + winningSet[i].charAt(1)).style.backgroundColor = 'green';
                // set whole board clickable
                document.getElementById("B" + winningSet[i].charAt(0) + winningSet[i].charAt(1)).style.pointerEvents = 'none';
            }
        }
        return winner;
    }

    function getBoard(boardTable) {
    	var innerBoard = [[], [], []];
    	for (var i = 0; i < boardTable.length; i++) {
            //get the row element
            var row = boardTable[i].children;
            for (var j = 0; j < row.length; j++) {
                //get the inner text of every element and put it in a 2d array
                innerBoard[i][j] = row[j].innerText;
            }
        }
        return innerBoard;
    }


// })();
// console.log(fullBoard);