cm-chessboard 4.1.1 → 4.1.4
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 +25 -25
- 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 +11 -8
- package/src/cm-chessboard/{core/State.js → model/ChessboardState.js} +1 -1
- package/src/cm-chessboard/{core → model}/Position.js +0 -0
- package/src/cm-chessboard/{core/View.js → view/ChessboardView.js} +4 -4
- package/src/cm-chessboard/{core/ViewAccessible.js → view/ChessboardViewAccessible.js} +23 -9
- package/src/cm-chessboard/{core → view}/PositionAnimationsQueue.js +2 -2
- package/src/cm-chessboard/{core/MoveInput.js → view/VisualMoveInput.js} +2 -2
- package/test/TestPiecesAnimation.js +4 -4
- package/test/TestPosition.js +1 -1
package/README.md
CHANGED
|
@@ -33,7 +33,7 @@ aspects of chess games.
|
|
|
33
33
|
|
|
34
34
|
**Option 2:** Download the code from [GitHub](https://github.com/shaack/cm-chessboard).
|
|
35
35
|
|
|
36
|
-
**Option 3:** Use it via CDN https://cdn.jsdelivr.net/npm/cm-chessboard@
|
|
36
|
+
**Option 3:** Use it via CDN https://cdn.jsdelivr.net/npm/cm-chessboard@4.1/src/cm-chessboard/Chessboard.js
|
|
37
37
|
|
|
38
38
|
After installation, copy the sprite in `cm-chessboard/assets/images/` to your projects `assets/images/`
|
|
39
39
|
folder. If you put the sprite somewhere else you have to configure the location
|
|
@@ -83,30 +83,30 @@ Below is the default configuration
|
|
|
83
83
|
|
|
84
84
|
```javascript
|
|
85
85
|
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
|
-
|
|
86
|
+
position: "empty", // set as fen, "start" or "empty"
|
|
87
|
+
orientation: COLOR.white, // white on bottom
|
|
88
|
+
responsive: true, // resizes the board based on element size
|
|
89
|
+
animationDuration: 300, // pieces animation duration in milliseconds. Disable all animation with `0`.
|
|
90
|
+
language: navigator.language.substring(0,2).toLowerCase(), // supports "de" and "en" for now, used for pieces naming
|
|
91
|
+
style: {
|
|
92
|
+
cssClass: "default", // set the css theme of the board, try "green", "blue" or "chess-club"
|
|
93
|
+
showCoordinates: true, // show ranks and files
|
|
94
|
+
borderType: BORDER_TYPE.none, // "thin" thin border, "frame" wide border with coordinates in it, "none" no border
|
|
95
|
+
aspectRatio: 1, // height/width of the board
|
|
96
|
+
moveFromMarker: MARKER_TYPE.frame, // the marker used to mark the start square
|
|
97
|
+
moveToMarker: MARKER_TYPE.frame, // the marker used to mark the square where the figure is moving to
|
|
98
|
+
},
|
|
99
|
+
sprite: {
|
|
100
|
+
url: "./assets/images/chessboard-sprite.svg", // pieces and markers are stored in a sprite file
|
|
101
|
+
size: 40, // the sprite tiles size, defaults to 40x40px
|
|
102
|
+
cache: true // cache the sprite
|
|
103
|
+
},
|
|
104
|
+
accessibility: {
|
|
105
|
+
movePieceForm: false, // display a form to move a piece (from, to, move)
|
|
106
|
+
boardAsTable: false, // display the board additionally as HTML table
|
|
107
|
+
piecesAsList: false, // display the pieces additionally as List
|
|
108
|
+
visuallyHidden: true // hide all those extra outputs visually but keep them accessible for screen readers and braille displays
|
|
109
|
+
}
|
|
110
110
|
}
|
|
111
111
|
```
|
|
112
112
|
|
|
@@ -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
|
@@ -4,10 +4,10 @@
|
|
|
4
4
|
* License: MIT, see file 'LICENSE'
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
7
|
+
import {ChessboardState} from "./model/ChessboardState.js"
|
|
8
|
+
import {Position} from "./model/Position.js"
|
|
9
|
+
import {ChessboardViewAccessible} from "./view/ChessboardViewAccessible.js"
|
|
10
|
+
import {PositionAnimationsQueue} from "./view/PositionAnimationsQueue.js"
|
|
11
11
|
|
|
12
12
|
export const COLOR = {
|
|
13
13
|
white: "w",
|
|
@@ -51,6 +51,7 @@ export class Chessboard {
|
|
|
51
51
|
orientation: COLOR.white, // white on bottom
|
|
52
52
|
responsive: true, // resizes the board based on element size
|
|
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,9 +87,12 @@ 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
|
-
this.state = new
|
|
92
|
-
this.view = new
|
|
94
|
+
this.state = new ChessboardState()
|
|
95
|
+
this.view = new ChessboardViewAccessible(this)
|
|
93
96
|
this.positionAnimationsQueue = new PositionAnimationsQueue(this)
|
|
94
97
|
this.state.orientation = this.props.orientation
|
|
95
98
|
this.view.redraw()
|
|
File without changes
|
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
* License: MIT, see file 'LICENSE'
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
|
-
import {
|
|
7
|
+
import {VisualMoveInput} from "./VisualMoveInput.js"
|
|
8
8
|
import {COLOR, INPUT_EVENT_TYPE, BORDER_TYPE} from "../Chessboard.js"
|
|
9
|
-
import {Position} from "
|
|
9
|
+
import {Position} from "../model/Position.js"
|
|
10
10
|
|
|
11
11
|
export const piecesTranslations = {
|
|
12
12
|
en: {
|
|
@@ -47,11 +47,11 @@ export function renderPieceTitle(lang, name, color = undefined) {
|
|
|
47
47
|
return title
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
-
export class
|
|
50
|
+
export class ChessboardView {
|
|
51
51
|
|
|
52
52
|
constructor(chessboard) {
|
|
53
53
|
this.chessboard = chessboard
|
|
54
|
-
this.moveInput = new
|
|
54
|
+
this.moveInput = new VisualMoveInput(this,
|
|
55
55
|
this.moveStartCallback.bind(this),
|
|
56
56
|
this.moveDoneCallback.bind(this),
|
|
57
57
|
this.moveCanceledCallback.bind(this)
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
* Repository: https://github.com/shaack/cm-chessboard
|
|
4
4
|
* License: MIT, see file 'LICENSE'
|
|
5
5
|
*/
|
|
6
|
-
import {
|
|
6
|
+
import {ChessboardView, renderPieceTitle} from "./ChessboardView.js"
|
|
7
7
|
import {COLOR, INPUT_EVENT_TYPE} from "../Chessboard.js"
|
|
8
|
-
import {piecesTranslations} from "./
|
|
8
|
+
import {piecesTranslations} from "./ChessboardView.js"
|
|
9
9
|
|
|
10
10
|
const hlTranslations = {
|
|
11
11
|
de: {
|
|
@@ -32,14 +32,11 @@ const hlTranslations = {
|
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
export class
|
|
35
|
+
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 ViewAccessible extends View {
|
|
|
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 ViewAccessible extends View {
|
|
|
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 ViewAccessible extends View {
|
|
|
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 ViewAccessible extends View {
|
|
|
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 = ""
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
* Repository: https://github.com/shaack/cm-chessboard
|
|
4
4
|
* License: MIT, see file 'LICENSE'
|
|
5
5
|
*/
|
|
6
|
-
import {FEN_EMPTY_POSITION, Position} from "
|
|
7
|
-
import {Svg} from "./
|
|
6
|
+
import {FEN_EMPTY_POSITION, Position} from "../model/Position.js"
|
|
7
|
+
import {Svg} from "./ChessboardView.js"
|
|
8
8
|
|
|
9
9
|
/*
|
|
10
10
|
* Thanks to markosyan for the idea to the PromiseQueue
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* License: MIT, see file 'LICENSE'
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
|
-
import {Svg} from "./
|
|
7
|
+
import {Svg} from "./ChessboardView.js"
|
|
8
8
|
|
|
9
9
|
const STATE = {
|
|
10
10
|
waitForInputStart: 0,
|
|
@@ -26,7 +26,7 @@ export const MOVE_CANCELED_REASON = {
|
|
|
26
26
|
|
|
27
27
|
const DRAG_THRESHOLD = 4
|
|
28
28
|
|
|
29
|
-
export class
|
|
29
|
+
export class VisualMoveInput {
|
|
30
30
|
|
|
31
31
|
constructor(view, moveStartCallback, moveDoneCallback, moveCanceledCallback) {
|
|
32
32
|
this.view = view
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
7
|
import {describe, it, assert} from "../node_modules/teevi/src/teevi.js"
|
|
8
|
-
import {
|
|
9
|
-
import {PositionsAnimation} from "../src/cm-chessboard/
|
|
8
|
+
import {ChessboardState} from "../src/cm-chessboard/model/ChessboardState.js"
|
|
9
|
+
import {PositionsAnimation} from "../src/cm-chessboard/view/PositionAnimationsQueue.js"
|
|
10
10
|
|
|
11
11
|
describe("TestPiecesAnimation", () => {
|
|
12
12
|
it("should calculate square distances", () => {
|
|
@@ -21,9 +21,9 @@ describe("TestPiecesAnimation", () => {
|
|
|
21
21
|
})
|
|
22
22
|
|
|
23
23
|
it("should seek changes", () => {
|
|
24
|
-
const state1 = new
|
|
24
|
+
const state1 = new ChessboardState()
|
|
25
25
|
state1.setPosition("rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR")
|
|
26
|
-
const state2 = new
|
|
26
|
+
const state2 = new ChessboardState()
|
|
27
27
|
state2.setPosition("rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR")
|
|
28
28
|
const previousBoard1 = state1.position.squares
|
|
29
29
|
const newBoard1 = state2.position.squares
|
package/test/TestPosition.js
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
7
|
import {describe, it, assert} from "../node_modules/teevi/src/teevi.js"
|
|
8
|
-
import {Position} from "../src/cm-chessboard/
|
|
8
|
+
import {Position} from "../src/cm-chessboard/model/Position.js"
|
|
9
9
|
|
|
10
10
|
describe("TestPosition", () => {
|
|
11
11
|
it("should convert square to index", () => {
|