1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215
| const COMBINATIONS = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
const PLAYER_ONE_CLASS = 'player-1';
const PLAYER_TWO_CLASS = 'player-2';
const PLAYED_CLASS = 'played';
const MAX_TURNS = '8';
let playerOneTurn = true;
const playerOnePoints = '0';
const playerTwoPoints = '0';
let turns = '0';
const playerOneCombination = [];
const playerTwoCombination = [];
const board = document.querySelector('.board');
const squares = Array.from(document.querySelectorAll('.square'));
const playerOneScore = document.querySelector('#player-1-score');
const playerTwoScore = document.querySelector('#player-2-score');
const alert = document.querySelector('template').content.querySelector('.alert');
const addAlert = (message) => {
const alertClone = alert.cloneNode(true);
alertClone.querySelector('.message').textContent = message;
document.body.insertBefore(alertClone, document.body.firstChild);
setTimeout(() => {
alertClone.querySelector('button').click()
}, 3000);
}
if (player === PLAYER_ONE_CLASS) {
combination = playerOneCombination;
}
else {
combination = playerTwoCombination;
}
return COMBINATIONS.some((combinationToCheck) => {
return combinationToCheck.every((square) => {
return combination.includes(square);
});
});
}
const declareDraw = () => {
addAlert('Draw!');
squares.forEach((square) => {
square.removeEventListener('click', handleClick);
});
}
const resetBoard = () => {
board.classList.replace(PLAYER_TWO_CLASS, PLAYER_ONE_CLASS);
squares.forEach((square) => {
square.classList.remove(PLAYER_ONE_CLASS, PLAYER_TWO_CLASS, PLAYED_CLASS);
square.addEventListener('click', handleClick);
});
playerOneCombination.length = 0;
playerTwoCombination.length = 0;
/**
* !!!QUESTION!!!
* 18. Réinitialiser la variable turns à 0.
*/
turns.length = 0;
/**
* !!!QUESTION!!!
* 19. Réinitialiser la variable playerOneTurn à true.
*/
playerOneTurn.length = true;
}
const incrementWinnersScore = (player) => {
/**
* !!!QUESTION!!!
* 20. Créer un if statement qui vérifie si le paramètre player est égal à la constante PLAYER_ONE_CLASS.
*/
if (incrementWinnersScore === PLAYER_ONE_CLASS)
/**
* !!!QUESTION!!!
* 21. Si oui, incrémenter la variable playerOnePoints de 1.
*/
/**
* !!!QUESTION!!!
* 22. Sinon, incrémenter la variable playerTwoPoints de 1.
*/
return player === PLAYER_ONE_CLASS ? playerOnePoints : playerTwoPoints;
}
const checkWinner = (player) => {
if (checkCombination(player)) {
const playerScore = player === PLAYER_ONE_CLASS ? playerOneScore : playerTwoScore;
const playerPoints = incrementWinnersScore(player);
playerScore.textContent = playerPoints;
/**
* !!!QUESTION!!!
*
* 23. Modifier la string alertText afin qu'elle affiche le numéro du joueur qui a gagné.
*
* Par exemple, si le joueur 1 a gagné, la string alertText devrait être égale à "Player 1 win".
* Si le joueur 2 a gagné, la string alertText devrait être égale à "Player 2 win".
*
const alertText = 'Player wins!';
addAlert(alertText);
squares.forEach((square) => {
square.removeEventListener('click', handleClick);
});
return true;
} else if (turns === MAX_TURNS) {
declareDraw();
return true;
}
return false;
};
const square = event.target;
square.removeEventListener('click', handleClick);
/**
* !!!QUESTION!!!
* 24. Utiliser une ternary operator pour définir la variable nommée player comme suit:
* - Si c'est au tour du joueur 1 de jouer, la variable player est égale à la classe PLAYER_ONE_CLASS.
* - Sinon, la variable player est égale à la classe PLAYER_TWO_CLASS.
*/
/**
* !!!QUESTION!!!
* 25. Utiliser une ternary operator pour définir la variable nommée nextPlayer comme suit:
* - Si c'est au tour du joueur 1 de jouer, la variable nextPlayer est égale à la classe PLAYER_TWO_CLASS.
* - Sinon, la variable nextPlayer est égale à la classe PLAYER_ONE_CLASS.
*/
square.classList.add(player, PLAYED_CLASS);
board.classList.replace(player, nextPlayer);
/**
* !!!QUESTION!!!
* 26. Assignez la variable nommée squareNumber à l'ID de la case.
*
* Pour aller chercher l'id, utilisez square.id
*
* Assurez-vous de coercer la valeur en Number.
*/
/**
* !!!QUESTION!!!
* 27. Vérifier si playerOneTurn est égal à true.
*
* Si c'est le cas, utilisez ce code: playerOneCombination.push(squareNumber);
* Sinon, utilisez ce code: playerTwoCombination.push(squareNumber);
*/
const hasWinner = checkWinner(player);
/**
* !!!QUESTION!!!
* 28. Vérifier si hasWinner est égal à true.
*
* Si c'est le cas, utilisez ce code: return resetBoard();
*/
/**
* !!!QUESTION!!!
* 29. Inverser la valeur de la variable "playerOneTurn" pour passer au joueur suivant. Donc si c'est au tour du joueur 1 de jouer,
* la variable "playerOneTurn" est égale à true et si c'est au tour du joueur 2 de jouer, la variable "playerOneTurn" est égale à false.
*/
/**
* !!!QUESTION!!!
* 30. Incrémenter la variable "turns" de 1 pour indiquer qu'un tour a été joué.
*/
};
(() => {
squares.forEach((square) => {
square.addEventListener('click', handleClick);
});
})(); |
Partager