cm-chessboard 4.0.8 → 4.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/examples/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/favicon.ico +0 -0
- package/index.html +29 -18
- package/package.json +1 -1
- package/src/cm-chessboard/core/PositionAnimationsQueue.js +0 -2
|
@@ -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
|
+
}
|
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