The turn does switch, and the new picked spot is added to the playerTwo array, but it is also added to playerOne. I’ve moved pieces of the code around but that does not fix it.
const gameBoard = (() => {
const board = ['topLeft', 'topMiddle', 'topRight',
'middleLeft', 'middle', 'middleRight',
'bottomLeft', 'bottomMiddle', 'bottomRight'
];
return board
})();
// gameBoard[0] returns 'topLeft', gameBoard[1] returns topMiddle, and so on...
const createPlayer = (name, marker) => {
let score = 0;
const getScore = () => score;
const giveScore = () => score++;
let choices = [];
const pickSpot = function(spot){
const pickedSpot = gameBoard[spot];
choices.push(pickedSpot);
};
return {name, choices, marker, pickSpot, getScore, giveScore};
}
const gameOn = (() => {
const playerOne = createPlayer('Fred', 'X');
const playerTwo = createPlayer('Barney', 'O');
let playerOneChoices = playerOne.choices;
let playerTwoChoices = playerTwo.choices;
const winConditions = {
one : ['topLeft', 'topMiddle', 'topRight'],
two: ['middleLeft', 'middle', 'middleRight'],
three: ['bottomLeft', 'bottomMiddle', 'bottomRight'],
four: ['topLeft', 'middleLeft', 'bottomLeft'],
five: ['topMiddle', 'middle', 'bottomMiddle'],
six: ['topRight', 'middleRight', 'bottomRight'],
seven: ['topLeft', 'middle', 'bottomRight'],
eight: ['topRight', 'middle', 'bottomLeft']
};
const checkWinCondition = () => {
//makes it so two players can't have the same spot picked at the same time
function noRepeats(firstPick, repeatPick){
repeatPick.filter(element => {
if(firstPick.includes(element) === true){
repeatPick.splice(repeatPick.indexOf(element), 1);
}
})
}
noRepeats(playerTwoChoices, playerOneChoices);
noRepeats(playerOneChoices, playerTwoChoices);
//checks the players' picks to determine if someone wins the game
const vals = Object.keys(winConditions).map(key => winConditions[key]);
for(let x of vals) {
const playerOneCheck = x.every(e => playerOneChoices.includes(e));
const playerTwoCheck = x.every(e => playerTwoChoices.includes(e));
if(playerOneCheck === true) {
playerOne.giveScore();
playerOneChoices.length = 0;
playerTwoChoices.length = 0;
alert(`${playerOne.name} just won the game! His score is now ${playerOne.getScore()}!`);
} else if(playerTwoCheck === true) {
playerTwo.giveScore();
playerOneChoices.length = 0;
playerTwoChoices.length = 0;
alert(`${playerTwo.name} just won the game! His score is now ${playerTwo.getScore()}!`);
} else if(playerOneChoices.length === 5 && playerTwoChoices.length === 4){
playerOneChoices.length = 0;
playerTwoChoices.length = 0;
alert(`It's a tie! Neither ${playerOne.name} nor ${playerTwo.name} gain any points this round!`)
}
}
}
const topLeft = document.querySelector('.top-left');
const topMiddle = document.querySelector('.top-middle');
const topRight = document.querySelector('.top-right');
const middleLeft = document.querySelector('.middle-left');
const middle = document.querySelector('.middle');
const middleRight = document.querySelector('.middle-right');
const bottomLeft = document.querySelector('.bottom-left');
const bottomMiddle = document.querySelector('.bottom-middle');
const bottomRight = document.querySelector('.bottom-right');
const allSquares = document.querySelectorAll('.grid-container > div');
//variables for chaning turn
const players = [playerOne, playerTwo];
let turn = 0;
//picks corresponding spot on the board for the player that has a turn
const playerTurn = () => {
let currentPlayer = players[turn];
topLeft.addEventListener('click', () => currentPlayer.pickSpot(0));
topMiddle.addEventListener('click', () => currentPlayer.pickSpot(1));
topRight.addEventListener('click', () => currentPlayer.pickSpot(2));
middleLeft.addEventListener('click', () => currentPlayer.pickSpot(3));
middle.addEventListener('click', () => currentPlayer.pickSpot(4));
middleRight.addEventListener('click', () => currentPlayer.pickSpot(5));
bottomLeft.addEventListener('click', () => currentPlayer.pickSpot(6));
bottomMiddle.addEventListener('click', () => currentPlayer.pickSpot(7));
bottomRight.addEventListener('click', () => currentPlayer.pickSpot(8));
//changes player turn
turn++;
if(turn === players.length){
turn = 0;
}
checkWinCondition()
}
playerTurn()
//plays a new turn after any spot is picked
for(let e of allSquares){
e.addEventListener('click', playerTurn)
}
return {playerOne, playerTwo, playerOneChoices, playerTwoChoices}
})()
It looks to me like it’s a problem with the event listeners not “updating” the turn value or something but I don’t know how to fix it.
