cm-chessboard 7.8.4 → 7.9.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.
Files changed (9) hide show
  1. package/README.md +2 -2
  2. package/examples/destroy-many-boards.html +1 -1
  3. package/package.json +1 -1
  4. package/src/Chessboard.js +1 -1
  5. package/src/extensions/arrows/Arrows.js +4 -4
  6. package/src/model/ChessboardState.js +0 -1
  7. package/src/view/ChessboardView.js +6 -11
  8. package/src/view/PositionAnimationsQueue.js +0 -2
  9. package/src/view/VisualMoveInput.js +93 -93
package/README.md CHANGED
@@ -18,8 +18,8 @@ aspects of chess games.
18
18
  - [Can handle moves input via click or drag](https://shaack.com/projekte/cm-chessboard/examples/validate-moves.html)
19
19
  - [Styleable via css and supports multiple piece sets](https://shaack.com/projekte/cm-chessboard/examples/different-styles.html)
20
20
  - Uses SVG for rendering
21
- - [Allows adding **extensions
22
- ** to extend the functionality](https://shaack.com/projekte/cm-chessboard/examples/extensions/arrows-extension.html)
21
+ - [Allows adding **extensions** to extend the
22
+ functionality](https://shaack.com/projekte/cm-chessboard/examples/extensions/arrows-extension.html)
23
23
 
24
24
  ## Extensions
25
25
 
package/examples/destroy-many-boards.html CHANGED
@@ -26,7 +26,7 @@
26
26
  </head>
27
27
  <body>
28
28
  <h1><a href="../">cm-chessboard</a></h1>
29
- <h2>Stress Test: Create and destroy 5,000 boards // <span id="counter"></span></h2>
29
+ <h2>Stress Test: Create and destroy 5,000 boards ⇨ <span id="counter"></span></h2>
30
30
  <div id="boards"></div>
31
31
  <script type="module">
32
32
  import {Chessboard} from "../src/Chessboard.js"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cm-chessboard",
3
- "version": "7.8.4",
3
+ "version": "7.9.1",
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/Chessboard.js CHANGED
@@ -122,7 +122,7 @@ export class Chessboard {
122
122
  async setOrientation(color, animated = false) {
123
123
  const position = this.state.position.clone()
124
124
  if (this.boardTurning) {
125
- console.log("setOrientation is only once in queue allowed")
125
+ console.warn("setOrientation is only once in queue allowed")
126
126
  return
127
127
  }
128
128
  this.boardTurning = true
package/src/extensions/arrows/Arrows.js CHANGED
@@ -78,10 +78,10 @@ export class Arrows extends Extension {
78
78
 
79
79
  const width = ((view.scalingX + view.scalingY) / 2) * 4
80
80
  let lineFill = Svg.addElement(arrowsGroup, "line")
81
- lineFill.setAttribute('x1', x1)
82
- lineFill.setAttribute('x2', x2)
83
- lineFill.setAttribute('y1', y1)
84
- lineFill.setAttribute('y2', y2)
81
+ lineFill.setAttribute('x1', x1.toString())
82
+ lineFill.setAttribute('x2', x2.toString())
83
+ lineFill.setAttribute('y1', y1.toString())
84
+ lineFill.setAttribute('y2', y2.toString())
85
85
  lineFill.setAttribute('class', 'arrow-line')
86
86
  lineFill.setAttribute("marker-end", "url(#" + id + ")")
87
87
  lineFill.setAttribute('stroke-width', width + "px")
package/src/model/ChessboardState.js CHANGED
@@ -10,7 +10,6 @@ export class ChessboardState {
10
10
  constructor() {
11
11
  this.position = new Position()
12
12
  this.orientation = undefined
13
- this.markers = []
14
13
  this.inputWhiteEnabled = false
15
14
  this.inputBlackEnabled = false
16
15
  this.inputEnabled = false
package/src/view/ChessboardView.js CHANGED
@@ -343,13 +343,10 @@ export class ChessboardView {
343
343
  piece: this.chessboard.getPiece(square)
344
344
  }
345
345
  if (this.moveInputCallback) {
346
- // the old move input validator
347
346
  data.moveInputCallbackResult = this.moveInputCallback(data)
348
347
  }
349
- // the new extension points
350
- const extensionPointsResult = this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
351
- // validates, when moveInputCallbackResult and extensionPointsResults are true
352
- return !(extensionPointsResult === false || !data.moveInputCallbackResult)
348
+ this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
349
+ return data.moveInputCallbackResult
353
350
  }
354
351
 
355
352
  movingOverSquareCallback(squareFrom, squareTo) {
@@ -374,10 +371,8 @@ export class ChessboardView {
374
371
  if (this.moveInputCallback) {
375
372
  data.moveInputCallbackResult = this.moveInputCallback(data)
376
373
  }
377
- // the new extension points
378
- const extensionPointsResult = this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
379
- // validates, when moveInputCallbackResult and extensionPointsResult are true
380
- return !(extensionPointsResult === false || !data.moveInputCallbackResult)
374
+ this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
375
+ return data.moveInputCallbackResult
381
376
  }
382
377
 
383
378
  moveInputCanceledCallback(squareFrom, squareTo, reason) {
@@ -388,10 +383,10 @@ export class ChessboardView {
388
383
  squareFrom: squareFrom,
389
384
  squareTo: squareTo
390
385
  }
391
- this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
392
386
  if (this.moveInputCallback) {
393
387
  this.moveInputCallback(data)
394
388
  }
389
+ this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
395
390
  }
396
391
 
397
392
  moveInputFinishedCallback(squareFrom, squareTo, legalMove) {
@@ -402,10 +397,10 @@ export class ChessboardView {
402
397
  squareTo: squareTo,
403
398
  legalMove: legalMove
404
399
  }
405
- this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
406
400
  if (this.moveInputCallback) {
407
401
  this.moveInputCallback(data)
408
402
  }
403
+ this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
409
404
  }
410
405
 
411
406
  // Helpers //
package/src/view/PositionAnimationsQueue.js CHANGED
@@ -145,7 +145,6 @@ export class PositionsAnimation {
145
145
 
146
146
  createAnimation(fromSquares, toSquares) {
147
147
  const changes = PositionsAnimation.seekChanges(fromSquares, toSquares)
148
- // console.log("changes", changes)
149
148
  const animatedElements = []
150
149
  changes.forEach((change) => {
151
150
  const animatedItem = {
@@ -172,7 +171,6 @@ export class PositionsAnimation {
172
171
  }
173
172
 
174
173
  animationStep(time) {
175
- // console.log("animationStep", time)
176
174
  if(!this.view || !this.view.chessboard.state) { // board was destroyed
177
175
  return
178
176
  }
package/src/view/VisualMoveInput.js CHANGED
@@ -36,38 +36,40 @@ export class VisualMoveInput {
36
36
  this.moveInputState = null
37
37
  this.fromSquare = null
38
38
  this.toSquare = null
39
- this.moveInputStartedCallback = (square) => {
40
- const result = view.moveInputStartedCallback(square)
41
- if (result) {
42
- this.chessboard.state.moveInputProcess = Utils.createTask()
43
- this.chessboard.state.moveInputProcess.then((result) => {
44
- if (this.moveInputState === MOVE_INPUT_STATE.waitForInputStart ||
45
- this.moveInputState === MOVE_INPUT_STATE.moveDone) {
46
- view.moveInputFinishedCallback(this.fromSquare, this.toSquare, result)
47
- }
48
- })
49
- }
50
- return result
51
- }
52
- this.movingOverSquareCallback = (fromSquare, toSquare) => {
53
- view.movingOverSquareCallback(fromSquare, toSquare)
54
- }
55
- this.validateMoveInputCallback = (fromSquare, toSquare) => {
56
- const result = view.validateMoveInputCallback(fromSquare, toSquare)
57
- this.chessboard.state.moveInputProcess.resolve(result)
58
- return result
59
- }
60
- this.moveInputCanceledCallback = (fromSquare, toSquare, reason) => {
61
- view.moveInputCanceledCallback(fromSquare, toSquare, reason)
62
- this.chessboard.state.moveInputProcess.resolve()
63
- }
39
+
64
40
  this.setMoveInputState(MOVE_INPUT_STATE.waitForInputStart)
65
41
  }
66
42
 
67
- setMoveInputState(newState, params = undefined) {
43
+ moveInputStartedCallback(square) {
44
+ const result = this.view.moveInputStartedCallback(square)
45
+ if (result) {
46
+ this.chessboard.state.moveInputProcess = Utils.createTask()
47
+ this.chessboard.state.moveInputProcess.then((result) => {
48
+ if (this.moveInputState === MOVE_INPUT_STATE.waitForInputStart ||
49
+ this.moveInputState === MOVE_INPUT_STATE.moveDone) {
50
+ this.view.moveInputFinishedCallback(this.fromSquare, this.toSquare, result)
51
+ }
52
+ })
53
+ }
54
+ return result
55
+ }
56
+
57
+ movingOverSquareCallback(fromSquare, toSquare) {
58
+ this.view.movingOverSquareCallback(fromSquare, toSquare)
59
+ }
68
60
 
69
- // console.log("setMoveInputState", Object.keys(STATE)[this.moveInputState], "=>", Object.keys(STATE)[newState]);
61
+ validateMoveInputCallback(fromSquare, toSquare) {
62
+ const result = this.view.validateMoveInputCallback(fromSquare, toSquare)
63
+ this.chessboard.state.moveInputProcess.resolve(result)
64
+ return result
65
+ }
66
+
67
+ moveInputCanceledCallback(fromSquare, toSquare, reason) {
68
+ this.view.moveInputCanceledCallback(fromSquare, toSquare, reason)
69
+ this.chessboard.state.moveInputProcess.resolve()
70
+ }
70
71
 
72
+ setMoveInputState(newState, params = undefined) {
71
73
  const prevState = this.moveInputState
72
74
  this.moveInputState = newState
73
75
 
@@ -162,16 +164,12 @@ export class VisualMoveInput {
162
164
  }
163
165
  this.toSquare = params.square
164
166
  if (this.toSquare && this.validateMoveInputCallback(this.fromSquare, this.toSquare)) {
165
- if (prevState === MOVE_INPUT_STATE.clickTo) {
166
- this.chessboard.movePiece(this.fromSquare, this.toSquare, true).then(() => {
167
- this.setMoveInputState(MOVE_INPUT_STATE.reset)
168
- })
169
- } else {
170
- this.chessboard.movePiece(this.fromSquare, this.toSquare, false).then(() => {
167
+ this.chessboard.movePiece(this.fromSquare, this.toSquare, prevState === MOVE_INPUT_STATE.clickTo).then(() => {
168
+ if (prevState === MOVE_INPUT_STATE.clickTo) {
171
169
  this.view.setPieceVisibility(this.toSquare, true)
172
- this.setMoveInputState(MOVE_INPUT_STATE.reset)
173
- })
174
- }
170
+ }
171
+ this.setMoveInputState(MOVE_INPUT_STATE.reset)
172
+ })
175
173
  } else {
176
174
  this.view.setPieceVisibility(this.fromSquare, true)
177
175
  this.setMoveInputState(MOVE_INPUT_STATE.reset)
@@ -241,65 +239,68 @@ export class VisualMoveInput {
241
239
  }
242
240
 
243
241
  onPointerDown(e) {
244
- if (e.type === "mousedown" && e.button === 0 || e.type === "touchstart") {
245
- const square = e.target.getAttribute("data-square")
246
- if (square) { // pointer on square
247
- const pieceName = this.chessboard.getPiece(square)
248
- // console.log("onPointerDown", square, pieceName)
249
- let color
250
- if (pieceName) {
251
- color = pieceName ? pieceName.substring(0, 1) : null
252
- // allow scrolling, if not pointed on draggable piece
253
- if (color === "w" && this.chessboard.state.inputWhiteEnabled ||
254
- color === "b" && this.chessboard.state.inputBlackEnabled) {
255
- e.preventDefault()
256
- }
257
- }
258
- if (this.moveInputState !== MOVE_INPUT_STATE.waitForInputStart ||
259
- this.chessboard.state.inputWhiteEnabled && color === "w" ||
260
- this.chessboard.state.inputBlackEnabled && color === "b") {
261
- let point
262
- if (e.type === "mousedown") {
263
- point = {x: e.clientX, y: e.clientY}
264
- } else if (e.type === "touchstart") {
265
- point = {x: e.touches[0].clientX, y: e.touches[0].clientY}
266
- }
267
- if (this.moveInputState === MOVE_INPUT_STATE.waitForInputStart && pieceName && this.moveInputStartedCallback(square)) {
268
- this.setMoveInputState(MOVE_INPUT_STATE.pieceClickedThreshold, {
269
- square: square,
270
- piece: pieceName,
271
- point: point,
272
- type: e.type
273
- })
274
- } else if (this.moveInputState === MOVE_INPUT_STATE.clickTo) {
275
- if (square === this.fromSquare) {
276
- this.setMoveInputState(MOVE_INPUT_STATE.secondClickThreshold, {
242
+ if (!(e.type === "mousedown" && e.button === 0 || e.type === "touchstart")) {
243
+ return;
244
+ }
245
+
246
+ const square = e.target.getAttribute("data-square")
247
+ if (!square) { // pointer on square
248
+ return;
249
+ }
250
+
251
+ const pieceName = this.chessboard.getPiece(square)
252
+ let color
253
+ if (pieceName) {
254
+ color = pieceName ? pieceName.substring(0, 1) : null
255
+ // allow scrolling, if not pointed on draggable piece
256
+ if (color === "w" && this.chessboard.state.inputWhiteEnabled ||
257
+ color === "b" && this.chessboard.state.inputBlackEnabled) {
258
+ e.preventDefault()
259
+ }
260
+ }
261
+ if (this.moveInputState !== MOVE_INPUT_STATE.waitForInputStart ||
262
+ this.chessboard.state.inputWhiteEnabled && color === "w" ||
263
+ this.chessboard.state.inputBlackEnabled && color === "b") {
264
+ let point
265
+ if (e.type === "mousedown") {
266
+ point = {x: e.clientX, y: e.clientY}
267
+ } else if (e.type === "touchstart") {
268
+ point = {x: e.touches[0].clientX, y: e.touches[0].clientY}
269
+ }
270
+ if (this.moveInputState === MOVE_INPUT_STATE.waitForInputStart && pieceName && this.moveInputStartedCallback(square)) {
271
+ this.setMoveInputState(MOVE_INPUT_STATE.pieceClickedThreshold, {
272
+ square: square,
273
+ piece: pieceName,
274
+ point: point,
275
+ type: e.type
276
+ })
277
+ } else if (this.moveInputState === MOVE_INPUT_STATE.clickTo) {
278
+ if (square === this.fromSquare) {
279
+ this.setMoveInputState(MOVE_INPUT_STATE.secondClickThreshold, {
280
+ square: square,
281
+ piece: pieceName,
282
+ point: point,
283
+ type: e.type
284
+ })
285
+ } else {
286
+ const pieceName = this.chessboard.getPiece(square)
287
+ const pieceColor = pieceName ? pieceName.substring(0, 1) : null
288
+ const startPieceName = this.chessboard.getPiece(this.fromSquare)
289
+ const startPieceColor = startPieceName ? startPieceName.substring(0, 1) : null
290
+ if (color && startPieceColor === pieceColor) {
291
+ this.moveInputCanceledCallback(this.fromSquare, square, MOVE_CANCELED_REASON.clickedAnotherPiece)
292
+ if (this.moveInputStartedCallback(square)) {
293
+ this.setMoveInputState(MOVE_INPUT_STATE.pieceClickedThreshold, {
277
294
  square: square,
278
295
  piece: pieceName,
279
296
  point: point,
280
297
  type: e.type
281
298
  })
282
299
  } else {
283
- const pieceName = this.chessboard.getPiece(square)
284
- const pieceColor = pieceName ? pieceName.substring(0, 1) : null
285
- const startPieceName = this.chessboard.getPiece(this.fromSquare)
286
- const startPieceColor = startPieceName ? startPieceName.substring(0, 1) : null
287
- if (color && startPieceColor === pieceColor) {
288
- this.moveInputCanceledCallback(this.fromSquare, square, MOVE_CANCELED_REASON.clickedAnotherPiece)
289
- if (this.moveInputStartedCallback(square)) {
290
- this.setMoveInputState(MOVE_INPUT_STATE.pieceClickedThreshold, {
291
- square: square,
292
- piece: pieceName,
293
- point: point,
294
- type: e.type
295
- })
296
- } else {
297
- this.setMoveInputState(MOVE_INPUT_STATE.reset)
298
- }
299
- } else {
300
- this.setMoveInputState(MOVE_INPUT_STATE.moveDone, {square: square})
301
- }
300
+ this.setMoveInputState(MOVE_INPUT_STATE.reset)
302
301
  }
302
+ } else {
303
+ this.setMoveInputState(MOVE_INPUT_STATE.moveDone, {square: square})
303
304
  }
304
305
  }
305
306
  }
@@ -346,12 +347,11 @@ export class VisualMoveInput {
346
347
  this.toSquare = null
347
348
  this.movingOverSquareCallback(this.fromSquare, null)
348
349
  }
349
- } else {
350
- if (this.toSquare !== null) {
351
- this.toSquare = null
352
- this.movingOverSquareCallback(this.fromSquare, null)
353
- }
350
+ } else if (this.toSquare !== null) {
351
+ this.toSquare = null
352
+ this.movingOverSquareCallback(this.fromSquare, null)
354
353
  }
354
+
355
355
  if (this.view.chessboard.state.inputEnabled && (this.moveInputState === MOVE_INPUT_STATE.dragTo || this.moveInputState === MOVE_INPUT_STATE.clickDragTo)) {
356
356
  this.moveDraggablePiece(pageX, pageY)
357
357
  }