cm-chessboard 3.17.7 → 3.18.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.
- package/assets/styles/cm-chessboard.css +1 -1
- package/assets/styles/cm-chessboard.css.map +1 -1
- package/assets/styles/cm-chessboard.scss +2 -2
- package/examples/enable-input.html +1 -0
- package/package.json +1 -1
- package/src/cm-chessboard/Chessboard.js +25 -37
- package/src/cm-chessboard/ChessboardView.js +18 -18
- package/src/cm-chessboard/ChessboardViewAccessible.js +65 -17
- package/test/TestBoard.js +1 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
.cm-chessboard .board.input-enabled .square{cursor:pointer}.cm-chessboard .markers .marker.markerFrame,.cm-chessboard .markers .marker.marker-frame{stroke:black;stroke-width:1.8px;opacity:0.5}.cm-chessboard .markers .marker.markerFrameRed,.cm-chessboard .markers .marker.marker-frame-red{stroke:#aa0000;stroke-width:1.8px;opacity:0.4}.cm-chessboard .markers .marker.markerSquare,.cm-chessboard .markers .marker.marker-square{fill:black;opacity:0.11}.cm-chessboard .markers .marker.markerDot,.cm-chessboard .markers .marker.marker-dot{fill:black;opacity:0.3}.cm-chessboard .markers .marker.markerCircle,.cm-chessboard .markers .marker.marker-circle{stroke:#000055;stroke-width:3px;opacity:0.4}.cm-chessboard .markers .marker.markerCircleRed,.cm-chessboard .markers .marker.marker-circle-red{stroke:#aa0000;stroke-width:3px;opacity:0.4}.cm-chessboard .pieces,.cm-chessboard .markers{pointer-events:none}.cm-chessboard-content .list-inline{padding-left:0;list-style:none}.cm-chessboard-content .list-inline-item{display:inline-block}.cm-chessboard-content .list-inline-item:not(:last-child){margin-right:1rem}.cm-chessboard-content .list-inline{padding-left:0;list-style:none}.cm-chessboard-content .list-inline-item{display:inline-block}.cm-chessboard-content .list-inline-item:not(:last-child){margin-right:1rem}.cm-chessboard.default .board .square.white{fill:#ecdab9}.cm-chessboard.default .board .square.black{fill:#c5a076}.cm-chessboard.default.border-type-thin .board .border{stroke:#c5a076;stroke-width:0.7%;fill:transparent}.cm-chessboard.default.border-type-frame .board .border{fill:#ecdab9;stroke:none}.cm-chessboard.default.border-type-frame .board .border-inner{fill:transparent;stroke:#c5a076;stroke-width:0.7%}.cm-chessboard.default .coordinates{pointer-events:none;user-select:none}.cm-chessboard.default .coordinates .coordinate{fill:#c5a076;font-size:7px;cursor:default}.cm-chessboard.default .coordinates .coordinate.black{fill:#ecdab9}.cm-chessboard.default .coordinates .coordinate.white{fill:#c5a076}.cm-chessboard.green .board .square.white{fill:#E0DDCC}.cm-chessboard.green .board .square.black{fill:#4c946a}.cm-chessboard.green.border-type-thin .board .border{stroke:#4c946a;stroke-width:0.7%;fill:transparent}.cm-chessboard.green.border-type-frame .board .border{fill:#E0DDCC;stroke:none}.cm-chessboard.green.border-type-frame .board .border-inner{fill:transparent;stroke:#4c946a;stroke-width:0.7%}.cm-chessboard.green .coordinates{pointer-events:none;user-select:none}.cm-chessboard.green .coordinates .coordinate{fill:#4c946a;font-size:7px;cursor:default}.cm-chessboard.green .coordinates .coordinate.black{fill:#E0DDCC}.cm-chessboard.green .coordinates .coordinate.white{fill:#4c946a}.cm-chessboard.blue .board .square.white{fill:#d8ecfb}.cm-chessboard.blue .board .square.black{fill:#86afcf}.cm-chessboard.blue.border-type-thin .board .border{stroke:#86afcf;stroke-width:0.7%;fill:transparent}.cm-chessboard.blue.border-type-frame .board .border{fill:#d8ecfb;stroke:none}.cm-chessboard.blue.border-type-frame .board .border-inner{fill:transparent;stroke:#86afcf;stroke-width:0.7%}.cm-chessboard.blue .coordinates{pointer-events:none;user-select:none}.cm-chessboard.blue .coordinates .coordinate{fill:#86afcf;font-size:7px;cursor:default}.cm-chessboard.blue .coordinates .coordinate.black{fill:#d8ecfb}.cm-chessboard.blue .coordinates .coordinate.white{fill:#86afcf}.cm-chessboard.chess-club .board .square.white{fill:#E6D3B1}.cm-chessboard.chess-club .board .square.black{fill:#AF6B3F}.cm-chessboard.chess-club.border-type-thin .board .border{stroke:#692e2b;stroke-width:0.7%;fill:transparent}.cm-chessboard.chess-club.border-type-frame .board .border{fill:#692e2b;stroke:none}.cm-chessboard.chess-club.border-type-frame .board .border-inner{fill:transparent;stroke:#692e2b;stroke-width:0.7%}.cm-chessboard.chess-club .coordinates{pointer-events:none;user-select:none}.cm-chessboard.chess-club .coordinates .coordinate{fill:#E6D3B1;font-size:7px;cursor:default}.cm-chessboard.chess-club .coordinates .coordinate.black{fill:#E6D3B1}.cm-chessboard.chess-club .coordinates .coordinate.white{fill:#AF6B3F}.cm-chessboard.chessboard-js .board .square.white{fill:#f0d9b5}.cm-chessboard.chessboard-js .board .square.black{fill:#b58863}.cm-chessboard.chessboard-js.border-type-thin .board .border{stroke:#404040;stroke-width:0.7%;fill:transparent}.cm-chessboard.chessboard-js.border-type-frame .board .border{fill:#f0d9b5;stroke:none}.cm-chessboard.chessboard-js.border-type-frame .board .border-inner{fill:transparent;stroke:#404040;stroke-width:0.7%}.cm-chessboard.chessboard-js .coordinates{pointer-events:none;user-select:none}.cm-chessboard.chessboard-js .coordinates .coordinate{fill:#404040;font-size:7px;cursor:default}.cm-chessboard.chessboard-js .coordinates .coordinate.black{fill:#f0d9b5}.cm-chessboard.chessboard-js .coordinates .coordinate.white{fill:#b58863}.cm-chessboard.black-and-white .board .square.white{fill:#fff}.cm-chessboard.black-and-white .board .square.black{fill:#9c9c9c}.cm-chessboard.black-and-white.border-type-thin .board .border{stroke:#9c9c9c;stroke-width:0.7%;fill:transparent}.cm-chessboard.black-and-white.border-type-frame .board .border{fill:#fff;stroke:none}.cm-chessboard.black-and-white.border-type-frame .board .border-inner{fill:transparent;stroke:#9c9c9c;stroke-width:0.7%}.cm-chessboard.black-and-white .coordinates{pointer-events:none;user-select:none}.cm-chessboard.black-and-white .coordinates .coordinate{fill:#9c9c9c;font-size:7px;cursor:default}.cm-chessboard.black-and-white .coordinates .coordinate.black{fill:#fff}.cm-chessboard.black-and-white .coordinates .coordinate.white{fill:#9c9c9c}
|
|
1
|
+
.cm-chessboard .board.input-enabled .square{cursor:pointer}.cm-chessboard .markers .marker.markerFrame,.cm-chessboard .markers .marker.marker-frame{stroke:black;stroke-width:1.8px;opacity:0.5}.cm-chessboard .markers .marker.markerFrameRed,.cm-chessboard .markers .marker.marker-frame-red{stroke:#aa0000;stroke-width:1.8px;opacity:0.4}.cm-chessboard .markers .marker.markerSquare,.cm-chessboard .markers .marker.marker-square{fill:black;opacity:0.11}.cm-chessboard .markers .marker.markerDot,.cm-chessboard .markers .marker.marker-dot{fill:black;opacity:0.3}.cm-chessboard .markers .marker.markerCircle,.cm-chessboard .markers .marker.marker-circle{stroke:#000055;stroke-width:3px;opacity:0.4}.cm-chessboard .markers .marker.markerCircleRed,.cm-chessboard .markers .marker.marker-circle-red{stroke:#aa0000;stroke-width:3px;opacity:0.4}.cm-chessboard .pieces,.cm-chessboard .markers{pointer-events:none}.cm-chessboard-content .list-inline{padding-left:0;list-style:none}.cm-chessboard-content .list-inline-item{display:inline-block}.cm-chessboard-content .list-inline-item:not(:last-child){margin-right:1rem}.cm-chessboard-content .list-inline{padding-left:0;list-style:none}.cm-chessboard-content .list-inline-item{display:inline-block}.cm-chessboard-content .list-inline-item:not(:last-child){margin-right:1rem}.cm-chessboard-content.visually-hidden{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.cm-chessboard.default .board .square.white{fill:#ecdab9}.cm-chessboard.default .board .square.black{fill:#c5a076}.cm-chessboard.default.border-type-thin .board .border{stroke:#c5a076;stroke-width:0.7%;fill:transparent}.cm-chessboard.default.border-type-frame .board .border{fill:#ecdab9;stroke:none}.cm-chessboard.default.border-type-frame .board .border-inner{fill:transparent;stroke:#c5a076;stroke-width:0.7%}.cm-chessboard.default .coordinates{pointer-events:none;user-select:none}.cm-chessboard.default .coordinates .coordinate{fill:#c5a076;font-size:7px;cursor:default}.cm-chessboard.default .coordinates .coordinate.black{fill:#ecdab9}.cm-chessboard.default .coordinates .coordinate.white{fill:#c5a076}.cm-chessboard.green .board .square.white{fill:#E0DDCC}.cm-chessboard.green .board .square.black{fill:#4c946a}.cm-chessboard.green.border-type-thin .board .border{stroke:#4c946a;stroke-width:0.7%;fill:transparent}.cm-chessboard.green.border-type-frame .board .border{fill:#E0DDCC;stroke:none}.cm-chessboard.green.border-type-frame .board .border-inner{fill:transparent;stroke:#4c946a;stroke-width:0.7%}.cm-chessboard.green .coordinates{pointer-events:none;user-select:none}.cm-chessboard.green .coordinates .coordinate{fill:#4c946a;font-size:7px;cursor:default}.cm-chessboard.green .coordinates .coordinate.black{fill:#E0DDCC}.cm-chessboard.green .coordinates .coordinate.white{fill:#4c946a}.cm-chessboard.blue .board .square.white{fill:#d8ecfb}.cm-chessboard.blue .board .square.black{fill:#86afcf}.cm-chessboard.blue.border-type-thin .board .border{stroke:#86afcf;stroke-width:0.7%;fill:transparent}.cm-chessboard.blue.border-type-frame .board .border{fill:#d8ecfb;stroke:none}.cm-chessboard.blue.border-type-frame .board .border-inner{fill:transparent;stroke:#86afcf;stroke-width:0.7%}.cm-chessboard.blue .coordinates{pointer-events:none;user-select:none}.cm-chessboard.blue .coordinates .coordinate{fill:#86afcf;font-size:7px;cursor:default}.cm-chessboard.blue .coordinates .coordinate.black{fill:#d8ecfb}.cm-chessboard.blue .coordinates .coordinate.white{fill:#86afcf}.cm-chessboard.chess-club .board .square.white{fill:#E6D3B1}.cm-chessboard.chess-club .board .square.black{fill:#AF6B3F}.cm-chessboard.chess-club.border-type-thin .board .border{stroke:#692e2b;stroke-width:0.7%;fill:transparent}.cm-chessboard.chess-club.border-type-frame .board .border{fill:#692e2b;stroke:none}.cm-chessboard.chess-club.border-type-frame .board .border-inner{fill:transparent;stroke:#692e2b;stroke-width:0.7%}.cm-chessboard.chess-club .coordinates{pointer-events:none;user-select:none}.cm-chessboard.chess-club .coordinates .coordinate{fill:#E6D3B1;font-size:7px;cursor:default}.cm-chessboard.chess-club .coordinates .coordinate.black{fill:#E6D3B1}.cm-chessboard.chess-club .coordinates .coordinate.white{fill:#AF6B3F}.cm-chessboard.chessboard-js .board .square.white{fill:#f0d9b5}.cm-chessboard.chessboard-js .board .square.black{fill:#b58863}.cm-chessboard.chessboard-js.border-type-thin .board .border{stroke:#404040;stroke-width:0.7%;fill:transparent}.cm-chessboard.chessboard-js.border-type-frame .board .border{fill:#f0d9b5;stroke:none}.cm-chessboard.chessboard-js.border-type-frame .board .border-inner{fill:transparent;stroke:#404040;stroke-width:0.7%}.cm-chessboard.chessboard-js .coordinates{pointer-events:none;user-select:none}.cm-chessboard.chessboard-js .coordinates .coordinate{fill:#404040;font-size:7px;cursor:default}.cm-chessboard.chessboard-js .coordinates .coordinate.black{fill:#f0d9b5}.cm-chessboard.chessboard-js .coordinates .coordinate.white{fill:#b58863}.cm-chessboard.black-and-white .board .square.white{fill:#fff}.cm-chessboard.black-and-white .board .square.black{fill:#9c9c9c}.cm-chessboard.black-and-white.border-type-thin .board .border{stroke:#9c9c9c;stroke-width:0.7%;fill:transparent}.cm-chessboard.black-and-white.border-type-frame .board .border{fill:#fff;stroke:none}.cm-chessboard.black-and-white.border-type-frame .board .border-inner{fill:transparent;stroke:#9c9c9c;stroke-width:0.7%}.cm-chessboard.black-and-white .coordinates{pointer-events:none;user-select:none}.cm-chessboard.black-and-white .coordinates .coordinate{fill:#9c9c9c;font-size:7px;cursor:default}.cm-chessboard.black-and-white .coordinates .coordinate.black{fill:#fff}.cm-chessboard.black-and-white .coordinates .coordinate.white{fill:#9c9c9c}
|
|
2
2
|
|
|
3
3
|
/*# sourceMappingURL=cm-chessboard.css.map */
|
|
@@ -6,5 +6,5 @@
|
|
|
6
6
|
"_cm-chessboard-theme.scss"
|
|
7
7
|
],
|
|
8
8
|
"names": [],
|
|
9
|
-
"mappings": "AAGA,AAGM,cAHQ,CACZ,MAAM,AACH,cAAc,CACb,OAAO,AAAC,CACN,MAAM,CAAE,OAAO,CAChB,AALP,AAYM,cAZQ,CASZ,QAAQ,CACN,OAAO,AAEJ,YAAY,CAZnB,cAAc,CASZ,QAAQ,CACN,OAAO,AAEW,aAAa,AAAC,CAC5B,MAAM,CAAE,KAAK,CACb,YAAY,CAAE,KAAK,CACnB,OAAO,CAAE,GAAG,CACb,AAhBP,AAkBM,cAlBQ,CASZ,QAAQ,CACN,OAAO,AAQJ,eAAe,CAlBtB,cAAc,CASZ,QAAQ,CACN,OAAO,AAQc,iBAAiB,AAAC,CACnC,MAAM,CAAE,OAAO,CACf,YAAY,CAAE,KAAK,CACnB,OAAO,CAAE,GAAG,CACb,AAtBP,AAwBM,cAxBQ,CASZ,QAAQ,CACN,OAAO,AAcJ,aAAa,CAxBpB,cAAc,CASZ,QAAQ,CACN,OAAO,AAcY,cAAc,AAAC,CAC9B,IAAI,CAAE,KAAK,CACX,OAAO,CAAE,IAAI,CACd,AA3BP,AA6BM,cA7BQ,CASZ,QAAQ,CACN,OAAO,AAmBJ,UAAU,CA7BjB,cAAc,CASZ,QAAQ,CACN,OAAO,AAmBS,WAAW,AAAC,CACxB,IAAI,CAAE,KAAK,CACX,OAAO,CAAE,GAAG,CACb,AAhCP,AAkCM,cAlCQ,CASZ,QAAQ,CACN,OAAO,AAwBJ,aAAa,CAlCpB,cAAc,CASZ,QAAQ,CACN,OAAO,AAwBY,cAAc,AAAC,CAC9B,MAAM,CAAE,OAAO,CACf,YAAY,CAAE,GAAG,CACjB,OAAO,CAAE,GAAG,CACb,AAtCP,AAwCM,cAxCQ,CASZ,QAAQ,CACN,OAAO,AA8BJ,gBAAgB,CAxCvB,cAAc,CASZ,QAAQ,CACN,OAAO,AA8Be,kBAAkB,AAAC,CACrC,MAAM,CAAE,OAAO,CACf,YAAY,CAAE,GAAG,CACjB,OAAO,CAAE,GAAG,CACb,AA5CP,AAgDE,cAhDY,CAgDZ,OAAO,CAhDT,cAAc,CAgDH,QAAQ,AAAC,CAEhB,cAAc,CAAE,IAAI,CACrB,AAEH,AACE,sBADoB,CACpB,YAAY,AAAC,CACX,YAAY,CAAE,CAAC,CACf,UAAU,CAAE,IAAI,CACjB,AAJH,AAKE,sBALoB,CAKpB,iBAAiB,AAAC,CAChB,OAAO,CAAE,YAAY,CAKtB,AAXH,AAQI,sBARkB,CAKpB,iBAAiB,CAGd,GAAK,EAAC,UAAU,CAAE,CACjB,YAAY,CAAE,IAAI,CACnB,AAIL,AACE,sBADoB,CACpB,YAAY,AAAC,CACX,YAAY,CAAE,CAAC,CACf,UAAU,CAAE,IAAI,CACjB,AAJH,AAME,sBANoB,CAMpB,iBAAiB,AAAC,CAChB,OAAO,CAAE,YAAY,CAKtB,AAZH,AASI,sBATkB,CAMpB,iBAAiB,CAGd,GAAK,EAAC,UAAU,CAAE,CACjB,YAAY,CAAE,IAAI,CACnB,
|
|
9
|
+
"mappings": "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"
|
|
10
10
|
}
|
package/package.json
CHANGED
|
@@ -41,11 +41,12 @@ export const FEN_EMPTY_POSITION = "8/8/8/8/8/8/8/8"
|
|
|
41
41
|
|
|
42
42
|
export class Chessboard {
|
|
43
43
|
|
|
44
|
-
constructor(
|
|
45
|
-
if (!
|
|
46
|
-
throw new Error("container element is " +
|
|
44
|
+
constructor(context, props = {}) {
|
|
45
|
+
if (!context) {
|
|
46
|
+
throw new Error("container element is " + context)
|
|
47
47
|
}
|
|
48
|
-
this.
|
|
48
|
+
this.context = context
|
|
49
|
+
this.id = (Math.random() + 1).toString(36).substr(2, 6)
|
|
49
50
|
let defaultProps = {
|
|
50
51
|
position: "empty", // set as fen, "start" or "empty"
|
|
51
52
|
orientation: COLOR.white, // white on bottom
|
|
@@ -57,8 +58,6 @@ export class Chessboard {
|
|
|
57
58
|
aspectRatio: 1, // height/width. Set to `undefined`, if you want to define it only in the css.
|
|
58
59
|
moveFromMarker: MARKER_TYPE.frame, // the marker used to mark the start square
|
|
59
60
|
moveToMarker: MARKER_TYPE.frame, // the marker used to mark the square where the figure is moving to
|
|
60
|
-
moveMarker: MARKER_TYPE.frame, // deprecated => moveFromMarker // TODO remove in future
|
|
61
|
-
hoverMarker: MARKER_TYPE.frame // deprecated => moveToMarker // TODO remove in future
|
|
62
61
|
},
|
|
63
62
|
responsive: true, // resizes the board based on element size
|
|
64
63
|
animationDuration: 300, // pieces animation duration in milliseconds
|
|
@@ -79,31 +78,20 @@ export class Chessboard {
|
|
|
79
78
|
if (props.style) {
|
|
80
79
|
Object.assign(this.props.style, props.style)
|
|
81
80
|
}
|
|
82
|
-
if(this.props.style.moveMarker !== MARKER_TYPE.frame) { // TODO remove in future
|
|
83
|
-
console.warn("this.props.style.moveMarker is deprecated, use this.props.style.moveFromMarker")
|
|
84
|
-
this.props.style.moveFromMarker = this.props.style.moveMarker
|
|
85
|
-
}
|
|
86
|
-
if(this.props.style.hoverMarker !== MARKER_TYPE.frame) { // TODO remove in future
|
|
87
|
-
console.warn("this.props.style.hoverMarker is deprecated, use this.props.style.moveToMarker")
|
|
88
|
-
this.props.style.moveToMarker = this.props.style.hoverMarker
|
|
89
|
-
}
|
|
90
81
|
if (this.props.style.aspectRatio) {
|
|
91
|
-
this.
|
|
82
|
+
this.context.style.height = (this.context.offsetWidth * this.props.style.aspectRatio) + "px"
|
|
92
83
|
}
|
|
93
84
|
this.state = new ChessboardState()
|
|
85
|
+
if (this.props.position === "start") {
|
|
86
|
+
this.state.setPosition(FEN_START_POSITION)
|
|
87
|
+
} else if (this.props.position === "empty" || this.props.position === undefined) {
|
|
88
|
+
this.state.setPosition(FEN_EMPTY_POSITION)
|
|
89
|
+
} else {
|
|
90
|
+
this.state.setPosition(this.props.position)
|
|
91
|
+
}
|
|
94
92
|
this.state.orientation = this.props.orientation
|
|
95
|
-
|
|
96
93
|
const viewType = this.props.accessible ? ChessboardViewAccessible : ChessboardView
|
|
97
|
-
this.view = new viewType(this
|
|
98
|
-
if (this.props.position === "start") {
|
|
99
|
-
this.state.setPosition(FEN_START_POSITION)
|
|
100
|
-
} else if (this.props.position === "empty" || this.props.position === undefined) {
|
|
101
|
-
this.state.setPosition(FEN_EMPTY_POSITION)
|
|
102
|
-
} else {
|
|
103
|
-
this.state.setPosition(this.props.position)
|
|
104
|
-
}
|
|
105
|
-
view.redraw()
|
|
106
|
-
})
|
|
94
|
+
this.view = new viewType(this)
|
|
107
95
|
}
|
|
108
96
|
|
|
109
97
|
// API //
|
|
@@ -211,9 +199,9 @@ export class Chessboard {
|
|
|
211
199
|
this.view = undefined
|
|
212
200
|
this.state = undefined
|
|
213
201
|
if (this.squareSelectListener) {
|
|
214
|
-
this.
|
|
215
|
-
this.
|
|
216
|
-
this.
|
|
202
|
+
this.context.removeEventListener("contextmenu", this.squareSelectListener)
|
|
203
|
+
this.context.removeEventListener("mouseup", this.squareSelectListener)
|
|
204
|
+
this.context.removeEventListener("touchend", this.squareSelectListener)
|
|
217
205
|
}
|
|
218
206
|
}
|
|
219
207
|
|
|
@@ -260,20 +248,20 @@ export class Chessboard {
|
|
|
260
248
|
square: SQUARE_COORDINATES[index]
|
|
261
249
|
})
|
|
262
250
|
}
|
|
263
|
-
this.
|
|
264
|
-
this.
|
|
265
|
-
this.
|
|
251
|
+
this.context.addEventListener("contextmenu", this.squareSelectListener)
|
|
252
|
+
this.context.addEventListener("mouseup", this.squareSelectListener)
|
|
253
|
+
this.context.addEventListener("touchend", this.squareSelectListener)
|
|
266
254
|
this.state.squareSelectEnabled = true
|
|
267
|
-
this.view.
|
|
255
|
+
this.view.visualizeInputState()
|
|
268
256
|
}
|
|
269
257
|
|
|
270
258
|
disableSquareSelect() {
|
|
271
|
-
this.
|
|
272
|
-
this.
|
|
273
|
-
this.
|
|
259
|
+
this.context.removeEventListener("contextmenu", this.squareSelectListener)
|
|
260
|
+
this.context.removeEventListener("mouseup", this.squareSelectListener)
|
|
261
|
+
this.context.removeEventListener("touchend", this.squareSelectListener)
|
|
274
262
|
this.squareSelectListener = undefined
|
|
275
263
|
this.state.squareSelectEnabled = false
|
|
276
|
-
this.view.
|
|
264
|
+
this.view.visualizeInputState()
|
|
277
265
|
}
|
|
278
266
|
|
|
279
267
|
}
|
|
@@ -60,7 +60,7 @@ export const SQUARE_COORDINATES = [
|
|
|
60
60
|
|
|
61
61
|
export class ChessboardView {
|
|
62
62
|
|
|
63
|
-
constructor(chessboard
|
|
63
|
+
constructor(chessboard) {
|
|
64
64
|
this.animationRunning = false
|
|
65
65
|
this.currentAnimation = undefined
|
|
66
66
|
this.chessboard = chessboard
|
|
@@ -80,7 +80,7 @@ export class ChessboardView {
|
|
|
80
80
|
this.resizeObserver = new ResizeObserver(() => {
|
|
81
81
|
this.handleResize()
|
|
82
82
|
})
|
|
83
|
-
this.resizeObserver.observe(this.chessboard.
|
|
83
|
+
this.resizeObserver.observe(this.chessboard.context)
|
|
84
84
|
} else {
|
|
85
85
|
this.resizeListener = this.handleResize.bind(this)
|
|
86
86
|
window.addEventListener("resize", this.resizeListener)
|
|
@@ -88,15 +88,15 @@ export class ChessboardView {
|
|
|
88
88
|
}
|
|
89
89
|
|
|
90
90
|
this.pointerDownListener = this.pointerDownHandler.bind(this)
|
|
91
|
-
this.chessboard.
|
|
92
|
-
this.chessboard.
|
|
91
|
+
this.chessboard.context.addEventListener("mousedown", this.pointerDownListener)
|
|
92
|
+
this.chessboard.context.addEventListener("touchstart", this.pointerDownListener)
|
|
93
93
|
|
|
94
94
|
this.createSvgAndGroups()
|
|
95
95
|
this.updateMetrics()
|
|
96
|
-
callbackAfterCreation(this)
|
|
97
96
|
if (chessboard.props.responsive) {
|
|
98
97
|
this.handleResize()
|
|
99
98
|
}
|
|
99
|
+
this.redraw()
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
pointerDownHandler(e) {
|
|
@@ -106,13 +106,13 @@ export class ChessboardView {
|
|
|
106
106
|
destroy() {
|
|
107
107
|
this.moveInput.destroy()
|
|
108
108
|
if (this.resizeObserver) {
|
|
109
|
-
this.resizeObserver.unobserve(this.chessboard.
|
|
109
|
+
this.resizeObserver.unobserve(this.chessboard.context)
|
|
110
110
|
}
|
|
111
111
|
if (this.resizeListener) {
|
|
112
112
|
window.removeEventListener("resize", this.resizeListener)
|
|
113
113
|
}
|
|
114
|
-
this.chessboard.
|
|
115
|
-
this.chessboard.
|
|
114
|
+
this.chessboard.context.removeEventListener("mousedown", this.pointerDownListener)
|
|
115
|
+
this.chessboard.context.removeEventListener("touchstart", this.pointerDownListener)
|
|
116
116
|
Svg.removeElement(this.svg)
|
|
117
117
|
this.animationQueue = []
|
|
118
118
|
if (this.currentAnimation) {
|
|
@@ -142,7 +142,7 @@ export class ChessboardView {
|
|
|
142
142
|
if (this.svg) {
|
|
143
143
|
Svg.removeElement(this.svg)
|
|
144
144
|
}
|
|
145
|
-
this.svg = Svg.createSvg(this.chessboard.
|
|
145
|
+
this.svg = Svg.createSvg(this.chessboard.context)
|
|
146
146
|
let description = document.createElement("description")
|
|
147
147
|
description.innerText = "Chessboard"
|
|
148
148
|
description.id = "svg-description"
|
|
@@ -159,8 +159,8 @@ export class ChessboardView {
|
|
|
159
159
|
}
|
|
160
160
|
|
|
161
161
|
updateMetrics() {
|
|
162
|
-
this.width = this.chessboard.
|
|
163
|
-
this.height = this.chessboard.
|
|
162
|
+
this.width = this.chessboard.context.clientWidth
|
|
163
|
+
this.height = this.chessboard.context.clientHeight
|
|
164
164
|
if (this.chessboard.props.style.borderType === BORDER_TYPE.frame) {
|
|
165
165
|
this.borderSize = this.width / 25
|
|
166
166
|
} else if (this.chessboard.props.style.borderType === BORDER_TYPE.thin) {
|
|
@@ -179,10 +179,10 @@ export class ChessboardView {
|
|
|
179
179
|
|
|
180
180
|
handleResize() {
|
|
181
181
|
if (this.chessboard.props.style.aspectRatio) {
|
|
182
|
-
this.chessboard.
|
|
182
|
+
this.chessboard.context.style.height = (this.chessboard.context.clientWidth * this.chessboard.props.style.aspectRatio) + "px"
|
|
183
183
|
}
|
|
184
|
-
if (this.chessboard.
|
|
185
|
-
this.chessboard.
|
|
184
|
+
if (this.chessboard.context.clientWidth !== this.width ||
|
|
185
|
+
this.chessboard.context.clientHeight !== this.height) {
|
|
186
186
|
this.updateMetrics()
|
|
187
187
|
this.redraw()
|
|
188
188
|
}
|
|
@@ -194,7 +194,7 @@ export class ChessboardView {
|
|
|
194
194
|
this.drawBoard()
|
|
195
195
|
this.drawCoordinates()
|
|
196
196
|
this.drawMarkers()
|
|
197
|
-
this.
|
|
197
|
+
this.visualizeInputState()
|
|
198
198
|
this.drawPieces(this.chessboard.state.squares)
|
|
199
199
|
}
|
|
200
200
|
|
|
@@ -413,7 +413,7 @@ export class ChessboardView {
|
|
|
413
413
|
}
|
|
414
414
|
this.chessboard.state.inputEnabled = true
|
|
415
415
|
this.moveInputCallback = eventHandler
|
|
416
|
-
this.
|
|
416
|
+
this.visualizeInputState()
|
|
417
417
|
}
|
|
418
418
|
|
|
419
419
|
disableMoveInput() {
|
|
@@ -421,7 +421,7 @@ export class ChessboardView {
|
|
|
421
421
|
this.chessboard.state.inputBlackEnabled = false
|
|
422
422
|
this.chessboard.state.inputEnabled = false
|
|
423
423
|
this.moveInputCallback = undefined
|
|
424
|
-
this.
|
|
424
|
+
this.visualizeInputState()
|
|
425
425
|
}
|
|
426
426
|
|
|
427
427
|
// callbacks //
|
|
@@ -465,7 +465,7 @@ export class ChessboardView {
|
|
|
465
465
|
|
|
466
466
|
// Helpers //
|
|
467
467
|
|
|
468
|
-
|
|
468
|
+
visualizeInputState() {
|
|
469
469
|
if (this.chessboard.state) { // fix https://github.com/shaack/cm-chessboard/issues/47
|
|
470
470
|
if (this.chessboard.state.inputWhiteEnabled || this.chessboard.state.inputBlackEnabled || this.chessboard.state.squareSelectEnabled) {
|
|
471
471
|
this.boardGroup.setAttribute("class", "board input-enabled")
|
|
@@ -7,17 +7,28 @@ import {ChessboardView, renderPieceTitle} from "./ChessboardView.js"
|
|
|
7
7
|
import {COLOR} from "./Chessboard.js"
|
|
8
8
|
import {piecesTranslations} from "./ChessboardView.js"
|
|
9
9
|
|
|
10
|
-
let count = 0
|
|
11
|
-
|
|
12
|
-
|
|
13
10
|
const hlTranslations = {
|
|
14
|
-
en: {
|
|
15
|
-
pieces_lists: "Pieces lists",
|
|
16
|
-
board_as_table: "Chessboard as table"
|
|
17
|
-
},
|
|
18
11
|
de: {
|
|
19
12
|
pieces_lists: "Figurenlisten",
|
|
20
|
-
board_as_table: "Schachbrett als Tabelle"
|
|
13
|
+
board_as_table: "Schachbrett als Tabelle",
|
|
14
|
+
move_piece: "Figur bewegen",
|
|
15
|
+
from: "von",
|
|
16
|
+
to: "nach",
|
|
17
|
+
move: "bewegen",
|
|
18
|
+
input_white_enabled: "Eingabe Weiß aktiviert",
|
|
19
|
+
input_black_enabled: "Eingabe Schwarz aktiviert",
|
|
20
|
+
input_disabled: "Eingabe deaktiviert"
|
|
21
|
+
},
|
|
22
|
+
en: {
|
|
23
|
+
pieces_lists: "Pieces lists",
|
|
24
|
+
board_as_table: "Chessboard as table",
|
|
25
|
+
move_piece: "Move piece",
|
|
26
|
+
from: "from",
|
|
27
|
+
to: "to",
|
|
28
|
+
move: "move",
|
|
29
|
+
input_white_enabled: "Input white enabled",
|
|
30
|
+
input_black_enabled: "Input black enabled",
|
|
31
|
+
input_disabled: "Input disabled"
|
|
21
32
|
}
|
|
22
33
|
}
|
|
23
34
|
|
|
@@ -32,12 +43,50 @@ export class ChessboardViewAccessible extends ChessboardView {
|
|
|
32
43
|
this.translations = piecesTranslations
|
|
33
44
|
this.t = this.translations[this.lang]
|
|
34
45
|
this.th = hlTranslations[this.lang]
|
|
35
|
-
|
|
46
|
+
|
|
47
|
+
this.accessibleContainer = this.createElement(`<div class="cm-chessboard-content visually-hidden"></div>`)
|
|
48
|
+
|
|
49
|
+
this.movePieceFormContainer = this.createElement(`<div><h3>${this.th.move_piece}</h3><form>
|
|
50
|
+
<label for="move_piece_input_from_${chessboard.id}">${this.th.from}</label><input class="input-from" type="text" size="2" id="move_piece_input_from_${chessboard.id}"/>
|
|
51
|
+
<label for="move_piece_input_to_${chessboard.id}">${this.th.to}</label><input class="input-to" type="text" size="2" id="move_piece_input_to_${chessboard.id}"/>
|
|
52
|
+
<button type="button" class="button-move">${this.th.move}</button>
|
|
53
|
+
</form><div class="input-status" aria-live="polite"></div></div>`)
|
|
54
|
+
this.inputFrom = this.movePieceFormContainer.querySelector(".input-from")
|
|
55
|
+
this.inputTo = this.movePieceFormContainer.querySelector(".input-to")
|
|
56
|
+
this.moveButton = this.movePieceFormContainer.querySelector(".button-move")
|
|
57
|
+
this.moveButton.addEventListener("click", () => {
|
|
58
|
+
this.chessboard.movePiece(this.inputFrom.value, this.inputTo.value, true)
|
|
59
|
+
})
|
|
60
|
+
this.accessibleContainer.appendChild(this.movePieceFormContainer)
|
|
61
|
+
|
|
62
|
+
this.piecesListContainer = this.createElement(`<div><h3>${this.th.pieces_lists}</h3><div class="list"></div></div>`)
|
|
36
63
|
this.piecesList = this.piecesListContainer.querySelector(".list")
|
|
37
|
-
this.
|
|
38
|
-
|
|
64
|
+
this.accessibleContainer.appendChild(this.piecesListContainer)
|
|
65
|
+
|
|
66
|
+
this.boardAsTableContainer = this.createElement(`<div><h3>${this.th.board_as_table}</h3><div class="table"></div></div>`)
|
|
39
67
|
this.boardAsTable = this.boardAsTableContainer.querySelector(".table")
|
|
40
|
-
this.
|
|
68
|
+
this.accessibleContainer.appendChild(this.boardAsTableContainer)
|
|
69
|
+
this.chessboard.context.appendChild(this.accessibleContainer)
|
|
70
|
+
this.updateFormInputs()
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
visualizeInputState() {
|
|
74
|
+
super.visualizeInputState()
|
|
75
|
+
this.updateFormInputs()
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
updateFormInputs() {
|
|
79
|
+
if (this.inputFrom) {
|
|
80
|
+
if (this.chessboard.state.inputWhiteEnabled || this.chessboard.state.inputBlackEnabled) {
|
|
81
|
+
this.inputFrom.disabled = false
|
|
82
|
+
this.inputTo.disabled = false
|
|
83
|
+
this.moveButton.disabled = false
|
|
84
|
+
} else {
|
|
85
|
+
this.inputFrom.disabled = true
|
|
86
|
+
this.inputTo.disabled = true
|
|
87
|
+
this.moveButton.disabled = true
|
|
88
|
+
}
|
|
89
|
+
}
|
|
41
90
|
}
|
|
42
91
|
|
|
43
92
|
drawPieces(squares = this.chessboard.state.squares) {
|
|
@@ -59,12 +108,11 @@ export class ChessboardViewAccessible extends ChessboardView {
|
|
|
59
108
|
listB += `<li class="list-inline-item">${renderPieceTitle(this.lang, piece.name)} ${piece.position}</li>`
|
|
60
109
|
}
|
|
61
110
|
}
|
|
62
|
-
count++
|
|
63
111
|
this.piecesList.innerHTML = `
|
|
64
|
-
<h4 id="
|
|
65
|
-
<ul aria-labelledby="
|
|
66
|
-
<h4 id="
|
|
67
|
-
<ul aria-labelledby="
|
|
112
|
+
<h4 id="white_${this.chessboard.id}">${this.t.colors_long.w}</h4>
|
|
113
|
+
<ul aria-labelledby="white_${this.chessboard.id}" class="list-inline">${listW}</ul>
|
|
114
|
+
<h4 id="black_${this.chessboard.id}">${this.t.colors_long.b}</h4>
|
|
115
|
+
<ul aria-labelledby="black_${this.chessboard.id}" class="list-inline">${listB}</ul>`
|
|
68
116
|
}
|
|
69
117
|
|
|
70
118
|
redrawBoardAsTable() {
|
package/test/TestBoard.js
CHANGED
|
@@ -23,7 +23,7 @@ describe("TestBoard", () => {
|
|
|
23
23
|
sprite: {url: "../assets/images/chessboard-sprite.svg"},
|
|
24
24
|
position: "start"
|
|
25
25
|
})
|
|
26
|
-
assert.equals(chessboard.
|
|
26
|
+
assert.equals(chessboard.context.childNodes.length, 1)
|
|
27
27
|
chessboard.destroy()
|
|
28
28
|
assert.equals(chessboard.state, undefined)
|
|
29
29
|
})
|