cm-chessboard 4.3.6 → 4.4.0
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 +6 -5
- package/examples/accessible-chessboard.html +1 -1
- package/examples/test-getPiece.html +21 -0
- package/index.html +5 -2
- package/package.json +1 -1
- package/src/cm-chessboard/Chessboard.js +3 -2
- package/src/cm-chessboard/extensions/Accessibility.js +14 -9
- package/src/cm-chessboard/model/Extension.js +6 -4
- package/src/cm-chessboard/view/ChessboardView.js +5 -3
- package/src/cm-chessboard/view/VisualMoveInput.js +23 -17
package/README.md
CHANGED
|
@@ -337,7 +337,7 @@ and have access to the chessboard and can register extension points.
|
|
|
337
337
|
class MyCoolChessboardExtension extends Extension {
|
|
338
338
|
constructor(chessboard, props) {
|
|
339
339
|
super(chessboard, props)
|
|
340
|
-
this.registerExtensionPoint(EXTENSION_POINT.
|
|
340
|
+
this.registerExtensionPoint(EXTENSION_POINT.moveInput, (data) => {
|
|
341
341
|
// do something on move [start | cancel | done]
|
|
342
342
|
console.log(data)
|
|
343
343
|
})
|
|
@@ -349,10 +349,11 @@ Currently possible extension points are defined in `Extension.js`.
|
|
|
349
349
|
|
|
350
350
|
```js
|
|
351
351
|
export const EXTENSION_POINT = {
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
352
|
+
positionChanged: "positionChanged", // the positions of the pieces was changed
|
|
353
|
+
boardChanged: "boardChanged", // the board (orientation) was changed
|
|
354
|
+
moveInputToggled: "moveInputToggled", // move input was enabled or disabled
|
|
355
|
+
moveInput: "moveInput", // move started, cancelled or done
|
|
356
|
+
destroy: "destroy" // called, before the board is destroyed
|
|
356
357
|
}
|
|
357
358
|
```
|
|
358
359
|
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
import {Accessibility} from "../src/cm-chessboard/extensions/Accessibility.js"
|
|
34
34
|
|
|
35
35
|
const chessboard = new Chessboard(document.getElementById("board"), {
|
|
36
|
-
position: "
|
|
36
|
+
position: "rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR w Gkq - 4 11",
|
|
37
37
|
sprite: {url: "../assets/images/chessboard-sprite.svg"},
|
|
38
38
|
// animationDuration: 0, // optional, set to 0 to disable animations
|
|
39
39
|
style: {
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<link rel="stylesheet" href="../assets/styles/cm-chessboard.css">
|
|
5
|
+
<title>frame test</title>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
Board:
|
|
9
|
+
<div id="board"></div>
|
|
10
|
+
|
|
11
|
+
<script type="module">
|
|
12
|
+
import { Chessboard, MARKER_TYPE } from '../src/cm-chessboard/Chessboard.js'
|
|
13
|
+
|
|
14
|
+
const board = new Chessboard(document.getElementById('board'), {
|
|
15
|
+
position: 'start',
|
|
16
|
+
sprite: {url: '../assets/images/chessboard-sprite.svg'},
|
|
17
|
+
style: {borderType: 'frame'}
|
|
18
|
+
})
|
|
19
|
+
</script>
|
|
20
|
+
</body>
|
|
21
|
+
</html>
|
package/index.html
CHANGED
|
@@ -19,7 +19,6 @@ 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>
|
|
23
22
|
<li><a href="examples/enable-input.html">Input enabled without validation</a></li>
|
|
24
23
|
<li><a href="examples/validate-moves.html">Input enabled, move validation with chess.js</a> 🥸</li>
|
|
25
24
|
<li><a href="examples/pieces-animation.html">Set different positions, with animation</a></li>
|
|
@@ -28,6 +27,10 @@ It works, it is cool and it is easy to use. 👍</p>
|
|
|
28
27
|
<li><a href="examples/many-boards.html">100 boards, in one page</a></li>
|
|
29
28
|
<li><a href="examples/destroy-many-boards.html">Stress test, 5000 boards created and destroyed</a> 🤓 👍</li>
|
|
30
29
|
</ul>
|
|
30
|
+
<h3>Examples of extensions</h3>
|
|
31
|
+
<ul>
|
|
32
|
+
<li><a href="examples/accessible-chessboard.html">Accessibility extension</a> 🆕</li>
|
|
33
|
+
</ul>
|
|
31
34
|
</div>
|
|
32
35
|
<h2>Chessboard</h2>
|
|
33
36
|
<div class="board" id="board"></div>
|
|
@@ -53,7 +56,7 @@ It works, it is cool and it is easy to use. 👍</p>
|
|
|
53
56
|
}
|
|
54
57
|
</script>
|
|
55
58
|
<div class="clearfix"></div>
|
|
56
|
-
<h2>
|
|
59
|
+
<h2>Tests</h2>
|
|
57
60
|
<ul>
|
|
58
61
|
<li><a href="test/">Run the unit tests</a></li>
|
|
59
62
|
</ul>
|
package/package.json
CHANGED
|
@@ -87,6 +87,7 @@ export class Chessboard {
|
|
|
87
87
|
this.props.language = "en"
|
|
88
88
|
}
|
|
89
89
|
|
|
90
|
+
this.moveTask = Promise.resolve()
|
|
90
91
|
this.state = new ChessboardState()
|
|
91
92
|
this.view = new ChessboardView(this)
|
|
92
93
|
this.positionAnimationsQueue = new PositionAnimationsQueue(this)
|
|
@@ -96,7 +97,7 @@ export class Chessboard {
|
|
|
96
97
|
this.view.redrawPieces()
|
|
97
98
|
// instantiate extensions
|
|
98
99
|
for (const extensionData of this.props.extensions) {
|
|
99
|
-
new extensionData.class(this, extensionData.props)
|
|
100
|
+
this.extensions.push(new extensionData.class(this, extensionData.props))
|
|
100
101
|
}
|
|
101
102
|
}
|
|
102
103
|
|
|
@@ -130,9 +131,9 @@ export class Chessboard {
|
|
|
130
131
|
return
|
|
131
132
|
}
|
|
132
133
|
this.boardTurning = true
|
|
133
|
-
this.state.invokeExtensionPoints(EXTENSION_POINT.boardChanged)
|
|
134
134
|
return this.positionAnimationsQueue.enqueueTurnBoard(position, color, animated).then(() => {
|
|
135
135
|
this.boardTurning = false
|
|
136
|
+
this.state.invokeExtensionPoints(EXTENSION_POINT.boardChanged)
|
|
136
137
|
})
|
|
137
138
|
}
|
|
138
139
|
|
|
@@ -94,7 +94,10 @@ export class Accessibility extends Extension {
|
|
|
94
94
|
this.piecesListContainer.classList.add("visually-hidden")
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
|
-
this.registerExtensionPoint(EXTENSION_POINT.
|
|
97
|
+
this.registerExtensionPoint(EXTENSION_POINT.moveInput, () => {
|
|
98
|
+
this.updateFormInputs()
|
|
99
|
+
})
|
|
100
|
+
this.registerExtensionPoint(EXTENSION_POINT.moveInputToggled, () => {
|
|
98
101
|
this.updateFormInputs()
|
|
99
102
|
})
|
|
100
103
|
this.registerExtensionPoint(EXTENSION_POINT.positionChanged, () => {
|
|
@@ -108,17 +111,19 @@ export class Accessibility extends Extension {
|
|
|
108
111
|
}
|
|
109
112
|
}
|
|
110
113
|
})
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
this.redrawPositionInAltAttribute()
|
|
114
|
+
this.registerExtensionPoint(EXTENSION_POINT.boardChanged, () => {
|
|
115
|
+
console.log("EXTENSION_POINT.boardChanged")
|
|
114
116
|
if (this.props.boardAsTable) {
|
|
115
117
|
this.redrawBoardAsTable()
|
|
116
118
|
}
|
|
117
|
-
if (this.props.piecesAsList) {
|
|
118
|
-
this.redrawPiecesLists()
|
|
119
|
-
}
|
|
120
|
-
|
|
121
119
|
})
|
|
120
|
+
this.redrawPositionInAltAttribute()
|
|
121
|
+
if (this.props.boardAsTable) {
|
|
122
|
+
this.redrawBoardAsTable()
|
|
123
|
+
}
|
|
124
|
+
if (this.props.piecesAsList) {
|
|
125
|
+
this.redrawPiecesLists()
|
|
126
|
+
}
|
|
122
127
|
}
|
|
123
128
|
|
|
124
129
|
updateFormInputs() {
|
|
@@ -173,7 +178,7 @@ ${listB}`
|
|
|
173
178
|
redrawBoardAsTable() {
|
|
174
179
|
const squares = this.chessboard.state.position.squares.slice()
|
|
175
180
|
const ranks = ["a", "b", "c", "d", "e", "f", "g", "h"]
|
|
176
|
-
const files = ["
|
|
181
|
+
const files = ["8", "7", "6", "5", "4", "3", "2", "1"]
|
|
177
182
|
if (this.chessboard.state.orientation === COLOR.black) {
|
|
178
183
|
ranks.reverse()
|
|
179
184
|
files.reverse()
|
|
@@ -5,10 +5,12 @@
|
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
7
|
export const EXTENSION_POINT = {
|
|
8
|
-
positionChanged: "positionChanged",
|
|
9
|
-
boardChanged: "boardChanged",
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
positionChanged: "positionChanged", // the positions of the pieces was changed
|
|
9
|
+
boardChanged: "boardChanged", // the board (orientation) was changed
|
|
10
|
+
moveInputToggled: "moveInputToggled", // move input was enabled or disabled
|
|
11
|
+
moveInput: "moveInput", // move started, cancelled or done
|
|
12
|
+
moveInputStateChanged: "moveInput", // TODO deprecated, use `moveInput`
|
|
13
|
+
destroy: "destroy" // called, before the board is destroyed
|
|
12
14
|
}
|
|
13
15
|
|
|
14
16
|
export class Extension {
|
|
@@ -370,6 +370,7 @@ export class ChessboardView {
|
|
|
370
370
|
}
|
|
371
371
|
this.chessboard.state.inputEnabled = true
|
|
372
372
|
this.moveInputCallback = eventHandler
|
|
373
|
+
this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInputToggled, {enabled: true, color: color})
|
|
373
374
|
this.visualizeInputState()
|
|
374
375
|
}
|
|
375
376
|
|
|
@@ -378,6 +379,7 @@ export class ChessboardView {
|
|
|
378
379
|
this.chessboard.state.inputBlackEnabled = false
|
|
379
380
|
this.chessboard.state.inputEnabled = false
|
|
380
381
|
this.moveInputCallback = undefined
|
|
382
|
+
this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInputToggled, {enabled: false})
|
|
381
383
|
this.visualizeInputState()
|
|
382
384
|
}
|
|
383
385
|
|
|
@@ -389,7 +391,7 @@ export class ChessboardView {
|
|
|
389
391
|
type: INPUT_EVENT_TYPE.moveStart,
|
|
390
392
|
square: square
|
|
391
393
|
}
|
|
392
|
-
this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.
|
|
394
|
+
this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
|
|
393
395
|
if (this.moveInputCallback) {
|
|
394
396
|
return this.moveInputCallback(data)
|
|
395
397
|
} else {
|
|
@@ -404,7 +406,7 @@ export class ChessboardView {
|
|
|
404
406
|
squareFrom: squareFrom,
|
|
405
407
|
squareTo: squareTo
|
|
406
408
|
}
|
|
407
|
-
this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.
|
|
409
|
+
this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
|
|
408
410
|
if (this.moveInputCallback) {
|
|
409
411
|
return this.moveInputCallback(data)
|
|
410
412
|
} else {
|
|
@@ -420,7 +422,7 @@ export class ChessboardView {
|
|
|
420
422
|
squareFrom: squareFrom,
|
|
421
423
|
squareTo: squareTo
|
|
422
424
|
}
|
|
423
|
-
this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.
|
|
425
|
+
this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
|
|
424
426
|
if (this.moveInputCallback) {
|
|
425
427
|
this.moveInputCallback(data)
|
|
426
428
|
}
|
|
@@ -31,9 +31,15 @@ export class VisualMoveInput {
|
|
|
31
31
|
constructor(view, moveStartCallback, moveDoneCallback, moveCanceledCallback) {
|
|
32
32
|
this.view = view
|
|
33
33
|
this.chessboard = view.chessboard
|
|
34
|
-
this.moveStartCallback =
|
|
35
|
-
|
|
36
|
-
|
|
34
|
+
this.moveStartCallback = (square) => {
|
|
35
|
+
return moveStartCallback(square)
|
|
36
|
+
}
|
|
37
|
+
this.moveDoneCallback = (fromSquare, toSquare) => {
|
|
38
|
+
return moveDoneCallback(fromSquare, toSquare)
|
|
39
|
+
}
|
|
40
|
+
this.moveCanceledCallback = (reason, fromSquare, toSquare) => {
|
|
41
|
+
moveCanceledCallback(reason, fromSquare, toSquare)
|
|
42
|
+
}
|
|
37
43
|
this.setMoveInputState(STATE.waitForInputStart)
|
|
38
44
|
}
|
|
39
45
|
|
|
@@ -138,7 +144,7 @@ export class VisualMoveInput {
|
|
|
138
144
|
}
|
|
139
145
|
this.toSquare = params.square
|
|
140
146
|
if (this.toSquare && this.moveDoneCallback(this.fromSquare, this.toSquare)) {
|
|
141
|
-
if(prevState === STATE.clickTo) {
|
|
147
|
+
if (prevState === STATE.clickTo) {
|
|
142
148
|
this.chessboard.movePiece(this.fromSquare, this.toSquare, true).then(() => {
|
|
143
149
|
this.setMoveInputState(STATE.reset)
|
|
144
150
|
})
|
|
@@ -211,18 +217,18 @@ export class VisualMoveInput {
|
|
|
211
217
|
onPointerDown(e) {
|
|
212
218
|
if (e.type === "mousedown" && e.button === 0 || e.type === "touchstart") {
|
|
213
219
|
const square = e.target.getAttribute("data-square")
|
|
214
|
-
const pieceName = this.chessboard.getPiece(square)
|
|
215
|
-
// console.log("onPointerDown", square, pieceName)
|
|
216
|
-
let color
|
|
217
|
-
if (pieceName) {
|
|
218
|
-
color = pieceName ? pieceName.substring(0, 1) : undefined
|
|
219
|
-
// allow scrolling, if not pointed on draggable piece
|
|
220
|
-
if (color === "w" && this.chessboard.state.inputWhiteEnabled ||
|
|
221
|
-
color === "b" && this.chessboard.state.inputBlackEnabled) {
|
|
222
|
-
e.preventDefault()
|
|
223
|
-
}
|
|
224
|
-
}
|
|
225
220
|
if (square) { // pointer on square
|
|
221
|
+
const pieceName = this.chessboard.getPiece(square)
|
|
222
|
+
// console.log("onPointerDown", square, pieceName)
|
|
223
|
+
let color
|
|
224
|
+
if (pieceName) {
|
|
225
|
+
color = pieceName ? pieceName.substring(0, 1) : undefined
|
|
226
|
+
// allow scrolling, if not pointed on draggable piece
|
|
227
|
+
if (color === "w" && this.chessboard.state.inputWhiteEnabled ||
|
|
228
|
+
color === "b" && this.chessboard.state.inputBlackEnabled) {
|
|
229
|
+
e.preventDefault()
|
|
230
|
+
}
|
|
231
|
+
}
|
|
226
232
|
if (this.moveInputState !== STATE.waitForInputStart ||
|
|
227
233
|
this.chessboard.state.inputWhiteEnabled && color === "w" ||
|
|
228
234
|
this.chessboard.state.inputBlackEnabled && color === "b") {
|
|
@@ -365,10 +371,10 @@ export class VisualMoveInput {
|
|
|
365
371
|
}
|
|
366
372
|
|
|
367
373
|
updateStartEndMarkers() {
|
|
368
|
-
if(this.chessboard.props.style.moveFromMarker) {
|
|
374
|
+
if (this.chessboard.props.style.moveFromMarker) {
|
|
369
375
|
this.chessboard.state.removeMarkers(undefined, this.chessboard.props.style.moveFromMarker)
|
|
370
376
|
}
|
|
371
|
-
if(this.chessboard.props.style.moveToMarker) {
|
|
377
|
+
if (this.chessboard.props.style.moveToMarker) {
|
|
372
378
|
this.chessboard.state.removeMarkers(undefined, this.chessboard.props.style.moveToMarker)
|
|
373
379
|
}
|
|
374
380
|
if (this.chessboard.props.style.moveFromMarker) {
|