やり方

カードの表示と絵柄

カードと裏面をSVGで描き、自分の絵柄を登録し、要素で表示します。

本来のSVGを使う

card-facesはカードIDをSVGやデータURLにし、通常と4色の絵柄を表示します。イングリッシュパターンと写実的な絵柄には別のエントリーがあり、loadCardDesignでも読み込めます。裏面には組み込みと登録したデザインがあります。

import { cardFaceSvg } from "@johnmorrisdotca/toranpu/card-faces";
import { cardBackSvg, registerCardBack, unregisterCardBack } from "@johnmorrisdotca/toranpu/card-backs";

registerCardBack("club-back", { base: "classic-blue", mark: "JM" });
console.log(cardBackSvg("club-back", { width: 80 }).slice(0, 140));
console.log(cardFaceSvg("AS", { design: "four-colour", width: 80 })?.slice(0, 140));
unregisterCardBack("club-back");

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 140" width="80" height="112" aria-hidden="true" style="user-select:none;-webkit-use
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 140" width="80" height="112" role="img" aria-label="ace of spades" style="user-sele

自分の絵柄を登録する

CardDesignには名前、大きさ、IDごとの絵を入れ、描画関数、読み上げ、代替の絵柄も指定できます。独自のIDを描けますが、それが11種類のゲームで使えるカードになるわけではありません。マークアップと画像URLの関数が内容を確認するので、無確認のマークアップを直接入れず、その契約を使います。

要素で表示する

toranpu-card、toranpu-hand、toranpu-pileは同じ絵柄と裏面を使います。ビルダーは本来の要素でプレビューし、表示先やフレームのコードをコピーできます。カード、絵柄、要素に詳しい設定とメソッドがあります。

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

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