Commit graph

94 commits

Author SHA1 Message Date
614bad72d2 Show real zone data on item page
And some Cypress specs to test the basic cases!
2021-02-12 16:09:11 -08:00
20f9573e50 [wip] Zone info UI for item page, with fake data 2021-02-12 15:18:54 -08:00
048fb29c14 Refactor item page preview to grid layout
because I wanna add zones to the area below the faces!
2021-02-12 14:35:14 -08:00
ab21f3a8a5 Remove unused imports 2021-02-10 13:52:20 -08:00
bbb752fa65 Extract out layerUsesHTML5 function 2021-02-10 13:50:42 -08:00
0c80491f99 Add HTML5Badge to outfit page 2021-02-10 13:35:34 -08:00
bf85cef922 Fix HTML5Badge tooltip on mobile 2021-02-10 13:20:21 -08:00
d2240cc5c5 Increase item preview loading UI delay back to 500ms
I don't remember why we set it to 200ms before, but it feels too aggressive now. Idk!
2021-02-09 23:10:22 -08:00
a03ae98468 Keyboard accessibility for "item needs models" warning 2021-02-09 22:58:00 -08:00
27f441df36 Don't show "item needs models" for invalid pets 2021-02-09 22:56:31 -08:00
4aade5782f Don't flicker the HTML5 badge while loading 2021-02-09 22:55:19 -08:00
f11fbbb831 Don't show error pet preview for invalid pet state
We could also afford to figure out how to not request appearance data in this situation… but not showing the error message is a good first step lol!
2021-02-09 22:38:40 -08:00
b0eeb84d63 Disable "Customize more" for invalid pet
Oops, before disabling, we'd build a link with `pose=null`, and that would cause downstream issues on the wardrobe page.
2021-02-09 22:31:50 -08:00
c0e1c78d75 Fix SpeciesFacePicker desktop alignment
Oops, I fixed mobile alignment by centering this, but didn't realize I broke desktop alignment! Now we do different alignment on different sizes 😅
2021-02-09 21:48:18 -08:00
f29a269b94 Use prettier focus outline for HTML5Badge 2021-02-09 21:47:12 -08:00
828fb65cf4 Refactor HTML5Badge
let's de-dupe that stuff, baby!
2021-02-09 21:45:29 -08:00
b8744037d1 Add HTML5 indicator to item preview page 2021-02-09 21:39:29 -08:00
193273f00f Share appearance data via useOutfitPreview
Here, we offer a second syntax for `<OutfitPreview />`: a hook that offers the same UI as `preview`, but _also_ shares the `appearance` data.

This makes it easier to have UI that depends on the outfit appearance, without having to commit to all the `useOutfitAppearance` stuff in the parent. Same easy syntax! :3

I've refactored the item page to use this for compatibility testing, instead of using the Apollo cache (which was also cute and same perf impact, but more overhead!)
2021-02-09 20:28:03 -08:00
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
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
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
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
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
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
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
0d14fde318 Add "Customize more" button to item page preview 2021-01-26 15:09:41 -08:00
03a3f7ede4 oops, remove unused import 2021-01-25 10:59:10 -08:00