やり方

表示モデルとReactのホストを使う

表示する情報と答え、表示先の管理を分けます。

標準の表示モデルを読む

import { newGame,type Settings } from "@johnmorrisdotca/jirai";
import { boardModel } from "@johnmorrisdotca/jirai/draw";
const settings: Settings={width:3,height:3,mines:1,grid:"square",noGuess:false,opening:"clear",seed:42};
const model=boardModel(newGame(settings),{language:"ja",material:"wood",pieces:"flowers"});
console.log(model.width,model.height,model.cells[0]?.label);

3 3 1, 1: 未開封

モデルには、有効なマスの位置、表示する文字、種類、読み上げ名があります。閉じたマスは標準の表示規則に従い、終了や負けの後には結果を表示できます。標準のマークアップにはJIRAI_STYLEを使います。素材と印は見た目の設定で、推論の規則は変えません。

Reactの表示先

import { createElement } from "react";
import { JiraiBoard } from "@johnmorrisdotca/jirai/react";
console.log(createElement(JiraiBoard,{language:"ja",material:"wood",controls:true}).type);

Reactは表示先のdiv、標準の表示は盤と後始末を管理します。初期の設定、保存、見た目は表示時に読むため、別の盤や初期設定を読み込むときはReactのkeyを変えます。コールバックの参照は更新されます。Reactは任意のpeerで、計算部分は読み込みません。

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

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