cm-chessboard 5.1.0 → 5.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 +7 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -14,8 +14,7 @@ aspects of chess games.
|
|
|
14
14
|
- [Can handle moves input via click or drag](https://shaack.com/projekte/cm-chessboard/examples/validate-moves.html)
|
|
15
15
|
- [Styleable via css and supports multiple piece sets](https://shaack.com/projekte/cm-chessboard/examples/different-styles.html)
|
|
16
16
|
- Uses SVG for rendering
|
|
17
|
-
- [Allows adding **
|
|
18
|
-
extensions** to extend the functionality](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-arrows-extension.html)
|
|
17
|
+
- [Allows adding **extensions** to extend the functionality](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-arrows-extension.html)
|
|
19
18
|
|
|
20
19
|
## Extensions 🆕
|
|
21
20
|
|
|
@@ -283,7 +282,7 @@ Example: The markerCircle is defined in the SVG like this.
|
|
|
283
282
|
It's a circle with the radius 18 and its center at 20/20.
|
|
284
283
|
|
|
285
284
|
Important is the id "markerCircle". You can set the marker
|
|
286
|
-
with `board.addMarker(
|
|
285
|
+
with `board.addMarker({class: "markerSquare", slice: "markerSquare"}, "e4")`
|
|
287
286
|
"emphasize" is the css class, which defines the color and opacity of the marker. "slice" is the id of the marker in the
|
|
288
287
|
SVG. This is
|
|
289
288
|
also demonstrated in the [mark squares example](https://shaack.com/projekte/cm-chessboard/examples/input-callbacks.html)
|
|
@@ -310,18 +309,18 @@ marker.markerCircleRed {
|
|
|
310
309
|
So you can simply add a marker with the id `myMarkerIdInSvg` to the SVG, and add the class `myMarkerCssClass` to the
|
|
311
310
|
css. Then you can show it on the field "e4" with
|
|
312
311
|
|
|
313
|
-
`addMarker(
|
|
312
|
+
`addMarker({class: "myMarkerCssClass", slice: "myMarkerIdInSvg"}, "e4")`
|
|
314
313
|
|
|
315
314
|
To allow easy removing of the marker, you have to define the marker type in your code.
|
|
316
315
|
|
|
317
316
|
```js
|
|
318
317
|
const myMarkerType = {class: "myMarkerCssClass", slice: "myMarkerIdInSvg"}
|
|
319
318
|
// add
|
|
320
|
-
chessboard.addMarker("e4"
|
|
319
|
+
chessboard.addMarker(myMarkerType, "e4")
|
|
321
320
|
// remove
|
|
322
|
-
chessboard.removeMarkers("e4"
|
|
321
|
+
chessboard.removeMarkers(myMarkerType, "e4")
|
|
323
322
|
// remove all "myMarkerType"
|
|
324
|
-
chessboard.removeMarkers(
|
|
323
|
+
chessboard.removeMarkers(myMarkerType, undefined)
|
|
325
324
|
```
|
|
326
325
|
|
|
327
326
|
## Extensions
|
|
@@ -373,7 +372,7 @@ const chessboard = new Chessboard(document.getElementById("board"), {
|
|
|
373
372
|
### registerMethod(name, callback)
|
|
374
373
|
|
|
375
374
|
Add methods to the main chessboard from your extension with `this.registerMethod("name", callback)`
|
|
376
|
-
like `addArrow(
|
|
375
|
+
like `addArrow(type, rom, to)` in the
|
|
377
376
|
[Arrows extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-arrows-extension.html).
|
|
378
377
|
|
|
379
378
|
```js
|