cm-chessboard 4.1.2 → 4.1.6
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/README.md +27 -26
- package/assets/styles/cm-chessboard.css +323 -1
- package/assets/styles/cm-chessboard.css.map +1 -1
- package/examples/accessible-chessboard.html +2 -2
- package/examples/styles/examples.css +61 -1
- package/examples/styles/examples.css.map +1 -1
- package/index.html +10 -6
- package/package.json +1 -1
- package/src/cm-chessboard/Chessboard.js +6 -3
- package/src/cm-chessboard/view/ChessboardViewAccessible.js +20 -6
package/README.md
CHANGED
|
@@ -16,6 +16,7 @@ aspects of chess games.
|
|
|
16
16
|
- [Can handle moves input via click or drag](https://shaack.com/projekte/cm-chessboard/examples/validate-moves.html)
|
|
17
17
|
- [Styleable via css](https://shaack.com/projekte/cm-chessboard/examples/different-styles.html)
|
|
18
18
|
- [Supports multiple piece sets](https://shaack.com/projekte/cm-chessboard/examples/different-styles.html)
|
|
19
|
+
- [Supports an optimized usage for visually impaired people](https://shaack.com/projekte/cm-chessboard/examples/accessible-chessboard.html) 🆕
|
|
19
20
|
- Uses SVG for rendering
|
|
20
21
|
- Vanilla JavaScript modules in ECMAScript 6 syntax
|
|
21
22
|
- **No dependencies**
|
|
@@ -33,7 +34,7 @@ aspects of chess games.
|
|
|
33
34
|
|
|
34
35
|
**Option 2:** Download the code from [GitHub](https://github.com/shaack/cm-chessboard).
|
|
35
36
|
|
|
36
|
-
**Option 3:** Use it via CDN https://cdn.jsdelivr.net/npm/cm-chessboard@
|
|
37
|
+
**Option 3:** Use it via CDN https://cdn.jsdelivr.net/npm/cm-chessboard@4/src/cm-chessboard/Chessboard.js
|
|
37
38
|
|
|
38
39
|
After installation, copy the sprite in `cm-chessboard/assets/images/` to your projects `assets/images/`
|
|
39
40
|
folder. If you put the sprite somewhere else you have to configure the location
|
|
@@ -53,7 +54,7 @@ The pieces animations are now smoother and less error-prone for race conditions.
|
|
|
53
54
|
As of version 4.x, the API functions `setPosition()`, `setPiece()` and `movePiece()` are **not animated** as default.
|
|
54
55
|
If you want some pieces animations you have to give the parameter `animated = true`.
|
|
55
56
|
|
|
56
|
-
|
|
57
|
+
And with 4.x the chessboard has become more accessible for visually impaired people.
|
|
57
58
|
|
|
58
59
|
## Usage
|
|
59
60
|
|
|
@@ -83,30 +84,30 @@ Below is the default configuration
|
|
|
83
84
|
|
|
84
85
|
```javascript
|
|
85
86
|
let defaultProps = {
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
87
|
+
position: "empty", // set as fen, "start" or "empty"
|
|
88
|
+
orientation: COLOR.white, // white on bottom
|
|
89
|
+
responsive: true, // resize the board automatically to the size of the context element
|
|
90
|
+
animationDuration: 300, // pieces animation duration in milliseconds. Disable all animation with `0`.
|
|
91
|
+
language: navigator.language.substring(0,2).toLowerCase(), // supports "de" and "en" for now, used for pieces naming
|
|
92
|
+
style: {
|
|
93
|
+
cssClass: "default", // set the css theme of the board, try "green", "blue" or "chess-club"
|
|
94
|
+
showCoordinates: true, // show ranks and files
|
|
95
|
+
borderType: BORDER_TYPE.none, // "thin" thin border, "frame" wide border with coordinates in it, "none" no border
|
|
96
|
+
aspectRatio: 1, // height/width of the board
|
|
97
|
+
moveFromMarker: MARKER_TYPE.frame, // the marker used to mark the start square
|
|
98
|
+
moveToMarker: MARKER_TYPE.frame, // the marker used to mark the square where the figure is moving to
|
|
99
|
+
},
|
|
100
|
+
sprite: {
|
|
101
|
+
url: "./assets/images/chessboard-sprite.svg", // pieces and markers are stored in a sprite file
|
|
102
|
+
size: 40, // the sprite tiles size, defaults to 40x40px
|
|
103
|
+
cache: true // cache the sprite
|
|
104
|
+
},
|
|
105
|
+
accessibility: {
|
|
106
|
+
movePieceForm: false, // display a form to move a piece (from, to, move)
|
|
107
|
+
boardAsTable: false, // display the board additionally as HTML table
|
|
108
|
+
piecesAsList: false, // display the pieces additionally as List
|
|
109
|
+
visuallyHidden: true // hide all those extra outputs visually but keep them accessible for screen readers and braille displays
|
|
110
|
+
}
|
|
110
111
|
}
|
|
111
112
|
```
|
|
112
113
|
|
|
@@ -1,3 +1,325 @@
|
|
|
1
|
-
.cm-chessboard .board.input-enabled .square
|
|
1
|
+
.cm-chessboard .board.input-enabled .square {
|
|
2
|
+
cursor: pointer; }
|
|
3
|
+
|
|
4
|
+
.cm-chessboard .markers .marker.markerFrame, .cm-chessboard .markers .marker.marker-frame {
|
|
5
|
+
stroke: black;
|
|
6
|
+
stroke-width: 1.8px;
|
|
7
|
+
opacity: 0.5; }
|
|
8
|
+
|
|
9
|
+
.cm-chessboard .markers .marker.markerFrameRed, .cm-chessboard .markers .marker.marker-frame-red {
|
|
10
|
+
stroke: #aa0000;
|
|
11
|
+
stroke-width: 1.8px;
|
|
12
|
+
opacity: 0.4; }
|
|
13
|
+
|
|
14
|
+
.cm-chessboard .markers .marker.markerSquare, .cm-chessboard .markers .marker.marker-square {
|
|
15
|
+
fill: black;
|
|
16
|
+
opacity: 0.11; }
|
|
17
|
+
|
|
18
|
+
.cm-chessboard .markers .marker.markerDot, .cm-chessboard .markers .marker.marker-dot {
|
|
19
|
+
fill: black;
|
|
20
|
+
opacity: 0.3; }
|
|
21
|
+
|
|
22
|
+
.cm-chessboard .markers .marker.markerCircle, .cm-chessboard .markers .marker.marker-circle {
|
|
23
|
+
stroke: #000055;
|
|
24
|
+
stroke-width: 3px;
|
|
25
|
+
opacity: 0.4; }
|
|
26
|
+
|
|
27
|
+
.cm-chessboard .markers .marker.markerCircleRed, .cm-chessboard .markers .marker.marker-circle-red {
|
|
28
|
+
stroke: #aa0000;
|
|
29
|
+
stroke-width: 3px;
|
|
30
|
+
opacity: 0.4; }
|
|
31
|
+
|
|
32
|
+
.cm-chessboard .pieces, .cm-chessboard .markers {
|
|
33
|
+
pointer-events: none; }
|
|
34
|
+
|
|
35
|
+
.cm-chessboard-content .list-inline {
|
|
36
|
+
padding-left: 0;
|
|
37
|
+
list-style: none; }
|
|
38
|
+
|
|
39
|
+
.cm-chessboard-content .list-inline-item {
|
|
40
|
+
display: inline-block; }
|
|
41
|
+
.cm-chessboard-content .list-inline-item:not(:last-child) {
|
|
42
|
+
margin-right: 1rem; }
|
|
43
|
+
|
|
44
|
+
.cm-chessboard-content .list-inline {
|
|
45
|
+
padding-left: 0;
|
|
46
|
+
list-style: none; }
|
|
47
|
+
|
|
48
|
+
.cm-chessboard-content .list-inline-item {
|
|
49
|
+
display: inline-block; }
|
|
50
|
+
.cm-chessboard-content .list-inline-item:not(:last-child) {
|
|
51
|
+
margin-right: 1rem; }
|
|
52
|
+
|
|
53
|
+
.visually-hidden {
|
|
54
|
+
position: absolute;
|
|
55
|
+
left: -10000px;
|
|
56
|
+
top: auto;
|
|
57
|
+
width: 1px;
|
|
58
|
+
height: 1px;
|
|
59
|
+
overflow: hidden; }
|
|
60
|
+
|
|
61
|
+
/*
|
|
62
|
+
body * {
|
|
63
|
+
outline: 1px rgba(255, 255, 255, 0.1) solid;
|
|
64
|
+
}
|
|
65
|
+
*/
|
|
66
|
+
.cm-chessboard.default .board .square.white {
|
|
67
|
+
fill: #ecdab9; }
|
|
68
|
+
|
|
69
|
+
.cm-chessboard.default .board .square.black {
|
|
70
|
+
fill: #c5a076; }
|
|
71
|
+
|
|
72
|
+
.cm-chessboard.default.border-type-thin .board .border {
|
|
73
|
+
stroke: #c5a076;
|
|
74
|
+
stroke-width: 0.7%;
|
|
75
|
+
fill: #ecdab9; }
|
|
76
|
+
|
|
77
|
+
.cm-chessboard.default.border-type-none .board .border {
|
|
78
|
+
stroke: #c5a076;
|
|
79
|
+
stroke-width: 0;
|
|
80
|
+
fill: #ecdab9; }
|
|
81
|
+
|
|
82
|
+
.cm-chessboard.default.border-type-frame .board .border {
|
|
83
|
+
fill: #ecdab9;
|
|
84
|
+
stroke: none; }
|
|
85
|
+
|
|
86
|
+
.cm-chessboard.default.border-type-frame .board .border-inner {
|
|
87
|
+
fill: transparent;
|
|
88
|
+
stroke: #c5a076;
|
|
89
|
+
stroke-width: 0.7%; }
|
|
90
|
+
|
|
91
|
+
.cm-chessboard.default .coordinates {
|
|
92
|
+
pointer-events: none;
|
|
93
|
+
user-select: none; }
|
|
94
|
+
.cm-chessboard.default .coordinates .coordinate {
|
|
95
|
+
fill: #c5a076;
|
|
96
|
+
font-size: 7px;
|
|
97
|
+
cursor: default; }
|
|
98
|
+
.cm-chessboard.default .coordinates .coordinate.black {
|
|
99
|
+
fill: #ecdab9; }
|
|
100
|
+
.cm-chessboard.default .coordinates .coordinate.white {
|
|
101
|
+
fill: #c5a076; }
|
|
102
|
+
|
|
103
|
+
.cm-chessboard.default-contrast .board .square.white {
|
|
104
|
+
fill: #ecdab9; }
|
|
105
|
+
|
|
106
|
+
.cm-chessboard.default-contrast .board .square.black {
|
|
107
|
+
fill: #c5a076; }
|
|
108
|
+
|
|
109
|
+
.cm-chessboard.default-contrast.border-type-thin .board .border {
|
|
110
|
+
stroke: #c5a076;
|
|
111
|
+
stroke-width: 0.7%;
|
|
112
|
+
fill: #ecdab9; }
|
|
113
|
+
|
|
114
|
+
.cm-chessboard.default-contrast.border-type-none .board .border {
|
|
115
|
+
stroke: #c5a076;
|
|
116
|
+
stroke-width: 0;
|
|
117
|
+
fill: #ecdab9; }
|
|
118
|
+
|
|
119
|
+
.cm-chessboard.default-contrast.border-type-frame .board .border {
|
|
120
|
+
fill: #ecdab9;
|
|
121
|
+
stroke: none; }
|
|
122
|
+
|
|
123
|
+
.cm-chessboard.default-contrast.border-type-frame .board .border-inner {
|
|
124
|
+
fill: transparent;
|
|
125
|
+
stroke: #c5a076;
|
|
126
|
+
stroke-width: 0.7%; }
|
|
127
|
+
|
|
128
|
+
.cm-chessboard.default-contrast .coordinates {
|
|
129
|
+
pointer-events: none;
|
|
130
|
+
user-select: none; }
|
|
131
|
+
.cm-chessboard.default-contrast .coordinates .coordinate {
|
|
132
|
+
fill: #c5a076;
|
|
133
|
+
font-size: 7px;
|
|
134
|
+
cursor: default; }
|
|
135
|
+
.cm-chessboard.default-contrast .coordinates .coordinate.black {
|
|
136
|
+
fill: #333; }
|
|
137
|
+
.cm-chessboard.default-contrast .coordinates .coordinate.white {
|
|
138
|
+
fill: #333; }
|
|
139
|
+
|
|
140
|
+
.cm-chessboard.green .board .square.white {
|
|
141
|
+
fill: #E0DDCC; }
|
|
142
|
+
|
|
143
|
+
.cm-chessboard.green .board .square.black {
|
|
144
|
+
fill: #4c946a; }
|
|
145
|
+
|
|
146
|
+
.cm-chessboard.green.border-type-thin .board .border {
|
|
147
|
+
stroke: #4c946a;
|
|
148
|
+
stroke-width: 0.7%;
|
|
149
|
+
fill: #E0DDCC; }
|
|
150
|
+
|
|
151
|
+
.cm-chessboard.green.border-type-none .board .border {
|
|
152
|
+
stroke: #4c946a;
|
|
153
|
+
stroke-width: 0;
|
|
154
|
+
fill: #E0DDCC; }
|
|
155
|
+
|
|
156
|
+
.cm-chessboard.green.border-type-frame .board .border {
|
|
157
|
+
fill: #E0DDCC;
|
|
158
|
+
stroke: none; }
|
|
159
|
+
|
|
160
|
+
.cm-chessboard.green.border-type-frame .board .border-inner {
|
|
161
|
+
fill: transparent;
|
|
162
|
+
stroke: #4c946a;
|
|
163
|
+
stroke-width: 0.7%; }
|
|
164
|
+
|
|
165
|
+
.cm-chessboard.green .coordinates {
|
|
166
|
+
pointer-events: none;
|
|
167
|
+
user-select: none; }
|
|
168
|
+
.cm-chessboard.green .coordinates .coordinate {
|
|
169
|
+
fill: #4c946a;
|
|
170
|
+
font-size: 7px;
|
|
171
|
+
cursor: default; }
|
|
172
|
+
.cm-chessboard.green .coordinates .coordinate.black {
|
|
173
|
+
fill: #E0DDCC; }
|
|
174
|
+
.cm-chessboard.green .coordinates .coordinate.white {
|
|
175
|
+
fill: #4c946a; }
|
|
176
|
+
|
|
177
|
+
.cm-chessboard.blue .board .square.white {
|
|
178
|
+
fill: #d8ecfb; }
|
|
179
|
+
|
|
180
|
+
.cm-chessboard.blue .board .square.black {
|
|
181
|
+
fill: #86afcf; }
|
|
182
|
+
|
|
183
|
+
.cm-chessboard.blue.border-type-thin .board .border {
|
|
184
|
+
stroke: #86afcf;
|
|
185
|
+
stroke-width: 0.7%;
|
|
186
|
+
fill: #d8ecfb; }
|
|
187
|
+
|
|
188
|
+
.cm-chessboard.blue.border-type-none .board .border {
|
|
189
|
+
stroke: #86afcf;
|
|
190
|
+
stroke-width: 0;
|
|
191
|
+
fill: #d8ecfb; }
|
|
192
|
+
|
|
193
|
+
.cm-chessboard.blue.border-type-frame .board .border {
|
|
194
|
+
fill: #d8ecfb;
|
|
195
|
+
stroke: none; }
|
|
196
|
+
|
|
197
|
+
.cm-chessboard.blue.border-type-frame .board .border-inner {
|
|
198
|
+
fill: transparent;
|
|
199
|
+
stroke: #86afcf;
|
|
200
|
+
stroke-width: 0.7%; }
|
|
201
|
+
|
|
202
|
+
.cm-chessboard.blue .coordinates {
|
|
203
|
+
pointer-events: none;
|
|
204
|
+
user-select: none; }
|
|
205
|
+
.cm-chessboard.blue .coordinates .coordinate {
|
|
206
|
+
fill: #86afcf;
|
|
207
|
+
font-size: 7px;
|
|
208
|
+
cursor: default; }
|
|
209
|
+
.cm-chessboard.blue .coordinates .coordinate.black {
|
|
210
|
+
fill: #d8ecfb; }
|
|
211
|
+
.cm-chessboard.blue .coordinates .coordinate.white {
|
|
212
|
+
fill: #86afcf; }
|
|
213
|
+
|
|
214
|
+
.cm-chessboard.chess-club .board .square.white {
|
|
215
|
+
fill: #E6D3B1; }
|
|
216
|
+
|
|
217
|
+
.cm-chessboard.chess-club .board .square.black {
|
|
218
|
+
fill: #AF6B3F; }
|
|
219
|
+
|
|
220
|
+
.cm-chessboard.chess-club.border-type-thin .board .border {
|
|
221
|
+
stroke: #692e2b;
|
|
222
|
+
stroke-width: 0.7%;
|
|
223
|
+
fill: #E6D3B1; }
|
|
224
|
+
|
|
225
|
+
.cm-chessboard.chess-club.border-type-none .board .border {
|
|
226
|
+
stroke: #692e2b;
|
|
227
|
+
stroke-width: 0;
|
|
228
|
+
fill: #E6D3B1; }
|
|
229
|
+
|
|
230
|
+
.cm-chessboard.chess-club.border-type-frame .board .border {
|
|
231
|
+
fill: #692e2b;
|
|
232
|
+
stroke: none; }
|
|
233
|
+
|
|
234
|
+
.cm-chessboard.chess-club.border-type-frame .board .border-inner {
|
|
235
|
+
fill: transparent;
|
|
236
|
+
stroke: #692e2b;
|
|
237
|
+
stroke-width: 0.7%; }
|
|
238
|
+
|
|
239
|
+
.cm-chessboard.chess-club .coordinates {
|
|
240
|
+
pointer-events: none;
|
|
241
|
+
user-select: none; }
|
|
242
|
+
.cm-chessboard.chess-club .coordinates .coordinate {
|
|
243
|
+
fill: #E6D3B1;
|
|
244
|
+
font-size: 7px;
|
|
245
|
+
cursor: default; }
|
|
246
|
+
.cm-chessboard.chess-club .coordinates .coordinate.black {
|
|
247
|
+
fill: #E6D3B1; }
|
|
248
|
+
.cm-chessboard.chess-club .coordinates .coordinate.white {
|
|
249
|
+
fill: #AF6B3F; }
|
|
250
|
+
|
|
251
|
+
.cm-chessboard.chessboard-js .board .square.white {
|
|
252
|
+
fill: #f0d9b5; }
|
|
253
|
+
|
|
254
|
+
.cm-chessboard.chessboard-js .board .square.black {
|
|
255
|
+
fill: #b58863; }
|
|
256
|
+
|
|
257
|
+
.cm-chessboard.chessboard-js.border-type-thin .board .border {
|
|
258
|
+
stroke: #404040;
|
|
259
|
+
stroke-width: 0.7%;
|
|
260
|
+
fill: #f0d9b5; }
|
|
261
|
+
|
|
262
|
+
.cm-chessboard.chessboard-js.border-type-none .board .border {
|
|
263
|
+
stroke: #404040;
|
|
264
|
+
stroke-width: 0;
|
|
265
|
+
fill: #f0d9b5; }
|
|
266
|
+
|
|
267
|
+
.cm-chessboard.chessboard-js.border-type-frame .board .border {
|
|
268
|
+
fill: #f0d9b5;
|
|
269
|
+
stroke: none; }
|
|
270
|
+
|
|
271
|
+
.cm-chessboard.chessboard-js.border-type-frame .board .border-inner {
|
|
272
|
+
fill: transparent;
|
|
273
|
+
stroke: #404040;
|
|
274
|
+
stroke-width: 0.7%; }
|
|
275
|
+
|
|
276
|
+
.cm-chessboard.chessboard-js .coordinates {
|
|
277
|
+
pointer-events: none;
|
|
278
|
+
user-select: none; }
|
|
279
|
+
.cm-chessboard.chessboard-js .coordinates .coordinate {
|
|
280
|
+
fill: #404040;
|
|
281
|
+
font-size: 7px;
|
|
282
|
+
cursor: default; }
|
|
283
|
+
.cm-chessboard.chessboard-js .coordinates .coordinate.black {
|
|
284
|
+
fill: #f0d9b5; }
|
|
285
|
+
.cm-chessboard.chessboard-js .coordinates .coordinate.white {
|
|
286
|
+
fill: #b58863; }
|
|
287
|
+
|
|
288
|
+
.cm-chessboard.black-and-white .board .square.white {
|
|
289
|
+
fill: #ffffff; }
|
|
290
|
+
|
|
291
|
+
.cm-chessboard.black-and-white .board .square.black {
|
|
292
|
+
fill: #9c9c9c; }
|
|
293
|
+
|
|
294
|
+
.cm-chessboard.black-and-white.border-type-thin .board .border {
|
|
295
|
+
stroke: #9c9c9c;
|
|
296
|
+
stroke-width: 0.7%;
|
|
297
|
+
fill: #ffffff; }
|
|
298
|
+
|
|
299
|
+
.cm-chessboard.black-and-white.border-type-none .board .border {
|
|
300
|
+
stroke: #9c9c9c;
|
|
301
|
+
stroke-width: 0;
|
|
302
|
+
fill: #ffffff; }
|
|
303
|
+
|
|
304
|
+
.cm-chessboard.black-and-white.border-type-frame .board .border {
|
|
305
|
+
fill: #ffffff;
|
|
306
|
+
stroke: none; }
|
|
307
|
+
|
|
308
|
+
.cm-chessboard.black-and-white.border-type-frame .board .border-inner {
|
|
309
|
+
fill: transparent;
|
|
310
|
+
stroke: #9c9c9c;
|
|
311
|
+
stroke-width: 0.7%; }
|
|
312
|
+
|
|
313
|
+
.cm-chessboard.black-and-white .coordinates {
|
|
314
|
+
pointer-events: none;
|
|
315
|
+
user-select: none; }
|
|
316
|
+
.cm-chessboard.black-and-white .coordinates .coordinate {
|
|
317
|
+
fill: #9c9c9c;
|
|
318
|
+
font-size: 7px;
|
|
319
|
+
cursor: default; }
|
|
320
|
+
.cm-chessboard.black-and-white .coordinates .coordinate.black {
|
|
321
|
+
fill: #ffffff; }
|
|
322
|
+
.cm-chessboard.black-and-white .coordinates .coordinate.white {
|
|
323
|
+
fill: #9c9c9c; }
|
|
2
324
|
|
|
3
325
|
/*# sourceMappingURL=cm-chessboard.css.map */
|
|
@@ -6,5 +6,5 @@
|
|
|
6
6
|
"_cm-chessboard-theme.scss"
|
|
7
7
|
],
|
|
8
8
|
"names": [],
|
|
9
|
-
"mappings": "AAGA,AAGM,cAHQ,CACZ,MAAM,AACH,cAAc,CACb,OAAO,
|
|
9
|
+
"mappings": "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"
|
|
10
10
|
}
|
|
@@ -31,9 +31,9 @@
|
|
|
31
31
|
},
|
|
32
32
|
accessibility: {
|
|
33
33
|
brailleNotationInAlt: true, // show the braille notation of the game in the alt attribute of the svg
|
|
34
|
-
boardAsTable:
|
|
34
|
+
boardAsTable: true, // display the board additionally as HTML table
|
|
35
35
|
movePieceForm: true, // display a form to move a piece (from, to, move)
|
|
36
|
-
|
|
36
|
+
piecesAsList: true, // display the pieces additionally as List
|
|
37
37
|
enableAnimations: true, // set to false to disable all animations
|
|
38
38
|
visuallyHidden: false // hide all those extra outputs visually but keep them accessible for screen readers and braille displays
|
|
39
39
|
}
|
|
@@ -1,3 +1,63 @@
|
|
|
1
|
-
body
|
|
1
|
+
body {
|
|
2
|
+
color: #fff;
|
|
3
|
+
background-color: #222;
|
|
4
|
+
padding: 20px;
|
|
5
|
+
margin: 0;
|
|
6
|
+
font-family: "Helvetica Neue", sans-serif;
|
|
7
|
+
line-height: 1.3;
|
|
8
|
+
font-size: 18px; }
|
|
9
|
+
body * {
|
|
10
|
+
font-size: 18px; }
|
|
11
|
+
|
|
12
|
+
a {
|
|
13
|
+
color: #516CD4; }
|
|
14
|
+
a:visited {
|
|
15
|
+
color: #929292; }
|
|
16
|
+
a:hover {
|
|
17
|
+
color: #E2FEDE; }
|
|
18
|
+
|
|
19
|
+
h1, h1 a {
|
|
20
|
+
margin-top: 0;
|
|
21
|
+
font-size: 39.6px;
|
|
22
|
+
color: #CD7338; }
|
|
23
|
+
|
|
24
|
+
h1 {
|
|
25
|
+
margin-bottom: 10px; }
|
|
26
|
+
|
|
27
|
+
h2 {
|
|
28
|
+
margin-bottom: 15px;
|
|
29
|
+
font-size: 25.2px;
|
|
30
|
+
color: #CD7338; }
|
|
31
|
+
|
|
32
|
+
pre {
|
|
33
|
+
font-family: "courier new", monospace;
|
|
34
|
+
font-size: 90%;
|
|
35
|
+
background-color: #111;
|
|
36
|
+
color: #eee;
|
|
37
|
+
padding: 5px;
|
|
38
|
+
overflow: auto; }
|
|
39
|
+
|
|
40
|
+
div.board {
|
|
41
|
+
float: left;
|
|
42
|
+
max-width: 500px;
|
|
43
|
+
width: calc(100vw - 40px);
|
|
44
|
+
margin-right: 20px;
|
|
45
|
+
margin-bottom: 20px; }
|
|
46
|
+
|
|
47
|
+
.clearfix::after {
|
|
48
|
+
content: "";
|
|
49
|
+
clear: both;
|
|
50
|
+
display: table; }
|
|
51
|
+
|
|
52
|
+
button {
|
|
53
|
+
padding: 4px 20px;
|
|
54
|
+
margin-right: 10px;
|
|
55
|
+
margin-bottom: 10px;
|
|
56
|
+
background-color: #999; }
|
|
57
|
+
button:hover {
|
|
58
|
+
background-color: #777; }
|
|
59
|
+
|
|
60
|
+
li {
|
|
61
|
+
padding: 0.05rem; }
|
|
2
62
|
|
|
3
63
|
/*# sourceMappingURL=examples.css.map */
|
|
@@ -5,5 +5,5 @@
|
|
|
5
5
|
"examples.scss"
|
|
6
6
|
],
|
|
7
7
|
"names": [],
|
|
8
|
-
"mappings": "AASA,AAAA,IAAI,
|
|
8
|
+
"mappings": "AASA,AAAA,IAAI,CAAC;EACH,KAAK,EAPG,IAAI;EAQZ,gBAAgB,EATL,IAAI;EAUf,OAAO,EAAE,IAAI;EACb,MAAM,EAAE,CAAC;EACT,WAAW,EAAE,4BAA4B;EACzC,WAAW,EAAE,GAAG;EAChB,SAAS,EATC,IAAI,GAcf;EAZD,AASE,IATE,CASF,CAAC,CAAC;IACA,SAAS,EAZD,IAAI,GAab;;AAGH,AAAA,CAAC,CAAC;EACA,KAAK,EAxBA,OAAO,GAiCb;EAVD,AAGE,CAHD,CAGG,OAAO,CAAC;IACR,KAAK,EAAE,OAAO,GACf;EALH,AAOE,CAPD,CAOG,KAAK,CAAC;IACN,KAAK,EA9BI,OAAO,GA+BjB;;AAGH,AAAA,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;EACP,UAAU,EAAE,CAAC;EACb,SAAS,EAAE,MAAgB;EAC3B,KAAK,EAlCE,OAAO,GAmCf;;AAED,AAAA,EAAE,CAAC;EACD,aAAa,EAAE,IAAI,GACpB;;AAED,AAAA,EAAE,CAAC;EACD,aAAa,EAAE,IAAI;EACnB,SAAS,EAAE,MAAgB;EAC3B,KAAK,EA5CE,OAAO,GA6Cf;;AAED,AAAA,GAAG,CAAC;EACF,WAAW,EAAE,wBAAwB;EACrC,SAAS,EAAE,GAAG;EACd,gBAAgB,EAjDA,IAAI;EAkDpB,KAAK,EAjDA,IAAI;EAkDT,OAAO,EAAE,GAAG;EACZ,QAAQ,EAAE,IAAI,GACf;;AAED,AAAA,GAAG,AAAA,MAAM,CAAC;EACR,KAAK,EAAE,IAAI;EACX,SAAS,EAAE,KAAK;EAChB,KAAK,EAAE,kBAAkB;EACzB,YAAY,EAAE,IAAI;EAClB,aAAa,EAAE,IAAI,GACpB;;AAED,AAAA,SAAS,EAAE,KAAK,CAAC;EACf,OAAO,EAAE,EAAE;EACX,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,KAAK,GACf;;AAED,AAAA,MAAM,CAAC;EACL,OAAO,EAAE,QAAQ;EACjB,YAAY,EAAE,IAAI;EAClB,aAAa,EAAE,IAAI;EACnB,gBAAgB,EAAE,IAAI,GAKvB;EATD,AAME,MANI,CAMF,KAAK,CAAC;IACN,gBAAgB,EAAE,IAAI,GACvB;;AAGH,AAAA,EAAE,CAAC;EACD,OAAO,EAAE,OAAO,GAEjB"
|
|
9
9
|
}
|
package/index.html
CHANGED
|
@@ -19,6 +19,7 @@ It works, it is cool and it is easy to use. 👍</p>
|
|
|
19
19
|
<ul>
|
|
20
20
|
<li><a href="examples/simple-boards.html">Simple chessboards, view only</a></li>
|
|
21
21
|
<li><a href="examples/responsive-board.html">Responsive chessboard</a></li>
|
|
22
|
+
<li><a href="examples/accessible-chessboard.html">All accessibility features turned on</a> 🆕</li>
|
|
22
23
|
<li><a href="examples/enable-input.html">Input enabled without validation</a></li>
|
|
23
24
|
<li><a href="examples/validate-moves.html">Input enabled, move validation with chess.js</a> 🥸</li>
|
|
24
25
|
<li><a href="examples/pieces-animation.html">Set different positions, with animation</a></li>
|
|
@@ -37,15 +38,18 @@ It works, it is cool and it is easy to use. 👍</p>
|
|
|
37
38
|
const board = new Chessboard(document.getElementById("board"), {
|
|
38
39
|
position: "start"
|
|
39
40
|
})
|
|
40
|
-
setInterval(() => {
|
|
41
|
+
const interval = setInterval(() => {
|
|
41
42
|
makeRandomMove()
|
|
42
43
|
board.setPosition(chess.fen(), true)
|
|
43
|
-
},
|
|
44
|
+
}, 1000)
|
|
44
45
|
function makeRandomMove() {
|
|
45
|
-
const possibleMoves = chess.moves()
|
|
46
|
-
if (possibleMoves.length === 0)
|
|
47
|
-
|
|
48
|
-
|
|
46
|
+
const possibleMoves = chess.moves()
|
|
47
|
+
if (possibleMoves.length === 0) {
|
|
48
|
+
clearInterval(interval)
|
|
49
|
+
return
|
|
50
|
+
}
|
|
51
|
+
const randomIndex = Math.floor(Math.random() * possibleMoves.length)
|
|
52
|
+
chess.move(possibleMoves[randomIndex])
|
|
49
53
|
}
|
|
50
54
|
</script>
|
|
51
55
|
<div class="clearfix"></div>
|
package/package.json
CHANGED
|
@@ -49,8 +49,9 @@ export class Chessboard {
|
|
|
49
49
|
let defaultProps = {
|
|
50
50
|
position: "empty", // set as fen, "start" or "empty"
|
|
51
51
|
orientation: COLOR.white, // white on bottom
|
|
52
|
-
responsive: true, //
|
|
52
|
+
responsive: true, // resize the board automatically to the size of the context element
|
|
53
53
|
animationDuration: 300, // pieces animation duration in milliseconds. Disable all animation with `0`.
|
|
54
|
+
language: navigator.language.substring(0,2).toLowerCase(), // supports "de" and "en" for now, used for pieces naming
|
|
54
55
|
style: {
|
|
55
56
|
cssClass: "default", // set the css theme of the board, try "green", "blue" or "chess-club"
|
|
56
57
|
showCoordinates: true, // show ranks and files
|
|
@@ -64,8 +65,7 @@ export class Chessboard {
|
|
|
64
65
|
size: 40, // the sprite tiles size, defaults to 40x40px
|
|
65
66
|
cache: true // cache the sprite
|
|
66
67
|
},
|
|
67
|
-
accessibility: {
|
|
68
|
-
brailleNotationInAlt: true, // show the braille notation of the game in the alt attribute of the svg
|
|
68
|
+
accessibility: {
|
|
69
69
|
movePieceForm: false, // display a form to move a piece (from, to, move)
|
|
70
70
|
boardAsTable: false, // display the board additionally as HTML table
|
|
71
71
|
piecesAsList: false, // display the pieces additionally as List
|
|
@@ -87,6 +87,9 @@ export class Chessboard {
|
|
|
87
87
|
if (props.accessibility) {
|
|
88
88
|
Object.assign(this.props.accessibility, props.accessibility)
|
|
89
89
|
}
|
|
90
|
+
if (this.props.language !== "de" && this.props.language !== "en") {
|
|
91
|
+
this.props.language = "en"
|
|
92
|
+
}
|
|
90
93
|
|
|
91
94
|
this.state = new ChessboardState()
|
|
92
95
|
this.view = new ChessboardViewAccessible(this)
|
|
@@ -36,10 +36,7 @@ export class ChessboardViewAccessible extends ChessboardView {
|
|
|
36
36
|
|
|
37
37
|
constructor(chessboard, callbackAfterCreation) {
|
|
38
38
|
super(chessboard, callbackAfterCreation)
|
|
39
|
-
this.lang =
|
|
40
|
-
if (this.lang !== "de" && this.lang !== "en") {
|
|
41
|
-
this.lang = "en"
|
|
42
|
-
}
|
|
39
|
+
this.lang = this.chessboard.props.language
|
|
43
40
|
this.translations = piecesTranslations
|
|
44
41
|
this.t = this.translations[this.lang]
|
|
45
42
|
this.th = hlTranslations[this.lang]
|
|
@@ -75,7 +72,6 @@ export class ChessboardViewAccessible extends ChessboardView {
|
|
|
75
72
|
})
|
|
76
73
|
this.chessboard.context.appendChild(this.movePieceFormContainer)
|
|
77
74
|
}
|
|
78
|
-
|
|
79
75
|
if (accessibilityProps.boardAsTable) {
|
|
80
76
|
this.boardAsTableContainer = this.createElement(`<div><h3>${this.th.board_as_table}</h3><div class="table"></div></div>`)
|
|
81
77
|
this.boardAsTable = this.boardAsTableContainer.querySelector(".table")
|
|
@@ -84,7 +80,7 @@ export class ChessboardViewAccessible extends ChessboardView {
|
|
|
84
80
|
this.boardAsTableContainer.classList.add("visually-hidden")
|
|
85
81
|
}
|
|
86
82
|
}
|
|
87
|
-
if (accessibilityProps.
|
|
83
|
+
if (accessibilityProps.piecesAsList) {
|
|
88
84
|
this.piecesListContainer = this.createElement(`<div><h3>${this.th.pieces_lists}</h3><div class="list"></div></div>`)
|
|
89
85
|
this.piecesList = this.piecesListContainer.querySelector(".list")
|
|
90
86
|
this.chessboard.context.appendChild(this.piecesListContainer)
|
|
@@ -117,6 +113,7 @@ export class ChessboardViewAccessible extends ChessboardView {
|
|
|
117
113
|
redrawPieces(squares = this.chessboard.state.position.squares) {
|
|
118
114
|
super.redrawPieces(squares)
|
|
119
115
|
setTimeout(() => {
|
|
116
|
+
this.redrawPositionInAltAttribute()
|
|
120
117
|
if (this.chessboard.props.accessibility.boardAsTable) {
|
|
121
118
|
this.redrawBoardAsTable()
|
|
122
119
|
}
|
|
@@ -126,6 +123,23 @@ export class ChessboardViewAccessible extends ChessboardView {
|
|
|
126
123
|
})
|
|
127
124
|
}
|
|
128
125
|
|
|
126
|
+
redrawPositionInAltAttribute() {
|
|
127
|
+
const pieces = this.chessboard.state.position.getPieces()
|
|
128
|
+
let listW = piecesTranslations[this.lang].colors.w.toUpperCase() + ":"
|
|
129
|
+
let listB = piecesTranslations[this.lang].colors.b.toUpperCase() + ":"
|
|
130
|
+
for (const piece of pieces) {
|
|
131
|
+
const pieceName = piece.name === "p" ? "" : piecesTranslations[this.lang].pieces[piece.name].toUpperCase()
|
|
132
|
+
if (piece.color === "w") {
|
|
133
|
+
listW += " " + pieceName + piece.position
|
|
134
|
+
} else {
|
|
135
|
+
listB += " " + pieceName + piece.position
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
const altText = `${listW}
|
|
139
|
+
${listB}`
|
|
140
|
+
this.chessboard.view.svg.setAttribute("alt", altText)
|
|
141
|
+
}
|
|
142
|
+
|
|
129
143
|
redrawPiecesLists() {
|
|
130
144
|
const pieces = this.chessboard.state.position.getPieces()
|
|
131
145
|
let listW = ""
|