Commit graph

904 commits

Author SHA1 Message Date
6738f07e64 Add expand-on-hover effect to "Customize more" 2021-02-06 15:52:47 -08:00
7620d3f315 Fix alignment bug on ItemPage 2021-02-06 15:21:57 -08:00
922e150020 Extend itemSearch, deprecate itemSearchToFit
I'm gonna extend `itemSearch` to also look up the total number of results, and the fragmentation between `itemSearch` and `itemSearchToFit` finally caught up with me :p

I've deprecated `itemSearchToFit`, and moved the fit parameters into a new optional `fitsPet` parameter for `itemSearch`.

I'm going to keep `itemSearchToFit` around for now, because old JS builds still use it, and I'd like to avoid disrupting folks. But I'm not going to add the new total results field to the results object it returns, and that's gonna be okay!
2021-02-04 23:34:43 -08:00
b9aac7d8d2 Add "Search all items" placeholder to item search
I was starting to write a Cypress test, and noticed there was no placeholder to use for searching, and I don't know how that escaped my notice for so long! I guess I commented it out for some reason, but I forget why, and this seems fine now! (Looks like we removed it when we added zone suggestions? Idk!)
2021-02-04 22:23:34 -08:00
7997be3386 Install Cypress for e2e testing
It's my first time using it, but it feels great already, I'm excited!

Getting it set up in WSL OpenSUSE was a bit tricky, but we got there! Had to install a lot of deps, a font package, and add some basic config to ~/.bashrc.

This guide gave us most of it, but we had to do a couple other little things, too! None of them were too nasty though, just some Googling and trying things. https://nickymeuleman.netlify.app/blog/gui-on-wsl2-cypress
2021-02-04 22:19:10 -08:00
927d783a96 Delete GQL query tests
I haven't been keeping these up to date, so at this point they're more overhead than they're worth.

Helpful in the early days when we were iterating fast and making more mistakes, but now we're more solid (and I learned how to just resend queries from devtools :p)
2021-02-04 21:24:53 -08:00
580fd79b8c Fix loading state after each species face click 2021-02-03 16:14:08 -08:00
c3cb923b58 Increase preview size on item page 2021-02-03 16:08:02 -08:00
f3e19158d0 Fix crash when using old tab to load item page
Oops, the new `canonicalAppearance` arguments couldn't handle being omitted rather than being null, due to a low-level SQL call site that cares about the difference.

This meant that loading an item page in an old tab, with an old copy of our JS, could cause a crash.

Now, the backend will be okay with queries from old pages, and respond the same as before!

This isn't a huge deal, because once everyone is on the new JS we won't send queries without this parameter anyway… but I like my optional arguments to actually BE optional, without surprises lurking >.>
2021-02-03 15:51:49 -08:00
8970b6af26 Remove stray console lines 2021-02-03 15:45:19 -08:00
958d9c16b8 Change "Not modeled yet" -> "Item needs models" 2021-02-03 15:44:53 -08:00
be151ab400 Save user's preferred color for item previews 2021-02-03 15:33:23 -08:00
787dc7da87 Save user's preferred species for item previews 2021-02-03 14:27:02 -08:00
13a5a0a7aa Update "New updates" section on home page 2021-02-03 02:20:03 -08:00
75fccf1adf Load best available pose in SpeciesFacesPicker
Oh right, I left in a hack to just always pick HAPPY_MASC or HAPPY_FEM, back when it was just the basic colors. Now that we're all the colors, we need to be able to handle fallbacks for missing or unlabeled poses, too!!
2021-02-03 02:10:52 -08:00
082af11b5b Don't say "(Can't be this color)" while loading 2021-02-03 01:53:09 -08:00
4431c43663 Enable free color/species input on ItemPage
Previously, I kept this constrained to valid species/color pairs only, because we didn't have a great error state. But at this point, it feels worse to throw people out of the color they're looking at, and to make it harder for them to pick the color in the first place!
2021-02-03 01:51:51 -08:00
6a4be0390a Show a fallback face for valid face options
Sometimes we just don't have the image! Don't let that stop people from clicking it tho!
2021-02-03 01:47:39 -08:00
a293dc56b5 Disable faces that can't be the chosen color 2021-02-03 01:41:03 -08:00
8de85fbc63 Pulse effect while SpeciesFacesPicker is loading
like the Skeleton elements!
2021-02-03 01:27:16 -08:00
27d4bed172 Cross-fade images in SpeciesFacesPicker
Wowie, this was hard to get right, but I'm very pleased with where it ended up!! React `key` stuff was a total brainwave, and even though it depends on kinda obscure knowledge, it made this whole thing WAAAY easier, omg
2021-02-03 01:24:13 -08:00
a42e696955 Show selected color faces for SpeciesFacesPicker 2021-02-02 23:29:06 -08:00
19482be2b8 Use ES module syntax in backend instead of require
Ok cool, so apparently another win we get from using `ts-node` is that I can finally easily use some non-native-Node features like ES module import syntax, for consistency with what I'm doing in the main app source! That was getting on my nerves tbh. Ooh I bet I can finally use `?.` too, I've had to rewrite that a bunch…
2021-02-02 22:26:55 -08:00
1dda0d4edb Fix dev command for TS support
Gosh, I'm really down this rabbit hole, huh? :p Anyway, turns out the `vercel dev` command contains a _fork_ of ts-node that doesn't respect the `ts-node` override key in `tsconfig.json`. But it does respect the env var!

So I've now set up `yarn start` to invoke `vercel dev` with the new env, which in turn invokes `yarn dev` to start the create-react-app dev server. Whew! (Probably a better dev experience tbh.)
2021-02-02 22:25:54 -08:00
4483df2040 Run Prettier on my TS file
VS Code wasn't running it automatically; now we've got it set up!
2021-02-02 21:40:43 -08:00
b58db4a629 Finally finish TS setup, build works!
`yarn build` was crashing on my `build-cached-data` script, because we were trying to run the Typescript file uncompiled!

Now, we run it with `ts-node`, which transparently compiles Typescript files before execution. Phew!

`react-scripts build` made some automated changes to `tsconfig.json` for compatibility with `create-react-app`, and I also added a `ts-node` section to override one of them so we can compile to CommonJS for `ts-node` script execution!
2021-02-02 21:38:57 -08:00
d7028bc2cc One more TS fix, adding a tsconfig.json 2021-02-02 19:29:58 -08:00
cb87fd8a9a more TS fixes 2021-02-02 19:22:47 -08:00
cee5e128cb fix TypeScript build errors
That's what I get for forking a TS file, not knowing TS, and ignoring the errors lol :p
2021-02-02 19:20:02 -08:00
d3b9f72e67 Add stale-while-revalidate cache headers
Oh yay, I'm pleased with this! I hope it works out well!

stale-while-revalidate is an HTTP caching feature that gives us the ability to still serve relatively static content like item pages ASAP, while also making sure users generally see updates quickly.

The trick is that we declare a period of time where, you can still serve the data from the cache, but you should _then_ go re-fetch the latest data in the background for next time. This works on end users and on the CDN!

I've scanned the basic wardrobe and homepage stuff and brought them up-to-date, and gave particular attention to the item page, which I hope can be very very snappy now! :3

Note to self: Vercel says we can manually clear out a stale-while-revalidate resource by requesting it with `Pragma: no-cache`. I'm not sure it will listen to us for _fresh_ resources, though, so I'm not sure we can actually use that to flush things out in the way I had been hoping until writing this sentence lol :p
2021-02-02 19:07:48 -08:00
c00df62bdc More cache hint tags for Item etc
Trying to get that Item page fast!

I don't really want to ship this as-is, because I'd really like to get stale-while-revalidate working before shipping a 1-week cache timer… will be tricky though!
2021-02-02 17:51:54 -08:00
f0b3047112 Defer tooltip renders in SpeciesFacesPicker 2021-02-02 17:08:39 -08:00
bccb36dda2 Improve SpeciesFacesPicker render performance
The Tooltip elements seem to still be taking a bit, I don't really know a great workaround for that… could maybe split it out into a separate box and defer the rendering on it, so it doesn't block the first pageload?
2021-02-02 16:56:26 -08:00
6549bba756 Remove stray console.log 2021-02-02 16:48:08 -08:00
6d05fb8680 Fix bug in SpeciesColorPicker loading state
Oops, I made a fix to the color picker, but not the species picker! Updated them both to match.
2021-02-02 16:46:07 -08:00
f699d867e5 Disable species picker for species-specific items 2021-02-02 16:45:28 -08:00
6c84baca03 Hide alt text while species faces are loading
and some nicer typography when it fails!
2021-02-02 16:35:54 -08:00
adecb4167b Remove extra focus outline for SpeciesFacesPicker
Before the tooltips, I thought the focus state wasn't clear enough at a glance, so I added an extra focus outline to the species faces picker area. Now, I think it's clear enough with the species name tooltip popping up!
2021-02-02 16:31:55 -08:00
e788040315 Guess when item is species-specific, for UI hints 2021-02-02 16:29:20 -08:00
6f19ef8c88 Fade out incompatible pets, too 2021-02-02 16:06:33 -08:00
382c1c9da3 Fix tooltip hover flicker in SpeciesFacesPicker 2021-02-02 16:01:46 -08:00
cbe519c59f Update to latest Chakra UI
I found a bug, and just wanted to make sure the latest version didn't have it! So hey, update time!
2021-02-02 16:00:49 -08:00
28f457e21f Always show species face tooltip in keyboard nav 2021-02-02 15:43:36 -08:00
cdff51dfef Hook up compatibility data for SpeciesFacesPicker
It looks really nice!! :3
2021-02-02 15:22:08 -08:00
93c00c5e79 [WIP] Species face compatibility UI
Now, when a species isn't compatible with an item, we gray out and sadden the pet, like on Classic DTI!

For now, I've hardcoded only the Zafara body ID to match. Let's do server connection next!
2021-02-02 14:47:17 -08:00
b0a8b41c80 Add focus state to species faces picker 2021-02-02 14:19:11 -08:00
d16bfd9781 Use higher-res pet faces on higher-res devices
Didn't realize there was a convenient 150x150 face thumbnail we could use, so hey! Nice!

At one point I was considering generating our own thumbnails, but this is making me increasingly interested in just scraping the Rainbow Pool or something :p
2021-02-02 13:15:42 -08:00
33353e5328 Fix uncaught promise error in search results
Sentry issue IMPRESS-2020-20 doesn't have a clear backtrace, but it looks like the usual thing where we trigger an Apollo query directly, and forget to catch a potential error in the returned promise. I noticed that the last thing the user did was type in the search bar, and got a _caught_ error for the initial search!

Scanning the SearchPanel file, I think it's likely that this was a failure in `fetchMore` for the infinite pagination.

I'm a bit worried as to _why_ we were doing infinite scrolling stuff when there were no results? I wasn't able to repro a scroll event on the empty results list, but it's plausible that it could happen. I've added a gate to not send this request when there's an error!
2021-02-01 19:08:20 -08:00
05282f4b7b Handle memory issues in OutfitMovieLayer
I think what's happening in Sentry error IMPRESS-2020-1F is that mobile devices are running out of memory, so `canvas.getContext("2d")` returns null.

Now, we have a UI affordance to let you know when this is probably what's happening!

Also, when researching this, I learned about a Safari bug where you need to manually garbage-collect your own canvas data. It's possible that Safari users have been having particular trouble with memory leaks over long sessions? I'm not sure, but it seems like a good idea to add this small garbage-collection code!
2021-02-01 18:55:05 -08:00
5d827bc78d Disable species/color picker while item page loads
Ok I think I've finally narrowed this bug down! We had one more loading case: the items page needs time to figure out which species/color to default the fields to, and passes null into the component while this loads. Now, we wait for that!
2021-02-01 18:05:29 -08:00