cm-chessboard 5.4.3 → 5.4.6
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/examples/extensions/chessboard-promotion-dialog-extension.html +12 -3
- package/package.json +1 -1
- package/src/cm-chessboard/Chessboard.js +5 -0
- package/src/cm-chessboard/extensions/promotion-dialog/PromotionDialog.js +74 -60
- package/src/cm-chessboard/extensions/promotion-dialog/assets/promotion-dialog.css +16 -13
- package/src/cm-chessboard/extensions/promotion-dialog/assets/promotion-dialog.css.map +1 -1
- package/src/cm-chessboard/extensions/promotion-dialog/assets/promotion-dialog.scss +3 -2
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
import {PromotionDialog} from "../../src/cm-chessboard/extensions/promotion-dialog/PromotionDialog.js"
|
|
24
24
|
|
|
25
25
|
const chessboard = new Chessboard(document.getElementById("chessboard"), {
|
|
26
|
-
position: "
|
|
26
|
+
position: "4k3/1P6/8/8/6r1/8/8/2R1K3 w - - 0 1",
|
|
27
27
|
sprite: {
|
|
28
28
|
url: "../../assets/images/chessboard-sprite.svg", // pieces and markers are stored in a sprite file
|
|
29
29
|
},
|
|
@@ -33,14 +33,23 @@
|
|
|
33
33
|
})
|
|
34
34
|
chessboard.enableMoveInput((event) => {
|
|
35
35
|
console.log("8610fe", event)
|
|
36
|
-
if(event === INPUT_EVENT_TYPE.validateMoveInput) {
|
|
37
|
-
|
|
36
|
+
if (event.type === INPUT_EVENT_TYPE.validateMoveInput) {
|
|
37
|
+
if (event.squareTo.charAt(1) === "8" && event.piece.charAt(1) === "p") {
|
|
38
|
+
chessboard.showPromotionDialog(event.squareTo, COLOR.white, (event) => {
|
|
39
|
+
console.log("48a99d Piece selected", event.piece)
|
|
40
|
+
if(event.piece) {
|
|
41
|
+
chessboard.setPiece(event.square, event.piece, true)
|
|
42
|
+
}
|
|
43
|
+
})
|
|
44
|
+
}
|
|
38
45
|
}
|
|
39
46
|
return true
|
|
40
47
|
})
|
|
48
|
+
/*
|
|
41
49
|
chessboard.showPromotionDialog("c8", COLOR.white, (event) => {
|
|
42
50
|
chessboard.setPiece(event.square, event.piece, true)
|
|
43
51
|
})
|
|
52
|
+
*/
|
|
44
53
|
window.switchOrientation = function () {
|
|
45
54
|
chessboard.setOrientation(chessboard.getOrientation() === 'w' ? 'b' : 'w')
|
|
46
55
|
}
|
package/package.json
CHANGED
|
@@ -211,13 +211,16 @@ export class Chessboard {
|
|
|
211
211
|
return
|
|
212
212
|
}
|
|
213
213
|
eventHandler({
|
|
214
|
+
mouseEvent: e,
|
|
214
215
|
chessboard: this,
|
|
215
216
|
type: e.button === 2 ? SQUARE_SELECT_TYPE.secondary : SQUARE_SELECT_TYPE.primary,
|
|
216
217
|
square: square
|
|
217
218
|
})
|
|
218
219
|
}
|
|
219
220
|
this.context.addEventListener("contextmenu", this.squareSelectListener)
|
|
221
|
+
this.context.addEventListener("mousedown", this.squareSelectListener)
|
|
220
222
|
this.context.addEventListener("mouseup", this.squareSelectListener)
|
|
223
|
+
this.context.addEventListener("touchstart", this.squareSelectListener)
|
|
221
224
|
this.context.addEventListener("touchend", this.squareSelectListener)
|
|
222
225
|
this.state.squareSelectEnabled = true
|
|
223
226
|
this.view.visualizeInputState()
|
|
@@ -225,7 +228,9 @@ export class Chessboard {
|
|
|
225
228
|
|
|
226
229
|
disableSquareSelect() {
|
|
227
230
|
this.context.removeEventListener("contextmenu", this.squareSelectListener)
|
|
231
|
+
this.context.removeEventListener("mousedown", this.squareSelectListener)
|
|
228
232
|
this.context.removeEventListener("mouseup", this.squareSelectListener)
|
|
233
|
+
this.context.removeEventListener("touchstart", this.squareSelectListener)
|
|
229
234
|
this.context.removeEventListener("touchend", this.squareSelectListener)
|
|
230
235
|
this.squareSelectListener = undefined
|
|
231
236
|
this.state.squareSelectEnabled = false
|
|
@@ -42,72 +42,76 @@ export class PromotionDialog extends Extension {
|
|
|
42
42
|
if (!this.state.square) {
|
|
43
43
|
return
|
|
44
44
|
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
let turned = false
|
|
55
|
-
const rank = parseInt(this.state.square.charAt(1), 10)
|
|
56
|
-
if (this.chessboard.getOrientation() === COLOR.white && rank < 5 ||
|
|
57
|
-
this.chessboard.getOrientation() === COLOR.black && rank >= 5) {
|
|
58
|
-
turned = true
|
|
45
|
+
clearTimeout(this.redrawDialogDebounce)
|
|
46
|
+
this.redrawDialogDebounce = setTimeout(() => {
|
|
47
|
+
const squareWidth = this.chessboard.view.squareWidth
|
|
48
|
+
const squareHeight = this.chessboard.view.squareHeight
|
|
49
|
+
const squareCenterPoint = this.chessboard.view.squareToPoint(this.state.square)
|
|
50
|
+
squareCenterPoint.x = squareCenterPoint.x + squareWidth / 2
|
|
51
|
+
squareCenterPoint.y = squareCenterPoint.y + squareHeight / 2
|
|
52
|
+
while (this.promotionDialogGroup.firstChild) {
|
|
53
|
+
this.promotionDialogGroup.removeChild(this.promotionDialogGroup.firstChild)
|
|
59
54
|
}
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
55
|
+
if (this.state.isShown) {
|
|
56
|
+
let turned = false
|
|
57
|
+
const rank = parseInt(this.state.square.charAt(1), 10)
|
|
58
|
+
if (this.chessboard.getOrientation() === COLOR.white && rank < 5 ||
|
|
59
|
+
this.chessboard.getOrientation() === COLOR.black && rank >= 5) {
|
|
60
|
+
turned = true
|
|
61
|
+
}
|
|
62
|
+
const offsetY = turned ? -4 * squareHeight : 0
|
|
63
|
+
const offsetX = squareCenterPoint.x + squareWidth > this.chessboard.view.width ? -squareWidth : 0
|
|
64
|
+
Svg.addElement(this.promotionDialogGroup,
|
|
65
|
+
"rect", {
|
|
66
|
+
x: squareCenterPoint.x + offsetX,
|
|
67
|
+
y: squareCenterPoint.y + offsetY,
|
|
68
|
+
width: squareWidth,
|
|
69
|
+
height: squareHeight * 4,
|
|
70
|
+
class: "promotion-dialog"
|
|
71
|
+
})
|
|
72
|
+
if (turned) {
|
|
73
|
+
this.drawPieceButton(PIECE[this.state.color + "q"], {
|
|
74
|
+
x: squareCenterPoint.x + offsetX,
|
|
75
|
+
y: squareCenterPoint.y - squareHeight
|
|
76
|
+
})
|
|
77
|
+
this.drawPieceButton(PIECE[this.state.color + "r"], {
|
|
78
|
+
x: squareCenterPoint.x + offsetX,
|
|
79
|
+
y: squareCenterPoint.y - squareHeight * 2
|
|
80
|
+
})
|
|
81
|
+
this.drawPieceButton(PIECE[this.state.color + "b"], {
|
|
82
|
+
x: squareCenterPoint.x + offsetX,
|
|
83
|
+
y: squareCenterPoint.y - squareHeight * 3
|
|
84
|
+
})
|
|
85
|
+
this.drawPieceButton(PIECE[this.state.color + "n"], {
|
|
86
|
+
x: squareCenterPoint.x + offsetX,
|
|
87
|
+
y: squareCenterPoint.y - squareHeight * 4
|
|
88
|
+
})
|
|
89
|
+
} else {
|
|
90
|
+
this.drawPieceButton(PIECE[this.state.color + "q"], {
|
|
91
|
+
x: squareCenterPoint.x + offsetX,
|
|
92
|
+
y: squareCenterPoint.y
|
|
93
|
+
})
|
|
94
|
+
this.drawPieceButton(PIECE[this.state.color + "r"], {
|
|
95
|
+
x: squareCenterPoint.x + offsetX,
|
|
96
|
+
y: squareCenterPoint.y + squareHeight
|
|
97
|
+
})
|
|
98
|
+
this.drawPieceButton(PIECE[this.state.color + "b"], {
|
|
99
|
+
x: squareCenterPoint.x + offsetX,
|
|
100
|
+
y: squareCenterPoint.y + squareHeight * 2
|
|
101
|
+
})
|
|
102
|
+
this.drawPieceButton(PIECE[this.state.color + "n"], {
|
|
103
|
+
x: squareCenterPoint.x + offsetX,
|
|
104
|
+
y: squareCenterPoint.y + squareHeight * 3
|
|
105
|
+
})
|
|
106
|
+
}
|
|
104
107
|
}
|
|
105
|
-
}
|
|
108
|
+
}, 200)
|
|
106
109
|
}
|
|
107
110
|
|
|
108
111
|
promotionDialogOnClickPiece(event) {
|
|
109
|
-
this.state.callback({square: this.state.square, piece: event.target.dataset.piece})
|
|
110
112
|
this.state.isShown = false
|
|
113
|
+
this.chessboard.disableSquareSelect()
|
|
114
|
+
this.state.callback({square: this.state.square, piece: event.target.dataset.piece})
|
|
111
115
|
this.redrawDialog()
|
|
112
116
|
}
|
|
113
117
|
|
|
@@ -116,6 +120,16 @@ export class PromotionDialog extends Extension {
|
|
|
116
120
|
this.state.square = square
|
|
117
121
|
this.state.color = color
|
|
118
122
|
this.state.callback = callback
|
|
123
|
+
const mousedownListener = (event) => {
|
|
124
|
+
// console.log("98c265", event)
|
|
125
|
+
if (!event.target.dataset.piece && this.state.isShown) {
|
|
126
|
+
this.state.isShown = false
|
|
127
|
+
this.state.callback({square: this.state.square, piece: null})
|
|
128
|
+
this.redrawDialog()
|
|
129
|
+
}
|
|
130
|
+
this.chessboard.view.svg.removeEventListener("mousedown", mousedownListener)
|
|
131
|
+
}
|
|
132
|
+
this.chessboard.view.svg.addEventListener("mousedown", mousedownListener)
|
|
119
133
|
this.redrawDialog()
|
|
120
134
|
}
|
|
121
135
|
|
|
@@ -1,16 +1,19 @@
|
|
|
1
|
-
svg.cm-chessboard .promotion-dialog-group {
|
|
2
|
-
animation: fade-in 0.25s ease-in
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
svg.cm-chessboard .promotion-dialog-group .
|
|
13
|
-
|
|
1
|
+
svg.cm-chessboard .promotion-dialog-group rect, svg.cm-chessboard .promotion-dialog-group g[data-piece] {
|
|
2
|
+
animation: fade-in 0.25s ease-in; }
|
|
3
|
+
|
|
4
|
+
svg.cm-chessboard .promotion-dialog-group .promotion-dialog {
|
|
5
|
+
fill: black;
|
|
6
|
+
fill-opacity: 0.3;
|
|
7
|
+
stroke: rgba(0, 0, 0, 0.3); }
|
|
8
|
+
|
|
9
|
+
svg.cm-chessboard .promotion-dialog-group .promotion-dialog-button {
|
|
10
|
+
fill: transparent;
|
|
11
|
+
cursor: pointer; }
|
|
12
|
+
svg.cm-chessboard .promotion-dialog-group .promotion-dialog-button:hover {
|
|
13
|
+
fill: rgba(0, 0, 0, 0.2); }
|
|
14
|
+
|
|
15
|
+
svg.cm-chessboard .promotion-dialog-group .piece-group {
|
|
16
|
+
pointer-events: none; }
|
|
14
17
|
|
|
15
18
|
@keyframes fade-in {
|
|
16
19
|
0% {
|
|
@@ -5,5 +5,5 @@
|
|
|
5
5
|
"promotion-dialog.scss"
|
|
6
6
|
],
|
|
7
7
|
"names": [],
|
|
8
|
-
"mappings": "AAAA,
|
|
8
|
+
"mappings": "AAAA,AAGI,GAHD,AAAA,cAAc,CACf,uBAAuB,CAErB,IAAI,EAHR,GAAG,AAAA,cAAc,CACf,uBAAuB,CAEf,CAAC,CAAA,AAAA,UAAC,AAAA,EAAY;EAClB,SAAS,EAAE,qBAAqB,GACjC;;AALL,AAOI,GAPD,AAAA,cAAc,CACf,uBAAuB,CAMrB,iBAAiB,CAAC;EAChB,IAAI,EAAE,KAAK;EACX,YAAY,EAAE,GAAG;EACjB,MAAM,EAAE,kBAAkB,GAC3B;;AAXL,AAaI,GAbD,AAAA,cAAc,CACf,uBAAuB,CAYrB,wBAAwB,CAAC;EACvB,IAAI,EAAE,WAAW;EACjB,MAAM,EAAE,OAAO,GAKhB;EApBL,AAiBM,GAjBH,AAAA,cAAc,CACf,uBAAuB,CAYrB,wBAAwB,CAIpB,KAAK,CAAC;IACN,IAAI,EAAE,kBAAkB,GACzB;;AAnBP,AAsBI,GAtBD,AAAA,cAAc,CACf,uBAAuB,CAqBrB,YAAY,CAAC;EACX,cAAc,EAAE,IAAI,GACrB;;AAIL,UAAU,CAAV,OAAU;EACR,EAAE;IACA,OAAO,EAAE,CAAC;EAEZ,IAAI;IACF,OAAO,EAAE,CAAC"
|
|
9
9
|
}
|