cm-chessboard 4.0.0-beta.0 → 4.0.1-beta.3
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 +19 -9
- package/examples/accessible-chessboard.html +58 -0
- package/examples/destroy-many-boards.html +3 -6
- package/examples/enable-input.html +0 -1
- package/examples/input-callbacks.html +1 -1
- package/examples/validate-moves.html +0 -2
- package/package.json +1 -1
- package/src/cm-chessboard/Chessboard.js +20 -27
- package/src/cm-chessboard/ChessboardView.js +19 -33
- package/src/cm-chessboard/ChessboardViewAccessible.js +37 -28
- 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}.
|
|
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}.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.default-contrast .board .square.white{fill:#ecdab9}.cm-chessboard.default-contrast .board .square.black{fill:#c5a076}.cm-chessboard.default-contrast.border-type-thin .board .border{stroke:#c5a076;stroke-width:0.7%;fill:transparent}.cm-chessboard.default-contrast.border-type-frame .board .border{fill:#ecdab9;stroke:none}.cm-chessboard.default-contrast.border-type-frame .board .border-inner{fill:transparent;stroke:#c5a076;stroke-width:0.7%}.cm-chessboard.default-contrast .coordinates{pointer-events:none;user-select:none}.cm-chessboard.default-contrast .coordinates .coordinate{fill:#c5a076;font-size:7px;cursor:default}.cm-chessboard.default-contrast .coordinates .coordinate.black{fill:#333}.cm-chessboard.default-contrast .coordinates .coordinate.white{fill:#333}.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,
|
|
9
|
+
"mappings": "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"
|
|
10
10
|
}
|
|
@@ -69,6 +69,7 @@
|
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
.cm-chessboard-content {
|
|
72
|
+
|
|
72
73
|
.list-inline {
|
|
73
74
|
padding-left: 0;
|
|
74
75
|
list-style: none;
|
|
@@ -82,22 +83,31 @@
|
|
|
82
83
|
}
|
|
83
84
|
}
|
|
84
85
|
|
|
85
|
-
&.visually-hidden {
|
|
86
|
-
position: absolute;
|
|
87
|
-
left: -10000px;
|
|
88
|
-
top: auto;
|
|
89
|
-
width: 1px;
|
|
90
|
-
height: 1px;
|
|
91
|
-
overflow: hidden;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
86
|
}
|
|
95
87
|
|
|
88
|
+
.visually-hidden {
|
|
89
|
+
position: absolute;
|
|
90
|
+
left: -10000px;
|
|
91
|
+
top: auto;
|
|
92
|
+
width: 1px;
|
|
93
|
+
height: 1px;
|
|
94
|
+
overflow: hidden;
|
|
95
|
+
}
|
|
96
|
+
/*
|
|
97
|
+
body * {
|
|
98
|
+
outline: 1px rgba(255, 255, 255, 0.1) solid;
|
|
99
|
+
}
|
|
100
|
+
*/
|
|
96
101
|
// define themes
|
|
97
102
|
@include cm-chessboard-theme(
|
|
98
103
|
"default", // name
|
|
99
104
|
#ecdab9, #c5a076 // squares
|
|
100
105
|
)
|
|
106
|
+
@include cm-chessboard-theme(
|
|
107
|
+
"default-contrast", // name
|
|
108
|
+
#ecdab9, #c5a076, // squares
|
|
109
|
+
#333, #333, // coordinates in squares (white, black)
|
|
110
|
+
)
|
|
101
111
|
@include cm-chessboard-theme(
|
|
102
112
|
"green", // name
|
|
103
113
|
#E0DDCC, #4c946a // squares
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="de">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<title>cm-chessboard</title>
|
|
6
|
+
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
|
|
7
|
+
<link rel="stylesheet" href="styles/examples.css"/>
|
|
8
|
+
<link rel="stylesheet" href="../assets/styles/cm-chessboard.css"/>
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<h1><a href="../">cm-chessboard</a></h1>
|
|
12
|
+
<h2>Example: Accessibility features enabled</h2>
|
|
13
|
+
<p>
|
|
14
|
+
This example shows, how the accessibility features from cm-chessboard work.
|
|
15
|
+
They allow a better usage of the board for visually impaired
|
|
16
|
+
people. You can enable these features via configuration.
|
|
17
|
+
</p>
|
|
18
|
+
|
|
19
|
+
<div class="board green" id="board"></div>
|
|
20
|
+
<button style="margin-bottom: 10px"
|
|
21
|
+
onclick="window.board.setOrientation(window.board.getOrientation() === 'w' ? 'b' : 'w')">Switch Orientation
|
|
22
|
+
</button>
|
|
23
|
+
<script type="module">
|
|
24
|
+
import {Chessboard} from "../src/cm-chessboard/Chessboard.js"
|
|
25
|
+
|
|
26
|
+
window.board = new Chessboard(document.getElementById("board"), {
|
|
27
|
+
position: "start",
|
|
28
|
+
sprite: {url: "../assets/images/chessboard-sprite.svg"},
|
|
29
|
+
style: {
|
|
30
|
+
cssClass: "default-contrast"
|
|
31
|
+
},
|
|
32
|
+
accessibility: {
|
|
33
|
+
brailleNotationInAlt: true, // show the braille notation of the game in the alt attribute of the svg
|
|
34
|
+
boardAsTable: false, // display the board additionally as HTML table
|
|
35
|
+
movePieceForm: true, // display a form to move a piece (from, to, move)
|
|
36
|
+
positionAsList: false, // display the pieces additionally as List
|
|
37
|
+
enableAnimations: true, // set to false to disable all animations
|
|
38
|
+
visuallyHidden: false // hide all those extra outputs visually but keep them accessible for screen readers and braille displays
|
|
39
|
+
}
|
|
40
|
+
})
|
|
41
|
+
|
|
42
|
+
window.board.enableMoveInput(inputHandler)
|
|
43
|
+
|
|
44
|
+
function inputHandler(event) {
|
|
45
|
+
console.log(event)
|
|
46
|
+
return true
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
const output = document.getElementById("output")
|
|
50
|
+
|
|
51
|
+
function log(text) {
|
|
52
|
+
const log = document.createElement("div")
|
|
53
|
+
log.innerText = text
|
|
54
|
+
output.appendChild(log)
|
|
55
|
+
}
|
|
56
|
+
</script>
|
|
57
|
+
</body>
|
|
58
|
+
</html>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="stylesheet" href="styles/examples.css"/>
|
|
8
8
|
<link rel="stylesheet" href="../assets/styles/cm-chessboard.css"/>
|
|
9
9
|
<!--suppress CssUnusedSymbol -->
|
|
10
|
-
<style
|
|
10
|
+
<style>
|
|
11
11
|
div.board {
|
|
12
12
|
float: left;
|
|
13
13
|
width: 4.2vw;
|
|
@@ -47,10 +47,7 @@
|
|
|
47
47
|
const board = new Chessboard(boardDiv, {
|
|
48
48
|
position: Math.round(Math.random()) ? "start" : "empty",
|
|
49
49
|
orientation: Math.round(Math.random()) ? COLOR.white : COLOR.black,
|
|
50
|
-
sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"}
|
|
51
|
-
style: {
|
|
52
|
-
aspectRatio: undefined
|
|
53
|
-
}
|
|
50
|
+
sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"}
|
|
54
51
|
})
|
|
55
52
|
setTimeout(() => {
|
|
56
53
|
board.destroy()
|
|
@@ -61,4 +58,4 @@
|
|
|
61
58
|
|
|
62
59
|
</script>
|
|
63
60
|
</body>
|
|
64
|
-
</html>
|
|
61
|
+
</html>
|
|
@@ -40,7 +40,6 @@ 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,
|
|
44
43
|
position: "start",
|
|
45
44
|
sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"}
|
|
46
45
|
})
|
|
@@ -117,8 +117,6 @@ board.enableMoveInput(inputHandler, COLOR.white)
|
|
|
117
117
|
|
|
118
118
|
const board = new Chessboard(document.getElementById("board"), {
|
|
119
119
|
position: chess.fen(),
|
|
120
|
-
accessible: true,
|
|
121
|
-
// animationDuration: 2000,
|
|
122
120
|
sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"},
|
|
123
121
|
style: {moveFromMarker: undefined, moveToMarker: undefined}, // disable standard markers
|
|
124
122
|
orientation: COLOR.white
|
package/package.json
CHANGED
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
* License: MIT, see file 'LICENSE'
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
|
-
import {ChessboardView} from "./ChessboardView.js"
|
|
8
7
|
import {ChessboardState} from "./ChessboardState.js"
|
|
9
8
|
import {ChessboardViewAccessible} from "./ChessboardViewAccessible.js"
|
|
10
9
|
|
|
@@ -50,21 +49,27 @@ export class Chessboard {
|
|
|
50
49
|
let defaultProps = {
|
|
51
50
|
position: "empty", // set as fen, "start" or "empty"
|
|
52
51
|
orientation: COLOR.white, // white on bottom
|
|
53
|
-
|
|
52
|
+
animationDuration: 300, // pieces animation duration in milliseconds
|
|
53
|
+
responsive: true, // resizes the board based on element size
|
|
54
54
|
style: {
|
|
55
55
|
cssClass: "default",
|
|
56
56
|
showCoordinates: true, // show ranks and files
|
|
57
57
|
borderType: BORDER_TYPE.none, // thin: thin border, frame: wide border with coordinates in it, none: no border
|
|
58
|
-
aspectRatio: 1, // height/width
|
|
58
|
+
aspectRatio: 1, // height/width of the board
|
|
59
59
|
moveFromMarker: MARKER_TYPE.frame, // the marker used to mark the start square
|
|
60
60
|
moveToMarker: MARKER_TYPE.frame, // the marker used to mark the square where the figure is moving to
|
|
61
61
|
},
|
|
62
|
-
responsive: true, // resizes the board based on element size
|
|
63
|
-
animationDuration: 300, // pieces animation duration in milliseconds
|
|
64
62
|
sprite: {
|
|
65
63
|
url: "./assets/images/chessboard-sprite.svg", // pieces and markers are stored as svg sprite
|
|
66
64
|
size: 40, // the sprite size, defaults to 40x40px
|
|
67
|
-
cache: true // cache the sprite
|
|
65
|
+
cache: true // cache the sprite
|
|
66
|
+
},
|
|
67
|
+
accessibility: {
|
|
68
|
+
brailleNotationInAlt: true, // show the braille notation of the game in the alt attribute of the svg
|
|
69
|
+
boardAsTable: false, // display the board additionally as HTML table
|
|
70
|
+
movePieceForm: false, // display a form to move a piece (from, to, move)
|
|
71
|
+
piecesAsList: false, // display the pieces additionally as List
|
|
72
|
+
visuallyHidden: true // hide all those extra outputs visually but keep them accessible for screen readers and braille displays
|
|
68
73
|
}
|
|
69
74
|
}
|
|
70
75
|
this.props = {}
|
|
@@ -72,26 +77,30 @@ export class Chessboard {
|
|
|
72
77
|
Object.assign(this.props, props)
|
|
73
78
|
this.props.sprite = defaultProps.sprite
|
|
74
79
|
this.props.style = defaultProps.style
|
|
80
|
+
this.props.accessibility = defaultProps.accessibility
|
|
75
81
|
if (props.sprite) {
|
|
76
82
|
Object.assign(this.props.sprite, props.sprite)
|
|
77
83
|
}
|
|
78
84
|
if (props.style) {
|
|
79
85
|
Object.assign(this.props.style, props.style)
|
|
80
86
|
}
|
|
87
|
+
if (props.accessibility) {
|
|
88
|
+
Object.assign(this.props.accessibility, props.accessibility)
|
|
89
|
+
}
|
|
90
|
+
/*
|
|
81
91
|
if (this.props.style.aspectRatio) {
|
|
82
92
|
this.context.style.height = (this.context.offsetWidth * this.props.style.aspectRatio) + "px"
|
|
83
93
|
}
|
|
84
|
-
|
|
94
|
+
*/
|
|
85
95
|
this.state = new ChessboardState()
|
|
86
|
-
|
|
87
|
-
this.view = new viewType(this)
|
|
96
|
+
this.view = new ChessboardViewAccessible(this)
|
|
88
97
|
/*
|
|
89
98
|
this.state.addObserver(() => {
|
|
90
99
|
if(this.view) {
|
|
91
100
|
this.view.drawPieces()
|
|
92
101
|
}
|
|
93
102
|
})
|
|
94
|
-
|
|
103
|
+
*/
|
|
95
104
|
if (this.props.position === "start") {
|
|
96
105
|
this.state.setPosition(FEN_START_POSITION)
|
|
97
106
|
} else if (this.props.position === "empty" || this.props.position === undefined) {
|
|
@@ -102,6 +111,7 @@ export class Chessboard {
|
|
|
102
111
|
this.state.orientation = this.props.orientation
|
|
103
112
|
this.view.redraw()
|
|
104
113
|
}
|
|
114
|
+
|
|
105
115
|
// API //
|
|
106
116
|
|
|
107
117
|
setPiece(square, piece) {
|
|
@@ -221,23 +231,6 @@ export class Chessboard {
|
|
|
221
231
|
this.view.disableMoveInput()
|
|
222
232
|
}
|
|
223
233
|
|
|
224
|
-
// TODO remove deprecated function
|
|
225
|
-
// noinspection JSUnusedGlobalSymbols
|
|
226
|
-
enableContextInput(eventHandler) {
|
|
227
|
-
console.warn("enableContextInput() is deprecated, use enableSquareSelect()")
|
|
228
|
-
this.enableSquareSelect(function (event) {
|
|
229
|
-
if (event.type === SQUARE_SELECT_TYPE.secondary) {
|
|
230
|
-
eventHandler(event)
|
|
231
|
-
}
|
|
232
|
-
})
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
// TODO remove deprecated function
|
|
236
|
-
// noinspection JSUnusedGlobalSymbols
|
|
237
|
-
disableContextInput() {
|
|
238
|
-
this.disableSquareSelect()
|
|
239
|
-
}
|
|
240
|
-
|
|
241
234
|
enableSquareSelect(eventHandler) {
|
|
242
235
|
if (this.squareSelectListener) {
|
|
243
236
|
console.warn("squareSelectListener already existing")
|
|
@@ -47,18 +47,7 @@ export function renderPieceTitle(lang, name, color = undefined) {
|
|
|
47
47
|
}
|
|
48
48
|
return title
|
|
49
49
|
}
|
|
50
|
-
|
|
51
|
-
export const SQUARE_COORDINATES = [
|
|
52
|
-
"a1", "b1", "c1", "d1", "e1", "f1", "g1", "h1",
|
|
53
|
-
"a2", "b2", "c2", "d2", "e2", "f2", "g2", "h2",
|
|
54
|
-
"a3", "b3", "c3", "d3", "e3", "f3", "g3", "h3",
|
|
55
|
-
"a4", "b4", "c4", "d4", "e4", "f4", "g4", "h4",
|
|
56
|
-
"a5", "b5", "c5", "d5", "e5", "f5", "g5", "h5",
|
|
57
|
-
"a6", "b6", "c6", "d6", "e6", "f6", "g6", "h6",
|
|
58
|
-
"a7", "b7", "c7", "d7", "e7", "f7", "g7", "h7",
|
|
59
|
-
"a8", "b8", "c8", "d8", "e8", "f8", "g8", "h8"
|
|
60
|
-
]
|
|
61
|
-
*/
|
|
50
|
+
|
|
62
51
|
export class ChessboardView {
|
|
63
52
|
|
|
64
53
|
constructor(chessboard) {
|
|
@@ -74,6 +63,8 @@ export class ChessboardView {
|
|
|
74
63
|
if (chessboard.props.sprite.cache) {
|
|
75
64
|
this.cacheSprite()
|
|
76
65
|
}
|
|
66
|
+
this.context = document.createElement("div")
|
|
67
|
+
this.chessboard.context.appendChild(this.context)
|
|
77
68
|
if (chessboard.props.responsive) {
|
|
78
69
|
// noinspection JSUnresolvedVariable
|
|
79
70
|
if (typeof ResizeObserver !== "undefined") {
|
|
@@ -89,14 +80,13 @@ export class ChessboardView {
|
|
|
89
80
|
}
|
|
90
81
|
|
|
91
82
|
this.pointerDownListener = this.pointerDownHandler.bind(this)
|
|
92
|
-
this.
|
|
93
|
-
this.
|
|
83
|
+
this.pointerDownListener = this.pointerDownHandler.bind(this)
|
|
84
|
+
this.context.addEventListener("mousedown", this.pointerDownListener)
|
|
85
|
+
this.context.addEventListener("touchstart", this.pointerDownListener)
|
|
94
86
|
|
|
95
87
|
this.createSvgAndGroups()
|
|
96
88
|
this.updateMetrics()
|
|
97
|
-
|
|
98
|
-
this.handleResize()
|
|
99
|
-
}
|
|
89
|
+
this.handleResize()
|
|
100
90
|
this.redraw()
|
|
101
91
|
}
|
|
102
92
|
|
|
@@ -140,17 +130,14 @@ export class ChessboardView {
|
|
|
140
130
|
}
|
|
141
131
|
|
|
142
132
|
createSvgAndGroups() {
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
description.innerText = "Chessboard"
|
|
149
|
-
description.id = "svg-description"
|
|
150
|
-
this.svg.appendChild(description)
|
|
133
|
+
this.svg = Svg.createSvg(this.context)
|
|
134
|
+
// let description = document.createElement("description")
|
|
135
|
+
// description.innerText = "Chessboard"
|
|
136
|
+
// description.id = "svg-description"
|
|
137
|
+
// this.svg.appendChild(description)
|
|
151
138
|
let cssClass = this.chessboard.props.style.cssClass ? this.chessboard.props.style.cssClass : "default"
|
|
152
139
|
this.svg.setAttribute("class", "cm-chessboard border-type-" + this.chessboard.props.style.borderType + " " + cssClass)
|
|
153
|
-
this.svg.setAttribute("aria-describedby", "svg-description")
|
|
140
|
+
// this.svg.setAttribute("aria-describedby", "svg-description")
|
|
154
141
|
this.svg.setAttribute("role", "img")
|
|
155
142
|
this.updateMetrics()
|
|
156
143
|
this.boardGroup = Svg.addElement(this.svg, "g", {class: "board"})
|
|
@@ -160,8 +147,8 @@ export class ChessboardView {
|
|
|
160
147
|
}
|
|
161
148
|
|
|
162
149
|
updateMetrics() {
|
|
163
|
-
this.width = this.
|
|
164
|
-
this.height = this.chessboard.
|
|
150
|
+
this.width = this.context.clientWidth
|
|
151
|
+
this.height = this.context.clientWidth * (this.chessboard.props.style.aspectRatio || 1)
|
|
165
152
|
if (this.chessboard.props.style.borderType === BORDER_TYPE.frame) {
|
|
166
153
|
this.borderSize = this.width / 25
|
|
167
154
|
} else if (this.chessboard.props.style.borderType === BORDER_TYPE.thin) {
|
|
@@ -179,11 +166,10 @@ export class ChessboardView {
|
|
|
179
166
|
}
|
|
180
167
|
|
|
181
168
|
handleResize() {
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
this.chessboard.context.clientHeight !== this.height) {
|
|
169
|
+
this.context.style.width = this.chessboard.context.clientWidth + "px"
|
|
170
|
+
this.context.style.height = (this.chessboard.context.clientWidth * this.chessboard.props.style.aspectRatio) + "px"
|
|
171
|
+
if (this.context.clientWidth !== this.width ||
|
|
172
|
+
this.context.clientHeight !== this.height) {
|
|
187
173
|
this.updateMetrics()
|
|
188
174
|
this.redraw()
|
|
189
175
|
}
|
|
@@ -44,38 +44,43 @@ export class ChessboardViewAccessible extends ChessboardView {
|
|
|
44
44
|
this.t = this.translations[this.lang]
|
|
45
45
|
this.th = hlTranslations[this.lang]
|
|
46
46
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
47
|
+
const accessibilityProps = chessboard.props.accessibility
|
|
48
|
+
if(accessibilityProps.movePieceForm) {
|
|
49
|
+
this.movePieceFormContainer = this.createElement(`<div><h3>${this.th.move_piece}</h3><form>
|
|
50
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
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
52
|
<button type="button" class="button-move">${this.th.move}</button>
|
|
53
53
|
</form><div class="input-status" aria-live="polite"></div></div>`)
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
chessboard: this.chessboard,
|
|
60
|
-
type: INPUT_EVENT_TYPE.moveDone,
|
|
61
|
-
squareFrom: this.inputFrom.value,
|
|
62
|
-
squareTo: this.inputTo.value
|
|
63
|
-
})) {
|
|
64
|
-
this.inputFrom.value = ""
|
|
65
|
-
this.inputTo.value = ""
|
|
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
|
+
if(accessibilityProps.visuallyHidden) {
|
|
58
|
+
this.movePieceFormContainer.classList.add("visually-hidden")
|
|
66
59
|
}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
60
|
+
this.moveButton.addEventListener("click", () => {
|
|
61
|
+
if (this.moveInputCallback({
|
|
62
|
+
chessboard: this.chessboard,
|
|
63
|
+
type: INPUT_EVENT_TYPE.moveDone,
|
|
64
|
+
squareFrom: this.inputFrom.value,
|
|
65
|
+
squareTo: this.inputTo.value
|
|
66
|
+
})) {
|
|
67
|
+
this.inputFrom.value = ""
|
|
68
|
+
this.inputTo.value = ""
|
|
69
|
+
}
|
|
70
|
+
})
|
|
71
|
+
this.chessboard.context.appendChild(this.movePieceFormContainer)
|
|
72
|
+
}
|
|
77
73
|
|
|
78
|
-
|
|
74
|
+
if(accessibilityProps.boardAsTable) {
|
|
75
|
+
this.boardAsTableContainer = this.createElement(`<div><h3>${this.th.board_as_table}</h3><div class="table"></div></div>`)
|
|
76
|
+
this.boardAsTable = this.boardAsTableContainer.querySelector(".table")
|
|
77
|
+
this.chessboard.context.appendChild(this.boardAsTableContainer)
|
|
78
|
+
}
|
|
79
|
+
if(accessibilityProps.piecesListContainer) {
|
|
80
|
+
this.piecesListContainer = this.createElement(`<div><h3>${this.th.pieces_lists}</h3><div class="list"></div></div>`)
|
|
81
|
+
this.piecesList = this.piecesListContainer.querySelector(".list")
|
|
82
|
+
this.chessboard.context.appendChild(this.piecesListContainer)
|
|
83
|
+
}
|
|
79
84
|
this.updateFormInputs()
|
|
80
85
|
}
|
|
81
86
|
|
|
@@ -101,8 +106,12 @@ export class ChessboardViewAccessible extends ChessboardView {
|
|
|
101
106
|
drawPieces(squares = this.chessboard.state.position.squares) {
|
|
102
107
|
super.drawPieces(squares)
|
|
103
108
|
setTimeout(() => {
|
|
104
|
-
this.
|
|
105
|
-
|
|
109
|
+
if(this.chessboard.props.accessibility.boardAsTable) {
|
|
110
|
+
this.redrawBoardAsTable()
|
|
111
|
+
}
|
|
112
|
+
if(this.chessboard.props.accessibility.piecesAsList) {
|
|
113
|
+
this.redrawPiecesLists()
|
|
114
|
+
}
|
|
106
115
|
})
|
|
107
116
|
}
|
|
108
117
|
|
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.context.childNodes.length, 1)
|
|
26
|
+
assert.equals(chessboard.view.context.childNodes.length, 1)
|
|
27
27
|
chessboard.destroy()
|
|
28
28
|
assert.equals(chessboard.state, undefined)
|
|
29
29
|
})
|