Commit graph

109 commits

Author SHA1 Message Date
5131ba40d8 Remove some now-unused ItemPage JS files
now that we're not using the React version of this page anymore!
2024-09-06 16:11:05 -07:00
b2b16a2edc Merge branch 'main' into simpler-item-previews 2024-07-09 14:26:47 -07:00
88836082f2 Release the Shopping List button to everyone
Deleting the feature-flag code to gate it, it just now always appears!
Happy launch day!
2024-07-09 13:39:20 -07:00
c55f71a000 Rename GetTheseItemsButton -> ShoppingListButton
Just for consistency with the user-facing branding!
2024-07-09 13:36:42 -07:00
81c6a4a023 Add outfit name to Shopping List page title
Just some extra flair! I had considered something like this before, but
felt it didn't flow well with the old title.
2024-07-09 13:19:23 -07:00
d7eb490ac0 Use a shopping bag icon for the "Shopping List" button
Shopping bag with check! Heck yeah!
2024-07-09 13:14:22 -07:00
c96b726a61 Rebrand the "Item Getting Guide" as "Shopping List"
Two reasons for this new title:
1. The pitch for "Get these items!" is weaker, now that we're not
   getting the power-user integrations we'd planned around.
2. I literally only just thought of it now!
2024-07-09 13:04:22 -07:00
3c415e9cd3 Refactor item page outfit-layer to use Web Components
Instead of doing all this listening to Turbo events etc to know when
outfit layers might have changed, making it a custom element and wiring
in the behavior to its actual lifecycle makes it always Just Work!
2024-07-02 22:24:26 -07:00
0a9193aed7 Add basic loading tracking to new item page preview
The UI for it is just basic for my own testing rn: it sets the preview
background to gray while loading, then back to white when done!

This uses the new CSS `:has()` selector: we have JS manage the loading
state on each layer, then the container just restyles itself based on
whether any currently-loading layers are present.
2024-07-01 17:59:07 -07:00
ea17e76c39 [WIP] Start replacing item page preview with simpler HTML-based version
Just stripping out the big React component, and having Rails output it!

There's a lot of work rn in extracting the Impress 2020 dependency from
the `wardrobe-2020` React app, and I'm just curious to see if we can
simplify it at all by pulling this stuff *way* back to basics, and
deleting the item page part of `wardrobe-2020` altogether.

In this draft, we regress a lot of functionality: it just shows the
item on a Blue Acara, with no ability to change it! I'm gonna play with
putting more of that back in.

I also haven't actually removed any of the item page React code; I just
stopped calling it. That can be a cleanup for another time, once we're
confident in this experiment!
2024-07-01 15:35:58 -07:00
56fe5e4889 Oops, fix bug in recent movie-pausing bugfix!
Oh right, this previously logic was silly: we can't count on the
*interval itself* to be reliably resetting the FPS counter state,
because the interval might not be firing!

I think this fix worked when I tried brief tests, but didn't work when
I did an (accidental) longer test, because the browser switched to a
more aggressive throttle mode, and the previous mode was close enough
on the resets for it to be fine, whereas this time the FPS counter
state got way too old.

Now, we reset the FPS counter state *exactly* when the page comes back.
2024-06-12 17:14:16 -07:00
60e9130891 Fix bug where changing tabs would *always* pause the outfit animations
We have a feature to check the movie's FPS, and pause it if it gets too
low, as a guard against especially low-performance movies. But this was
triggering in an *expected* case, where browsers intentionally throttle
interval events when a page is in the background (e.g. you switch to
another tab).

Now, our rendering is aware of page visibility: when the page is
hidden, don't bother rendering, and keep resetting the FPS counter
state, so that we can pick up with a fresh FPS counter when the page
comes back.
2024-06-12 17:05:53 -07:00
63abfa51f7 Redesign "Get these items!" button to use a cart icon instead
This helps it fit in the kinda crunchy horizontal space a lot better!
2024-05-31 17:38:25 -07:00
72c739ca0f Improve layout for "Get these items!" and "Save" buttons in editor
Make them the same size, add spacing between them, and also put the
"Get these items!" on the right, because the list is right-aligned and
the Save button has dynamic width (the save vs saving vs saved states),
so this makes things a lot more consistent and stable!
2024-05-28 17:32:18 -07:00
f84e340899 Add link to Item Getting Guide from outfit editor (behind secret link)
You can now go to `/outfits/new?features=get-these-items` to start
seeing the "Get These Items!" button in the outfit editor!

I haven't tested it a ton yet, but yeah here it is!
2024-05-28 17:06:23 -07:00
a749b331f1 Fix multi-word search in outfit editor
Oops, prior to this commit, searching for "white peach" would return
nothing, whereas now it correctly returns the "Dyeworks White: Just
Peachy Filter", like if you search in the Infinite Closet!

This solution is a bit hacky, wrote some more in the comments about how
to maybe do this better!
2024-05-06 15:08:37 -07:00
460235e7cf Fix some eslint errors
Huh, I guess my desktop workstation doesn't have this commit hook set
up. Now that I'm using my Mac again, it's catching some things I
missed!
2024-05-02 12:18:51 -07:00
8e269df3c1 Oh wow, don't use the images.neopets.com asset proxy anymore either!
Huh, I was writing up an API inventory doc to send to TNT, and was
gonna explain why we proxy these assets… but turns out we don't need to
anymore! Nice!

This is a bit fragile if they ever change their headers, so I'll
mention that in the doc, but for now, yeah sure let's save the planet
some computational effort!
2024-04-06 03:38:23 -07:00
bb90f92a06 Don't use the pets.neopets.com asset proxy anymore
Ah right, now that HTTPS works, we can skip this!
2024-04-06 03:25:06 -07:00
fcc17d3dcf Whoops, fix some style regressions for the React app!
Ah beans, I didn't notice when doing my Turbo fixes in
40804c1543, that I had accidentally
prevented Chakra from applying some of its usual global styles! This
caused some minor visual regressions in various parts of the app, e.g.,
the default border color for the search field in the wardrobe app
became way darker.

Here, instead of copy-pasting the styles and missing some parts, we
scope the global styles a bit more carefully: we first use
`extendTheme` with the same code as Impress 2020 to get a good
`globalStyles` function that includes Chakra's defaults, *then* delete
the key from the theme.

Then, in `ScopedCSSReset`, we use code similar to Chakra's own global
style application code: call the `globalStyles` function with the
current theme and color mode, use Chakra's `css` function to convert
values like `green.800` to CSS values, prepend our scoping rule onto
the selectors, and drop it into our Emotion CSS.

Tbh I was worried because when I first noticed this issue while on my
trip, I saw the black item search box border, and was like "ah dang,
did I destroy all the color in the app by breaking the part where
Chakra defines its CSS color variables??" And no, that's not actually
what happened, a lot of the app still had its colors!

So this was less pressing than I had thought, but still good to get
fixed!
2024-03-31 01:20:45 -07:00
40804c1543 Fix the Chakra CSS reset applying to too many things on item page
Finally getting around to this because, with Turbo in play, it applies
to subsequent *pages* too, oops! Previously we at least had the blast
radius of this known issue constrained to the item page itself lol :p
2024-03-13 20:57:30 -07:00
684dcb53ba Add Turbo to speed up the app, and set up for missing UJS features
Oh right, we don't have Rails UJS going on anymore, which is what
handled the confirmation prompts for deleting lists. Turbo is the more
standard modern solution to that, and should speed up certain
pageloads, so let's do it!

Here I install the `turbo-rails` gem, then run `rails turbo:install` to
install the `@hotwired/turbo-rails` npm package. Then I move
`application.js` that's run all on pages but the outfit editor into our
section of JS that gets run through the bundler, and add Turbo to it.

I had to fix a couple tricky things:

1. The outfit editor page doesn't play nice with being swapped into the
   document, so I make it require a full page reload instead.
2. Prefetching the Sign In link can cause the wrong `return_to` address
   to be written to the `session`. (It's a GET request that does, ever
   so slightly, take its own actions, oops!) As a simple hacky answer,
   we disallow prefetching on that link.

Haven't fixed up the UJS stuff for confirm prompts to use Turbo yet,
that's next!
2024-03-13 13:43:48 -07:00
0ed4e8f216 Add "Baby Body Paint" warning to Known Glitches badge in-app, too
I previously added a warning to the item page, and thought about doing
one here but was sicky and misjudged the complexity and forgot you
don't need to hook into the `knownGlitches` API field to do it! Easy
peasy for a hacky little bug message!
2024-02-27 19:22:08 -08:00
4f069a5742 Remove the GQL-based useSearchResults, everyone is on it now!
The main *intended* user-facing effect of this is that "Items you own"
and "Items you want" filters should work in wardrobe-2020 now!

It is also possible that I messed something up and that this might
break unrelated searches somehow! We'll find out!! 😅
2024-02-27 16:49:52 -08:00
ece7a02902 Remove our testing-escape-hatch for item search from the console
Did this before we had the ability to trigger searches from the app
itself, to allow me to open up the browser JS console and call this
function directly. Now we can just do it in app, goodbye!
2024-02-27 16:25:17 -08:00
f3e10dea7f Oops, fix missing field in item search results Apollo cache!
Oh right, `imageUrl` is the name of the field relative to what the app
expects, but under the hood `useOutfitAppearance` actually makes that
an alias for `imageUrlV2(idealSize: SIZE_600)`.

So we need to cache it as the same field with the same params, rather
than as just plain `imageUrl`!

This fixes the bug where wearing an item from search would require a
network round-trip and visually remove all items in the meantime.

(Also, none of this issue was visible to most users, because item
search is still feature-flagged onto the old GQL one for most people!)
2024-02-27 12:43:28 -08:00
66c1e14dd0 Add item search results to Apollo cache, use in finding item conflicts
This makes clicking on search results in the new mode actually work! It
correctly adds it to the outfit, and removes other items.

The thing that's behaving strangely is that, when you add the item, we
visually remove all items until we can finish a fresh network request
for what they should all look like. This probably means that the cache
lookup for `useOutfitAppearance` is not as satisfied with what we cache
here as `findItemConflicts` is? Something to investigate!
2024-02-27 12:19:07 -08:00
752bee3c39 Use MajorErrorMessage for search result errors
It'd be nice to customize the message a bit, but this should be rare
and I'd prefer the simplicity of just going with the default text.

I ran into this when I made a mistake in how I process the return value
of search results, so React Query caught and raised the error via
React, as intended! And I was annoyed that it wasn't logged anywhere,
so that's my motivation for this change—but also, the old message is
pretty meh and has some layout problems anyway.
2024-02-27 12:03:23 -08:00
a8cbce0864 Start working on new item search in wardrobe-2020!
For now, I'm doing it with a secret feature flag, since I want to be
committing but it isn't all quite working yet!

Search works right, and the appearance data is getting returned, but I
don't have the Apollo Cache integrations yet, which we rely on more
than I remembered!

Also, alt styles will crash it for now!
2024-02-25 14:46:27 -08:00
a3dcaa0f0e Add useItemSearch for wardrobe app, but don't use it yet!
Adding new functionality to the item search JSON endpoint, and adding
an adapter layer to match the GQL format!

Hopefully this will be pretty drop-in-able, we'll see!
2024-02-25 12:06:32 -08:00
9ed3c4ff96 Add Alt Styles reference page link to the Alt Styles picker
Clearing the way to be able to delete the announcement banner, which is
currently the only link!

I feel like there's room to redo the site layout to find a place to
more properly link to this from, but I don't have one yet! And this is
enough of a niche reference that I think this is good enough?
2024-02-25 10:44:00 -08:00
258b360ff2 Oops, fix infinite autosaving loop!
A bit of a hack, because the thing triggering it was also a bit of a
hack? I feel like there's something we gotta do with refactoring how
our multiple concepts of state are managed… but in any case! This seems
to keep basic outfit-loading working, while no longer getting us
trapped in autosave loops!

Here's how I reproduced the bug:
1. Open a saved outfit.
2. Set the browser devtools to apply a latency of 5sec to all requests.
3. Add an item to the outfit, and wait for the autosave to start.
4. While it still says "Saving", remove the item again.
5. Watch how, when the first autosave request comes in, the item is
   re-applied to the outfit, then autosave gets stuck looping forever.

The issue was that, when an outfit finishes saving, the change in
outfit data was triggering this effect in `useOutfitState` that was
*meant* to *initialize* local state from the saved outfit, not to keep
them in sync all the time. (In general, when saved outfit data comes
back from the server, we don't want to use it to "fix" local outfit
state in the case of discrepancies, because the most common source of
discrepancy will be the user having made further changes!)

But anyway, one thing I didn't realize is that we *were* depending on
this hacky hook to do more than I thought: it was responsible for
syncing `id` and `appearanceId` to the local state after saving the
outfit. So, I replaced the `rename` action dispatch here with a new
action that explicitly sets all fields the server is responsible for!
2024-02-25 10:37:08 -08:00
56d550e86c Skip loading alt styles on item preview page
Ah yeah, if you're not on the wardrobe page (so we don't need the Alt
Styles UI), and the outfit's `altStyleId` is null (as is the case for
the item preview page), then there's no need to load the alt styles for
that species.

So before this change, going to `/items/123` would include an XHR
request to `/species/<id>/alt-styles.json`, which would not be used for
anything. After this change, that request is no longer sent. Hooray!
2024-02-24 17:23:57 -08:00
7af1a97161 Read known_glitches when loading alt styles SWF assets
I'm not sure why I had marked this as TODO before? Maybe I'm missing
something? But for now I'll just wire it in, I guess!
2024-02-24 16:31:05 -08:00
c5cd1f2f3d Remove SwfAsset#html5_*_url in favor of SwfAsset#urls
The alt styles controller is the one place we use this right now, but
I'm planning to generalize this to loading appearances during item
search, too!

I also add more `only` fields to the alt styles `as_json` call, because
idk it feels like good practice to both 1) say what we need in this
endpoint, rather than rely on default behavior upstream, and 2) to
avoid leaking fields we didn't realize were on there. (And also to
preserve bandwidth, too!)
2024-02-24 16:29:47 -08:00
355297d977 Oops, I missed a syntax error lol
I thought this refactor of this change was working, but actually it was
just failing to build the JS lmao. Here's a version with correct syntax!
😅

Is there a syntax for this kind of thing that I'm just forgetting? Idk,
oh well!
2024-02-08 10:48:45 -08:00
46dc4cf009 Skip loading alt styles until speciesId is present
Before this change, when loading an outfit by ID, we'd send a request
to `/species/null/alt-styles.json`, which would come back as a 404,
oops lol
2024-02-08 10:46:37 -08:00
3ab6d1e3ae Oops, add some more wiring for pet state ID for saved outfits
There's an infinite loop happening in prod that I can't reproduce on
dev, but this missing piece feels like it could be related.
2024-02-08 10:15:31 -08:00
dc44b4dbb3 Oops, fix bug with saving outfits of pets loaded from Neopets.com
Okay right, the wardrobe-2020 app treats `state` as a bit of an
override thing, and `pose` is the main canonical field for how a pet
looks. We were missing a few pieces here:

1. After loading a pet, we weren't including the `pose` field in the
   initial query string for the wardrobe URL, but we _were_ including
   the `state` field, so the outfit would get set up with a conflicting
   pet state ID vs pose.
2. When saving an outfit, we weren't taking the `state` field into
   account at all. This could cause the saved outfit to not quite match
   how it actually looked in-app, because the default pet state for
   that species/color/pose trio could be different; and regardless, the
   outfit state would come back with `appearanceId` set to `null`,
   which wouldn't match the local outfit state, which would trigger an
   infinite loop.

Here, we complete the round-trip of the `state` field, from pet loading
to outfit saving to the outfit data that comes back after saving!
2024-02-08 09:51:31 -08:00
612cf914e0 Skip rendering layers without a usable image
This happens on the Baby Kougra, where for most poses half of the
assets have a manifest that includes an SVG but no PNG. Skip 'em!

I considered adding a glitch tag for this, but idk I think we can do
that once we're aware of an actual case where this causes visible
issues.
2024-02-01 08:55:42 -08:00
a4ca9ae522 Make the Alt Styles list less tall on large screens
On the small-screen layout, the popover goes down and covers the item
list, which isn't a big deal in context; so I want it to be basically
as tall as it can be without being unwieldy, to give more info.

But on the large-screen layout, it doesn't take long at all for the
popover to start intersecting the pet preview, because it *has* to go
up and cover the pet preview. So, I'm much more reserved about how much
vertical space I'm willing to give it!

(I also considered sending the popover off to the *right* of the button,
to cover the item list, but it felt *way* too weird imo! Especially in
the expressions case.)
2024-02-01 07:34:39 -08:00
f7fdf4e44c Don't show a glitch message for Alt Style items being Incompatible
The intent of this glitch message was that, when UC or Invisible pets
hide an item because of a zones-restrict thing, it would still show up
in the items panel as fitting a certain zone, whereas it should have
been in the "Incompatible" section and having none of its zones applied.

But the previously implementation would like, show this message even for
items that _were_ correctly marked as Incompatible? And that the server
returned no layers for, because it doesn't fit this body type to begin
with? (e.g. put a Grarrl hat on a Grarrl, then switch to Acara, and the
Grarrl hat is marked Incompatible—but would also show this confusing
message; or similarly with switching to Alt Styles)

So, when the server just returned no layers for this item to begin with,
don't show this message!
2024-02-01 07:13:04 -08:00
c13c6e7bd8 Remove the isLazy focus-management hack from PosePicker
Now that we're tracking tab state ourselves, it's pretty easy to just
pass the `initialFocusRef` to the right place instead of to both!

This helps switching between the tabs feel a lot smoother, because we
don't have to re-render and fade-in all the poses again.
2024-02-01 06:53:32 -08:00
00bc9c3bf7 Use hourglass icon for Retired UCs
The sunglasses communicated too much legitimacy lmao
2024-02-01 06:48:40 -08:00
e2d8a86f79 Add a warning that UCs are retired now
I'm keeping it in the same place for now rather than trying to fold it
into Styles, because I think that's net-less-confusing (since Styles
work pretty differently, e.g. different color requirements), and
certainly less work either way lol!
2024-02-01 06:43:14 -08:00
3a76dbb368 Show Alt Styles to all users in the outfit editor!
I think we're ready, turning off the Support-only gate!
2024-02-01 06:01:04 -08:00
453d6783c4 Move the style and state params earlier in the outfit URL
Idk I just think it's nice for them to be next to pose and such!
2024-02-01 06:00:39 -08:00
c60e222faa Add Alt Style support to outfit saving
Pretty straightforward, just add the field to the record, and wire it
all up! I'm glad this seemed to work out pretty well all-in-all 😅
2024-02-01 05:55:19 -08:00
b06149cf22 Make the "Incompatible" explainer more specific for Alt Styles
For Alt Style outfits, it's useful to call special attention to the Alt
Style feature as the likely cause of incompatibilities.

(Incompatibilities previously were most often caused by choosing a
species-specific item, then switching to another species. We generally
make it hard to enter this state, by hiding incompatible items during
search.)
2024-02-01 05:43:33 -08:00
f30213697a Clarify item compatibility in the Alt Styles explanation text
Just a lil hint that many items won't fit, in case it's a surprise to
folks!
2024-02-01 05:40:16 -08:00