|
1 | 1 | <!DOCTYPE html> |
2 | | -<html lang="en" dir="rtl"> |
| 2 | +<html> |
3 | 3 | <head> |
4 | | - <meta charset="UTF-8" /> |
5 | | - <meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
6 | | - <title>Modern Chess Game</title> |
7 | | - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.css"> |
8 | | - <style> |
9 | | - body { |
10 | | - display: flex; |
11 | | - flex-direction: column; |
12 | | - align-items: center; |
13 | | - justify-content: center; |
14 | | - height: 100vh; |
15 | | - margin: 0; |
16 | | - background-color: #f0f0f0; |
17 | | - font-family: sans-serif; |
18 | | - direction: rtl; |
19 | | - } |
20 | | - |
21 | | - #board { |
22 | | - width: 400px; |
23 | | - margin-bottom: 20px; |
24 | | - } |
25 | | - |
26 | | - #status { |
27 | | - font-size: 18px; |
28 | | - color: #333; |
29 | | - } |
30 | | - </style> |
| 4 | + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chessground/assets/chessground.base.css" /> |
| 5 | + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chessground/assets/chessground.brown.css" /> |
| 6 | + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chessground/assets/chessground.cburnett.css" /> |
31 | 7 | </head> |
32 | | -<body> |
33 | | - <div id="board"></div> |
34 | | - <div id="status">بازی شروع شد</div> |
35 | | - |
36 | | - <!-- Load chessboard.js (UMD version that exposes global Chessboard) --> |
37 | | - <script src="https://cdn.jsdelivr.net/npm/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.js"></script> |
38 | | - |
39 | | - <!-- Load chess.js (UMD version that exposes global Chess) --> |
40 | | - <script src="https://cdn.jsdelivr.net/npm/chess.js@1.2.0/dist/chess.js"></script> |
41 | | - |
42 | | - <script> |
43 | | - const game = new Chess(); |
| 8 | +<body style="background-color: blanchedalmond;"> |
| 9 | + <div id="board" style="width: 480px;height: 480px;"></div> |
| 10 | + <script type="module"> |
| 11 | + import { Chess, SQUARES } from 'https://cdn.jsdelivr.net/npm/chess.js/+esm'; |
| 12 | + import { Chessground } from 'https://cdn.jsdelivr.net/npm/chessground/+esm'; |
44 | 13 |
|
45 | | - const board = Chessboard('board', { |
46 | | - draggable: true, |
47 | | - position: 'start', |
48 | | - onDragStart: (source, piece) => { |
49 | | - if ( |
50 | | - game.game_over() || |
51 | | - (game.turn() === 'w' && piece.startsWith('b')) || |
52 | | - (game.turn() === 'b' && piece.startsWith('w')) |
53 | | - ) { |
54 | | - return false; |
55 | | - } |
56 | | - }, |
57 | | - onDrop: (source, target) => { |
58 | | - const move = game.move({ |
59 | | - from: source, |
60 | | - to: target, |
61 | | - promotion: 'q' |
62 | | - }); |
63 | | - |
64 | | - if (move === null) return 'snapback'; |
65 | | - |
66 | | - updateStatus(); |
67 | | - }, |
68 | | - onSnapEnd: () => { |
69 | | - board.position(game.fen()); |
70 | | - } |
71 | | - }); |
| 14 | + const game = new Chess(); |
72 | 15 |
|
73 | | - function updateStatus() { |
74 | | - let status = ''; |
75 | | - const moveColor = game.turn() === 'w' ? 'سفید' : 'سیاه'; |
| 16 | + const config = { |
| 17 | + fen: game.fen(), |
| 18 | + turnColor: 'white', |
| 19 | + movable: { |
| 20 | + free: false, |
| 21 | + color: 'white', |
| 22 | + dests: toDests(game), |
| 23 | + events: { |
| 24 | + after: (orig, dest) => { |
| 25 | + const move = game.move({ from: orig, to: dest, promotion: 'q' }); |
| 26 | + if (move) { |
| 27 | + ground.set({ |
| 28 | + fen: game.fen(), |
| 29 | + turnColor: game.turn() === 'w' ? 'white' : 'black', |
| 30 | + movable: { dests: toDests(game) } |
| 31 | + }); |
| 32 | + if (!game.game_over()) { |
| 33 | + setTimeout(computerMove, 500); |
| 34 | + } |
| 35 | + } |
| 36 | + } |
| 37 | + } |
| 38 | + }, |
| 39 | + viewOnly: false, |
| 40 | + }; |
| 41 | + const config2 = { |
| 42 | + fen: game.fen(), |
| 43 | + movable: { |
| 44 | + free: false, |
| 45 | + dests: toDests(game), |
| 46 | + events: { |
| 47 | + after: (orig, dest) => { |
| 48 | + const move = game.move({ from: orig, to: dest, promotion: 'q' }); |
| 49 | + if (move) ground.set({ fen: game.fen() }); |
| 50 | + } |
| 51 | + } |
| 52 | + } |
| 53 | + }; |
| 54 | + const ground = Chessground(document.getElementById('board'), config); |
76 | 55 |
|
77 | | - if (game.in_checkmate()) { |
78 | | - status = `بازی تمام شد، ${moveColor} کیش و مات شد.`; |
79 | | - } else if (game.in_draw()) { |
80 | | - status = 'بازی مساوی شد.'; |
81 | | - } else { |
82 | | - status = `نوبت ${moveColor}`; |
83 | | - if (game.in_check()) { |
84 | | - status += ` - ${moveColor} در کیش است!`; |
| 56 | + function toDests(chess) { |
| 57 | + const dests = new Map(); |
| 58 | + console.log(chess); |
| 59 | + SQUARES.forEach(s => { |
| 60 | + const ms = chess.moves({ square: s, verbose: true }); |
| 61 | + if (ms.length) dests.set(s, ms.map(m => m.to)); |
| 62 | + }); |
| 63 | + return dests; |
85 | 64 | } |
86 | | - } |
87 | | - |
88 | | - document.getElementById('status').textContent = status; |
89 | | - } |
90 | | - |
91 | | - updateStatus(); |
92 | | - </script> |
| 65 | + </script> |
93 | 66 | </body> |
94 | 67 | </html> |
0 commit comments