JavaScript碁盤

概要

ブラウザ上で使える碁盤です。囲碁クエストのウェブ版に検討機能が無かったので作りました。詰碁等をウェブページに貼り付けられるようにするための機能も追加しています。

実行方法

Github Pagesに置いてあります。

碁盤

https://misohena.github.io/js_igo/

埋め込み使用例

https://misohena.github.io/js_igo/examples.html

主な機能

• 盤面サイズは 1x1 ～ 52x52 までの非正方形に対応
• 簡易的なSGFインポート/エクスポート
• 分岐記録・盤面表示機能
• コメント表示・設定機能
• フリー編集機能
• マーク編集機能
• 着手番号表示
• レスポンシブ対応
• 盤面のピンチ・スワイプ操作による拡大・スクロール
• ウェブページへの埋め込み対応 (詰碁、棋譜の表示)
• 自動再生機能
• 現在盤面や手順のURL共有機能

SGFは次のプロパティに対応しています。

• ルートノードでの盤面サイズ指定(SZ)(非正方形サイズ可能)
• ルートノードでの表示エリア指定(VW)
• セットアッププロパティ(PL, AB, AW, AE)
• 各ノードにつき1つのコメント(C)
• 着手(B, W)
• マークアップ(MA, CR, SQ, TR, LB)
• ゲーム情報(CP,US,AN,SO,EV,GN,RO,DT,PC,BT,PB,BR,WT,PW,WR,RU,OT,TM,HA,KM,RE,ON,GC)

囲碁クエストでエクスポートしたSGFをペーストして確認したほか、拾ってきた詰碁の棋譜をペーストして確認しています。

埋め込み使用方法

DOMツリーに碁盤を追加するにはGameViewオブジェクトを作成します。

var gameView = new igo.GameView(placement, game, options)

placement はHTML要素をどこに配置するかを指定します。次のいずれかを指定出来ます。

• <親要素または親要素のid> : 指定した要素の子として追加します。underと同じです
• {under: <親要素または親要素のid> } : 指定した要素の子として追加します
• {after: <前の要素または前の要素のid> } : 指定した要素の次に追加します。
• {before: <次の要素または次の要素のid> } : 指定した要素の前に追加します。
• <script要素またはscript要素のid> : 要素を指定すると通常はunderと同じになりますが、script要素の場合は例外的にafterと同じ効果を持ちます。例えば document.currentScript を渡すと現在実行中のscript要素の次に挿入します
• null : 今は追加せず後で追加します。追加した直後に別途 gameView.fitBoardSizeToWindowAndParent() を呼び出してサイズの調整を行う必要があります

  例:

  const gameView = new igo.GameView(null);
  parent.appendChild(gameView.rootElement);
  gameView.fitBoardSizeToWindowAndParent();
      

game は表示対象のゲームの状態を保持するオブジェクトです。次のいずれかを指定出来ます。

• new igo.Game(<w>, <h>) : 空の盤面を作成します
• igo.Game.fromSGF(”<SGF>”) : SGF(棋譜)からゲームオブジェクトを作成します
• “<SGF>” : 文字列を渡すとSGFと見なして自動的にゲームオブジェクトを作成します
• undefined : game を省略した場合は new igo.Game(9) と同じになります

options はGameViewの動作をカスタマイズするための様々なオプションを保持するオブジェクトです。 詳しくはGameViewのオプションを参照してください。

HTMLで埋め込む方法

埋め込む場所に毎回script要素を書きたくない場合は、次のようにdiv要素にdata属性を設定しておいて

<div data-igo-sgf="(;GM[1]SZ[9]VW[da:id]AW[ea]AB[fa]AW[eb]AB[fb:ib]AW[ec:ic])"
     data-igo-opt='{"ui":{"top":["Comment"],"bottom":["UndoRedo"]},"showComment":true}'>
</div>

headあたりに次のようなスクリプトを仕込んでおけば良いでしょう。

window.addEventListener("load", ev=>{
    for(elem of document.querySelectorAll("div[data-igo-sgf]")){
        new igo.GameView(
            elem,
            elem.dataset.igoSgf,
            JSON.parse(elem.dataset.igoOpt));
    }
});

ページが読み込み終わったときにdata-igo-sgf属性を持つ全てのdivにGameViewを追加します。

リファレンス

GameView

GameViewのオプション

プロパティ	説明	指定可能な値	デフォルト
editable	編集可能か	boolean	true
showBranches	盤面に分岐を文字で表示するか	boolean	false
showMoveNumber	石の上に着手番号を表示するか	boolean	false
showLastMoveMark	最後に置いた石にマークを表示するか	boolean	false
rotate180	盤面を180度回転させるか(白から見た図にするか)	boolean	false
preventRedoAtBranchPoint	分岐点でリドゥを禁止するか(必ず着手点を選択させるか)	boolean	false
autoMove	自動着手モード	igo.BLACK, igo.WHITE, true, false	false
showComment	コメント欄を表示するか	boolean	false
path	最初に表示するノード	number(手数), string(SGF座標または分岐), Array(numberまたはstringの配列)	ルートを表示
gridInterval	盤面の線の間隔(px)	number
gridMargin	盤面の格子の外の空き(px)	number
ui	UI要素の配置	object	{top:[“GameStatus”], bottom:[“MoveControl”, “HistoryControl”, “ViewControl”, “Comment”]}
enableWheel	マウスホイールイベントを使用するか	boolean	true

options.path

options.pathは最初に表示する盤面を指定します。

数字を指定した場合、その数の手数だけ後の盤面を選択します(無ければ末尾)。分岐がある場合は最初の分岐を選びます。負の数を指定した場合、前の盤面へ戻ります(無ければ先頭)。

文字列を指定した場合、次のいずれかです。

• アルファベット二文字の場合、SGF座標で交点を指定したものと見なしその場所に着手した最も手数が少ない盤面を選択します。
• アルファベット一文字の場合、次の分岐点での分岐先(A:0, B:1, …)を指定したものと見なしその分岐直後の盤面を選択します。
• “_” を指定した場合、最初に分岐がある盤面を選択します。

配列を指定した場合、配列の各要素での選択を繰り返してたどり着いた盤面を選択します。

例:

• 12 : 最初から12手目の盤面
• “cd” : 最初に3の4に着手した盤面
• [“cc”, “fc”] : 最初に左上三々(cc)に着手した後、次に最初に二間開き(fc)した盤面
• [“cc”, 2] : 三々に着手した後の2手目
• [“A”, “B”, “A”] : 分岐をA、B、Aの順に選択した盤面
• [“A”, “_”, -1] : 最初の分岐でAを選択し、その後の最初の分岐の一つ手前の盤面

options.ui

options.uiはUI要素(ボタン類)の配置を指定します。

{
    top: 盤の上に表示する要素の配列,
    bottom: 盤の下に表示する要素の配列,
}

配列の要素として次のものが指定できます。

要素	説明
“GameStatus”	ゲームの状態を表示するテキスト
“Menu”	メインメニューボタン
“Pass”	パスボタン
“Resign”	投了ボタン
“UndoAll”	最初に戻るボタン
“Undo”	一つ戻るボタン
“Redo”	一つ進むボタン
“RedoAll”	最後に進むボタン
“ToggleBranchText”	分岐表示チェックボックス
“ToggleMoveNumber”	着手番号表示チェックボックス
“ToggleLastMoveMark”	最終着手マーク表示チェックボックス
“ToggleRotate180”	180度回転チェックボックス
“ToggleComment”	コメント表示チェックボックス
“Comment”	コメント欄
“MoveControl”	[“Menu”, “Pass”, “Resign”]
“HistoryControl”	[“UndoAll”, “Undo”, “Redo”, “RedoAll”]
“UndoRedo”	[“UndoAll”, “Undo”, “Redo”, “RedoAll”]
“ViewControl”	[“ToggleBranchText”, “ToggleMoveNumber”, “ToggleComment”, “ToggleRotate180”]
配列	コントロールバー(div.igo-control-bar)の中に要素を作成する

開発メモ

基本的な構造

(igo_view.js)
   GameView -> BoardElement
--------------------------------
           `-> Game -> Board
                    -> HistoryTree -> HistoryNode
(igo.js)

リンク

• SGF file format FF(4)