cm-chessboard 8.9.1 → 8.10.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
CHANGED
|
@@ -20,8 +20,9 @@ functionality](https://shaack.com/projekte/cm-chessboard/examples/extensions/arr
|
|
|
20
20
|
|
|
21
21
|
The core of cm-chessboard is small, fast and reduced to the essentials. You can easily extend its functionality with extensions.
|
|
22
22
|
|
|
23
|
-
- [Markers Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/markers-extension.html)
|
|
24
|
-
- [
|
|
23
|
+
- [RightClickAnnotator](https://shaack.com/projekte/cm-chessboard/examples/extensions/right-click-annotator.html) ⇨ Uses [Markers Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/markers-extension.html) and [Arrows Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/arrows-extension.html) and adds the handling mouse events to draw them on the board.
|
|
24
|
+
- [Markers Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/markers-extension.html) ⇨ create markers on specific squares
|
|
25
|
+
- [Arrows Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/arrows-extension.html) ⇨ renders arrows on the chessboard
|
|
25
26
|
- [Accessibility Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/accessibility-extension.html) ⇨ makes the chessboard more accessible
|
|
26
27
|
- [PromotionDialog Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/promotion-dialog-extension.html) ⇨ shows a dialog to select the piece to promote to
|
|
27
28
|
|
|
@@ -12,8 +12,13 @@
|
|
|
12
12
|
<body>
|
|
13
13
|
<h1><a href="../..">cm-chessboard</a></h1>
|
|
14
14
|
<h2>Example: RightClickAnnotator extension</h2>
|
|
15
|
-
<
|
|
15
|
+
<ul>
|
|
16
|
+
<li>Right-click to toggle green markers</li>
|
|
17
|
+
<li>Right-click + drag to draw green arrows</li>
|
|
18
|
+
<li>Use Alt for blue, Shift for red, Shift+Alt for orange</li>
|
|
19
|
+
</ul>
|
|
16
20
|
<div class="board" id="board"></div>
|
|
21
|
+
<button id="removeAllButton">Remove all annotations</button>
|
|
17
22
|
<script type="module">
|
|
18
23
|
import {Chessboard} from "../../src/Chessboard.js"
|
|
19
24
|
import {FEN} from "../../src/model/Position.js"
|
|
@@ -24,6 +29,11 @@
|
|
|
24
29
|
assetsUrl: "../../assets/",
|
|
25
30
|
extensions: [{class: RightClickAnnotator}]
|
|
26
31
|
})
|
|
32
|
+
|
|
33
|
+
document.getElementById("removeAllButton").addEventListener("click", (event) => {
|
|
34
|
+
board.removeArrows()
|
|
35
|
+
board.removeMarkers()
|
|
36
|
+
})
|
|
27
37
|
</script>
|
|
28
38
|
</body>
|
|
29
39
|
</html>
|
package/index.html
CHANGED
|
@@ -9,31 +9,42 @@
|
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
11
11
|
<h1>cm-chessboard</h1>
|
|
12
|
-
<p
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
<
|
|
12
|
+
<p>A JavaScript chessboard which is</p>
|
|
13
|
+
<ul>
|
|
14
|
+
<li>lightweight and ES6 module based</li>
|
|
15
|
+
<li>responsive and SVG rendered</li>
|
|
16
|
+
<li><b>without dependencies</b> 🥳</li>
|
|
17
|
+
<li>tested and it works</li>
|
|
18
|
+
</ul>
|
|
19
|
+
|
|
20
|
+
<p>cm-chessboard is the chessboard of <b><a href="https://www.chessmail.de">chessmail.de</a></b> and is used every day by <b>thousands of players</b>.</p>
|
|
21
|
+
|
|
22
|
+
<p class="text-info">cm-chessboard is easy to use: <a href="https://github.com/shaack/cm-chessboard">Repository and documentation on GitHub</a></p>
|
|
16
23
|
<div>
|
|
17
24
|
<h2>Examples</h2>
|
|
18
25
|
<ul>
|
|
26
|
+
<li><a href="examples/extensions/right-click-annotator.html">Draw Arrows and Markers with right-click</a> 🆕🔥</li>
|
|
19
27
|
<li><a href="examples/simple-boards.html">Simple chessboards, view only</a></li>
|
|
20
28
|
<li><a href="examples/responsive-board.html">Responsive chessboard</a></li>
|
|
21
29
|
<li><a href="examples/enable-input.html">Input enabled without validation</a></li>
|
|
22
30
|
<li><a href="examples/validate-moves.html">Input enabled, with move validation and promotion dialog</a> 🔥</li>
|
|
23
31
|
<li><a href="examples/pieces-animation.html">Set different positions, with animation</a></li>
|
|
24
|
-
<li><a href="examples/extensions/markers-extension.html">Context input, mark squares and detect clicks on fields</a></li>
|
|
25
32
|
<li><a href="examples/different-styles.html">Different styles and piece sets</a> 🎨</li>
|
|
26
|
-
<li><a href="examples/pointer-events.html">Pointer events on squares</a> 🆕</li>
|
|
27
33
|
<li><a href="examples/destroy-many-boards.html">Stress test, 5000 boards created and destroyed</a> 🤓 👍</li>
|
|
28
34
|
</ul>
|
|
29
|
-
<h3>Examples
|
|
35
|
+
<h3>Examples for the shipped cm-chessboard extensions</h3>
|
|
30
36
|
<ul>
|
|
31
|
-
<li
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
+
<li>
|
|
38
|
+
Draw arrows and markers on the board with
|
|
39
|
+
<a href="examples/extensions/right-click-annotator.html">RightClickAnnotator extension</a> 🆕🔥
|
|
40
|
+
<ul>
|
|
41
|
+
<li><a href="examples/extensions/markers-extension.html">Markers extension</a></li>
|
|
42
|
+
<li><a href="examples/extensions/arrows-extension.html">Arrows extension</a></li>
|
|
43
|
+
</ul>
|
|
44
|
+
</li>
|
|
45
|
+
<li>Draw HTML over the board with <a href="examples/extensions/html-layer-extension.html">HTML Layer extension</a></li>
|
|
46
|
+
<li>Allow displaying a promotion dialog with <a href="examples/extensions/promotion-dialog-extension.html">PromotionDialog extension</a></li>
|
|
47
|
+
<li>Make the board accessible with screen-reader support with <a href="examples/extensions/accessibility-extension.html">Accessibility extension</a></li>
|
|
37
48
|
</ul>
|
|
38
49
|
</div>
|
|
39
50
|
<h2>Chessboard</h2>
|
package/package.json
CHANGED
|
@@ -28,6 +28,8 @@ export const MARKER_TYPE = {
|
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
export class RightClickAnnotator extends Extension {
|
|
31
|
+
|
|
32
|
+
/** @constructor */
|
|
31
33
|
constructor(chessboard, props = {}) {
|
|
32
34
|
super(chessboard)
|
|
33
35
|
this.props = props || {}
|
|
@@ -61,6 +63,32 @@ export class RightClickAnnotator extends Extension {
|
|
|
61
63
|
this.chessboard.context.removeEventListener("mouseup", this.onMouseUp)
|
|
62
64
|
this.chessboard.context.removeEventListener("mouseleave", this.onMouseUp)
|
|
63
65
|
})
|
|
66
|
+
|
|
67
|
+
// register public API
|
|
68
|
+
this.chessboard.getAnnotations = this.getAnnotations.bind(this.chessboard)
|
|
69
|
+
this.chessboard.setAnnotations = this.setAnnotations.bind(this.chessboard)
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
getAnnotations() {
|
|
73
|
+
return {
|
|
74
|
+
arrows: this.chessboard.getArrows(),
|
|
75
|
+
markers: this.chessboard.getMarkers()
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
setAnnotations(annotations) {
|
|
80
|
+
this.chessboard.removeArrows()
|
|
81
|
+
this.chessboard.removeMarkers()
|
|
82
|
+
if (annotations.arrows) {
|
|
83
|
+
for (const arrow of annotations.arrows) {
|
|
84
|
+
this.chessboard.addArrow(arrow.type, arrow.from, arrow.to)
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
if (annotations.markers) {
|
|
88
|
+
for (const marker of annotations.markers) {
|
|
89
|
+
this.chessboard.addMarker(marker.type, marker.square)
|
|
90
|
+
}
|
|
91
|
+
}
|
|
64
92
|
}
|
|
65
93
|
|
|
66
94
|
onContextMenu(event) {
|