Cards
A card (kind: card) is a flat component that flips between a front
and a back. The front is required — a card must show something face-up —
and the back is optional, shared across the whole deck so a face-down stack
looks uniform.
Cards behave like every other component: players drag, flip, and deal them by hand. taybl doesn’t deal turns or enforce who may look at a card — that comes from the zone a card sits in (a face-down draw pile, an owner-only hand).
How to edit in the Studio
Open your game → Layout tab and select the card to set its name, front
art, and behaviors. Grouping cards into a deck — assigning a shared back and
a group id to a whole set at once — is done from the Decks tab of the
game-settings editor; see decks. The variants shorthand
below is an authoring/generation convenience rather than an inspector
control.
Card fields
| Field | Values | Default | What it does |
|---|---|---|---|
kind | card | — | Marks this component as a card |
faces.front | FaceBinding | — | Required. The face-up art (a card must have a front) |
faces.back | FaceBinding | .optional() | The shared face-down art; usually the same image across a deck |
group | component id | .optional() | Deck id — lets setup place a whole deck at once (e.g. deck_standard_52) |
cardFace | CardFace | .optional() | A taybl-drawn composed face — see below |
variants | array of CardVariant (≥ 1) | .optional() | Authoring shorthand for a large unique deck — expanded at normalize time (below) |
Composed faces — a card taybl draws for you
A card’s front is normally one uploaded image (faces.front). But the
component-library card configurator can instead author a cardFace: a
structured face taybl draws live on the table from fields you edit — a header,
an art window (cardFace.artImage, an uploaded image that fills only the
middle, not the whole card), a type line, rules body, and up to four
independent corner value badges, each with its own value and colour. A
cardFace renders only when the card has no full-face faces.front.image, so
a fully-custom uploaded card is never overridden.
The header grows to fit its name — a long title wraps onto a second line rather than shrinking or clipping — and the badges sit as quarter-round wedges in the card’s exact corners, so the name keeps the width between them.
Hiding the parts you don’t use
Most cards use only some of the anatomy, so every part can be turned off.
Each one carries an eye button on its own field in the configurator and in
the layout-editor inspector: click it and that part stops being drawn, and its
editor collapses — there is nothing on the face left to edit. Corner badges
work the same way, one eye per corner. Under the hood these are
cardFace.show (header / art / type / body) and a show flag on each badge.
The art window starts hidden, because an empty one draws nothing but a placeholder. Turn its eye on when you have art for the card — that is also what reveals the upload control. Cards already saved in a game keep whatever they were set to.
A card shares the rest of its fields with every kind — see
components overview. Every card is flippable, so
it can always be turned face-down; the faces.back art (assigned in the
Decks flow) is what shows on the down side, and a card with no
back still flips to a generic back.
Variants — one entry for a whole unique deck
Most decks are a hundred different fronts sharing one back. Writing a
hundred near-identical card entries is tedious, so a card may instead carry a
variants[] list. The normalize pass expands it into one determinate
card per variant — each gets the variant’s own front, the parent card’s
shared faces.back, and the parent’s group. The runtime, renderer, and
validator only ever see the expanded ordinary cards; variants never reaches
them.
Each CardVariant has:
| Field | Values | Default | What it does |
|---|---|---|---|
id | lowercase snake_case | — | Becomes the expanded card’s id (parent_id + _ + this) |
front | FaceBinding | — | This variant’s determinate face-up art |
name | text | .optional() | Defaults to the parent card’s name |
count | integer ≥ 1 | .optional() | Copies of this variant (e.g. four of a value) |
properties | record of string / number / boolean | .optional() | Per-variant data tags (suit, rank) |
Related
- Components overview — shared fields
- Decks — grouping cards and assigning a shared back
- Zone roles — draw piles, hands, discards
- Zone visibility — who can see a card’s front
- Setup automation — shuffling and dealing a deck