cm-chessboard 3.18.0 → 3.18.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.
Files changed (4) hide show
  1. package/README.md +2 -0
  2. package/examples/validate-moves.html +15 -2
  3. package/package.json +1 -1
  4. package/src/cm-chessboard/ChessboardViewAccessible.js +16 -7
package/README.md CHANGED
@@ -33,6 +33,8 @@ aspects of chess games.
33
33
 
34
34
  **Option 2:** Download the code from [GitHub](https://github.com/shaack/cm-chessboard).
35
35
 
36
+ **Option 3:** Use it via CDN https://cdn.jsdelivr.net/npm/cm-chessboard@3.18.0/src/cm-chessboard/Chessboard.js
37
+
36
38
  After installation, copy the sprite in `cm-chessboard/assets/images/` to your projects `assets/images/`
37
39
  folder. If you put the sprite somewhere else you have to configure the location with `{sprite.url: "./url/of/chessboard-sprite.svg"}`
38
40
  (see section 'Configuration' below).
package/examples/validate-moves.html CHANGED
@@ -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><a href="../">cm-chessboard</a></h1>
13
- <h2>Example: Input enabled, move validation with chess.js</h2>
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cm-chessboard",
3
- "version": "3.18.0",
3
+ "version": "3.18.3",
4
4
  "description": "A JavaScript chessboard which is lightweight, ES6 module based, responsive, SVG rendered and without dependencies.",
5
5
  "keywords": [
6
6
  "chess",
package/src/cm-chessboard/ChessboardViewAccessible.js CHANGED
@@ -4,7 +4,7 @@
4
4
  * License: MIT, see file 'LICENSE'
5
5
  */
6
6
  import {ChessboardView, renderPieceTitle} from "./ChessboardView.js"
7
- import {COLOR} from "./Chessboard.js"
7
+ import {COLOR, INPUT_EVENT_TYPE} from "./Chessboard.js"
8
8
  import {piecesTranslations} from "./ChessboardView.js"
9
9
 
10
10
  const hlTranslations = {
@@ -55,17 +55,26 @@ export class ChessboardViewAccessible extends ChessboardView {
55
55
  this.inputTo = this.movePieceFormContainer.querySelector(".input-to")
56
56
  this.moveButton = this.movePieceFormContainer.querySelector(".button-move")
57
57
  this.moveButton.addEventListener("click", () => {
58
- this.chessboard.movePiece(this.inputFrom.value, this.inputTo.value, true)
58
+ if (this.moveInputCallback({
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 = ""
66
+ }
59
67
  })
60
68
  this.accessibleContainer.appendChild(this.movePieceFormContainer)
61
69
 
70
+ this.boardAsTableContainer = this.createElement(`<div><h3>${this.th.board_as_table}</h3><div class="table"></div></div>`)
71
+ this.boardAsTable = this.boardAsTableContainer.querySelector(".table")
72
+ this.accessibleContainer.appendChild(this.boardAsTableContainer)
73
+
62
74
  this.piecesListContainer = this.createElement(`<div><h3>${this.th.pieces_lists}</h3><div class="list"></div></div>`)
63
75
  this.piecesList = this.piecesListContainer.querySelector(".list")
64
76
  this.accessibleContainer.appendChild(this.piecesListContainer)
65
77
 
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
78
  this.chessboard.context.appendChild(this.accessibleContainer)
70
79
  this.updateFormInputs()
71
80
  }
@@ -92,8 +101,8 @@ export class ChessboardViewAccessible extends ChessboardView {
92
101
  drawPieces(squares = this.chessboard.state.squares) {
93
102
  super.drawPieces(squares)
94
103
  setTimeout(() => {
95
- this.redrawPiecesLists()
96
104
  this.redrawBoardAsTable()
105
+ this.redrawPiecesLists()
97
106
  })
98
107
  }
99
108
 
@@ -134,7 +143,7 @@ export class ChessboardViewAccessible extends ChessboardView {
134
143
  for (let y = 0; y < 8; y++) {
135
144
  const pieceCode = squares[y % 8 + x * 8]
136
145
  let color, name
137
- if(pieceCode) {
146
+ if (pieceCode) {
138
147
  color = pieceCode.charAt(0)
139
148
  name = pieceCode.charAt(1)
140
149
  html += `<td>${renderPieceTitle(this.lang, name, color)}</td>`