cm-chessboard 7.1.2 → 7.2.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.
Files changed (29) hide show
  1. package/README.md +1 -1
  2. package/assets/extensions/markers/markers.css +1 -1
  3. package/assets/extensions/markers/markers.scss +1 -1
  4. package/assets/{chessboard/pieces → pieces}/staunty.svg +0 -19
  5. package/examples/destroy-many-boards.html +1 -1
  6. package/examples/different-styles.html +1 -1
  7. package/examples/enable-input.html +1 -1
  8. package/examples/extensions/accessibility-extension.html +1 -1
  9. package/examples/extensions/arrows-extension.html +1 -1
  10. package/examples/extensions/markers-extension.html +1 -1
  11. package/examples/extensions/promotion-dialog-extension.html +1 -1
  12. package/examples/extensions/render-video-extension.html +1 -1
  13. package/examples/many-boards.html +1 -1
  14. package/examples/pieces-animation.html +1 -1
  15. package/examples/responsive-board.html +1 -1
  16. package/examples/simple-boards.html +1 -1
  17. package/examples/test-getPiece.html +1 -1
  18. package/examples/validate-moves.html +17 -4
  19. package/index.html +1 -1
  20. package/package.json +1 -1
  21. package/src/cm-chessboard/Chessboard.js +1 -1
  22. package/src/cm-chessboard/extensions/markers/Markers.js +5 -2
  23. package/src/cm-chessboard/view/ChessboardView.js +2 -5
  24. package/test/index.html +1 -1
  25. /package/assets/{chessboard/_chessboard-theme.scss → _chessboard-theme.scss} +0 -0
  26. /package/assets/{chessboard/chessboard.css → chessboard.css} +0 -0
  27. /package/assets/{chessboard/chessboard.css.map → chessboard.css.map} +0 -0
  28. /package/assets/{chessboard/chessboard.scss → chessboard.scss} +0 -0
  29. /package/assets/{chessboard/pieces → pieces}/standard.svg +0 -0
package/README.md CHANGED
@@ -92,7 +92,7 @@ this.props = {
92
92
  aspectRatio: 1, // height/width of the board
93
93
  pieces: {
94
94
  type: PIECES_FILE_TYPE.svgSprite, // pieces are in a SVG sprite, no other type supported for now
95
- file: "standard.svg", // the filename of the sprite in `assets/chessboard/pieces/`
95
+ file: "standard.svg", // the filename of the sprite in `assets/pieces/`
96
96
  tileSize: 40 // the tile size in the sprite
97
97
  },
98
98
  animationDuration: 300 // pieces animation duration in milliseconds. Disable all animations with `0`.
package/assets/extensions/markers/markers.css CHANGED
@@ -15,7 +15,7 @@
15
15
  .cm-chessboard .markers .marker.marker-circle {
16
16
  stroke: #000000;
17
17
  stroke-width: 3px;
18
- opacity: 0.4; }
18
+ opacity: 0.3; }
19
19
  .cm-chessboard .markers .marker.marker-circle-primary {
20
20
  stroke: #0009bd;
21
21
  stroke-width: 3px;
package/assets/extensions/markers/markers.scss CHANGED
@@ -28,7 +28,7 @@ $marker-color-danger: #aa0000;
28
28
  &.marker-circle {
29
29
  stroke: $marker-color;
30
30
  stroke-width: 3px;
31
- opacity: 0.4;
31
+ opacity: 0.3;
32
32
  }
33
33
 
34
34
  &.marker-circle-primary {
package/assets/{chessboard/pieces → pieces}/staunty.svg RENAMED
@@ -218,23 +218,4 @@ See also: https://github.com/ornicar/lila/blob/master/COPYING.md
218
218
  <path d="m 21.983,22.213 -1.647,2.347 -2.356,-0.014 4.013,-2.324 z m 2.324,-9.946 c -2.542,0.138 -5.73,3.173 -4.385,6.918 l 0.199,0.643 c -0.33,-3.489 2.127,-7.116 4.186,-7.561 z m -6.444,25.358 c -3.984,2.305 -5.117,6.14 -5.117,6.14 -0.01,0 -0.548,-4.175 3.956,-6.654 4.504,-2.479 4.822,-6.15 5.86,-8.893 -0.636,3.704 -0.715,7.102 -4.699,9.407 z"
219
219
  fill="#ffffff" opacity="0.25" id="path1135"/>
220
220
  </g>
221
- <g id="markerFrame" transform="matrix(1.03,0,0,1.03,1.46,1.46)" fill="#000000" fill-opacity="0">
222
- <path d="M 0,10.588235 V 2.1176471 C 0,1.4117647 0.17647059,0.88235294 0.52941176,0.52941176 0.88235294,0.17647059 1.4117647,0 2.1176471,0 h 8.4705879"
223
- id="Path"/>
224
- <path d="m 25.411765,36 v -8.470588 c 0,-0.705883 0.17647,-1.235294 0.529411,-1.588236 0.352942,-0.352941 0.882353,-0.529411 1.588236,-0.529411 H 36"
225
- id="path1923" transform="rotate(180,30.705882,30.705882)"/>
226
- <path d="M 0,36 V 27.529412 C 0,26.823529 0.17647059,26.294118 0.52941176,25.941176 0.88235294,25.588235 1.4117647,25.411765 2.1176471,25.411765 h 8.4705879"
227
- id="path1925" transform="rotate(-90,5.294118,30.705882)"/>
228
- <path d="M 25.411765,10.588235 V 2.1176471 c 0,-0.7058824 0.17647,-1.23529416 0.529411,-1.58823534 C 26.294118,0.17647059 26.823529,0 27.529412,0 H 36"
229
- id="path1927" transform="rotate(90,30.705882,5.294118)"/>
230
- </g>
231
- <g id="markerCircle" fill="#000000" fill-opacity="0">
232
- <circle cx="20" cy="20" r="18"/>
233
- </g>
234
- <g id="markerDot">
235
- <circle cx="20" cy="20" r="8"/>
236
- </g>
237
- <g id="markerSquare">
238
- <rect x="0" y="0" width="40" height="40"/>
239
- </g>
240
221
  </svg>
package/examples/destroy-many-boards.html CHANGED
@@ -6,7 +6,7 @@
6
6
  <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
7
7
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js"></script>
8
8
  <link rel="stylesheet" href="styles/examples.css"/>
9
- <link rel="stylesheet" href="../assets/chessboard/chessboard.css"/>
9
+ <link rel="stylesheet" href="../assets/chessboard.css"/>
10
10
  <!--suppress CssUnusedSymbol -->
11
11
  <style>
12
12
  div.board {
package/examples/different-styles.html CHANGED
@@ -5,7 +5,7 @@
5
5
  <title>cm-chessboard</title>
6
6
  <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
7
7
  <link rel="stylesheet" href="styles/examples.css"/>
8
- <link rel="stylesheet" href="../assets/chessboard/chessboard.css"/>
8
+ <link rel="stylesheet" href="../assets/chessboard.css"/>
9
9
  </head>
10
10
  <body>
11
11
  <h1><a href="../">cm-chessboard</a></h1>
package/examples/enable-input.html CHANGED
@@ -5,7 +5,7 @@
5
5
  <title>cm-chessboard</title>
6
6
  <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
7
7
  <link rel="stylesheet" href="styles/examples.css"/>
8
- <link rel="stylesheet" href="../assets/chessboard/chessboard.css"/>
8
+ <link rel="stylesheet" href="../assets/chessboard.css"/>
9
9
  <link rel="stylesheet" href="../assets/extensions/markers/markers.css"/>
10
10
  </head>
11
11
  <body>
package/examples/extensions/accessibility-extension.html CHANGED
@@ -5,7 +5,7 @@
5
5
  <title>cm-chessboard</title>
6
6
  <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
7
7
  <link rel="stylesheet" href="../styles/examples.css"/>
8
- <link rel="stylesheet" href="../../assets/chessboard/chessboard.css"/>
8
+ <link rel="stylesheet" href="../../assets/chessboard.css"/>
9
9
  <link rel="stylesheet" href="../../assets/extensions/markers/markers.css"/>
10
10
  </head>
11
11
  <body>
package/examples/extensions/arrows-extension.html CHANGED
@@ -5,7 +5,7 @@
5
5
  <title>cm-chessboard</title>
6
6
  <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
7
7
  <link rel="stylesheet" href="../styles/examples.css"/>
8
- <link rel="stylesheet" href="../../assets/chessboard/chessboard.css"/>
8
+ <link rel="stylesheet" href="../../assets/chessboard.css"/>
9
9
  <link rel="stylesheet" href="../../assets/extensions/arrows/arrows.css"/>
10
10
  </head>
11
11
  <body>
package/examples/extensions/markers-extension.html CHANGED
@@ -5,7 +5,7 @@
5
5
  <title>cm-chessboard</title>
6
6
  <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
7
7
  <link rel="stylesheet" href="../styles/examples.css"/>
8
- <link rel="stylesheet" href="../../assets/chessboard/chessboard.css"/>
8
+ <link rel="stylesheet" href="../../assets/chessboard.css"/>
9
9
  <link rel="stylesheet" href="../../assets/extensions/markers/markers.css"/>
10
10
  </head>
11
11
  <body>
package/examples/extensions/promotion-dialog-extension.html CHANGED
@@ -6,7 +6,7 @@
6
6
  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7
7
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
8
8
  <link rel="stylesheet" href="../styles/examples.css"/>
9
- <link rel="stylesheet" href="../../assets/chessboard/chessboard.css">
9
+ <link rel="stylesheet" href="../../assets/chessboard.css">
10
10
  <link rel="stylesheet" href="../../assets/extensions/promotion-dialog/promotion-dialog.css"/>
11
11
  <link rel="stylesheet" href="../../assets/extensions/markers/markers.css"/>
12
12
  <title>cm-chessboard promotion extension</title>
package/examples/extensions/render-video-extension.html CHANGED
@@ -5,7 +5,7 @@
5
5
  <title>cm-chessboard</title>
6
6
  <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
7
7
  <link rel="stylesheet" href="../styles/examples.css"/>
8
- <link rel="stylesheet" href="../../assets/chessboard/chessboard.css"/>
8
+ <link rel="stylesheet" href="../../assets/chessboard.css"/>
9
9
  </head>
10
10
  <body>
11
11
  <h1><a href="../..">cm-chessboard</a></h1>
package/examples/many-boards.html CHANGED
@@ -5,7 +5,7 @@
5
5
  <title>cm-chessboard</title>
6
6
  <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
7
7
  <link rel="stylesheet" href="styles/examples.css"/>
8
- <link rel="stylesheet" href="../assets/chessboard/chessboard.css"/>
8
+ <link rel="stylesheet" href="../assets/chessboard.css"/>
9
9
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js"></script>
10
10
  <!--suppress CssUnusedSymbol -->
11
11
  <style>
package/examples/pieces-animation.html CHANGED
@@ -5,7 +5,7 @@
5
5
  <title>cm-chessboard</title>
6
6
  <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
7
7
  <link rel="stylesheet" href="styles/examples.css"/>
8
- <link rel="stylesheet" href="../assets/chessboard/chessboard.css"/>
8
+ <link rel="stylesheet" href="../assets/chessboard.css"/>
9
9
  </head>
10
10
  <body>
11
11
  <h1><a href="../">cm-chessboard</a></h1>
package/examples/responsive-board.html CHANGED
@@ -5,7 +5,7 @@
5
5
  <title>cm-chessboard</title>
6
6
  <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
7
7
  <link rel="stylesheet" href="styles/examples.css"/>
8
- <link rel="stylesheet" href="../assets/chessboard/chessboard.css"/>
8
+ <link rel="stylesheet" href="../assets/chessboard.css"/>
9
9
  </head>
10
10
  <body>
11
11
  <h1><a href="../">cm-chessboard</a></h1>
package/examples/simple-boards.html CHANGED
@@ -5,7 +5,7 @@
5
5
  <title>cm-chessboard</title>
6
6
  <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
7
7
  <link rel="stylesheet" href="./styles/examples.css"/>
8
- <link rel="stylesheet" href="../assets/chessboard/chessboard.css"/>
8
+ <link rel="stylesheet" href="../assets/chessboard.css"/>
9
9
  </head>
10
10
  <body>
11
11
  <h1><a href="../">cm-chessboard</a></h1>
package/examples/test-getPiece.html CHANGED
@@ -1,7 +1,7 @@
1
1
  <!doctype html>
2
2
  <html lang="en">
3
3
  <head>
4
- <link rel="stylesheet" href="../assets/chessboard/chessboard.css">
4
+ <link rel="stylesheet" href="../assets/chessboard.css">
5
5
  <title>frame test</title>
6
6
  </head>
7
7
  <body>
package/examples/validate-moves.html CHANGED
@@ -5,7 +5,7 @@
5
5
  <title>cm-chessboard</title>
6
6
  <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
7
7
  <link rel="stylesheet" href="styles/examples.css"/>
8
- <link rel="stylesheet" href="../assets/chessboard/chessboard.css"/>
8
+ <link rel="stylesheet" href="../assets/chessboard.css"/>
9
9
  <link rel="stylesheet" href="../assets/extensions/markers/markers.css"/>
10
10
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js"></script>
11
11
  </head>
@@ -69,16 +69,24 @@ board.enableMoveInput(inputHandler, COLOR.white)
69
69
  <script type="module">
70
70
  import {INPUT_EVENT_TYPE, COLOR, Chessboard} from "../src/cm-chessboard/Chessboard.js"
71
71
  import {MARKER_TYPE, Markers} from "../src/cm-chessboard/extensions/markers/Markers.js"
72
+ import {PromotionDialog} from "../src/cm-chessboard/extensions/promotion-dialog/PromotionDialog.js"
72
73
 
73
74
  const chess = new Chess()
74
75
 
75
76
  function inputHandler(event) {
76
- console.log("event", event)
77
77
  event.chessboard.removeMarkers(MARKER_TYPE.dot)
78
+ event.chessboard.removeMarkers(MARKER_TYPE.circle)
78
79
  if (event.type === INPUT_EVENT_TYPE.moveInputStarted) {
79
80
  const moves = chess.moves({square: event.square, verbose: true})
80
81
  for (const move of moves) { // draw dots on possible squares
81
- event.chessboard.addMarker(MARKER_TYPE.dot, move.to)
82
+ if (move.promotion && move.promotion !== "q") {
83
+ continue
84
+ }
85
+ if (event.chessboard.getPiece(move.to)) {
86
+ event.chessboard.addMarker(MARKER_TYPE.circle, move.to)
87
+ } else {
88
+ event.chessboard.addMarker(MARKER_TYPE.dot, move.to)
89
+ }
82
90
  }
83
91
  return moves.length > 0
84
92
  } else if (event.type === INPUT_EVENT_TYPE.validateMoveInput) {
@@ -104,6 +112,8 @@ board.enableMoveInput(inputHandler, COLOR.white)
104
112
  console.warn("invalid move", move)
105
113
  }
106
114
  return result
115
+ } else if (event.type === INPUT_EVENT_TYPE.validateMoveInput) {
116
+
107
117
  }
108
118
  }
109
119
 
@@ -112,7 +122,10 @@ board.enableMoveInput(inputHandler, COLOR.white)
112
122
  assetsUrl: "../assets/",
113
123
  style: {pieces: {file: "staunty.svg"}},
114
124
  orientation: COLOR.white,
115
- extensions: [{class: Markers, props: {autoMarkers: MARKER_TYPE.square}}]
125
+ extensions: [
126
+ {class: Markers, props: {autoMarkers: MARKER_TYPE.square}},
127
+ {class: PromotionDialog}
128
+ ]
116
129
  })
117
130
  board.enableMoveInput(inputHandler, COLOR.white)
118
131
  </script>
package/index.html CHANGED
@@ -3,7 +3,7 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <title>cm-chessboard</title>
6
- <link rel="stylesheet" href="assets/chessboard/chessboard.css"/>
6
+ <link rel="stylesheet" href="assets/chessboard.css"/>
7
7
  <link rel="stylesheet" href="examples/styles/examples.css"/>
8
8
  <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
9
9
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js"></script>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cm-chessboard",
3
- "version": "7.1.2",
3
+ "version": "7.2.0",
4
4
  "description": "A JavaScript chessboard which is lightweight, ES6 module based, responsive, SVG rendered and without dependencies.",
5
5
  "keywords": [
6
6
  "chess",
package/src/cm-chessboard/Chessboard.js CHANGED
@@ -62,7 +62,7 @@ export class Chessboard {
62
62
  aspectRatio: 1, // height/width of the board
63
63
  pieces: {
64
64
  type: PIECES_FILE_TYPE.svgSprite, // pieces are in a SVG sprite, no other type supported for now
65
- file: "standard.svg", // the filename of the sprite in `assets/chessboard/pieces/`
65
+ file: "standard.svg", // the filename of the sprite in `assets/pieces/`
66
66
  tileSize: 40 // the tile size in the sprite
67
67
  },
68
68
  animationDuration: 300 // pieces animation duration in milliseconds. Disable all animations with `0`.
package/src/cm-chessboard/extensions/markers/Markers.js CHANGED
@@ -51,9 +51,12 @@ export class Markers extends Extension {
51
51
 
52
52
  drawAutoMarkers(event) {
53
53
  this.removeMarkers(this.autoMarker)
54
+ if (event.type === INPUT_EVENT_TYPE.moveInputStarted &&
55
+ !event.moveInputCallbackResult) {
56
+ return
57
+ }
54
58
  if (event.type === INPUT_EVENT_TYPE.moveInputStarted ||
55
- event.type === INPUT_EVENT_TYPE.movingOverSquare ||
56
- event.type === INPUT_EVENT_TYPE.validateMoveInput) {
59
+ event.type === INPUT_EVENT_TYPE.movingOverSquare) {
57
60
  if (event.squareFrom) {
58
61
  this.addMarker(this.autoMarker, event.squareFrom)
59
62
  }
package/src/cm-chessboard/view/ChessboardView.js CHANGED
@@ -337,7 +337,7 @@ export class ChessboardView {
337
337
  piece: this.chessboard.getPiece(square)
338
338
  }
339
339
  if (this.moveInputCallback) {
340
- // the "oldschool" move input validator
340
+ // the old move input validator
341
341
  data.moveInputCallbackResult = this.moveInputCallback(data)
342
342
  }
343
343
  // the new extension points
@@ -354,9 +354,6 @@ export class ChessboardView {
354
354
  squareTo: squareTo,
355
355
  piece: this.chessboard.getPiece(squareFrom)
356
356
  }
357
- if (this.moveInputCallback) {
358
- data.moveInputCallbackResult = this.moveInputCallback(data)
359
- }
360
357
  this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
361
358
  }
362
359
 
@@ -421,6 +418,6 @@ export class ChessboardView {
421
418
  }
422
419
 
423
420
  getSpriteUrl() {
424
- return this.chessboard.props.assetsUrl + "chessboard/pieces/" + this.chessboard.props.style.pieces.file
421
+ return this.chessboard.props.assetsUrl + "pieces/" + this.chessboard.props.style.pieces.file
425
422
  }
426
423
  }
package/test/index.html CHANGED
@@ -4,7 +4,7 @@
4
4
  <meta charset="UTF-8">
5
5
  <title>Test cm-chessboard</title>
6
6
  <link rel="stylesheet" href="../examples/styles/examples.css"/>
7
- <link rel="stylesheet" href="../assets/chessboard/chessboard.css"/>
7
+ <link rel="stylesheet" href="../assets/chessboard.css"/>
8
8
  <style>
9
9
  .board {
10
10
  position: absolute;