CCG Studio Prototype

A small, dependency-free prototype for a game-agnostic card set editor. It ships JSON schemas, a minimal CLI for validating/rendering sets, and a static web prototype (card editor + layout editor) that exercises the same data shapes.

What's inside

• Node 20+ project with no runtime deps (package.json only) and a tiny static server in tools/dev-server.js.
• JSON Schemas for games, cards, and sets in schemas/.
• CLI (src/cli.js) that validates sets and renders a simple HTML preview.
• Static web prototypes in web/: a set editor (index.html) and a layout editor (layout-editor.html).
• Sample game/set data in samples/ (generic TCG, simple duel, MTG with atomic data).

Commands

• npm run validate:sample - validate samples/generic-tcg/set.sample.json against the set schema.
• npm run render:sample - render the same sample to dist/sample.html.
• npm run dev:web - start a static server at http://127.0.0.1:5173/web/ for the web prototypes.
• Direct CLI usage: node src/cli.js validate <set.json> or node src/cli.js render <set.json> --out dist/out.html.

Data formats (schemas/)

• game.schema.json - game id/name, layouts (field definitions with labels/kinds), types (with required/default fields and optional layout override).
• card.schema.json - card id/name/layout plus free-form fields, keywords, tags, and optional art metadata.
• set.schema.json - set id/name/gameId, metadata, and an array of cards (each matching the card schema shape).

Samples (samples/)

• generic-tcg - simple cost/type/rules/stats layout with creature/sorcery/instant types.
• simple-duel - minimal fighter layout with power/guard stats.
• mtg - MTGJSON-inspired fields (manaCost, typeLine, rules text, P/T, loyalty, rarity, flavor, artist, etc.), layout HTML/CSS, and derived rules for preview flags.
• MTG atomic registry: samples/mtg/atomic.sample.json (shared card definitions by name).

CLI output

• Validate prints a success line or a list of schema violations.
• Render writes a lightweight HTML grid with card name/type/rules/stats using src/render.js (creates dist/ if missing).

Web prototypes (web/)

• Card/set editor (index.html + app.js):
  • Load sample games/sets, or import your own JSON; download the active set.
  • Manage games/sets, add cards, switch layouts/types, and edit dynamic fields with optional "advanced" toggle.
  • Live preview of the active card; warnings for missing required fields or layout/type mismatches.
  • Type defaults surface as apply/dismiss suggestions; atomic registry shares fields across same-name cards and supports freezing to lock shared fields; freeze a whole set to snapshot atomics.
  • Layout picker updates fields; validation warnings are non-blocking.
• Layout editor (layout-editor.html + layout-editor.js):
  • Load sample games, add/edit layouts, and toggle which fields are visible in the mini preview.
  • Edit HTML/CSS templates with a small mustache-style renderer ({{field}}, {{#if field}}...{{/if}}, {{#if_eq field "x"}}...{{/if_eq}}, {{else}}).
  • Derived rules from the game definition populate computed placeholders (see MTG sample for mana/pt/loyalty helpers).
  • Download the current game definition with updated layouts.

Notes and limitations

• Everything is static JS/HTML; no bundler/build. The dev server only serves files.
• Schemas are intentionally minimal; renderer is a simple HTML preview (no image export or persistence beyond downloads).
• No automated tests or CI are included yet. Verify CLI commands locally after edits.