# Forgotten Runes Sticker Sheet

## Goal:

A website where you can generate Forgotten Runes sticker sheets suitable for printing at Sticker Mule.


## Proof of Concept

You can generate outlines using ImageMagick commands.

> See the appendix below for full process


## Architecture

* A (new?) backend Node.js API hosted on Heroku
* A frontend UI build into `forgotten-runes-website`

## Backend API

The commands use ImageMagick. ImageMagick is powerful but it requires binary dependencies that are a pain to install.

The reason we want this to be a new Node.js app is that we don't want to install ImageMagick in any of our other services (because it's a pain).

But we do a lot of image manipulation in the Cult, so having a new API service that we use for IM operations will be useful in the future.

The first endpoint will take 8 identifiers and put them in a sticker sheet like the image above.

### Identifiers

The identifiers are like:

* `wizard:1`
* `soul:4`
* `warrior:5`
* `pony:8`
* `wizard:2:riding:pony:8`

Riding is the tricky one, know that ponies aren't the only thing they will be riding.

### Fetching Images

We already have these images exposed via API via the quantum portal.

> TODO dig up where to find the images for better instructions

### ImageMagick

Installing ImageMagick on heroku is a thing so google it and figure out the buildpack that has IM and node.js

Create an API endpoint that makes a basic call using a node.js library.

### Node.js IM library

Pick one that doesn't have too much magic. It might even be easier to just shell out, tbh, because we want to be unlimited in the options we call.

Google the different options and pick one that lets you use the underlying library easily.

### Generating the Image

- Load the logo
- Load the individual images
- Generate the outline image (see below)

### Photoshop Files for StickerMule

Stickermule wants a photoshop file. Look up how to create a photoshop file that matches.

[Download their template](https://www.stickermule.com/template/sticker-sheets). Can we open it and insert our images generated above?

## Frontend UI

Look at the Lockscreen UI for a wizard picker.

Modes of wizard selection:

- randomize
- my tokens (connect wallet)
- manual override

I imagine it's two columns, like the lockscreen generator. Left column is the configuration and right column is the output.

## Outline Generation

`INPUT=tmp/sticker/0-in.png`


### create the pure shape

convert $INPUT -threshold 50 tmp/sticker/1-threshold.png


### flatten onto a background

convert tmp/sticker/1-threshold.png -background black -flatten -alpha off tmp/sticker/2-background.png


### blur this to get fuzzy

convert tmp/sticker/2-background.png -blur 0x12 tmp/sticker/3-blur.png


### give us the broad inner shape

convert tmp/sticker/3-blur.png -threshold 3% tmp/sticker/4-blur-threshold.png


### outline the broad shape

convert tmp/sticker/4-blur-threshold.png -morphology Edge Octagon tmp/sticker/5-outline.png


### composite to see the fit

convert $INPUT tmp/sticker/5-outline.png -compose screen -composite tmp/sticker/6-composed.png