cm-chessboard 5.2.8 → 5.3.2

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 (10) hide show
  1. package/examples/extensions/chessboard-promotion-extension.html +35 -0
  2. package/examples/styles/examples.css +3 -0
  3. package/examples/styles/examples.css.map +1 -1
  4. package/examples/styles/examples.scss +4 -0
  5. package/index.html +3 -2
  6. package/package.json +1 -1
  7. package/src/cm-chessboard/extensions/promotion/Promotion.js +36 -0
  8. package/src/cm-chessboard/model/ChessboardState.js +8 -6
  9. package/src/cm-chessboard/model/Extension.js +2 -2
  10. package/src/cm-chessboard/view/ChessboardView.js +11 -7
package/examples/extensions/chessboard-promotion-extension.html ADDED
@@ -0,0 +1,35 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport"
6
+ content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
8
+ <link rel="stylesheet" href="../styles/examples.css"/>
9
+ <link rel="stylesheet" href="../../assets/styles/cm-chessboard.css">
10
+ <title>cm-chessboard promotion extension</title>
11
+ </head>
12
+ <body>
13
+ <h1>Example of the cm-chessboard Promotion extension</h1>
14
+ <p>Try to move the pawn to the c8</p>
15
+ <div id="chessboard" class="board-max-width">
16
+ </div>
17
+ <script type="module">
18
+ import {Chessboard} from "../../src/cm-chessboard/Chessboard.js"
19
+ import {Promotion} from "../../src/cm-chessboard/extensions/promotion/Promotion.js"
20
+
21
+ const chessboard = new Chessboard(document.getElementById("chessboard"), {
22
+ position: "4k3/2P5/8/8/8/8/3Q1Q2/4K2R w K - 0 1",
23
+ sprite: {
24
+ url: "../../assets/images/chessboard-sprite.svg", // pieces and markers are stored in a sprite file
25
+ },
26
+ extensions: [
27
+ {class: Promotion, props: {}}
28
+ ]
29
+ })
30
+ chessboard.enableMoveInput((move) => {
31
+ return true
32
+ })
33
+ </script>
34
+ </body>
35
+ </html>
package/examples/styles/examples.css CHANGED
@@ -71,4 +71,7 @@ input[type=text] {
71
71
  li {
72
72
  padding: 0.05rem; }
73
73
 
74
+ .board-max-width {
75
+ max-width: 640px; }
76
+
74
77
  /*# sourceMappingURL=examples.css.map */
package/examples/styles/examples.css.map CHANGED
@@ -5,5 +5,5 @@
5
5
  "examples.scss"
6
6
  ],
7
7
  "names": [],
8
- "mappings": "AASA,AAAA,IAAI,CAAC;EACH,KAAK,EAPG,IAAI;EAQZ,gBAAgB,EATL,IAAI;EAUf,OAAO,EAAE,IAAI;EACb,MAAM,EAAE,CAAC;EACT,WAAW,EAAE,4BAA4B;EACzC,WAAW,EAAE,GAAG;EAChB,SAAS,EATC,IAAI,GAcf;EAZD,AASE,IATE,CASF,CAAC,CAAC;IACA,SAAS,EAZD,IAAI,GAab;;AAGH,AAAA,CAAC,CAAC;EACA,KAAK,EAxBA,OAAO,GAiCb;EAVD,AAGE,CAHD,CAGG,OAAO,CAAC;IACR,KAAK,EAAE,OAAO,GACf;EALH,AAOE,CAPD,CAOG,KAAK,CAAC;IACN,KAAK,EA9BI,OAAO,GA+BjB;;AAGH,AAAA,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;EACP,UAAU,EAAE,CAAC;EACb,SAAS,EAAE,MAAgB;EAC3B,KAAK,EAlCE,OAAO,GAmCf;;AAED,AAAA,EAAE,CAAC;EACD,aAAa,EAAE,IAAI,GACpB;;AAED,AAAA,EAAE,CAAC;EACD,aAAa,EAAE,IAAI;EACnB,SAAS,EAAE,MAAgB;EAC3B,KAAK,EA5CE,OAAO,GA6Cf;;AAED,AAAA,GAAG,CAAC;EACF,WAAW,EAAE,wBAAwB;EACrC,SAAS,EAAE,GAAG;EACd,gBAAgB,EAjDA,IAAI;EAkDpB,KAAK,EAjDA,IAAI;EAkDT,OAAO,EAAE,GAAG;EACZ,QAAQ,EAAE,IAAI,GACf;;AAED,AAAA,GAAG,AAAA,MAAM,CAAC;EACR,KAAK,EAAE,IAAI;EACX,SAAS,EAAE,KAAK;EAChB,KAAK,EAAE,kBAAkB;EACzB,YAAY,EAAE,IAAI;EAClB,aAAa,EAAE,IAAI,GACpB;;AAED,AAAA,SAAS,EAAE,KAAK,CAAC;EACf,OAAO,EAAE,EAAE;EACX,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,KAAK,GACf;;AAED,AAAA,MAAM,CAAC;EACL,OAAO,EAAE,QAAQ;EACjB,SAAS,EAAE,GAAG;EACd,YAAY,EAAE,IAAI;EAClB,aAAa,EAAE,IAAI;EACnB,gBAAgB,EAAE,IAAI;EACtB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,GAAG;EAClB,MAAM,EAAE,OAAO,GAKhB;EAdD,AAWE,MAXI,CAWF,KAAK,CAAC;IACN,gBAAgB,EAAE,IAAI,GACvB;;AAGH,AAAA,KAAK,CAAA,AAAA,IAAC,CAAD,IAAC,AAAA,EAAW;EACf,SAAS,EAAE,GAAG;EACd,OAAO,EAAE,GAAG;EACZ,aAAa,EAAE,GAAG;EAClB,MAAM,EAAE,IAAI,GACb;;AAED,AAAA,EAAE,CAAC;EACD,OAAO,EAAE,OAAO,GAEjB"
8
+ "mappings": "AASA,AAAA,IAAI,CAAC;EACH,KAAK,EAPG,IAAI;EAQZ,gBAAgB,EATL,IAAI;EAUf,OAAO,EAAE,IAAI;EACb,MAAM,EAAE,CAAC;EACT,WAAW,EAAE,4BAA4B;EACzC,WAAW,EAAE,GAAG;EAChB,SAAS,EATC,IAAI,GAcf;EAZD,AASE,IATE,CASF,CAAC,CAAC;IACA,SAAS,EAZD,IAAI,GAab;;AAGH,AAAA,CAAC,CAAC;EACA,KAAK,EAxBA,OAAO,GAiCb;EAVD,AAGE,CAHD,CAGG,OAAO,CAAC;IACR,KAAK,EAAE,OAAO,GACf;EALH,AAOE,CAPD,CAOG,KAAK,CAAC;IACN,KAAK,EA9BI,OAAO,GA+BjB;;AAGH,AAAA,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;EACP,UAAU,EAAE,CAAC;EACb,SAAS,EAAE,MAAgB;EAC3B,KAAK,EAlCE,OAAO,GAmCf;;AAED,AAAA,EAAE,CAAC;EACD,aAAa,EAAE,IAAI,GACpB;;AAED,AAAA,EAAE,CAAC;EACD,aAAa,EAAE,IAAI;EACnB,SAAS,EAAE,MAAgB;EAC3B,KAAK,EA5CE,OAAO,GA6Cf;;AAED,AAAA,GAAG,CAAC;EACF,WAAW,EAAE,wBAAwB;EACrC,SAAS,EAAE,GAAG;EACd,gBAAgB,EAjDA,IAAI;EAkDpB,KAAK,EAjDA,IAAI;EAkDT,OAAO,EAAE,GAAG;EACZ,QAAQ,EAAE,IAAI,GACf;;AAED,AAAA,GAAG,AAAA,MAAM,CAAC;EACR,KAAK,EAAE,IAAI;EACX,SAAS,EAAE,KAAK;EAChB,KAAK,EAAE,kBAAkB;EACzB,YAAY,EAAE,IAAI;EAClB,aAAa,EAAE,IAAI,GACpB;;AAED,AAAA,SAAS,EAAE,KAAK,CAAC;EACf,OAAO,EAAE,EAAE;EACX,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,KAAK,GACf;;AAED,AAAA,MAAM,CAAC;EACL,OAAO,EAAE,QAAQ;EACjB,SAAS,EAAE,GAAG;EACd,YAAY,EAAE,IAAI;EAClB,aAAa,EAAE,IAAI;EACnB,gBAAgB,EAAE,IAAI;EACtB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,GAAG;EAClB,MAAM,EAAE,OAAO,GAKhB;EAdD,AAWE,MAXI,CAWF,KAAK,CAAC;IACN,gBAAgB,EAAE,IAAI,GACvB;;AAGH,AAAA,KAAK,CAAA,AAAA,IAAC,CAAD,IAAC,AAAA,EAAW;EACf,SAAS,EAAE,GAAG;EACd,OAAO,EAAE,GAAG;EACZ,aAAa,EAAE,GAAG;EAClB,MAAM,EAAE,IAAI,GACb;;AAED,AAAA,EAAE,CAAC;EACD,OAAO,EAAE,OAAO,GAEjB;;AAED,AAAA,gBAAgB,CAAC;EACf,SAAS,EAAE,KAAK,GACjB"
9
9
  }
package/examples/styles/examples.scss CHANGED
@@ -99,3 +99,7 @@ li {
99
99
  padding: 0.05rem;
100
100
 
101
101
  }
102
+
103
+ .board-max-width {
104
+ max-width: 640px;
105
+ }
package/index.html CHANGED
@@ -28,8 +28,9 @@ It works, it is cool and it is easy to use. 👍</p>
28
28
  </ul>
29
29
  <h3>Examples of extensions</h3>
30
30
  <ul>
31
- <li><a href="examples/extensions/chessboard-accessibility-extension.html">Accessibility extension</a> 🆕</li>
32
- <li><a href="examples/extensions/chessboard-arrows-extension.html">Arrows extension</a> 🆕</li>
31
+ <li><a href="examples/extensions/chessboard-accessibility-extension.html">Accessibility extension</a></li>
32
+ <li><a href="examples/extensions/chessboard-arrows-extension.html">Arrows extension</a></li>
33
+ <li><a href="examples/extensions/chessboard-promotion-extension.html">Promotion extension</a> 🆕</li>
33
34
  </ul>
34
35
  </div>
35
36
  <h2>Chessboard</h2>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cm-chessboard",
3
- "version": "5.2.8",
3
+ "version": "5.3.2",
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/extensions/promotion/Promotion.js ADDED
@@ -0,0 +1,36 @@
1
+ /**
2
+ * Author and copyright: Stefan Haack (https://shaack.com)
3
+ * Repository: https://github.com/shaack/cm-chessboard
4
+ * License: MIT, see file 'LICENSE'
5
+ */
6
+ import {Extension, EXTENSION_POINT} from "../../model/Extension.js"
7
+ import {INPUT_EVENT_TYPE, PIECE} from "../../Chessboard.js"
8
+
9
+ export class Promotion extends Extension {
10
+
11
+ constructor(chessboard, props) {
12
+ super(chessboard, props)
13
+ this.registerExtensionPoint(EXTENSION_POINT.moveInput, this.onMoveInput.bind(this))
14
+ }
15
+
16
+ onMoveInput(event) {
17
+ if(event.type === INPUT_EVENT_TYPE.validateMoveInput) {
18
+ console.log(this)
19
+ console.log("976000", event,
20
+ this.chessboard.getPiece(event.squareFrom),
21
+ this.chessboard.getPiece(event.squareTo))
22
+ if(event.piece === PIECE.wp && event.squareTo.charAt(1) === "8") {
23
+ return false
24
+ }
25
+ }
26
+ }
27
+
28
+ showPromotionDialog(event) {
29
+ this.promotionDialog = document.createElement("div")
30
+ this.promotionDialog.style.width = "50px"
31
+ this.promotionDialog.style.height = "50px"
32
+ this.promotionDialog.style.backgroundColor = "white"
33
+ // this.chessboard.view.
34
+ }
35
+
36
+ }
package/src/cm-chessboard/model/ChessboardState.js CHANGED
@@ -38,7 +38,7 @@ export class ChessboardState {
38
38
  const position = this._position.clone()
39
39
  position.animated = animated
40
40
  const piece = position.getPiece(fromSquare)
41
- if(!piece) {
41
+ if (!piece) {
42
42
  console.error("no piece on", fromSquare)
43
43
  }
44
44
  position.setPiece(fromSquare, undefined)
@@ -80,15 +80,17 @@ export class ChessboardState {
80
80
 
81
81
  invokeExtensionPoints(name, data = {}) {
82
82
  const extensionPoints = this.extensionPoints[name]
83
- const dataCloned = Object.assign({}, data);
83
+ const dataCloned = Object.assign({}, data)
84
84
  dataCloned.extensionPoint = name
85
- if(extensionPoints) {
85
+ let returnValue = true
86
+ if (extensionPoints) {
86
87
  for (const extensionPoint of extensionPoints) {
87
- setTimeout(() => {
88
- extensionPoint(dataCloned)
89
- })
88
+ if(extensionPoint(dataCloned) === false) {
89
+ returnValue = false
90
+ }
90
91
  }
91
92
  }
93
+ return returnValue
92
94
  }
93
95
 
94
96
  }
package/src/cm-chessboard/model/Extension.js CHANGED
@@ -8,8 +8,8 @@ export const EXTENSION_POINT = {
8
8
  positionChanged: "positionChanged", // the positions of the pieces was changed
9
9
  boardChanged: "boardChanged", // the board (orientation) was changed
10
10
  moveInputToggled: "moveInputToggled", // move input was enabled or disabled
11
- moveInput: "moveInput", // move started, to validate or canceled // TODO validation not possible for now, see https://github.com/shaack/cm-chessboard/issues/82
12
- moveInputStateChanged: "moveInput", // TODO deprecated, use `moveInput`
11
+ moveInput: "moveInput", // move started, to validate or canceled
12
+ // moveInputStateChanged: "moveInput", // TODO deprecated, use `moveInput`
13
13
  redrawBoard: "redrawBoard", // called after redrawing the board
14
14
  destroy: "destroy" // called, before the board is destroyed
15
15
  }
package/src/cm-chessboard/view/ChessboardView.js CHANGED
@@ -5,7 +5,7 @@
5
5
  */
6
6
 
7
7
  import {VisualMoveInput} from "./VisualMoveInput.js"
8
- import {COLOR, INPUT_EVENT_TYPE, BORDER_TYPE} from "../Chessboard.js"
8
+ import {BORDER_TYPE, COLOR, INPUT_EVENT_TYPE} from "../Chessboard.js"
9
9
  import {Position} from "../model/Position.js"
10
10
  import {EXTENSION_POINT} from "../model/Extension.js"
11
11
 
@@ -410,14 +410,18 @@ export class ChessboardView {
410
410
  chessboard: this.chessboard,
411
411
  type: INPUT_EVENT_TYPE.validateMoveInput,
412
412
  squareFrom: squareFrom,
413
- squareTo: squareTo
413
+ squareTo: squareTo,
414
+ piece: this.chessboard.getPiece(squareFrom)
414
415
  }
415
- this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data) // TODO use the return value of this EP
416
416
  if (this.moveInputCallback) {
417
- return this.moveInputCallback(data)
418
- } else {
419
- return true
420
- }
417
+ // the "oldschool" move input validator
418
+ data.moveInputCallbackResult = this.moveInputCallback(data)
419
+ }
420
+ // the new extension points
421
+ const extensionPointsResult = this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
422
+ console.log("5b0d1f", extensionPointsResult, data.moveInputCallbackResult)
423
+ // validates, when moveInputCallbackResult and extensionPointsResult are true
424
+ return !(extensionPointsResult === false || !data.moveInputCallbackResult);
421
425
  }
422
426
 
423
427
  moveInputCanceledCallback(reason, squareFrom, squareTo) {