Reference

Card designs

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

187.4 kB minified and gzipped, with everything it imports (measured with 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" });

Exports

Name	Kind	What it is
`CARD_DESIGNS`	constant	The designs drawn here, by name.
`CARD_FACE_COLOURS`	constant	The faces' own colours.
`CARD_FACE_PROPERTIES`	constant	The CSS custom properties a plain or four-colour face drawn into a page takes its colours from.
`CardDesign`	type	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`	type	A design's name.
`cardFaceFromArt`	function	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`	type	How a face is drawn.
`cardFaceSvg`	function	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`	function	A card's face as a data URL, for an <img src>, a CSS background or a canvas.
`cleanMarkup`	function	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`	constant	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`	constant	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`	constant	The most of each kind of extra one hand holds: four jokers, as some packs have; two rules cards; two blanks.
`faceName`	function	A face's name in words: "queen of spades", "red joker"; in Japanese "スペードのクイーン", "赤のジョーカー".
`isCardFace`	function	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`	constant	The two jokers' ids: the red joker and the black.
`loadCardDesign`	function	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`	function	The middles of a number card's pips, in the 100 by 140 box, and whether each is drawn upside down.
`registerCardDesign`	function	Keep a design by its name, in place of any earlier one of that name.
`registeredCardDesigns`	function	The names of the designs registered now, in the order they were.
`safeImageUrl`	function	A picture's address, or null when it is anything else.
`unregisterCardDesign`	function	Forget a registered design.

View source Edit on GitHubMade from the source of @johnmorrisdotca/toranpu 2.15.0.