cm-chessboard 4.3.2 → 4.3.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/README.md +42 -27
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -85,25 +85,25 @@ Below is the default configuration
|
|
|
85
85
|
|
|
86
86
|
```javascript
|
|
87
87
|
let defaultProps = {
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
88
|
+
position: "empty", // set as fen, "start" or "empty"
|
|
89
|
+
orientation: COLOR.white, // white on bottom
|
|
90
|
+
responsive: true, // resize the board automatically to the size of the context element
|
|
91
|
+
animationDuration: 300, // pieces animation duration in milliseconds. Disable all animation with `0`.
|
|
92
|
+
language: navigator.language.substring(0, 2).toLowerCase(), // supports "de" and "en" for now, used for pieces naming
|
|
93
|
+
style: {
|
|
94
|
+
cssClass: "default", // set the css theme of the board, try "green", "blue" or "chess-club"
|
|
95
|
+
showCoordinates: true, // show ranks and files
|
|
96
|
+
borderType: BORDER_TYPE.none, // "thin" thin border, "frame" wide border with coordinates in it, "none" no border
|
|
97
|
+
aspectRatio: 1, // height/width of the board
|
|
98
|
+
moveFromMarker: MARKER_TYPE.frame, // the marker used to mark the start square
|
|
99
|
+
moveToMarker: MARKER_TYPE.frame, // the marker used to mark the square where the figure is moving to
|
|
100
|
+
},
|
|
101
|
+
sprite: {
|
|
102
|
+
url: "./assets/images/chessboard-sprite.svg", // pieces and markers are stored in a sprite file
|
|
103
|
+
size: 40, // the sprite tiles size, defaults to 40x40px
|
|
104
|
+
cache: true // cache the sprite
|
|
105
|
+
},
|
|
106
|
+
extensions: [ /* {class: ExtensionClass, props: { ... }} */] // add extensions here
|
|
107
107
|
}
|
|
108
108
|
```
|
|
109
109
|
|
|
@@ -336,24 +336,39 @@ cm-chessboard provides the ability to extend its functionality with extensions.
|
|
|
336
336
|
and have access to the chessboard and can register extension points.
|
|
337
337
|
|
|
338
338
|
```js
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
339
|
+
class MyCoolChessboardExtension extends Extension {
|
|
340
|
+
constructor(chessboard, props) {
|
|
341
|
+
super(chessboard, props)
|
|
342
|
+
this.registerExtensionPoint(EXTENSION_POINT.moveInputStateChanged, (data) => {
|
|
343
|
+
// do something on move [start | cancel | done]
|
|
344
|
+
console.log(data)
|
|
345
|
+
})
|
|
346
|
+
}
|
|
347
|
+
}
|
|
343
348
|
```
|
|
344
349
|
|
|
345
|
-
|
|
350
|
+
Currently possible extension points are defined in `Extension.js`.
|
|
351
|
+
|
|
352
|
+
```js
|
|
353
|
+
export const EXTENSION_POINT = {
|
|
354
|
+
positionChanged: "positionChanged",
|
|
355
|
+
boardChanged: "boardChanged",
|
|
356
|
+
moveInputStateChanged: "moveInputStateChanged",
|
|
357
|
+
destroy: "destroy"
|
|
358
|
+
}
|
|
359
|
+
```
|
|
360
|
+
|
|
361
|
+
Enable extensions via the chessboard props.
|
|
346
362
|
|
|
347
363
|
```js
|
|
348
364
|
const chessboard = new Chessboard(document.getElementById("board"), {
|
|
349
365
|
position: "start",
|
|
350
366
|
extensions: // list of used extensions
|
|
351
367
|
[{
|
|
352
|
-
class:
|
|
368
|
+
class: MyCoolChessboardExtension, // this class of the extension
|
|
353
369
|
props: {
|
|
354
|
-
// configure
|
|
370
|
+
// configure the extension here
|
|
355
371
|
}
|
|
356
|
-
|
|
357
372
|
}]
|
|
358
373
|
})
|
|
359
374
|
```
|