selectPiece(row, col);
});
}
square.appendChild(pieceEl);
}
if (isDark && validMoves.some(m => m.row === row && m.col === col)) {
square.addEventListener('click', (e) => { e.stopPropagation(); makeMove(row, col); });
}
boardEl.appendChild(square);
}
}
if (!selectedPiece) { boardEl.addEventListener('click', () => { selectedPiece = null; validMoves = []; renderBoard(); }); }
}
function selectPiece(row, col) {
const piece = board[row][col];
if (!piece || piece.player !== playerNum) return;
if (selectedPiece && selectedPiece.row === row && selectedPiece.col === col) { selectedPiece = null; validMoves = []; }
else { selectedPiece = { row, col }; send('getValidMoves', { roomCode, row, col }); }
renderBoard();
}
function makeMove(toRow, toCol) {
const move = validMoves.find(m => m.row === toRow && m.col === toCol);
if (!move || !selectedPiece) return;
send('makeMove', { roomCode, fromRow: selectedPiece.row, fromCol: selectedPiece.col, toRow: move.row, toCol: move.col, isJump: move.isJump, captured: move.captured });
}
function updateTurnIndicator() {
const dot = turnIndicator.querySelector('.turn-dot');
const text = turnIndicator.querySelector('.turn-text');
if (turn === playerNum) { dot.className = 'turn-dot ' + (playerNum === 1 ? 'red' : 'white'); text.textContent = 'Your turn'; }
else { dot.className = 'turn-dot'; text.textContent = "Opponent's turn"; }
}
function renderChat(messages) {
chatMessages.innerHTML = '';
messages.forEach(msg => {
const div = document.createElement('div');
div.className = 'chat-message';
if (msg.type === 'system') { div.classList.add('system'); div.textContent = msg.text; }
else {
div.className += ' player-' + msg.playerNum;
const nameSpan = document.createElement('span');
nameSpan.className = 'msg-name';
nameSpan.textContent = msg.name + ':';
div.appendChild(nameSpan);
div.appendChild(document.createTextNode(msg.text));
}
chatMessages.appendChild(div);
});
chatMessages.scrollTop = chatMessages.scrollHeight;
}
function addSystemMessage(text) {
const div = document.createElement('div');
div.className = 'chat-message system';
div.textContent = text;
chatMessages.appendChild(div);
chatMessages.scrollTop = chatMessages.scrollHeight;
}
chatToggleBtn.addEventListener('click', () => { chatPanel.classList.toggle('open'); if (chatPanel.classList.contains('open')) { unreadMessages = 0; chatBadge.classList.add('hidden'); } });
chatCloseBtn.addEventListener('click', () => { chatPanel.classList.remove('open'); });
chatForm.addEventListener('submit', (e) => { e.preventDefault(); const text = chatInput.value.trim(); if (!text) return; send('sendMessage', { roomCode, message: text }); chatInput.value = ''; });
backBtn.addEventListener('click', () => { if (gameOver) { resetGame(); } else { if (confirm('Leave the game?')) { resetGame(); } } });
overlayBtn.addEventListener('click', () => { gameOverlay.classList.add('hidden'); resetGame(); });
function resetGame() {
roomCode = ''; playerNum = 0; board = []; turn = 0; selectedPiece = null; validMoves = []; canContinueJump = false; gameOver = false; unreadMessages = 0;
chatBadge.classList.add('hidden'); chatPanel.classList.remove('open'); playerNameInput.value = ''; roomCodeInput.value = '';
joinSection.classList.add('hidden'); createRoomBtn.classList.remove('hidden'); joinRoomBtn.classList.remove('hidden');
showScreen('lobby'); connect('lobby');
}
document.addEventListener('touchstart', () => {}, { passive: true });