import React from 'react'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import Header from './components/layout/Header'; import Footer from './components/layout/Footer'; import HomePage from './pages/HomePage'; import GameDesignerPage from './pages/GameDesignerPage'; import GameSimulatorPage from './pages/GameSimulatorPage'; import CardEditorPage from './pages/CardEditorPage'; import './App.css'; function App() { return (

} /> } /> } /> } />

); } export default App; .app { display: flex; flex-direction: column; min-height: 100vh; background-color: #f8f9fa; } .app-content { flex: 1; padding: 20px; max-width: 1200px; margin: 0 auto; width: 100%; } @media (max-width: 768px) { .app-content { padding: 10px; } } import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); :root { --primary-color: #6366f1; --secondary-color: #4f46e5; --accent-color: #8b5cf6; --background-color: #f8f9fa; --card-background: #ffffff; --text-primary: #1f2937; --text-secondary: #4b5563; --border-color: #e5e7eb; } * { box-sizing: border-box; margin: 0; padding: 0; } body { margin: 0; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--text-primary); background-color: var(--background-color); } code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } button { cursor: pointer; font-family: 'Poppins', sans-serif; } a { color: var(--primary-color); text-decoration: none; } a:hover { text-decoration: underline; } import React from 'react'; import { Link } from 'react-router-dom'; import './Header.css'; const Header = () => { return (

TCG Creator Verse

); }; export default Header; .header { background-color: var(--card-background); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); position: sticky; top: 0; z-index: 100; } .header-container { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; max-width: 1200px; margin: 0 auto; } .logo h1 { font-size: 1.5rem; font-weight: 700; color: var(--primary-color); margin: 0; } .nav-links { display: flex; list-style: none; gap: 2rem; } .nav-links a { color: var(--text-secondary); font-weight: 500; transition: color 0.2s ease; } .nav-links a:hover { color: var(--primary-color); text-decoration: none; } @media (max-width: 768px) { .header-container { flex-direction: column; padding: 1rem; } .logo { margin-bottom: 1rem; } .nav-links { gap: 1rem; flex-wrap: wrap; justify-content: center; } } import React from 'react'; import './Footer.css'; const Footer = () => { return ( ); }; export default Footer; .footer { background-color: var(--card-background); border-top: 1px solid var(--border-color); padding: 2rem 0 1rem; margin-top: 2rem; } .footer-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-bottom: 2rem; } .footer-section h3 { color: var(--text-primary); margin-bottom: 1rem; font-size: 1.2rem; } .footer-section p { color: var(--text-secondary); line-height: 1.6; } .footer-section ul { list-style: none; } .footer-section ul li { margin-bottom: 0.5rem; } .footer-section ul li a { color: var(--text-secondary); transition: color 0.2s ease; } .footer-section ul li a:hover { color: var(--primary-color); } .footer-bottom { text-align: center; padding-top: 1rem; border-top: 1px solid var(--border-color); color: var(--text-secondary); font-size: 0.9rem; } @media (max-width: 768px) { .footer-container { padding: 0 1rem; } .footer-content { grid-template-columns: 1fr; gap: 1.5rem; } } import React from 'react'; import { Link } from 'react-router-dom'; import './HomePage.css'; const HomePage = () => { return (

TCG Creator Verse

A modular, developer-friendly platform for designing and simulating fully custom Trading Card Games

Start Creating Try Simulator

Core Features

Declarative Game Logic

Define cards, effects, triggers, and rules using a human-readable syntax that compiles into JSON.

Rule Evaluation Engine

All game logic is interpreted at runtime using json-rules-engine, enabling dynamic condition checking.

boardgame.io-Based Game Loop

Handles turn phases, state transitions, player actions, and multiplayer sync seamlessly.

Component Registry

Reusable mechanics like abilities, effect templates, conditions, and resources are registered and composed declaratively.

Live Simulation Environment

Test, iterate, and simulate games in real time with full visibility into rule triggers and state changes.

Modern Stack

Built with Next.js, TypeScript, Tailwind CSS, and clean modular architecture.

Who It's For

Game Designers

Looking to build new TCGs with no-code tools but rich customization

Developers

Who want to contribute to or extend a modular TCG framework

Indie Studios

Wanting to prototype full games with custom rules, visuals, and mechanics

Toolmakers

Building game editors, rule systems, or creator platforms

Ready to Create Your Own TCG?

Start designing your game mechanics, cards, and rules today.

Get Started

); }; export default HomePage; .home-page { display: flex; flex-direction: column; gap: 4rem; } .hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4rem 1rem; background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); color: white; border-radius: 12px; margin-bottom: 2rem; } .hero-content { max-width: 800px; } .hero h1 { font-size: 3rem; margin-bottom: 1rem; font-weight: 700; } .hero-subtitle { font-size: 1.25rem; margin-bottom: 2rem; opacity: 0.9; line-height: 1.6; } .hero-buttons { display: flex; gap: 1rem; justify-content: center; } .btn { display: inline-block; padding: 0.75rem 1.5rem; border-radius: 6px; font-weight: 600; transition: all 0.3s ease; text-decoration: none; } .btn-primary { background-color: white; color: var(--primary-color); } .btn-primary:hover { background-color: rgba(255, 255, 255, 0.9); transform: translateY(-2px); text-decoration: none; } .btn-secondary { background-color: transparent; border: 2px solid white; color: white; } .btn-secondary:hover { background-color: rgba(255, 255, 255, 0.1); transform: translateY(-2px); text-decoration: none; } .section-title { text-align: center; font-size: 2rem; margin-bottom: 2rem; color: var(--text-primary); } .feature-grid, .audience-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .feature-card, .audience-card { background-color: var(--card-background); padding: 2rem; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; } .feature-card:hover, .audience-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); } .feature-card h3, .audience-card h3 { color: var(--primary-color); margin-bottom: 1rem; font-size: 1.25rem; } .feature-card p, .audience-card p { color: var(--text-secondary); line-height: 1.6; } .cta { text-align: center; padding: 3rem; background-color: var(--card-background); border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); } .cta h2 { font-size: 2rem; margin-bottom: 1rem; color: var(--text-primary); } .cta p { color: var(--text-secondary); margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; } .cta .btn-primary { background-color: var(--primary-color); color: white; } .cta .btn-primary:hover { background-color: var(--secondary-color); } @media (max-width: 768px) { .hero h1 { font-size: 2.5rem; } .hero-subtitle { font-size: 1.1rem; } .hero-buttons { flex-direction: column; width: 100%; max-width: 300px; margin: 0 auto; } .section-title { font-size: 1.75rem; } .cta h2 { font-size: 1.75rem; } } import React, { useState } from 'react'; import './GameDesignerPage.css'; const GameDesignerPage = () => { const [activeTab, setActiveTab] = useState('rules'); return (

Game Designer

Design your TCG by defining rules, cards, and game mechanics using our visual and text-based DSL.

Component Library

Draw Card Effect

Damage Effect

Heal Effect

Counter Condition

Resource Generator

Turn Phase

{activeTab === 'rules' && (

Game Rules

Turn Structure

{`game.turn {
  phases: [
    "draw",
    "main",
    "combat",
    "end"
  ]
  
  phase.draw {
    actions: [
      draw(1)
    ]
    automatic: true
  }
  
  phase.main {
    actions: [
      play_card,
      activate_ability
    ]
    resources.refresh()
  }
}`}

Win Conditions

{`game.win_condition {
  when: player.health <= 0
  result: opponent.wins()
  
  when: player.deck.empty && player.draw()
  result: opponent.wins()
}`}

)} {activeTab === 'cards' && (

Card Templates

Define your card types and templates here.

{/* Card template editor UI would go here */}

Card editor interface coming soon...

)} {activeTab === 'mechanics' && (

Game Mechanics

Define custom mechanics and abilities for your TCG.

{/* Mechanics editor UI would go here */}

Mechanics editor interface coming soon...

)} {activeTab === 'resources' && (

Game Resources

Define resources like mana, energy, or custom currencies.

{/* Resources editor UI would go here */}

Resources editor interface coming soon...

)}

Live Preview

Preview will appear here as you design your game

Validation

✓ Rule syntax is valid

ℹ 3 card templates defined

⚠ No win condition defined

); }; export default GameDesignerPage; .game-designer-page { display: flex; flex-direction: column; gap: 2rem; } .page-title { font-size: 2.5rem; color: var(--text-primary); margin-bottom: 0.5rem; } .page-description { color: var(--text-secondary); max-width: 800px; margin-bottom: 2rem; } .designer-container { display: grid; grid-template-columns: 250px 1fr 300px; gap: 1.5rem; height: calc(100vh - 250px); min-height: 600px; background-color: var(--card-background); border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); overflow: hidden; } /* Sidebar */ .designer-sidebar { background-color: #f1f5f9; border-right: 1px solid var(--border-color); display: flex; flex-direction: column; } .sidebar-tabs { display: flex; flex-direction: column; border-bottom: 1px solid var(--border-color); } .tab-button { padding: 1rem; background: none; border: none; text-align: left; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: background-color 0.2s ease; } .tab-button:hover { background-color: rgba(0, 0, 0, 0.05); } .tab-button.active { background-color: var(--primary-color); color: white; } .component-library { padding: 1rem; flex: 1; overflow-y: auto; } .component-library h3 { margin-bottom: 1rem; font-size: 1rem; color: var(--text-secondary); } .component-list { display: flex; flex-direction: column; gap: 0.5rem; } .component-item { padding: 0.75rem; background-color: white; border: 1px solid var(--border-color); border-radius: 4px; font-size: 0.9rem; cursor: pointer; transition: all 0.2s ease; } .component-item:hover { border-color: var(--primary-color); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } /* Main area */ .designer-main { display: flex; flex-direction: column; overflow: hidden; } .designer-toolbar { display: flex; gap: 0.5rem; padding: 1rem; border-bottom: 1px solid var(--border-color); } .toolbar-button { padding: 0.5rem 1rem; background-color: white; border: 1px solid var(--border-color); border-radius: 4px; font-size: 0.9rem; cursor: pointer; transition: all 0.2s ease; } .toolbar-button:hover { border-color: var(--primary-color); color: var(--primary-color); } .designer-workspace { flex: 1; padding: 1.5rem; overflow-y: auto; } .designer-workspace h2 { margin-bottom: 1rem; color: var(--text-primary); } .editor-section { margin-bottom: 2rem; } .editor-section h3 { margin-bottom: 0.5rem; color: var(--text-secondary); } .dsl-editor { background-color: #1e293b; color: #e2e8f0; padding: 1rem; border-radius: 6px; font-family: 'Courier New', monospace; overflow-x: auto; } .dsl-editor pre { margin: 0; white-space: pre-wrap; } .placeholder-content { padding: 2rem; background-color: #f1f5f9; border-radius: 6px; text-align: center; color: var(--text-secondary); } /* Preview panel */ .designer-preview { background-color: #f1f5f9; border-left: 1px solid var(--border-color); display: flex; flex-direction: column; padding: 1rem; } .designer-preview h3 { margin-bottom: 1rem; font-size: 1rem; color: var(--text-secondary); } .preview-container { flex: 1; background-color: white; border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; margin-bottom: 1rem; } .preview-placeholder { height: 100%; display: flex; align-items: center; justify-content: center; padding: 1rem; text-align: center; color: var(--text-secondary); font-size: 0.9rem; } .validation-panel { background-color: white; border: 1px solid var(--border-color); border-radius: 6px; padding: 1rem; } .validation-panel h4 { margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--text-secondary); } .validation-messages { display: flex; flex-direction: column; gap: 0.5rem; } .validation-message { padding: 0.5rem; border-radius: 4px; font-size: 0.8rem; } .validation-message.success { background-color: rgba(16, 185, 129, 0.1); color: #065f46; } .validation-message.warning { background-color: rgba(245, 158, 11, 0.1); color: #92400e; } .validation-message.error { background-color: rgba(239, 68, 68, 0.1); color: #b91c1c; } .validation-message.info { background-color: rgba(59, 130, 246, 0.1); color: #1e40af; } @media (max-width: 1200px) { .designer-container { grid-template-columns: 200px 1fr; grid-template-rows: 1fr auto; } .designer-preview { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--border-color); } } @media (max-width: 768px) { .designer-container { grid-template-columns: 1fr; height: auto; } .designer-sidebar { border-right: none; border-bottom: 1px solid var(--border-color); } .sidebar-tabs { flex-direction: row; overflow-x: auto; } .component-library { display: none; } } import React, { useState } from 'react'; import './GameSimulatorPage.css'; const GameSimulatorPage = () => { const [gameState, setGameState] = useState({ turn: 1, phase: 'main', activePlayer: 'player1', players: { player1: { health: 20, resources: { mana: 3, maxMana: 3 }, hand: [ { id: 'c1', name: 'Fireball', cost: 2, type: 'spell', description: 'Deal 3 damage to any target.' }, { id: 'c2', name: 'Goblin Warrior', cost: 1, type: 'creature', attack: 2, defense: 1, description: 'None' }, { id: 'c3', name: 'Healing Potion', cost: 1, type: 'spell', description: 'Restore 3 health to your hero.' } ], field: [ { id: 'c4', name: 'Knight Protector', type: 'creature', attack: 2, defense: 3, description: 'Taunt' } ], deck: 25 }, player2: { health: 17, resources: { mana: 3, maxMana: 3 }, hand: 4, // Just showing count for opponent field: [ { id: 'c5', name: 'Wolf Rider', type: 'creature', attack: 3, defense: 1, description: 'Haste' } ], deck: 23 } }, log: [ { id: 1, text: 'Game started', turn: 1 }, { id: 2, text: 'Player 1 drew a card', turn: 1 }, { id: 3, text: 'Player 1 played Knight Protector', turn: 1 }, { id: 4, text: 'Player 2 drew a card', turn: 1 }, { id: 5, text: 'Player 2 played Wolf Rider', turn: 1 }, { id: 6, text: 'Player 2 attacked with Wolf Rider for 3 damage', turn: 1 } ] }); const [selectedCard, setSelectedCard] = useState(null); const [showRuleEvaluation, setShowRuleEvaluation] = useState(false); const handleCardClick = (card) => { setSelectedCard(card); }; const handlePlayCard = () => { if (!selectedCard) return; // Simulate playing a card const updatedGameState = { ...gameState }; const player = updatedGameState.players.player1; // Remove card from hand player.hand = player.hand.filter(card => card.id !== selectedCard.id); // Add to field if it's a creature if (selectedCard.type === 'creature') { player.field.push(selectedCard); } // Reduce mana player.resources.mana -= selectedCard.cost; // Add to log updatedGameState.log.push({ id: updatedGameState.log.length + 1, text: `Player 1 played ${selectedCard.name}`, turn: updatedGameState.turn }); setGameState(updatedGameState); setSelectedCard(null); }; const handleEndTurn = () => { // Simulate ending turn const updatedGameState = { ...gameState }; // Switch active player updatedGameState.activePlayer = updatedGameState.activePlayer === 'player1' ? 'player2' : 'player1'; // If it's now player 1's turn, increment turn counter if (updatedGameState.activePlayer === 'player1') { updatedGameState.turn += 1; } // Reset phase updatedGameState.phase = 'main'; // Refresh resources const activePlayer = updatedGameState.players[updatedGameState.activePlayer]; activePlayer.resources.mana = activePlayer.resources.maxMana; // Add to log updatedGameState.log.push({ id: updatedGameState.log.length + 1, text: `${updatedGameState.activePlayer === 'player1' ? 'Player 2' : 'Player 1'} ended their turn`, turn: updatedGameState.turn }); setGameState(updatedGameState); }; return (

Game Simulator

Test and simulate your TCG in real-time with full visibility into rule triggers, state changes, and UI responses.

Player 2

Health: {gameState.players.player2.health}

Mana: {gameState.players.player2.resources.mana}/{gameState.players.player2.resources.maxMana}

{gameState.players.player2.deck}

Cards in hand: {gameState.players.player2.hand}

{gameState.players.player2.field.map(card => (

{card.name}

{card.type}

{card.type === 'creature' && (

{card.attack}/{card.defense}

)}

))}

Turn: {gameState.turn}

Phase: {gameState.phase}

Active Player: {gameState.activePlayer === 'player1' ? 'You' : 'Opponent'}

{gameState.players.player1.field.map(card => (

handleCardClick(card)} >

{card.name}

{card.type}

{card.type === 'creature' && (

{card.attack}/{card.defense}

)}

))}

{gameState.players.player1.hand.map(card => (

handleCardClick(card)} >

{card.cost}

{card.name}

{card.type}

{card.description}

{card.type === 'creature' && (

{card.attack}/{card.defense}

)}

))}

You (Player 1)

Health: {gameState.players.player1.health}

Mana: {gameState.players.player1.resources.mana}/{gameState.players.player1.resources.maxMana}

{gameState.players.player1.deck}

Game Log

{gameState.log.map(entry => (

Turn {entry.turn}: {entry.text}

)).reverse()}

Debug Tools

{showRuleEvaluation && (

Rule Evaluation

Card Play Validation

player.resources.mana >= card.cost

Condition met: 3 >= 2 (for Fireball)

Combat Phase Check

game.phase === 'combat'

Condition not met: 'main' !== 'combat'

)}

{selectedCard ? ( <>

Selected Card

{JSON.stringify(selectedCard, null, 2)}

) : (

No card selected

)}

); }; export default GameSimulatorPage; .game-simulator-page { display: flex; flex-direction: column; gap: 2rem; } .page-title { font-size: 2.5rem; color: var(--text-primary); margin-bottom: 0.5rem; } .page-description { color: var(--text-secondary); max-width: 800px; margin-bottom: 2rem; } .simulator-container { display: grid; grid-template-columns: 1fr 350px; gap: 1.5rem; background-color: var(--card-background); border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); overflow: hidden; } /* Game Board */ .game-board { display: flex; flex-direction: column; padding: 1.5rem; background-color: #f1f5f9; min-height: 600px; } .opponent-area, .player-area { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; background-color: rgba(255, 255, 255, 0.5); border-radius: 8px; } .game-info { display: flex; justify-content: center; align-items: center; padding: 1rem; margin: 1rem 0; background-color: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .turn-info { display: flex; gap: 2rem; font-weight: 500; } .player-info { display: flex; align-items: center; gap: 1.5rem; } .player-name { font-weight: 600; color: var(--text-primary); } .player-health { color: #ef4444; font-weight: 500; } .player-resources { color: #3b82f6; font-weight: 500; } .player-deck { display: flex; align-items: center; justify-content: center; } .deck-count { background-color: #1e293b; color: white; width: 40px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-weight: 600; } .player-hand, .player-field { display: flex; gap: 0.75rem; min-height: 100px; padding: 0.5rem; background-color: rgba(255, 255, 255, 0.7); border-radius: 6px; overflow-x: auto; } .hand-count { color: var(--text-secondary); font-style: italic; } .card { width: 80px; height: 120px; background-color: white; border: 1px solid var(--border-color); border-radius: 6px; padding: 0.5rem; font-size: 0.8rem; display: flex; flex-direction: column; cursor: pointer; transition: all 0.2s ease; position: relative; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .card:hover { transform: translateY(-5px); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); } .card.selected { border: 2px solid var(--primary-color); box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3); } .opponent-card { background-color: #f8fafc; } .card-cost { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; background-color: #3b82f6; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; } .card-name { font-weight: 600; margin-bottom: 0.25rem; font-size: 0.9rem; } .card-type { color: var(--text-secondary); font-size: 0.7rem; font-style: italic; margin-bottom: 0.25rem; } .card-description { font-size: 0.7rem; flex: 1; overflow: hidden; } .card-stats { position: absolute; bottom: 5px; right: 5px; font-weight: 600; color: #ef4444; } /* Game Controls */ .game-controls { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border-left: 1px solid var(--border-color); } .action-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .action-button { padding: 0.75rem; background-color: #f1f5f9; border: 1px solid var(--border-color); border-radius: 6px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .action-button:hover:not(:disabled) { background-color: var(--primary-color); color: white; border-color: var(--primary-color); } .action-button:disabled { opacity: 0.5; cursor: not-allowed; } .end-turn { grid-column: span 2; background-color: #4f46e5; color: white; border-color: #4338ca; } .end-turn:hover { background-color: #4338ca; } .game-log { background-color: #f8fafc; border: 1px solid var(--border-color); border-radius: 6px; padding: 1rem; height: 200px; overflow-y: auto; } .game-log h3 { margin-bottom: 0.75rem; font-size: 1rem; color: var(--text-primary); } .log-entries { display: flex; flex-direction: column; gap: 0.5rem; } .log-entry { font-size: 0.85rem; color: var(--text-secondary); } .log-turn { font-weight: 600; color: var(--primary-color); } .debug-panel { background-color: #f8fafc; border: 1px solid var(--border-color); border-radius: 6px; padding: 1rem; flex: 1; overflow-y: auto; } .debug-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .debug-header h3 { font-size: 1rem; color: var(--text-primary); } .toggle-button { background: none; border: none; color: var(--primary-color); font-size: 0.85rem; cursor: pointer; } .toggle-button:hover { text-decoration: underline; } .rule-evaluation { margin-bottom: 1.5rem; } .rule-evaluation h4 { margin-bottom: 0.75rem; font-size: 0.9rem; color: var(--text-primary); } .rule-entries { display: flex; flex-direction: column; gap: 0.75rem; } .rule-entry { background-color: white; border: 1px solid var(--border-color); border-radius: 4px; padding: 0.75rem; font-size: 0.85rem; } .rule-name { font-weight: 600; margin-bottom: 0.5rem; } .rule-condition { margin-bottom: 0.5rem; padding: 0.5rem; background-color: #f1f5f9; border-radius: 4px; } .rule-result { padding: 0.5rem; border-radius: 4px; } .rule-result.success { background-color: rgba(16, 185, 129, 0.1); color: #065f46; } .rule-result.failure { background-color: rgba(239, 68, 68, 0.1); color: #b91c1c; } .selected-card-info { margin-top: 1.5rem; } .selected-card-info h4 { margin-bottom: 0.75rem; font-size: 0.9rem; color: var(--text-primary); } .card-json { background-color: #1e293b; color: #e2e8f0; padding: 1rem; border-radius: 6px; font-family: 'Courier New', monospace; font-size: 0.8rem; overflow-x: auto; } .card-json pre { margin: 0; } @media (max-width: 1100px) { .simulator-container { grid-template-columns: 1fr; } .game-controls { border-left: none; border-top: 1px solid var(--border-color); } } @media (max-width: 768px) { .turn-info { flex-direction: column; gap: 0.5rem; } .player-info { flex-direction: column; align-items: flex-start; gap: 0.5rem; } } import React, { useState } from 'react'; import './CardEditorPage.css'; const CardEditorPage = () => { const [card, setCard] = useState({ name: 'Mystic Dragon', cost: 5, type: 'creature', subtype: 'dragon', rarity: 'rare', attack: 4, defense: 4, description: 'Flying\nWhen this enters the battlefield, draw a card.', effects: [ { trigger: 'on_enter', action: 'draw_card', target: 'controller', value: 1 }, { trigger: 'on_attack', action: 'deal_damage', target: 'opponent', value: 4 } ], keywords: ['flying'], imageUrl: '', artist: 'Artist Name' }); const [activeTab, setActiveTab] = useState('visual'); const [previewMode, setPreviewMode] = useState('card'); const handleInputChange = (e) => { const { name, value } = e.target; setCard({ ...card, [name]: value }); }; const handleNumberChange = (e) => { const { name, value } = e.target; setCard({ ...card, [name]: parseInt(value) || 0 }); }; const handleEffectChange = (index, field, value) => { const updatedEffects = [...card.effects]; updatedEffects[index] = { ...updatedEffects[index], [field]: value }; setCard({ ...card, effects: updatedEffects }); }; const addEffect = () => { setCard({ ...card, effects: [ ...card.effects, { trigger: 'on_enter', action: 'none', target: 'none', value: 0 } ] }); }; const removeEffect = (index) => { const updatedEffects = [...card.effects]; updatedEffects.splice(index, 1); setCard({ ...card, effects: updatedEffects }); }; const handleKeywordToggle = (keyword) => { const keywords = [...card.keywords]; const index = keywords.indexOf(keyword); if (index === -1) { keywords.push(keyword); } else { keywords.splice(index, 1); } setCard({ ...card, keywords }); }; const getCardJson = () => { return JSON.stringify(card, null, 2); }; const getCardDsl = () => { return `card "${card.name}" { cost: ${card.cost} type: ${card.type} subtype: "${card.subtype}" rarity: ${card.rarity} ${card.type === 'creature' ? `stats { attack: ${card.attack} defense: ${card.defense} }` : ''} description: """ ${card.description} """ keywords: [${card.keywords.map(k => `"${k}"`).join(', ')}] effects { ${card.effects.map(effect => `${effect.trigger} { action: ${effect.action} target: ${effect.target} value: ${effect.value} }`).join('\n ')} } }`; }; return (

Card Editor

Create and edit cards for your TCG with our visual editor or using the DSL syntax.

{activeTab === 'visual' && (

Basic Information

Card Name

Cost

Type

Subtype

Rarity

{card.type === 'creature' && (

Attack

Defense

)}

Card Text

Description

Keywords

handleKeywordToggle('flying')} > Flying

handleKeywordToggle('first_strike')} > First Strike

handleKeywordToggle('taunt')} > Taunt

handleKeywordToggle('haste')} > Haste

handleKeywordToggle('lifesteal')} > Lifesteal

Effects

{card.effects.map((effect, index) => (

Effect {index + 1}

Trigger

Action

Target

Value handleEffectChange(index, 'value', parseInt(e.target.value) || 0)} min="0" />

))}

Appearance

Image URL

Artist

)} {activeTab === 'code' && (

                  {previewMode === 'dsl' ? getCardDsl() : getCardJson()}

)}

Card Preview

{card.name}

{card.cost}

{card.imageUrl ? ( {card.name}

) : (

No Image

)}

{card.type.charAt(0).toUpperCase() + card.type.slice(1)} {card.subtype && ` - ${card.subtype.charAt(0).toUpperCase() + card.subtype.slice(1)}`}

{card.keywords.length > 0 && (

{card.keywords.map(keyword => keyword.charAt(0).toUpperCase() + keyword.slice(1).replace('_', ' ') ).join(', ')}

)}

{card.description.split('\n').map((line, i) => (

{line}

))}

{card.type === 'creature' && (

{card.attack}/{card.defense}

)}

{card.rarity.charAt(0).toUpperCase() + card.rarity.slice(1)}

Art by: {card.artist}

); }; export default CardEditorPage; .card-editor-page { display: flex; flex-direction: column; gap: 2rem; } .page-title { font-size: 2.5rem; color: var(--text-primary); margin-bottom: 0.5rem; } .page-description { color: var(--text-secondary); max-width: 800px; margin-bottom: 2rem; } .editor-container { display: grid; grid-template-columns: 1fr 350px; gap: 1.5rem; background-color: var(--card-background); border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); overflow: hidden; } .editor-tabs { display: flex; border-bottom: 1px solid var(--border-color); } .editor-tab { padding: 1rem 1.5rem; background: none; border: none; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: all 0.2s ease; } .editor-tab:hover { color: var(--primary-color); } .editor-tab.active { color: var(--primary-color); border-bottom: 2px solid var(--primary-color); } .editor-content { padding: 1.5rem; overflow-y: auto; max-height: 800px; } /* Visual Editor */ .visual-editor { display: flex; flex-direction: column; gap: 2rem; } .form-section { display: flex; flex-direction: column; gap: 1rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); } .form-section:last-child { border-bottom: none; } .form-section h3 { font-size: 1.1rem; color: var(--text-primary); margin-bottom: 0.5rem; } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .add-button { background-color: var(--primary-color); color: white; border: none; border-radius: 4px; padding: 0.5rem 1rem; font-size: 0.9rem; cursor: pointer; transition: background-color 0.2s ease; } .add-button:hover { background-color: var(--secondary-color); } .form-row { display: flex; gap: 1rem; flex-wrap: wrap; } .form-group { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; min-width: 200px; } .form-group label { font-size: 0.9rem; color: var(--text-secondary); font-weight: 500; } .form-group input, .form-group select, .form-group textarea { padding: 0.75rem; border: 1px solid var(--border-color); border-radius: 4px; font-family: inherit; font-size: 0.95rem; transition: border-color 0.2s ease; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary-color); outline: none; } .form-group textarea { resize: vertical; min-height: 100px; } .keywords-container { display: flex; flex-wrap: wrap; gap: 0.5rem; } .keyword-tag { padding: 0.5rem 1rem; background-color: #f1f5f9; border-radius: 4px; font-size: 0.9rem; cursor: pointer; transition: all 0.2s ease; } .keyword-tag:hover { background-color: #e2e8f0; } .keyword-tag.active { background-color: var(--primary-color); color: white; } .effect-container { background-color: #f8fafc; border: 1px solid var(--border-color); border-radius: 6px; padding: 1rem; margin-bottom: 1rem; } .effect-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .effect-header h4 { font-size: 1rem; color: var(--text-primary); margin: 0; } .remove-button { background: none; border: none; color: #ef4444; font-size: 0.9rem; cursor: pointer; } .remove-button:hover { text-decoration: underline; } /* Code Editor */ .code-editor { display: flex; flex-direction: column; height: 100%; } .code-tabs { display: flex; margin-bottom: 1rem; } .code-tab { padding: 0.5rem 1rem; background: none; border: 1px solid var(--border-color); font-size: 0.9rem; cursor: pointer; transition: all 0.2s ease; } .code-tab:first-child { border-radius: 4px 0 0 4px; } .code-tab:last-child { border-radius: 0 4px 4px 0; } .code-tab.active { background-color: var(--primary-color); color: white; border-color: var(--primary-color); } .code-content { flex: 1; background-color: #1e293b; border-radius: 6px; overflow: hidden; } .code-display { margin: 0; padding: 1rem; color: #e2e8f0; font-family: 'Courier New', monospace; font-size: 0.9rem; white-space: pre-wrap; height: 100%; overflow-y: auto; } /* Card Preview */ .card-preview { padding: 1.5rem; border-left: 1px solid var(--border-color); display: flex; flex-direction: column; align-items: center; } .card-preview h3 { font-size: 1.1rem; color: var(--text-primary); margin-bottom: 1.5rem; align-self: flex-start; } .preview-card { width: 280px; height: 400px; background-color: white; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); overflow: hidden; display: flex; flex-direction: column; margin-bottom: 1.5rem; }