詰碁印刷3 碁盤と碁石と手順の描画、javascriptで配列の簡単なシャローコピーの作り方
詰碁印刷2 - 六帖のかたすみ
の続きです。
ソースはこちら
kickzone/SGFPrint · GitHub
碁盤と手順を表示できるようになりました。使っている技術は大したことはなく、easeljsでゴリゴリ碁盤や碁石を描いているだけです。
一番苦労したのはノードの全分岐をゲットする処理です。これは先週大まかにできていましたが動作はさせておらず、今週デバッグに時間がかかりました。
詰碁用のSGFファイルは正解図を表示させるだけではありません。この手ならここがだめ、じゃあ少し戻ってここはこう打つ…と分岐がいくつも存在するファイルがありますので、すべてのパターンについて出力が必要となります。スタックと配列のコピーで実装できました。
SGFElement.prototype = { //全てのノード組み合わせ(=すべての分岐)をゲット getAllBranch: function(){ var retArr = []; var nodeStack = []; var terminals = []; nodeStack.push(this.root); while(nodeStack.length){ var currentNode = nodeStack[nodeStack.length-1]; //子ノードがなければ終端とみなし、nodeStackの内容をretArrにコピー if(currentNode.childNodes.length == 0){ terminals.push(currentNode); retArr.push([].concat(nodeStack)); //配列をシャローコピーするちょっと変わった書き方 nodeStack.pop(); } else{ //terminalsに入っていない子ノードをスタックに入れる //一つもなければ、探索が終了したものとして終端一覧に入れ、自分自身をpop var findChild = false; for(i in currentNode.childNodes){ var node = currentNode.childNodes[i]; if(terminals.indexOf(node) == -1){ findChild = true; nodeStack.push(node); break; } } if(!findChild){ terminals.push(currentNode); nodeStack.pop(); } } } return retArr; } }
配列のシャローコピーはとても簡単な方法があります。
var newArr = [].concat(oldArr);
と書くだけでよいです。空の配列に古い配列をコピーした結果がnewArrに返ってきます。
残りの作業は、SGFファイルに書かれているコメントの出力と、大詰めのCSSによるページ設定です。これができれば一通り完了です。