RE: 🎮 Steemit City: Some Graphics
The graphic tasks are always the biggest challenge for me too.
probably caused by the 150% line height CSS.
Yes, if I set the line height to 0 %, it looks as it should.
The most obvious way is generate all possible cards and upload to steemitimages. It depends on the number of characters. Or did you want to generate such a card for each player?
I don't know if it is really possible, but with svg-images you can create path oriented images (like the steemit-logo in the upper left corner). Maybe you can draw the background, the labels and the values separately and merge them for the user before uploading...
You can also try to split the cards vertically. There is no (left/right) margin between the images in CSS:
The top image is yours and the bottom image is your image divided in two separate images - Strangely, the images are now displayed without (top/bottom) spacing.
The challenge is then to position the values in such a way that they can be cut off vertically from the rest and it does not become asymmetrical... tricky...
I think that for the 4 attributes, assuming a single colour and single image above, I'm looking at about 20,000 images (because the attributes have an element of randomness that means the zombies you face are different each time) - I wasn't optimistic about the 80+ images per colour so definitely need to find an efficient way to generate them.
I'm confident that I can manipulate the images using PHP (I've done similar before) but the difficulty I'm seeing at the moment is how to upload them to steemimages.com for hosting. I've only ever saved images on the server that I've generated them on before - remlaps shared a Java library with me but my Java's worst than my German... nicht so gut.
You've given me a few ideas to work with. I've had a thought about how I can redesign the cards vertically like you suggest without ruining the design too much (although I'm fearful of "line-wrapping").
First though, I'm going to spend some time investigating why there's no gap between the images you've uploaded. I suspect it's because they're tall enough to exceed the 150% line height so the solution might be as simple as a "minimum height" for each image.
I think that the minimum height, slightly taller than the bottom image is the answer!
Definitely too much to upload each one....
The upload must be signed. I once saw the code for this in the condenser code, but only at react level.
I don't know exactly whether it also works with the Steem-JS library (https://github.com/steemit/steem-js).
Maybe this will help you: https://developers.steem.io/services/imageHoster
Among other things, the upload process is described there.
Alternatively, you could of course use your own image hoster. There was a repository for this from steemit, but it is no longer available...