Commit graph

285 commits

Author SHA1 Message Date
c94e94538e remove stray console.log 2020-08-19 19:12:56 -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
81065fda6a fix bug where search error states are hidden
Oops, our loading state logic was eating the error case! I'm not sure exactly where the gap was happening, but I've rewritten the states to be a bit more foolproof, since that first condition was confusing I think.
2020-08-19 18:11:40 -07:00
f6c228b17e lol fix cached zone names
Ahaha I fucked up a bit! I was indexing into the array of cached zones, instead of looking up by ID. This meant that all zone names were wrong, and some search results weren't loading bc there was no zone data!

I made a fix here, and also added some fallback values, so that if there's an issue in the future we can at least fall back more gracefully than the infinite-spinner case we had here.
2020-08-19 18:01:20 -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
362093dfa2 rename item "DTI ID" to "Item ID"
I realized that DTI ID is a bit misleading in this case, where the ID is both ours and Neopets's, if I recall!
2020-08-14 22:11:04 -07:00
aa6ce12bbe add Neopets ID to layer support modal 2020-08-14 22:09:52 -07:00
b23f64ad53 show DTI ID in item support drawer
helps make looking stuff up easier!
2020-08-14 22:01:04 -07:00
a2f5dcd498 use real query for item support pet compatibility rule
mutation isn't hooked up yet though! it exists but the sever doesn't recognize it
2020-08-14 21:52:02 -07:00
3e012ec2c0 Draft UI for pet compatibility rule fields
not wired up to a mutation yet, but it looks pretty!
2020-08-14 21:05:28 -07:00
7a58546700 bug fix for light/dark mode toggle
this will keep it always in the corner of the screen, instead of weirdness when the container is not very tall
2020-08-14 18:21:40 -07:00
500068b41b improve a11y for dark/light mode button
add an aria-label, and move it to a better tab position at the end of the page, to match the visual placement
2020-08-12 10:59:27 -07:00
2aa4d2b2c0 add "more colorful" swf conflict mode
An even better resolution mode for "Dyeworks Pink: Peaceful Tree Garland", which doesn't leave any big chunks or holes, and instead takes all the leaves and gives them chunky outlines 😅
2020-08-12 10:53:35 -07:00
927e26385c make light/dark mode transition smoother 2020-08-12 01:46:27 -07:00
0f97693500 add conflict resolution mode for SWF screenshots
The "Dyeworks Pink: Peaceful Tree Garland" was a tricky case, with animated falling leaves…

we decided that having transparency in the main pet area, and some incorrect transparent holes in the trees, was a better conflict resolution for this one

Probably would be good to manually upload a Totally Good version, but like, this flag is probably good to have
2020-08-12 01:32:25 -07:00
71e1112b63 fix bad dark mode color in item support drawer 2020-08-12 00:43:26 -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
12bd9f6b17 fix PosePicker style bug
oops another thing I missed in the refactor! I wasn't providing the selected pose to the hook, so it wasn't styling any of the poses as selected. Now it does again!
2020-08-12 00:35:11 -07:00
ca92af0cf3 fix bug in pose picker a11y labels
Oops, I removed some fields from the pose object, so the aria-label for the options were coming out as "undefined and undefined"!

Now they come out correct!
2020-08-12 00:32:10 -07:00
edce0a9a76 add 1px of padding around Flash preview area
I tried to get the alignment juuust right in Chrome and Firefox, but Dice's computer was still including a 1px sliver of border.

In this change, I'm adding 1px of extra padding between the border and the Flash area. I figure that, if the screenshots are incorrectly aligned by 1px, that's no big deal and I'm okay accepting that slightly-incorrect upload rather than having folks not be able to use the tool!
2020-08-11 22:52:40 -07:00
07f182a78e minor SWF uploader fixes
fixed some warnings, and added window resize as an event trigger for updating the red/green border color
2020-08-11 22:46:14 -07:00
b520d1095c show new PNG in the app ~immediately
I had a hard time getting this to work the ideal way, but this way is Good Enough! a few seconds delay, oh well
2020-08-05 14:00:53 -07:00
1a9b495558 add detection for whether the entire SWF is visible 2020-08-05 13:25:20 -07:00
10be4c4ea1 use asset proxy for SWF upload tool
Oops, I forgot that in prod the HTTPS wouldn't be happy about loading SWFs over HTTP! Use the asset proxy instead.
2020-08-05 13:08:18 -07:00
d283884781 show % match, not warnings, in SWF upload tool
I think this will be much clearer about whether the warnings are a good or bad amount!
2020-08-05 13:05:17 -07:00
cc61d33d58 oops, fix bad comment to work around compiler bug
This happened in an earlier change too, I forget where, but there's some compiler bug that causes comments placed in this kind of spot to yield this error in production, but not in dev:
https://reactjs.org/docs/error-decoder.html/?invariant=152&args

Oh well, moved the comment!
2020-08-05 01:23:26 -07:00
90b4fc8da4 click to toggle outfit controls on mobile
On mobile, it was pretty annoying that you had to show the controls by tapping the preview area to simulate a hover—because it could also click the underlying elements, and do bad stuff!

Here, I add a click capture to prevent the clicks from going down if the controls aren't visible. And I add a toggle, so that you can dismiss the controls, like how YouTube feels :)
2020-08-05 01:06:05 -07:00
1efc1c0d42 fix item remove button in item search
Huh, weird how we seem to need preventDefault for buttons, but stopPropagation for links? idk, in any case, the Remove button was doing that thing where it clicks Remove but also bubbles up to the container and clicks it too :p
2020-08-05 00:33:14 -07:00
8c653ce879 memoize Item, clicks on mobile are fast now!
This was a surprisingly big win! Item is heavier than it looks, because it has like 6 Chakra components, which aren't expensive but aren't _cheap_ in a re-rendered list that needs to be fast, you know?

And it's even more important on search, where there's a lot of items on the page. (we should virtualize it too but that's a thing for another day)
2020-08-05 00:25:25 -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
0e09510c54 refresh layer support icon, always show on mobile 2020-08-04 23:00:31 -07:00
7bddb7f67e never wrap item action buttons on mobile
The button section was capable of flex-shrinking, and having those wrap pretty much always looks bad imo. Here, we get more precise about the areas and their flex rules, including only letting the name area grow/shrink. (If the screen is too small for the name to wrap further, the panel area container gains a horizontal scrollbar, which feels like a really good compromise imo)
2020-08-04 22:48:17 -07:00
f18ddc1385 always show item action buttons on mobile 2020-08-04 22:44:32 -07:00
a56ca20f69 Finish support tool to upload manual PNGs
Great for fixing those ones that the auto converters can't do!
2020-08-04 18:39:31 -07:00
b3d12d0966 UI to generate transparent PNG!
There's an Upload button but it doesn't go anywhere yet
2020-08-04 17:05:04 -07:00
fce51875d9 add SWF to layer assets in Support tools 2020-08-01 22:54:30 -07:00
d7d7a345a0 rename to ItemLayerSupportModal
the old name was clunky! this is better!
2020-08-01 22:41:03 -07:00
fb51eeec5b switch radio away from all pets after using picker
I think it's more helpful to auto-switch: if you're using the species/color picker for pet compatibility, that's probably what you want! And it's all buffered behind the Save Changes button anyway, so nbd to play a bit fast and loose!
2020-08-01 15:43:50 -07:00
8fdc986ee9 can submit the actual body ID Support mutation!
it seems to actually be changing the things correctly aaaa
2020-08-01 15:30:26 -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
488299353a add appearance layer support modal
Just some metadata for now, want to add body modification next!
2020-08-01 12:50:01 -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
0cdb6d0da1 stop showing duplicate support secret toasts 2020-08-01 00:42:36 -07:00
3c54653646 UX fixes for item support drawer
One fix was that `position: absolute` stuff was appearing over the drawer, including the item search clear button, oof!

Another fix was for a weird bug(?) in Apollo Client, see comments
2020-08-01 00:35:48 -07:00
0a9d736957 special color mutation actually working!
Note that there's a bug when switching back to the null case… when I look in the Apollo dev tools, it's definitely getting set in the cache correctly at the right time… but the query isn't updating for some reason? I'm hoping it's an Apollo bug that will fix itself someday with an upgrade!
2020-08-01 00:10:12 -07:00
a1d5669ac6 split item query & colors query in Support UI
My hope is that this can help with perf! The colors are very likely to be cached, and we don't need to re-request them from the server here!
2020-07-31 23:40:05 -07:00
cae2f1a977 Set up the special color mutation on the client?
Optimistic UI seems to just be like, not working… I'm seeing some Google results suggesting maybe just get to v3, which is a bit of upgrade work but might be worth it
2020-07-31 23:34:15 -07:00
2eb1c9b780 show the actual manual special color in support UI 2020-07-31 23:33:12 -07:00
f747bfb004 load special colors into support UI 2020-07-31 23:33:12 -07:00
b310f2334d draft UI for item support drawer
Special color is mocked out, but not backed by real data or actually changeable!
2020-07-31 23:33:12 -07:00
4aece9d703 fix PosePicker portal for Chakra UI Next
Oh oops, Chakra UI Next deprecates usePortal for the popover, so it wasn't escaping properly! Add a Portal component to let it escape the top area again!
2020-07-31 23:31:51 -07:00
7f8401ff4b fix apollo client 3 initial item load bug
I guess if you return a reference to an object that doesn't exist, it registers as null; and you need to provide the `true` here to declare that it _is_ real and should be treated as an _insufficiently_ defined object?
2020-07-31 23:21:34 -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
1d968436dc stop using hanger spinner on button it's too small 2020-07-22 20:56:36 -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
419a270df9 upgrade to Chakra v1
it's a preview version, but it has a feature I want, so let's get ahead of the curve!
2020-07-20 21:32:42 -07:00
Matt Dunn-Rankin
7d0b17046b oops, fix regression in PosePicker 2020-06-24 21:24:55 -07:00
Matt Dunn-Rankin
7baa48c356 add item info links 2020-06-24 21:12:02 -07:00
Matt Dunn-Rankin
ad947985ea remove debug console calls 2020-06-06 13:46:47 -07:00
Matt Dunn-Rankin
462488a8f8 OutfitPreview waits for all new layers to load 2020-06-05 23:56:42 -07:00
Matt Dunn-Rankin
661eea0275 optimize homepage splash: resize, crush, srcset
original: 84kb
new 2x: 56k
new 1x: 19k
2020-05-23 13:59:56 -07:00
Matt Dunn-Rankin
29b9fe48c5 use PetService to determine the correct pose 2020-05-23 13:55:59 -07:00
Matt Dunn-Rankin
bcdd9af806 transition to closest valid pose for species/color 2020-05-23 13:23:24 -07:00
Matt Dunn-Rankin
75a0fe2e8c refactor e/gp pairs to pose enum 2020-05-23 12:47:06 -07:00
Matt Dunn-Rankin
62fc161013 upgrade to immer 6.0.8, remove bug workaround 2020-05-23 10:51:32 -07:00
Matt Dunn-Rankin
674107516c stop using javascript:void 0 as a placeholder 2020-05-19 18:30:54 -07:00
Matt Dunn-Rankin
1237ed0bb2 note on skipped query for future reference 2020-05-19 15:18:59 -07:00
Matt Dunn-Rankin
e9a490feca oops, we broke cacheRedirects, so item adds broke! 2020-05-19 15:14:12 -07:00
Matt Dunn-Rankin
94b05ad95b skip OutfitStateItems query if there are no items
Kinda surprised our cache redirect isn't good enough for this, but I guess Apollo can't differentiate between a confident empty list vs an uncertain empty list!
2020-05-19 14:57:25 -07:00
Matt Dunn-Rankin
b47392f17f add opnames for all queries 2020-05-19 14:48:54 -07:00
Matt Dunn-Rankin
c7707c8ee5 Show more realistic item list skeletons 2020-05-19 14:43:21 -07:00
Matt Dunn-Rankin
8e6c9a3d98 misc a11y fixes
both pages pass Lighthouse now, yay!
2020-05-18 01:21:46 -07:00
Matt Dunn-Rankin
3f379a819f add aria-label for search field 2020-05-18 01:09:27 -07:00
Matt Dunn-Rankin
f1d10f1c9e empty alt text for images 2020-05-18 01:08:56 -07:00
Matt Dunn-Rankin
cfabefa442 inline index.css, omit unused fonts, preload hints 2020-05-18 00:56:46 -07:00
Matt Dunn-Rankin
41e8e5f849 add webpackPreload hint for OutfitControls 2020-05-18 00:37:13 -07:00
Matt Dunn-Rankin
2fc0205304 code split the two pages 2020-05-18 00:20:48 -07:00
Matt Dunn-Rankin
db9dc3390b code-split OutfitControls 2020-05-18 00:11:18 -07:00
Matt Dunn-Rankin
543a12123d remove use-http to save 31kb 2020-05-17 23:44:33 -07:00
Matt Dunn-Rankin
2b8ed15bc1 remove react-helmet to save 12kb 2020-05-17 23:26:00 -07:00
Matt Dunn-Rankin
9c8a48a325 http caching for all color/species requests 2020-05-14 15:51:08 -07:00
Matt Dunn-Rankin
7847eddec3 less aggressive flash when color/species loads in 2020-05-14 15:50:59 -07:00
Matt Dunn-Rankin
e18aba17c6 add svgUrl for image layers 2020-05-11 21:19:34 -07:00
Matt Dunn-Rankin
072a95faba remove demo outfit, initialize state from url
it was causing a flash of content sometimes, oops!
2020-05-10 01:28:39 -07:00
Matt Dunn-Rankin
905b41aa7c use error color for invalid poses
I tweaked it to be a bit less aggressive of a red 😅
2020-05-10 01:21:24 -07:00
Matt Dunn-Rankin
f2d48cad84 remove error tooltip bc it's broken in prod
I also think it's not great a11y… need to think of a clear indicator!
2020-05-10 01:17:16 -07:00
Matt Dunn-Rankin
6b616d917d attempt to fix a prod-only tooltip bug 🤔
My current guess is that maybe showDelay={false} is infinite delay after prod compilation? Not sure why but it's my best guess!
2020-05-10 01:05:19 -07:00
Matt Dunn-Rankin
785d119324 set explicit page title on homepage 2020-05-10 01:01:14 -07:00
Matt Dunn-Rankin
9b4a677395 fix Safari outfit controls visual bug 2020-05-10 00:56:44 -07:00
Matt Dunn-Rankin
dcd8cc7a4a do pet loading on homepage, scrap reset modal 2020-05-10 00:54:23 -07:00
Matt Dunn-Rankin
385360ef10 basic home page! 2020-05-10 00:21:04 -07:00
Matt Dunn-Rankin
6757775fec change validPetPoses bit order, add dims to blob 2020-05-03 13:03:02 -07:00
Matt Dunn-Rankin
da0398b50b use bodyId, not speciesId, for pose transforms 2020-05-03 12:55:37 -07:00
Matt Dunn-Rankin
3f2f77c35d Merge branch 'valid-pet-poses' 2020-05-03 01:52:59 -07:00
Matt Dunn-Rankin
1bf33c14db use compressed validPetPoses to save network
it also has valid emotion/gp data in there too, which we'll use later!
2020-05-03 01:52:39 -07:00
Matt Dunn-Rankin
5d6b267992 fix outfit resets for emotion/gp 2020-05-03 01:08:43 -07:00
Matt Dunn-Rankin
2214fe2815 remove flicker when opening the pose picker 2020-05-03 00:15:03 -07:00
Matt Dunn-Rankin
6c4569656f try to fix a compiler bug?
It looks like, in prod, our lambda fn here got optimized away, and I'm guessing it's because it starts with a comment now? I moved the comment down a line, fingers crossed!
2020-05-02 23:32:45 -07:00
Matt Dunn-Rankin
fc6258f6e9 fix a small mistake in OutfitPreview doAnimations 2020-05-02 23:18:20 -07:00
Matt Dunn-Rankin
a142df86cf return focus after PosePicker closes 2020-05-02 23:04:31 -07:00
Matt Dunn-Rankin
5ea717c391 better handling of missing poses 2020-05-02 22:59:30 -07:00
Matt Dunn-Rankin
2300fe4fbe add ID to pet appearance fragment for more caching 2020-05-02 22:41:01 -07:00
Matt Dunn-Rankin
2f8a4df27b fix PosePicker PetState debug output 2020-05-02 22:40:34 -07:00
Matt Dunn-Rankin
fb902e49f8 default emotion/gp for old outfit URLs 2020-05-02 22:39:25 -07:00
Matt Dunn-Rankin
f828686ac5 cache PetAppearance for quick pose switches 2020-05-02 22:37:52 -07:00
Matt Dunn-Rankin
6e1e0a5c0b show updated pet appearance in outfit preview! 2020-05-02 22:32:08 -07:00
Matt Dunn-Rankin
a064e5b471 move emotion / gender presentation to outfit state 2020-05-02 22:20:17 -07:00
Matt Dunn-Rankin
fae2a579c2 focus the radio when opening PosePicker 2020-05-02 22:07:47 -07:00
Matt Dunn-Rankin
752828b4b0 PosePicker is a radio! 2020-05-02 22:04:20 -07:00
Matt Dunn-Rankin
117a802835 zoom transforms for species poses!! 2020-05-02 21:04:54 -07:00
Matt Dunn-Rankin
da82dba294 PosePicker uses real appearance data, ish 2020-05-02 17:22:46 -07:00
Matt Dunn-Rankin
295a7ec8ba twemoji for pose picker 2020-05-02 16:03:23 -07:00
Matt Dunn-Rankin
4954d4adcf pose picker foundational UI! 2020-05-02 15:41:02 -07:00
Matt Dunn-Rankin
6b70df7e5e split and simplify OutfitPreview & OutfitControls 2020-05-02 13:41:52 -07:00
Matt Dunn-Rankin
fa92101b58 sync outfit url to location bar 2020-04-30 00:45:01 -07:00
Matt Dunn-Rankin
a3204cd2cf fix CSS bugs in Item 2020-04-30 00:30:27 -07:00
Matt Dunn-Rankin
17d72310bb start using asset proxy for item thumbnails
we're HTTPS now, baby!!
2020-04-30 00:02:00 -07:00
Matt Dunn-Rankin
839f9e4668 move outfit preview buttons to top 2020-04-28 01:19:03 -07:00
Matt Dunn-Rankin
08aef8d863 oops, fix item/itemgroup transition!
It broke because I refactored the CSSTransition into a wrapper component, which doesn't actually work for the react-transition-group API!
2020-04-27 10:14:13 -07:00
Matt Dunn-Rankin
7d4cedb146 oops, restricting the same zone is not conflict! 2020-04-26 23:26:27 -07:00
Matt Dunn-Rankin
47117d08a3 docs for OutfitResetModal 2020-04-26 01:45:17 -07:00
Matt Dunn-Rankin
821aa7f663 SpeciesColorPicker docs 2020-04-26 01:44:26 -07:00
Matt Dunn-Rankin
864e275769 SearchPanel docs & cleanup 2020-04-26 01:42:24 -07:00
Matt Dunn-Rankin
22d75d90c1 ItemsPanel docs + cleanup 2020-04-26 01:14:31 -07:00
Matt Dunn-Rankin
5ae60d91d2 docs for util! 2020-04-26 00:46:05 -07:00
Matt Dunn-Rankin
776bc33329 create ItemsAndSearchPanel, simplify search refs 2020-04-26 00:37:58 -07:00
Matt Dunn-Rankin
5371cbbd4a docs for App component 2020-04-25 23:57:11 -07:00
Matt Dunn-Rankin
01c3f1f2fa move most of the app into a src/app subdir
I think the index stuff was getting too easy to confuse for app code!
2020-04-25 23:52:20 -07:00