script.js

document.addEventListener('DOMContentLoaded', () => {
	const board = document.getElementById('board');
	if (!board) return;

	for (let row = 0; row < 8; row++) {
		for (let col = 0; col < 8; col++) {
			const cell = document.createElement('div');
			// fill the grid cell completely — avoids gaps between cells
			cell.className = 'w-full h-full flex items-center justify-center';

			// alternating colors: light and dark
			const isLight = (row + col) % 2 === 0;
			cell.classList.add(isLight ? 'bg-slate-200' : 'bg-slate-800');

			// metadata for later use
			cell.dataset.row = row;
			cell.dataset.col = col;

			// permitir dragover/drop nas células
			cell.addEventListener('dragover', (e) => {
				e.preventDefault();
				// feedback visual opcional
				e.dataTransfer && (e.dataTransfer.dropEffect = 'move');
			});

			cell.addEventListener('drop', (e) => {
				e.preventDefault();
				const pieceId = e.dataTransfer ? e.dataTransfer.getData('text/plain') : null;
				if (!pieceId) return;
				const piece = document.getElementById(pieceId);
				if (!piece) return;
				// não permitir drop se já existir uma peça na célula
				if (cell.querySelector('[id^="peca-"]')) return;
				cell.appendChild(piece);
				// atualizar metadados da peça
				piece.dataset.row = cell.dataset.row;
				piece.dataset.col = cell.dataset.col;
			});

			board.appendChild(cell);
		}
	}


	// ===== gerar as 12 peças vermelhas automaticamente =====
	// as peças ocupam as casas escuras (onde (row+col)%2 !== 0) das linhas 0..2
	function createPiece(row, col, color = 'bg-red-600') {
		const cell = board.querySelector(`[data-row="${row}"][data-col="${col}"]`);
		if (!cell) return null;
		const p = document.createElement('div');
		p.id = `peca-${row}${col}`;
		// usar porcentagens para que a peça sempre seja relativa ao tamanho da célula
		p.className = `${color} rounded-full shadow-lg flex items-center justify-center w-3/4 h-3/4`;
		// tornar arrastável
		p.draggable = true;
		p.addEventListener('dragstart', (e) => {
			if (e.dataTransfer) {
				e.dataTransfer.setData('text/plain', p.id);
				e.dataTransfer.effectAllowed = 'move';
			}
			p.classList.add('opacity-60');
		});
		p.addEventListener('dragend', () => {
			p.classList.remove('opacity-60');
		});
		cell.appendChild(p);
		return p;
	}

	let created = 0;
	for (let row = 0; row <= 2; row++) {
		for (let col = 0; col < 8; col++) {
			if ((row + col) % 2 !== 0) {
				createPiece(row, col, 'bg-red-600');
				created++;
			}
		}
	}
    for (let row = 5; row <= 7; row++) {
		for (let col = 0; col < 8; col++) {
			if ((row + col) % 2 !== 0) {
				createPiece(row, col, 'bg-white');
				created++;
			}
		}
	}

	// opcional: console.log para verificar
	// console.log('Peças vermelhas criadas:', created);

		// ===== modal de regras =====
		const openBtn = document.getElementById('openRules');
		const modal = document.getElementById('rulesModal');
		const closeBtn = document.getElementById('closeRules');
		const resetBtn = document.getElementById('resetBtn');

		if (openBtn && modal) {
			openBtn.addEventListener('click', () => modal.classList.remove('hidden'));
		}

		if (closeBtn && modal) {
			closeBtn.addEventListener('click', () => modal.classList.add('hidden'));
		}

		// fechar ao clicar no overlay
		if (modal) {
			modal.addEventListener('click', (e) => {
				if (e.target === modal) modal.classList.add('hidden');
			});
		}

		// fechar com Esc
		document.addEventListener('keydown', (e) => {
			if (e.key === 'Escape' && modal && !modal.classList.contains('hidden')) {
				modal.classList.add('hidden');
			}
		});

		if (resetBtn) {
			resetBtn.addEventListener('click', () => location.reload());
		}

	});
// Função de validação de movimento.
// só permite movimentos em diagonais pretas
// Isso é se (row + col) % 2 == 0, o movimento é inválido e os dados não são atualizados

//só permite movimentos  nas peças pretas
//só permite movimentos em casas adjacentes
// Não pode voltar para as casas de trás