HTML 内の <xelto-diagram> タグに Canvas で描いた局面図を表示する Web Component です。
ECMAScript 6 をサポートしたブラウザで動作します。
動作させたいページの body タグの最後に以下のコードを貼り付けます。xelto-canvas-diagram.js は Releases からダウンロードできますが、代わりに CDN を利用して読み込むタグを用いるとより簡単です。
<!-- 本体読み込み（適宜書き換えてください） -->
<script src="./xelto-diagram-canvas.js"></script>
<!-- 局面図の描画を有効にするスクリプト -->
<script>
customElements.define('xelto-diagram', XeltoDiagramCanvas);
customElements.whenDefined('xelto-diagram').then(() => {
Array.from(document.querySelectorAll('xelto-diagram')).forEach(x => x.refresh());
});
</script>Microsoft Edge, Firefox などの Web Components 非対応ブラウザでも動かしたい場合は、webcomponents-loader.js を xelto-diagram-canvas.js よりも先に読み込ませれば動くようになります。
<!-- webcomponents-loader.js 読み込みの例 -->
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.2.10/webcomponents-loader.js" integrity="sha256-Ao3dDPJ8Vd/wf6kjL2MlHNo8vYEeLyvDg8k0njnNS7Y=" crossorigin="anonymous"></script>ページ内の局面図を表示させたい場所に次のように xelto-diagram 要素を書き、その中に表示したい局面を MSF 形式で記述することで局面図を表示することができます。
<xelto-diagram>
{
"sast": "arxe",
"arxe": {
"txifol": [],
"evol": null
},
"sorn": {
"txifol": [],
"evol": null
},
"ele": [
["rav", "nen", "pin", "mir", "ket", "lin", "len"],
["din", "rez", "kun", "mat", "lax", "jil", "tan"],
[ null, null, null, null, null, null, null],
[ null, null, null, "tem", null, null, null],
[ null, null, null, null, null, null, null],
["pal", "ful", "mik", "fav", "zan", "gil", "ruj"],
["dyu", "lis", "mel", "ser", "dia", "vio", "ral"]
],
"korol": []
}
</xelto-diagram>以下は単に開始局面を表示するだけのページの例です。この例ではバージョン 0.0.1 の本体を CDN から取得して使用しています。
<!DOCTYPE html>
<html>
<body>
<xelto-diagram>
{
"sast": "arxe",
"arxe": {
"txifol": [],
"evol": null
},
"sorn": {
"txifol": [],
"evol": null
},
"ele": [
["rav", "nen", "pin", "mir", "ket", "lin", "len"],
["din", "rez", "kun", "mat", "lax", "jil", "tan"],
[ null, null, null, null, null, null, null],
[ null, null, null, "tem", null, null, null],
[ null, null, null, null, null, null, null],
["pal", "ful", "mik", "fav", "zan", "gil", "ruj"],
["dyu", "lis", "mel", "ser", "dia", "vio", "ral"]
],
"korol": []
}
</xelto-diagram>
<!-- webcomponents-loader.js 読み込みの例 -->
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.2.10/webcomponents-loader.js" integrity="sha256-Ao3dDPJ8Vd/wf6kjL2MlHNo8vYEeLyvDg8k0njnNS7Y=" crossorigin="anonymous"></script>
<!-- 本体読み込み（適宜書き換えてください） -->
<script src="https://cdn.jsdelivr.net/npm/@minofrk/xelto-diagram-canvas@0.0.1/umd/xelto-diagram-canvas.js" integrity="sha256-TMtKhz9JCIPMutuO/a/FPr8yMQIOMN4y/VmCWJjnHO8=" crossorigin="anonymous"></script>
<!-- 局面図の描画を有効にするスクリプト -->
<script>
customElements.define('xelto-diagram', XeltoDiagramCanvas);
customElements.whenDefined('xelto-diagram').then(() => {
Array.from(document.querySelectorAll('xelto-diagram')).forEach(x => x.refresh());
});
</script>
</body>
</html>npm install @minofrk/xelto-diagram-canvas
このライブラリは HTMLElement を継承したクラス XeltoDiagramCanvas をエクスポートしています。これにより要素 <xelto-diagram> を定義することで下記 API が利用可能になります。
局面図を再描画します。局面やフォントを変更してもこのメソッドを呼ばないと反映されません。
一度も setState() を呼ばずに refresh() を呼んだ場合、customElements.define() 時点での <xelto-diagram> の内容を局面図として解釈することを試みます。内容が MSF 形式と互換性を持たない場合はエラー表示をします。ただし customElements.define() 時点で HTML の解析が済んでいないと内容を読み取れず常にエラー表示になってしまうので、<xelto-diagram> の内容を描画したい場合は HTML の解析が終わってから customElements.define() するようにしてください。
表示する局面を設定します。設定する局面は MSF 形式に従うオブジェクトで表現します。
論理属性の reversed を指定すると駒の配置がソーン視点になります。
<xelto-diagram reversed>
...
</xelto-diagram>以下に挙げるスタイルを <xelto-diagram> 要素に当てることで局面図の大きさやフォントなどを変えることができます。
widthheightfont-family
See LICENSE