Tic Tac Toe Extra Turns and other wierd problems

JavaScript
1

Here is my project. https://codepen.io/zapbampow/pen/NwbOpO

I am nearly done with the Tic Tac Toe project, but I have 3 problems that I haven’t been able to figure out.

First Problem: Computer taking over user turns

On the computer’s first turn during “impossible” mode, it is taking it’s turn, then the user’s next turn, and it’s next turn. So if the user is first player, the user adds an X to the board. Then the computer adds an O, X, and O to the board. I’ve added a pile of console logs to see what things are happening. The program seems to call playerTurn(), which is the function for what to do when the player clicks on the squares. Then it immediately jumps to the end of the aiTurn(), which is basically a random move and uses that for the playerTurn placement. I’m not sure how or why it is doing this.

Second Problem: Player turn displayed name out of order

This problem probably comes down to my using toggle to hide and unhide the div with the turn order information in it, but anyway… If you play through several games and both sides win some, then at some point the displayed player turn gets messed up. When it is the user turn it will say, “Computer’s Turn”. It does this in 2 Player games and against the computer.

When the game ends it asks, “Play again?” If the user clicks “Yes”, then the game resets.
I have tried to add a conditional after the game resets like this to fix it.

if($('.player-2-header').html() === "<h1>Computer's Turn</h1>" || $('.player-2-header').html() === "<h1>2nd Player's Turn</h1>") {
    $('.player-1-header, .player-2-header').toggle('.hidden');
  }

Final Problem, hopefully: End game board issue

When a game ends the board is supposed to be hidden and a new screen is unhidden that declares the winner and asks for a new game. However, in the “impossible” game when the computer wins, sometimes it does the hide/unhide as it is supposed to, then immediately reverses it. The user is stuck at the completed game and must refresh the page. I haven’t been able to figure out where in the code it is jumping to make it toggle both of those divs twice.

That’s it. Feel free to comment on any or all of these issues.
2

@zapbampow I spent 20 minutes on it, but came up empty. Have you tried stepping through your program with Chrome’s debugger using breakpoints?

4

While I haven’t gotten everything fixed by any means, this plus what @camperextraordinaire talked through are immensely helpful in finding exactly where things are going wrong. I’ve used other Chrome/Firefox developer tools, but never the debugger. This would have been helpful before! Anyway, I’m getting there. Thanks pointing out this feature and pointing me to a short tutorial.

5

I just want to thank you for looking at my code. As with each other time you’ve helped me, it was key to my moving forward with this project. My code is probably still messy, but it doesn’t loop around infinitely anymore. Your observation that the way I called for the player turns and that I was creating new click events each time I called the function were very helpful. I took that and @JB-Walker’s tip on how to use Chrome’s developer tools and was able to solve pretty much all the other problems. While there are likely still some small bugs, it works as it should now.

7

That would be awesome. I know I could do things differently than I have, but I’m working with what I know and understand.

9

Thanks. I’ve implemented both of those. I also saved a few lines making a function that does all the hiding and unhiding of the divs in the gameWon and gameDraw functions and call that instead of repeating the same code 3 times.

For first-player and second-player click event I used this code.

  if($(this).hasClass('first-player')){
    firstPlayer.name = 'You';
    secondPlayer.name = 'Computer';
  }
  else {
    firstPlayer.name = 'Computer';
    secondPlayer.name = 'You';
  }

  $('#order').toggle(".hidden");
  $('#difficulty-div').toggle('.hidden');
  changePlayerHeader();
});

I imagine if can use similar logic to make a single call on all the squares instead of one for each square, although I haven’t had a chance to tackle that yet.

As I looked at what you wrote yesterday, I noticed through some research that you used a ternary operator on the difficultyLevel variable. I haven’t spent much time familiarizing myself with ES2015 yet, but I do understand how what you did works. Any resources you can point me to better understand the syntax for ES2015 and get practice with it?