Reference

Card backs

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

3.5 kB minified and gzipped, with everything it imports (measured with esbuild)

The backs of the cards, drawn as SVG: one home for every card game in the family. Three to start: a classic red and a classic blue in the manner of a casino back, and ink with dots. Each can be recoloured, carry a site's mark in its middle, and comes as an SVG document or a data URL.

import { cardBackSvg, cardBackUrl } from "@johnmorrisdotca/toranpu/card-backs";

element.innerHTML = cardBackSvg("classic-blue", { width: 70 });
image.src = cardBackUrl("ink-dots", { colour: "#8f2826", mark: "五つ" });

Your own back: SVG art, a picture or colours, and a logo in the middle, drawn by cardBackSvg or registered under a name that back="…" on any card, hand, pile or table then takes.

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

registerCardBack("frontier", { colour: "#2f4a3a", ink: "#e7d9a8", logo: `<circle cx='50' cy='50' r='40'/>` });
element.innerHTML = cardBackSvg("frontier", { width: 70 });

Exports

Name	Kind	What it is
`CARD_BACK_LOOK`	constant	Each back's own colours: its field, the lines and dots drawn on the field, and the paper round it.
`CARD_BACK_PROPERTIES`	constant	The CSS custom properties a back drawn into a page takes its colours from, when no colour is given.
`CARD_BACKS`	constant	The backs, by name.
`CARD_BOX`	constant	A card is drawn in a box 100 wide and 140 tall, the 5:7 of a poker-size card, and scales to any width.
`CardBackName`	type	One back's name.
`cardBackNames`	function	The backs a page may ask for by name: the package's own, and any the page registered (`registerCardBack`).
`CardBackOptions`	type	How a back is drawn.
`cardBackSvg`	function	A back as a whole SVG document, 100 by 140.
`cardBackUrl`	function	A back as a data URL, for an <img src>, a CSS background or a canvas: the same drawing as `cardBackSvg`, with its own colours.
`CardSuitLetter`	type	A suit as one letter, as a card's id writes it: spades, hearts, diamonds, clubs.
`registerCardBack`	function	Keep a back by its name.
`RegisteredCardBack`	type	A back registered by name: how it is drawn, and the built-in back it starts from.
`registeredCardBacks`	function	The names of the backs registered now, in the order they were.
`SUIT_PATHS`	constant	The four suits, each a path in a box of 100 filled in one colour.
`unregisterCardBack`	function	Forget a registered back.

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