There are a good number of tools for creating custom MTG cards, a few of them open source. But so far there haven't been any self-contained, composable packages. There are 3 main modules to the package, a parser with associated relevant interfaces, the rendering engine itself, and a React component for displaying rendered cards.
For the parser I was inspired by the lightweight text format that scryfall uses, like[1]
Crucible's text format [2] is a superset that allows specifying "non-functional" parts of the card, like flavortext, rarity, art, etc. The text format gets parsed into a structured CardData interface. One challenge was accomodating different structured abilites for different card types, like Planeswalkers, Sagas, etc. which I solved using TypeScript discriminated unions. This gives a fair amount of flexibility for consumers since if you are building a UI, you can use the structured ability interfaces, or you can use the raw string interface for abilities.
The rendering engine uses the Canvas API to compose the various visual elements. Implementing the rendering engine made me a lot more aware of card formatting details. For example hybrid frames vs. gold frames, accent colors, legend crowns, snow & nyx borders, information in the footer. There are a number of styling rule edge cases that had to be solved (a 2-color artifact uses those 2 colors in the accent, but gold for the type, name, and power/toughness boxes. But if the 2-colors are from hybrid mana, the accent is the same, but the name line uses the standard artifact color for the boxes).
This package also solves the problem of reinventing the wheel when displaying cards in a browser. It provides a React component which provides invisible text to make the cards ctrl+f-able, a context menu for copying the image or text of the card, and rotations for dual-faced cards.
This project had a lot of scope creep. MTG cards come in a variety of layouts, but it is heavily skewed towards "normal" (covering about 99% of cards) [3]. I had an MVP for rendering standard (or normal) framed cards in about a day. But I figured I should support all the primary card types, so I implemented support for Planeswalkers and Battles (about .1% and .01% respectively). Since Battles are dual-faced, I figured I might as well support transform cards and modal dual-faced. Then the Prepare mechanic came out in Secrets of Strixhaven so I should support that as well. In then end I supported just about every card layout, including split, flip, omen, adventure, aftermath, prototype, leveler. This greatly complicated the parser, rendering engine, and react component, but I am happy with how comprehensive the package is.
> What actually happened here was that [...] two water hookups at a data center construction site weren't properly registered or linked to a billable account. When the utility noticed the problem, they sent the data center a retroactive bill for all the water, for $147,474 covering ~29M gallons. The data center paid it.
> Did the data center cause the low water pressure? The article very strongly implies a connection, but doesn't give the reader the right numbers to judge whether this actually happened. To figure this out, we need to know over what time the 30 million gallons was drawn [...] That's about 1% of the county's daily water output. There are a ton of ways a water system like this can experience low water pressure, and a 1% dip just isn't one of them.
> [...] the complaint about low water pressure [which led to discovering the billing problem] was coming from a private well that the data center didn't even draw from
I recently made a game pretty much just like this. It's like a game of Drawful mixed with telephone so you can see how the image changes through cycles of AI drawing and human interpretation.
In 2007 a conservative SCOTUS majority upheld a federal ban on partial-birth abortion [0]. Thomas wrote a concurring opinion where he explicitly glossed over whether congress actually had that authority under the commerce clause. Normally he jumps at any chance to say congress has exceeded their authority under that clause. I wouldn't find it hard to believe if this court upholds a more general federal abortion ban
Storing secret keys as QR codes is an interesting application as well. I remember reading on here about a CEO who printed out a database encryption key as a base64 string and then couldn't type it in correctly when it was needed to restore backups. A machine-readable format definitely seems the way to go.
I really liked the message of each generation of programming considers the next "not real programming". It makes me reconsider the pushback against node-esque micro-packages: http://www.haneycodes.net/npm-left-pad-have-we-forgotten-how.... Maybe this is just the next logical evolution of programming.
For the parser I was inspired by the lightweight text format that scryfall uses, like[1]
Crucible's text format [2] is a superset that allows specifying "non-functional" parts of the card, like flavortext, rarity, art, etc. The text format gets parsed into a structured CardData interface. One challenge was accomodating different structured abilites for different card types, like Planeswalkers, Sagas, etc. which I solved using TypeScript discriminated unions. This gives a fair amount of flexibility for consumers since if you are building a UI, you can use the structured ability interfaces, or you can use the raw string interface for abilities.
The rendering engine uses the Canvas API to compose the various visual elements. Implementing the rendering engine made me a lot more aware of card formatting details. For example hybrid frames vs. gold frames, accent colors, legend crowns, snow & nyx borders, information in the footer. There are a number of styling rule edge cases that had to be solved (a 2-color artifact uses those 2 colors in the accent, but gold for the type, name, and power/toughness boxes. But if the 2-colors are from hybrid mana, the accent is the same, but the name line uses the standard artifact color for the boxes).
This package also solves the problem of reinventing the wheel when displaying cards in a browser. It provides a React component which provides invisible text to make the cards ctrl+f-able, a context menu for copying the image or text of the card, and rotations for dual-faced cards.
This project had a lot of scope creep. MTG cards come in a variety of layouts, but it is heavily skewed towards "normal" (covering about 99% of cards) [3]. I had an MVP for rendering standard (or normal) framed cards in about a day. But I figured I should support all the primary card types, so I implemented support for Planeswalkers and Battles (about .1% and .01% respectively). Since Battles are dual-faced, I figured I might as well support transform cards and modal dual-faced. Then the Prepare mechanic came out in Secrets of Strixhaven so I should support that as well. In then end I supported just about every card layout, including split, flip, omen, adventure, aftermath, prototype, leveler. This greatly complicated the parser, rendering engine, and react component, but I am happy with how comprehensive the package is.
I've used this package for three projects so far (not including the playground page https://domainellipticlanguage.com/project/mtg-crucible-play...):
thismagiccarddoesnotexist.com [4] - a site for generating cards with AI
obsidian-custom-mtg [5] - an Obsidian plugin for making custom cards in markdown using a variant of the Scryfall spoiler text format
command-tower-mcp [6] - an MCP server for managing decks and custom cards on Archidekt.
If you build anything, I would love to know. Open a PR on the GitHub repo to give yourself a shoutout in the README https://github.com/domainellipticlanguage/mtg-crucible#in-th...
[1] https://api.scryfall.com/cards/73542493-cd0b-4bb7-a5b8-8f889...
[2] https://github.com/domainellipticlanguage/mtg-crucible#text-...
[3] https://scryfall.com/search?q=layout%3Anormal
[4] https://thismagiccarddoesnotexist.com/
[5] https://github.com/domainellipticlanguage/obsidian-custom-mt...
[6] https://github.com/domainellipticlanguage/command-tower-mcp