リファレンス

カードの絵柄

import { … } from "@johnmorrisdotca/toranpu/card-faces";

最小化と gzip 圧縮をしたサイズは 187.4 kB（読み込むものをすべて含み、esbuild で計測）

リファレンスの説明と例は英語です。見出しと目次は日本語です。

The faces of the cards, drawn as SVG in the same 100 by 140 box as the backs: plain (unless said), four colour, and the English pattern with its drawn kings, queens and jacks, which is its own entry point because of its size. Jokers too (RJ, BJ), for a table of your own.

import { cardFaceSvg, cardFaceUrl, loadCardDesign } from "@johnmorrisdotca/toranpu/card-faces";

element.innerHTML = cardFaceSvg("QS");
image.src = cardFaceUrl("TD", { design: "four-colour" });
const english = await loadCardDesign("english");
element.innerHTML = cardFaceSvg("KS", { design: english });

Your own faces: register a design, with art for the standard cards, for cards no deck has (a territory card, a card a game invents), or both, and ask for it by its name on any card, hand, pile or table.

import { registerCardDesign, cardFaceSvg } from "@johnmorrisdotca/toranpu/card-faces";

registerCardDesign({
  name: "frontier",
  box: [100, 140],
  art: {},
  draw: (card) => (card.startsWith("land-") ? `<text x="50" y="76" text-anchor="middle" font-size="12">${card.slice(5)}</text>` : null),
  label: (card) => `Territory ${card.slice(5)}`,
});
element.innerHTML = cardFaceSvg("land-ridge", { design: "frontier" });

エクスポート

名前	種類	概要
`CARD_DESIGNS`	定数	The designs drawn here, by name.
`CARD_FACE_COLOURS`	定数	The faces' own colours.
`CARD_FACE_PROPERTIES`	定数	The CSS custom properties a plain or four-colour face drawn into a page takes its colours from.
`CardDesign`	型	A set of drawn cards: its name, the box each card is drawn in, and each card's drawing (what goes inside an <svg> of that box) by its id, `KS` for the king of spades and `RJ` and `BJ` for the red and black jokers.
`CardDesignName`	型	A design's name.
`cardFaceFromArt`	関数	A card's face from artwork of your own: `art` is SVG markup (or a whole `<svg>` document) drawn on the card's paper in a box 100 by 140, or in `box`, fitted to the card's height and centred; a whole `<svg>` is used as it is.
`CardFaceOptions`	型	How a face is drawn.
`cardFaceSvg`	関数	A card's face as a whole SVG document, 100 by 140: `QS`, `TD`, a joker (`RJ`, `BJ`), a rules card (`R1`, `R2`) or the blank (`BL`).
`cardFaceUrl`	関数	A card's face as a data URL, for an <img src>, a CSS background or a canvas.
`cleanMarkup`	関数	SVG markup with what could run or fetch taken out: scripts, `foreignObject`, frames, animation elements and styles, every `on…` handler, and any `href` that is not a picture or a `#fragment` of the drawing itself.
`CUSTOM_CARD_ID`	定数	What a card's id may be, when a design of the page draws it: letters and digits, with `-`, `_`, `.` and `:` inside, up to 40.
`EXTRA_CARDS`	定数	THE EXTRAS OF A REAL DECK, which no game here deals but a hand on a page may hold, as a wild card or for the look of it: the two jokers, the two rules cards a pack is sold with (`R1`, the rules of Hearts; `R2`, of Spades), and a blank (`BL`).
`EXTRA_LIMITS`	定数	The most of each kind of extra one hand holds: four jokers, as some packs have; two rules cards; two blanks.
`faceName`	関数	A face's name in words: "queen of spades", "red joker"; in Japanese "スペードのクイーン", "赤のジョーカー".
`isCardFace`	関数	Whether a text is a card a face can be drawn for: `QS`, `TD`, a joker (`RJ`, `BJ`), a rules card (`R1`, `R2`) or the blank (`BL`).
`JOKERS`	定数	The two jokers' ids: the red joker and the black.
`loadCardDesign`	関数	A design by its name, loaded when it is first asked for: `"english"` fetches the English pattern (about 700 kB, 200 kB compressed) only then.
`pipPlaces`	関数	The middles of a number card's pips, in the 100 by 140 box, and whether each is drawn upside down.
`registerCardDesign`	関数	Keep a design by its name, in place of any earlier one of that name.
`registeredCardDesigns`	関数	The names of the designs registered now, in the order they were.
`safeImageUrl`	関数	A picture's address, or null when it is anything else.
`unregisterCardDesign`	関数	Forget a registered design.

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

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