Commit graph

131 commits

Author SHA1 Message Date
e7359ab51b add WIP callout to user items page 2020-10-10 02:07:49 -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
423ab5c98d oops, un-break the homepage! 2020-10-08 04:20:23 -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
42c59328a9 only make a 60fps call if we're actually animating 2020-10-06 08:55:21 -07:00
900d102594 Merge branch 'modeling' into main 2020-10-06 07:06:30 -07:00
6ec6bbec57 first-time modeling UX improvements
These changes are most relevant for playing around in the dev server, modeing against an empty database. But they'll also help in real-world modeling scenarios! e.g. modeling a new species/color combo is now a bit nicer, we don't show a blank entry in the color picker
2020-10-06 06:37:51 -07:00
f543868924 fix bug that broke fades on cache-grouped layers 2020-09-25 07:53:04 -07:00
32c4e540a3 group and cache adjacent static outfit layers
perf win owo!
2020-09-25 07:35:49 -07:00
d52849c7a2 add animations and play/pause button to item page 2020-09-24 08:29:56 -07:00
05f7b3fcc7 oops, fix missing hook deps 2020-09-24 06:43:46 -07:00
ce402c23d7 include animated assets in preloading
Honestly kinda surprised this worked on the first go! I was worried something about the process would make the sorta like, instant-cache expectation not work.

Still thinking it might be considerate to like, keep a LRU cache of MovieClip options, so that we don't double-execute these scripts when adding stuff… we even re-execute the ones already applied lol 😅 and that adds lots of script tags to the body!

But yeah I'm not gonna push on it yet until I see evidence that it actually causes performance issues in practice
2020-09-24 06:25:52 -07:00
53b4d34419 only show play/pause when there are animations 2020-09-24 06:13:27 -07:00
c4a9ee8497 a bit more perf for static assets 2020-09-24 06:04:51 -07:00
5879324ebb play/pause button for animations 2020-09-22 05:39:48 -07:00
88f5c1f1aa fix bug where resizes pause the animations 2020-09-22 05:14:31 -07:00
30ec18e85e maybe fix races in movie script load order? 2020-09-22 05:12:59 -07:00
d50d1ecacc fix bug that reloaded all layers on resize 2020-09-22 05:01:56 -07:00
185d6acc88 some movie clip race condition fixes 2020-09-22 04:36:32 -07:00
d1be0f2d4a oops, add a missing assetProxy call! 2020-09-22 04:34:40 -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
3fe2c478f2 log manifest image load errors, instead of crash 2020-09-22 04:12:52 -07:00
8cc034900d ah, refine the bug fix for number filenames 2020-09-22 04:08:05 -07:00
d27395bda2 hooray, animated items seem to be working?! ^w^ 2020-09-22 03:53:48 -07:00
a4d159381c add an underscore to numbered filenames
Here's an example, the file is http://images.neopets.com/cp/items/data/000/000/546/546022_1132b0ffeb/546022.js and the constructor is _546022, to account for the fact that JS syntax won't allow a plain number there.
2020-09-22 03:46:32 -07:00
7fdf8f5e21 remove stray console logs 2020-09-22 03:06:50 -07:00
e8bfc24506 oh, I think I fixed the movie pausing bug! 2020-09-22 03:06:14 -07:00
08bdf560a4 draft of animated layers in storybook
Not running in the real app yet, but there's something a bit off where changes seem to pause animations and I don't understand why
2020-09-22 03:03:01 -07:00
c806de4e83 rename EaselCanvas to OutfitCanvas, etc
reflecting further on the abstraction, I'm noticing that this isn't an Easel abstraction like I envisioned early, and that we're baking some Neopets stuff into it. And I think that's the right call, esp with the tricky MovieClip stuff coming up, where I think more barriers would hurt more than they help. So, a new name!
2020-09-22 01:49:12 -07:00
9a8047c613 extract EaselCanvas to its own file, basic stories 2020-09-22 01:44:24 -07:00
feaaf97dce fix the broken loading delay again
Did it revert? Or did I just never notice that it only worked on mount, not on new loading states?

Also, fixed a bug where we were injecting the script tag way too much, and triggering loading too much that way too!
2020-09-21 19:03:17 -07:00
7677a60bbe add non-canvas version back for smaller previews 2020-09-21 18:50:27 -07:00
80a52d3bb9 add fade-in/fade-out to easeljs outfit previews 2020-09-21 18:40:12 -07:00
bf83b175ad use EaselJS for outfit previews
still just for static stuff, but it's good to be working!

PosePicker got a bit broken, CSS scaling doesn't work quite right anymore, we might need to just up the internal resolution or something?
2020-09-21 18:11:25 -07:00
a6761a2403 load correct pet for species-specific items
uses the new canonical appearance GQL stuff :)

there's still an extra reload, we're not using the apollo cache correctly!
2020-09-21 02:56:56 -07:00
5f9b143939 add species/color picker to item page
still missing some basics like choosing the right default for the single-species case, but overall work-y!
2020-09-20 21:08:16 -07:00
351b9a88bd use corner spinner on item page, and fix delay bug
Fading the whole preview to a black overlay for the loading state was feeling aggressive, especially since loading delay wasn't working correctly!

In this change, I fix loading delay, and I add a nice subtle "corner" variant for outfit preview spinners :)
2020-09-13 04:12:14 -07:00
0b724f7509 add own/want badges to items in wardrobe 2020-09-12 20:02:56 -07:00
383d514397 link to new item page from item list & model pages 2020-09-12 18:23:12 -07:00
d29abf5cd1 add skeletons for item page header
It looks nice, but also particularly means we can handle the loading for the preview separately, get that started faster and iterate better on it in dev!
2020-09-12 18:17:23 -07:00
bf2660cbd4 show a basic item preview on the new item page 2020-09-12 17:56:31 -07:00
4f6f3640bb start building item page 2020-09-11 23:56:47 -07:00
a52bd3e3bb fix some old lint errors! 2020-09-11 23:27:23 -07:00
0d7efb2357 use 3 columns for grid on wider screens
This isn't as great for modeling cards, but it's fine imo, and it's much better for item list cards (where there's practically no badges)
2020-09-11 22:13:38 -07:00
5546b21c27 use the same ItemCardList in items + modeling
and make the grid items take the full two-column width
2020-09-11 21:53:57 -07:00
8e091b14c6 add own/want compare badges
now you can compare your item lists with other users!
2020-09-11 21:45:38 -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
c7e2daa07b fix visual regression on homepage
I think the Chakra upgrades made these overrides stop working? added !important so that they happen again!

The regression meant the homepage looked worse, always having the selects fade in :/
2020-09-10 02:37:06 -07:00
1cc4d718a5 basic modeling page cute cards! 2020-09-06 23:49:04 -07:00
715f466df4 create very basic modeling page, not useful yet! 2020-09-06 23:32:04 -07:00
Matchu
70d3b06742 basic items page, with user permissioning :)
(the permissioning happens on the backend in the prev change! but yeah we send the auth token in the headers, so the backend knows who you are and whether to show you private data)

(also it is just owned items not in any list!)
2020-09-04 05:59:35 -07:00
6dc53814c2 move restrictedZones from layer to PetAppearance
okay so the PetAppearance restrictions are stored on the asset, because that's how they're defined on Neopets.com too

but I think that's a confusing API, so here I define `PetAppearance.restrictedZones`, which just maps over the layers and aggregates the zones server-side, same as we would have done on the client

I think that's much easier to understand than having layer contain a field, but having to know that item restrictions _don't_ work that way, you know?
2020-08-31 23:18:30 -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
17b00e295d stray lint fix 2020-08-31 19:31:37 -07:00
d91cd80603 add support for UC zone restrictions 2020-08-31 19:23:56 -07:00
f6b9f7f440 fix fade-in for outfit loading hanger
Huh, maybe this is a Firefox bug or something? but the container wasn't applying partial opacity correctly to its children, it was only doing 0 or 1, I think maybe because the children weren't static? I refactor here to make the DOM structure a bit more natural, and fade ins work again 🤷‍♀️
2020-08-31 18:57:29 -07:00
41388ecb9d fix loading state when outfit changes
I'm not sure when this regressed, but changing the outfit was clearing out the whole preview and showing an empty loading state, instead of the intended behavior of showing a loading spinner over the old preview. This affected both the home page and the wardrobe page.

Yeah, so, huh. Fixed! I hope I didn't goof anything else with these effect trigger changes though 😅

The reason I'm doing this now is not just that it's annoying, but as a pair with the color change fix from just now, I want those color changes feeling buttery smooth!
2020-08-31 18:41:57 -07:00
856d8586e4 cache item data when switching standard colors
Previously, when changing a pet's color, we would refresh the items panel and send a new network request for the item appearances, even though they're all the same. This is because item appearance data is queried by species/color, for ease of specification.

But! Item appearances are //cached// by body ID. So, if this is a standard color, it's not hard to look in the cache for the standard color's body ID!

Now, most color changes are faster and don't flicker the item panel anymore. We do still refresh the panel and send the requests for color changes that _do_ matter though, like standard <-> mutant!
2020-08-31 18:25:42 -07:00
1e30e7c8b0 add Support mode to PosePicker
Still just read-only stuff, but now you can look at all the different poses we have for a species/color!

Soon I'll make the pose/glitched stuff editable :3

Some sizable refactors here to add the ability to specify appearance ID as well as pose… most of the app still doesn't use it, it's mostly just lil extra logic to make it win if it's available!

(The rationale for making it an override, rather than always tracking appearance ID, is that it gets really inconvenient in practice to //wait// on looking up the appearance ID in order to start loading various queries. Species/color/pose is a more intuitive key, and works better and faster when the canonical appearance is what you want!)
2020-08-28 22:58:59 -07:00
10a6eff299 WIP pose picker support 2020-08-28 21:06:33 -07:00
17fa9d06b9 add id to ItemAppearance (+ refactor)
This is in support of a caching issue in a hack tool coming next! Without this, the change to ItemAppearance restricted zones would make other ItemAppearance fields go missing (bc our hack tool didn't also specify them), so the query would re-execute over the network to find the missing fields we overwrote with nothingness—which would undo the local hack change.
2020-08-28 00:10:00 -07:00
700073df8a fix bug where image load errors would keep loading
Dice reported this, thank you!

My mistake here was that `loadImage` _does_ reject when the image fails to load… but it ends up throwing `undefined`, since I forgot to pass the error along from `onerror` to `reject`!

So we would cancel stuff, but then store `undefined` as our error in state, which our component interprets as no-error.

I tested this by using Firefox DevTools request blocking!
2020-08-19 19:11:49 -07:00
f8e625afd2 hide invalid colors in wardrobe page dropdown
On the homepage, I want to keep the ability to enter invalid species/color pairs, so that you can say "Alien, Aisha" instead of having to pick the Aisha first.

But on the wardrobe page, we were rejecting invalid state changes anyway, so I decided to remove invalid color options from the list. And I added an ability to still switch to any species, and potentially resetting to a basic color automatically to match.
2020-08-19 19:05:44 -07:00
47d22ad25c Build cached zones, stop querying on server
In this change, we cache the zones table as part of the JS build process. This keeps the database as our source of truth, while aggressively caching the data at deploy time.

See the new README for some rationale!

I tested this by pulling up dev Honeycomb, and observing that we no longer run db queries to `zones` in the new traces for the wardrobe page. (It's a good thing we did it this way, because I noticed some code in the server that was still loading the zone anyway, and fixed it here!)
2020-08-19 17:50:05 -07:00
aa6ce12bbe add Neopets ID to layer support modal 2020-08-14 22:09:52 -07:00
927e26385c make light/dark mode transition smoother 2020-08-12 01:46:27 -07:00
086cf8b335 dark mode first draft!
Hey wow this was not so hard, just set some global styles, removed some hardcoded colors, and walked through the remaining hardcoded colors to pick a dark mode variant :) neat!!
2020-08-12 00:37:31 -07:00
bf76065faf Perf: memoize some OutfitControls components
I noticed that item wear/unwear is slow on mobile, because we re-render the whole app tree, and my laptop handles that super fine, but my few-years-old fun takes ~300ms, which is very noticeable.

There's some hacks we could do to get faster feedback, but first I'm diving into the render tree to find the unnecessary renders and stop 'em! That should help build perf across the board, rather than in just one spot, and hopefully be less of a weird sore spot :)
2020-08-04 23:58:52 -07:00
fce51875d9 add SWF to layer assets in Support tools 2020-08-01 22:54:30 -07:00
e8917936d6 can actually see body ID in pet compatibility form 2020-08-01 14:30:10 -07:00
213f30b2f2 sketched out the pet compatibility chooser
can't actually set things properly yet, but you can scroll through options and see how it fits!
2020-08-01 14:12:57 -07:00
63b865ef7c start adding appearance layers support tool
right now it just shows stuff. next step is to make them clickable to open tools for managing the layer!
2020-08-01 01:35:27 -07:00
f747bfb004 load special colors into support UI 2020-07-31 23:33:12 -07:00
8211444d67 apollo client 3 initial upgrade
Some bugs remaining… outfit items don't show up at first, and item search and scrolling seems _very_ weird, wearing is broken too…
2020-07-31 23:10:34 -07:00
ffde7172de enable HTTP caching for pet appearances 2020-07-22 23:08:28 -07:00
9f11c83b20 extend the loading delay on homepage preview 2020-07-22 22:15:07 -07:00
5a9d2f6566 show a preview of color/species on the homepage
Using the newly extracted OutfitPreview! I'm really happy with how this turned out :3

It also makes the pageload after clicking Start super smooth, no spinner! Thanks Apollo cache!!
2020-07-22 22:07:45 -07:00
9164d89240 extract OutfitPreview into a shared component
I wanna use it in some other places soon, like a outfit-sharing page, and on the homepage to preview stuff
2020-07-22 21:29:57 -07:00
d30c3fc1b5 a cute new hanger spinner ^w^ 2020-07-20 22:18:39 -07:00
1cc7b3cbe1 more directory structure inside app 2020-07-20 21:41:26 -07:00