cm-chessboard 6.0.2 → 6.0.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.
Files changed (8) hide show
  1. package/README.md +11 -9
  2. package/examples/extensions/chessboard-render-video-extension.html +2 -1
  3. package/examples/input-callbacks.html +0 -4
  4. package/package.json +2 -2
  5. package/src/cm-chessboard/extensions/arrows/Arrows.js +1 -1
  6. package/src/cm-chessboard/extensions/markers/Markers.js +119 -114
  7. package/src/cm-chessboard/view/PositionAnimationsQueue.js +3 -0
  8. package/test/TestMarkers.js +4 -2
package/README.md CHANGED
@@ -8,7 +8,7 @@ in [chess-console](https://shaack.com/projekte/chess-console/examples/load-pgn.h
8
8
  [cm-fen-editor](https://shaack.com/projekte/cm-fen-editor/). They are all nice written ES6 Modules to handle different
9
9
  aspects of chess games.
10
10
 
11
- > Note: With Version 6 **markers** have been moves to an extension, see the [Input callbacks example](https://shaack.com/projekte/cm-chessboard/examples/input-callbacks.html).
11
+ > Note: With Version 6 **markers** have been moved to an extension, see the [Input callbacks example](https://shaack.com/projekte/cm-chessboard/examples/input-callbacks.html).
12
12
 
13
13
  ## Features
14
14
 
@@ -20,11 +20,13 @@ aspects of chess games.
20
20
 
21
21
  ## Extensions
22
22
 
23
- - [Accessibility Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-accessibility-extension.html)
24
- - [Arrows Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-arrows-extension.html)
25
- - [Markers Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-markers-extension.html) 🆕
26
- - [PromotionDialog Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-promotion-dialog-extension.html)
27
- - [RenderVideo](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-render-video-extension.html) 🆕
23
+ The core of cm-chessboard is small, fast and reduced to the essentials. You can extend its functionality with extensions.
24
+
25
+ - [Accessibility Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-accessibility-extension.html) - makes the chessboard more accessible
26
+ - [Arrows Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-arrows-extension.html) - renders arrows on the chessboard
27
+ - [Markers Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-markers-extension.html) 🆕 - create markers on specific squares
28
+ - [PromotionDialog Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-promotion-dialog-extension.html) - shows a dialog to select the piece to promote to
29
+ - [RenderVideo Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-render-video-extension.html) 🆕 - renders a video from the pieces movement on the board
28
30
 
29
31
  ## Demo and repository
30
32
 
@@ -137,7 +139,7 @@ Returns the board position as `fen`.
137
139
 
138
140
  ### addMarker(type, square)
139
141
 
140
- > signature changed with V5.1 from (square, type) to (type, square)
142
+ > Moved to the Markers extension with version 6
141
143
 
142
144
  Adds a marker on a square.
143
145
 
@@ -156,7 +158,7 @@ below.
156
158
 
157
159
  ### getMarkers(type = undefined, square = undefined)
158
160
 
159
- > signature changed with V5.1 from (square, type) to (type, square)
161
+ > Moved to the Markers extension with version 6
160
162
 
161
163
  Returns the board's markers as an array.
162
164
 
@@ -166,7 +168,7 @@ Set `both` to `undefined` to get all markers on the board.
166
168
 
167
169
  ### removeMarkers(type = undefined, square = undefined)
168
170
 
169
- > signature changed with V5.1 from (square, type) to (type, square)
171
+ > Moved to the Markers extension with version 6
170
172
 
171
173
  Removes markers from the board.
172
174
 
package/examples/extensions/chessboard-render-video-extension.html CHANGED
@@ -10,7 +10,8 @@
10
10
  <body>
11
11
  <h1><a href="../..">cm-chessboard</a></h1>
12
12
  <h2>Example: RenderVideo extension</h2>
13
- <p>Works best in Chrome with webm format.</p>
13
+ <p>With this extension you can render a video from the pieces movement on the board.</p>
14
+ <p>It renders .mp4 files in macOS Safari and .webm files in Chrome Browser.</p>
14
15
  <div class="board board-small" id="board"></div>
15
16
  <video id="videoOut" controls="controls"></video>
16
17
  <br/>
package/examples/input-callbacks.html CHANGED
@@ -12,10 +12,6 @@
12
12
  <h2>Example: Custom markers, left and right click, mark squares and log to console.</h2>
13
13
  <div class="board" id="board1"></div>
14
14
  <div class="board" id="board2"></div>
15
- <br style="clear: both"/>
16
- <div>
17
- <button onclick="window.removeDots()" class="btn btn-primary">Remove all dots</button>
18
- </div>
19
15
  <script type="module">
20
16
  import {Chessboard, INPUT_EVENT_TYPE, SQUARE_SELECT_TYPE} from "../src/cm-chessboard/Chessboard.js"
21
17
  import {FEN} from "../src/cm-chessboard/model/Position.js"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cm-chessboard",
3
- "version": "6.0.2",
3
+ "version": "6.0.4",
4
4
  "description": "A JavaScript chessboard which is lightweight, ES6 module based, responsive, SVG rendered and without dependencies.",
5
5
  "keywords": [
6
6
  "chess",
@@ -22,7 +22,7 @@
22
22
  "type": "git",
23
23
  "url": "git+https://github.com/shaack/cm-chessboard.git"
24
24
  },
25
- "author": "Stefan Haack (http://www.shaack.com)",
25
+ "author": "Stefan Haack (shaack.com)",
26
26
  "license": "MIT",
27
27
  "bugs": {
28
28
  "url": "https://github.com/shaack/cm-chessboard/issues"
package/src/cm-chessboard/extensions/arrows/Arrows.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Author and copyright: Barak Michener (@barakmich)
2
+ * Authors and copyright: Barak Michener (@barakmich) and Stefan Haack (@shaack)
3
3
  * Repository: https://github.com/shaack/cm-chessboard
4
4
  * License: MIT, see file 'LICENSE'
5
5
  */
package/src/cm-chessboard/extensions/markers/Markers.js CHANGED
@@ -1,132 +1,137 @@
1
+ /**
2
+ * Authors and copyright: Laura Campo Alberca (@lauracampoalberca) and Stefan Haack (@shaack)
3
+ * Repository: https://github.com/shaack/cm-chessboard
4
+ * License: MIT, see file 'LICENSE'
5
+ */
1
6
 
2
7
  import {Extension, EXTENSION_POINT} from "../../model/Extension.js"
3
8
  import {Svg} from "../../view/ChessboardView.js"
4
9
 
5
10
  export const MARKER_TYPE = {
6
- square: {class: "marker-square", slice: "markerSquare"},
7
- frame: {class: "marker-frame", slice: "markerFrame"},
8
- dot: {class: "marker-dot", slice: "markerDot", position: 'above'},
9
- circle: {class: "marker-circle", slice: "markerCircle"}
11
+ square: {class: "marker-square", slice: "markerSquare"},
12
+ frame: {class: "marker-frame", slice: "markerFrame"},
13
+ dot: {class: "marker-dot", slice: "markerDot", position: 'above'},
14
+ circle: {class: "marker-circle", slice: "markerCircle"}
10
15
  }
11
16
 
12
17
  export class Markers extends Extension {
13
- constructor(chessboard, props) {
14
- super(chessboard, props)
15
- this.registerExtensionPoint(EXTENSION_POINT.redrawBoard, () => {
16
- this.onRedrawBoard()
17
- })
18
- let defaultProps = {
19
- style: {
20
- moveFromMarker: MARKER_TYPE.frame, // the marker used to mark the start square
21
- moveToMarker: MARKER_TYPE.frame, // the marker used to mark the square where the figure is moving to
22
- },
23
- sprite: chessboard.props.sprite
24
- }
25
- this.props = {}
26
- Object.assign(this.props, defaultProps)
27
- Object.assign(this.props, props)
28
- this.props.sprite = defaultProps.sprite
29
- if (props && props.sprite) {
30
- Object.assign(this.props.sprite, props.sprite)
31
- }
32
- if (this.props.sprite.cache) {
33
- this.chessboard.view.cacheSpriteToDiv("chessboardMarkerSpriteCache", this.props.sprite.url)
34
- }
35
- this.registerMethod("addMarker", this.addMarker)
36
- this.registerMethod("getMarkers", this.getMarkers)
37
- this.registerMethod("removeMarkers", this.removeMarkers)
38
- this.markerGroupDown = Svg.addElement(chessboard.view.markersLayer, "g", {class: "markers"})
39
- this.markerGroupUp = Svg.addElement(chessboard.view.markersTopLayer, "g", {class: "markers"})
40
- this.markers = []
41
- }
18
+ constructor(chessboard, props) {
19
+ super(chessboard, props)
20
+ this.registerExtensionPoint(EXTENSION_POINT.redrawBoard, () => {
21
+ this.onRedrawBoard()
22
+ })
23
+ let defaultProps = {
24
+ style: {
25
+ moveFromMarker: MARKER_TYPE.frame, // the marker used to mark the start square
26
+ moveToMarker: MARKER_TYPE.frame, // the marker used to mark the square where the figure is moving to
27
+ },
28
+ sprite: chessboard.props.sprite
29
+ }
30
+ this.props = {}
31
+ Object.assign(this.props, defaultProps)
32
+ Object.assign(this.props, props)
33
+ this.props.sprite = defaultProps.sprite
34
+ if (props && props.sprite) {
35
+ Object.assign(this.props.sprite, props.sprite)
36
+ }
37
+ if (this.props.sprite.cache) {
38
+ this.chessboard.view.cacheSpriteToDiv("chessboardMarkerSpriteCache", this.props.sprite.url)
39
+ }
40
+ this.registerMethod("addMarker", this.addMarker)
41
+ this.registerMethod("getMarkers", this.getMarkers)
42
+ this.registerMethod("removeMarkers", this.removeMarkers)
43
+ this.markerGroupDown = Svg.addElement(chessboard.view.markersLayer, "g", {class: "markers"})
44
+ this.markerGroupUp = Svg.addElement(chessboard.view.markersTopLayer, "g", {class: "markers"})
45
+ this.markers = []
46
+ }
42
47
 
43
- onRedrawBoard() {
44
- while (this.markerGroupUp.firstChild) {
45
- this.markerGroupUp.removeChild(this.markerGroupUp.firstChild)
46
- }
47
- while (this.markerGroupDown.firstChild) {
48
- this.markerGroupDown.removeChild(this.markerGroupDown.firstChild)
49
- }
50
- this.markers.forEach((marker) => {
51
- this.drawMarker(marker)
52
- }
53
- )
54
- }
48
+ onRedrawBoard() {
49
+ while (this.markerGroupUp.firstChild) {
50
+ this.markerGroupUp.removeChild(this.markerGroupUp.firstChild)
51
+ }
52
+ while (this.markerGroupDown.firstChild) {
53
+ this.markerGroupDown.removeChild(this.markerGroupDown.firstChild)
54
+ }
55
+ this.markers.forEach((marker) => {
56
+ this.drawMarker(marker)
57
+ }
58
+ )
59
+ }
55
60
 
56
- drawMarker(marker) {
57
- let markerGroup;
58
- if (marker.type.position === 'above') {
59
- markerGroup = Svg.addElement(this.markerGroupUp, "g")
60
- } else {
61
- markerGroup = Svg.addElement(this.markerGroupDown, "g")
62
- }
63
- markerGroup.setAttribute("data-square", marker.square)
64
- const point = this.chessboard.view.squareToPoint(marker.square)
65
- const transform = (this.chessboard.view.svg.createSVGTransform())
66
- transform.setTranslate(point.x, point.y)
67
- markerGroup.transform.baseVal.appendItem(transform)
68
- const spriteUrl = this.chessboard.props.sprite.cache ? "" : this.chessboard.props.sprite.url
69
- const markerUse = Svg.addElement(markerGroup, "use",
70
- {href: `${spriteUrl}#${marker.type.slice}`, class: "marker " + marker.type.class})
71
- const transformScale = (this.chessboard.view.svg.createSVGTransform())
72
- transformScale.setScale(this.chessboard.view.scalingX, this.chessboard.view.scalingY)
73
- markerUse.transform.baseVal.appendItem(transformScale)
74
- return markerGroup
75
- }
61
+ drawMarker(marker) {
62
+ let markerGroup
63
+ if (marker.type.position === 'above') {
64
+ markerGroup = Svg.addElement(this.markerGroupUp, "g")
65
+ } else {
66
+ markerGroup = Svg.addElement(this.markerGroupDown, "g")
67
+ }
68
+ markerGroup.setAttribute("data-square", marker.square)
69
+ const point = this.chessboard.view.squareToPoint(marker.square)
70
+ const transform = (this.chessboard.view.svg.createSVGTransform())
71
+ transform.setTranslate(point.x, point.y)
72
+ markerGroup.transform.baseVal.appendItem(transform)
73
+ const spriteUrl = this.chessboard.props.sprite.cache ? "" : this.chessboard.props.sprite.url
74
+ const markerUse = Svg.addElement(markerGroup, "use",
75
+ {href: `${spriteUrl}#${marker.type.slice}`, class: "marker " + marker.type.class})
76
+ const transformScale = (this.chessboard.view.svg.createSVGTransform())
77
+ transformScale.setScale(this.chessboard.view.scalingX, this.chessboard.view.scalingY)
78
+ markerUse.transform.baseVal.appendItem(transformScale)
79
+ return markerGroup
80
+ }
76
81
 
77
- addMarker(type, square) {
78
- if (typeof type === "string" || typeof square === "object") { // todo remove 2022-12-01
79
- console.error("changed the signature of `addMarker` to `(type, square)` with v5.1.x")
80
- return
81
- }
82
- this.markers.push(new Marker(square, type))
83
- this.onRedrawBoard()
84
- }
82
+ addMarker(type, square) {
83
+ if (typeof type === "string" || typeof square === "object") { // todo remove 2022-12-01
84
+ console.error("changed the signature of `addMarker` to `(type, square)` with v5.1.x")
85
+ return
86
+ }
87
+ this.markers.push(new Marker(square, type))
88
+ this.onRedrawBoard()
89
+ }
85
90
 
86
- getMarkers(type = undefined, square = undefined) {
87
- if (typeof type === "string" || typeof square === "object") { // todo remove 2022-12-01
88
- console.error("changed the signature of `getMarkers` to `(type, square)` with v5.1.x")
89
- return
90
- }
91
- let markersFound = []
92
- this.markers.forEach((marker) => {
93
- if (marker.matches(square, type)) {
94
- markersFound.push(marker)
95
- }
96
- })
97
- return markersFound
98
- }
91
+ getMarkers(type = undefined, square = undefined) {
92
+ if (typeof type === "string" || typeof square === "object") { // todo remove 2022-12-01
93
+ console.error("changed the signature of `getMarkers` to `(type, square)` with v5.1.x")
94
+ return
95
+ }
96
+ let markersFound = []
97
+ this.markers.forEach((marker) => {
98
+ if (marker.matches(square, type)) {
99
+ markersFound.push(marker)
100
+ }
101
+ })
102
+ return markersFound
103
+ }
99
104
 
100
- removeMarkers(type = undefined, square = undefined) {
101
- if (typeof type === "string" || typeof square === "object") { // todo remove 2022-12-01
102
- console.error("changed the signature of `removeMarkers` to `(type, square)` with v5.1.x")
103
- return
104
- }
105
- this.markers = this.markers.filter((marker) => !marker.matches(square, type))
106
- this.onRedrawBoard()
107
- }
105
+ removeMarkers(type = undefined, square = undefined) {
106
+ if (typeof type === "string" || typeof square === "object") { // todo remove 2022-12-01
107
+ console.error("changed the signature of `removeMarkers` to `(type, square)` with v5.1.x")
108
+ return
109
+ }
110
+ this.markers = this.markers.filter((marker) => !marker.matches(square, type))
111
+ this.onRedrawBoard()
112
+ }
108
113
  }
109
114
 
110
115
  class Marker {
111
- constructor(square, type) {
112
- this.square = square
113
- this.type = type
114
- }
116
+ constructor(square, type) {
117
+ this.square = square
118
+ this.type = type
119
+ }
115
120
 
116
- matches(square = undefined, type = undefined) {
117
- if (!type && !square) {
118
- return true
119
- } else if (!type) {
120
- if (square === this.square) {
121
- return true
122
- }
123
- } else if (!square) {
124
- if (this.type === type) {
125
- return true
126
- }
127
- } else if (this.type === type && square === this.square) {
128
- return true
129
- }
130
- return false
131
- }
121
+ matches(square = undefined, type = undefined) {
122
+ if (!type && !square) {
123
+ return true
124
+ } else if (!type) {
125
+ if (square === this.square) {
126
+ return true
127
+ }
128
+ } else if (!square) {
129
+ if (this.type === type) {
130
+ return true
131
+ }
132
+ } else if (this.type === type && square === this.square) {
133
+ return true
134
+ }
135
+ return false
136
+ }
132
137
  }
package/src/cm-chessboard/view/PositionAnimationsQueue.js CHANGED
@@ -168,6 +168,9 @@ export class PositionsAnimation {
168
168
 
169
169
  animationStep(time) {
170
170
  // console.log("animationStep", time)
171
+ if(!this.view || !this.view.chessboard.state) { // board was destroyed
172
+ return
173
+ }
171
174
  if (!this.startTime) {
172
175
  this.startTime = time
173
176
  this.view.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.animation, {
package/test/TestMarkers.js CHANGED
@@ -5,13 +5,15 @@
5
5
  */
6
6
 
7
7
  import {describe, it, assert} from "../node_modules/teevi/src/teevi.js"
8
- import {Chessboard, MARKER_TYPE} from "../src/cm-chessboard/Chessboard.js"
8
+ import {Chessboard} from "../src/cm-chessboard/Chessboard.js"
9
+ import {MARKER_TYPE, Markers} from "../src/cm-chessboard/extensions/markers/Markers.js"
9
10
 
10
11
  describe("TestMarkers", () => {
11
12
 
12
13
  it("should set and get markers", () => {
13
14
  const chessboard = new Chessboard(document.getElementById("TestMarkers"), {
14
- sprite: {url: "../assets/images/chessboard-sprite.svg"}
15
+ sprite: {url: "../assets/images/chessboard-sprite.svg"},
16
+ extensions: [{class: Markers}]
15
17
  })
16
18
  chessboard.addMarker(MARKER_TYPE.square, "e5")
17
19
  chessboard.addMarker(MARKER_TYPE.frame, "b6")