Commit graph

896 commits

Author SHA1 Message Date
d52849c7a2 add animations and play/pause button to item page 2020-09-24 08:29:56 -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
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
5027a62ec5 cuter play/pause button at top of controls 2020-09-24 06:04:59 -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
ae26701be7 extend asset proxy to handle number version string 2020-09-22 04:16:45 -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
507d0709e4 fix conflict between storybook and jest
Huh, Storybook added some Babel dev deps, and it seemed to break Jest by anchoring to a bad verison. But removing them seems fine? So, cool.
2020-09-22 03:23:07 -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
31a0108d44 install storybook
I want it for faster feedback on the Easel stuff
2020-09-21 21:16:40 -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
fb39a4f935 simplify animate-test code
we got rid of the custom timing now that I learned about additional API hooks to do exactly what I want!
2020-09-21 15:57:01 -07:00
c430ae8dd6 oh, oops, _do_ send Content-Type with proxied JS
right, _length_ only works if we're streaming unencoded content, but type is still good no matter what!
2020-09-21 11:42:24 -07:00
a0c7b6076f remove preloadjs from animate test, to save bundle
Well, there's no real bundle yet, but just was noticing that PreloadJS is like 100KB, and we're only using very very basic features. Simplify and save!
2020-09-21 09:33:07 -07:00
e20ecd8277 add smooth fades, pause/play to animation test 2020-09-21 08:18:08 -07:00
7f2660554e oops, assetProxy more things for animate-test.html 2020-09-21 07:07:47 -07:00
99204a011e remove extra arguments and comments from test 2020-09-21 06:53:54 -07:00
0bd2136dd0 test case for HTML5 animations 2020-09-21 06:52:36 -07:00
64d09f040a re-add nav menu, to prevent bad wrapping on iphone
noticed that the left-title and right-nav were running into each other on a standard iphone layout... menu fixes this!
2020-09-21 03:31:49 -07:00
a81060d5b8 make the Dress to Impress text clickable
oops, right, it was not part of the link! Now it is. Feels much better :)
2020-09-21 03:18:32 -07:00
1eeba40fac rename GlobalNavBar to GlobalHeader
for consistency with GlobalFooter
2020-09-21 03:08:24 -07:00
5c8fbdc81e use preloaded pet data when loading item page 2020-09-21 02:56:56 -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
1b59b9631b GQL for canonical appearance for body
gonna use this for item page! I walked back my supported species idea 😅
2020-09-21 02:56:48 -07:00
b53d95cda8 rename "Incompatible" to "No data yet" 2020-09-20 21:34:27 -07:00
bcf6e6d8a7 add GQL to know what species can wear an item
gonna use this on the item page to seed the species choice!
2020-09-20 21:33:45 -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
baa3563abb fix margin between home icon and user bar
Oops, I attached the margin to the title, which meant that the home link _didn't_ get spaced away from "Hi, matchu!"
2020-09-20 20:13:00 -07:00
c52b5f0039 update footer design, add links
notable layout change is that the text content will now try to center itself, and we push the buttons off to the right. we also needed to tweak the layout code a bit to get the buttons to feel centered with the top two lines, bc centering against the full block just feels wrong, they want to be top-y in terms of positioning, but still feel centered-y in terms of visual balance
2020-09-20 20:10:26 -07:00