-
-
Notifications
You must be signed in to change notification settings - Fork 260
/
demo.html
119 lines (113 loc) · 2.98 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Chessground Demo</title>
<link rel="stylesheet" type="text/css" href="assets/chessground.base.css" />
<link rel="stylesheet" type="text/css" href="assets/chessground.brown.css" />
<link rel="stylesheet" type="text/css" href="assets/chessground.cburnett.css" />
<style>
body {
display: flex;
flex-wrap: wrap;
}
body > div {
margin: 10px;
}
.chessground {
width: 500px;
height: 500px;
}
cg-board {
background-color: #bfcfdd;
}
</style>
<script type="module">
import { Chessground } from './dist/chessground.js';
Chessground(document.getElementById('board-1'), {});
Chessground(document.getElementById('board-2'), {
fen: 'r2q2k1/1p6/p2p4/2pN1rp1/N1Pb2Q1/8/PP1B4/R6K b - - 2 25',
});
Chessground(document.getElementById('board-3'), {
drawable: {
autoShapes: [
{
orig: 'a2',
dest: 'a6',
brush: 'green',
label: { text: 'A' },
modifiers: {
hilite: true,
},
},
{
orig: 'b2',
dest: 'b6',
brush: 'blue',
label: { text: 'B' },
modifiers: {
lineWidth: 6,
},
},
{
orig: 'c2',
dest: 'c4',
brush: 'red',
label: { text: 'C' },
},
{
orig: 'd2',
dest: 'd3',
brush: 'green',
label: { text: 'D' },
},
{
orig: 'f1',
dest: 'h3',
brush: 'blue',
label: { text: 'F' },
},
{
orig: 'g1',
dest: 'f3',
brush: 'yellow',
label: { text: 'E' },
},
],
},
});
Chessground(document.getElementById('board-4'), {
orientation: 'black',
coordinatesOnSquares: true,
ranksPosition: 'left',
});
Chessground(document.getElementById('board-5'), {
orientation: 'white',
coordinatesOnSquares: true,
});
</script>
</head>
<body>
<div>
basic board, default config
<div class="chessground" id="board-1"></div>
</div>
<div>
board with a fen
<div class="chessground" id="board-2"></div>
</div>
<div>
board with fixed arrows + labels
<div class="chessground" id="board-3"></div>
</div>
<div>
board with coordinates on-square, ranks position left
<div class="chessground" id="board-4"></div>
</div>
<div>
board with coordinates on-square
<div class="chessground" id="board-5"></div>
</div>
</body>
</html>