cm-chessboard 5.4.4 → 5.4.7
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 +1 -1
- 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 +1 -1
|
@@ -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
|
|
|
@@ -5,5 +5,5 @@
|
|
|
5
5
|
"promotion-dialog.scss"
|
|
6
6
|
],
|
|
7
7
|
"names": [],
|
|
8
|
-
"mappings": "AAAA,AAGI,GAHD,AAAA,cAAc,CACf,uBAAuB,CAErB,CAAC,
|
|
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
|
}
|