### Initialize Development Environment

Source: https://github.com/kooriookami/yugioh-card/blob/master/README.en.md

Commands to set up the project workspace, install dependencies, and build the library using pnpm.

```bash
pnpm install
pnpm dev
pnpm build
pnpm build:lib
```

--------------------------------

### Install Yugioh Card Package

Source: https://context7.com/kooriookami/yugioh-card/llms.txt

Installs the yugioh-card package using either pnpm or npm package managers. This is the first step before using the library in your project.

```bash
pnpm add yugioh-card
# or
npm install yugioh-card
```

--------------------------------

### Create Field Center Cards

Source: https://context7.com/kooriookami/yugioh-card/llms.txt

Provides an example of generating Field Center cards for tournament play. Allows for custom artwork and optional card back styling.

```javascript
import { FieldCenterCard } from 'yugioh-card';

const fieldCenter = new FieldCenterCard({
  view: document.getElementById('card-container'),
  resourcePath: '/assets/yugioh-card',
  data: {
    image: '/images/field-center-art.jpg',
    cardBack: false,
    radius: true,
    scale: 1,
  },
});
```

--------------------------------

### Implement Ruby Text Syntax

Source: https://context7.com/kooriookami/yugioh-card/llms.txt

Enables furigana annotations for Japanese text using the [BaseText(RubyText)] syntax. This is applied within the card data fields to render phonetic guides over characters.

```javascript
import { YugiohCard } from 'yugioh-card';

const card = new YugiohCard({
  view: document.getElementById('card-container'),
  resourcePath: '/assets/yugioh-card',
  data: {
    language: 'jp',
    name: '[青眼の白龍(ブルーアイズ・ホワイト・ドラゴン)]',
    type: 'monster',
    attribute: 'light',
    cardType: 'normal',
    level: 8,
    monsterType: 'ドラゴン[族(ぞく)]',
    description: '[高(たか)]い[攻(こう)][撃(げき)][力(りょく)]を[誇(ほこ)]る[伝(でん)][説(せつ)]のドラゴン。',
    radius: true,
    scale: 1,
  },
});
```

--------------------------------

### Render Yu-Gi-Oh! Card in Node.js

Source: https://github.com/kooriookami/yugioh-card/blob/master/README.en.md

Shows how to use the library with skia-canvas in a Node.js server environment to dynamically generate and serve card images via HTTP.

```javascript
import http from 'http';
import skia from 'skia-canvas';
import { YugiohCard } from 'yugioh-card';

http.createServer((req, res) => {
  const card = new YugiohCard({
    data: {},
    resourcePath: 'xxx',
    skia: skia,
  });
  card.leafer.export('png', {
    screenshot: true,
  }).then(result => {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.write(`<img src="${result.data}" />`);
    res.end();
  });
}).listen(3000);
```

--------------------------------

### Render Yu-Gi-Oh! Card in Browser

Source: https://github.com/kooriookami/yugioh-card/blob/master/README.en.md

Demonstrates how to instantiate a YugiohCard object in a browser environment and export the resulting canvas as an image file.

```javascript
import { YugiohCard } from 'yugioh-card';

const card = new YugiohCard({
  view: 'xxx',
  data: {},
  resourcePath: 'xxx',
});

card.leafer.export('xxx.png', {
  screenshot: true,
  pixelRatio: devicePixelRatio,
});
```

--------------------------------

### Create Spell and Trap Cards with YugiohCard

Source: https://context7.com/kooriookami/yugioh-card/llms.txt

Demonstrates how to instantiate the YugiohCard class to render Spell and Trap cards. Users must provide a DOM element for the view, a resource path for assets, and a data object containing card details like name, type, and icon.

```javascript
import { YugiohCard } from 'yugioh-card';

// Spell Card
const spellCard = new YugiohCard({
  view: document.getElementById('spell-container'),
  resourcePath: '/assets/yugioh-card',
  data: {
    language: 'en',
    name: 'Pot of Greed',
    type: 'spell',
    icon: '',
    image: '/images/pot-of-greed.jpg',
    description: 'Draw 2 cards.',
    package: 'LOB-119',
    password: '55144522',
    radius: true,
    scale: 1,
  },
});

// Trap Card with Counter icon
const trapCard = new YugiohCard({
  view: document.getElementById('trap-container'),
  resourcePath: '/assets/yugioh-card',
  data: {
    language: 'en',
    name: 'Solemn Judgment',
    type: 'trap',
    icon: 'counter',
    image: '/images/solemn-judgment.jpg',
    description: 'When a monster(s) would be Summoned, OR a Spell/Trap Card is activated: Pay half your LP; negate the Summon or activation, and if you do, destroy that card.',
    package: 'MRD-127',
    password: '41420027',
    radius: true,
    scale: 1,
  },
});
```

--------------------------------

### Create Standard Yu-Gi-Oh! Monster Card

Source: https://context7.com/kooriookami/yugioh-card/llms.txt

Demonstrates how to create a standard Yu-Gi-Oh! monster card using the YugiohCard class. It includes essential properties like name, attribute, image, level, ATK/DEF, and description. The card can be exported as a PNG image.

```javascript
import { YugiohCard } from 'yugioh-card';

// Create a standard Monster card (Blue-Eyes White Dragon)
const card = new YugiohCard({
  view: document.getElementById('card-container'), // DOM element to render into
  resourcePath: '/assets/yugioh-card', // Path to static resources
  data: {
    language: 'en',           // 'sc' | 'tc' | 'jp' | 'kr' | 'en' | 'astral'
    name: 'Blue-Eyes White Dragon',
    color: '',                // Custom name color (empty for auto)
    align: 'left',            // 'left' | 'center' | 'right'
    gradient: false,          // Enable name gradient
    gradientColor1: '#999999',
    gradientColor2: '#ffffff',
    type: 'monster',          // 'monster' | 'spell' | 'trap' | 'pendulum'
    attribute: 'light',       // 'dark' | 'light' | 'earth' | 'water' | 'fire' | 'wind' | 'divine'
    image: '/images/blue-eyes.jpg',
    cardType: 'normal',       // 'normal' | 'effect' | 'ritual' | 'fusion' | 'synchro' | 'xyz' | 'link' | 'token'
    level: 8,
    monsterType: 'Dragon/Normal',
    atkBar: true,
    atk: 3000,
    def: 2500,
    description: 'This legendary dragon is a powerful engine of destruction.',
    package: 'SDK-001',
    password: '89631139',
    copyright: 'en',          // 'sc' | 'jp' | 'en'
    laser: 'laser1',          // 'laser1' | 'laser2' | 'laser3' | 'laser4'
    rare: 'ur',               // 'dt' | 'ur' | 'gr' | 'hr' | 'ser' | 'gser' | 'pser'
    twentieth: false,         // 20th anniversary mark
    radius: true,             // Rounded corners
    scale: 1,
  },
});

// Export the card as PNG image
card.leafer.export('blue-eyes.png', {
  screenshot: true,
  pixelRatio: devicePixelRatio,
});
```

--------------------------------

### Create Classic Series 2 Cards

Source: https://context7.com/kooriookami/yugioh-card/llms.txt

Demonstrates the YugiohSeries2Card class for creating vintage-style Yu-Gi-Oh! cards. Includes support for ruby text, specific copyright markers, and legacy ATK/DEF formatting.

```javascript
import { YugiohSeries2Card } from 'yugioh-card';

const series2Card = new YugiohSeries2Card({
  view: document.getElementById('card-container'),
  resourcePath: '/assets/yugioh-card',
  data: {
    language: 'jp',
    font: '',
    name: '[Blue-Eyes White Dragon(ブルーアイズ・ホワイト・ドラゴン)]',
    color: '',
    align: 'left',
    gradient: false,
    gradientColor1: '#999999',
    gradientColor2: '#ffffff',
    type: 'monster',
    attribute: 'light',
    image: '/images/blue-eyes-old.jpg',
    cardType: 'normal',
    level: 8,
    monsterType: 'Dragon',
    atk: 3000,
    def: 2500,
    description: 'This legendary dragon is a powerful engine of destruction.',
    firstLineCompress: false,
    descriptionAlign: false,
    descriptionZoom: 1,
    descriptionWeight: 0,
    package: 'LB-01',
    password: '89631139',
    copyright: 'jp',
    laser: '',
    radius: true,
    scale: 1,
  },
});
```

--------------------------------

### Create Link Monster Yu-Gi-Oh! Card

Source: https://context7.com/kooriookami/yugioh-card/llms.txt

Shows how to render a Link Monster card, specifying the 'cardType' as 'link' and defining the directional 'arrowList' that indicates the monster's Link Rating and pointing directions.

```javascript
import { YugiohCard } from 'yugioh-card';

const linkCard = new YugiohCard({
  view: document.getElementById('card-container'),
  resourcePath: '/assets/yugioh-card',
  data: {
    language: 'en',
    name: 'Decode Talker',
    type: 'monster',
    attribute: 'dark',
    image: '/images/decode-talker.jpg',
    cardType: 'link',
    monsterType: 'Cyberse/Link/Effect',
    atk: 2300,
    // Link arrows: [1=Top, 2=Top-Right, 3=Right, 4=Bottom-Right, 5=Bottom, 6=Bottom-Left, 7=Left, 8=Top-Left]
    arrowList: [1, 6, 4], // Top, Bottom-Left, Bottom-Right (LINK-3)
    description: 'Gains 500 ATK for each monster it points to. When your opponent activates a card or effect that targets a card(s) you control: You can Tribute 1 monster this card points to; negate the activation, and if you do, destroy that card.',
    package: 'ST18-EN041',
    radius: true,
    scale: 1,
  },
});
```

--------------------------------

### Create Card Backs

Source: https://context7.com/kooriookami/yugioh-card/llms.txt

Illustrates the use of YugiohBackCard to render the reverse side of cards. Supports various styles including Egyptian God themes and different regional logos (OCG, TCG, RD).

```javascript
import { YugiohBackCard } from 'yugioh-card';

const cardBack = new YugiohBackCard({
  view: document.getElementById('card-container'),
  resourcePath: '/assets/yugioh-card',
  data: {
    type: 'normal',
    logo: 'ocg',
    konami: true,
    register: true,
    radius: true,
    scale: 1,
  },
});
```

--------------------------------

### Node.js Server-Side Rendering

Source: https://context7.com/kooriookami/yugioh-card/llms.txt

Configures the library for server-side environments using skia-canvas. This allows for generating card images on the backend and serving them as data URLs or files.

```javascript
import http from 'http';
import skia from 'skia-canvas';
import { YugiohCard } from 'yugioh-card';

http.createServer((req, res) => {
  const card = new YugiohCard({
    resourcePath: './assets/yugioh-card',
    skia: skia,
    data: {
      language: 'en',
      name: 'Blue-Eyes White Dragon',
      type: 'monster',
      attribute: 'light',
      image: './images/blue-eyes.jpg',
      cardType: 'normal',
      level: 8,
      monsterType: 'Dragon/Normal',
      atk: 3000,
      def: 2500,
      description: 'This legendary dragon is a powerful engine of destruction.',
      radius: true,
      scale: 1,
    },
  });

  card.leafer.export('png', {
    screenshot: true,
  }).then(result => {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.write(`<img src="${result.data}" />`);
    res.end();
  });
}).listen(3000, () => {
  console.log('Card server running at http://localhost:3000');
});
```

--------------------------------

### Create Rush Duel Cards

Source: https://context7.com/kooriookami/yugioh-card/llms.txt

Shows the implementation of the RushDuelCard class for generating Rush Duel format cards. This supports specific features like Maximum ATK, Legend card markers, and varied rarity settings.

```javascript
import { RushDuelCard } from 'yugioh-card';

const rushDuelCard = new RushDuelCard({
  view: document.getElementById('card-container'),
  resourcePath: '/assets/yugioh-card',
  data: {
    language: 'sc',
    name: 'Blue-Eyes White Dragon',
    color: '',
    type: 'monster',
    attribute: 'light',
    image: '/images/blue-eyes-rush.jpg',
    cardType: 'normal',
    level: 8,
    monsterType: 'Dragon/Normal',
    maximumAtk: 0,
    atk: 3000,
    def: 2500,
    description: 'This legendary dragon is a powerful engine of destruction.',
    firstLineCompress: false,
    descriptionAlign: false,
    descriptionZoom: 1,
    descriptionWeight: 0,
    package: 'RD/KP01-JP000',
    password: '120120000',
    legend: true,
    laser: '',
    rare: 'sr',
    radius: true,
    scale: 1,
  },
});
```

--------------------------------

### Update Card Data with setData

Source: https://context7.com/kooriookami/yugioh-card/llms.txt

Demonstrates how to dynamically modify card properties after initialization. The setData method triggers an automatic redraw of the card component, supporting both single and bulk property updates.

```javascript
import { YugiohCard } from 'yugioh-card';

const card = new YugiohCard({
  view: document.getElementById('card-container'),
  resourcePath: '/assets/yugioh-card',
  data: {
    name: 'Dark Magician',
    type: 'monster',
    attribute: 'dark',
    cardType: 'normal',
    level: 7,
    atk: 2500,
    def: 2100,
  },
});

// Update multiple properties at once
card.setData({
  name: 'Dark Magician Girl',
  level: 6,
  atk: 2000,
  def: 1700,
  monsterType: 'Spellcaster/Effect',
  cardType: 'effect',
});

// Update a single property
card.setData({ rare: 'ur' });
card.setData({ twentieth: true });
```

--------------------------------

### Create Pendulum Yu-Gi-Oh! Card

Source: https://context7.com/kooriookami/yugioh-card/llms.txt

Illustrates the creation of a Pendulum card, including its unique 'pendulumScale' and 'pendulumDescription' properties. This allows for the rendering of Pendulum Monsters with their specific game mechanics.

```javascript
import { YugiohCard } from 'yugioh-card';

const pendulumCard = new YugiohCard({
  view: document.getElementById('card-container'),
  resourcePath: '/assets/yugioh-card',
  data: {
    language: 'sc',
    name: 'Odd-Eyes Pendulum Dragon',
    type: 'pendulum',
    attribute: 'dark',
    image: '/images/odd-eyes.jpg',
    pendulumType: 'effect-pendulum', // 'normal-pendulum' | 'effect-pendulum' | 'ritual-pendulum' | 'fusion-pendulum' | 'synchro-pendulum' | 'xyz-pendulum'
    level: 7,
    pendulumScale: 4,
    pendulumDescription: 'You can reduce the battle damage you take from a battle involving a Pendulum Monster you control to 0.',
    monsterType: 'Dragon/Pendulum/Effect',
    atk: 2500,
    def: 2000,
    description: 'If this card battles an opponent\'s monster, any battle damage this card inflicts is doubled.',
    radius: true,
    scale: 1,
  },
});
```

--------------------------------

### Configure Image Export Options

Source: https://context7.com/kooriookami/yugioh-card/llms.txt

Utilizes LeaferJS export capabilities to save cards in various formats. Supports custom pixel ratios for high-DPI displays, quality settings for JPEGs, and region trimming.

```javascript
import { YugiohCard } from 'yugioh-card';

const card = new YugiohCard({
  view: document.getElementById('card-container'),
  resourcePath: '/assets/yugioh-card',
  data: {
    name: 'Exodia the Forbidden One',
    type: 'monster',
    attribute: 'dark',
    cardType: 'effect',
    level: 3,
    atk: 1000,
    def: 1000,
  },
});

// Export as PNG with custom pixel ratio
card.leafer.export('card.png', {
  screenshot: true,
  pixelRatio: 2,
});

// Export as JPEG with quality setting
card.leafer.export('card.jpg', {
  screenshot: true,
  quality: 0.9,
});

// Export as data URL for inline display
card.leafer.export('png', {
  screenshot: true,
}).then(result => {
  document.getElementById('preview').src = result.data;
});

// Export specific region
card.leafer.export('cropped.png', {
  screenshot: true,
  trim: true,
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.