tic-tac-toe/js/app.js
// When any box is clicked:
When any box is clicked.
When any box is clicked .
function boxClicked() {
        $(this).addClass("clicked");
        if ($(this).hasClass("box-filled-1") || $(this).hasClass("box-filled-2")) {
            return;
        }
        if (player_O.turn) {
            $("#player1").toggleClass("active");
            $("#player2").toggleClass("active");
            $(this).addClass(player_O.boxFill);
        } else if (player_X.turn) {
            $("#player2").toggleClass("active");
            $("#player1").toggleClass("active");
            $(this).addClass(player_X.boxFill);
        }
        if (mainBoard.patterns(1, 2, 3, "box-filled-1") ||
            mainBoard.patterns(4, 5, 6, "box-filled-1") ||
            mainBoard.patterns(7, 8, 9, "box-filled-1") ||
            mainBoard.patterns(1, 5, 9, "box-filled-1") ||
            mainBoard.patterns(3, 5, 7, "box-filled-1") ||
            mainBoard.patterns(1, 4, 7, "box-filled-1") ||
            mainBoard.patterns(2, 5, 8, "box-filled-1") ||
            mainBoard.patterns(3, 6, 9, "box-filled-1")) {
            player_O.winner = true;
            board.switchOff();
            finish.switchOn();
        } else if (
            mainBoard.patterns(1, 2, 3, "box-filled-2") ||
            mainBoard.patterns(4, 5, 6, "box-filled-2") ||
            mainBoard.patterns(7, 8, 9, "box-filled-2") ||
            mainBoard.patterns(1, 5, 9, "box-filled-2") ||
            mainBoard.patterns(3, 5, 7, "box-filled-2") ||
            mainBoard.patterns(1, 4, 7, "box-filled-2") ||
            mainBoard.patterns(2, 5, 8, "box-filled-2") ||
            mainBoard.patterns(3, 6, 9, "box-filled-2")) {
            player_X.winner = true;
            board.switchOff();
            finish.switchOn();
        }
        $("#finish").removeClass("screen-win-one");
        $("#finish").removeClass("screen-win-two");
        if (isDraw()) {
            board.switchOff();
            finish.switchOn();
        }
        if (player_O.winner) {
            $("#finish").addClass("screen-win-one");
            if (player_O.name === "") {
                $("p.message").text("Winner!");
            }
            else {
                $("p.message").text(player_O.name + " is the winner!");
            }
            $(".screen").css({
                "background": "#ffa005",
                "color": "white"
            });
        } else if (player_X.winner) {
            $("#finish").addClass("screen-win-two");
            if (player_X.name === "") {
                $("p.message").text("Winner!");
            } else {
                $("p.message").text(player_X.name + " is the winner!");
            }
            $(".screen").css({
                "background": "#3b8ac1",
                "color": "#fff"
            });
        }
        else if (isDraw()) {
            $("p.message").text("It's a draw!");
            $(".screen").css({
                "background": "#2ecc71",
                "color": "#fff"
            });
        }
        mainBoard.switchPlayer();
    }
function boxClicked ( ) { $ ( this ) . addClass ( "clicked" ) ; if ( $ ( this ) . hasClass ( "box-filled-1" ) || $ ( this ) . hasClass ( "box-filled-2" ) ) { return ; } if ( player_O . turn ) { $ ( "#player1" ) . toggleClass ( "active" ) ; $ ( "#player2" ) . toggleClass ( "active" ) ; $ ( this ) . addClass ( player_O . boxFill ) ; } else if ( player_X . turn ) { $ ( "#player2" ) . toggleClass ( "active" ) ; $ ( "#player1" ) . toggleClass ( "active" ) ; $ ( this ) . addClass ( player_X . boxFill ) ; } if ( mainBoard . patterns ( 1 , 2 , 3 , "box-filled-1" ) || mainBoard . patterns ( 4 , 5 , 6 , "box-filled-1" ) || mainBoard . patterns ( 7 , 8 , 9 , "box-filled-1" ) || mainBoard . patterns ( 1 , 5 , 9 , "box-filled-1" ) || mainBoard . patterns ( 3 , 5 , 7 , "box-filled-1" ) || mainBoard . patterns ( 1 , 4 , 7 , "box-filled-1" ) || mainBoard . patterns ( 2 , 5 , 8 , "box-filled-1" ) || mainBoard . patterns ( 3 , 6 , 9 , "box-filled-1" ) ) { player_O . winner = true ; board . switchOff ( ) ; finish . switchOn ( ) ; } else if ( mainBoard . patterns ( 1 , 2 , 3 , "box-filled-2" ) || mainBoard . patterns ( 4 , 5 , 6 , "box-filled-2" ) || mainBoard . patterns ( 7 , 8 , 9 , "box-filled-2" ) || mainBoard . patterns ( 1 , 5 , 9 , "box-filled-2" ) || mainBoard . patterns ( 3 , 5 , 7 , "box-filled-2" ) || mainBoard . patterns ( 1 , 4 , 7 , "box-filled-2" ) || mainBoard . patterns ( 2 , 5 , 8 , "box-filled-2" ) || mainBoard . patterns ( 3 , 6 , 9 , "box-filled-2" ) ) { player_X . winner = true ; board . switchOff ( ) ; finish . switchOn ( ) ; } $ ( "#finish" ) . removeClass ( "screen-win-one" ) ; $ ( "#finish" ) . removeClass ( "screen-win-two" ) ; if ( isDraw ( ) ) { board . switchOff ( ) ; finish . switchOn ( ) ; } if ( player_O . winner ) { $ ( "#finish" ) . addClass ( "screen-win-one" ) ; if ( player_O . name === "" ) { $ ( "p.message" ) . text ( "Winner!" ) ; } else { $ ( "p.message" ) . text ( player_O . name + " is the winner!" ) ; } $ ( ".screen" ) . css ( { "background" : "#ffa005" , "color" : "white" } ) ; } else if ( player_X . winner ) { $ ( "#finish" ) . addClass ( "screen-win-two" ) ; if ( player_X . name === "" ) { $ ( "p.message" ) . text ( "Winner!" ) ; } else { $ ( "p.message" ) . text ( player_X . name + " is the winner!" ) ; } $ ( ".screen" ) . css ( { "background" : "#3b8ac1" , "color" : "#fff" } ) ; } else if ( isDraw ( ) ) { $ ( "p.message" ) . text ( "It's a draw!" ) ; $ ( ".screen" ) . css ( { "background" : "#2ecc71" , "color" : "#fff" } ) ; } mainBoard . switchPlayer ( ) ; }
When any box is clicked:
When any box is clicked :
// Add the class of clicked to the clicked box: // If the box is already filled, don't to anything and return the function early // Based on which turn it is, fill the box with respective classes: // 1. If any of the win patterns are filled by player O: // 2. Set player O to the winner and switch the board off // and turn the finish page on: // 1. If any of the win patterns are filled by player X: // 2. Set player X to the winner and switch the board off // and the turn the finish page on: // Removing the classes if a game was prevoiously played. // If it's a draw: only Switch page: // if player O is the winner add appropriate classes and styles: // if the player has not specified a name, just show "winner" // if the player has specified a name, display it: // if it's a draw, just add the right text and styles. // Switch players once everything else has ran: