cm-chessboard 4.0.7 → 4.1.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-theme.scss +11 -2
- package/assets/styles/cm-chessboard.css +1 -1
- package/assets/styles/cm-chessboard.css.map +1 -1
- package/examples/destroy-many-boards.html +13 -5
- package/examples/styles/examples.css +1 -1
- package/examples/styles/examples.css.map +1 -1
- package/examples/styles/examples.scss +11 -2
- package/examples/validate-moves.html +9 -3
- package/favicon.ico +0 -0
- package/index.html +29 -18
- package/package.json +1 -1
- package/src/cm-chessboard/core/PositionAnimationsQueue.js +0 -2
- package/src/cm-chessboard/core/View.js +16 -21
- package/src/cm-chessboard/core/ViewAccessible.js +24 -13
|
@@ -21,7 +21,16 @@ $border: $square-black, $frame-bg: $square-white,) {
|
|
|
21
21
|
.border {
|
|
22
22
|
stroke: $border;
|
|
23
23
|
stroke-width: 0.7%;
|
|
24
|
-
fill:
|
|
24
|
+
fill: $square-white;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
&.border-type-none {
|
|
29
|
+
.board {
|
|
30
|
+
.border {
|
|
31
|
+
stroke: $border;
|
|
32
|
+
stroke-width: 0;
|
|
33
|
+
fill: $square-white;
|
|
25
34
|
}
|
|
26
35
|
}
|
|
27
36
|
}
|
|
@@ -56,4 +65,4 @@ $border: $square-black, $frame-bg: $square-white,) {
|
|
|
56
65
|
}
|
|
57
66
|
}
|
|
58
67
|
}
|
|
59
|
-
}
|
|
68
|
+
}
|
|
@@ -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}.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:
|
|
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:#ecdab9}.cm-chessboard.default.border-type-none .board .border{stroke:#c5a076;stroke-width:0;fill:#ecdab9}.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:#ecdab9}.cm-chessboard.default-contrast.border-type-none .board .border{stroke:#c5a076;stroke-width:0;fill:#ecdab9}.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:#E0DDCC}.cm-chessboard.green.border-type-none .board .border{stroke:#4c946a;stroke-width:0;fill:#E0DDCC}.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:#d8ecfb}.cm-chessboard.blue.border-type-none .board .border{stroke:#86afcf;stroke-width:0;fill:#d8ecfb}.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:#E6D3B1}.cm-chessboard.chess-club.border-type-none .board .border{stroke:#692e2b;stroke-width:0;fill:#E6D3B1}.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:#f0d9b5}.cm-chessboard.chessboard-js.border-type-none .board .border{stroke:#404040;stroke-width:0;fill:#f0d9b5}.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:#fff}.cm-chessboard.black-and-white.border-type-none .board .border{stroke:#9c9c9c;stroke-width:0;fill:#fff}.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,AAEE,sBAFoB,CAEpB,YAAY,AAAC,CACX,YAAY,CAAE,CAAC,CACf,UAAU,CAAE,IAAI,CACjB,AALH,AAOE,sBAPoB,CAOpB,iBAAiB,AAAC,CAChB,OAAO,CAAE,YAAY,CAKtB,AAbH,AAUI,sBAVkB,CAOpB,iBAAiB,CAGd,GAAK,EAAC,UAAU,CAAE,CACjB,YAAY,CAAE,IAAI,CACnB,AAKL,AAAA,gBAAgB,AAAC,CACf,QAAQ,CAAE,QAAQ,CAClB,IAAI,CAAE,QAAQ,CACd,GAAG,CAAE,IAAI,CACT,KAAK,CAAE,GAAG,CACV,MAAM,CAAE,GAAG,CACX,QAAQ,CAAE,MAAM,CACjB,AC9FD,AAQQ,cARM,AAAA,QAAQ,CAMlB,MAAM,CACJ,OAAO,AACJ,MAAM,AAAC,CACN,IAAI,CD8FE,OAAO,CC7Fd,AAVT,AAYQ,cAZM,AAAA,QAAQ,CAMlB,MAAM,CACJ,OAAO,AAKJ,MAAM,AAAC,CACN,IAAI,CD0FW,OAAO,CCzFvB,AAdT,AAoBQ,cApBM,AAAA,QAAQ,AAkBjB,iBAAiB,CAChB,MAAM,CACJ,OAAO,AAAC,CACN,MAAM,CDkFS,OAAO,CCjFtB,YAAY,CAAE,IAAI,CAClB,IAAI,
|
|
9
|
+
"mappings": "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"
|
|
10
10
|
}
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<title>cm-chessboard</title>
|
|
6
6
|
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
|
|
7
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js"></script>
|
|
7
8
|
<link rel="stylesheet" href="styles/examples.css"/>
|
|
8
9
|
<link rel="stylesheet" href="../assets/styles/cm-chessboard.css"/>
|
|
9
10
|
<!--suppress CssUnusedSymbol -->
|
|
@@ -29,32 +30,39 @@
|
|
|
29
30
|
<h2>Stress Test: Create and destroy 5,000 responsive boards</h2>
|
|
30
31
|
<div id="boards"></div>
|
|
31
32
|
<script type="module">
|
|
32
|
-
import {
|
|
33
|
+
import {Chessboard} from "../src/cm-chessboard/Chessboard.js"
|
|
33
34
|
const boardsDiv = document.getElementById("boards")
|
|
34
35
|
const boardDiv = document.createElement("div")
|
|
35
36
|
boardDiv.setAttribute("class", "board1")
|
|
36
37
|
boardsDiv.appendChild(boardDiv)
|
|
37
|
-
new Chessboard(boardDiv, {
|
|
38
|
+
const largeBoard = new Chessboard(boardDiv, {
|
|
38
39
|
position: "start",
|
|
39
40
|
sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"},
|
|
40
41
|
})
|
|
41
|
-
|
|
42
|
+
const chess = new Chess()
|
|
42
43
|
for (let i = 0; i < 5000; i++) {
|
|
43
44
|
setTimeout(() => {
|
|
44
45
|
const boardDiv = document.createElement("div")
|
|
45
46
|
boardDiv.setAttribute("class", "board")
|
|
46
47
|
boardsDiv.appendChild(boardDiv)
|
|
47
48
|
const board = new Chessboard(boardDiv, {
|
|
48
|
-
position:
|
|
49
|
-
orientation: Math.round(Math.random()) ? COLOR.white : COLOR.black,
|
|
49
|
+
position: chess.fen(),
|
|
50
50
|
sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"}
|
|
51
51
|
})
|
|
52
|
+
makeRandomMove()
|
|
53
|
+
largeBoard.setPosition(chess.fen(), true)
|
|
52
54
|
setTimeout(() => {
|
|
53
55
|
board.destroy()
|
|
54
56
|
boardsDiv.removeChild(boardDiv)
|
|
55
57
|
}, 10000)
|
|
56
58
|
}, i * 100)
|
|
57
59
|
}
|
|
60
|
+
function makeRandomMove() {
|
|
61
|
+
const possibleMoves = chess.moves();
|
|
62
|
+
if (possibleMoves.length === 0) return;
|
|
63
|
+
const randomIndex = Math.floor(Math.random() * possibleMoves.length);
|
|
64
|
+
chess.move(possibleMoves[randomIndex]);
|
|
65
|
+
}
|
|
58
66
|
|
|
59
67
|
</script>
|
|
60
68
|
</body>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
body{color:#fff;background-color:#222;padding:20px;margin:0;font-family:"Helvetica Neue", sans-serif;line-height:1.3;font-size:
|
|
1
|
+
body{color:#fff;background-color:#222;padding:20px;margin:0;font-family:"Helvetica Neue", sans-serif;line-height:1.3;font-size:18px}body *{font-size:18px}a{color:#516CD4}a:visited{color:#929292}a:hover{color:#E2FEDE}h1,h1 a{margin-top:0;font-size:39.6px;color:#CD7338}h1{margin-bottom:10px}h2{margin-bottom:15px;font-size:25.2px;color:#CD7338}pre{font-family:"courier new", monospace;font-size:90%;background-color:#111;color:#eee;padding:5px;overflow:auto}div.board{float:left;max-width:500px;width:calc(100vw - 40px);margin-right:20px;margin-bottom:20px}.clearfix::after{content:"";clear:both;display:table}button{padding:4px 20px;margin-right:10px;margin-bottom:10px;background-color:#999}button:hover{background-color:#777}li{padding:0.05rem}
|
|
2
2
|
|
|
3
3
|
/*# sourceMappingURL=examples.css.map */
|
|
@@ -5,5 +5,5 @@
|
|
|
5
5
|
"examples.scss"
|
|
6
6
|
],
|
|
7
7
|
"names": [],
|
|
8
|
-
"mappings": "AASA,AAAA,IAAI,AAAC,CACH,KAAK,CAPG,IAAI,CAQZ,gBAAgB,CATL,IAAI,CAUf,OAAO,CAAE,IAAI,CACb,MAAM,CAAE,CAAC,CACT,WAAW,CAAE,4BAA4B,CACzC,WAAW,CAAE,GAAG,CAChB,SAAS,CATC,IAAI,
|
|
8
|
+
"mappings": "AASA,AAAA,IAAI,AAAC,CACH,KAAK,CAPG,IAAI,CAQZ,gBAAgB,CATL,IAAI,CAUf,OAAO,CAAE,IAAI,CACb,MAAM,CAAE,CAAC,CACT,WAAW,CAAE,4BAA4B,CACzC,WAAW,CAAE,GAAG,CAChB,SAAS,CATC,IAAI,CAcf,AAZD,AASE,IATE,CASF,CAAC,AAAC,CACA,SAAS,CAZD,IAAI,CAab,AAGH,AAAA,CAAC,AAAC,CACA,KAAK,CAxBA,OAAO,CAiCb,AAVD,AAGE,CAHD,CAGG,OAAO,AAAC,CACR,KAAK,CAAE,OAAO,CACf,AALH,AAOE,CAPD,CAOG,KAAK,AAAC,CACN,KAAK,CA9BI,OAAO,CA+BjB,AAGH,AAAA,EAAE,CAAE,EAAE,CAAC,CAAC,AAAC,CACP,UAAU,CAAE,CAAC,CACb,SAAS,CAAE,MAAgB,CAC3B,KAAK,CAlCE,OAAO,CAmCf,AAED,AAAA,EAAE,AAAC,CACD,aAAa,CAAE,IAAI,CACpB,AAED,AAAA,EAAE,AAAC,CACD,aAAa,CAAE,IAAI,CACnB,SAAS,CAAE,MAAgB,CAC3B,KAAK,CA5CE,OAAO,CA6Cf,AAED,AAAA,GAAG,AAAC,CACF,WAAW,CAAE,wBAAwB,CACrC,SAAS,CAAE,GAAG,CACd,gBAAgB,CAjDA,IAAI,CAkDpB,KAAK,CAjDA,IAAI,CAkDT,OAAO,CAAE,GAAG,CACZ,QAAQ,CAAE,IAAI,CACf,AAED,AAAA,GAAG,AAAA,MAAM,AAAC,CACR,KAAK,CAAE,IAAI,CACX,SAAS,CAAE,KAAK,CAChB,KAAK,CAAE,kBAAkB,CACzB,YAAY,CAAE,IAAI,CAClB,aAAa,CAAE,IAAI,CACpB,AAED,AAAA,SAAS,EAAE,KAAK,AAAC,CACf,OAAO,CAAE,EAAE,CACX,KAAK,CAAE,IAAI,CACX,OAAO,CAAE,KAAK,CACf,AAED,AAAA,MAAM,AAAC,CACL,OAAO,CAAE,QAAQ,CACjB,YAAY,CAAE,IAAI,CAClB,aAAa,CAAE,IAAI,CACnB,gBAAgB,CAAE,IAAI,CAKvB,AATD,AAME,MANI,CAMF,KAAK,AAAC,CACN,gBAAgB,CAAE,IAAI,CACvB,AAGH,AAAA,EAAE,AAAC,CACD,OAAO,CAAE,OAAO,CAEjB"
|
|
9
9
|
}
|
|
@@ -5,7 +5,7 @@ $default: #fff;
|
|
|
5
5
|
$color2: #CD7338;
|
|
6
6
|
$code-background: #111;
|
|
7
7
|
$code: #eee;
|
|
8
|
-
$font-size:
|
|
8
|
+
$font-size: 18px;
|
|
9
9
|
|
|
10
10
|
body {
|
|
11
11
|
color: $default;
|
|
@@ -15,6 +15,7 @@ body {
|
|
|
15
15
|
font-family: "Helvetica Neue", sans-serif;
|
|
16
16
|
line-height: 1.3;
|
|
17
17
|
font-size: $font-size;
|
|
18
|
+
|
|
18
19
|
* {
|
|
19
20
|
font-size: $font-size;
|
|
20
21
|
}
|
|
@@ -22,9 +23,11 @@ body {
|
|
|
22
23
|
|
|
23
24
|
a {
|
|
24
25
|
color: $link;
|
|
26
|
+
|
|
25
27
|
&:visited {
|
|
26
28
|
color: #929292;
|
|
27
29
|
}
|
|
30
|
+
|
|
28
31
|
&:hover {
|
|
29
32
|
color: $link-hover;
|
|
30
33
|
}
|
|
@@ -32,7 +35,7 @@ a {
|
|
|
32
35
|
|
|
33
36
|
h1, h1 a {
|
|
34
37
|
margin-top: 0;
|
|
35
|
-
font-size: $font-size * 2;
|
|
38
|
+
font-size: $font-size * 2.2;
|
|
36
39
|
color: $color2;
|
|
37
40
|
}
|
|
38
41
|
|
|
@@ -74,7 +77,13 @@ button {
|
|
|
74
77
|
margin-right: 10px;
|
|
75
78
|
margin-bottom: 10px;
|
|
76
79
|
background-color: #999;
|
|
80
|
+
|
|
77
81
|
&:hover {
|
|
78
82
|
background-color: #777;
|
|
79
83
|
}
|
|
80
84
|
}
|
|
85
|
+
|
|
86
|
+
li {
|
|
87
|
+
padding: 0.05rem;
|
|
88
|
+
|
|
89
|
+
}
|
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
</style>
|
|
20
20
|
</head>
|
|
21
21
|
<body>
|
|
22
|
-
<h1>
|
|
23
|
-
<
|
|
22
|
+
<h1><a href="../">cm-chessboard</a></h1>
|
|
23
|
+
<h2>Example: Input enabled, move validation with chess.js</h2>
|
|
24
24
|
<p>Input enabled for white. <a href="https://github.com/jhlywa/chess.js">chess.js</a> does the validation and answers
|
|
25
25
|
with random moves.</p>
|
|
26
26
|
<h2 class="visually-hidden">The Board</h2>
|
|
@@ -117,7 +117,13 @@ board.enableMoveInput(inputHandler, COLOR.white)
|
|
|
117
117
|
sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"},
|
|
118
118
|
style: {moveFromMarker: undefined, moveToMarker: undefined}, // disable standard markers
|
|
119
119
|
orientation: COLOR.white,
|
|
120
|
-
|
|
120
|
+
accessibility: {
|
|
121
|
+
brailleNotationInAlt: true, // show the braille notation of the game in the alt attribute of the svg
|
|
122
|
+
movePieceForm: true, // display a form to move a piece (from, to, move)
|
|
123
|
+
boardAsTable: true, // display the board additionally as HTML table
|
|
124
|
+
piecesAsList: true, // display the pieces additionally as List
|
|
125
|
+
visuallyHidden: true // hide all those extra outputs visually but keep them accessible for screen readers and braille displays
|
|
126
|
+
}
|
|
121
127
|
})
|
|
122
128
|
board.enableMoveInput(inputHandler, COLOR.white)
|
|
123
129
|
</script>
|
package/favicon.ico
CHANGED
|
Binary file
|
package/index.html
CHANGED
|
@@ -6,36 +6,47 @@
|
|
|
6
6
|
<link rel="stylesheet" href="assets/styles/cm-chessboard.css"/>
|
|
7
7
|
<link rel="stylesheet" href="examples/styles/examples.css"/>
|
|
8
8
|
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
|
|
9
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js"></script>
|
|
9
10
|
</head>
|
|
10
11
|
<body>
|
|
11
12
|
<h1>cm-chessboard</h1>
|
|
12
|
-
<p>A JavaScript chessboard which is lightweight, ES6 module based, responsive, SVG rendered and without dependencies.</p>
|
|
13
|
-
<p>cm-chessboard is the chessboard of <a href="https://www.chessmail.de">chessmail
|
|
14
|
-
|
|
15
|
-
It is used every day by thousands of players. </p>
|
|
13
|
+
<p><i>A JavaScript chessboard which is lightweight, ES6 module based, responsive, SVG rendered and without dependencies.</i></p>
|
|
14
|
+
<p>cm-chessboard is the chessboard of <a href="https://www.chessmail.de">chessmail</a> and is used every day by thousands of players.
|
|
15
|
+
It works, it is cool and it is easy to use. 👍</p>
|
|
16
16
|
<p><a href="https://github.com/shaack/cm-chessboard">Repository and documentation on GitHub</a></p>
|
|
17
|
-
<
|
|
18
|
-
<
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
</
|
|
17
|
+
<div>
|
|
18
|
+
<h2>Examples</h2>
|
|
19
|
+
<ul>
|
|
20
|
+
<li><a href="examples/simple-boards.html">Simple chessboards, view only</a></li>
|
|
21
|
+
<li><a href="examples/responsive-board.html">Responsive chessboard</a></li>
|
|
22
|
+
<li><a href="examples/enable-input.html">Input enabled without validation</a></li>
|
|
23
|
+
<li><a href="examples/validate-moves.html">Input enabled, move validation with chess.js</a> 🥸</li>
|
|
24
|
+
<li><a href="examples/pieces-animation.html">Set different positions, with animation</a></li>
|
|
25
|
+
<li><a href="examples/input-callbacks.html">Context input, mark squares and detect clicks on fields</a></li>
|
|
26
|
+
<li><a href="examples/different-styles.html">Different styles and piece sets</a> 🎨</li>
|
|
27
|
+
<li><a href="examples/many-boards.html">100 boards, in one page</a></li>
|
|
28
|
+
<li><a href="examples/destroy-many-boards.html">Stress test, 5000 boards created and destroyed</a> 🤓 👍</li>
|
|
29
|
+
</ul>
|
|
30
|
+
</div>
|
|
29
31
|
<h2>Chessboard</h2>
|
|
30
|
-
<pre>const board = new Chessboard(document.getElementById("board"), {position: "start"})</pre>
|
|
31
32
|
<div class="board" id="board"></div>
|
|
32
33
|
<script type="module">
|
|
33
34
|
import {Chessboard} from "./src/cm-chessboard/Chessboard.js"
|
|
34
35
|
|
|
36
|
+
const chess = new Chess()
|
|
35
37
|
const board = new Chessboard(document.getElementById("board"), {
|
|
36
38
|
position: "start"
|
|
37
39
|
})
|
|
38
|
-
|
|
40
|
+
setInterval(() => {
|
|
41
|
+
makeRandomMove()
|
|
42
|
+
board.setPosition(chess.fen(), true)
|
|
43
|
+
}, 250)
|
|
44
|
+
function makeRandomMove() {
|
|
45
|
+
const possibleMoves = chess.moves();
|
|
46
|
+
if (possibleMoves.length === 0) return;
|
|
47
|
+
const randomIndex = Math.floor(Math.random() * possibleMoves.length);
|
|
48
|
+
chess.move(possibleMoves[randomIndex]);
|
|
49
|
+
}
|
|
39
50
|
</script>
|
|
40
51
|
<div class="clearfix"></div>
|
|
41
52
|
<h2>Test</h2>
|
package/package.json
CHANGED
|
@@ -41,7 +41,7 @@ export const piecesTranslations = {
|
|
|
41
41
|
|
|
42
42
|
export function renderPieceTitle(lang, name, color = undefined) {
|
|
43
43
|
let title = piecesTranslations[lang].pieces_long[name]
|
|
44
|
-
if(color) {
|
|
44
|
+
if (color) {
|
|
45
45
|
title += " " + piecesTranslations[lang].colors_long[color]
|
|
46
46
|
}
|
|
47
47
|
return title
|
|
@@ -50,24 +50,19 @@ export function renderPieceTitle(lang, name, color = undefined) {
|
|
|
50
50
|
export class View {
|
|
51
51
|
|
|
52
52
|
constructor(chessboard) {
|
|
53
|
-
// this.animationRunning = false
|
|
54
|
-
// this.currentAnimation = undefined
|
|
55
53
|
this.chessboard = chessboard
|
|
56
54
|
this.moveInput = new MoveInput(this,
|
|
57
55
|
this.moveStartCallback.bind(this),
|
|
58
56
|
this.moveDoneCallback.bind(this),
|
|
59
57
|
this.moveCanceledCallback.bind(this)
|
|
60
58
|
)
|
|
61
|
-
this.animationQueue = []
|
|
62
59
|
if (chessboard.props.sprite.cache) {
|
|
63
60
|
this.cacheSprite()
|
|
64
61
|
}
|
|
65
62
|
this.context = document.createElement("div")
|
|
66
63
|
this.chessboard.context.appendChild(this.context)
|
|
67
64
|
if (chessboard.props.responsive) {
|
|
68
|
-
// noinspection JSUnresolvedVariable
|
|
69
65
|
if (typeof ResizeObserver !== "undefined") {
|
|
70
|
-
// noinspection JSUnresolvedFunction
|
|
71
66
|
this.resizeObserver = new ResizeObserver(() => {
|
|
72
67
|
this.handleResize()
|
|
73
68
|
})
|
|
@@ -190,20 +185,20 @@ export class View {
|
|
|
190
185
|
while (this.boardGroup.firstChild) {
|
|
191
186
|
this.boardGroup.removeChild(this.boardGroup.lastChild)
|
|
192
187
|
}
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
}
|
|
188
|
+
|
|
189
|
+
let boardBorder = Svg.addElement(this.boardGroup, "rect", {width: this.width, height: this.height})
|
|
190
|
+
boardBorder.setAttribute("class", "border")
|
|
191
|
+
if (this.chessboard.props.style.borderType === BORDER_TYPE.frame) {
|
|
192
|
+
const innerPos = this.borderSize
|
|
193
|
+
let borderInner = Svg.addElement(this.boardGroup, "rect", {
|
|
194
|
+
x: innerPos,
|
|
195
|
+
y: innerPos,
|
|
196
|
+
width: this.width - innerPos * 2,
|
|
197
|
+
height: this.height - innerPos * 2
|
|
198
|
+
})
|
|
199
|
+
borderInner.setAttribute("class", "border-inner")
|
|
206
200
|
}
|
|
201
|
+
|
|
207
202
|
for (let i = 0; i < 64; i++) {
|
|
208
203
|
const index = this.chessboard.state.orientation === COLOR.white ? i : 63 - i
|
|
209
204
|
const squareColor = ((9 * index) & 8) === 0 ? 'black' : 'white'
|
|
@@ -322,11 +317,11 @@ export class View {
|
|
|
322
317
|
}
|
|
323
318
|
|
|
324
319
|
getPieceElement(square) {
|
|
325
|
-
if(square.length < 2) {
|
|
320
|
+
if (square.length < 2) {
|
|
326
321
|
throw new Error("980e03")
|
|
327
322
|
}
|
|
328
323
|
const piece = this.piecesGroup.querySelector(`g[data-square='${square}']`)
|
|
329
|
-
if(!piece) {
|
|
324
|
+
if (!piece) {
|
|
330
325
|
console.error("no piece found on", square)
|
|
331
326
|
}
|
|
332
327
|
return piece
|
|
@@ -45,41 +45,52 @@ export class ViewAccessible extends View {
|
|
|
45
45
|
this.th = hlTranslations[this.lang]
|
|
46
46
|
|
|
47
47
|
const accessibilityProps = chessboard.props.accessibility
|
|
48
|
-
if(accessibilityProps.movePieceForm) {
|
|
48
|
+
if (accessibilityProps.movePieceForm) {
|
|
49
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
|
-
<button type="
|
|
52
|
+
<button type="submit" class="button-move">${this.th.move}</button>
|
|
53
53
|
</form><div class="input-status" aria-live="polite"></div></div>`)
|
|
54
|
-
this.
|
|
55
|
-
this.
|
|
56
|
-
this.
|
|
57
|
-
|
|
54
|
+
this.form = this.movePieceFormContainer.querySelector("form")
|
|
55
|
+
this.inputFrom = this.form.querySelector(".input-from")
|
|
56
|
+
this.inputTo = this.form.querySelector(".input-to")
|
|
57
|
+
this.moveButton = this.form.querySelector(".button-move")
|
|
58
|
+
if (accessibilityProps.visuallyHidden) {
|
|
58
59
|
this.movePieceFormContainer.classList.add("visually-hidden")
|
|
59
60
|
}
|
|
60
|
-
this.
|
|
61
|
+
this.form.addEventListener("submit", (evt) => {
|
|
62
|
+
evt.preventDefault()
|
|
61
63
|
if (this.moveInputCallback({
|
|
62
64
|
chessboard: this.chessboard,
|
|
63
65
|
type: INPUT_EVENT_TYPE.moveDone,
|
|
64
66
|
squareFrom: this.inputFrom.value,
|
|
65
67
|
squareTo: this.inputTo.value
|
|
66
68
|
})) {
|
|
67
|
-
this.inputFrom.value
|
|
68
|
-
|
|
69
|
+
this.chessboard.movePiece(this.inputFrom.value, this.inputTo.value,
|
|
70
|
+
true).then(() => {
|
|
71
|
+
this.inputFrom.value = ""
|
|
72
|
+
this.inputTo.value = ""
|
|
73
|
+
})
|
|
69
74
|
}
|
|
70
75
|
})
|
|
71
76
|
this.chessboard.context.appendChild(this.movePieceFormContainer)
|
|
72
77
|
}
|
|
73
78
|
|
|
74
|
-
if(accessibilityProps.boardAsTable) {
|
|
79
|
+
if (accessibilityProps.boardAsTable) {
|
|
75
80
|
this.boardAsTableContainer = this.createElement(`<div><h3>${this.th.board_as_table}</h3><div class="table"></div></div>`)
|
|
76
81
|
this.boardAsTable = this.boardAsTableContainer.querySelector(".table")
|
|
77
82
|
this.chessboard.context.appendChild(this.boardAsTableContainer)
|
|
83
|
+
if (accessibilityProps.visuallyHidden) {
|
|
84
|
+
this.boardAsTableContainer.classList.add("visually-hidden")
|
|
85
|
+
}
|
|
78
86
|
}
|
|
79
|
-
if(accessibilityProps.piecesListContainer) {
|
|
87
|
+
if (accessibilityProps.piecesListContainer) {
|
|
80
88
|
this.piecesListContainer = this.createElement(`<div><h3>${this.th.pieces_lists}</h3><div class="list"></div></div>`)
|
|
81
89
|
this.piecesList = this.piecesListContainer.querySelector(".list")
|
|
82
90
|
this.chessboard.context.appendChild(this.piecesListContainer)
|
|
91
|
+
if (accessibilityProps.visuallyHidden) {
|
|
92
|
+
this.piecesListContainer.classList.add("visually-hidden")
|
|
93
|
+
}
|
|
83
94
|
}
|
|
84
95
|
this.updateFormInputs()
|
|
85
96
|
}
|
|
@@ -106,10 +117,10 @@ export class ViewAccessible extends View {
|
|
|
106
117
|
redrawPieces(squares = this.chessboard.state.position.squares) {
|
|
107
118
|
super.redrawPieces(squares)
|
|
108
119
|
setTimeout(() => {
|
|
109
|
-
if(this.chessboard.props.accessibility.boardAsTable) {
|
|
120
|
+
if (this.chessboard.props.accessibility.boardAsTable) {
|
|
110
121
|
this.redrawBoardAsTable()
|
|
111
122
|
}
|
|
112
|
-
if(this.chessboard.props.accessibility.piecesAsList) {
|
|
123
|
+
if (this.chessboard.props.accessibility.piecesAsList) {
|
|
113
124
|
this.redrawPiecesLists()
|
|
114
125
|
}
|
|
115
126
|
})
|