// variables de vue

const button = document.querySelector("input[type=submit]");
const select = document.querySelector("select");
const board = document.querySelector(".board");
const message = document.querySelector("#message");
let lights = null 

// state <-> tableau de booléen pour 
// stocker l'état des lumières
// neighbors <-> tableau des voisins de chaque lumière

let state = [];
let neighbors = [];

let newBoard = ( (size )  => {
	let frag = document.createDocumentFragment()

	// TODO
	// la fonction crée dans le dom la grille des lumières
	
	board.replaceChildren(frag)
});

let calcNeighbours = ( (size) =>{

	let res = [];
	for(let i = 0; i < size; i ++){
		for(let j = 0; j < size; j++){
			let v = [];
			v.push(i*size + j);
			if ( (j - 1) >= 0) v.push(i*size + j - 1);
			if ( (j + 1) <  size) v.push(i*size + j + 1);
			if ( (i - 1) >= 0) v.push(size*(i-1) + j );
			if ( (i + 1) <  size) v.push(size*(i+1) + j);
			res.push(v)
		}
	}
	return res
});


function play(){
	let size = select.value;
	newBoard(size);
	neighbors = calcNeighbours(size);
	lights = document.querySelectorAll(".board span");
	state =  Array.from({length: size*size}, () => Math.random() < 0.5 ? 1:0);
	state.forEach((el,i)=>{
		if (el) lights[i].classList.toggle("off"); 
	});
		message.textContent = "";
}

// abonnements 

document
	.querySelector(".board")
	.addEventListener("click", ev => {

		// TODO
		// permet de choisir d'éteindre/allumer une lumière et
		// ses voisines
		// Il faut en outre detecter la fin de partie

	});

button.addEventListener("click",play);

play();