|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<title>Checkers</title> |
|
|
<style> |
|
|
body { font-family: Arial; text-align: center; } |
|
|
#board { display: grid; grid-template: repeat(8, 60px) / repeat(8, 60px); margin: auto; } |
|
|
.cell { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; } |
|
|
.black { background: #769656; } |
|
|
.white { background: #EEEED2; } |
|
|
.piece { width: 40px; height: 40px; border-radius: 50%; } |
|
|
.r { background: red; } |
|
|
.b { background: black; } |
|
|
.R, .B { border: 2px solid gold; } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<h1>Checkers</h1> |
|
|
<input id="nameInput" placeholder="Enter name" /> |
|
|
<button onclick="setName()">Join</button> |
|
|
<h2 id="status"></h2> |
|
|
<div id="board"></div> |
|
|
|
|
|
<script src="https://cdn.socket.io/4.6.1/socket.io.min.js"></script> |
|
|
<script> |
|
|
const socket = io("http://localhost:5000"); |
|
|
let myColor = null, board = [], selected = null; |
|
|
|
|
|
socket.on("connect", () => console.log("Connected")); |
|
|
|
|
|
function setName() { |
|
|
const name = document.getElementById("nameInput").value; |
|
|
socket.emit("set_name", { name }); |
|
|
} |
|
|
|
|
|
socket.on("match_found", ({ color, opponent }) => { |
|
|
myColor = color; |
|
|
document.getElementById("status").innerText = `You are ${color}, playing vs ${opponent}`; |
|
|
fetch("/state") |
|
|
.then(res => res.json()) |
|
|
.then(data => { board = data.board; render(); }); |
|
|
}); |
|
|
|
|
|
socket.on("opponent_move", move => { |
|
|
applyMove(move); |
|
|
render(); |
|
|
}); |
|
|
|
|
|
socket.on("multi_jump", ({ from }) => { |
|
|
selected = from; |
|
|
}); |
|
|
|
|
|
socket.on("game_over", ({ winner }) => alert(`${winner} wins!`)); |
|
|
socket.on("opponent_disconnected", () => alert("Opponent disconnected.")); |
|
|
|
|
|
function render() { |
|
|
const boardDiv = document.getElementById("board"); |
|
|
boardDiv.innerHTML = ""; |
|
|
for (let r = 0; r < 8; r++) { |
|
|
for (let c = 0; c < 8; c++) { |
|
|
const div = document.createElement("div"); |
|
|
div.className = `cell ${(r + c) % 2 ? "black" : "white"}`; |
|
|
div.onclick = () => handleClick(r, c); |
|
|
const piece = board[r][c]; |
|
|
if (piece) { |
|
|
const p = document.createElement("div"); |
|
|
p.className = `piece ${piece}`; |
|
|
div.appendChild(p); |
|
|
} |
|
|
boardDiv.appendChild(div); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
function handleClick(r, c) { |
|
|
const piece = board[r][c]; |
|
|
if (selected) { |
|
|
socket.emit("move", { |
|
|
from: selected, |
|
|
to: [r, c], |
|
|
captured: null |
|
|
}); |
|
|
selected = null; |
|
|
} else if (piece && piece[0] === myColor[0]) { |
|
|
selected = [r, c]; |
|
|
} |
|
|
} |
|
|
|
|
|
function applyMove({ from, to, captured }) { |
|
|
const [fr, fc] = from, [tr, tc] = to; |
|
|
board[tr][tc] = board[fr][fc]; |
|
|
board[fr][fc] = null; |
|
|
if (captured) { |
|
|
const [cr, cc] = captured; |
|
|
board[cr][cc] = null; |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
