Reference
Cards, hands and piles
import { … } from "@johnmorrisdotca/toranpu/element";242.8 kB minified and gzipped, with everything it imports (measured with esbuild)
Toranpu's custom elements, for any page and any framework that renders HTML, and the arithmetic behind them:
<toranpu-card>: one card, in any design and with any back, turned over by a tap.<toranpu-hand>: a hand, fanned; turned face down where it lies, all at once or one by one; squared up into a bundle that shows nothing; or held closed, to open on a tap.<toranpu-pile>: a stock or a discard pile, neat or messy, from a seed.
import { defineToranpuElements } from "@johnmorrisdotca/toranpu/element";
defineToranpuElements();
document.body.insertAdjacentHTML("beforeend", '<toranpu-card card="KS" design="english" flip></toranpu-card>');Or with no call at all: importing @johnmorrisdotca/toranpu/element/define
registers them by being imported.
Your own faces and backs: registerCardDesign and registerCardBack (also from /card-faces and /card-backs) keep
them by name, so design="frontier" and back="frontier" work on every element of the page; a card also takes
an element in slot="face" or slot="back", or a face function.
Exports
| Name | Kind | What it is |
|---|---|---|
arrangeCards | function | A hand laid out another way, as a new list (the one given is left alone): "rank" sorts it low to high, the ace high, a rank's cards in suit order; "suit" groups it by suit, spades, hearts, clubs, diamonds, each in rank order; "face" groups it into the number cards, ace to ten, and then the face cards, jack, queen, king, each group in rank order and a rank's cards in suit order; "dealt" keeps the order given. |
BUNDLE_BACKS | constant | How many backs a squared-up bundle shows, whatever the hand: a bundle never tells how many cards are in it. |
CardFaceContext | type | What a card's face function is told: the language the card speaks, and the design it names. |
CardFaceRenderer | type | A function that draws a card's face: given the card's id and its context, SVG markup (drawn on the card's paper in a box 100 by 140, or a whole <svg> document), or an element, or null to draw the card as its design does. |
CardLands | type | Where a card a hand is given goes: to the front, or the end. |
CardOrder | type | How a hand's cards are laid out: as they were dealt, by rank, grouped by suit, or the number cards apart from the face cards. |
CardPlace | type | One card's place: across and down in card widths from where the first lies, and its turn in degrees. |
defineHand | function | Register a hand under its standard tag or a host-supplied tag. |
defineToranpuElements | function | Register the elements under their tags, once; a tag already taken is left as it is. |
ELEMENT_SIZES | constant | The sizes every element takes, as a card's width in pixels. |
handLayout | function | Where each card of a hand of count lies: a fan when open, a squared-up stack with a sliver of each card showing when closed, and every shape in between. |
HandLayoutOptions | type | How a hand is laid out. |
HandTurnOptions | type | How a hand's cards are turned face down or face up. |
mixCards | function | A hand mixed up, as a new list: the same cards in another order, never the order given (where a hand has two cards or more that differ), so a mix is always seen to change something. |
partedHandLayout | function | A HAND PARTED AT ONE CARD: that card lifted a little, upright and wholly in view, and the cards to its left and right drawn apart from it into a group on each side (one group where it is the first or the last). |
PartOptions | type | How a parted hand is laid out. |
pileLayout | function | Where each card of a pile of count lies, bottom first, the top card last: at 0 messiness a neat stack whose edge shows a card's thickness for each card under the top, and towards 1 a heap, each card nudged and turned a little more. |
PileLayoutOptions | type | How a pile is laid out. |
readHand | function | A hand written as text, as its cards: the two-letter ids separated by spaces or commas ("AS KH 10D TC RJ", with 10 for ten as well as T), or the deck's one-letter codes run together ("pvOZ"). |
registerCardBack | function | Keep a back by its name. |
registerCardDesign | function | Keep a design by its name, in place of any earlier one of that name. |
replaceCard | function | A hand with one card tossed out and another given in its stead, at the front or the end: as a new list. |
SpinOptions | type | How a card is spun. |
TORANPU_TAGS | constant | The elements' tags. |
ToranpuCard | class | ONE CARD ON ANY PAGE: <toranpu-card card="QS">, in any design and with any back, face up or face down, turned over by a tap when it has flip. |
ToranpuHand | class | A HAND OF CARDS ON ANY PAGE: <toranpu-hand cards="AS KH QD">, fanned, in any design and with any back. |
ToranpuPile | class | A PILE OF CARDS ON ANY PAGE: <toranpu-pile>, a stock to draw from or a discard pile, its top card on top and the cards under it showing as a stack, from neatly squared to very messy. |
tossCard | function | A hand without one card, as a new list: the first of that card taken out, or the hand unchanged where it holds none. |