Hugging Face's logo

Spaces:
Geek7
/
players2
Runtime error

App Files Community
Geek7 commited on
Commit
2ecf7d0
·
verified ·
1 Parent(s): db98c95

Upload index.html

Browse files
Files changed (1) hide show
  1. static/index.html +100 -0
static/index.html ADDED
@@ -0,0 +1,100 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Checkers</title>
5
+ <style>
6
+ body { font-family: Arial; text-align: center; }
7
+ #board { display: grid; grid-template: repeat(8, 60px) / repeat(8, 60px); margin: auto; }
8
+ .cell { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }
9
+ .black { background: #769656; }
10
+ .white { background: #EEEED2; }
11
+ .piece { width: 40px; height: 40px; border-radius: 50%; }
12
+ .r { background: red; }
13
+ .b { background: black; }
14
+ .R, .B { border: 2px solid gold; }
15
+ </style>
16
+ </head>
17
+ <body>
18
+ <h1>Checkers</h1>
19
+ <input id="nameInput" placeholder="Enter name" />
20
+ <button onclick="setName()">Join</button>
21
+ <h2 id="status"></h2>
22
+ <div id="board"></div>
23
+
24
+ <script src="https://cdn.socket.io/4.6.1/socket.io.min.js"></script>
25
+ <script>
26
+ const socket = io("http://localhost:5000");
27
+ let myColor = null, board = [], selected = null;
28
+
29
+ socket.on("connect", () => console.log("Connected"));
30
+
31
+ function setName() {
32
+ const name = document.getElementById("nameInput").value;
33
+ socket.emit("set_name", { name });
34
+ }
35
+
36
+ socket.on("match_found", ({ color, opponent }) => {
37
+ myColor = color;
38
+ document.getElementById("status").innerText = `You are ${color}, playing vs ${opponent}`;
39
+ fetch("/state")
40
+ .then(res => res.json())
41
+ .then(data => { board = data.board; render(); });
42
+ });
43
+
44
+ socket.on("opponent_move", move => {
45
+ applyMove(move);
46
+ render();
47
+ });
48
+
49
+ socket.on("multi_jump", ({ from }) => {
50
+ selected = from;
51
+ });
52
+
53
+ socket.on("game_over", ({ winner }) => alert(`${winner} wins!`));
54
+ socket.on("opponent_disconnected", () => alert("Opponent disconnected."));
55
+
56
+ function render() {
57
+ const boardDiv = document.getElementById("board");
58
+ boardDiv.innerHTML = "";
59
+ for (let r = 0; r < 8; r++) {
60
+ for (let c = 0; c < 8; c++) {
61
+ const div = document.createElement("div");
62
+ div.className = `cell ${(r + c) % 2 ? "black" : "white"}`;
63
+ div.onclick = () => handleClick(r, c);
64
+ const piece = board[r][c];
65
+ if (piece) {
66
+ const p = document.createElement("div");
67
+ p.className = `piece ${piece}`;
68
+ div.appendChild(p);
69
+ }
70
+ boardDiv.appendChild(div);
71
+ }
72
+ }
73
+ }
74
+
75
+ function handleClick(r, c) {
76
+ const piece = board[r][c];
77
+ if (selected) {
78
+ socket.emit("move", {
79
+ from: selected,
80
+ to: [r, c],
81
+ captured: null
82
+ });
83
+ selected = null;
84
+ } else if (piece && piece[0] === myColor[0]) {
85
+ selected = [r, c];
86
+ }
87
+ }
88
+
89
+ function applyMove({ from, to, captured }) {
90
+ const [fr, fc] = from, [tr, tc] = to;
91
+ board[tr][tc] = board[fr][fc];
92
+ board[fr][fc] = null;
93
+ if (captured) {
94
+ const [cr, cc] = captured;
95
+ board[cr][cc] = null;
96
+ }
97
+ }
98
+ </script>
99
+ </body>
100
+ </html>