l-emi l-emi - 2 months ago 7
jQuery Question

Disabling buttons after Tic Tac Toe game has ended

Thanks to the help of people here I managed to disable clicking on the divs and overwriting them when they've already been selected by using

$(".pos").addClass('already-played');
and this in the CSS:

.already-played {
pointer-events: none;
}


I tried adding this
$(".pos").addClass('already-played');
to a bunch of functions to try to disable the board completely once there has been a win or a draw, but it hasn't worked. For example, here:

//if a row or column win occurs, return 1
if (rowComplete || colComplete) {
return value ? 1 : 0;
$(".pos").addClass('already-played');
}
}

//if a diagonal win occurs, return 1
if (diagComplete1 || diagComplete2) {
return value ? 1 : 0;
$(".pos").addClass('already-played');
}
}

//draw
if (allNotNull) {
return -1;
$(".pos").addClass('already-played');
}


I also tried this function:

function disableBoard() {
if ($("#status").text() != "") {
$(".pos").addClass('already-played');
}
}


This either does nothing, or disables clicks after the first go. Here's the fiddle. Any ideas?

Answer

replace with this

function updateMove() {
    updateButtons();
    var winner = getWinner(board);
        if(winner==1 || winner==0 || winner==-1)
           $(".pos").addClass("already-played")
        $("#status").text(winner == 1 ? "Your computer won!" : winner == 0 ? "You won!" : winner == -1 ? "It's a draw!" : "");
}