Commit graph

116 commits

Author SHA1 Message Date
274a4f716f add zones to user items page
idk the labels section was feeling empty, and I didn't see a way to streamline it more, so I figured, add info that might be useful! lol
2020-10-23 23:29:54 -07:00
456a098df9 replace /api/assetProxy with a CDN proxy
When we decided to start out with /api/assetProxy, we didn't know how much the load would be in practice, so we just went ahead and tried it! Turns out, it was too high, and Vercel shut down our deployment 😅

Now, we've off-loaded this to a Fastly CDN proxy, which should run even faster and more efficiently, without adding pressure to Vercel servers and pushing our usage numbers! And I suspect we're gonna stay comfortably in Fastly's free tier :) but we'll see!

(Though, as always, if Neopets can finally upgrade their own stuff to HTTPS, we'll get to tear down this whole proxy altogether!)
2020-10-19 13:24:13 -07:00
ad43f58a07 fix Download button to use better caching
So I broke the Download button when we switched to impress-2020.openneo.net, and I forgot to update the Amazon S3 config.

But in addition to that, I'm making some code changes here, to make downloads faster: we now use exactly the same URL and crossOrigin configuration between the <img> tag on the page, and the image that the Download button requests, which ensures that it can use the cached copy instead of loading new stuff. (There were two main cases: 1. it always loaded the PNGs instead of the SVG, which doesn't matter for quality if we're rendering a 600x600 bitmap anyway, but is good caching, and 2. send `crossOrigin` on the <img> tag, which isn't necessary there, but is necessary for Download, and having them match means we can use the cached copy.)
2020-10-10 01:21:47 -07:00
1875931a48 simplify canvas code, just use separate elements
Previously I tried to be clever and pre-optimize by putting all the layers onto one canvas… I think this probably helped by batching their paints, but it made fades less smooth by not taking advantage of native CSS transitions, and it made us dip into JS way more often than necessary.

Here, I take the simpler approach: just layers of <img> and <canvas> tags, with each animated layer on its own canvas, and letting the browser handle transitions and compositing, and separate `setInterval` timers to manage their framerates.

I have a suspicion that batching the paints could help performance more, but honestly, maybe that batching is already happening somehow, because things look pretty great on my big-screen stress test now; and so if it _is_ relevant, I want to wait and see after testing on low-power devices.
2020-10-08 04:13:47 -07:00
ffe9d25b1c help user find play/pause when adding animation
I think it's great that we hide the button when it's not relevant, but that makes it hard to know that it exists. Here, we do some cute tricks to blink up the "Paused" button when it first appears, even if the user doesn't have the controls visible right now
2020-09-24 07:54:11 -07:00
2a8ac4ad65 improve contrast on play/pause button
I had trialed it on darker backgrounds, but on lighter ones we just need a higher base contrast imo
2020-09-24 07:19:29 -07:00
e5ce4a4a42 improve perf on item add/remove
We did this a while back too, but I guess something changed in Apollo: I guess it used to return identical item objects from the cache on its own, and now it returns brand new item objects. So we gotta do the object caching hacks ourselves!

This speeds up add/remove item state updates from 500ms to 100ms on my Mac, because we stop re-rendering all the Item components and their complex Chakra children.

This is especially worth doing now, because animations make long updates much more noticeable! (It interrupts the animation 😅)
2020-09-24 07:09:08 -07:00
53b4d34419 only show play/pause when there are animations 2020-09-24 06:13:27 -07:00
5027a62ec5 cuter play/pause button at top of controls 2020-09-24 06:04:59 -07:00
5879324ebb play/pause button for animations 2020-09-22 05:39:48 -07:00
772065815a Badge for animated items, support only
This is really very cute, but too many items it turns out are lod despite not actually being animated 🙃 it's helpful for looking for test cases tho, so I'm keeping it, but support only!

I also ended up really liking the icon-badge+tooltip design as a way to summarize lil things, so I'm trying Own/Want short badges in the same style.
2020-09-22 04:25:41 -07:00
7677a60bbe add non-canvas version back for smaller previews 2020-09-21 18:50:27 -07:00
0b724f7509 add own/want badges to items in wardrobe 2020-09-12 20:02:56 -07:00
dcf2ec6a26 embed item page in wardrobe page drawer 2020-09-12 19:29:20 -07:00
ebb8c63ac6 page title upgrades 2020-09-11 23:54:37 -07:00
0df57818e3 create ItemCard, use it in ItemsPage too
extracted from modeling page!
2020-09-11 20:41:39 -07:00
9cb6cc2120 use better colors for light mode hanger spinner
Initially the spinner was only used in OutfitPreview, where the background was always pretty dark. Now that we use it in more general contexts, we need a light/dark distinction!

Also went and standardized out the `size` props
2020-09-10 03:06:44 -07:00
93564ee6bd more realistic loading state into WardrobePage
Here, we extract a lean WardrobePageLayout component, so that we can bundle it into the main app as a loading state for WardrobePage.

This means that clicking Start from the homepage will, instead of flashing the screen to white while WardrobePage loads, show the correctly-sized black/white page layout instead.
2020-09-10 02:54:22 -07:00
1cc4d718a5 basic modeling page cute cards! 2020-09-06 23:49:04 -07:00
f0c50eecb7 align item elements to the ~top of the row
Essentially I want the center-y visual balance around the image, and the name and _one_ line of tags. If there are extra tags, I want that to go down on its own, rather than bringing down the image+buttons to center against them.

The single-line-of-tags case is the most common, and I think it makes things feel more consistent for all the items to stick to that basic layout, while trying to keep that layout feeling center-y
2020-09-02 01:03:51 -07:00
62629865d8 stop removing items after you try something on
I was getting annoyed by how, when you're using search, trying on an item will remove conflicting stuff, and then if you decide you don't like what you tried the old stuff _doesn't come back_

As of this change, it does! When you start a new search, we save the outfit state, and then whenever you change the items we ask "hey can these old ones safely be re-worn again?" and re-wear them if so.
2020-09-02 00:53:35 -07:00
46b8245b9a rearrange item buttons for consistency
On the search panel, not all items have the remove button, and it's confusing to have the other buttons be in inconsistent positions!

Move the Remove button to the left side of the list, so that everything else is positioned the same regardless
2020-09-01 20:45:30 -07:00
99feddb859 fix pagination ish
Okay, we handle the new pages correctly! Still some weird bugs when you send requests near each other? Probably wise to migrate to Apollo's new way of doing this
2020-09-01 20:30:18 -07:00
a11ff1326b actual zone search support? owo 2020-09-01 20:06:54 -07:00
821d05c141 refactor to use new query object in SearchPanel
not actually including zone in the GraphQL query yet, but it's available in the right location now!
2020-09-01 19:53:38 -07:00
479f43ed22 pretty UI for zone search suggestions 2020-09-01 19:43:25 -07:00
10563629ef misc zone search fixes & improvements 2020-09-01 19:11:33 -07:00
0088c3f193 first draft of search zones
It doesn't affect the actual query yet, and it looks bad! But it exists!
2020-09-01 18:59:05 -07:00
d013dd6d89 WIP: search suggestions 2020-09-01 18:05:31 -07:00
612e549ddc extract SearchToolbar into a separate file
This is in preparation for extending it with more UI stuff to auto-suggest zones!
2020-09-01 17:49:12 -07:00
900f055b1b fix stray console warnings
Some unused vars, and some missing React keys!
2020-09-01 17:20:08 -07:00
6d968cc385 show incompatible items in the outfit list
This was a subtle little thing for a while! If you switch species/color, such that an item doesn't fit the pet anymore, we used to just hide it. Now, we show it in a list, so that you can understand what went wrong, and have the option to remove it.
2020-09-01 17:17:45 -07:00
574199575b oops, move restricted zone icon back to the right
I had it there before, but I switched it back in the recent tooltip refactor, oops!
2020-09-01 04:18:53 -07:00
f64b882de1 hide unnecessary zone groups
This was bothering me, I'm surprised and pleased by how easy it seems it was to fix? :)

The strategy is just, look for groups that are provably redundant, and filter them out.

I hope it's correct! It's definitely cozier. Kyrii Mage items are good tests, they have a lot of interesting zones!
2020-09-01 03:53:24 -07:00
d630c7355a more & better item badge tooltips 2020-09-01 03:50:43 -07:00
e95cc36995 undo badge streamlining
I figured that we'd want simpler UI in the ItemsPanel when possible… but now that we've got it pretty simple and comfy, I think the consistency is better
2020-09-01 03:15:19 -07:00
fd0edeca3d use simpler nc/np tags in the list 2020-09-01 03:01:02 -07:00
4a4f4f9c63 move NC tag onto the thumbnail
oh yeah I'm starting to dig this :3
2020-09-01 02:27:16 -07:00
dec9d76601 zone badges on items
These are nice! :)

The `hideSimpleZones` option I'm not sure about yet, but I figure that:
1. For a new user just doing simple outfits, I feel like the double data on the items page just looks silly, so I want to streamline for that
2. But I _do_ want to let the user think about zone complexity when things _are_ multi-zone.

I did also consider just hiding the zone badge for the header you're under, but I figured the consistency of having the item and its badges look the same in all the places in the list was more important.
2020-09-01 01:18:24 -07:00
8f9f1a14de better NC badge, with name text wrapping
a bit unfortunate to be wrapping long item names on mobile now, but heck there's an info button, should be fine
2020-08-31 23:54:54 -07:00
f79379e3d3 perf improvement for PosePickerSupport
oops, forgot to tag this as @client so the server wouldn't bother with a zone lookup!
2020-08-31 23:31:56 -07:00
d2aab1da9e add NC badge to items
it's cute!
2020-08-31 23:28:35 -07:00
c3d8ead8f8 add NC badge to items 2020-08-31 23:27:21 -07:00
e40ec9bb05 fix typo in PosePicker 2020-08-31 23:08:03 -07:00
47f55b1c3e add UC support!
I'm really into how the PosePicker button came out :3
2020-08-31 20:26:15 -07:00
bfb0979801 remove hover effect from item loading placeholders
this has been annoying me for a while 😅 it's confusing and surprising that they act interactable when they very much aren't yet!
2020-08-31 17:41:28 -07:00
64ad77ec49 focus dropdown when opening support pose picker
Oops, opening the dropdown would auto-focus the left arrow button, because it's now the first focusable element! Make explicit that we want the dropdown instead.
2020-08-31 01:32:25 -07:00
59f6fe12ff remeasure pose picker after changing appearance 2020-08-31 01:04:27 -07:00
1c8eba4698 Support tools can set appearance glitched state!
this is also very good! :3
2020-08-31 00:48:54 -07:00
1ef05adce4 Support can label pet poses!
it's good shit, y'all
2020-08-31 00:32:17 -07:00