Skip to the content

Fuda Cards札

Collectible card frames for images and live 3D: a true thickness, an edge, foil, stacks, wear and a binder, as two web components.

Fuda is the Japanese word 札 for a card or a tag. About the name

Contents

Reference · Options, materials, stacks and wear

stackLayoutfunction

Where the cards of a stack lie, from neat to messy, the same every time for the same seed: the cards under the top one, bottom first, at most depth of them, as the top card is the live one and lies square. A card's place depends on its number from the bottom, so a card put on top moves none of those under it.

The idea and the three parameters (messiness, seed, depth) come from toranpu's pileLayout (github.com/johnmorrisdotca/toranpu, src/ui/layout.ts, MIT). This is written again here for a stack that has a true thickness: a card's height is not faked by moving it down the page, so only the nudge and the turn are laid out.

Import it

import { stackLayout } from "@johnmorrisdotca/fuda-cards";

Definition

function stackLayout(count: number, options?: StackLayoutOptions): StackPlace[]

Parameters

NameTypeDescription
countnumber

How many cards the stack holds; with none or one there is nothing under the top.

options (optional)StackLayoutOptions

How messy, which seed and how deep. Unless said: 0.3, 1 and 10.

Returns

StackPlace[]

The places of the cards under the top one, bottom first; empty for a stack of one.

Examples

import { stackLayout } from "@johnmorrisdotca/fuda-cards";

const same = JSON.stringify(stackLayout(52, { seed: 7 })) === JSON.stringify(stackLayout(52, { seed: 7 }));
console.log(same, stackLayout(1).length, stackLayout(52).length); // true 0 10
true 0 10

What it prints (run when this page was built)

View sourceEdit on GitHubMade from the source of @johnmorrisdotca/fuda-cards 0.11.0.