cm-chessboard 5.5.18 → 6.0.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.
- package/README.md +4 -1
- package/examples/enable-input.html +7 -1
- package/examples/extensions/chessboard-markers-extension.html +52 -0
- package/examples/input-callbacks.html +26 -15
- package/examples/validate-moves.html +3 -8
- package/index.html +2 -1
- package/package.json +1 -1
- package/src/cm-chessboard/Chessboard.js +1 -32
- package/src/cm-chessboard/extensions/markers/Markers.js +132 -0
- package/src/cm-chessboard/model/ChessboardState.js +0 -25
- package/src/cm-chessboard/view/ChessboardView.js +0 -32
- package/src/cm-chessboard/view/VisualMoveInput.js +0 -25
package/README.md
CHANGED
|
@@ -8,6 +8,8 @@ in [chess-console](https://shaack.com/projekte/chess-console/examples/load-pgn.h
|
|
|
8
8
|
[cm-fen-editor](https://shaack.com/projekte/cm-fen-editor/). They are all nice written ES6 Modules to handle different
|
|
9
9
|
aspects of chess games.
|
|
10
10
|
|
|
11
|
+
> Note: With Version 6 **markers** have been moves to an extension, see the [Markers Extension example](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-markers-extension.html) and [Input callbacks example](https://shaack.com/projekte/cm-chessboard/examples/input-callbacks.html).
|
|
12
|
+
|
|
11
13
|
## Features
|
|
12
14
|
|
|
13
15
|
- **No dependencies**, just clean ES6
|
|
@@ -19,7 +21,8 @@ aspects of chess games.
|
|
|
19
21
|
## Extensions
|
|
20
22
|
|
|
21
23
|
- [Accessibility Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-accessibility-extension.html)
|
|
22
|
-
- [Arrows Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-arrows-extension.html)
|
|
24
|
+
- [Arrows Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-arrows-extension.html)
|
|
25
|
+
- [Markers Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-markers-extension.html) 🆕
|
|
23
26
|
- [PromotionDialog Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-promotion-dialog-extension.html)
|
|
24
27
|
- [RenderVideo](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-render-video-extension.html) 🆕
|
|
25
28
|
|
|
@@ -39,21 +39,27 @@ function inputHandler(event) {
|
|
|
39
39
|
<script type="module">
|
|
40
40
|
import {INPUT_EVENT_TYPE, Chessboard} from "../src/cm-chessboard/Chessboard.js"
|
|
41
41
|
import {FEN} from "../src/cm-chessboard/model/Position.js"
|
|
42
|
+
import {MARKER_TYPE, Markers} from "../src/cm-chessboard/extensions/markers/Markers.js"
|
|
42
43
|
|
|
43
44
|
window.board = new Chessboard(document.getElementById("board"), {
|
|
44
45
|
position: FEN.start,
|
|
45
|
-
sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"}
|
|
46
|
+
sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"},
|
|
47
|
+
extensions: [{class: Markers}]
|
|
46
48
|
})
|
|
47
49
|
|
|
48
50
|
window.board.enableMoveInput(inputHandler)
|
|
49
51
|
function inputHandler(event) {
|
|
50
52
|
console.log(event)
|
|
53
|
+
window.board.removeMarkers(MARKER_TYPE.frame)
|
|
51
54
|
switch (event.type) {
|
|
52
55
|
case INPUT_EVENT_TYPE.moveInputStarted:
|
|
53
56
|
log(`moveInputStarted: ${event.square}`)
|
|
57
|
+
window.board.addMarker(MARKER_TYPE.frame, event.square)
|
|
54
58
|
return true
|
|
55
59
|
case INPUT_EVENT_TYPE.validateMoveInput:
|
|
56
60
|
log(`validateMoveInput: ${event.squareFrom}-${event.squareTo}`)
|
|
61
|
+
window.board.addMarker(MARKER_TYPE.frame, event.squareFrom)
|
|
62
|
+
window.board.addMarker(MARKER_TYPE.frame, event.squareTo)
|
|
57
63
|
return true
|
|
58
64
|
case INPUT_EVENT_TYPE.moveInputCanceled:
|
|
59
65
|
log(`moveInputCanceled`)
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<title>cm-chessboard</title>
|
|
6
|
+
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
|
|
7
|
+
<link rel="stylesheet" href="../styles/examples.css"/>
|
|
8
|
+
<link rel="stylesheet" href="../../assets/styles/cm-chessboard.css"/>
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<h1><a href="../..">cm-chessboard</a></h1>
|
|
12
|
+
<h2>Example: Markers extension</h2>
|
|
13
|
+
<p>Right click crates a circle below the pieces. Left click created a dot above the pieces.</p>
|
|
14
|
+
<div class="board" id="board"></div>
|
|
15
|
+
<br style="clear: both"/>
|
|
16
|
+
<div>
|
|
17
|
+
<button onclick="window.removeDots()" class="btn btn-primary">Remove all dots</button>
|
|
18
|
+
</div>
|
|
19
|
+
<script type="module">
|
|
20
|
+
import {Chessboard, SQUARE_SELECT_TYPE} from "../../src/cm-chessboard/Chessboard.js"
|
|
21
|
+
import {FEN} from "../../src/cm-chessboard/model/Position.js"
|
|
22
|
+
import {MARKER_TYPE, Markers} from "../../src/cm-chessboard/extensions/markers/Markers.js"
|
|
23
|
+
|
|
24
|
+
const board = new Chessboard(document.getElementById("board"), {
|
|
25
|
+
position: FEN.start,
|
|
26
|
+
sprite: {url: "../../assets/images/chessboard-sprite.svg", cache: false},
|
|
27
|
+
extensions: [{class: Markers}]
|
|
28
|
+
})
|
|
29
|
+
board.enableSquareSelect((event) => {
|
|
30
|
+
console.log("SquareSelect board1", event)
|
|
31
|
+
if (event.mouseEvent.type === "mousedown") {
|
|
32
|
+
let markerType
|
|
33
|
+
if (event.type === SQUARE_SELECT_TYPE.primary) {
|
|
34
|
+
markerType = MARKER_TYPE.dot
|
|
35
|
+
} else {
|
|
36
|
+
markerType = MARKER_TYPE.circle
|
|
37
|
+
}
|
|
38
|
+
const markersOnSquare = board.getMarkers(markerType, event.square)
|
|
39
|
+
if (markersOnSquare.length > 0) {
|
|
40
|
+
board.removeMarkers(markerType, event.square)
|
|
41
|
+
} else {
|
|
42
|
+
board.addMarker(markerType, event.square)
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
})
|
|
46
|
+
window.removeDots = () => {
|
|
47
|
+
board.removeMarkers(MARKER_TYPE.dot)
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
</script>
|
|
51
|
+
</body>
|
|
52
|
+
</html>
|
|
@@ -17,26 +17,30 @@
|
|
|
17
17
|
<button onclick="window.removeDots()" class="btn btn-primary">Remove all dots</button>
|
|
18
18
|
</div>
|
|
19
19
|
<script type="module">
|
|
20
|
-
import {Chessboard,
|
|
20
|
+
import {Chessboard, INPUT_EVENT_TYPE, SQUARE_SELECT_TYPE} from "../src/cm-chessboard/Chessboard.js"
|
|
21
21
|
import {FEN} from "../src/cm-chessboard/model/Position.js"
|
|
22
|
+
import {MARKER_TYPE, Markers} from "../src/cm-chessboard/extensions/markers/Markers.js"
|
|
22
23
|
|
|
23
24
|
const board1 = new Chessboard(document.getElementById("board1"), {
|
|
24
25
|
position: FEN.start,
|
|
25
|
-
sprite: {url: "../assets/images/chessboard-sprite.svg", cache: false}
|
|
26
|
+
sprite: {url: "../assets/images/chessboard-sprite.svg", cache: false},
|
|
27
|
+
extensions: [{class: Markers}]
|
|
26
28
|
})
|
|
27
29
|
board1.enableSquareSelect((event) => {
|
|
28
30
|
console.log("SquareSelect board1", event)
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
31
|
+
if (event.mouseEvent.type === "mousedown") {
|
|
32
|
+
let markerType
|
|
33
|
+
if (event.type === SQUARE_SELECT_TYPE.primary) {
|
|
34
|
+
markerType = MARKER_TYPE.dot
|
|
35
|
+
} else {
|
|
36
|
+
markerType = MARKER_TYPE.circle
|
|
37
|
+
}
|
|
38
|
+
const markersOnSquare = board1.getMarkers(markerType, event.square)
|
|
39
|
+
if (markersOnSquare.length > 0) {
|
|
40
|
+
board1.removeMarkers(markerType, event.square)
|
|
41
|
+
} else {
|
|
42
|
+
board1.addMarker(markerType, event.square)
|
|
43
|
+
}
|
|
40
44
|
}
|
|
41
45
|
})
|
|
42
46
|
window.removeDots = () => {
|
|
@@ -46,15 +50,22 @@
|
|
|
46
50
|
const board2 = new Chessboard(document.getElementById("board2"), {
|
|
47
51
|
position: "rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR",
|
|
48
52
|
sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"},
|
|
49
|
-
|
|
53
|
+
extensions: [{class: Markers}]
|
|
50
54
|
})
|
|
51
55
|
board2.enableMoveInput((event) => {
|
|
52
56
|
console.log("MoveInput board2", event)
|
|
57
|
+
board2.removeMarkers(MARKER_TYPE.frame)
|
|
58
|
+
if(event.type === INPUT_EVENT_TYPE.moveInputStarted) {
|
|
59
|
+
board2.addMarker(MARKER_TYPE.frame, event.square)
|
|
60
|
+
} else if(event.type === INPUT_EVENT_TYPE.validateMoveInput) {
|
|
61
|
+
board2.addMarker(MARKER_TYPE.frame, event.squareFrom)
|
|
62
|
+
board2.addMarker(MARKER_TYPE.frame, event.squareTo)
|
|
63
|
+
}
|
|
53
64
|
return true
|
|
54
65
|
})
|
|
55
66
|
const marker = {class: "markerCircleRed", slice: "markerCircle"}
|
|
56
67
|
board2.enableSquareSelect((event) => {
|
|
57
|
-
if(event.type === SQUARE_SELECT_TYPE.secondary) {
|
|
68
|
+
if(event.type === SQUARE_SELECT_TYPE.secondary && event.mouseEvent.type === "mousedown") {
|
|
58
69
|
const markersOnSquare = board2.getMarkers(marker, event.square)
|
|
59
70
|
if (markersOnSquare.length > 0) {
|
|
60
71
|
board2.removeMarkers(marker, event.square)
|
|
@@ -67,7 +67,8 @@ board.enableMoveInput(inputHandler, COLOR.white)
|
|
|
67
67
|
<div id="output"></div>
|
|
68
68
|
<!--suppress JSUnresolvedFunction -->
|
|
69
69
|
<script type="module">
|
|
70
|
-
import {INPUT_EVENT_TYPE, COLOR, Chessboard
|
|
70
|
+
import {INPUT_EVENT_TYPE, COLOR, Chessboard} from "../src/cm-chessboard/Chessboard.js"
|
|
71
|
+
import {MARKER_TYPE, Markers} from "../src/cm-chessboard/extensions/markers/Markers.js"
|
|
71
72
|
|
|
72
73
|
const chess = new Chess()
|
|
73
74
|
|
|
@@ -111,13 +112,7 @@ board.enableMoveInput(inputHandler, COLOR.white)
|
|
|
111
112
|
sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"},
|
|
112
113
|
style: {moveFromMarker: MARKER_TYPE.square, moveToMarker: MARKER_TYPE.square},
|
|
113
114
|
orientation: COLOR.white,
|
|
114
|
-
|
|
115
|
-
brailleNotationInAlt: true, // show the braille notation of the game in the alt attribute of the svg
|
|
116
|
-
movePieceForm: true, // display a form to move a piece (from, to, move)
|
|
117
|
-
boardAsTable: true, // display the board additionally as HTML table
|
|
118
|
-
piecesAsList: true, // display the pieces additionally as List
|
|
119
|
-
visuallyHidden: true // hide all those extra outputs visually but keep them accessible for screen readers and braille displays
|
|
120
|
-
}
|
|
115
|
+
extensions: [{class: Markers}]
|
|
121
116
|
})
|
|
122
117
|
board.enableMoveInput(inputHandler, COLOR.white)
|
|
123
118
|
</script>
|
package/index.html
CHANGED
|
@@ -26,10 +26,11 @@ It works, it is cool and it is easy to use. 👍</p>
|
|
|
26
26
|
<li><a href="examples/different-styles.html">Different styles and piece sets</a> 🎨</li>
|
|
27
27
|
<li><a href="examples/destroy-many-boards.html">Stress test, 5000 boards created and destroyed</a> 🤓 👍</li>
|
|
28
28
|
</ul>
|
|
29
|
-
<h3>Examples
|
|
29
|
+
<h3>Examples using the cm-chessboard extensions</h3>
|
|
30
30
|
<ul>
|
|
31
31
|
<li><a href="examples/extensions/chessboard-accessibility-extension.html">Accessibility extension</a></li>
|
|
32
32
|
<li><a href="examples/extensions/chessboard-arrows-extension.html">Arrows extension</a></li>
|
|
33
|
+
<li><a href="examples/extensions/chessboard-markers-extension.html">Markers extension</a> 🆕</li>
|
|
33
34
|
<li><a href="examples/extensions/chessboard-promotion-dialog-extension.html">PromotionDialog extension</a></li>
|
|
34
35
|
<li><a href="examples/extensions/chessboard-render-video-extension.html">RenderVideo extension</a> 🆕</li>
|
|
35
36
|
</ul>
|
package/package.json
CHANGED
|
@@ -17,7 +17,7 @@ export const COLOR = {
|
|
|
17
17
|
export const INPUT_EVENT_TYPE = {
|
|
18
18
|
moveInputStarted: "moveInputStarted",
|
|
19
19
|
validateMoveInput: "validateMoveInput",
|
|
20
|
-
moveInputCanceled: "moveInputCanceled"
|
|
20
|
+
moveInputCanceled: "moveInputCanceled",
|
|
21
21
|
}
|
|
22
22
|
export const SQUARE_SELECT_TYPE = {
|
|
23
23
|
primary: "primary",
|
|
@@ -28,12 +28,6 @@ export const BORDER_TYPE = {
|
|
|
28
28
|
thin: "thin", // thin border
|
|
29
29
|
frame: "frame" // wide border with coordinates in it
|
|
30
30
|
}
|
|
31
|
-
export const MARKER_TYPE = {
|
|
32
|
-
frame: {class: "marker-frame", slice: "markerFrame"},
|
|
33
|
-
square: {class: "marker-square", slice: "markerSquare"},
|
|
34
|
-
dot: {class: "marker-dot", slice: "markerDot"},
|
|
35
|
-
circle: {class: "marker-circle", slice: "markerCircle"}
|
|
36
|
-
}
|
|
37
31
|
export const PIECE = {
|
|
38
32
|
wp: "wp", wb: "wb", wn: "wn", wr: "wr", wq: "wq", wk: "wk",
|
|
39
33
|
bp: "bp", bb: "bb", bn: "bn", br: "br", bq: "bq", bk: "bk"
|
|
@@ -59,8 +53,6 @@ export class Chessboard {
|
|
|
59
53
|
showCoordinates: true, // show ranks and files
|
|
60
54
|
borderType: BORDER_TYPE.none, // "thin" thin border, "frame" wide border with coordinates in it, "none" no border
|
|
61
55
|
aspectRatio: 1, // height/width of the board
|
|
62
|
-
moveFromMarker: MARKER_TYPE.frame, // the marker used to mark the start square
|
|
63
|
-
moveToMarker: MARKER_TYPE.frame, // the marker used to mark the square where the figure is moving to
|
|
64
56
|
},
|
|
65
57
|
sprite: {
|
|
66
58
|
url: "./assets/images/chessboard-sprite.svg", // pieces and markers are stored in a sprite file
|
|
@@ -152,29 +144,6 @@ export class Chessboard {
|
|
|
152
144
|
return this.state.orientation
|
|
153
145
|
}
|
|
154
146
|
|
|
155
|
-
addMarker(type, square) {
|
|
156
|
-
this.state.addMarker(square, type)
|
|
157
|
-
this.view.drawMarkers()
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
getMarkers(type = undefined, square = undefined) {
|
|
161
|
-
const markersFound = []
|
|
162
|
-
this.state.markers.forEach((marker) => {
|
|
163
|
-
const markerSquare = marker.square
|
|
164
|
-
if (!square && (!type || type === marker.type) ||
|
|
165
|
-
!type && square === markerSquare ||
|
|
166
|
-
type === marker.type && square === markerSquare) {
|
|
167
|
-
markersFound.push({square: marker.square, type: marker.type})
|
|
168
|
-
}
|
|
169
|
-
})
|
|
170
|
-
return markersFound
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
removeMarkers(type = undefined, square = undefined) {
|
|
174
|
-
this.state.removeMarkers(square, type)
|
|
175
|
-
this.view.drawMarkers()
|
|
176
|
-
}
|
|
177
|
-
|
|
178
147
|
enableMoveInput(eventHandler, color = undefined) {
|
|
179
148
|
this.view.enableMoveInput(eventHandler, color)
|
|
180
149
|
}
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
|
|
2
|
+
import {Extension, EXTENSION_POINT} from "../../model/Extension.js"
|
|
3
|
+
import {Svg} from "../../view/ChessboardView.js"
|
|
4
|
+
|
|
5
|
+
export const MARKER_TYPE = {
|
|
6
|
+
square: {class: "marker-square", slice: "markerSquare"},
|
|
7
|
+
frame: {class: "marker-frame", slice: "markerFrame"},
|
|
8
|
+
dot: {class: "marker-dot", slice: "markerDot", position: 'above'},
|
|
9
|
+
circle: {class: "marker-circle", slice: "markerCircle"}
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export class Markers extends Extension {
|
|
13
|
+
constructor(chessboard, props) {
|
|
14
|
+
super(chessboard, props)
|
|
15
|
+
this.registerExtensionPoint(EXTENSION_POINT.redrawBoard, () => {
|
|
16
|
+
this.onRedrawBoard()
|
|
17
|
+
})
|
|
18
|
+
let defaultProps = {
|
|
19
|
+
style: {
|
|
20
|
+
moveFromMarker: MARKER_TYPE.frame, // the marker used to mark the start square
|
|
21
|
+
moveToMarker: MARKER_TYPE.frame, // the marker used to mark the square where the figure is moving to
|
|
22
|
+
},
|
|
23
|
+
sprite: chessboard.props.sprite
|
|
24
|
+
}
|
|
25
|
+
this.props = {}
|
|
26
|
+
Object.assign(this.props, defaultProps)
|
|
27
|
+
Object.assign(this.props, props)
|
|
28
|
+
this.props.sprite = defaultProps.sprite
|
|
29
|
+
if (props && props.sprite) {
|
|
30
|
+
Object.assign(this.props.sprite, props.sprite)
|
|
31
|
+
}
|
|
32
|
+
if (this.props.sprite.cache) {
|
|
33
|
+
this.chessboard.view.cacheSpriteToDiv("chessboardMarkerSpriteCache", this.props.sprite.url)
|
|
34
|
+
}
|
|
35
|
+
this.registerMethod("addMarker", this.addMarker)
|
|
36
|
+
this.registerMethod("getMarkers", this.getMarkers)
|
|
37
|
+
this.registerMethod("removeMarkers", this.removeMarkers)
|
|
38
|
+
this.markerGroupDown = Svg.addElement(chessboard.view.markersLayer, "g", {class: "markers"})
|
|
39
|
+
this.markerGroupUp = Svg.addElement(chessboard.view.markersTopLayer, "g", {class: "markers"})
|
|
40
|
+
this.markers = []
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
onRedrawBoard() {
|
|
44
|
+
while (this.markerGroupUp.firstChild) {
|
|
45
|
+
this.markerGroupUp.removeChild(this.markerGroupUp.firstChild)
|
|
46
|
+
}
|
|
47
|
+
while (this.markerGroupDown.firstChild) {
|
|
48
|
+
this.markerGroupDown.removeChild(this.markerGroupDown.firstChild)
|
|
49
|
+
}
|
|
50
|
+
this.markers.forEach((marker) => {
|
|
51
|
+
this.drawMarker(marker)
|
|
52
|
+
}
|
|
53
|
+
)
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
drawMarker(marker) {
|
|
57
|
+
let markerGroup;
|
|
58
|
+
if (marker.type.position === 'above') {
|
|
59
|
+
markerGroup = Svg.addElement(this.markerGroupUp, "g")
|
|
60
|
+
} else {
|
|
61
|
+
markerGroup = Svg.addElement(this.markerGroupDown, "g")
|
|
62
|
+
}
|
|
63
|
+
markerGroup.setAttribute("data-square", marker.square)
|
|
64
|
+
const point = this.chessboard.view.squareToPoint(marker.square)
|
|
65
|
+
const transform = (this.chessboard.view.svg.createSVGTransform())
|
|
66
|
+
transform.setTranslate(point.x, point.y)
|
|
67
|
+
markerGroup.transform.baseVal.appendItem(transform)
|
|
68
|
+
const spriteUrl = this.chessboard.props.sprite.cache ? "" : this.chessboard.props.sprite.url
|
|
69
|
+
const markerUse = Svg.addElement(markerGroup, "use",
|
|
70
|
+
{href: `${spriteUrl}#${marker.type.slice}`, class: "marker " + marker.type.class})
|
|
71
|
+
const transformScale = (this.chessboard.view.svg.createSVGTransform())
|
|
72
|
+
transformScale.setScale(this.chessboard.view.scalingX, this.chessboard.view.scalingY)
|
|
73
|
+
markerUse.transform.baseVal.appendItem(transformScale)
|
|
74
|
+
return markerGroup
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
addMarker(type, square) {
|
|
78
|
+
if (typeof type === "string" || typeof square === "object") { // todo remove 2022-12-01
|
|
79
|
+
console.error("changed the signature of `addMarker` to `(type, square)` with v5.1.x")
|
|
80
|
+
return
|
|
81
|
+
}
|
|
82
|
+
this.markers.push(new Marker(square, type))
|
|
83
|
+
this.onRedrawBoard()
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
getMarkers(type = undefined, square = undefined) {
|
|
87
|
+
if (typeof type === "string" || typeof square === "object") { // todo remove 2022-12-01
|
|
88
|
+
console.error("changed the signature of `getMarkers` to `(type, square)` with v5.1.x")
|
|
89
|
+
return
|
|
90
|
+
}
|
|
91
|
+
let markersFound = []
|
|
92
|
+
this.markers.forEach((marker) => {
|
|
93
|
+
if (marker.matches(square, type)) {
|
|
94
|
+
markersFound.push(marker)
|
|
95
|
+
}
|
|
96
|
+
})
|
|
97
|
+
return markersFound
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
removeMarkers(type = undefined, square = undefined) {
|
|
101
|
+
if (typeof type === "string" || typeof square === "object") { // todo remove 2022-12-01
|
|
102
|
+
console.error("changed the signature of `removeMarkers` to `(type, square)` with v5.1.x")
|
|
103
|
+
return
|
|
104
|
+
}
|
|
105
|
+
this.markers = this.markers.filter((marker) => !marker.matches(square, type))
|
|
106
|
+
this.onRedrawBoard()
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
class Marker {
|
|
111
|
+
constructor(square, type) {
|
|
112
|
+
this.square = square
|
|
113
|
+
this.type = type
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
matches(square = undefined, type = undefined) {
|
|
117
|
+
if (!type && !square) {
|
|
118
|
+
return true
|
|
119
|
+
} else if (!type) {
|
|
120
|
+
if (square === this.square) {
|
|
121
|
+
return true
|
|
122
|
+
}
|
|
123
|
+
} else if (!square) {
|
|
124
|
+
if (this.type === type) {
|
|
125
|
+
return true
|
|
126
|
+
}
|
|
127
|
+
} else if (this.type === type && square === this.square) {
|
|
128
|
+
return true
|
|
129
|
+
}
|
|
130
|
+
return false
|
|
131
|
+
}
|
|
132
|
+
}
|
|
@@ -53,31 +53,6 @@ export class ChessboardState {
|
|
|
53
53
|
this._position = position
|
|
54
54
|
}
|
|
55
55
|
|
|
56
|
-
addMarker(square, type) {
|
|
57
|
-
this.markers.push({square: square, type: type})
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
removeMarkers(square = undefined, type = undefined) {
|
|
61
|
-
if (!square && !type) {
|
|
62
|
-
this.markers = []
|
|
63
|
-
} else {
|
|
64
|
-
this.markers = this.markers.filter((marker) => {
|
|
65
|
-
if (!type) {
|
|
66
|
-
if (square === marker.square) {
|
|
67
|
-
return false
|
|
68
|
-
}
|
|
69
|
-
} else if (!square) {
|
|
70
|
-
if (marker.type === type) {
|
|
71
|
-
return false
|
|
72
|
-
}
|
|
73
|
-
} else if (marker.type === type && square === marker.square) {
|
|
74
|
-
return false
|
|
75
|
-
}
|
|
76
|
-
return true
|
|
77
|
-
})
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
|
|
81
56
|
invokeExtensionPoints(name, data = {}) {
|
|
82
57
|
const extensionPoints = this.extensionPoints[name]
|
|
83
58
|
const dataCloned = Object.assign({}, data)
|
|
@@ -137,11 +137,9 @@ export class ChessboardView {
|
|
|
137
137
|
this.boardGroup = Svg.addElement(this.svg, "g", {class: "board"})
|
|
138
138
|
this.coordinatesGroup = Svg.addElement(this.svg, "g", {class: "coordinates"})
|
|
139
139
|
this.markersLayer = Svg.addElement(this.svg, "g", {class: "markers-layer"})
|
|
140
|
-
this.markersGroup = Svg.addElement(this.markersLayer, "g", {class: "markers"})
|
|
141
140
|
this.piecesLayer = Svg.addElement(this.svg, "g", {class: "pieces-layer"})
|
|
142
141
|
this.piecesGroup = Svg.addElement(this.piecesLayer, "g", {class: "pieces"})
|
|
143
142
|
this.markersTopLayer = Svg.addElement(this.svg, "g", {class: "markers-top-layer"})
|
|
144
|
-
// this.markersTopGroup = Svg.addElement(this.markersTopLayer, "g", {class: "markers-top"})
|
|
145
143
|
}
|
|
146
144
|
|
|
147
145
|
updateMetrics() {
|
|
@@ -179,7 +177,6 @@ export class ChessboardView {
|
|
|
179
177
|
redrawBoard() {
|
|
180
178
|
this.redrawSquares()
|
|
181
179
|
this.drawCoordinates()
|
|
182
|
-
this.drawMarkers()
|
|
183
180
|
this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.redrawBoard)
|
|
184
181
|
this.visualizeInputState()
|
|
185
182
|
}
|
|
@@ -362,35 +359,6 @@ export class ChessboardView {
|
|
|
362
359
|
return piece
|
|
363
360
|
}
|
|
364
361
|
|
|
365
|
-
// Markers //
|
|
366
|
-
|
|
367
|
-
drawMarkers() {
|
|
368
|
-
while (this.markersGroup.firstChild) {
|
|
369
|
-
this.markersGroup.removeChild(this.markersGroup.firstChild)
|
|
370
|
-
}
|
|
371
|
-
this.chessboard.state.markers.forEach((marker) => {
|
|
372
|
-
this.drawMarker(marker)
|
|
373
|
-
}
|
|
374
|
-
)
|
|
375
|
-
}
|
|
376
|
-
|
|
377
|
-
drawMarker(marker) {
|
|
378
|
-
// console.log("drawMarker", marker)
|
|
379
|
-
const markerGroup = Svg.addElement(this.markersGroup, "g")
|
|
380
|
-
markerGroup.setAttribute("data-square", marker.square)
|
|
381
|
-
const point = this.squareToPoint(marker.square)
|
|
382
|
-
const transform = (this.svg.createSVGTransform())
|
|
383
|
-
transform.setTranslate(point.x, point.y)
|
|
384
|
-
markerGroup.transform.baseVal.appendItem(transform)
|
|
385
|
-
const spriteUrl = this.chessboard.props.sprite.cache ? "" : this.chessboard.props.sprite.url
|
|
386
|
-
const markerUse = Svg.addElement(markerGroup, "use",
|
|
387
|
-
{href: `${spriteUrl}#${marker.type.slice}`, class: "marker " + marker.type.class})
|
|
388
|
-
const transformScale = (this.svg.createSVGTransform())
|
|
389
|
-
transformScale.setScale(this.scalingX, this.scalingY)
|
|
390
|
-
markerUse.transform.baseVal.appendItem(transformScale)
|
|
391
|
-
return markerGroup
|
|
392
|
-
}
|
|
393
|
-
|
|
394
362
|
// enable and disable move input //
|
|
395
363
|
|
|
396
364
|
enableMoveInput(eventHandler, color = undefined) {
|
|
@@ -78,7 +78,6 @@ export class VisualMoveInput {
|
|
|
78
78
|
this.fromSquare = params.square
|
|
79
79
|
this.toSquare = undefined
|
|
80
80
|
this.movedPiece = params.piece
|
|
81
|
-
this.updateStartEndMarkers()
|
|
82
81
|
this.startPoint = params.point
|
|
83
82
|
if (!this.pointerMoveListener && !this.pointerUpListener) {
|
|
84
83
|
if (params.type === "mousedown") {
|
|
@@ -175,7 +174,6 @@ export class VisualMoveInput {
|
|
|
175
174
|
this.fromSquare = undefined
|
|
176
175
|
this.toSquare = undefined
|
|
177
176
|
this.movedPiece = undefined
|
|
178
|
-
this.updateStartEndMarkers()
|
|
179
177
|
if (this.draggablePiece) {
|
|
180
178
|
Svg.removeElement(this.draggablePiece)
|
|
181
179
|
this.draggablePiece = undefined
|
|
@@ -319,15 +317,12 @@ export class VisualMoveInput {
|
|
|
319
317
|
const square = target.getAttribute("data-square")
|
|
320
318
|
if (square !== this.fromSquare && square !== this.toSquare) {
|
|
321
319
|
this.toSquare = square
|
|
322
|
-
this.updateStartEndMarkers()
|
|
323
320
|
} else if (square === this.fromSquare && this.toSquare !== undefined) {
|
|
324
321
|
this.toSquare = undefined
|
|
325
|
-
this.updateStartEndMarkers()
|
|
326
322
|
}
|
|
327
323
|
} else {
|
|
328
324
|
if (this.toSquare !== undefined) {
|
|
329
325
|
this.toSquare = undefined
|
|
330
|
-
this.updateStartEndMarkers()
|
|
331
326
|
}
|
|
332
327
|
}
|
|
333
328
|
if (this.view.chessboard.state.inputEnabled && (this.moveInputState === STATE.dragTo || this.moveInputState === STATE.clickDragTo)) {
|
|
@@ -378,26 +373,6 @@ export class VisualMoveInput {
|
|
|
378
373
|
}
|
|
379
374
|
}
|
|
380
375
|
|
|
381
|
-
updateStartEndMarkers() {
|
|
382
|
-
if (this.chessboard.props.style.moveFromMarker) {
|
|
383
|
-
this.chessboard.state.removeMarkers(undefined, this.chessboard.props.style.moveFromMarker)
|
|
384
|
-
}
|
|
385
|
-
if (this.chessboard.props.style.moveToMarker) {
|
|
386
|
-
this.chessboard.state.removeMarkers(undefined, this.chessboard.props.style.moveToMarker)
|
|
387
|
-
}
|
|
388
|
-
if (this.chessboard.props.style.moveFromMarker) {
|
|
389
|
-
if (this.fromSquare) {
|
|
390
|
-
this.chessboard.state.addMarker(this.fromSquare, this.chessboard.props.style.moveFromMarker)
|
|
391
|
-
}
|
|
392
|
-
}
|
|
393
|
-
if (this.chessboard.props.style.moveToMarker) {
|
|
394
|
-
if (this.toSquare) {
|
|
395
|
-
this.chessboard.state.addMarker(this.toSquare, this.chessboard.props.style.moveToMarker)
|
|
396
|
-
}
|
|
397
|
-
}
|
|
398
|
-
this.view.drawMarkers()
|
|
399
|
-
}
|
|
400
|
-
|
|
401
376
|
reset() {
|
|
402
377
|
this.setMoveInputState(STATE.reset)
|
|
403
378
|
}
|