setTimeout not working when computer wins (react)

Hello,

This is related to the tic tac toe game challenge: https://codepen.io/pwkrz/pen/aYmdXB?editors=0110

In my code the end game is handled by this block:

if(!!winLines.length || this.moveCount > 8){
        
        this.setState({ gameEnd: true });
        this.tttClasses.push("gameEnd")
        handleGameEnd(winLines, this.refs, this.state.userTurn, this.props.gameEndHandler);

}

The handleGameEnd function adds a background color class to divs with ref names that match the indexes in the winLines array. It does this within the setTimeout method.

When the human wins, the background colors are correctly updated 1 by 1 with timeouts. But when the computer wins, they update all at once after all the timeouts run out.

I figured out that it has something to do with the this.tttClasses.push(“gameEnd”) method being called at different times depending on who wins (the background color classes mentioned above are nested in the .gameEnd class). But I have no idea why this happens… Anyone?

What’s with the double exclamation?

Just to make sure that it’s a boolean value.

Thanks… learned something new today.

1 Like