tic-tac-toe.js

var app = new Vue({
    el: '#vue-app',
    data: {
    topText: 'It\'s your turn, ',
    turn: 'x',
    win1: null,
    win2: null,
    win3: null,
    board:[
        [null, null, null],
        [null, null, null],
        [null, null, null]
    ],
    gameOver: false
    },
    methods:{
        checkSquareClick: function(row, column){
            if(this.board[row][column] == null){

                this.board[row][column] = this.turn;
                //could have put the content of all these conditionals into a separate function to make it less cluttered, but eh
                if(this.board[0][0] == this.board[0][1] && this.board[0][0] == this.board[0][2] && this.board[0][0] != null){
                    this.topText = 'The winner is: ';
                    this.win1 = "00";
                    this.win2 = "01";
                    this.win3 = "02";
                    document.getElementById(this.win1).style.backgroundColor = "green";
                    document.getElementById(this.win2).style.backgroundColor = "green";
                    document.getElementById(this.win3).style.backgroundColor = "green";
                    this.gameOver = true;
                    return;
                }
                else if (this.board[1][0] == this.board[1][1] && this.board[1][0] == this.board[1][2] && this.board[1][0] != null){
                    this.topText = 'The winner is: ';
                    this.win1 = "10";
                    this.win2 = "11";
                    this.win3 = "12";
                    document.getElementById(this.win1).style.backgroundColor = "green";
                    document.getElementById(this.win2).style.backgroundColor = "green";
                    document.getElementById(this.win3).style.backgroundColor = "green";
                    this.gameOver = true;
                    return;
                }
                else if (this.board[2][0] == this.board[2][1] && this.board[2][0] == this.board[2][2] && this.board[2][0] != null){
                    this.topText = 'The winner is: ';
                    this.win1 = "20";
                    this.win2 = "21";
                    this.win3 = "22";
                    document.getElementById(this.win1).style.backgroundColor = "green";
                    document.getElementById(this.win2).style.backgroundColor = "green";
                    document.getElementById(this.win3).style.backgroundColor = "green";
                    this.gameOver = true;
                    return;
                }
                else if (this.board[0][0] == this.board[1][0] && this.board[0][0] == this.board[2][0] && this.board[0][0] != null){
                    this.topText = 'The winner is: ';
                    this.win1 = "00";
                    this.win2 = "10";
                    this.win3 = "20";
                    document.getElementById(this.win1).style.backgroundColor = "green";
                    document.getElementById(this.win2).style.backgroundColor = "green";
                    document.getElementById(this.win3).style.backgroundColor = "green";
                    this.gameOver = true;
                    return;
                }
                else if (this.board[0][1] == this.board[1][1] && this.board[0][1] == this.board[2][1] && this.board[0][1] != null){
                    this.topText = 'The winner is: ';
                    this.win1 = "01";
                    this.win2 = "11";
                    this.win3 = "21";
                    document.getElementById(this.win1).style.backgroundColor = "green";
                    document.getElementById(this.win2).style.backgroundColor = "green";
                    document.getElementById(this.win3).style.backgroundColor = "green";
                    this.gameOver = true;
                    return;
                }
                else if (this.board[0][2] == this.board[1][2] && this.board[0][2] == this.board[2][2] && this.board[0][2] != null){
                    this.topText = 'The winner is: ';
                    this.win1 = "02";
                    this.win2 = "12";
                    this.win3 = "22";
                    document.getElementById(this.win1).style.backgroundColor = "green";
                    document.getElementById(this.win2).style.backgroundColor = "green";
                    document.getElementById(this.win3).style.backgroundColor = "green";
                    this.gameOver = true;
                    return;
                }
                else if (this.board[0][0] == this.board[1][1] && this.board[0][0] == this.board[2][2] && this.board[0][0] != null){
                    this.topText = 'The winner is: ';
                    this.win1 = "00";
                    this.win2 = "11";
                    this.win3 = "22";
                    document.getElementById(this.win1).style.backgroundColor = "green";
                    document.getElementById(this.win2).style.backgroundColor = "green";
                    document.getElementById(this.win3).style.backgroundColor = "green";
                    this.gameOver = true;
                    return;
                }
                else if (this.board[0][2] == this.board[1][1] && this.board[0][2] == this.board[2][0] && this.board[0][2] != null){
                    this.topText = 'The winner is: ';
                    this.win1 = "02";
                    this.win2 = "11";
                    this.win3 = "20";
                    document.getElementById(this.win1).style.backgroundColor = "green";
                    document.getElementById(this.win2).style.backgroundColor = "green";
                    document.getElementById(this.win3).style.backgroundColor = "green";
                    this.gameOver = true;
                    return;
                }
                if(this.turn == 'x'){
                    this.turn = 'o';
                }
                else{
                    this.turn = 'x';
                }
            }
            
        },
        clearBoard: function(){
            for(i = 0; i < 3; i++){
                for(j = 0; j < 3; j++){
                    this.board[i][j] = null;
                }
            }
            document.getElementById(this.win1).style.backgroundColor = "white";
            document.getElementById(this.win2).style.backgroundColor = "white";
            document.getElementById(this.win3).style.backgroundColor = "white";
            this.win1 = null;
            this.win2 = null;
            this.win3 = null;
            this.gameOver = false;
            this.topText = 'It\'s your turn, ';
            this.turn = 'x';
        }
    }
});