| <!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> |
