やり方

SVGとReactで表示する

現在の局面をSVGで描き、Reactで対局の状態を持ちます。

今の局面を描く

import {createGame} from "@johnmorrisdotca/narabe";
import {boardSvg} from "@johnmorrisdotca/narabe/draw";
const svg = boardSvg(createGame({variant:"reversi"}),{width:480,title:"Reversi opening",legal:true});
console.log(svg.startsWith("<svg"));

true

boardSvgはSVG文字列を1つ返します。幅、読み上げる名前、強調表示を選べますが、クリック処理は付けません。表示側で座標に変換し、操作をエンジンへ渡して、返された局面を描き直します。

Reactの状態を使う

import {createElement} from "react";
import {useNarabe} from "@johnmorrisdotca/narabe/react";
function Game() {
  const game = useNarabe({variant:"reversi"});
  return createElement("button",{onClick:()=>game.reset()},game.state.toPlay);
}
console.log(createElement(Game));

フックはコンポーネント内で呼びます。設定は初期化とresetで読み、描画のたびに初期化しません。フック独自のルールはなく、操作はエンジンの処理を使います。手の一覧がない段階ではchoicesがnullの場合があります。描画とフックのAPIも参照してください。

ソースを見る GitHub で編集@johnmorrisdotca/narabe 1.3.0 のソースから作成しました。

この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。