- custom_cards migration + CRUD API with catalog twin sync so designs appear in My Cards, lists, and decks via normal card joins - artwork upload to MinIO under card-art/ - /designer page: form-driven live preview, 4 starter frames, PNG export - /my-designs gallery with edit/delete - Designer nav entry in sidebar + mobile drawer
86 lines
2.1 KiB
JavaScript
86 lines
2.1 KiB
JavaScript
/**
|
|
* Starter frame definitions for the card designer.
|
|
* Colors are concrete values (no CSS vars) so the rendered frame
|
|
* rasterizes faithfully during PNG export.
|
|
*/
|
|
export const FRAMES = [
|
|
{
|
|
id: 'classic',
|
|
name: 'Ember Classic',
|
|
description: 'Warm creature frame with gold trim',
|
|
palette: {
|
|
outer: '#2b1d12',
|
|
border: '#c9a227',
|
|
titleBar: '#513a20',
|
|
typeBar: '#5d4426',
|
|
textBox: '#e8dcc3',
|
|
artBacking: '#1a1108',
|
|
text: '#241a0e',
|
|
titleText: '#f5ead1',
|
|
accent: '#c9a227',
|
|
},
|
|
},
|
|
{
|
|
id: 'sorcery',
|
|
name: 'Azure Sorcery',
|
|
description: 'Cool spell frame with arcane blue',
|
|
palette: {
|
|
outer: '#101b2b',
|
|
border: '#6ea8dc',
|
|
titleBar: '#1d3a57',
|
|
typeBar: '#24466a',
|
|
textBox: '#dfe9f4',
|
|
artBacking: '#0a1220',
|
|
text: '#152232',
|
|
titleText: '#e3eefb',
|
|
accent: '#6ea8dc',
|
|
},
|
|
},
|
|
{
|
|
id: 'verdant',
|
|
name: 'Verdant Wilds',
|
|
description: 'Nature frame with deep green growth',
|
|
palette: {
|
|
outer: '#14210f',
|
|
border: '#8fbc6f',
|
|
titleBar: '#2c4420',
|
|
typeBar: '#36512a',
|
|
textBox: '#e4ecd8',
|
|
artBacking: '#0c1408',
|
|
text: '#1c2913',
|
|
titleText: '#eaf3de',
|
|
accent: '#8fbc6f',
|
|
},
|
|
},
|
|
{
|
|
id: 'void',
|
|
name: 'Void Artifact',
|
|
description: 'Neutral dark frame for anything',
|
|
palette: {
|
|
outer: '#17161a',
|
|
border: '#9d93b8',
|
|
titleBar: '#2e2b36',
|
|
typeBar: '#383442',
|
|
textBox: '#e6e3ee',
|
|
artBacking: '#0e0d11',
|
|
text: '#211f27',
|
|
titleText: '#ece9f4',
|
|
accent: '#9d93b8',
|
|
},
|
|
},
|
|
];
|
|
|
|
export const RARITIES = [
|
|
{ id: 'common', name: 'Common', color: '#9ca3af' },
|
|
{ id: 'uncommon', name: 'Uncommon', color: '#a8b6c8' },
|
|
{ id: 'rare', name: 'Rare', color: '#d4af37' },
|
|
{ id: 'mythic', name: 'Mythic', color: '#e0662f' },
|
|
];
|
|
|
|
export function getFrame(frameId) {
|
|
return FRAMES.find((f) => f.id === frameId) || FRAMES[0];
|
|
}
|
|
|
|
export function getRarity(rarityId) {
|
|
return RARITIES.find((r) => r.id === rarityId) || RARITIES[0];
|
|
}
|