Commit graph

574 commits

Author SHA1 Message Date
c3c8d924b5 add other colors to modeling GQL 2020-09-15 03:06:17 -07:00
32822b250d add colors to modeling query, no change to gql yet
This updates the MySQL procedure to get the important special colors, but keeps the GQL behavior the same by only filtering to Blue. Just an incremental step before changing the behavior, to make sure I've gotten it right so far!

Snapshots significantly updated, but, from scanning it, I think that's expected changes from actual modeling progress. Hooray!
2020-09-15 02:38:23 -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
fa0ae3fbe1 add item description to item page 2020-09-12 23:23:46 -07:00
0725a7b1e8 launch item page links in new window when embedded 2020-09-12 23:10:29 -07:00
3feade9241 add focus state for own/want checkbox buttons 2020-09-12 22:45:58 -07:00
3ecdd265c2 smarter cache lookups for "do we own/want this?" 2020-09-12 22:39:38 -07:00
2cfafce768 add own/want buttons to item page 2020-09-12 22:21:00 -07:00
0b724f7509 add own/want badges to items in wardrobe 2020-09-12 20:02:56 -07:00
dcf2ec6a26 embed item page in wardrobe page drawer 2020-09-12 19:29:20 -07:00
056b238462 better partial item data loading
Here, we add loading skeletons to lots of individual elements, instead of doing a whole item placeholder skeleton. That helps when coming from pages where we have some data, like name and thumbnail, but things is isNc are still missing.
2020-09-12 18:32:06 -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
ef7ba58c90 refactor ItemPage a bit
to prepare the way for the other content
2020-09-12 17:27:00 -07:00
4f6f3640bb start building item page 2020-09-11 23:56:47 -07:00
ebb8c63ac6 page title upgrades 2020-09-11 23:54:37 -07:00
a52bd3e3bb fix some old lint errors! 2020-09-11 23:27:23 -07:00
76ad917843 rename ItemsPage to UserItemsPage
this is because I'm making ItemPage now lol
2020-09-11 23:20:06 -07:00
9143bacbe5 fix typo in comments 2020-09-11 22:36:38 -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
d1262f77d7 sort trade list matches to the top of item lists
Items with the "You want this!" or "You own this!" badge will now sort to the top of their respective lists!
2020-09-11 22:04:37 -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
45ffa92f1d add itemsTheyWant to user GQL 2020-09-11 21:34:28 -07:00
c0f0e5688c include item lists in itemsTheyOwn
This adds the owned items to the user items page, and also means that owned items in lists will be tagged for the modeling page
2020-09-11 21:23:14 -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
93564ee6bd more realistic loading state into WardrobePage
Here, we extract a lean WardrobePageLayout component, so that we can bundle it into the main app as a loading state for WardrobePage.

This means that clicking Start from the homepage will, instead of flashing the screen to white while WardrobePage loads, show the correctly-sized black/white page layout instead.
2020-09-10 02:54:22 -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
0975a94511 code-split nav bar out 2020-09-10 02:32:14 -07:00
0fa378ec6c lol I triggered that weird comments bug again XDD 2020-09-07 21:17:07 -07:00
75ffd813e9 oops, fix bug in Chakra globals
ahh, right, I was overriding their html/body styles! stop doing that 😅
2020-09-07 21:11:10 -07:00
901a6b14f0 add gentle border to modeling cards 2020-09-07 21:06:25 -07:00
75df0cc445 create nav menu, move dark/light toggle to left 2020-09-07 21:02:28 -07:00
0c3d9443c2 upgrade to next Chakra RC
some regressions in here with global styles and color mode! I think we got it fixed though!
2020-09-07 20:59:38 -07:00
bebb8e2d11 add Modeling link, permanent home link, subtleness 2020-09-07 19:48:03 -07:00
d4c2a681ab add some extra loading flair
just some text to keep you busy in the longer loading cases!
2020-09-07 00:34:01 -07:00
0c614deb41 add focus/hover responses to modeling page cards 2020-09-07 00:14:44 -07:00
dba8eed7e5 add dark mode styles for modeling page 2020-09-07 00:03:46 -07:00
626b36319a add a badge to items the user owns 2020-09-07 00:00:56 -07:00
6a923a55a0 add links to modeing hub cards 2020-09-06 23:51:51 -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
1d244fd1ea wider page layout 2020-09-06 22:58:06 -07:00
578d0c45f6 use small-sized image for home link icon 2020-09-06 19:01:12 -07:00
9d6ec247cf avoid re-layout from header bar when login loads in 2020-09-06 18:54:27 -07:00
0a6a9121f0 fix wrapping when username is too long for the header bar 2020-09-06 18:52:56 -07:00
c9ef20edf7 max width to the entire page layout 2020-09-06 18:45:20 -07:00
b086a4a8d7 add cute back to home link 2020-09-06 18:42:39 -07:00
e33e5fb88f shared page layout component 2020-09-06 18:12:34 -07:00
5a91dd2f2a in-memory cache for modeling query
I'm using my first ever MySQL Store Procedure for clever cleverness in caching the modeling query!

I realized that checking for the latest contribution timestamp is a pretty reliable way of deciding when modeling data was last updated at all. If that timestamp hasn't changed, we can reuse the results!

I figured that, because query roundtrips are a bottleneck in this environment, I didn't want to make that query separately. So, I built a MySQL procedure to do the check on the database side!
2020-09-06 15:49:08 -07:00
f73211a50e add GQL endpoint for items that need models 2020-09-06 02:50:04 -07:00
655a7e281c remove "As a reminder" from a support notif
Oops, I meant to remove this from both PetAppearance mutation loggers, but I guess I only removed it from one!
2020-09-06 02:11:58 -07:00
3512418a66 refactor GQL typedefs/resolvers into separate files
get that giant index file broken up a bit!
2020-09-06 02:11:22 -07:00
453953dded simplify validPetPoses out of the server directory 2020-09-06 00:40:00 -07:00
88862f9ce7 simplify petAppearance cache lookup, remove hacks
I think I got all up in my head about direct queries for this one, because of a previous implementation I had in mind, and I forgot that I could just query species and color from the cache by reference without breaking out of the API provided to the cache function!

I also learned in here that I _can_ look up things from the root by doing `readField("allSpecies", {__ref: "ROOT_QUERY"})`, which I struggled to figure out my previous time. I couldn't figure out how to read an uncached field with arguments (I couldn't quite figure out how to build a proper FieldNode, and passing the string form seemed to provide `null` to the `species` cache field reader), but it's probably doable!
2020-09-05 16:37:17 -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
Matchu
e2b5486168 GraphQL for user's itemsTheyOwn 2020-09-04 05:57:21 -07:00
dac7a682d4 oops, I broke the cached data script 2020-09-02 23:19:50 -07:00
ba004ae656 oops, fix build errors from using future syntax
worked in some local contexts, but the prod build failed!
2020-09-02 23:07:44 -07:00
12b87ee7d1 set up auth on the server + test utils 2020-09-02 23:00:16 -07:00
f3013c2956 add basic user data to GraphQL API 2020-09-02 16:09:11 -07:00
f351c7013c hide user info until it's done loading 2020-09-02 15:41:51 -07:00
8f4bbcdafa update user ID format in HomePage 2020-09-02 15:32:26 -07:00
6982f00729 script to export users to auth0 2020-09-02 03:49:58 -07:00
3c3d18d371 add auth0 for login
Gonna need to import our folx into it, but gosh it would be nice to not be responsible for this anymore 😬
2020-09-02 03:06:09 -07:00
f0c50eecb7 align item elements to the ~top of the row
Essentially I want the center-y visual balance around the image, and the name and _one_ line of tags. If there are extra tags, I want that to go down on its own, rather than bringing down the image+buttons to center against them.

The single-line-of-tags case is the most common, and I think it makes things feel more consistent for all the items to stick to that basic layout, while trying to keep that layout feeling center-y
2020-09-02 01:03:51 -07:00
62629865d8 stop removing items after you try something on
I was getting annoyed by how, when you're using search, trying on an item will remove conflicting stuff, and then if you decide you don't like what you tried the old stuff _doesn't come back_

As of this change, it does! When you start a new search, we save the outfit state, and then whenever you change the items we ask "hey can these old ones safely be re-worn again?" and re-wear them if so.
2020-09-02 00:53:35 -07:00
46b8245b9a rearrange item buttons for consistency
On the search panel, not all items have the remove button, and it's confusing to have the other buttons be in inconsistent positions!

Move the Remove button to the left side of the list, so that everything else is positioned the same regardless
2020-09-01 20:45:30 -07:00
99feddb859 fix pagination ish
Okay, we handle the new pages correctly! Still some weird bugs when you send requests near each other? Probably wise to migrate to Apollo's new way of doing this
2020-09-01 20:30:18 -07:00
a11ff1326b actual zone search support? owo 2020-09-01 20:06:54 -07:00
821d05c141 refactor to use new query object in SearchPanel
not actually including zone in the GraphQL query yet, but it's available in the right location now!
2020-09-01 19:53:38 -07:00
479f43ed22 pretty UI for zone search suggestions 2020-09-01 19:43:25 -07:00
10563629ef misc zone search fixes & improvements 2020-09-01 19:11:33 -07:00
0088c3f193 first draft of search zones
It doesn't affect the actual query yet, and it looks bad! But it exists!
2020-09-01 18:59:05 -07:00
d013dd6d89 WIP: search suggestions 2020-09-01 18:05:31 -07:00
eab1b99052 use cache restore instead of field defs for Zone
This is just an implementation thing, but I realized we can just insert the Zone data into the initial Apollo cache, instead of doing weird field definitions

I _do_ still want the @client tags in the queries though, to tell them not to make server requests at all
2020-09-01 18:02:59 -07:00
612e549ddc extract SearchToolbar into a separate file
This is in preparation for extending it with more UI stuff to auto-suggest zones!
2020-09-01 17:49:12 -07:00
bf465d802e item searches by word, not phrase
Been bothered by this for a while!

My hope is that this isn't a notable marginal performance hit—we were already walking the table and doing string ops anyway, I can't imagine adding to that is actually that much of a marginal lift, when the main bottleneck was probably reads. And the perf should be identical for simple single-word queries anyway. But we'll see how it feels!
2020-09-01 17:35:41 -07:00
900f055b1b fix stray console warnings
Some unused vars, and some missing React keys!
2020-09-01 17:20:08 -07:00
6d968cc385 show incompatible items in the outfit list
This was a subtle little thing for a while! If you switch species/color, such that an item doesn't fit the pet anymore, we used to just hide it. Now, we show it in a list, so that you can understand what went wrong, and have the option to remove it.
2020-09-01 17:17:45 -07:00
b7c958c39b don't restrict zones if the item is not compatible
Previously, if you switched species/color such that one of your items was no longer compatible, we _would_ still apply its zone restrictions to the visible layer set.

In this change, we fix that server-side, since I think it makes the most sense for an empty appearance to be truly empty!
2020-09-01 17:00:27 -07:00
574199575b oops, move restricted zone icon back to the right
I had it there before, but I switched it back in the recent tooltip refactor, oops!
2020-09-01 04:18:53 -07:00
f64b882de1 hide unnecessary zone groups
This was bothering me, I'm surprised and pleased by how easy it seems it was to fix? :)

The strategy is just, look for groups that are provably redundant, and filter them out.

I hope it's correct! It's definitely cozier. Kyrii Mage items are good tests, they have a lot of interesting zones!
2020-09-01 03:53:24 -07:00
d630c7355a more & better item badge tooltips 2020-09-01 03:50:43 -07:00
e95cc36995 undo badge streamlining
I figured that we'd want simpler UI in the ItemsPanel when possible… but now that we've got it pretty simple and comfy, I think the consistency is better
2020-09-01 03:15:19 -07:00
fd0edeca3d use simpler nc/np tags in the list 2020-09-01 03:01:02 -07:00
4a4f4f9c63 move NC tag onto the thumbnail
oh yeah I'm starting to dig this :3
2020-09-01 02:27:16 -07:00
dec9d76601 zone badges on items
These are nice! :)

The `hideSimpleZones` option I'm not sure about yet, but I figure that:
1. For a new user just doing simple outfits, I feel like the double data on the items page just looks silly, so I want to streamline for that
2. But I _do_ want to let the user think about zone complexity when things _are_ multi-zone.

I did also consider just hiding the zone badge for the header you're under, but I figured the consistency of having the item and its badges look the same in all the places in the list was more important.
2020-09-01 01:18:24 -07:00
3a6e3fac8e add isCommonlyUsedByItems to Zone
This is in preparation for hiding bio zone restrictions but showing item zone restrictions!

I also refactor the build-cached-data script substantially, to run GraphQL against the server instead of a custom query.
2020-09-01 01:16:30 -07:00
8f9f1a14de better NC badge, with name text wrapping
a bit unfortunate to be wrapping long item names on mobile now, but heck there's an info button, should be fine
2020-08-31 23:54:54 -07:00
f79379e3d3 perf improvement for PosePickerSupport
oops, forgot to tag this as @client so the server wouldn't bother with a zone lookup!
2020-08-31 23:31:56 -07:00
d2aab1da9e add NC badge to items
it's cute!
2020-08-31 23:28:35 -07:00
c3d8ead8f8 add NC badge to items 2020-08-31 23:27:21 -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
e40ec9bb05 fix typo in PosePicker 2020-08-31 23:08:03 -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
4a91d0cab8 include glitched states for validPetPoses
ahh, in a recent change I made glitched states valid for canonical poses, but didn't make the corresponding change here! This meant that I think the PosePicker showed them, but other ways of getting to them didn't work, including the Candy Acara (who is 100% marked glitched) was no longer pickable at all
2020-08-31 17:46:11 -07:00
bfb0979801 remove hover effect from item loading placeholders
this has been annoying me for a while 😅 it's confusing and surprising that they act interactable when they very much aren't yet!
2020-08-31 17:41:28 -07:00
64ad77ec49 focus dropdown when opening support pose picker
Oops, opening the dropdown would auto-focus the left arrow button, because it's now the first focusable element! Make explicit that we want the dropdown instead.
2020-08-31 01:32:25 -07:00
214a93008b don't cache poses for Support tool
I noticed in prod that the Vercel edge cache can show old data in the Support tool right after you edit it and reload the page, which is super confusing!

In this change, we stop caching the endpoint we use for Support tools, so that the Support tools always feel real-time and trustworthy. (The standard pose picker might still be cached, so it could be a bit confusing for that to be out of sync, but at least you can toggle into Support mode and see that your changes happened _there_, so you don't panic that they're _gone_.)
2020-08-31 01:17:18 -07:00
2cc643fd4c remove discord support log thumbnail note
It's helpful, but they were making the log messages too tall imo, esp when you consider they'll often come in label batches
2020-08-31 01:10:18 -07:00
59f6fe12ff remeasure pose picker after changing appearance 2020-08-31 01:04:27 -07:00
ce2482735c lol oops, fix labeling Sick poses 2020-08-31 00:59:07 -07:00
1c8eba4698 Support tools can set appearance glitched state!
this is also very good! :3
2020-08-31 00:48:54 -07:00
2929c3373e serve glitched appearances, only if no others
Previously, I was filtering out glitched appearances from the canonical ones.

But now, I'm thinking it's better to serve glitched ones than no data for a pose at all.

I'm inspired by the case of the Candy Acara, which has _only_ glitched appearances in our db, and I'd like to mark them for reference—but then the site would treat it as no data at all.
2020-08-31 00:37:12 -07:00
1ef05adce4 Support can label pet poses!
it's good shit, y'all
2020-08-31 00:32:17 -07:00
45ab35216f Add arrow buttons to PosePickerSupport
Easier to move between appearances quickly! I'm adding this in anticipation of a use case of rapidly labeling Unknown appearances—I want it to be easy to label one and go to the next!
2020-08-30 23:27:43 -07:00
5ce5356825 migrate to new useSupport hook
Just smoothing out the API for cases where you want to know `isSupportUser`, but not the secret!
2020-08-29 14:54:02 -07:00
4e923746ce Show empty PosePicker for Support users
For most users, I want to hide the pose picker if there's not actually anything to pick from.

But I want Support users to be able to open it and use Support mode, to inspect and label Unknown poses!

In this change, I add new UI to show a question mark pose picker button, and a note explaining the empty picker; but only show them for Support users.

I also made a new `useSupport` hook, to replace `useSupportSecret`, now that I have a use case for "is support user?" that doesn't require the secret. Will migrate the rest!
2020-08-29 14:49:37 -07:00
5f3b627187 sort Unknown appearances to the bottom of support 2020-08-29 14:33:00 -07:00
d41f80518a fix bug to resize PosePicker when it changes
Previously, toggling between the two PosePicker modes could dramatically disrupt the layout, because Popover didn't know to re-measure itself.

In this change, we add a hacky workaround to simulate a window resize event in moments when we know the content is changing. (The realistic ideal solution would still have these manual triggers, but would use an official API in Chakra to notify the Popper instance directly.)
2020-08-29 14:19:43 -07:00
05e5c5ad3e add petAppearanceById client caching
If we already got this PetAppearance, now `petAppearanceById` knows how to serve it from the client cache instead making a network request!
2020-08-29 13:23:41 -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
7954c11c74 update support to use petStateId -> id 2020-08-28 21:06:33 -07:00
10a6eff299 WIP pose picker support 2020-08-28 21:06:33 -07:00
5334801aba add zone restrict hack tools
similar to the layer zoning tools I just rolled out!

not thrilled about the outfit state hacks here bc of how we cache restrict on the appearance rather than the item, but oh well! this escape hatch is pretty easy and solid, and it's a cleanup for another day

Also did a code split here, now that this file is getting larger, to only load this for support users. I don't actually care about restricting console stuff to support users (I'd honestly rather not), but saving the bytes is worth it I think, since support mode is pretty easy to enter when we need to
2020-08-28 00:12:41 -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
a58db2dcd1 add restricted zones to item support UI
Honestly kinda embarrased I forgot this!
2020-08-27 23:09:53 -07:00
4a6a48ccd1 fix typos in item/layer support tools
Oops, I goofed up a fix to "Item ID" and "DTI ID" one time, and was labeling layer IDs as item IDs! Fixed!
2020-08-27 22:33:32 -07:00
136df9d2a2 add DTIHackLayerZone fn to console
A dev tool to preview what an item would look like in a different zone!

To use, open the browser console, and type `DTIHackLayerZone(layerId, zoneIdOrName)`, but replace `layerId` with the layer's DTI ID, and `zoneIdOrName` with either the zone ID or its name in quotes.
2020-08-27 22:32:28 -07:00
b3aa82cc66 enable Apollo dev tools in production
I'm doing this to see if I can give Chips a cute way to hack into local data :p
2020-08-27 21:44:54 -07:00
59ffc86481 update PetAppearance id to match petStateId
Previously, we were using a custom-y `id` field to help Apollo cross-reference `petAppearance` queries with the results from bulk `petAppearances` queries. Now, instead, we deprecate `petStateId`, and start using `id` to have the same stable value!

This is in anticipation of pet appearance support tools: a stable ID will make it easier to edit them, esp changing their pose (which would otherwise have changed the ID!)
2020-08-27 21:32:22 -07:00
bf21716db0 simplify PetAppearance client-side caching
Previously, we would load all `petAppearances` in `PosePicker`, and use cache keys to instantly find it again as a single `petAppearance` in `OutfitPreview` after switching poses.

In this change, we instead have `PosePicker` explicitly load all 6 poses as separate `petAppearance` queries. This simplifies cache sharing between the two components' queries: Apollo can do it automatically, because they were queried the same way in the first place.

I'm doing this in preparation for changing the `id` field of `PetAppearance`, to become `petStateId`. This will help me build pet appearance support tools, by giving the appearances stable identifiers that won't be affected by editing which pose an appearance is!
2020-08-27 21:26:24 -07:00
67e8d6a1f3 fix support logging body names to not be 8-bit
Huh, some 8-bit species are broken and use the standard body ID!

This was causing our body name query to prioritize 8-bit for standard assets, as the alphabetically-first compatible color; but 8-bit isn't marked standard, so the function kept it labeled 8-bit.

This should fix it and show "Standard Draik" when deleting an asset off the standard draik body!
2020-08-21 16:25:04 -07:00
9f3fe820c2 add snapshot tests for loadBodyName
this is setup for the next change, where we'll get to see how the query change affects the body name!
2020-08-21 16:22:16 -07:00
7b1d2d67f0 add body name to support log for removed layer
In practice I saw that this doesn't actually tell you what you _really_ want to know about where the change happened! You want to know it was broken on the Acara or w/e.
2020-08-20 23:23:33 -07:00
10cea2ff92 log support actions to Discord
aaa these came out so nice!!
2020-08-20 23:16:59 -07:00
4fa07de299 support logs for manual color changes
it writes to our discord server, owo!
2020-08-20 22:25:41 -07:00
3f2b4df8f3 remove stray unused outfitState prop
right, we get this value from context now; that's why this STOPSHIP was here but not actually breaking anything!
2020-08-20 21:46:32 -07:00
6821c2b734 Support tool: Remove layer from item
Heck yeah, let's clean these fuckers up!
2020-08-20 21:40:05 -07:00
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
7a3a7eeaf9 update test snapshots 2020-08-17 18:49:54 -07:00
4977f1ee54 Revert "cache zone data"
This reverts commit 0f7ab9d10e.

The Production Vercel deploys don't seem to like how I did this build trick, even though the Preview deploys seem fine with it 🤔 Reverting for now, sent a message to Vercel support.
2020-08-17 18:49:37 -07:00
a3423cd6d6 cache asset manifests in the db
Here's just some simple caching: we try to load the asset manifest from the db with the rest of the asset. If it's not present, we load it via HTTP, and write it to the database.

I might try to do a bulk write of manifests at some point, too.

This is because I noticed that one of the main bottlenecks in most of the endpoints now (and definitely the highest-variance) was loading from images.neopets.com.

Another approach I considered was HTTP/2 to load the manifests, because it kinda looks like the server is refusing to open all these sockets at once and effectively does the requests in waves? But images.neopets.com doesn't support HTTP/2 right now anyway, so oh well! (And that would have probably cut us down to ~250ms of HTTP time still, instead of ~600–700. Also, why is network out of Vercel so slow? :p)
2020-08-17 17:50:01 -07:00
0f7ab9d10e cache zone data
I noticed that, while looking up zone data from the db is near instant when you're on the same box, it's like 300ms here!

In this change, we start downloading zone data into the build process. That way, we can have a very fast and practically-up-to-date cache (I'm not sure I've changed it in many years), while being confident that it's in sync with the database source of truth (for things like join queries).
2020-08-17 15:28:05 -07:00
b300718b4a itemSearchLoaders should prime item loader cache
Another perf issue I noticed in Honeycomb for the SearchPanel operation! We re-load the items again by ID, even though we already got them by name. Let's stop that!
https://ui.honeycomb.io/openneo/datasets/dress-to-impress--2020-/trace/aMuhsTjQFZY
2020-08-17 01:41:38 -07:00
d621b4c1a7 fix caching for petTypeLoader
Oops, of course, we weren't actually taking proper advantage of the dataloader here! The queries got over-complicated, but more importantly, subsequent requests to the same loader would re-submit the query!

I noticed it in the SearchPanel operation, in this Honeycomb trace:
https://ui.honeycomb.io/openneo/datasets/dress-to-impress--2020-/trace/aMuhsTjQFZY
2020-08-17 01:33:34 -07:00
6fc508589a don't do Honeycomb in test env 2020-08-17 01:27:05 -07:00
f7997b4dc9 some Honeycomb fixes
We got bit by the "can't run anything after the response finishes" thing

so I'm just forcing the response to wait for Honeycomb submit to finish

I hope this isn't like, just awful for perf lol. but puts to honeycomb seem fast?
2020-08-17 01:16:35 -07:00
ce028e4956 add Honeycomb logging
This will let me see traces for stuff!
2020-08-16 23:28:41 -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
281df33278 update snapshots 2020-08-14 22:10:07 -07:00
aa6ce12bbe add Neopets ID to layer support modal 2020-08-14 22:09:52 -07:00
380cbf543b add mutation to set item explicitly body specific
now that Support feature works!
2020-08-14 22:01:27 -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
02c959a837 add explicitlyBodySpecific to Item GQL
for the upcoming Support feature!
2020-08-14 21:12:13 -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
947d35fbfb update test snapshots
I skipped this in the past runs because I had a hard time getting consistency from the results… but they seem to be behaving now?

It really seemed like there were some races on certain query orders… maybe there still is, but my more-reliable connection today is making them resolve in a more consistent order?

Anyway if I see goofs again, I'll consider adding a snapshot matcher that isn't picky about query order 🤔
2020-08-09 23:03:53 -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
05fe511bda stop connection pooling
oof, got "too many connections" from mysql, this is probably gonna be a scaling issue in time… for now, stop requesting a pool of 5, even on dev lolol, and just go with a single connection per instance
2020-08-01 01:42:58 -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
ac12f6bb55 oops, fix isNc and stop loading items early! 2020-07-02 20:06:04 -07:00
3c4354d14b update getValidPetPoses snapshot 2020-07-02 14:46:04 -07:00
4c78abee96 fix bug resolving item fields under pet outfit 2020-07-02 14:33:47 -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
ade563ddcd server can read outfit data 2020-06-24 19:05:07 -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
82078d20bb updated prod test snapshots 2020-05-31 16:08:26 -07:00
Matt Dunn-Rankin
03cde98eae fix bug querying depth on restricted zones 2020-05-31 16:08:17 -07:00
Matt Dunn-Rankin
caefc6610c fix bug loading species/color translation on pet 2020-05-31 16:00:59 -07:00
Matt Dunn-Rankin
ce81543957 add rarityIndex, isNc to API 2020-05-31 15:56:40 -07:00
Matt Dunn-Rankin
6f5e03da9c trim item search queries 2020-05-31 15:52:54 -07:00
Matt Dunn-Rankin
fb8ccee797 skip non-SWF (music) assets 2020-05-27 00:47:13 -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
772917fde6 add unknown and UC to valid pet poses 2020-05-23 11:48:53 -07:00
Matt Dunn-Rankin
4d6a6faf4c compact the svg logs 2020-05-23 11:32:05 -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