@reis/seki
Version:
Seki – A modern javascript based Go board renderer and player, that is simple to use, extensible, compact and intuitive.
398 lines (388 loc) • 17.2 kB
HTML
<html>
<head>
<title>Seki Embeddable Go Player</title>
<meta charset="utf-8">
<meta name="author" content="Adam Reis">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="css/seki.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/demo.css">
<link rel="icon" type="image/png" sizes="32x32" href="favicon.png">
</head>
<body lang="en">
<div class="header">
<div class="logo">
<img src="/images/logo.png" />
</div>
<div class="center">
<h1>Seki – An Embeddable Go Player</h1>
<small class="subheader">
<span><a href="https://github.com/adamreisnz">Created by Adam Reis</a></span>
<span>•</span>
<span class="github">
<img src="/images/github-mark.svg" />
<a href="https://github.com/adamreisnz/seki">View on GitHub</a>
</span>
<span>•</span>
<span><a href="https://github.com/adamreisnz/seki/issues">Report an issue</a></span>
</small>
</div>
<div class="promo">
<a href="https://letsplaygo.com/editor" class="pill banner">
See it in action on Let’s Play Go
</a>
</div>
</div>
<div class="nav">
<a href="index.html" class="pill">Usage instructions</a>
<a href="example-static-positions.html" class="pill">Static positions</a>
<a href="example-game-boards.html" class="pill active">Game boards</a>
<a href="example-full-player.html" class="pill">Full player</a>
</div>
<div class="main">
<div class="examples">
<div class="example">
<h3>9x9 (empty board)</h3>
<div
class="seki-board-dynamic fixed-size square"
data-config="{
'showCoordinates': false,
'board': {
'size': 9
}
}"
></div>
</div>
<div class="example">
<h3>19x19 (empty board, with sound)</h3>
<div
class="seki-board-dynamic fixed-size square"
data-config="{
'showCoordinates': false,
'playSounds': true,
'soundVolume': 0.5,
'sounds': {
'move': 'audio/move.wav',
'capture': 'audio/capture.wav'
}
}"
></div>
</div>
<div class="example">
<h3>9x9 (replay game record)</h3>
<div
class="seki-board-dynamic fixed-size square"
data-game="(;
FF[4]
CA[UTF-8]
AP[Seki v1.3.17]
GM[1]
XL[0]
XR[0]
XT[0]
XB[0]
KM[0]
HA[0]
TM[0]
ST[2]
SZ[9]
PB[Black]
PW[White]
;B[cc]
;W[gc]
;B[cg]
;W[gg]
;B[db]
;W[cf]
;B[bf]
;W[dg]
;B[ce]
;W[df]
;B[ch]
;W[de]
;B[cd]
;W[fb]
;B[ec]
;W[fd]
;B[ed]
;W[ee]
;B[eh]
;W[fg]
;B[fh]
;W[gh]
;B[gi]
;W[hi]
;B[dh]
;W[fi]
;B[fc]
;W[gd]
;B[eb]
;W[gb]
;B[dd]
;W[eg]
;B[ei]
;W[gi]
;B[fa]
;W[ga]
;B[ea]
)"
data-config="{
'showCoordinates': false
}"
></div>
</div>
<div class="example">
<h3>19x19 (replay game record)</h3>
<div
class="seki-board-dynamic fixed-size square"
data-game="(;FF[4]CA[UTF-8]AP[Seki v1.3.17]GM[1]GN[Friendly Match]RE[W+15.5]XL[0]XR[0]XT[0]XB[0]PC[OGS: https://online-go.com/game/57818013]KM[6.5]HA[0]RU[Japanese]TM[259200]OT[3x86400 byo-yomi]ST[2]SZ[19]PB[andytsai14]BR[1d]PW[Akineko 秋猫]WR[1d];B[pp];W[dd];B[pd];W[dq];B[co];W[ep];B[cl];W[qc];B[qd];W[pc];B[od];W[nb];B[qn];W[jq];B[cf];W[fc];B[cd];W[cc];B[bc];W[bb];B[be];W[ac];B[bd];W[dc];B[mc];W[mb];B[lc];W[lb];B[kc];W[qj];B[oj];W[qg];B[hp];W[jo];B[hn];W[nq];B[oq];W[np];B[iq];W[en];B[jr];W[bp];B[cp];W[cq];B[bo];W[kq];B[kr];W[ch];B[ef];W[eh];B[bj];W[dj];B[el];W[gh];B[bh];W[bg];B[cg];W[bi];B[ci];W[ah];B[dh];W[di];B[bh];W[nc];B[nd];W[ch];B[oc];W[dg];B[ob];W[bq];B[fm];W[go];B[ho];W[gn];B[gm];W[hm];B[cj];W[gq];B[lq];W[lp];B[mq];W[mp];B[nr];W[hr];B[ir];W[hl];B[gf];W[df];B[ed];W[hc];B[ec];W[eb];B[fd];W[gc];B[if];W[he];B[hf];W[de];B[jn];W[dk];B[dl];W[fk];B[bm];W[bk];B[ck];W[aj];B[bl];W[ak];B[al];W[ai];B[an];W[cn];B[dn];W[dm];B[do];W[em];B[eo];W[fn];B[fl];W[gp];B[cm];W[kn];B[jm];W[km];B[kl];W[jl];B[io];W[in];B[im];W[il];B[in];W[hq];B[ip];W[po];B[qo];W[pn];B[pm];W[or];B[mr];W[pq];B[qp];W[op];B[qr];W[qq];B[rq];W[jp];B[pr];W[os];B[oq];W[pq];B[lm];W[ln];B[ls];W[ll];B[kk];W[mm];B[gk];W[ih];B[jk];W[je];B[jf];W[ke];B[kf];W[le];B[ie];W[id];B[lf];W[rf];B[re];W[qe];B[pe];W[qf];B[kb];W[rd];B[rc];W[se];B[rb];W[jc];B[om];W[jb];B[ko];W[kp];B[nn];W[mj];B[lj];W[lk];B[kj];W[mh];B[mi];W[mn];B[mk];W[ml];B[nj];W[ph];B[ja];W[ia];B[ka];W[ib];B[rk];W[rj];B[qk];W[sk];B[sl];W[sj];B[pj];W[pi];B[qq];W[hj];B[gj];W[ij];B[fh];W[fg];B[fi];W[gg];B[ge];W[eg];B[nh];W[me];B[nl];W[mg];B[mf];W[ng];B[nf];W[og];B[oq];W[rl];B[sm];W[pq];B[gi];W[hh];B[oq];W[rm];B[sn];W[pq];B[qi];W[ri];B[oq];W[rn];B[so];W[pq];B[rh];W[qh];B[oq];W[md];B[na];W[pq];B[oo];W[oq];B[hs];W[gs];B[is];W[kd];B[ne];W[fj];B[ei];W[dh];B[gl];W[ns];B[ms];W[hd];B[fp];W[fq];B[fo];W[dp];B[ap];W[aq];B[ao];W[fr];B[lh];W[oi];B[ni];W[kh];B[sc];W[sd];B[no];W[mo];B[nm];W[of];B[pf];W[lg];B[li];W[ps];B[qs];W[ff];B[ee];W[jd];B[ma];W[ld];B[la];W[kg];B[ji];W[jh];B[];W[])"
data-config="{
'showCoordinates': false,
'showLastMoveNumber': true
}"
></div>
</div>
<div class="example">
<h3>9x9 (final position)</h3>
<div
class="seki-board-static fixed-size square"
data-game="(;
FF[4]
CA[UTF-8]
AP[Seki v1.3.17]
GM[1]
XL[0]
XR[0]
XT[0]
XB[0]
KM[0]
HA[0]
TM[0]
ST[2]
SZ[9]
PB[Black]
PW[White]
;B[cc]
;W[gc]
;B[cg]
;W[gg]
;B[db]
;W[cf]
;B[bf]
;W[dg]
;B[ce]
;W[df]
;B[ch]
;W[de]
;B[cd]
;W[fb]
;B[ec]
;W[fd]
;B[ed]
;W[ee]
;B[eh]
;W[fg]
;B[fh]
;W[gh]
;B[gi]
;W[hi]
;B[dh]
;W[fi]
;B[fc]
;W[gd]
;B[eb]
;W[gb]
;B[dd]
;W[eg]
;B[ei]
;W[gi]
;B[fa]
;W[ga]
;B[ea]
)"
data-config="{
'showCoordinates': false
}"
></div>
</div>
<div class="example">
<h3>19x19 (final position)</h3>
<div
class="seki-board-static fixed-size square"
data-game="(;FF[4]CA[UTF-8]AP[Seki v1.3.17]GM[1]GN[Friendly Match]RE[W+15.5]XL[0]XR[0]XT[0]XB[0]PC[OGS: https://online-go.com/game/57818013]KM[6.5]HA[0]RU[Japanese]TM[259200]OT[3x86400 byo-yomi]ST[2]SZ[19]PB[andytsai14]BR[1d]PW[Akineko 秋猫]WR[1d];B[pp];W[dd];B[pd];W[dq];B[co];W[ep];B[cl];W[qc];B[qd];W[pc];B[od];W[nb];B[qn];W[jq];B[cf];W[fc];B[cd];W[cc];B[bc];W[bb];B[be];W[ac];B[bd];W[dc];B[mc];W[mb];B[lc];W[lb];B[kc];W[qj];B[oj];W[qg];B[hp];W[jo];B[hn];W[nq];B[oq];W[np];B[iq];W[en];B[jr];W[bp];B[cp];W[cq];B[bo];W[kq];B[kr];W[ch];B[ef];W[eh];B[bj];W[dj];B[el];W[gh];B[bh];W[bg];B[cg];W[bi];B[ci];W[ah];B[dh];W[di];B[bh];W[nc];B[nd];W[ch];B[oc];W[dg];B[ob];W[bq];B[fm];W[go];B[ho];W[gn];B[gm];W[hm];B[cj];W[gq];B[lq];W[lp];B[mq];W[mp];B[nr];W[hr];B[ir];W[hl];B[gf];W[df];B[ed];W[hc];B[ec];W[eb];B[fd];W[gc];B[if];W[he];B[hf];W[de];B[jn];W[dk];B[dl];W[fk];B[bm];W[bk];B[ck];W[aj];B[bl];W[ak];B[al];W[ai];B[an];W[cn];B[dn];W[dm];B[do];W[em];B[eo];W[fn];B[fl];W[gp];B[cm];W[kn];B[jm];W[km];B[kl];W[jl];B[io];W[in];B[im];W[il];B[in];W[hq];B[ip];W[po];B[qo];W[pn];B[pm];W[or];B[mr];W[pq];B[qp];W[op];B[qr];W[qq];B[rq];W[jp];B[pr];W[os];B[oq];W[pq];B[lm];W[ln];B[ls];W[ll];B[kk];W[mm];B[gk];W[ih];B[jk];W[je];B[jf];W[ke];B[kf];W[le];B[ie];W[id];B[lf];W[rf];B[re];W[qe];B[pe];W[qf];B[kb];W[rd];B[rc];W[se];B[rb];W[jc];B[om];W[jb];B[ko];W[kp];B[nn];W[mj];B[lj];W[lk];B[kj];W[mh];B[mi];W[mn];B[mk];W[ml];B[nj];W[ph];B[ja];W[ia];B[ka];W[ib];B[rk];W[rj];B[qk];W[sk];B[sl];W[sj];B[pj];W[pi];B[qq];W[hj];B[gj];W[ij];B[fh];W[fg];B[fi];W[gg];B[ge];W[eg];B[nh];W[me];B[nl];W[mg];B[mf];W[ng];B[nf];W[og];B[oq];W[rl];B[sm];W[pq];B[gi];W[hh];B[oq];W[rm];B[sn];W[pq];B[qi];W[ri];B[oq];W[rn];B[so];W[pq];B[rh];W[qh];B[oq];W[md];B[na];W[pq];B[oo];W[oq];B[hs];W[gs];B[is];W[kd];B[ne];W[fj];B[ei];W[dh];B[gl];W[ns];B[ms];W[hd];B[fp];W[fq];B[fo];W[dp];B[ap];W[aq];B[ao];W[fr];B[lh];W[oi];B[ni];W[kh];B[sc];W[sd];B[no];W[mo];B[nm];W[of];B[pf];W[lg];B[li];W[ps];B[qs];W[ff];B[ee];W[jd];B[ma];W[ld];B[la];W[kg];B[ji];W[jh];B[];W[])"
data-config="{
'showCoordinates': false,
'showLastMoveNumber': true
}"
></div>
</div>
<div class="example">
<h3>9x9 (with coordinates)</h3>
<div
class="seki-board-static fixed-size square"
data-game="(;
FF[4]
CA[UTF-8]
AP[Seki v1.3.17]
GM[1]
XL[0]
XR[0]
XT[0]
XB[0]
KM[0]
HA[0]
TM[0]
ST[2]
SZ[9]
PB[Black]
PW[White]
;B[cc]
;W[gc]
;B[cg]
;W[gg]
;B[db]
;W[cf]
;B[bf]
;W[dg]
;B[ce]
;W[df]
;B[ch]
;W[de]
;B[cd]
;W[fb]
;B[ec]
;W[fd]
;B[ed]
;W[ee]
;B[eh]
;W[fg]
;B[fh]
;W[gh]
;B[gi]
;W[hi]
;B[dh]
;W[fi]
;B[fc]
;W[gd]
;B[eb]
;W[gb]
;B[dd]
;W[eg]
;B[ei]
;W[gi]
;B[fa]
;W[ga]
;B[ea]
)"
data-config="{
'showCoordinates': true
}"
></div>
</div>
<div class="example">
<h3>19x19 (with coordinates)</h3>
<div
class="seki-board-static fixed-size square"
data-game="(;FF[4]CA[UTF-8]AP[Seki v1.3.17]GM[1]GN[Friendly Match]RE[W+15.5]XL[0]XR[0]XT[0]XB[0]PC[OGS: https://online-go.com/game/57818013]KM[6.5]HA[0]RU[Japanese]TM[259200]OT[3x86400 byo-yomi]ST[2]SZ[19]PB[andytsai14]BR[1d]PW[Akineko 秋猫]WR[1d];B[pp];W[dd];B[pd];W[dq];B[co];W[ep];B[cl];W[qc];B[qd];W[pc];B[od];W[nb];B[qn];W[jq];B[cf];W[fc];B[cd];W[cc];B[bc];W[bb];B[be];W[ac];B[bd];W[dc];B[mc];W[mb];B[lc];W[lb];B[kc];W[qj];B[oj];W[qg];B[hp];W[jo];B[hn];W[nq];B[oq];W[np];B[iq];W[en];B[jr];W[bp];B[cp];W[cq];B[bo];W[kq];B[kr];W[ch];B[ef];W[eh];B[bj];W[dj];B[el];W[gh];B[bh];W[bg];B[cg];W[bi];B[ci];W[ah];B[dh];W[di];B[bh];W[nc];B[nd];W[ch];B[oc];W[dg];B[ob];W[bq];B[fm];W[go];B[ho];W[gn];B[gm];W[hm];B[cj];W[gq];B[lq];W[lp];B[mq];W[mp];B[nr];W[hr];B[ir];W[hl];B[gf];W[df];B[ed];W[hc];B[ec];W[eb];B[fd];W[gc];B[if];W[he];B[hf];W[de];B[jn];W[dk];B[dl];W[fk];B[bm];W[bk];B[ck];W[aj];B[bl];W[ak];B[al];W[ai];B[an];W[cn];B[dn];W[dm];B[do];W[em];B[eo];W[fn];B[fl];W[gp];B[cm];W[kn];B[jm];W[km];B[kl];W[jl];B[io];W[in];B[im];W[il];B[in];W[hq];B[ip];W[po];B[qo];W[pn];B[pm];W[or];B[mr];W[pq];B[qp];W[op];B[qr];W[qq];B[rq];W[jp];B[pr];W[os];B[oq];W[pq];B[lm];W[ln];B[ls];W[ll];B[kk];W[mm];B[gk];W[ih];B[jk];W[je];B[jf];W[ke];B[kf];W[le];B[ie];W[id];B[lf];W[rf];B[re];W[qe];B[pe];W[qf];B[kb];W[rd];B[rc];W[se];B[rb];W[jc];B[om];W[jb];B[ko];W[kp];B[nn];W[mj];B[lj];W[lk];B[kj];W[mh];B[mi];W[mn];B[mk];W[ml];B[nj];W[ph];B[ja];W[ia];B[ka];W[ib];B[rk];W[rj];B[qk];W[sk];B[sl];W[sj];B[pj];W[pi];B[qq];W[hj];B[gj];W[ij];B[fh];W[fg];B[fi];W[gg];B[ge];W[eg];B[nh];W[me];B[nl];W[mg];B[mf];W[ng];B[nf];W[og];B[oq];W[rl];B[sm];W[pq];B[gi];W[hh];B[oq];W[rm];B[sn];W[pq];B[qi];W[ri];B[oq];W[rn];B[so];W[pq];B[rh];W[qh];B[oq];W[md];B[na];W[pq];B[oo];W[oq];B[hs];W[gs];B[is];W[kd];B[ne];W[fj];B[ei];W[dh];B[gl];W[ns];B[ms];W[hd];B[fp];W[fq];B[fo];W[dp];B[ap];W[aq];B[ao];W[fr];B[lh];W[oi];B[ni];W[kh];B[sc];W[sd];B[no];W[mo];B[nm];W[of];B[pf];W[lg];B[li];W[ps];B[qs];W[ff];B[ee];W[jd];B[ma];W[ld];B[la];W[kg];B[ji];W[jh];B[];W[])"
data-config="{
'showCoordinates': true
}"
></div>
</div>
<div class="example">
<h3>9x9 (kifu)</h3>
<div
class="seki-board-static fixed-size square mono"
data-game="(;
FF[4]
CA[UTF-8]
AP[Seki v1.3.17]
GM[1]
XL[0]
XR[0]
XT[0]
XB[0]
KM[0]
HA[0]
TM[0]
ST[2]
SZ[9]
PB[Black]
PW[White]
;B[cc]
;W[gc]
;B[cg]
;W[gg]
;B[db]
;W[cf]
;B[bf]
;W[dg]
;B[ce]
;W[df]
;B[ch]
;W[de]
;B[cd]
;W[fb]
;B[ec]
;W[fd]
;B[ed]
;W[ee]
;B[eh]
;W[fg]
;B[fh]
;W[gh]
;B[gi]
;W[hi]
;B[dh]
;W[fi]
;B[fc]
;W[gd]
;B[eb]
;W[gb]
;B[dd]
;W[eg]
;B[ei]
;W[gi]
;B[fa]
;W[ga]
;B[ea]
)"
data-config="{
'showCoordinates': true,
'showAllMoveNumbers': true,
'theme': {
'board': {
'stoneStyle': 'mono',
'backgroundColor': '#fff',
'backgroundImage': ''
}
}
}"
></div>
</div>
<div class="example">
<h3>19x19 (kifu)</h3>
<div
class="seki-board-static fixed-size square mono"
data-game="(;FF[4]CA[UTF-8]AP[Seki v1.3.17]GM[1]GN[Friendly Match]RE[W+15.5]XL[0]XR[0]XT[0]XB[0]PC[OGS: https://online-go.com/game/57818013]KM[6.5]HA[0]RU[Japanese]TM[259200]OT[3x86400 byo-yomi]ST[2]SZ[19]PB[andytsai14]BR[1d]PW[Akineko 秋猫]WR[1d];B[pp];W[dd];B[pd];W[dq];B[co];W[ep];B[cl];W[qc];B[qd];W[pc];B[od];W[nb];B[qn];W[jq];B[cf];W[fc];B[cd];W[cc];B[bc];W[bb];B[be];W[ac];B[bd];W[dc];B[mc];W[mb];B[lc];W[lb];B[kc];W[qj];B[oj];W[qg];B[hp];W[jo];B[hn];W[nq];B[oq];W[np];B[iq];W[en];B[jr];W[bp];B[cp];W[cq];B[bo];W[kq];B[kr];W[ch];B[ef];W[eh];B[bj];W[dj];B[el];W[gh];B[bh];W[bg];B[cg];W[bi];B[ci];W[ah];B[dh];W[di];B[bh];W[nc];B[nd];W[ch];B[oc];W[dg];B[ob];W[bq];B[fm];W[go];B[ho];W[gn];B[gm];W[hm];B[cj];W[gq];B[lq];W[lp];B[mq];W[mp];B[nr];W[hr];B[ir];W[hl];B[gf];W[df];B[ed];W[hc];B[ec];W[eb];B[fd];W[gc];B[if];W[he];B[hf];W[de];B[jn];W[dk];B[dl];W[fk];B[bm];W[bk];B[ck];W[aj];B[bl];W[ak];B[al];W[ai];B[an];W[cn];B[dn];W[dm];B[do];W[em];B[eo];W[fn];B[fl];W[gp];B[cm];W[kn];B[jm];W[km];B[kl];W[jl];B[io];W[in];B[im];W[il];B[in];W[hq];B[ip];W[po];B[qo];W[pn];B[pm];W[or];B[mr];W[pq];B[qp];W[op];B[qr];W[qq];B[rq];W[jp];B[pr];W[os];B[oq];W[pq];B[lm];W[ln];B[ls];W[ll];B[kk];W[mm];B[gk];W[ih];B[jk];W[je];B[jf];W[ke];B[kf];W[le];B[ie];W[id];B[lf];W[rf];B[re];W[qe];B[pe];W[qf];B[kb];W[rd];B[rc];W[se];B[rb];W[jc];B[om];W[jb];B[ko];W[kp];B[nn];W[mj];B[lj];W[lk];B[kj];W[mh];B[mi];W[mn];B[mk];W[ml];B[nj];W[ph];B[ja];W[ia];B[ka];W[ib];B[rk];W[rj];B[qk];W[sk];B[sl];W[sj];B[pj];W[pi];B[qq];W[hj];B[gj];W[ij];B[fh];W[fg];B[fi];W[gg];B[ge];W[eg];B[nh];W[me];B[nl];W[mg];B[mf];W[ng];B[nf];W[og];B[oq];W[rl];B[sm];W[pq];B[gi];W[hh];B[oq];W[rm];B[sn];W[pq];B[qi];W[ri];B[oq];W[rn];B[so];W[pq];B[rh];W[qh];B[oq];W[md];B[na];W[pq];B[oo];W[oq];B[hs];W[gs];B[is];W[kd];B[ne];W[fj];B[ei];W[dh];B[gl];W[ns];B[ms];W[hd];B[fp];W[fq];B[fo];W[dp];B[ap];W[aq];B[ao];W[fr];B[lh];W[oi];B[ni];W[kh];B[sc];W[sd];B[no];W[mo];B[nm];W[of];B[pf];W[lg];B[li];W[ps];B[qs];W[ff];B[ee];W[jd];B[ma];W[ld];B[la];W[kg];B[ji];W[jh];B[];W[])"
data-config="{
'showCoordinates': true,
'showAllMoveNumbers': true,
'theme': {
'board': {
'stoneStyle': 'mono',
'backgroundColor': '#fff',
'backgroundImage': ''
}
}
}"
></div>
</div>
</div>
</div>
<script type="module">
import {bootstrap} from './seki-embed.js'
bootstrap()
</script>
</body>
</html>