Skip to the content

Toranpuトランプ

Use a deck, play eleven games with computers, solve a solitaire, or display cards in your own design.

Toranpu is Japanese for playing cards. About the name

Contents

Reference · Card designs

CardDesigntype

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. A card the set has no drawing for is drawn plain.

A set may also be a page's own: faces for the standard cards in its own art, or cards no deck has, such as a territory card or a card a game invents. Give such a card any id of letters, digits, -, _, . or : (up to 40), and either its drawing in art or a function that draws it in draw. See registerCardDesign.

Import it

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

Definition

type CardDesign = {
    name: string;
    box: readonly [
        number,
        number
    ];
    art: Readonly<Record<string, string>>;
    fallback?: CardDesign;
    draw?: (card: string, context: {
        language: "en" | "ja";
    }) => string | null;
    label?: (card: string, language: "en" | "ja") => string | null | undefined;
    frame?: "paper" | "none";
};

Members

NameTypeDescription
namestring

The design's name, as cardFaceSvg and an element's design attribute take it.

boxreadonly [number, number]

The width and height each card is drawn in.

artReadonly<Record<string, string>>

Each card's drawing, by its id.

fallback (optional)CardDesign | undefined

Where the set has no drawing for a card, the set that draws it instead; then plain.

draw (optional)((card: string, context: { language: "en" | "ja"; }) => string | null) | undefined

Cards drawn by a function rather than from art: given a card's id and the language, the drawing (what goes inside an <svg> of box), or null where the set has no such card. Use it for a card whose words change with the language, or whose picture is worked out from its id, such as a territory card.

label (optional)((card: string, language: "en" | "ja") => string | null | undefined) | undefined

What a screen reader says for a card of the set, in the language asked for; null or nothing for a card the set leaves to its usual name (a standard card), or to its id (any other).

frame (optional)"paper" | "none" | undefined

How the card is framed. "paper" (unless said) draws the card's paper and edge under the art, as the standard cards have; "none" draws nothing under it, for art that fills the whole card and draws its own edge.

Examples

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

const value: CardDesign = { name: "docs-face", box: [100, 140], art: { "docs-card": `<circle cx="50" cy="70" r="20"/>` } };
console.log(value.name);
docs-face

What it prints (run when this page was built)

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