GoDojoSGF is an online SGF editor developed by GoDojo.CN. It's based on web technology stack, providing an elegant and convenient way to edit SGF file across all the platforms (Windows, MacOS, Linux, Android, iOS). The Editor allows user to create, edit, or open existing SGF files in any modern web browsers. You can add the editor into your web service by simply referencing the Javascript APIs and tweaking the parameters.

HeyGo is a web application, which is based on GoDojoSGF. GoDojoSGF implement logic for feature. HeyGo is release version, provided complete UI for GoDojoSGF. The project can visit: HeyGo

Getting Started

Get source from github and run the following shell in GoDojoSGF folder:

# prepare development environment
git clone https://github.com/lskzsy/GoDojoSGF.git
cd GoDojoSGF
npm install

Building GoDojoSGF.bundle.js, which can used on other project:

npm run build

If you want to develop the project by demo, you can run the following shell:

npm run serve

then open http://127.0.0.1:8080 on your browser.

Simple Uses

Create SGF object:

const sgf = SGF.create({
    boardSize: 19,      /* optional, default is 19. Using '18:9' to build rectangle board */
    encoding: 'utf-8',  /* optional, default is 'utf-8' */
    application: '',    /* optional, SGF editor information */
    data: '',           /* optional, exists SGF data, the data will cover other configure */
    isKo: false,        /* optional, default is false. */
});

Show it on html:

<div id="chessboard"></div>

sgf.showOn('chessboard', {
    background: '#FFBA75',  /* optional, board color */
    branchColor: 'blue',    /* optional, branch mark color */
    markColor: 'red',       /* optional, flag mark color */
    lineColor: 'black',     /* optional, board split color */
    styleWidth: 400,        /* optional, board display width */
    styleHeight: 400,       /* optional, board display height */
    position: 'relative',   /* optional, workspace div position */ 
    bgMaterial: 'img/material_background_1.jpg',    /* optional, default is false */ 
    wstoneMaterial: 'img/white.png',                /* optional, default is false */ 
    bstoneMaterial: 'img/black.png'                 /* optional, default is false */ 
});

Change input mode:

sgf.setInputMode('repeat');     /* put stone in turn */
sgf.setInputMode('w');          /* put only white stone */
sgf.setInputMode('b');          /* put only black stone */
sgf.setInputMode('markSQ');     /* put rectangle flag */
sgf.setInputMode('markCR');     /* put circle flag */
sgf.setInputMode('markTR');     /* put triangle flag */
sgf.setInputMode('markMA');     /* put cross flag */
sgf.setInputMode('markLB');     /* put letter flag */

Put stone on board:

sgf.putStone(1, 5); /* put stone or mark on board, arguments is x and y for coordination */

Show/hide board coordinate:

sgf.showCoordinate();
sgf.hideCoordinate();

Show/hide location prompt

sgf.showPrompt();
sgf.hidePrompt();

Show/hide step

sgf.showStep();
sgf.hideStep();

Control SGF proccess:

sgf.left();
sgf.right();
sgf.continue();
sgf.back();

Resize board:

sgf.resize($(document).width(), $(document).height());

Save SGF state:

sgf.save(); // return sgf format string 

Listen SGF state:

sgf.onStoneCreated((route, stone) => {});
sgf.onStoneDeleted((route) => {}) ;
sgf.onBranchMove((route) => {});
sgf.onSGFChanged((route, stone) => {});
sgf.onPlayerChanged((route) => {});

Open confirm mode(normally used in mobile)

function stoneWaitConfirm() {
    sgf.confirmPutStone();  // stone will be created
    sgf.quitPutStone(); // quit the action
}

sgf.confirmMode(true, stoneWaitConfirm); // first argument is open/close, second argument is callback if someone click board

Jump to any step:

const path = [2, 1]; // Jump to second step in branch 2 
sgf.jump(path);

Delete any step:

const path = [2, 1]; // Delete second step in branch 2 and next...
sgf.delStone(path);

Comment step:

sgf.addComment('text');
const text = sgf.getComment();