やり方

トレイの埋め込み

トレイ、タグ、iframeを表示し、送信元を確認してメッセージを受け取ります。

コードから表示する

import { mountRoller } from "@johnmorrisdotca/korokoro";
const target = document.createElement("div");
document.body.append(target);
const tray = mountRoller(target, { spec: { count: 2, sides: 6 }, storage: null, sound: false, onRoll: (result) => console.log(result.total) });
tray.roll();
tray.destroy();

storage: nullでは履歴を保存しません。画面を取り除くときにdestroy()を呼びます。1個のダイスにはmountDieを使えます。ReactとVueのコンポーネントもあります。

タグまたはiframeを使う

<script type="module" src="https://cdn.jsdelivr.net/npm/@johnmorrisdotca/korokoro@1/dist/element-define.js"></script>
<korokoro-roller notation="2d6" size="small" sound="off"></korokoro-roller>

2種類の単独のダイスを試す、トレイを試す、または埋め込みビルダーで設定を作ります。コード、iframeのURL、設定のリンクをコピーできます。iframeでは保存しません。属性、イベント、埋め込みの資料に詳しい説明があります。

iframeのメッセージを受け取る

const frame = document.querySelector<HTMLIFrameElement>("iframe");
window.addEventListener("message", (event) => {
  if (!frame || event.origin !== "https://johnmorrisdotca.github.io" || event.source !== frame.contentWindow) return;
  console.log(event.data.type);
});

送信元のoriginとiframeの両方を確認します。ネイティブ要素のイベントはShadow DOMの境界を越えて届き、iframeはJSONで表せる内容を転送します。

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

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