UNPKG

@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
<!DOCTYPE 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>&bull;</span> <span class="github"> <img src="/images/github-mark.svg" /> <a href="https://github.com/adamreisnz/seki">View on GitHub</a> </span> <span>&bull;</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>