cm-chessboard 3.18.0 → 3.18.1
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.
|
@@ -7,13 +7,25 @@
|
|
|
7
7
|
<link rel="stylesheet" href="styles/examples.css"/>
|
|
8
8
|
<link rel="stylesheet" href="../assets/styles/cm-chessboard.css"/>
|
|
9
9
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js"></script>
|
|
10
|
+
<style>
|
|
11
|
+
.visually-hidden {
|
|
12
|
+
position: absolute;
|
|
13
|
+
left: -10000px;
|
|
14
|
+
top: auto;
|
|
15
|
+
width: 1px;
|
|
16
|
+
height: 1px;
|
|
17
|
+
overflow: hidden;
|
|
18
|
+
}
|
|
19
|
+
</style>
|
|
10
20
|
</head>
|
|
11
21
|
<body>
|
|
12
|
-
<h1
|
|
13
|
-
<
|
|
22
|
+
<h1>Example: Input enabled, move validation with chess.js</h1>
|
|
23
|
+
<a href="../">Back to the cm-chessboard overview</a>
|
|
14
24
|
<p>Input enabled for white. <a href="https://github.com/jhlywa/chess.js">chess.js</a> does the validation and answers
|
|
15
25
|
with random moves.</p>
|
|
26
|
+
<h2 class="visually-hidden">The Board</h2>
|
|
16
27
|
<div class="board" id="board"></div>
|
|
28
|
+
<h2 class="visually-hidden">The Sourcecode of the example</h2>
|
|
17
29
|
<pre>
|
|
18
30
|
import {INPUT_EVENT_TYPE, COLOR, Chessboard, MARKER_TYPE} from "../src/cm-chessboard/Chessboard.js"
|
|
19
31
|
|
|
@@ -105,6 +117,7 @@ board.enableMoveInput(inputHandler, COLOR.white)
|
|
|
105
117
|
|
|
106
118
|
const board = new Chessboard(document.getElementById("board"), {
|
|
107
119
|
position: chess.fen(),
|
|
120
|
+
accessible: true,
|
|
108
121
|
// animationDuration: 2000,
|
|
109
122
|
sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"},
|
|
110
123
|
style: {moveFromMarker: undefined, moveToMarker: undefined}, // disable standard markers
|
package/package.json
CHANGED
|
@@ -59,13 +59,14 @@ export class ChessboardViewAccessible extends ChessboardView {
|
|
|
59
59
|
})
|
|
60
60
|
this.accessibleContainer.appendChild(this.movePieceFormContainer)
|
|
61
61
|
|
|
62
|
+
this.boardAsTableContainer = this.createElement(`<div><h3>${this.th.board_as_table}</h3><div class="table"></div></div>`)
|
|
63
|
+
this.boardAsTable = this.boardAsTableContainer.querySelector(".table")
|
|
64
|
+
this.accessibleContainer.appendChild(this.boardAsTableContainer)
|
|
65
|
+
|
|
62
66
|
this.piecesListContainer = this.createElement(`<div><h3>${this.th.pieces_lists}</h3><div class="list"></div></div>`)
|
|
63
67
|
this.piecesList = this.piecesListContainer.querySelector(".list")
|
|
64
68
|
this.accessibleContainer.appendChild(this.piecesListContainer)
|
|
65
69
|
|
|
66
|
-
this.boardAsTableContainer = this.createElement(`<div><h3>${this.th.board_as_table}</h3><div class="table"></div></div>`)
|
|
67
|
-
this.boardAsTable = this.boardAsTableContainer.querySelector(".table")
|
|
68
|
-
this.accessibleContainer.appendChild(this.boardAsTableContainer)
|
|
69
70
|
this.chessboard.context.appendChild(this.accessibleContainer)
|
|
70
71
|
this.updateFormInputs()
|
|
71
72
|
}
|
|
@@ -92,8 +93,8 @@ export class ChessboardViewAccessible extends ChessboardView {
|
|
|
92
93
|
drawPieces(squares = this.chessboard.state.squares) {
|
|
93
94
|
super.drawPieces(squares)
|
|
94
95
|
setTimeout(() => {
|
|
95
|
-
this.redrawPiecesLists()
|
|
96
96
|
this.redrawBoardAsTable()
|
|
97
|
+
this.redrawPiecesLists()
|
|
97
98
|
})
|
|
98
99
|
}
|
|
99
100
|
|