Display and brand cards

Use the native SVG

The card-faces entry draws card ids as SVG or data URLs, with plain and four-colour designs. English-pattern and realistic artwork have separate entries and can be loaded by loadCardDesign. The back entry offers built-in and registered backs.

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

Register your own design

A CardDesign supplies a name, box dimensions and artwork keyed by card id, optionally a draw function, labels and fallback. Custom ids can be drawn without becoming cards accepted by the eleven game engines. The native markup and image-URL helpers sanitize supplied artwork; use their existing contract rather than inserting raw markup yourself.

Put it in an element

toranpu-card, toranpu-hand and toranpu-pile use the same registered designs and backs. The builder previews actual native elements and copies the corresponding host or frame code. Cards, branding and elements preserve the detailed options and methods.