File size: 3,279 Bytes
35c99d1 df03365 35c99d1 df03365 35c99d1 df03365 35c99d1 df03365 35c99d1 df03365 35c99d1 df03365 35c99d1 df03365 35c99d1 df03365 35c99d1 df03365 35c99d1 df03365 35c99d1 df03365 35c99d1 df03365 35c99d1 df03365 35c99d1 df03365 35c99d1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
<!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(); // highlight piece
});
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(); // highlight selected
}
}
setInterval(renderBoard, 1500); // Keep board in sync
</script>
</body>
</html> |