Analyse de l'alternance entre croix et rond

Dans cette leçon, je veux vous montrer comment réaliser l'alternance entre croix et rond en une seule ligne. Vous avez probablement fait quelque chose comme ceci :

function start(cells) {
	let i = 0; // valeur initiale du compteur
	
	for (let cell of cells) {
		cell.addEventListener('click', function() {
			if (i % 2 == 0) {
				this.textContent = 'X';
			} else {
				this.textContent = '0';
			}
			
			i++; // on incrémente le compteur
		});
	}
}

Je propose de résoudre le problème plus brièvement. Créons un tableau de nos 'joueurs' :

let gamers = ['X', 'O'];

Comme vous le voyez, dans ce tableau, la croix a la clé 0, et le rond - la clé 1. On peut dire la même chose de i % 2 - pour la croix, le reste sera 0, et pour le rond - 1.

C'est-à-dire qu'on peut utiliser cette expression à la place de la clé :

let gamers = ['X', 'O'];
let key = i % 2;

console.log(gamers[key]);

Ou encore plus court :

let gamers = ['X', 'O'];
console.log(gamers[i % 2]);

Ou encore plus court :

console.log(['X', 'O'][i % 2]);

Simplifions maintenant le code de notre fonction start :

function start(cells) {
	let i = 0;
	
	for (let cell of cells) {
		cell.addEventListener('click', function() {
			this.textContent = ['X', 'O'][i % 2];
			i++;
		});
	}
}

Indépendamment, sans regarder mon code, apportez la modification décrite.

Actuellement, on peut cliquer un nombre illimité de fois sur n'importe quelle cellule, changeant, par exemple, une croix en rond. Corrigez cela.