CardForge — Dev Log | Ambient Pixels

Overview

CardForge V2 is a production-ready, browser-based toolkit for designing, editing, and sharing collectible RPG-style identity cards. Built with vanilla JavaScript and powered by Azure Static Web Apps + Azure Functions.

The modular design engine supports nearly 40 million unique visual card combinations through a 6-tier hierarchical system of layouts, palettes, containers, effects, and alignment options.

Version

v2.2 — Production

Platform

Azure Static Web Apps + Azure Functions (Node.js 18)

Deployment

CI/CD via GitHub Actions — auto-deploys on push to master

Combinations

~40 million unique card designs from modular tiers

Architecture

Frontend

Pure vanilla JavaScript — no frameworks, 17 JS modules (~400KB+)
11 CSS files (~300KB+) — modular, scoped architecture
Azure Static Web Apps hosting with custom routing via staticwebapp.config.json

Backend — Azure Functions (14 Endpoints)

cardforgepublish — Publish a card to the public gallery
cardforgeloadcards — Load published cards for gallery display
cardforgedeletecard — Remove a card from the gallery
cardforgesavecards — Save cards to cloud storage
cardforgetemplate — Load card templates
cardforgedeckpublish — Publish a deck to the gallery
cardforgedeckload — Load a published deck
cardforgedeckdelete — Delete a published deck
cardshare — OG meta tag endpoint for card social sharing
deckshare — OG meta tag endpoint for deck social sharing

Storage

Azure Blob Storage — cardforgeblobdata/cardforge container
localStorage — Client-side card and deck persistence
sessionStorage — Auth state and user info

6-Tier Modular Design System

The core of CardForge — a hierarchical design engine that provides granular control over card appearance through progressive disclosure.

Tier 1: Layout Style

Hero, Split, Minimal, Overlay, Stack, Frame — each with large/small variants. Controls the fundamental card structure.

Tier 2: Content Alignment

3-level hierarchy: Alignment Type (Left, Center, Right) × Weight Distribution (Top Heavy, Balanced, Bottom Heavy) × Style Variants (Minimal, Padded, Compact, Ultra-Compact, Elegant, Narrow). Creates 27+ combinations with progressive disclosure.

Tier 3: Visual Weight

Controls content distribution and emphasis — Top Heavy, Balanced, Bottom Heavy.

Tier 4: Color Palette

Palette Families: Neon, Earth, Ocean, Sunset, Monochrome — each with Light and Dark variants.

Tier 5: Image Container

Container Types: Masked (Circle, Hex), Framed (Modern, Ornate), Raw (Rounded), Full Bleed — with type-specific variants.

Tier 6: Image Effects

Effect Types: Filters, Borders (Glow, Solid), Overlays — with effect-specific variants.

Card Editor (The Forge)

The editor uses a vertical step-based navigation rail with 8 editing steps:

Step 0 — Presets + Random: 5 quick-start presets + 🎲 Roll Random Card generator
Step 1 — Card Design: All 6 modular tiers with live visual controls
Step 2 — Basics: Name, class, rarity, avatar, biography, quote
Step 3 — Stats: Dynamic stat bars with animated values (0–100 scale)
Step 4 — Social: Social media links with circular icon display
Step 5 — Badges: Glass badge panels with icons, quantities, descriptions
Step 6 — Attributes: Key-value pairs for custom properties
Step 7 — Forge: Quick Actions, My Cards, Deck Manager (3 sub-tabs)

Card Features

Front face — Avatar, name, class pill, rarity badge, quote, stat bars
Back face — Biography, social icons, glass badge panels, attributes
Card flip — CSS 3D transforms with perspective, smooth 0.6s animation
Real-time preview — Every form change instantly updates the card
Class & Rarity styling — Badge, glow, foil, outlined, border display styles with icon picker

Preset System

5 curated presets with complete modular configuration and sample character data:

Hero Classic — Earth Light / Center Balanced / Framed Ornate (Fantasy Ranger)
Split Modern — Ocean Dark / Left Top-Heavy / Framed Modern (Cyberpunk Runner)
Minimal Glow — Monochrome Light / Center Balanced / Raw Rounded (Arcane Scholar)
Fullbleed Cinematic — Sunset Dark / Center Bottom-Heavy / Full Bleed (Space Marine)
Framed Ornate — Neon Dark / Center Top-Heavy / Framed Ornate (Corporate Ronin)

Roll Random — Generates a completely random card: random modular tiers, random name/class/stats from built-in pools, random image from the character image pack.

My Cards & Deck Manager

My Cards

Local storage persistence — Cards saved to localStorage as JSON
Cloud sync — Authenticated users get cloud backup via API
Search & filter — Search by card name in My Cards list
Card operations — Save, Duplicate, Load, Delete, Add to Deck
Rendered HTML caching — Front/back face HTML + CSS classes stored for instant gallery rendering

Deck Manager

Create/rename/delete decks with custom icons (12 icon options)
Deck metadata — Name, description, tags, deck cover image
Add/remove cards from decks via My Cards
Visual deck detail — Mini-card grid showing all cards in a deck
Deck publishing — Publish decks to the public gallery with share links
Republish stability — Same shareId reused on republish (stable links)

Gallery

Card Gallery

Public gallery grid — All published cards displayed as rendered card faces
Lightbox viewer — Full-size card with navigation (← →), flip (F), close (Esc)
Deep linking — ?card=cardId URL parameter opens specific card in lightbox
Admin controls — Admin users can delete any card from gallery
Owner controls — Card owners can delete their own published cards

Deck Gallery

Deck tiles — Visual grid with deck name, icon, card count, cover image
Deck viewer modal — Full-screen overlay with card carousel, navigation, and flip
Save to My Decks — Import a published deck into local collection

Social Media Sharing

Added February 2026 — enables rich link previews when cards and decks are shared on social platforms.

Card Sharing

Share button in lightbox copies OG-tagged URL to clipboard
Azure Function (cardshare) serves HTML with Open Graph + Twitter Card meta tags
Rich previews on Discord, Facebook, Twitter, LinkedIn — card name, description, avatar image
Human redirect — Browsers auto-redirect to /cardforge/?card=xxx

Deck Sharing

Share button in deck viewer copies OG-tagged URL to clipboard
Azure Function (deckshare) serves HTML with deck name, card count, tags, cover image
Human redirect — Browsers auto-redirect to /cardforge/deck.html?deck=xxx

Download as PNG

html2canvas (v1.4.1) for client-side card image export
2× resolution capture of the card front face
Named download — File named after the card (e.g., aria-shadowbane.png)
Spinner feedback while rendering

Theming

3 Themes

Dark — Deep dark background, default experience
Dim — Mid-tone, warmer lifted backgrounds with muted accent (#2D3348 base)
Light — Softened light palette with proper contrast

2 UI Accent Variants

Clean — Subtle page bar with muted borders
Neon — Glowing cyan borders and deeper shadows on page bar

Theme selection via Settings modal with visual preview swatches. CSS variable system (--aura-*, --mood-*, --card-* tokens). Persistent via localStorage.

Settings & Authentication

Settings Modal (4 Tabs)

Themes — Dark/Dim/Light theme picker with visual swatches
Preferences — Startup behavior, welcome screen toggle
Labs — Coming soon features preview
About — Version info, credits

Authentication

Azure AD B2C / CIAM via ambientpixelsid.ciamlogin.com
EasyAuth integration — x-ms-client-principal header parsing
Auth-gated actions — Publish, save to cloud, deck management require sign-in
Admin system — Configurable admin user IDs for gallery moderation
Localhost bypass — Auth checks skipped on localhost for development

UI/UX Features

Welcome intro screen — Feature showcase with "By the Numbers" callout, dismissible, restorable from settings
Page bar — CardForge v2 branding, status pill, UI variant toggle, info/settings buttons
Left rail navigation — Vertical stepper with icon chips, collapsible
Right column — Card preview zone, tools zone, My Cards zone (all collapsible)
Modal system — Custom Modal class with tabbed content, multiple sizes
Notification system — Toast notifications for success/error/info
Confirmation dialogs — Custom styled confirm/cancel dialogs
CSRF protection — Token-based protection for API calls
Keyboard navigation — Arrow keys, Home/End in tab lists, Esc to close lightbox
Responsive design — Desktop, tablet, and mobile layouts

File Structure

Frontend — /cardforge/

index.html — Main app (80KB)
deck.html — Standalone deck viewer (13KB)
devlog.html — This page
css/ — 11 files (~300KB+): cardforge-base, cardforge-card, cardforge-ui-components, cardforge-ui, cardforge-gallery, cardforge-modular, cardforge-forms, cardforge-icons, and more
js/ — 17 files (~400KB+): config, card-forge-editor (168KB), cardforge-forge-actions (105KB), cardforge-lightbox, cardforge-publish, cardforge-modals, ui-utils, and more

Backend — /api/

cardforgepublish/ — Card publishing
cardforgeloadcards/ — Gallery card loading
cardforgedeletecard/ — Card deletion
cardforgesavecards/ — Cloud card save
cardforgetemplate/ — Template loading
cardforgedeckpublish/ — Deck publishing
cardforgedeckload/ — Deck loading
cardforgedeckdelete/ — Deck deletion
cardshare/ — Card OG social share
deckshare/ — Deck OG social share

Roadmap — Labs (Coming Soon)

AI Image Generation

Generate character/scene artwork via AI prompts directly inside CardForge.

AI Assist

Card name, flavor text, archetype, and stat suggestions powered by AI.

Image Filters & Effects

Cinematic filters, color grading, and stylistic effects for card artwork.

Design Grid Overlay

Alignment and spacing guides for precision card layouts.

Auto-Save Engine

Background saving with recovery and safety snapshots.

Version History

Restore previous saved versions of a card.

Advanced Export

Print-ready PDFs, social formats, and layout presets.

Server-Side Card Rendering

Full card image as og:image for richer social media link previews.

Credits

CardForge V2 is built and maintained by Chad Martin (Pixelpusher) at Ambient Pixels.

Powered by Azure Static Web Apps, Azure Functions, Azure Blob Storage, and vanilla JavaScript.

CardForge V2 — Dev Log