|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<title>Online Checkers</title> |
|
|
<style> |
|
|
body { font-family: sans-serif; text-align: center; } |
|
|
table { border-collapse: collapse; margin: 20px auto; } |
|
|
td { |
|
|
width: 60px; height: 60px; text-align: center; vertical-align: middle; |
|
|
border: 1px solid #444; font-size: 24px; |
|
|
} |
|
|
.black { background-color: #444; color: white; } |
|
|
.red { background-color: red; color: white; } |
|
|
.empty { background-color: #eee; } |
|
|
.highlight { background-color: yellow !important; } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<h1>Online Checkers</h1> |
|
|
<p id="status">Connecting...</p> |
|
|
<table id="board"></table> |
|
|
|
|
|
<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script> |
|
|
<script> |
|
|
const socket = io(); |
|
|
|
|
|
let myColor = null; |
|
|
let selected = null; |
|
|
const boardElement = document.getElementById('board'); |
|
|
const statusElement = document.getElementById('status'); |
|
|
|
|
|
socket.on('connect', () => { |
|
|
const name = prompt("Enter your name:"); |
|
|
socket.emit('set_name', { name: name || 'Player' }); |
|
|
}); |
|
|
|
|
|
socket.on('match_found', data => { |
|
|
myColor = data.color; |
|
|
statusElement.innerText = `Matched! You are ${myColor}. Opponent: ${data.opponent}`; |
|
|
}); |
|
|
|
|
|
socket.on('opponent_move', data => { |
|
|
fetch('/state') |
|
|
.then(res => res.json()) |
|
|
.then(updateBoard); |
|
|
}); |
|
|
|
|
|
socket.on('multi_jump', data => { |
|
|
selected = data.from; |
|
|
renderBoard(); |
|
|
}); |
|
|
|
|
|
socket.on('game_over', data => { |
|
|
statusElement.innerText = `Game over! Winner: ${data.winner}`; |
|
|
}); |
|
|
|
|
|
socket.on('opponent_disconnected', () => { |
|
|
statusElement.innerText = "Opponent disconnected. Game ended."; |
|
|
}); |
|
|
|
|
|
function updateBoard(data) { |
|
|
renderBoard(data.board); |
|
|
} |
|
|
|
|
|
function renderBoard(boardData = null) { |
|
|
boardElement.innerHTML = ''; |
|
|
fetch('/state') |
|
|
.then(res => res.json()) |
|
|
.then(data => { |
|
|
const board = data.board; |
|
|
for (let i = 0; i < 8; i++) { |
|
|
const row = document.createElement('tr'); |
|
|
for (let j = 0; j < 8; j++) { |
|
|
const cell = document.createElement('td'); |
|
|
const piece = board[i][j]; |
|
|
cell.className = (i + j) % 2 === 1 ? 'black' : 'empty'; |
|
|
if (piece === 'r') cell.innerText = 'r'; |
|
|
if (piece === 'R') cell.innerText = 'R'; |
|
|
if (piece === 'b') cell.innerText = 'b'; |
|
|
if (piece === 'B') cell.innerText = 'B'; |
|
|
|
|
|
if (selected && selected[0] === i && selected[1] === j) |
|
|
cell.classList.add('highlight'); |
|
|
|
|
|
cell.onclick = () => handleClick(i, j, board); |
|
|
row.appendChild(cell); |
|
|
} |
|
|
boardElement.appendChild(row); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
function handleClick(i, j, board) { |
|
|
const piece = board[i][j]; |
|
|
if (selected) { |
|
|
socket.emit('move', { from: selected, to: [i, j] }); |
|
|
selected = null; |
|
|
} else if (piece && myColor[0] === piece.toLowerCase()) { |
|
|
selected = [i, j]; |
|
|
renderBoard(); |
|
|
} |
|
|
} |
|
|
|
|
|
setInterval(renderBoard, 1500); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
