forked from jokkebk/jgoboard
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemoBlog.html
59 lines (47 loc) · 1.66 KB
/
demoBlog.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
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Board</title>
</head>
<body>
<h1>Automatic diagrams demo</h1>
<p>jGoBoard can transform HTML div elements into beautiful diagrams
automatically. This is nice for a go-related blog or website. Just use
"jgoboard" tag with your divs and add a few script tags after them. Look at
this diagram:</p>
<div class="jgoboard">
....
oo.x
.xxx
....
</div>
<p>It is easy also to add markers or change the style with custom attributes:</p>
<div class="jgoboard" data-jgostyle="JGO.BOARD.mediumBW">
.+ .+ ./ .
o2 o# . xA
. x1 x* x0
. . .- .-
</div>
<p>You can also show only parts of the board. In this case you also have to
specify board size, and top left corner and bottom right coordinates:</p>
<div class="jgoboard" data-jgostyle="JGO.BOARD.largeWalnut" data-jgosize="19x19" data-jgoview="M7-T1">
. . . . . . . .
. . . . . x13. .
. . . . . . x11.
. . . . x x2 o10.
. x9 x7 x5 o3 o1 o12.
. . o8 o6 . . . .
. . . . . . . .
</div>
<p>There is now also a simple player component available (farewell Eidogo :)</p>
<div class="jgoboard_todo" data-jgosize="19x19" data-jgosgf="demo.sgf">
</div>
<p>Look at the source of this file to see the .js files you need and syntax used for div elements.</p>
<script type="text/javascript" src="dist/jgoboard-latest.js"></script>
<script type="text/javascript" src="large/board.js"></script>
<script type="text/javascript" src="medium/board.js"></script>
<!-- This needs to happen after all divs are loaded, so put it below the divs -->
<script type="text/javascript">JGO.auto.init(document, JGO);</script>
</body>
</html>