Memory Card Scratchpad

Notes for work in progress.

Card templates with placeholder titles and values

Sample wildcard and social card colors from Northway Games

Progress, actually!

2023-11-09, things in hand:

two templates (blue and red) in SVG form

paper.js rendering to canvas including file upload into the page

stubbed out user data entry form with emoji representing memory types, and card value, and card title (none of these are yet used by the page logic)

2023-11-13, with help from Jacob Young: uploaded files are now rendering as Raster objects. Console dumps of the objects are very helpful to inspect.

2023-11-14, a little bit before Moldable Development. Let's try making the canvas the same nominal size as the SVG previews.

2023-11-17, fixed the height x width that I had gotten reversed, made some late progress got me to where PaperJS raster upload is now clipped to a circle, now I need the circle to be behind the card value number. I still don't know what to do about the curved text, since PaperJS does not support *text-path* in an SVG import.

2023-11-20, Monday of Week 4 RC. Open angles for progress: (1) Set the uploaded image at the right z=level for compositing. (2) Scale uploaded image to fit the bounding box. (3) Social (yellow) and Wild (green, blue, pink, purple) card blanks. End of day, good progress after pairing with Plocket, the canvas is looking very close to the model (minus the arc text).

2023-11-21 Tuesday. Open angles: automatic scaling, manual scaling + centering. (currently: in-console scaling).

2023-12-18 Monday, warming up again. Let's start with the yellow template and maybe the wild template.

2023-12-23 Saturday, I now have all four templates in hand.

2023-12-26 Tuesday, I'm able to use a radio button to select and reload each of the card templates, using fetch() and a Promise callback within the Paperscript code. (Paperscript's old-syntax JS parser has been helpful in learning-me-some-callbacks, like them or not).

2023-12-27 Wednesday. Setting up in a RC pairing station. A reminder about text around a curve via Stack Overflow. curve-text-paperjs . Breaking out Memory Card Tasks to allow manipulating them as separate paragraphs.

2023-12-28 Thursday. SVG template mini previews, alt, tooltip niceties; read and apply title text, centered. Wild SVG import and transform fixed.

2024-01-03 Wednesday. Remove superfluous SVG upload widget.

2024-01-08 Monday. Make the SVG template previews into clickable selectors like the radio buttons. Make the radio button follow the selected template.

2024-01-11 Thursday. Demo with upload, auto-zoom. Added "download" link. Prepared a "dist" package.

2024-01-17 Wednesday. Added special rule text. Use HTMLImageElement.decode().then(...) to hook the auto-zoom appropriately on image load.

``` img.decode().then( function(_) { var raster = installCardArt(img.src); scaleRasterToFrame(raster); }); ```

2024-01-23 Tuesday. Cleaned up notes and added sample shapshot here below. ("Recursion" card created using repeated application of "window.art.rotate(45); window.art.scale(0.66);" in the JS console, then save image, reload saved card as new image.

Web UI showing window.art.rotate reapplied