ssb-chess-mithril 2.1.0 → 2.1.2
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/css/chessground-examples/README.md +14 -4
- package/css/chessground-examples/assets/3d.css +24 -23
- package/css/chessground-examples/assets/chessground.css +73 -15
- package/css/chessground-examples/assets/examples.css +1 -1
- package/css/chessground-examples/assets/theme.css +37 -26
- package/css/chessground-examples/index.html +5 -5
- package/css/chessground-examples/package-lock.json +1747 -8086
- package/css/chessground-examples/package.json +32 -17
- package/css/chessground-examples/pnpm-lock.yaml +874 -0
- package/css/chessground-examples/rollup.config.mjs +20 -0
- package/css/chessground-examples/src/main.ts +81 -48
- package/css/chessground-examples/src/units/anim.ts +63 -42
- package/css/chessground-examples/src/units/basics.ts +73 -13
- package/css/chessground-examples/src/units/fen.ts +21 -18
- package/css/chessground-examples/src/units/in3d.ts +26 -26
- package/css/chessground-examples/src/units/perf.ts +29 -15
- package/css/chessground-examples/src/units/play.ts +71 -52
- package/css/chessground-examples/src/units/svg.ts +230 -102
- package/css/chessground-examples/src/units/unit.ts +47 -18
- package/css/chessground-examples/src/units/viewOnly.ts +11 -11
- package/css/chessground-examples/src/units/zh.ts +25 -23
- package/css/chessground-examples/src/util.ts +30 -18
- package/css/chessground-examples/tsconfig.json +6 -4
- package/css/miniboards.css +1 -0
- package/index.js +87 -78
- package/package.json +4 -4
- package/ui/game/PieceGraveyard.js +1 -1
- package/ui/game/chat.js +3 -3
- package/ui/game/gameHistory.js +5 -1
- package/ui/game/gameView.js +30 -11
- package/ui/miniboard/miniboard.js +8 -5
- package/ui/pageLayout/navigation.js +11 -7
- package/css/chessground-examples/gulpfile.js +0 -52
- package/css/chessground-examples/index.standalone.html +0 -17
- package/css/chessground-examples/yarn.lock +0 -3529
|
@@ -1,9 +1,19 @@
|
|
|
1
|
-
Usage examples for [lichess' chessground](https://github.com/
|
|
1
|
+
Usage examples for [lichess' chessground](https://github.com/lichess-org/chessground).
|
|
2
2
|
|
|
3
3
|
```
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
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.
|
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
.in3d .cg-wrap {
|
|
2
|
-
width:
|
|
3
|
-
height:
|
|
2
|
+
width: 320px;
|
|
3
|
+
height: 290.3125px;
|
|
4
|
+
background-image: none;
|
|
4
5
|
}
|
|
5
|
-
.in3d
|
|
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(
|
|
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
|
-
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
83
|
+
background-image: url("images/pieces/staunton/basic/Black-King.png");
|
|
83
84
|
}
|
|
@@ -16,7 +16,8 @@ cg-helper {
|
|
|
16
16
|
position: absolute;
|
|
17
17
|
width: 12.5%;
|
|
18
18
|
padding-bottom: 12.5%;
|
|
19
|
-
display: table;
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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:
|
|
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
|
-
|
|
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
|
-
|
|
157
|
+
|
|
158
|
+
.cg-wrap .cg-shapes,
|
|
159
|
+
.cg-wrap .cg-custom-svgs {
|
|
114
160
|
overflow: hidden;
|
|
115
|
-
position:
|
|
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
|
-
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.cg-wrap .cg-shapes {
|
|
122
170
|
opacity: 0.6;
|
|
171
|
+
z-index: 2;
|
|
123
172
|
}
|
|
124
|
-
|
|
125
|
-
|
|
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
|
}
|
|
@@ -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 {
|
|
@@ -1,43 +1,54 @@
|
|
|
1
1
|
/*
|
|
2
2
|
* Board
|
|
3
3
|
*/
|
|
4
|
-
.blue
|
|
5
|
-
background-image: url(
|
|
4
|
+
.blue cg-board {
|
|
5
|
+
background-image: url("images/board/blue.svg");
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
.merida
|
|
9
|
-
background-image: url(
|
|
8
|
+
.merida cg-board piece.pawn.white {
|
|
9
|
+
background-image: url("images/pieces/merida/wP.svg");
|
|
10
10
|
}
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
|
|
12
|
+
.merida cg-board piece.bishop.white {
|
|
13
|
+
background-image: url("images/pieces/merida/wB.svg");
|
|
13
14
|
}
|
|
14
|
-
|
|
15
|
-
|
|
15
|
+
|
|
16
|
+
.merida cg-board piece.knight.white {
|
|
17
|
+
background-image: url("images/pieces/merida/wN.svg");
|
|
16
18
|
}
|
|
17
|
-
|
|
18
|
-
|
|
19
|
+
|
|
20
|
+
.merida cg-board piece.rook.white {
|
|
21
|
+
background-image: url("images/pieces/merida/wR.svg");
|
|
19
22
|
}
|
|
20
|
-
|
|
21
|
-
|
|
23
|
+
|
|
24
|
+
.merida cg-board piece.queen.white {
|
|
25
|
+
background-image: url("images/pieces/merida/wQ.svg");
|
|
22
26
|
}
|
|
23
|
-
|
|
24
|
-
|
|
27
|
+
|
|
28
|
+
.merida cg-board piece.king.white {
|
|
29
|
+
background-image: url("images/pieces/merida/wK.svg");
|
|
25
30
|
}
|
|
26
|
-
|
|
27
|
-
|
|
31
|
+
|
|
32
|
+
.merida cg-board piece.pawn.black {
|
|
33
|
+
background-image: url("images/pieces/merida/bP.svg");
|
|
28
34
|
}
|
|
29
|
-
|
|
30
|
-
|
|
35
|
+
|
|
36
|
+
.merida cg-board piece.bishop.black {
|
|
37
|
+
background-image: url("images/pieces/merida/bB.svg");
|
|
31
38
|
}
|
|
32
|
-
|
|
33
|
-
|
|
39
|
+
|
|
40
|
+
.merida cg-board piece.knight.black {
|
|
41
|
+
background-image: url("images/pieces/merida/bN.svg");
|
|
34
42
|
}
|
|
35
|
-
|
|
36
|
-
|
|
43
|
+
|
|
44
|
+
.merida cg-board piece.rook.black {
|
|
45
|
+
background-image: url("images/pieces/merida/bR.svg");
|
|
37
46
|
}
|
|
38
|
-
|
|
39
|
-
|
|
47
|
+
|
|
48
|
+
.merida cg-board piece.queen.black {
|
|
49
|
+
background-image: url("images/pieces/merida/bQ.svg");
|
|
40
50
|
}
|
|
41
|
-
|
|
42
|
-
|
|
51
|
+
|
|
52
|
+
.merida cg-board piece.king.black {
|
|
53
|
+
background-image: url("images/pieces/merida/bK.svg");
|
|
43
54
|
}
|
|
@@ -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(
|
|
13
|
+
ChessgroundExamples.run(document.getElementById("chessground-examples"));
|
|
14
14
|
</script>
|
|
15
15
|
</body>
|
|
16
16
|
</html>
|