ssb-chess-mithril 2.1.0 → 2.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 (35) hide show
  1. package/css/chessground-examples/README.md +14 -4
  2. package/css/chessground-examples/assets/3d.css +24 -23
  3. package/css/chessground-examples/assets/chessground.css +73 -15
  4. package/css/chessground-examples/assets/examples.css +1 -1
  5. package/css/chessground-examples/assets/theme.css +37 -26
  6. package/css/chessground-examples/index.html +5 -5
  7. package/css/chessground-examples/package-lock.json +1747 -8086
  8. package/css/chessground-examples/package.json +32 -17
  9. package/css/chessground-examples/pnpm-lock.yaml +874 -0
  10. package/css/chessground-examples/rollup.config.mjs +20 -0
  11. package/css/chessground-examples/src/main.ts +81 -48
  12. package/css/chessground-examples/src/units/anim.ts +63 -42
  13. package/css/chessground-examples/src/units/basics.ts +73 -13
  14. package/css/chessground-examples/src/units/fen.ts +21 -18
  15. package/css/chessground-examples/src/units/in3d.ts +26 -26
  16. package/css/chessground-examples/src/units/perf.ts +29 -15
  17. package/css/chessground-examples/src/units/play.ts +71 -52
  18. package/css/chessground-examples/src/units/svg.ts +230 -102
  19. package/css/chessground-examples/src/units/unit.ts +47 -18
  20. package/css/chessground-examples/src/units/viewOnly.ts +11 -11
  21. package/css/chessground-examples/src/units/zh.ts +25 -23
  22. package/css/chessground-examples/src/util.ts +30 -18
  23. package/css/chessground-examples/tsconfig.json +6 -4
  24. package/css/miniboards.css +1 -0
  25. package/index.js +87 -78
  26. package/package.json +4 -4
  27. package/ui/game/PieceGraveyard.js +1 -1
  28. package/ui/game/chat.js +3 -3
  29. package/ui/game/gameHistory.js +5 -1
  30. package/ui/game/gameView.js +30 -11
  31. package/ui/miniboard/miniboard.js +8 -5
  32. package/ui/pageLayout/navigation.js +11 -7
  33. package/css/chessground-examples/gulpfile.js +0 -52
  34. package/css/chessground-examples/index.standalone.html +0 -17
  35. package/css/chessground-examples/yarn.lock +0 -3529
package/css/chessground-examples/README.md CHANGED
@@ -1,9 +1,19 @@
1
- Usage examples for [lichess' chessground](https://github.com/ornicar/chessground).
1
+ Usage examples for [lichess' chessground](https://github.com/lichess-org/chessground).
2
2
 
3
3
  ```
4
- yarn install
5
- gulp dev
6
- http-server (or any other local http server of your choice)
4
+ pnpm install
5
+ pnpm build (or pnpm watch)
6
+ pnpm serve (or any other local http server of your choice)
7
7
  ```
8
8
 
9
9
  Then browse http://127.0.0.1:8080
10
+
11
+ To try out a local chessground, modify package.json to use the local version of chessground:
12
+
13
+ ```json
14
+ "dependencies": {
15
+ "chessground": "file:~/chessground",
16
+ }
17
+ ```
18
+
19
+ then run `pnpm install` again.
package/css/chessground-examples/assets/3d.css CHANGED
@@ -1,16 +1,17 @@
1
1
  .in3d .cg-wrap {
2
- width: 512px;
3
- height: 464.5px;
2
+ width: 320px;
3
+ height: 290.3125px;
4
+ background-image: none;
4
5
  }
5
- .in3d .cg-board::before {
6
+ .in3d cg-board::before {
6
7
  position: absolute;
7
8
  top: -0.730688%;
8
9
  left: 0;
9
10
  width: 100%;
10
11
  height: 103.2%;
11
- content: '';
12
+ content: "";
12
13
  background-size: cover;
13
- background-image: url('images/board/3d/woodi.1024.png');
14
+ background-image: url("images/board/3d/woodi.1024.png");
14
15
  }
15
16
  .in3d .ghost,
16
17
  .in3d .over {
@@ -29,55 +30,55 @@
29
30
  left: -1.85%;
30
31
  top: -9.1%;
31
32
  }
32
- .cg-board piece.dragging {
33
+ cg-board piece.dragging {
33
34
  cursor: move;
34
- z-index: 70!important;
35
+ z-index: 70 !important;
35
36
  }
36
37
  .in3d .cg-wrap piece.pawn.white {
37
- background-image: url('images/pieces/staunton/basic/White-Pawn.png');
38
+ background-image: url("images/pieces/staunton/basic/White-Pawn.png");
38
39
  }
39
40
  .in3d .cg-wrap piece.bishop.white {
40
- background-image: url('images/pieces/staunton/basic/White-Bishop.png');
41
+ background-image: url("images/pieces/staunton/basic/White-Bishop.png");
41
42
  }
42
43
  .in3d .cg-wrap.orientation-black div.bishop.white {
43
- background-image: url('images/pieces/staunton/basic/White-Bishop-Flipped.png');
44
+ background-image: url("images/pieces/staunton/basic/White-Bishop-Flipped.png");
44
45
  }
45
46
  .in3d .cg-wrap piece.knight.white {
46
- background-image: url('images/pieces/staunton/basic/White-Knight.png');
47
+ background-image: url("images/pieces/staunton/basic/White-Knight.png");
47
48
  }
48
49
  .in3d .cg-wrap.orientation-black div.knight.white {
49
- background-image: url('images/pieces/staunton/basic/White-Knight-Flipped.png');
50
+ background-image: url("images/pieces/staunton/basic/White-Knight-Flipped.png");
50
51
  }
51
52
  .in3d .cg-wrap piece.rook.white {
52
- background-image: url('images/pieces/staunton/basic/White-Rook.png');
53
+ background-image: url("images/pieces/staunton/basic/White-Rook.png");
53
54
  }
54
55
  .in3d .cg-wrap piece.queen.white {
55
- background-image: url('images/pieces/staunton/basic/White-Queen.png');
56
+ background-image: url("images/pieces/staunton/basic/White-Queen.png");
56
57
  }
57
58
  .in3d .cg-wrap piece.king.white {
58
- background-image: url('images/pieces/staunton/basic/White-King.png');
59
+ background-image: url("images/pieces/staunton/basic/White-King.png");
59
60
  }
60
61
  .in3d .cg-wrap piece.pawn.black {
61
- background-image: url('images/pieces/staunton/basic/Black-Pawn.png');
62
+ background-image: url("images/pieces/staunton/basic/Black-Pawn.png");
62
63
  }
63
64
  .in3d .cg-wrap piece.bishop.black {
64
- background-image: url('images/pieces/staunton/basic/Black-Bishop.png');
65
+ background-image: url("images/pieces/staunton/basic/Black-Bishop.png");
65
66
  }
66
67
  .in3d .cg-wrap.orientation-white div.bishop.black {
67
- background-image: url('images/pieces/staunton/basic/Black-Bishop-Flipped.png');
68
+ background-image: url("images/pieces/staunton/basic/Black-Bishop-Flipped.png");
68
69
  }
69
70
  .in3d .cg-wrap piece.knight.black {
70
- background-image: url('images/pieces/staunton/basic/Black-Knight.png');
71
+ background-image: url("images/pieces/staunton/basic/Black-Knight.png");
71
72
  }
72
73
  .in3d .cg-wrap.orientation-white div.knight.black {
73
- background-image: url('images/pieces/staunton/basic/Black-Knight-Flipped.png');
74
+ background-image: url("images/pieces/staunton/basic/Black-Knight-Flipped.png");
74
75
  }
75
76
  .in3d .cg-wrap piece.rook.black {
76
- background-image: url('images/pieces/staunton/basic/Black-Rook.png');
77
+ background-image: url("images/pieces/staunton/basic/Black-Rook.png");
77
78
  }
78
79
  .in3d .cg-wrap piece.queen.black {
79
- background-image: url('images/pieces/staunton/basic/Black-Queen.png');
80
+ background-image: url("images/pieces/staunton/basic/Black-Queen.png");
80
81
  }
81
82
  .in3d .cg-wrap piece.king.black {
82
- background-image: url('images/pieces/staunton/basic/Black-King.png');
83
+ background-image: url("images/pieces/staunton/basic/Black-King.png");
83
84
  }
package/css/chessground-examples/assets/chessground.css CHANGED
@@ -16,7 +16,8 @@ cg-helper {
16
16
  position: absolute;
17
17
  width: 12.5%;
18
18
  padding-bottom: 12.5%;
19
- display: table; /* hack: round to full pixel size in chrome */
19
+ display: table;
20
+ /* hack: round to full pixel size in chrome */
20
21
  bottom: 0;
21
22
  }
22
23
 
@@ -42,6 +43,7 @@ cg-board {
42
43
  background-size: cover;
43
44
  cursor: pointer;
44
45
  }
46
+
45
47
  cg-board square {
46
48
  position: absolute;
47
49
  top: 0;
@@ -50,38 +52,79 @@ cg-board square {
50
52
  height: 12.5%;
51
53
  pointer-events: none;
52
54
  }
55
+
53
56
  cg-board square.move-dest {
54
- background: radial-gradient(rgba(20, 85, 30, 0.5) 22%, #208530 0, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0) 0);
57
+ background: radial-gradient(
58
+ rgba(20, 85, 30, 0.5) 22%,
59
+ #208530 0,
60
+ rgba(0, 0, 0, 0.3) 0,
61
+ rgba(0, 0, 0, 0) 0
62
+ );
55
63
  pointer-events: auto;
56
64
  }
65
+
57
66
  cg-board square.premove-dest {
58
- background: radial-gradient(rgba(20, 30, 85, 0.5) 22%, #203085 0, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0) 0);
67
+ background: radial-gradient(
68
+ rgba(20, 30, 85, 0.5) 22%,
69
+ #203085 0,
70
+ rgba(0, 0, 0, 0.3) 0,
71
+ rgba(0, 0, 0, 0) 0
72
+ );
59
73
  }
74
+
60
75
  cg-board square.oc.move-dest {
61
- background: radial-gradient(transparent 0%, transparent 80%, rgba(20, 85, 0, 0.3) 80%);
76
+ background: radial-gradient(
77
+ transparent 0%,
78
+ transparent 80%,
79
+ rgba(20, 85, 0, 0.3) 80%
80
+ );
62
81
  }
82
+
63
83
  cg-board square.oc.premove-dest {
64
- background: radial-gradient(transparent 0%, transparent 80%, rgba(20, 30, 85, 0.2) 80%);
84
+ background: radial-gradient(
85
+ transparent 0%,
86
+ transparent 80%,
87
+ rgba(20, 30, 85, 0.2) 80%
88
+ );
65
89
  }
90
+
66
91
  cg-board square.move-dest:hover {
67
92
  background: rgba(20, 85, 30, 0.3);
68
93
  }
94
+
69
95
  cg-board square.premove-dest:hover {
70
96
  background: rgba(20, 30, 85, 0.2);
71
97
  }
98
+ cg-board square.move-dest.hover {
99
+ background: red;
100
+ }
101
+ cg-board square.premove-dest.hover {
102
+ background: red;
103
+ }
104
+
72
105
  cg-board square.last-move {
73
106
  will-change: transform;
74
107
  background-color: rgba(155, 199, 0, 0.41);
75
108
  }
109
+
76
110
  cg-board square.selected {
77
111
  background-color: rgba(20, 85, 30, 0.5);
78
112
  }
113
+
79
114
  cg-board square.check {
80
- background: radial-gradient(ellipse at center, rgba(255, 0, 0, 1) 0%, rgba(231, 0, 0, 1) 25%, rgba(169, 0, 0, 0) 89%, rgba(158, 0, 0, 0) 100%);
115
+ background: radial-gradient(
116
+ ellipse at center,
117
+ rgba(255, 0, 0, 1) 0%,
118
+ rgba(231, 0, 0, 1) 25%,
119
+ rgba(169, 0, 0, 0) 89%,
120
+ rgba(158, 0, 0, 0) 100%
121
+ );
81
122
  }
123
+
82
124
  cg-board square.current-premove {
83
125
  background-color: rgba(20, 30, 85, 0.5);
84
126
  }
127
+
85
128
  .cg-wrap piece {
86
129
  position: absolute;
87
130
  top: 0;
@@ -93,37 +136,46 @@ cg-board square.current-premove {
93
136
  will-change: transform;
94
137
  pointer-events: none;
95
138
  }
139
+
96
140
  cg-board piece.dragging {
97
141
  cursor: move;
98
- z-index: 9;
142
+ z-index: 10;
99
143
  }
144
+
100
145
  cg-board piece.anim {
101
146
  z-index: 8;
102
147
  }
148
+
103
149
  cg-board piece.fading {
104
150
  z-index: 1;
105
151
  opacity: 0.5;
106
152
  }
107
- .cg-wrap square.move-dest:hover {
108
- background-color: rgba(20, 85, 30, 0.3);
109
- }
153
+
110
154
  .cg-wrap piece.ghost {
111
155
  opacity: 0.3;
112
156
  }
113
- .cg-wrap svg {
157
+
158
+ .cg-wrap .cg-shapes,
159
+ .cg-wrap .cg-custom-svgs {
114
160
  overflow: hidden;
115
- position: relative;
161
+ position: absolute;
116
162
  top: 0px;
117
163
  left: 0px;
118
164
  width: 100%;
119
165
  height: 100%;
120
166
  pointer-events: none;
121
- z-index: 2;
167
+ }
168
+
169
+ .cg-wrap .cg-shapes {
122
170
  opacity: 0.6;
171
+ z-index: 2;
123
172
  }
124
- .cg-wrap svg image {
125
- opacity: 0.5;
173
+
174
+ .cg-wrap .cg-custom-svgs {
175
+ /* over piece.anim = 8, but under piece.dragging = 10 */
176
+ z-index: 9;
126
177
  }
178
+
127
179
  .cg-wrap coords {
128
180
  position: absolute;
129
181
  display: flex;
@@ -131,6 +183,7 @@ cg-board piece.fading {
131
183
  opacity: 0.8;
132
184
  font-size: 9px;
133
185
  }
186
+
134
187
  .cg-wrap coords.ranks {
135
188
  right: -15px;
136
189
  top: 0;
@@ -138,9 +191,11 @@ cg-board piece.fading {
138
191
  height: 100%;
139
192
  width: 12px;
140
193
  }
194
+
141
195
  .cg-wrap coords.ranks.black {
142
196
  flex-flow: column;
143
197
  }
198
+
144
199
  .cg-wrap coords.files {
145
200
  bottom: -16px;
146
201
  left: 0;
@@ -150,12 +205,15 @@ cg-board piece.fading {
150
205
  text-transform: uppercase;
151
206
  text-align: center;
152
207
  }
208
+
153
209
  .cg-wrap coords.files.black {
154
210
  flex-flow: row-reverse;
155
211
  }
212
+
156
213
  .cg-wrap coords coord {
157
214
  flex: 1 1 auto;
158
215
  }
216
+
159
217
  .cg-wrap coords.ranks coord {
160
218
  transform: translateY(39%);
161
219
  }
package/css/chessground-examples/assets/examples.css CHANGED
@@ -2,7 +2,7 @@
2
2
  body {
3
3
  background-image: linear-gradient(to bottom, #2c2c2c, #1a1a1a 116px);
4
4
  color: #b0b0b0;
5
- font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
5
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
6
6
  font-size: 11px;
7
7
  }
8
8
  #chessground-examples {
package/css/chessground-examples/assets/theme.css CHANGED
@@ -1,43 +1,54 @@
1
1
  /*
2
2
  * Board
3
3
  */
4
- .blue .cg-wrap {
5
- background-image: url('images/board/blue.svg');
4
+ .blue cg-board {
5
+ background-image: url("images/board/blue.svg");
6
6
  }
7
7
 
8
- .merida .cg-wrap piece.pawn.white {
9
- background-image: url('images/pieces/merida/wP.svg');
8
+ .merida cg-board piece.pawn.white {
9
+ background-image: url("images/pieces/merida/wP.svg");
10
10
  }
11
- .merida .cg-wrap piece.bishop.white {
12
- background-image: url('images/pieces/merida/wB.svg');
11
+
12
+ .merida cg-board piece.bishop.white {
13
+ background-image: url("images/pieces/merida/wB.svg");
13
14
  }
14
- .merida .cg-wrap piece.knight.white {
15
- background-image: url('images/pieces/merida/wN.svg');
15
+
16
+ .merida cg-board piece.knight.white {
17
+ background-image: url("images/pieces/merida/wN.svg");
16
18
  }
17
- .merida .cg-wrap piece.rook.white {
18
- background-image: url('images/pieces/merida/wR.svg');
19
+
20
+ .merida cg-board piece.rook.white {
21
+ background-image: url("images/pieces/merida/wR.svg");
19
22
  }
20
- .merida .cg-wrap piece.queen.white {
21
- background-image: url('images/pieces/merida/wQ.svg');
23
+
24
+ .merida cg-board piece.queen.white {
25
+ background-image: url("images/pieces/merida/wQ.svg");
22
26
  }
23
- .merida .cg-wrap piece.king.white {
24
- background-image: url('images/pieces/merida/wK.svg');
27
+
28
+ .merida cg-board piece.king.white {
29
+ background-image: url("images/pieces/merida/wK.svg");
25
30
  }
26
- .merida .cg-wrap piece.pawn.black {
27
- background-image: url('images/pieces/merida/bP.svg');
31
+
32
+ .merida cg-board piece.pawn.black {
33
+ background-image: url("images/pieces/merida/bP.svg");
28
34
  }
29
- .merida .cg-wrap piece.bishop.black {
30
- background-image: url('images/pieces/merida/bB.svg');
35
+
36
+ .merida cg-board piece.bishop.black {
37
+ background-image: url("images/pieces/merida/bB.svg");
31
38
  }
32
- .merida .cg-wrap piece.knight.black {
33
- background-image: url('images/pieces/merida/bN.svg');
39
+
40
+ .merida cg-board piece.knight.black {
41
+ background-image: url("images/pieces/merida/bN.svg");
34
42
  }
35
- .merida .cg-wrap piece.rook.black {
36
- background-image: url('images/pieces/merida/bR.svg');
43
+
44
+ .merida cg-board piece.rook.black {
45
+ background-image: url("images/pieces/merida/bR.svg");
37
46
  }
38
- .merida .cg-wrap piece.queen.black {
39
- background-image: url('images/pieces/merida/bQ.svg');
47
+
48
+ .merida cg-board piece.queen.black {
49
+ background-image: url("images/pieces/merida/bQ.svg");
40
50
  }
41
- .merida .cg-wrap piece.king.black {
42
- background-image: url('images/pieces/merida/bK.svg');
51
+
52
+ .merida cg-board piece.king.black {
53
+ background-image: url("images/pieces/merida/bK.svg");
43
54
  }
package/css/chessground-examples/index.html CHANGED
@@ -1,16 +1,16 @@
1
1
  <html>
2
2
  <head>
3
3
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
4
- <link rel="stylesheet" href="assets/chessground.css">
5
- <link rel="stylesheet" href="assets/theme.css">
6
- <link rel="stylesheet" href="assets/3d.css">
7
- <link rel="stylesheet" href="assets/examples.css">
4
+ <link rel="stylesheet" href="assets/chessground.css" />
5
+ <link rel="stylesheet" href="assets/theme.css" />
6
+ <link rel="stylesheet" href="assets/3d.css" />
7
+ <link rel="stylesheet" href="assets/examples.css" />
8
8
  </head>
9
9
  <body>
10
10
  <div id="chessground-examples"></div>
11
11
  <script src="dist/chessground-examples.js"></script>
12
12
  <script>
13
- ChessgroundExamples.run(document.getElementById('chessground-examples'));
13
+ ChessgroundExamples.run(document.getElementById("chessground-examples"));
14
14
  </script>
15
15
  </body>
16
16
  </html>