Another improvement would be tap targets. It is really hard to click the right element when things overlap, because the object box is used rather than it's box with transparency. Maybe use transparency for click events (simple html/css IIRC) if item area is above some threshold. Would also be useful to add a black shading with animation on item hover, although less useful on mobile.
That could lead to having to select an item before being able to move it. Currently, it is fairly difficult to drag left/right on the 2x width without accidentally moving an item during edit.
So, I'm thinking on the original topic, and I think this may be the wrong way to approach it. Instead, why not do the following:
If a tree reaching maturity, automatically unhook the schedule, and send the user an inbox message letting them know.
What do you think?
As to the tap target thing - I'm afraid I'm not quite sure I know what you mean about box with(out) transparency - if you have a chance to screenshot and draw on it, that would help.
Completely happy with auto-unhook. I could see some people wanting to continue beyond to max them, but you could just disallow it since it doesn't match the main intent. Alternatively, you could auto unhook at exactly 50, but let them add it back.
Here is a tap target example. This applies to all garden items. Any click in this box (except a little overlap with 2 bottom trees) focuses the Cedar, even if hovering over the Sakura or Pine (making the pine nearly impossible to click, considering other adjacent items). I believe JS / CSS has a way to allow click events only on hover of actual non-transparent image parts, which would basically fix the problem.
You could use this technique for any easy-to-focus (large) object, so that most items become more easily clickable. On hover, you could then also apply a slight grey mask / filter, to show focus.
This looks like the way to make it happen. It requires the images to be an svg though. I assume you have the original assets somewhere and could convert them. May be worth trying with 1 or 2 first to see how it goes.
As a bonus, converting everything to Svg should significantly reduce garden load times and page size. Can sometimes take ~10 seconds for all assets to load on a slow network. Could push further and do it to most site assets.
As I mentioned before, if it does work, you'd probably still want tiny garden items to keep a minimum target size.
A lot of the artwork is not conducive to svg - I did some testing on it way back when I first got started - I, at least, could not find anything that came even close to looking as good as the pngs.
While it can take time to load them up, they are (for 99% of users) coming across as webp, and since everything is cached, the download is a one-time thing.
But, if anyone thinks they can take the most complex items in the kao garden and can find a converter that works well and doesn't butcher the transparency, I would be *very* interested - it would save a lot of steps in the system (resizing, checking for device pixel ratios, etc.)
You'd need the original files to convert to svg, assuming you used Photoshop or another lossless tool. There shouldn't be a change in quality since svg is lossless, and web renderers have improved a lot over the years.
We use Procreate on the ipad, which cannot save out to svg. It can save out to psd, but resaving the hundreds of images, cropping, etc, then passing them through something else is not going to work. I do have full sized pngs of everything, so if I can pass those into something, great!
