cm-chessboard 3.16.7 → 3.17.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 +44 -0
- package/examples/enable-input.html +3 -2
- package/examples/many-boards.html +1 -0
- package/package.json +1 -1
- package/src/cm-chessboard/Chessboard.js +4 -1
- package/src/cm-chessboard/ChessboardMoveInput.js +1 -1
- package/src/cm-chessboard/ChessboardState.js +27 -1
- package/src/cm-chessboard/ChessboardView.js +19 -5
- package/src/cm-chessboard/ChessboardViewAccessible.js +128 -0
- package/test/TestState.js +27 -0
- package/test/index.html +2 -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.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,
|
|
9
|
+
"mappings": "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"
|
|
10
10
|
}
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
}
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
|
+
|
|
12
13
|
.markers {
|
|
13
14
|
.marker {
|
|
14
15
|
// use the second, the hyphens syntax
|
|
@@ -17,24 +18,29 @@
|
|
|
17
18
|
stroke-width: 1.8px;
|
|
18
19
|
opacity: 0.5;
|
|
19
20
|
}
|
|
21
|
+
|
|
20
22
|
&.markerFrameRed, &.marker-frame-red {
|
|
21
23
|
stroke: #aa0000;
|
|
22
24
|
stroke-width: 1.8px;
|
|
23
25
|
opacity: 0.4;
|
|
24
26
|
}
|
|
27
|
+
|
|
25
28
|
&.markerSquare, &.marker-square {
|
|
26
29
|
fill: black;
|
|
27
30
|
opacity: 0.11;
|
|
28
31
|
}
|
|
32
|
+
|
|
29
33
|
&.markerDot, &.marker-dot {
|
|
30
34
|
fill: black;
|
|
31
35
|
opacity: 0.3;
|
|
32
36
|
}
|
|
37
|
+
|
|
33
38
|
&.markerCircle, &.marker-circle {
|
|
34
39
|
stroke: #000055;
|
|
35
40
|
stroke-width: 3px;
|
|
36
41
|
opacity: 0.4;
|
|
37
42
|
}
|
|
43
|
+
|
|
38
44
|
&.markerCircleRed, &.marker-circle-red {
|
|
39
45
|
stroke: #aa0000;
|
|
40
46
|
stroke-width: 3px;
|
|
@@ -42,11 +48,49 @@
|
|
|
42
48
|
}
|
|
43
49
|
}
|
|
44
50
|
}
|
|
51
|
+
|
|
45
52
|
.pieces, .markers {
|
|
46
53
|
// important for the proper function
|
|
47
54
|
pointer-events: none;
|
|
48
55
|
}
|
|
49
56
|
}
|
|
57
|
+
.cm-chessboard-content {
|
|
58
|
+
.list-inline {
|
|
59
|
+
padding-left: 0;
|
|
60
|
+
list-style: none;
|
|
61
|
+
}
|
|
62
|
+
.list-inline-item {
|
|
63
|
+
display: inline-block;
|
|
64
|
+
|
|
65
|
+
&:not(:last-child) {
|
|
66
|
+
margin-right: 1rem;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.cm-chessboard-content {
|
|
72
|
+
.list-inline {
|
|
73
|
+
padding-left: 0;
|
|
74
|
+
list-style: none;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.list-inline-item {
|
|
78
|
+
display: inline-block;
|
|
79
|
+
|
|
80
|
+
&:not(:last-child) {
|
|
81
|
+
margin-right: 1rem;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
&.visually-hidden {
|
|
86
|
+
position: absolute;
|
|
87
|
+
left: -10000px;
|
|
88
|
+
top: auto;
|
|
89
|
+
width: 1px;
|
|
90
|
+
height: 1px;
|
|
91
|
+
overflow: hidden;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
50
94
|
|
|
51
95
|
// define themes
|
|
52
96
|
@include cm-chessboard-theme(
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
|
-
<html lang="
|
|
2
|
+
<html lang="de">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<title>cm-chessboard</title>
|
|
@@ -40,6 +40,7 @@ function inputHandler(event) {
|
|
|
40
40
|
import {INPUT_EVENT_TYPE, Chessboard} from "../src/cm-chessboard/Chessboard.js"
|
|
41
41
|
|
|
42
42
|
window.board = new Chessboard(document.getElementById("board"), {
|
|
43
|
+
accessible: true,
|
|
43
44
|
position: "start",
|
|
44
45
|
sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"}
|
|
45
46
|
})
|
|
@@ -67,4 +68,4 @@ function inputHandler(event) {
|
|
|
67
68
|
}
|
|
68
69
|
</script>
|
|
69
70
|
</body>
|
|
70
|
-
</html>
|
|
71
|
+
</html>
|
package/package.json
CHANGED
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
import {SQUARE_COORDINATES, ChessboardView} from "./ChessboardView.js"
|
|
8
8
|
import {ChessboardState} from "./ChessboardState.js"
|
|
9
|
+
import {ChessboardViewAccessible} from "./ChessboardViewAccessible.js"
|
|
9
10
|
|
|
10
11
|
export const COLOR = {
|
|
11
12
|
white: "w",
|
|
@@ -48,6 +49,7 @@ export class Chessboard {
|
|
|
48
49
|
let defaultProps = {
|
|
49
50
|
position: "empty", // set as fen, "start" or "empty"
|
|
50
51
|
orientation: COLOR.white, // white on bottom
|
|
52
|
+
accessible: false, // render additional information to allow the usage for people using screen readers (beta)
|
|
51
53
|
style: {
|
|
52
54
|
cssClass: "default",
|
|
53
55
|
showCoordinates: true, // show ranks and files
|
|
@@ -91,7 +93,8 @@ export class Chessboard {
|
|
|
91
93
|
this.state = new ChessboardState()
|
|
92
94
|
this.state.orientation = this.props.orientation
|
|
93
95
|
|
|
94
|
-
|
|
96
|
+
const viewType = this.props.accessible ? ChessboardViewAccessible : ChessboardView
|
|
97
|
+
this.view = new viewType(this, (view) => {
|
|
95
98
|
if (this.props.position === "start") {
|
|
96
99
|
this.state.setPosition(FEN_START_POSITION)
|
|
97
100
|
} else if (this.props.position === "empty" || this.props.position === undefined) {
|
|
@@ -148,7 +148,7 @@ export class ChessboardMoveInput {
|
|
|
148
148
|
})
|
|
149
149
|
} else {
|
|
150
150
|
this.view.drawPieces(this.chessboard.state.squares)
|
|
151
|
-
this.view.animationQueue = [] // remove all animations (See PR #59)
|
|
151
|
+
// this.view.animationQueue = [] // todo remove all animations (See PR #59)
|
|
152
152
|
this.setMoveInputState(STATE.reset)
|
|
153
153
|
}
|
|
154
154
|
} else {
|
|
@@ -16,6 +16,26 @@ export class ChessboardState {
|
|
|
16
16
|
this.squareSelectEnabled = false
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
+
getPieces() {
|
|
20
|
+
const pieces = []
|
|
21
|
+
const sortBy = ['k', 'q', 'r', 'b', 'n', 'p']
|
|
22
|
+
const sort = (a, b) => {
|
|
23
|
+
return sortBy.indexOf(a.name) - sortBy.indexOf(b.name)
|
|
24
|
+
}
|
|
25
|
+
for(let i=0; i<64; i++) {
|
|
26
|
+
const piece = this.squares[i]
|
|
27
|
+
if(piece) {
|
|
28
|
+
pieces.push({
|
|
29
|
+
name: piece.charAt(1),
|
|
30
|
+
color: piece.charAt(0),
|
|
31
|
+
position: this.indexToSquare(i)
|
|
32
|
+
})
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
pieces.sort(sort)
|
|
36
|
+
return pieces
|
|
37
|
+
}
|
|
38
|
+
|
|
19
39
|
setPiece(index, piece) {
|
|
20
40
|
this.squares[index] = piece
|
|
21
41
|
}
|
|
@@ -109,4 +129,10 @@ export class ChessboardState {
|
|
|
109
129
|
return 8 * rank + file
|
|
110
130
|
}
|
|
111
131
|
|
|
112
|
-
|
|
132
|
+
indexToSquare(index) {
|
|
133
|
+
const file = String.fromCharCode(index % 8 + 97)
|
|
134
|
+
const rank = Math.floor(index / 8) + 1
|
|
135
|
+
return file + rank
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
}
|
|
@@ -104,8 +104,14 @@ export class ChessboardView {
|
|
|
104
104
|
Svg.removeElement(this.svg)
|
|
105
105
|
}
|
|
106
106
|
this.svg = Svg.createSvg(this.chessboard.element)
|
|
107
|
+
let description = document.createElement("description")
|
|
108
|
+
description.innerText = "Chessboard"
|
|
109
|
+
description.id = "svg-description"
|
|
110
|
+
this.svg.appendChild(description)
|
|
107
111
|
let cssClass = this.chessboard.props.style.cssClass ? this.chessboard.props.style.cssClass : "default"
|
|
108
112
|
this.svg.setAttribute("class", "cm-chessboard border-type-" + this.chessboard.props.style.borderType + " " + cssClass)
|
|
113
|
+
this.svg.setAttribute("aria-describedby", "svg-description")
|
|
114
|
+
this.svg.setAttribute("role", "img")
|
|
109
115
|
this.updateMetrics()
|
|
110
116
|
this.boardGroup = Svg.addElement(this.svg, "g", {class: "board"})
|
|
111
117
|
this.coordinatesGroup = Svg.addElement(this.svg, "g", {class: "coordinates"})
|
|
@@ -335,13 +341,21 @@ export class ChessboardView {
|
|
|
335
341
|
nextPieceAnimationInQueue() {
|
|
336
342
|
const nextAnimation = this.animationQueue.shift()
|
|
337
343
|
if (nextAnimation !== undefined) {
|
|
338
|
-
this.drawPieces(nextAnimation.fromSquares)
|
|
339
344
|
this.animationRunning = true
|
|
340
345
|
this.currentAnimation = new ChessboardPiecesAnimation(this, nextAnimation.fromSquares, nextAnimation.toSquares, this.chessboard.props.animationDuration / (this.animationQueue.length + 1), () => {
|
|
341
|
-
this.
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
346
|
+
if (!this.moveInput.draggablePiece) {
|
|
347
|
+
this.drawPieces(nextAnimation.toSquares)
|
|
348
|
+
this.animationRunning = false
|
|
349
|
+
this.nextPieceAnimationInQueue()
|
|
350
|
+
if (nextAnimation.callback) {
|
|
351
|
+
nextAnimation.callback()
|
|
352
|
+
}
|
|
353
|
+
} else {
|
|
354
|
+
this.animationRunning = false
|
|
355
|
+
this.nextPieceAnimationInQueue()
|
|
356
|
+
if (nextAnimation.callback) {
|
|
357
|
+
nextAnimation.callback()
|
|
358
|
+
}
|
|
345
359
|
}
|
|
346
360
|
})
|
|
347
361
|
}
|
|
@@ -0,0 +1,128 @@
|
|
|
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 {ChessboardView} from "./ChessboardView.js"
|
|
7
|
+
import {COLOR} from "./Chessboard.js"
|
|
8
|
+
|
|
9
|
+
let count = 0
|
|
10
|
+
|
|
11
|
+
export class ChessboardViewAccessible extends ChessboardView {
|
|
12
|
+
|
|
13
|
+
constructor(chessboard, callbackAfterCreation) {
|
|
14
|
+
super(chessboard, callbackAfterCreation)
|
|
15
|
+
this.translations = {
|
|
16
|
+
en: {
|
|
17
|
+
pieces_lists: "Pieces lists",
|
|
18
|
+
board_as_table: "Chessboard as table",
|
|
19
|
+
colors: {
|
|
20
|
+
w: "w", b: "b"
|
|
21
|
+
},
|
|
22
|
+
colors_long: {
|
|
23
|
+
w: "White", b: "Black"
|
|
24
|
+
},
|
|
25
|
+
pieces: {
|
|
26
|
+
p: "p", n: "n", b: "b", r: "r", q: "q", k: "k"
|
|
27
|
+
},
|
|
28
|
+
pieces_long: {
|
|
29
|
+
p: "Pawn", n: "Knight", b: "Bishop", r: "Rook", q: "Queen", k: "King"
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
de: {
|
|
33
|
+
pieces_lists: "Figurenlisten",
|
|
34
|
+
board_as_table: "Schachbrett als Tabelle",
|
|
35
|
+
colors: {
|
|
36
|
+
w: "w", b: "s"
|
|
37
|
+
},
|
|
38
|
+
colors_long: {
|
|
39
|
+
w: "Weiß", b: "Schwarz"
|
|
40
|
+
},
|
|
41
|
+
pieces: {
|
|
42
|
+
p: "b", n: "s", b: "l", r: "t", q: "d", k: "k"
|
|
43
|
+
},
|
|
44
|
+
pieces_long: {
|
|
45
|
+
p: "Bauer", n: "Springer", b: "Läufer", r: "Turm", q: "Dame", k: "König"
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
this.lang = document.documentElement.getAttribute("lang")
|
|
50
|
+
if (this.lang !== "de" && this.lang !== "en") {
|
|
51
|
+
this.lang = "en"
|
|
52
|
+
}
|
|
53
|
+
this.t = this.translations[this.lang]
|
|
54
|
+
this.piecesListContainer = this.createElement(`<div class="cm-chessboard-content visually-hidden"><h3>${this.t.pieces_lists}</h3><div class="list"></div></div>`)
|
|
55
|
+
this.piecesList = this.piecesListContainer.querySelector(".list")
|
|
56
|
+
this.chessboard.element.appendChild(this.piecesListContainer)
|
|
57
|
+
this.boardAsTableContainer = this.createElement(`<div class="cm-chessboard-content visually-hidden"><h3>${this.t.board_as_table}</h3><div class="table"></div></div>`)
|
|
58
|
+
this.boardAsTable = this.boardAsTableContainer.querySelector(".table")
|
|
59
|
+
this.chessboard.element.appendChild(this.boardAsTableContainer)
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
drawPieces(squares = this.chessboard.state.squares) {
|
|
63
|
+
super.drawPieces(squares)
|
|
64
|
+
setTimeout(() => {
|
|
65
|
+
this.redrawPiecesLists()
|
|
66
|
+
this.redrawBoardAsTable()
|
|
67
|
+
})
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
redrawPiecesLists() {
|
|
71
|
+
const pieces = this.chessboard.state.getPieces()
|
|
72
|
+
let listW = ""
|
|
73
|
+
let listB = ""
|
|
74
|
+
for (const piece of pieces) {
|
|
75
|
+
if (piece.color === "w") {
|
|
76
|
+
listW += `<li class="list-inline-item">${this.t.pieces_long[piece.name]} ${piece.position}</li>`
|
|
77
|
+
} else {
|
|
78
|
+
listB += `<li class="list-inline-item">${this.t.pieces_long[piece.name]} ${piece.position}</li>`
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
count++
|
|
82
|
+
this.piecesList.innerHTML = `
|
|
83
|
+
<h4 id="white-${count}">${this.t.colors_long.w}</h4>
|
|
84
|
+
<ul aria-labelledby="white-${count}" class="list-inline">${listW}</ul>
|
|
85
|
+
<h4 id="black-${count}">${this.t.colors_long.b}</h4>
|
|
86
|
+
<ul aria-labelledby="black-${count}" class="list-inline">${listB}</ul>`
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
redrawBoardAsTable() {
|
|
90
|
+
const squares = this.chessboard.state.squares.slice()
|
|
91
|
+
const ranks = ["a", "b", "c", "d", "e", "f", "g", "h"]
|
|
92
|
+
const files = ["1", "2", "3", "4", "5", "6", "7", "8"]
|
|
93
|
+
if (this.chessboard.state.orientation === COLOR.black) {
|
|
94
|
+
ranks.reverse()
|
|
95
|
+
files.reverse()
|
|
96
|
+
squares.reverse()
|
|
97
|
+
}
|
|
98
|
+
let html = `<table><caption>${this.t.board_as_table}</caption><tr><th></th>`
|
|
99
|
+
for (const rank of ranks) {
|
|
100
|
+
html += `<th scope='col'>${rank}</th>`
|
|
101
|
+
}
|
|
102
|
+
html += "</tr>"
|
|
103
|
+
for (let x = 7; x >= 0; x--) {
|
|
104
|
+
html += `<tr><th scope="row">${files[7 - x]}</th>`
|
|
105
|
+
for (let y = 0; y < 8; y++) {
|
|
106
|
+
const pieceCode = squares[y % 8 + x * 8]
|
|
107
|
+
let color, name
|
|
108
|
+
if(pieceCode) {
|
|
109
|
+
color = pieceCode.charAt(0)
|
|
110
|
+
name = pieceCode.charAt(1)
|
|
111
|
+
html += `<td>${this.t.pieces_long[name]} ${this.t.colors_long[color]}</td>`
|
|
112
|
+
} else {
|
|
113
|
+
html += `<td></td>`
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
html += "</tr>"
|
|
117
|
+
}
|
|
118
|
+
html += "</table>"
|
|
119
|
+
this.boardAsTable.innerHTML = html
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
createElement(html) {
|
|
123
|
+
const template = document.createElement('template')
|
|
124
|
+
template.innerHTML = html.trim()
|
|
125
|
+
return template.content.firstChild
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
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
|
+
|
|
7
|
+
import {describe, it, assert} from "../node_modules/teevi/src/teevi.js"
|
|
8
|
+
import {ChessboardState} from "../src/cm-chessboard/ChessboardState.js"
|
|
9
|
+
|
|
10
|
+
describe("TestState", () => {
|
|
11
|
+
it("should convert square to index", () => {
|
|
12
|
+
const state = new ChessboardState()
|
|
13
|
+
assert.equals(state.squareToIndex("a1"), 0)
|
|
14
|
+
assert.equals(state.squareToIndex("h1"), 7)
|
|
15
|
+
assert.equals(state.squareToIndex("a8"), 56)
|
|
16
|
+
assert.equals(state.squareToIndex("g5"), 38)
|
|
17
|
+
assert.equals(state.squareToIndex("h8"), 63)
|
|
18
|
+
})
|
|
19
|
+
it("should convert index to square", () => {
|
|
20
|
+
const state = new ChessboardState()
|
|
21
|
+
assert.equals(state.indexToSquare(0), "a1")
|
|
22
|
+
assert.equals(state.indexToSquare(7), "h1")
|
|
23
|
+
assert.equals(state.indexToSquare(56), "a8")
|
|
24
|
+
assert.equals(state.indexToSquare(38), "g5")
|
|
25
|
+
assert.equals(state.indexToSquare(63), "h8")
|
|
26
|
+
})
|
|
27
|
+
})
|