Commit graph

5 commits

Author SHA1 Message Date
347419aee8 Add SVG/PNG picker when editing pet appearances
I've known there are bugs in the SVGs pretty often, because they're not
very well attended-to—I noticed pretty quick that the Marble Eyrie, for
example, has its Body asset saved correctly in PNG, but its SVG is just
another copy of the head, oops!

I think SVG is still a nice default for this UI, but I added a little
form to switch to PNG, to give us a debugging method and escape hatch
if it starts to get weird.
2024-12-07 12:16:52 -08:00
addf2d6cc5 Use SVG for the magnified outfit viewer when editing pet appearance 2024-12-07 11:45:01 -08:00
b2a23b3e7b Add magnification when editing pet appearance
I couldn't find a library for this functionality that didn't require
jQuery, and I don't want to be adding *more* jQuery requirements. So, I
decided to throw together my own!

The `<magic-magnifier>` component copies its contents into a "lens"
element, then uses basic JS to track mouse position, then uses CSS to
move the lens and its contents into a helpful position.

One thing I noticed here is that the zoom is a bit crunchy because
we're using PNG images, and it's hard to zoom in even further than we
already are. I might try switching this UI to use the SVG images by
default instead?
2024-12-07 11:39:37 -08:00
b3f3b39aa0 Add helpful layer interactions on pet appearance edit page
When you hover the row for a layer in the table, it highlights the
corresponding layer in the outfit viewer. And when you click anywhere
in the row, it opens the first link (usually the PNG image).
2024-12-07 10:41:52 -08:00
d92e3288ab Add layers table to pet appearance edit page
Gonna add some more functionality here too, but right now we at least
have this!
2024-12-07 09:58:24 -08:00