Spaces:

Geek7
/

players2

Runtime error

App Files Files Community

Geek7 commited on May 23

Commit

df03365

verified ·

1 Parent(s): e230ca8

Update templates/client.html

Browse files

Files changed (1) hide show

templates/client.html +91 -83

templates/client.html CHANGED Viewed

@@ -1,100 +1,108 @@
 <!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();
-        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>

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