ICP TCG

NFT Trading Card Game on the Internet Computer

ICP TCG is a trading card game built on the Internet Computer Protocol, featuring collectible NFT cards that represent the ICP ecosystem. From DAOs and dApps to tokens and infrastructure, every card tells a story of the decentralized web.

What is ICP TCG?

ICP TCG brings the beloved trading card game format to the blockchain, where each card is a verifiable NFT minted using ICRC-7 standards. The game captures the essence of the Internet Computer ecosystem, letting players collect, trade, and battle with cards featuring real DAOs, dApps, and key figures building the decentralized web.

Core Concepts

• ICRC-7 NFTs: Every card is a true digital collectible with immutable provenance
• ICRC-3 Batch Operations: Efficient on-chain data management
• Multiple Layouts: Classic and full-art card designs
• Extensible System: Easy to add new cards and layouts

Card Types

Card Anatomy

Each card contains rich metadata following a comprehensive schema:

• Basic Info: ID, name, card type, affiliation, rarity
• Layout: Card layout variant (classic, full-art)
• Stats: HP, attacks, abilities, weaknesses, resistances
• Metadata: Founded date, network, NNS proposal info
• Assets: Image paths, affiliation icons, dynamic art
• Configuration: Custom styles, type badge colors, rarity symbols

Key Features

Multiple Card Layouts

Classic Layout Traditional card layout with centered image and distinct text sections. Best for:

• Cards with abilities or detailed descriptions
• Multiple attack moves
• Rich metadata and stats

Full Art Layout Artistic layout where artwork extends across the entire card with overlay text. Best for:

• Cards with striking artwork
• Simple attack patterns
• Visual-focused presentations

Dynamic Art System

The card rendering system supports sophisticated SVG-based art with:

• Layered Structure: Multiple element types (SVG, image, shape, text, group)
• Animation Support: Keyframe-based animations with easing
• Blend Modes: normal, multiply, screen, overlay, darken, lighten, and more
• Transform Support: Rotation, scaling, and origin control

Extensible Architecture

The project follows a modular design:

		├── src/lib/
│   ├── components/       # Svelte components
│   │   ├── card-renderer.svelte
│   │   ├── card-gallery.svelte
│   │   ├── card-layout-preview.svelte
│   │   └── ...
│   ├── data/cards/      # Card JSON definitions
│   ├── types/          # TypeScript definitions
│   ├── styles/         # CSS custom properties
│   └── layouts/       # Card layout templates

	

Technology Stack

• Framework: SvelteKit with TypeScript
• Build Tool: Vite
• Styling: CSS with custom properties (CSS variables)
• State Management: Svelte stores
• NFT Standards: ICRC-7 (NFT), ICRC-3 (batch operations)

Sample Cards

The initial card set includes ecosystem-representative cards:

Dappjak Labs (DAO)

• Type: DAO (Organization)
• Rarity: Rare
• Ability: All affiliated cards gain +20 HP

Seachan (dApp)

• Type: dApp - Community
• Affiliation: Dappjak Labs
• HP: 80
• Attack: "Anonymous Post" - 20 damage

Character Cards

Sample character cards include founder cards and team members with unique abilities and attack patterns.

Rarity System

Development

Getting Started

		# Install dependencies
pnpm install
 
# Start development server
pnpm dev
 
# Build for production
pnpm build
 
# Type checking
pnpm check
	

Adding New Cards

1. Create a new JSON file in src/lib/data/cards/
2. Follow the CardData structure defined in src/lib/types/card.ts
3. Import the new card in src/lib/data/card-data.ts
4. Add it to the cardData export object

Customizing Styles

Card styles are managed through CSS custom properties in src/lib/styles/card-vars.css. The file includes:

• Shared values: Colors, typography, common dimensions
• Preview-specific values: Sizes for card preview components
• Layout-specific values: Classic and full-art specific styles

Game Rules (v0.1)

ICP TCG features a complete gameplay system:

Setup

• Build a deck of 40 cards (minimum 10 token/energy cards)
• Draw 5 cards to start
• Place 1 dApp or Character face-down as Active Card
• Place up to 3 cards on your Bench
• Set aside 6 cards as Staking Rewards

Turn Structure

1. Cycle Phase: Draw 1 card, attach 1 Token
2. Action Phase: Play cards, use abilities, retreat
3. Battle Phase: Attack with your Active Card

Winning

• Claim all 6 Staking Rewards
• Opponent has no dApps left to deploy
• Opponent cannot draw at the start of their turn

ICRC Standards Integration

Each card leverages ICP's native standards:

Future Development

The ICP TCG platform is designed for extensibility:

• Card Sets: Each DAO can spawn an entire card set
• Canister Upgrades: dApps can evolve through version stages
• Real-World Asset Correlation: Token cards mirror actual ICP ecosystem tokens
• Social Features: Trading, tournaments, and leaderboards

Links

• GitHub Repository - Source code
• Card Gallery Demo - View card collection (coming soon)

Why ICP TCG?

ICP TCG demonstrates the power of the Internet Computer for digital collectibles:

• True Ownership: Cards are verifiable NFTs with immutable metadata
• Low-Cost Minting: ICP's efficient architecture makes minting affordable
• Dynamic Content: SVG-based cards support animations and interactivity
• Ecosystem Integration: Cards represent real projects and communities

This project serves as both a fun collectible game and a technical demonstration of what's possible with ICRC standards on the Internet Computer.

Built on Internet Computer. Powered by ICRC-7/ICRC-37. Each card is a verified NFT with immutable provenance.