After three wins, one move === time for a new game!

[julie1013]

After there is a winner three times, playing one move in the next game ends the game. Win conditions are met, but the console.log "o has 1 points" comes up

[payne-chris-r]

What have you done to try and fix this? What debugging steps have you done? Please post the code that ends or restarts your game.

[julie1013]

After the SAME PLAYER wins THREE TIMES one move in the new game makes it reset. After two DIAGONAL wins, by same player, game resets after SIX squares are filled. After one diagonal win and one horizontal win by the same player, game resets after FOUR squares are filled. After O wins diagonally, it seems a random number of squares filled in the next game causes a reset.

So in short, is this a real pattern, or is this just erratic? I really don't know. I'm trying to run the debugger, but nothing is popping out at me.

[julie1013]

const play = function (cell) {
    logic.player = logic.isPlayerTurn();
    ui.setCell(cell, logic.player);
    console.log("array is ", logic.currentGame.game.cells );
    console.log(logic.currentGame.game.cells);
    if (logic.winCheck() || logic.tieCheck()) {
      $('.board').children().off();
      logic.currentGame.game.over = true;
      logic.scoreCounter();
      setTimeout(function () {
        console.log(logic.currentGame.game.cells);
        logic.restartGameData();
        console.log(logic.currentGame.game.cells);
        $('.board div').children().remove();
        setUpHandlers();
      }, 3000);
    } else {
      logic.turnSwitch();
    }
  };

const horizontalWin = function () {
    if (currentGame.game.cells[0] !== "" &&
        currentGame.game.cells[0] === currentGame.game.cells[1] &&
        currentGame.game.cells[0] === currentGame.game.cells[2]) {
      winner = currentGame.game.cells[0];
      console.log(winner, "horizontal win");
    } else if (currentGame.game.cells[3] !== "" &&
              currentGame.game.cells[3] === currentGame.game.cells[4] &&
              currentGame.game.cells[3] === currentGame.game.cells[5]) {
      winner = currentGame.game.cells[3];
      console.log(winner, "horizontal win");
    } else if (currentGame.game.cells[6] !== "" &&
              currentGame.game.cells[6] === currentGame.game.cells[7] &&
              currentGame.game.cells[6] === currentGame.game.cells[8]) {
      winner = currentGame.game.cells[6];
      console.log(winner, "horizontal win");
    }
    return winner;
  };
//checks for horizontal set up for possible win

const verticalWin = function () {
    if (currentGame.game.cells[0] !== "" &&
        currentGame.game.cells[0] === currentGame.game.cells[3] &&
        currentGame.game.cells[0] === currentGame.game.cells[6]) {
      winner = currentGame.game.cells[0];
      console.log(winner, "vertical win");
    } else if (currentGame.game.cells[1] !== "" &&
      currentGame.game.cells[1] === currentGame.game.cells[4] &&
      currentGame.game.cells[1] === currentGame.game.cells[7]) {
      winner = currentGame.game.cells[1];
      console.log(winner, "vertical win");
    } else if (currentGame.game.cells[2] !== "" &&
              currentGame.game.cells[2] === currentGame.game.cells[5] &&
              currentGame.game.cells[2] === currentGame.game.cells[8]) {
      winner = currentGame.game.cells[2];
      console.log(winner, "vertical win");
    }
    return winner;
  };
//checks for vertical setup for possible win

const diagonalWin = function () {
  if (currentGame.game.cells[4] !== "") {
    if (currentGame.game.cells[4] === currentGame.game.cells[0] &&
      currentGame.game.cells[4] === currentGame.game.cells[8] ||
      currentGame.game.cells[4] === currentGame.game.cells[2] &&
      currentGame.game.cells[4] === currentGame.game.cells[6]) {
      winner = currentGame.game.cells[4];
      console.log(winner, "diagonal win");
    }
  }
  return winner;
};
//checks for diagonal setup for possible win

const winCheck = function () {
  return horizontalWin() || verticalWin() || diagonalWin();
};
//checks for a win condition

const tieCheck = function () {
  return ($('.occupied').length === 9);
};
//checks for a tie condition

const scoreCounter = function () {
  if (winner === 'x') {
    xScore++;
    console.log("x has", xScore + " points");
    return xScore;
  } else {
    oScore++;
    console.log("o has", oScore + " points");
    return oScore;
  }
};
//keeps track of wins

const restartGameData = function () {
  currentGame.game.cells.splice(0, currentGame.game.cells.length);
  currentGame.game.over = false;
  initializeBoard(currentGame.game.cells);
  whoseTurn = 0;
  winner = null;
};
//restarts game data

[payne-chris-r]

What's this doing?

const tieCheck = function () {
  return ($('.occupied').length === 9);
};

[julie1013]

It checks to see if all 9 squares are occupied (and have the class occupied, of course). If a win condition has already been met, it won't reach this point.

[payne-chris-r]

Is it checking the DOM or our nice-newly created object that stores our game data? Game logic should be manipulating and checking our object. UI concerns should be representing that object for the user.

[jrhorn424]

After the SAME PLAYER wins THREE TIMES one move in the new game makes it reset. After two DIAGONAL wins, by same player, game resets after SIX squares are filled. After one diagonal win and one horizontal win by the same player, game resets after FOUR squares are filled. After O wins diagonally, it seems a random number of squares filled in the next game causes a reset.

This is a great example of describing the symptoms of your bug. This is the first step in debugging. You've got data about failure cases. Now, you need to walk through the code that runs on each click and on each game end (and perhaps others) and pay attention to the state you're saving each time. Try doing it for a couple of different failure conditions and see if you notice what's wrong.

[julie1013]

I'll look at it, Chris. Also, after there's one vertical win, the player is still able to play with the vertical win in the next game. :(

[julie1013]

Changed the tieCheck function to this:

const tieCheck = function () {
  let count = 0;
  for (let i = 0; i < currentGame.game.cells.length; i++) {
    if (currentGame.game.cells[i] === 'x' || currentGame.game.cells[i] === 'o'){
      count++;
    }
  }
  return count === 9;
};
//checks for a tie condition

It works, but it doesn't solve the problem.

[jrhorn424]

@julie1013 Can we see your initializeBoard function?

[julie1013]

const initializeBoard = function () {
  currentGame.game.cells = [];
  for (let i = 0; i < 9; i++) {
    currentGame.game.cells.push("");
  }
  console.log(currentGame.game.cells);
};
// edited by @jrhorn424 - closing fenced code blocks require a new line

[julie1013]

Interesting... it seems that the refactoring that you guys asked me to do in here mostly solved the problem? Why? I don't know.

But this is still an issue: you can continue after vertical wins, but only if the wins are NOT in the first column. WTF?

[jrhorn424]

Linter output?

[julie1013]

OK, I've fixed that (the cause of that is actually too embarrassing for me to mention). The win conditions are working perfectly. Tie conditions too. But for whatever reason, the refactoring fixed the problem. I have absolutely no idea why. Any insights?