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

How-to

TypeScript and Node

The types of every option, and the tables, the maths and the layouts that run on a server with no DOM.

The package ships its own types. CardOptions types every setting of the card, cardAttributes(options) turns it into attributes, and the tables of materials, stack sizes and wear grades are plain data. A mistake in a name or a value is an error at build time; the last line of the example below is meant to be one.

import {
  type CardMaterial,
  type CardOptions,
  cardAttributes,
  cardMaterial,
  stackHeightMm,
  wearPresets,
} from "@johnmorrisdotca/fuda-cards";

const options: CardOptions = { title: "Explorer One", material: "paper-310-black-core", stack: 52, wear: "near-mint" };
const stock: CardMaterial | undefined = cardMaterial(options.material);
console.log(stock?.name, stackHeightMm(options.stack ?? 1, stock?.thicknessMm ?? 0.325));
console.log(Object.keys(cardAttributes(options)).join(" "), wearPresets.length);

// @ts-expect-error "neon" is not a look
cardAttributes({ variant: "neon" });
Playing-card stock, black core, 310 gsm (13 pt) 16.9
title material stack wear 7

On a server

The main entry, @johnmorrisdotca/fuda-cards, the collection helpers (/collection) and the layouts need no browser. The elements extend HTMLElement, so import them only on the client (see Frameworks).

import { cardMaterials, stackHeightMm, stackLayout, wearLayout, wearPreset } from "@johnmorrisdotca/fuda-cards";

// The tables and the maths run on a server too: nothing here touches a browser.
const black = cardMaterials.find((material) => material.id === "paper-310-black-core");
console.log(stackHeightMm(52, black.thicknessMm));
console.log(stackLayout(52, { seed: 7 }).length);
console.log(wearLayout(wearPreset("damaged").levels, 3).front.creases.length > 0);
16.9
10
true

What is pure

The stack's layout and the wear's layout are pure functions of their numbers and a seed: the same seed lays the same stack and the same marks every time, in Node and in a browser, so a card's look can be written down as its settings and its seeds.

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