cm-chessboard 7.1.0 → 7.1.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 (7) hide show
  1. package/README.md +1 -1
  2. package/assets/extensions/markers/markers.css +18 -10
  3. package/assets/extensions/markers/markers.css.map +1 -1
  4. package/assets/extensions/markers/markers.scss +31 -13
  5. package/examples/extensions/markers-extension.html +6 -5
  6. package/package.json +1 -1
  7. package/src/cm-chessboard/extensions/markers/Markers.js +7 -3
package/README.md CHANGED
@@ -8,7 +8,7 @@ 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 7, I made a heavy allover refactoring. The chessboard props have been changed and the files structure also. Version 7 of the chessboard will not work out of the box, after an update from a version lower than version 7.
11
+ > Note: With version 7, I made a heavy allover refactoring. The chessboard props have been changed and the files structure also. Version 7 of the cm-chessboard will not work out of the box after an update from a previous version. Also with version 7 comes the move cancelling via secondary mouse button.
12
12
 
13
13
  ## Features
14
14
 
package/assets/extensions/markers/markers.css CHANGED
@@ -1,26 +1,34 @@
1
1
  .cm-chessboard .markers {
2
2
  pointer-events: none; }
3
3
  .cm-chessboard .markers .marker.marker-frame {
4
- stroke: black;
4
+ stroke: #000000;
5
5
  stroke-width: 1.8px;
6
6
  opacity: 0.5; }
7
- .cm-chessboard .markers .marker.marker-frame-red {
7
+ .cm-chessboard .markers .marker.marker-frame-primary {
8
+ stroke: #0009bd;
9
+ stroke-width: 1.8px;
10
+ opacity: 0.4; }
11
+ .cm-chessboard .markers .marker.marker-frame-danger {
8
12
  stroke: #aa0000;
9
13
  stroke-width: 1.8px;
10
14
  opacity: 0.4; }
11
- .cm-chessboard .markers .marker.marker-square {
12
- fill: black;
13
- opacity: 0.11; }
14
- .cm-chessboard .markers .marker.marker-dot {
15
- fill: black;
16
- opacity: 0.3; }
17
15
  .cm-chessboard .markers .marker.marker-circle {
18
- stroke: #000055;
16
+ stroke: #000000;
19
17
  stroke-width: 3px;
20
18
  opacity: 0.4; }
21
- .cm-chessboard .markers .marker.marker-circle-red {
19
+ .cm-chessboard .markers .marker.marker-circle-primary {
20
+ stroke: #0009bd;
21
+ stroke-width: 3px;
22
+ opacity: 0.4; }
23
+ .cm-chessboard .markers .marker.marker-circle-danger {
22
24
  stroke: #aa0000;
23
25
  stroke-width: 3px;
24
26
  opacity: 0.4; }
27
+ .cm-chessboard .markers .marker.marker-square {
28
+ fill: black;
29
+ opacity: 0.11; }
30
+ .cm-chessboard .markers .marker.marker-dot {
31
+ fill: black;
32
+ opacity: 0.3; }
25
33
 
26
34
  /*# sourceMappingURL=markers.css.map */
package/assets/extensions/markers/markers.css.map CHANGED
@@ -5,5 +5,5 @@
5
5
  "markers.scss"
6
6
  ],
7
7
  "names": [],
8
- "mappings": "AAAA,AACE,cADY,CACZ,QAAQ,CAAC;EACP,cAAc,EAAE,IAAI,GAoCrB;EAtCH,AAIM,cAJQ,CACZ,QAAQ,CAEN,OAAO,AACJ,aAAa,CAAC;IACb,MAAM,EAAE,KAAK;IACb,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,GAAG,GACb;EARP,AAUM,cAVQ,CACZ,QAAQ,CAEN,OAAO,AAOJ,iBAAiB,CAAC;IACjB,MAAM,EAAE,OAAO;IACf,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,GAAG,GACb;EAdP,AAgBM,cAhBQ,CACZ,QAAQ,CAEN,OAAO,AAaJ,cAAc,CAAC;IACd,IAAI,EAAE,KAAK;IACX,OAAO,EAAE,IAAI,GACd;EAnBP,AAqBM,cArBQ,CACZ,QAAQ,CAEN,OAAO,AAkBJ,WAAW,CAAC;IACX,IAAI,EAAE,KAAK;IACX,OAAO,EAAE,GAAG,GACb;EAxBP,AA0BM,cA1BQ,CACZ,QAAQ,CAEN,OAAO,AAuBJ,cAAc,CAAC;IACd,MAAM,EAAE,OAAO;IACf,YAAY,EAAE,GAAG;IACjB,OAAO,EAAE,GAAG,GACb;EA9BP,AAgCM,cAhCQ,CACZ,QAAQ,CAEN,OAAO,AA6BJ,kBAAkB,CAAC;IAClB,MAAM,EAAE,OAAO;IACf,YAAY,EAAE,GAAG;IACjB,OAAO,EAAE,GAAG,GACb"
8
+ "mappings": "AAIA,AACE,cADY,CACZ,QAAQ,CAAC;EACP,cAAc,EAAE,IAAI,GAkDrB;EApDH,AAKM,cALQ,CACZ,QAAQ,CAGN,OAAO,AACJ,aAAa,CAAC;IACb,MAAM,EAVC,OAAO;IAWd,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,GAAG,GACb;EATP,AAWM,cAXQ,CACZ,QAAQ,CAGN,OAAO,AAOJ,qBAAqB,CAAC;IACrB,MAAM,EAfS,OAAO;IAgBtB,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,GAAG,GACb;EAfP,AAiBM,cAjBQ,CACZ,QAAQ,CAGN,OAAO,AAaJ,oBAAoB,CAAC;IACpB,MAAM,EApBQ,OAAO;IAqBrB,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,GAAG,GACb;EArBP,AAuBM,cAvBQ,CACZ,QAAQ,CAGN,OAAO,AAmBJ,cAAc,CAAC;IACd,MAAM,EA5BC,OAAO;IA6Bd,YAAY,EAAE,GAAG;IACjB,OAAO,EAAE,GAAG,GACb;EA3BP,AA6BM,cA7BQ,CACZ,QAAQ,CAGN,OAAO,AAyBJ,sBAAsB,CAAC;IACtB,MAAM,EAjCS,OAAO;IAkCtB,YAAY,EAAE,GAAG;IACjB,OAAO,EAAE,GAAG,GACb;EAjCP,AAmCM,cAnCQ,CACZ,QAAQ,CAGN,OAAO,AA+BJ,qBAAqB,CAAC;IACrB,MAAM,EAtCQ,OAAO;IAuCrB,YAAY,EAAE,GAAG;IACjB,OAAO,EAAE,GAAG,GACb;EAvCP,AAyCM,cAzCQ,CACZ,QAAQ,CAGN,OAAO,AAqCJ,cAAc,CAAC;IACd,IAAI,EAAE,KAAK;IACX,OAAO,EAAE,IAAI,GACd;EA5CP,AA8CM,cA9CQ,CACZ,QAAQ,CAGN,OAAO,AA0CJ,WAAW,CAAC;IACX,IAAI,EAAE,KAAK;IACX,OAAO,EAAE,GAAG,GACb"
9
9
  }
package/assets/extensions/markers/markers.scss CHANGED
@@ -1,40 +1,58 @@
1
+ $marker-color: #000000;
2
+ $marker-color-primary: #0009bd;
3
+ $marker-color-danger: #aa0000;
4
+
1
5
  .cm-chessboard {
2
6
  .markers {
3
7
  pointer-events: none;
8
+
4
9
  .marker {
5
10
  &.marker-frame {
6
- stroke: black;
11
+ stroke: $marker-color;
7
12
  stroke-width: 1.8px;
8
13
  opacity: 0.5;
9
14
  }
10
15
 
11
- &.marker-frame-red {
12
- stroke: #aa0000;
16
+ &.marker-frame-primary {
17
+ stroke: $marker-color-primary;
13
18
  stroke-width: 1.8px;
14
19
  opacity: 0.4;
15
20
  }
16
21
 
17
- &.marker-square {
18
- fill: black;
19
- opacity: 0.11;
22
+ &.marker-frame-danger {
23
+ stroke: $marker-color-danger;
24
+ stroke-width: 1.8px;
25
+ opacity: 0.4;
20
26
  }
21
27
 
22
- &.marker-dot {
23
- fill: black;
24
- opacity: 0.3;
28
+ &.marker-circle {
29
+ stroke: $marker-color;
30
+ stroke-width: 3px;
31
+ opacity: 0.4;
25
32
  }
26
33
 
27
- &.marker-circle {
28
- stroke: #000055;
34
+ &.marker-circle-primary {
35
+ stroke: $marker-color-primary;
29
36
  stroke-width: 3px;
30
37
  opacity: 0.4;
31
38
  }
32
39
 
33
- &.marker-circle-red {
34
- stroke: #aa0000;
40
+ &.marker-circle-danger {
41
+ stroke: $marker-color-danger;
35
42
  stroke-width: 3px;
36
43
  opacity: 0.4;
37
44
  }
45
+
46
+ &.marker-square {
47
+ fill: black;
48
+ opacity: 0.11;
49
+ }
50
+
51
+ &.marker-dot {
52
+ fill: black;
53
+ opacity: 0.3;
54
+ }
55
+
38
56
  }
39
57
  }
40
58
  }
package/examples/extensions/markers-extension.html CHANGED
@@ -31,7 +31,7 @@
31
31
  if (event.type === SQUARE_SELECT_TYPE.primary) {
32
32
  markerType = MARKER_TYPE.dot
33
33
  } else {
34
- markerType = MARKER_TYPE.circle
34
+ markerType = MARKER_TYPE.circlePrimary
35
35
  }
36
36
  const markersOnSquare = board1.getMarkers(markerType, event.square)
37
37
  if (markersOnSquare.length > 0) {
@@ -54,14 +54,15 @@
54
54
  board2.enableMoveInput(() => {
55
55
  return true
56
56
  })
57
- const marker = {class: "marker-circle-red", slice: "markerCircle"}
57
+ // define your own marker
58
+ const myOwnMarker = {class: "marker-circle-danger", slice: "markerCircle"}
58
59
  board2.enableSquareSelect((event) => {
59
60
  if (event.type === SQUARE_SELECT_TYPE.secondary && event.mouseEvent.type === "mousedown") {
60
- const markersOnSquare = board2.getMarkers(marker, event.square)
61
+ const markersOnSquare = board2.getMarkers(myOwnMarker, event.square)
61
62
  if (markersOnSquare.length > 0) {
62
- board2.removeMarkers(marker, event.square)
63
+ board2.removeMarkers(myOwnMarker, event.square)
63
64
  } else {
64
- board2.addMarker(marker, event.square)
65
+ board2.addMarker(myOwnMarker, event.square)
65
66
  }
66
67
  }
67
68
  })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cm-chessboard",
3
- "version": "7.1.0",
3
+ "version": "7.1.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/cm-chessboard/extensions/markers/Markers.js CHANGED
@@ -9,10 +9,14 @@ import {Svg} from "../../lib/Svg.js"
9
9
  import {INPUT_EVENT_TYPE} from "../../Chessboard.js"
10
10
 
11
11
  export const MARKER_TYPE = {
12
- square: {class: "marker-square", slice: "markerSquare"},
13
12
  frame: {class: "marker-frame", slice: "markerFrame"},
14
- dot: {class: "marker-dot", slice: "markerDot", position: 'above'},
15
- circle: {class: "marker-circle", slice: "markerCircle"}
13
+ framePrimary: {class: "marker-frame-primary", slice: "markerFrame"},
14
+ frameDanger: {class: "marker-frame-danger", slice: "markerFrame"},
15
+ circle: {class: "marker-circle", slice: "markerCircle"},
16
+ circlePrimary: {class: "marker-circle-primary", slice: "markerCircle"},
17
+ circleDanger: {class: "marker-circle-danger", slice: "markerCircle"},
18
+ square: {class: "marker-square", slice: "markerSquare"},
19
+ dot: {class: "marker-dot", slice: "markerDot", position: 'above'}
16
20
  }
17
21
 
18
22
  export class Markers extends Extension {