cm-chessboard 7.3.11 → 7.3.13
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 +1 -1
- package/examples/destroy-many-boards.html +2 -1
- package/examples/extensions/promotion-dialog-extension.html +4 -4
- package/examples/many-boards.html +1 -1
- package/examples/validate-moves.html +38 -18
- package/index.html +2 -2
- package/package.json +4 -2
- package/src/cm-chessboard/extensions/promotion-dialog/PromotionDialog.js +2 -2
package/README.md
CHANGED
|
@@ -41,7 +41,7 @@ The core of cm-chessboard is small, fast and reduced to the essentials. You can
|
|
|
41
41
|
|
|
42
42
|
**Option 2:** Download the code from [GitHub](https://github.com/shaack/cm-chessboard).
|
|
43
43
|
|
|
44
|
-
**Option 3:** Use it via CDN https://cdn.jsdelivr.net/npm/cm-chessboard@
|
|
44
|
+
**Option 3:** Use it via CDN https://cdn.jsdelivr.net/npm/cm-chessboard@7/src/cm-chessboard/Chessboard.js
|
|
45
45
|
|
|
46
46
|
After installation, copy the sprite in `cm-chessboard/assets/images/` to your projects `assets/images/`
|
|
47
47
|
folder. If you put the sprite somewhere else you have to configure the location
|
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<title>cm-chessboard</title>
|
|
6
6
|
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
|
|
7
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js"></script>
|
|
8
7
|
<link rel="stylesheet" href="styles/examples.css"/>
|
|
9
8
|
<link rel="stylesheet" href="../assets/chessboard.css"/>
|
|
10
9
|
<!--suppress CssUnusedSymbol -->
|
|
@@ -32,6 +31,8 @@
|
|
|
32
31
|
<script type="module">
|
|
33
32
|
import {Chessboard} from "../src/cm-chessboard/Chessboard.js"
|
|
34
33
|
import {FEN} from "../src/cm-chessboard/model/Position.js"
|
|
34
|
+
import {Chess} from "https://cdn.jsdelivr.net/npm/chess.mjs@1/src/chess.mjs/Chess.js"
|
|
35
|
+
|
|
35
36
|
const boardsDiv = document.getElementById("boards")
|
|
36
37
|
const boardDiv = document.createElement("div")
|
|
37
38
|
boardDiv.setAttribute("class", "board1")
|
|
@@ -36,10 +36,10 @@
|
|
|
36
36
|
chessboard.enableMoveInput((event) => {
|
|
37
37
|
if (event.type === INPUT_EVENT_TYPE.validateMoveInput) {
|
|
38
38
|
if (event.squareTo.charAt(1) === "8" && event.piece.charAt(1) === "p") {
|
|
39
|
-
chessboard.showPromotionDialog(event.squareTo, COLOR.white, (
|
|
40
|
-
console.log("
|
|
41
|
-
if (
|
|
42
|
-
chessboard.setPiece(
|
|
39
|
+
chessboard.showPromotionDialog(event.squareTo, COLOR.white, (result) => {
|
|
40
|
+
console.log("Promotion result", result)
|
|
41
|
+
if (result.piece) {
|
|
42
|
+
chessboard.setPiece(result.square, result.piece, true)
|
|
43
43
|
} else {
|
|
44
44
|
chessboard.setPosition(position)
|
|
45
45
|
}
|
|
@@ -6,7 +6,6 @@
|
|
|
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
8
|
<link rel="stylesheet" href="../assets/chessboard.css"/>
|
|
9
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js"></script>
|
|
10
9
|
<!--suppress CssUnusedSymbol -->
|
|
11
10
|
<style>
|
|
12
11
|
div.board {
|
|
@@ -24,6 +23,7 @@
|
|
|
24
23
|
<!--suppress JSUnresolvedFunction -->
|
|
25
24
|
<script type="module">
|
|
26
25
|
import {Chessboard} from "../src/cm-chessboard/Chessboard.js"
|
|
26
|
+
import {Chess} from "https://cdn.jsdelivr.net/npm/chess.mjs@1/src/chess.mjs/Chess.js"
|
|
27
27
|
|
|
28
28
|
const boardsDiv = document.getElementById("boards")
|
|
29
29
|
const game = new Chess()
|
|
@@ -7,24 +7,38 @@
|
|
|
7
7
|
<link rel="stylesheet" href="styles/examples.css"/>
|
|
8
8
|
<link rel="stylesheet" href="../assets/chessboard.css"/>
|
|
9
9
|
<link rel="stylesheet" href="../assets/extensions/markers/markers.css"/>
|
|
10
|
-
<
|
|
10
|
+
<link rel="stylesheet" href="../assets/extensions/promotion-dialog/promotion-dialog.css"/>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
13
13
|
<h1><a href="../">cm-chessboard</a></h1>
|
|
14
|
-
<h2>Example: Input enabled
|
|
15
|
-
<p>Input enabled for white. <a href="https://github.com/
|
|
14
|
+
<h2>Example: Input enabled with move validation and promotion dialog</h2>
|
|
15
|
+
<p>Input enabled for white. <a href="https://github.com/shaack/chess.mjs">chess.mjs</a> does the validation and answers
|
|
16
16
|
with random moves.</p>
|
|
17
17
|
<div class="board board-large" id="board"></div>
|
|
18
18
|
<div id="output"></div>
|
|
19
|
-
|
|
19
|
+
|
|
20
20
|
<script type="module">
|
|
21
21
|
import {INPUT_EVENT_TYPE, COLOR, Chessboard, BORDER_TYPE} from "../src/cm-chessboard/Chessboard.js"
|
|
22
22
|
import {MARKER_TYPE, Markers} from "../src/cm-chessboard/extensions/markers/Markers.js"
|
|
23
23
|
import {PromotionDialog} from "../src/cm-chessboard/extensions/promotion-dialog/PromotionDialog.js"
|
|
24
24
|
import {Accessibility} from "../src/cm-chessboard/extensions/accessibility/Accessibility.js"
|
|
25
|
+
import {Chess} from "https://cdn.jsdelivr.net/npm/chess.mjs@1/src/chess.mjs/Chess.js"
|
|
25
26
|
|
|
26
27
|
const chess = new Chess()
|
|
27
28
|
|
|
29
|
+
function makeEngineMove(chessboard) {
|
|
30
|
+
const possibleMoves = chess.moves({verbose: true})
|
|
31
|
+
if (possibleMoves.length > 0) {
|
|
32
|
+
const randomIndex = Math.floor(Math.random() * possibleMoves.length)
|
|
33
|
+
const randomMove = possibleMoves[randomIndex]
|
|
34
|
+
setTimeout(() => { // smoother with 500ms delay
|
|
35
|
+
chess.move({from: randomMove.from, to: randomMove.to})
|
|
36
|
+
chessboard.setPosition(chess.fen(), true)
|
|
37
|
+
chessboard.enableMoveInput(inputHandler, COLOR.white)
|
|
38
|
+
}, 500)
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
28
42
|
function inputHandler(event) {
|
|
29
43
|
event.chessboard.removeMarkers(MARKER_TYPE.dot)
|
|
30
44
|
event.chessboard.removeMarkers(MARKER_TYPE.bevel)
|
|
@@ -42,30 +56,36 @@
|
|
|
42
56
|
}
|
|
43
57
|
return moves.length > 0
|
|
44
58
|
} else if (event.type === INPUT_EVENT_TYPE.validateMoveInput) {
|
|
45
|
-
const move = {from: event.squareFrom, to: event.squareTo}
|
|
59
|
+
const move = {from: event.squareFrom, to: event.squareTo, promotion: event.promotion}
|
|
46
60
|
const result = chess.move(move)
|
|
47
61
|
if (result) {
|
|
48
62
|
event.chessboard.disableMoveInput()
|
|
49
63
|
this.chessboard.state.moveInputProcess.then(() => { // wait for the move input process has finished
|
|
50
64
|
this.chessboard.setPosition(chess.fen(), true).then(() => { // update position, maybe castled and wait for animation has finished
|
|
51
|
-
|
|
52
|
-
if (possibleMoves.length > 0) {
|
|
53
|
-
const randomIndex = Math.floor(Math.random() * possibleMoves.length)
|
|
54
|
-
const randomMove = possibleMoves[randomIndex]
|
|
55
|
-
setTimeout(() => { // smoother with 500ms delay
|
|
56
|
-
chess.move({from: randomMove.from, to: randomMove.to})
|
|
57
|
-
event.chessboard.enableMoveInput(inputHandler, COLOR.white)
|
|
58
|
-
event.chessboard.setPosition(chess.fen(), true)
|
|
59
|
-
}, 500)
|
|
60
|
-
}
|
|
65
|
+
makeEngineMove(event.chessboard)
|
|
61
66
|
})
|
|
62
67
|
})
|
|
63
68
|
} else {
|
|
64
|
-
|
|
69
|
+
// promotion?
|
|
70
|
+
let possibleMoves = chess.moves({square: event.squareFrom, verbose: true})
|
|
71
|
+
for (const possibleMove of possibleMoves) {
|
|
72
|
+
if (possibleMove.promotion && possibleMove.to === event.squareTo) {
|
|
73
|
+
event.chessboard.showPromotionDialog(event.squareTo, COLOR.white, (result) => {
|
|
74
|
+
console.log("promotion result", result)
|
|
75
|
+
if (result) {
|
|
76
|
+
chess.move({from: event.squareFrom, to: event.squareTo, promotion: result.piece.charAt(1)})
|
|
77
|
+
event.chessboard.setPosition(chess.fen(), true)
|
|
78
|
+
makeEngineMove(event.chessboard)
|
|
79
|
+
} else {
|
|
80
|
+
event.chessboard.setPosition(chess.fen(), true)
|
|
81
|
+
event.chessboard.enableMoveInput(inputHandler, COLOR.white)
|
|
82
|
+
}
|
|
83
|
+
})
|
|
84
|
+
return true
|
|
85
|
+
}
|
|
86
|
+
}
|
|
65
87
|
}
|
|
66
88
|
return result
|
|
67
|
-
} else if (event.type === INPUT_EVENT_TYPE.validateMoveInput) {
|
|
68
|
-
|
|
69
89
|
}
|
|
70
90
|
}
|
|
71
91
|
|
package/index.html
CHANGED
|
@@ -6,7 +6,6 @@
|
|
|
6
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
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js"></script>
|
|
10
9
|
</head>
|
|
11
10
|
<body>
|
|
12
11
|
<h1>cm-chessboard</h1>
|
|
@@ -20,7 +19,7 @@ It works, it is cool and it is easy to use. 👍</p>
|
|
|
20
19
|
<li><a href="examples/simple-boards.html">Simple chessboards, view only</a></li>
|
|
21
20
|
<li><a href="examples/responsive-board.html">Responsive chessboard</a></li>
|
|
22
21
|
<li><a href="examples/enable-input.html">Input enabled without validation</a></li>
|
|
23
|
-
<li><a href="examples/validate-moves.html">Input enabled, move validation
|
|
22
|
+
<li><a href="examples/validate-moves.html">Input enabled, with move validation and promotion dialog</a> 🔥</li>
|
|
24
23
|
<li><a href="examples/pieces-animation.html">Set different positions, with animation</a></li>
|
|
25
24
|
<li><a href="examples/extensions/markers-extension.html">Context input, mark squares and detect clicks on fields</a></li>
|
|
26
25
|
<li><a href="examples/different-styles.html">Different styles and piece sets</a> 🎨</li>
|
|
@@ -40,6 +39,7 @@ It works, it is cool and it is easy to use. 👍</p>
|
|
|
40
39
|
<script type="module">
|
|
41
40
|
import {Chessboard} from "./src/cm-chessboard/Chessboard.js"
|
|
42
41
|
import {FEN} from "./src/cm-chessboard/model/Position.js"
|
|
42
|
+
import {Chess} from "https://cdn.jsdelivr.net/npm/chess.mjs@1/src/chess.mjs/Chess.js"
|
|
43
43
|
|
|
44
44
|
const chess = new Chess()
|
|
45
45
|
const board = new Chessboard(document.getElementById("board"), {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "cm-chessboard",
|
|
3
|
-
"version": "7.3.
|
|
3
|
+
"version": "7.3.13",
|
|
4
4
|
"description": "A JavaScript chessboard which is lightweight, ES6 module based, responsive, SVG rendered and without dependencies.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"chess",
|
|
@@ -31,5 +31,7 @@
|
|
|
31
31
|
"devDependencies": {
|
|
32
32
|
"teevi": "^2.2.2"
|
|
33
33
|
},
|
|
34
|
-
"dependencies": {
|
|
34
|
+
"dependencies": {
|
|
35
|
+
"cm-chess": "^2.5.0"
|
|
36
|
+
}
|
|
35
37
|
}
|
|
@@ -147,14 +147,14 @@ export class PromotionDialog extends Extension {
|
|
|
147
147
|
if(this.state.displayState === DISPLAY_STATE.shown) {
|
|
148
148
|
event.preventDefault()
|
|
149
149
|
this.setDisplayState(DISPLAY_STATE.hidden)
|
|
150
|
-
this.state.callback(
|
|
150
|
+
this.state.callback(null)
|
|
151
151
|
}
|
|
152
152
|
}
|
|
153
153
|
|
|
154
154
|
contextMenu(event) {
|
|
155
155
|
event.preventDefault()
|
|
156
156
|
this.setDisplayState(DISPLAY_STATE.hidden)
|
|
157
|
-
this.state.callback(
|
|
157
|
+
this.state.callback(null)
|
|
158
158
|
}
|
|
159
159
|
|
|
160
160
|
setDisplayState(displayState) {
|