Memory Card Creator

In the computer game I Was A Teenage Exocolonist website by Northway Games, one of the thematic conceits of gameplay is that as the main character encounters important people and decisive or memorable situations, each one becomes a memory represented by a card in the player's challenge deck used in the game.

Everyone has memorable events, encounters, and beings in their life; maybe you'd like to create a memory card for yourself, if you're a fan.

Hand-sketched prototype

Memory Card Example

The memory card creator would take a user-supplied image, a card title, a point value, a color (yellow = social, blue = mental, red = physical, magenta = wild suit), and compose these into a colored template for export.

I have an existing SVG prototype for output, but the project would be making a usable creator where you could bring your image, add a title and value, and compose it into your own personal memory card.

Here's a Memory Card Scratchpad with progress notes. See Memory Card Tasks for further work past the tasks listed below.

Task Breakdown

1. Import of a central image (stub: choose a central image or use a free Lorem Ipsum service): we can just start with File upload into the page. 2. User interaction: text entry, sizing, centering, save-card-as. "Paper.js" can save the canvas as an image via export. 3. Packaging: can this be packaged as a single page? Does it need a server to bake the final result? CORS suggests at least a local server but it needs no server logic -- all the logic lives in the page. 4. Alternative stack: maybe we start 100% raster with a transparent base image and spaces for text. A stack like this could pre-cook the numbers as overlay images from -1 to 99. "paper.js does the vector to raster pretty well" 5. Font resources: can we embed a font into the card creator for the title and the card value? How do we do that? "what I saw looked pretty good but people's browsers may vary"