アーキテクチャ

Fudaは、フレームワークも3Dエンジンも使わず、ESモジュールにコンパイルされるふつうのTypeScriptです。設計の原則は、ページは使うものの分だけ負担することです。摩耗のないカードは摩耗のコードを読み込まず、山のないカードは山のコードを読み込まず、画像だけのページはthree.jsを読み込みません。

エントリーポイント

各エントリーを支えるモジュール

• **element.ts**はカードを描きます。2つの面、薄い面を重ねた縁、画像のスロット、Animateボタンとパン、回転です。materials.tsとstack.tsをインポートし、残りは必要なときに読み込みます。登録するクラスFudaCardもエクスポートされるので、サブクラスや型に使えます。
• wear.ts（17 KB）は独立したモジュールで、カードにwear属性があるときだけimport()で読み込まれます。摩耗のないカードは、以前とまったく同じに描かれます。
• pile-card.ts（13.7 KB）は、<fuda-card stack>の扇、取り出し、脇の山を受け持ち、カードがfan、taken-off、pile-controlsを求めたときだけ読み込まれます。
• **pile.ts**は、すべての山が共有するものです。着地、扇の配置、時間の扱い（animate、speed、動きの軽減）です。カードとコレクションの両方が使うので、山はどこでも同じように動きます。
• **stack.ts**は、一番上の下にあるカードを、シードから毎回同じように並べます（シード付きの小さな乱数生成器mulberry32）。
• **materials.ts**は、出典のある厚みの表と、山のプリセットです。
• **binder.ts**は、シート、ポケット、めくれるページを作ります。
• **zoom.tsとchoice.ts**は、コレクションをkazoku-uiの表示操作につなぎ、選択ボタンの列を描きます。
• **collection-element.ts**は、クラスFudaCollectionで10種類の表示を描きます。
• **live-3d.ts**は、どのカードをライブにするかを決めます。コンテキスト、共有アセット、静止画、ピクセルの予算は、kazoku-uiの共有レンダラーのものです。

import { cardMaterials, stackLayout, wearLayout, wearLevels } from '@johnmorrisdotca/fuda-cards';

const levels = wearLevels({ wear: 'damaged' });
console.log(cardMaterials.length, stackLayout(11).length, Boolean(levels && wearLayout(levels, 1)));
// 13 10 true

13 10 true

描画

カードはWebGLではなく、CSSの3D平面の重なりです。厚みはcalc(var(--mm) * 100cqw / 63)なので要素の幅に従い、縁は面の間に置いた薄い平面の集まりです。山は、枚数が何枚でも1つの3Dシーンで、静止中は何も描きません。動きはCSSの変形と、自分で終わる1回きりのアニメーションで、タイマーで動くものはありません。WebGLを使うのはライブ3Dだけで、そこでもコンテキストは常に1つしかありません。

画像は、カードが画面上の大きさを持ち、スロットのすべての画像が読み込まれるまで隠されるので、元の画像が枠の外に出ることはありません（困ったとき・よくある質問を参照）。

依存

@johnmorrisdotca/kazoku-uiは実行時の依存です（ズームバー、共有レンダラー）。threeは省略可能なピア依存で、利用側で用意します。<fuda-card>1枚だけなら、どちらも読み込みません。

テスト

pnpm testは、表と規則の単体テストを実行します。pnpm test:e2eは、ソフトウェア描画のヘッドレスChromiumを、デスクトップとスマートフォンの大きさで、1ファイルずつ動かします。どちらもpnpm checkとリリースに含まれます。開発を参照してください。