はじめに · Fuda Cards 札 — Collectible card frames for the web

はじめに

最初のFudaカードをページに置き、続けてカードの山、使い込んだカード、コレクションまで、ビルド作業なしで数分で試せます。

Fuda Cardsは、コレクション用のカードをWebコンポーネントとして描きます。カードは渡した画像を囲む枠で、コレクションはカードを並べた棚です。フレームワークも3Dエンジンも要りません。このガイドでは、空のページからカード、カードの山、バインダーまでを順に作ります。

デスクトップのカードスタジオ。ステージに金色のカードがあり、下に表示の操作、右にすべての設定が並んでいる

インストール

npm install @johnmorrisdotca/fuda-cards

このパッケージ自身のバージョンはVERSIONとして公開されているので、ページが実行中のバージョンを示せます。

パッケージはdist/にあるふつうのESモジュールです。実行時の依存は@johnmorrisdotca/kazoku-uiが1つだけで、コレクションのズームバーを描くために使います。カード1枚だけなら、ほかに何も要りません。

最初のカード

要素を1回インポートしてから、タグを書きます。画像は子要素として中に入れます。

<script type="module">
  import '@johnmorrisdotca/fuda-cards/element';
</script>
<fuda-card title="Explorer One" category="ROCKET" variant="cosmic" finish="foil" description="A new explorer.">
  <img src="rocket.jpg" alt="Explorer One rocket">
</fuda-card>

variantはclassic、sport、cosmicのいずれか、finishはfoilかmatteです。カードの幅は初期値で300 pxで、本物のカードと同じ2.5対3.5の比率を保ちます。CSSで要素のwidthを変えると、中身もいっしょに拡大・縮小します。

バンドラーを使わないページでは、パッケージ名だけのインポートをdist/element.jsのパスに置き換えてdistフォルダー全体を配信するか、インポートマップを使います（HTMLとCDNとバンドラーを参照）。

裏返す、厚みを持たせる

カードには表と裏と縁があります。flippedで裏を見せ、thicknessはミリメートルで、実寸の比率で描かれます。

<script type="module">import '@johnmorrisdotca/fuda-cards/element';</script>
<fuda-card title="Relic" thickness="1.5" flipped></fuda-card>

カードの山と、使い込んだカード

stackは指定した枚数のカードを、枚数に1枚の厚みをかけた高さの山として描きます。materialは実際のカード用紙などの厚みを使います。wearはカードを使い込んだ状態にします。

<script type="module">import '@johnmorrisdotca/fuda-cards/element';</script>
<fuda-card title="Deck" material="paper-310-black-core" stack="52" stack-messiness="0.3" stack-seed="7"></fuda-card>
<fuda-card title="Rookie" wear="moderately-played" wear-seed="7"></fuda-card>

52枚のカードの山を斜めから見たところ。縁にカード1枚ごとの線が見える

stackの枚数、materialとwearの名前は、パッケージがデータとして公開している表から来ています。自分のメニューをそこから作れます。

import { cardMaterial, stackHeightMm, wearPresets } from '@johnmorrisdotca/fuda-cards';

const material = cardMaterial('paper-310-black-core');
console.log(material?.thicknessMm, stackHeightMm(52, material?.thicknessMm ?? 0.3));
console.log(wearPresets.map((preset) => preset.id).join(' '));
// 0.325 16.9
// perfect mint near-mint lightly-played moderately-played heavily-played damaged

0.325 16.9
perfect mint near-mint lightly-played moderately-played heavily-played damaged

コレクション

<fuda-collection>は、cardsプロパティ（属性ではありません）に渡した一覧を、10種類の表示のどれかで見せます。

<fuda-collection view="binder"></fuda-collection>
<script type="module">
  import '@johnmorrisdotca/fuda-cards/collection-element';
  document.querySelector('fuda-collection').cards = [
    { id: 'one', name: 'First card', image: '/cards/one.jpg', backImage: '/cards/one-back.jpg' },
    { id: 'two', name: 'Second card', image: '/cards/two.jpg' },
  ];
</script>

2枚のシートが開いたリングバインダー。1枚に9ポケット、下に表示・バインダー・動きの選択がある

viewをdeck、rolodex、case、random、story、wall、spotlight、atlas、fanに変えると、ほかの表示になります。一覧はコレクションにあります。

次に読むもの

カードのすべての属性：カード要素
カードが現れる前に元の画像がちらつかないようにする方法：困ったとき・よくある質問
パッケージの作りと理由：アーキテクチャ
各設定を目で試せるデモ：カードスタジオ

ソースを見る GitHub で編集@johnmorrisdotca/fuda-cards 0.11.0 のソースから作成しました。

この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。