@alepot55/chessboardjs 1.0.3 → 2.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.babelrc +4 -0
- package/README.md +136 -0
- package/chess.js +1994 -0
- package/chessboard.config.js +145 -0
- package/chessboard.css +104 -104
- package/chessboard.js +850 -1169
- package/chessboard.move.js +56 -0
- package/chessboard.piece.js +115 -0
- package/chessboard.square.js +184 -0
- package/jest.config.js +7 -0
- package/package.json +11 -4
- package/test/chessboard.test.js +128 -0
- package/chessboard_min.js +0 -1168
package/.babelrc
ADDED
package/README.md
ADDED
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
# Chessboard.js: Interactive and Customizable Chessboard Library
|
|
2
|
+
|
|
3
|
+
Chessboard.js is a lightweight and versatile NPM package that lets you easily integrate an interactive, customizable chessboard into your web applications. Use it for game displays, chess lessons, analysis tools, or any project that needs a visual chess interface.
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
Chessboard.js is designed with simplicity and flexibility in mind. Configure board appearance, piece sets, orientation, highlighting, animations, and more through a rich API. The board updates dynamically with user interactions and programmatic moves.
|
|
7
|
+
|
|
8
|
+
## Installation
|
|
9
|
+
```bash
|
|
10
|
+
npm install chessboardjs
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
Import and initialize the chessboard into your project:
|
|
15
|
+
```javascript
|
|
16
|
+
import Chessboard from 'chessboardjs';
|
|
17
|
+
|
|
18
|
+
const config = {
|
|
19
|
+
id: 'board', // HTML element id for the board
|
|
20
|
+
piecesPath: 'path/to/pieces', // Path or object/function returning piece image paths
|
|
21
|
+
position: 'start', // Valid FEN string or predefined position ('start' for initial setup)
|
|
22
|
+
size: 400, // Board size in pixels or 'auto'
|
|
23
|
+
orientation: 'w', // Board orientation: 'w' for white at bottom, 'b' for black at bottom
|
|
24
|
+
draggable: true, // Enable drag and drop for pieces
|
|
25
|
+
clickable: true, // Allow clickable moves and interactions
|
|
26
|
+
onlyLegalMoves: true, // Restrict piece moves to legal moves only
|
|
27
|
+
onMove: (move) => { // Callback when a move is attempted
|
|
28
|
+
console.log('Move attempted:', move);
|
|
29
|
+
return true; // Accept the move
|
|
30
|
+
},
|
|
31
|
+
onMoveEnd: (move) => {
|
|
32
|
+
console.log('Move executed:', move);
|
|
33
|
+
},
|
|
34
|
+
// ...other configuration options...
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
const board = new Chessboard(config);
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## API Documentation
|
|
41
|
+
|
|
42
|
+
### Constructor
|
|
43
|
+
- **new Chessboard(config)**
|
|
44
|
+
- Initializes a new chessboard using the provided configuration object.
|
|
45
|
+
|
|
46
|
+
### Public Functions for Users
|
|
47
|
+
|
|
48
|
+
- **move(move, animation)**
|
|
49
|
+
- Moves a piece from one square to another.
|
|
50
|
+
- Example:
|
|
51
|
+
```javascript
|
|
52
|
+
board.move('e2e4', true);
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
- **clear(animation)**
|
|
56
|
+
- Clears the board of all pieces.
|
|
57
|
+
- Example:
|
|
58
|
+
```javascript
|
|
59
|
+
board.clear();
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
- **insert(square, piece)**
|
|
63
|
+
- Inserts a piece on a given square.
|
|
64
|
+
- Example:
|
|
65
|
+
```javascript
|
|
66
|
+
board.insert('d4', 'qw');
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
- **get(square)**
|
|
70
|
+
- Returns the identifier of the piece at the given square.
|
|
71
|
+
- Example:
|
|
72
|
+
```javascript
|
|
73
|
+
const pieceId = board.get('e4');
|
|
74
|
+
console.log('Piece at e4:', pieceId);
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
- **position(position, color)**
|
|
78
|
+
- Updates the board position. Optionally, flips orientation if a color parameter is provided.
|
|
79
|
+
- Example:
|
|
80
|
+
```javascript
|
|
81
|
+
board.position('rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1');
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
- **flip()**
|
|
85
|
+
- Flips the board orientation between white and black.
|
|
86
|
+
- Example:
|
|
87
|
+
```javascript
|
|
88
|
+
board.flip();
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
- **build()**
|
|
92
|
+
- Rebuilds or initializes the board and its elements.
|
|
93
|
+
- Example:
|
|
94
|
+
```javascript
|
|
95
|
+
board.build();
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
- **resize(value)**
|
|
99
|
+
- Dynamically resizes the board. Accepts a number (pixels) or 'auto'.
|
|
100
|
+
- Example:
|
|
101
|
+
```javascript
|
|
102
|
+
board.resize(500);
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
- **destroy()**
|
|
106
|
+
- Destroys the board, removes all event listeners, and cleans up the DOM.
|
|
107
|
+
- Example:
|
|
108
|
+
```javascript
|
|
109
|
+
board.destroy();
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
- **piece(square)**
|
|
113
|
+
- Returns the piece identifier at the specified square.
|
|
114
|
+
- Example:
|
|
115
|
+
```javascript
|
|
116
|
+
const currentPiece = board.piece('f6');
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
- **highlight(square) and dehighlight(square)**
|
|
120
|
+
- Highlights or removes highlight from a given square.
|
|
121
|
+
- Example:
|
|
122
|
+
```javascript
|
|
123
|
+
board.highlight('e4');
|
|
124
|
+
board.dehighlight('e4');
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
- **turn() and fen()**
|
|
128
|
+
- `turn()` returns the color whose turn it is ('w' or 'b').
|
|
129
|
+
- `fen()` returns the current board state in FEN notation.
|
|
130
|
+
- Example:
|
|
131
|
+
```javascript
|
|
132
|
+
console.log('Current turn:', board.turn());
|
|
133
|
+
console.log('FEN:', board.fen());
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
For further details, refer to the full API documentation at the project website or within the source code.
|