Commit graph

113 commits

Author SHA1 Message Date
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
cd136aa6a5 Make species/color picker smaller on small screens, to fit pose picker
Now that the pose picker button can have text content too, things were
getting pretty cramped horizontally on smaller screens! Now we use the
`sm` size when it's small-time.
2024-02-01 05:31:34 -08:00
09846a4516 Make pose picker button easier to see on light backgrounds 2024-02-01 05:26:26 -08:00
fc71f5b5a5 Filter by Alt Style in item search and item appearance API calls
I'm not planning to port full Alt Style support over to the 2020
frontend, I really am winding that down, but adding a couple lil API
parameters are *by far* the easiest way to get Alt Styles working in
the main app because of how it calls the 2020 API. So here we are, just
using new parameters for DTI 2020 that I'm gonna deploy to impress-2020
first!
2024-02-01 04:58:30 -08:00
578528f468 Better handling for items in different zones with the same name
Specifically, I was looking at the new "Stormy Cloud Kacheek" items,
and was surprised to find that, in the outfit editor, they all get
grouped under "Markings" (and therefore the UI treats them as
mutually-exclusive via hidden radio button and only bolds one at a
time), but they aren't actually conflicting because they occupy
different zones named "Markings".

In this change, we make the zone groups actually just be *by zone*
rather than jumbling all of the zones with the same label together; but
in most cases, we still keep the same simplified display. In the case
of the "Stormy Cloud Kacheek" items though, we now get a few groups:
`Glasses`, `Markings (#6)`, and `Markings (#16)`. Glasses is chosen
by coincidence because it's the first zone label for that item
alphabetically (even though that item also occupies a third "Markings"
zone), and then the other two know to disambiguate from each other.

There's an opportunity here to cheat things further, like to
*intentionally* select items like "Glasses" that are less ambiguous
when possible. I'm not aware of enough other cases like this for that
to really matter, though, so I'm just leaving it as-is!

I tested this a *bit* on other outfits, and everything looked fine at
a glance, so I'm just moving forward—but I'll make an announcement to
ask people to help take a look!
2024-02-01 03:14:00 -08:00
b50bf6ceb8 Add SVG support to alt styles
Just moving our hacks around and adapting them to the SVG case lol!
2024-01-31 03:02:19 -08:00
ab8c9f6242 Oops, remove alt style when switching species
This wasn't causing big problems because we made resilient little
choices in a lot of little places… but it's confusing as a potential
state, and the Styles chooser wasn't selecting the "Default" option
after you switch—which is what tipped us off!
2024-01-30 07:21:14 -08:00
c2de6f7167 Display alt styles in outfit editor when selected
Yay it works(*)! But two major missing pieces:

- Outfit saving doesn't persist it at all
- Item compatibility is unaffected: items will still appear in search
  and in the preview, even when they don't fit anymore.
2024-01-30 07:01:03 -08:00
3ebbfc4967 Move alt style state into the outfit state
This still doesn't _do_ anything, except that you can see the URL
change when you switch between styles. Just a step forward is all!
2024-01-30 06:21:32 -08:00
741d52175b Open the pose picker to Styles if there's an Alt Style applied 2024-01-30 06:04:35 -08:00
8e5939e408 Show alt style name in the pose picker button when selected
To help with space, I'm just showing the word "Nostalgic" (or "???" if
it's from a series we don't recognize, this is hardcoded by ID), and
trusting that from context it will be obvious that it's the "Nostalgic
Faerie" case or whatever. (Moreover, in both the button and the select
we're omitting the species name, by similar reasoning!)

Note that this _still_ doesn't actually apply the style to the outfit
whatsoever; this is all just local state as we're continuing to play
with UI concepts. Actually applying it is probably next though! (Though
there's a couple more UI things I want to do, like some affordances to
clarify that a Style is applied and that Expression changes won't work.)
2024-01-30 05:55:19 -08:00
33bcabab83 Overhaul pose picker button to have text now, for all users
This one isn't reserved just for Support users! I think this button
stands out a lot more with the text, and I want people to be able to
discover it!
2024-01-30 05:38:19 -08:00
4025dcd968 Oops, fix crash on unknown pose case
Right, I was playing with the paintbrush but didn't end up using it!
Let's uhh go with the smile as the default, I guess?
2024-01-30 05:06:26 -08:00
bc77c261fb Set initial focus when opening the PosePicker to the Styles tab
Later on I'll want to control the picker to open to Styles if a style
is selected, or to Expressions if not.
2024-01-29 09:17:09 -08:00
bdfa3aad0b Oops, fix bug in alt styles query loading state
Oh right, React Query's API is slightly different, fixed! (Previously,
this would cause the PosePicker to show before all the data was ready,
so alt styles would sometimes pop in after the popover was already
open.)
2024-01-29 09:10:26 -08:00
8f934e83b8 Move Expressions/Styles tab to the top/bottom depending on placement
On small screens, the PosePicker opens down, and we put the tabs on the
top, to be near the button.

On large screens, the PosePicker opens up, and we put the tabs on the
bottom, to be near the button.

Previously, we always set `placement="bottom-end"`, which on small
screens behaved as written, and on large screens there would not be
space to open downward so it would open upward instead.

Now, we set the placement explicitly based on a media breakpoint, and
we change the `flexDirection` of the tabs container on the same media
breakpoint.
2024-01-29 09:09:09 -08:00
49158b2c54 Make the new pose picker button text support-only
I'm playing with using text to call more attention to this button, but
I'm not altogether pleased with the design yet. I'll leave it there for
me and Support users, but hide it for most people until we've got a
more complete concept.
2024-01-29 08:45:22 -08:00
207c65f209 Link to the Styling Chamber 2024-01-29 05:36:48 -08:00
433a14104f Hide the WIP Styles UI behind support staff flag
That way, I can stop being on a branch and be working on main, and
deploy stuff to preview live, without having to share it with everyone
just yet! (This was the motivation for finally adding Support tooling
to main DTI lol!)
2024-01-29 04:36:48 -08:00
514c99fb42 Add WIP styles tab to the pose picker
It shows the styles! You can select between them, but it currently does
nothing, womp womp!
2024-01-29 04:26:40 -08:00
e2ab8bbc9c Start adding Styles UI to pose picker
Add the tab UI, though the styles aren't in it yet; and add text label
to help make the whole UI more discoverable.
2024-01-29 04:26:40 -08:00
57beca1b3c Refactor PosePicker a bit
Just extracting some things to make the main function body leaner so
it's easier to add the alt styles stuff.
2024-01-29 04:26:40 -08:00
32f5d6d4a0 Show the PosePicker, even if there are no standard poses labeled
This is because I'm gonna put alt styles in here too, and I figure it's
reasonable to just explain what's going on.
2024-01-29 04:26:40 -08:00
4fff8d88f2 Add support_staff flag to user record; they can use Support tools
A little architecture trick here! DTI 2020 authorizes support staff
requests by means of a secret token, instead of user account stuff. And
our support tools still all call DTI 2020 APIs.

So here, we bridge the gap: we copy DTI 2020's support secret to this
app's environment variables (I needed to update
`deploy/files/production.env` and run `bin/deploy:setup` for this!),
then users with the new `support_secret` flag have it added to their
HTML documents in the meta tags. Then, the JS reads the meta tag.

I also fixed an issue in the `deploy/setup.yml` playbook, where I had
temporarily commented some stuff out to skip steps one time, and forgot
to uncomment them after oops lol!
2024-01-29 04:21:19 -08:00
6763e9454e Optionally use local instance of impress-2020 during development
To activate this, I created a `.env.development` file in my project
root, with the following content:

```env
IMPRESS_2020_ORIGIN=http://localhost:4000
```

Then, I started impress-2020 with `yarn dev --port=4000`.

Now, the app loads from there, hooray!! It even fixes that obnoxious
pet state ID bug that happens when you run against the production db lol
2024-01-28 07:00:29 -08:00
e4fb067e45 Remove old trade hangers UI from item page 2024-01-21 04:49:06 -08:00
68578aa929 Fix the two-line case for show more/less
I made two mistakes here! One is that you need to round up subpixel
line heights, and the other is that `clientHeight` is what I want, I
shouldn't include the margin!
2024-01-19 04:35:44 -08:00
4c809a5f5f Put back the show more / show less behavior for item page trades
I guess I deleted this a while ago without really noticing… I think I'd
at some point like to replace this with like, the DTI 2020 improved
table layout thing, but I figured this would be pretty quick to throw
in and make the page not feel like a pain to use lmao
2024-01-19 04:29:43 -08:00
aae5c767bb Oops, fix species name in zones tooltip
Oh right, this didn't show up in testing bc I only have a few models in
the local db, but yeah I messed this up a bit!!
2023-11-11 11:57:43 -08:00
b54be0ab5c Load item name from Rails app in item preview page
This is just a silly lil single-field migration!
2023-11-11 10:58:14 -08:00
a31039c4c8 Load item page restricted zones data from Rails app, not impress-2020
Just moving more stuff over! I modernized Item's `as_json` method while
I was here. (Note that I removed the NC/own/want fields, because I
think the only other place this method is still called from is the
quick-add feature on the closet lists page, and I think it doesn't use
these fields to do anything: updating the page is basically a full-page
reload, done sneakily.)
2023-11-11 08:49:19 -08:00
5e25e0bda6 Load item compatibility data from the Rails app, not impress-2020
Ok progress! We've moved the info about what bodies this fits, and
what zones it occupies, into a Rails API endpoint that we now load at
the same time as the other data!

We'll keep moving more over, too!
2023-11-11 08:15:10 -08:00
47ea796af4 Fix outfit saving infinite loop in error case
Really don't know why this wasn't a problem with Apollo (or was it??),
but yeah, don't save when there's a save error!! Then we reset the
mutation state when the outfit state changes.
2023-11-06 12:54:23 -08:00
f8bcf5a0de Don't save the outfit while it's already saving
It's weird to be reading this code and be like. was this not always an
issue? Maybe something in Apollo prevented this? Did we use optimistic
UI or something? Idk?

There's still an issue with it infinitely retrying in an error state
though.
2023-11-06 12:38:38 -08:00
57e262a884 Remove unused initialCacheState code from wardrobe-2020
In the impress-2020 app, we use this to prepopulate certain GraphQL
data into the Apollo cache when SSR'ing a page. We don't do that here,
so, goodbye!
2023-11-03 18:16:57 -07:00
a18ffb22a7 Remove the item page drawer, just link to the item page instead
The wardrobe-2020 app had a cute drawer that embeds the item page, but
honestly I don't think it was that valuable, and especially not when it
means we have to basically maintain two item pages lol. Let's decrease
the surface area!
2023-11-03 16:56:51 -07:00
494f82601f Set up eslint for wardrobe-2020
Ok cool, I have just not been running any of this since moving out of
impress-2020, but now that we're doing serious JS work in here it's time
to turn it back on!!

1. Install eslint and the plugins we use
2. Set up a `yarn lint` command
3. Set up a git hook via husky to lint on pre-commit
4. Fix/disable all the lint errors!
2023-11-02 18:11:07 -07:00
629706a182 Use the main app for outfit deletion, too 2023-11-02 17:39:26 -07:00
d32c6459b0 Normalize outfit data as we load it into wardrobe-2020
Rather than letting the fact that the server API models outfits a bit
differently (underscore keys, integer IDs for things), I'd rather
convert it to the familiar field names and expected types!
2023-11-02 17:12:59 -07:00
7a3aa609ba Use the main app for outfit saving, not impress-2020
This came in a few parts!
1. Add meta tags to let us know we're logged in.
2. Install React Query, which has the data-loading sensibilities I like
   about Apollo without the GraphQL that has honestly been a drag.
3. Replace the outfit-loading and outfit-saving calls with API calls to
   the main app.
4. Update the main app's API calls to use our more flexible data
   constructs like "pose".

Would've loved to do this more incrementally, but it's hard to! You
can't split out outfit-loading and outfit-saving, or auth from any of
that, or the state gets all out-of-sorts.

Still, this is a good nugget we've pulled out all-in-all, and one that
people have been asking for! Can maybe look to logged-in item search
soon too, for own/want data?
2023-11-02 16:54:35 -07:00
1ab3f21917 Finally remove unused auth0 code
Moreover, this code is in a bit of a flimsy state anyway: it'll kinda
work if you're logged in at impress-2020.openneo.net, but that wasn't
intentionally engineered, and I'm not sure exactly what circumstances
cause those cookies to send vs not send?

My intent is to clean up to replace all this with login code that
references the main app instead… this'll require swapping out some
endpoints to refer to what the main app has, but I'm hoping that's not
so tricky to do, since the main app does offer basically all of this
functionality already anyway. (That's not to say it's simple, but I
think it's a migration in the right direction!)
2023-11-01 15:26:53 -07:00
22e3f4240a Update most URLs to use HTTPS
I noticed we didn't have the little lock icon in the browser, and yeah
huh there's a lot of `http://` still floating around! Let's fix that!
2023-10-25 15:22:57 -07:00
3d07d7f360 Use /outfits/1234 URLs in the editor
Ohh I see, I made a mistake converting this from Next.js routing. It's
not that we had a URL search parameter named `outfitId`; it's that if
you were coming from the `/outfits/:outfitId` route, it would use that!

I still haven't gotten the rest of the site to point that route to this
page, but I'll do that in a later change.
2023-10-24 17:29:07 -07:00
a983ac9053 Add compatibility with older-style outfit URLs
Notable things:
- We used to have the parameters in the hash (`#`) part of the URL.
- We used to use the key `outfit=123` instead of `outfitId=123`.

In this change, we add backwards-compatibility for these things, while
still keeping the latest behavior too, with no change to the URLs we
generate!
2023-10-24 16:50:07 -07:00
e300b2d342 Run Prettier on all wardrobe-2020 JS
Looks like the version of Prettier I just installed is v3, whereas our
last run in the impress-2020 repo was with v2. I don't think we had any
special config in that project, I think these are just changes to
Prettier's defaults, and I'm comfortable accepting them! (Mostly seems
like a lot of trailing commas.)
2023-10-24 16:45:49 -07:00
ddfdd5fc11 Add outfit layers info modal to download PNGs etc
This is an important workflow for people doing art stuff, I'm told! They used to use the Classic DTI broken image UI for this, but now that that's uhh Fully Gone, let's add this more explicitly!
2023-10-23 19:05:10 -07:00
c5edd20b30 Add outfit context menu, with Download button
A better affordance than the popup telling people not to do this lol

and I'm planning to maybe add the button for SWF etc info here too!
2023-10-23 19:05:10 -07:00
35aaaeba8e Fix Chakra UI styles in portal elements
Ah right, the CSS reset only applies in the ScopedCSSReset container, which doesn't work for elements portaled out with the <Portal> component (which a LOT of Chakra components use for things like tooltips etc).

Here, we take advantage of <Portal> having a hardcoded classname .chakra-portal, and applying it to them too!
2023-10-23 19:05:10 -07:00
64e3702d6d Fix typography on wardrobe 2020 page
Add the green body color back in, and add the Delicious font!
2023-10-23 19:05:09 -07:00
9cc45f0988 Add wardrobe-2020 outfit preview to item pages
Eyyy tasty! There were some issues with conflicting styles with the main app, but I think we got it!

Scoping Chakra's CSS reset was a big deal to not accidentally overwrite the app's own styles lol, and we had to solve a specificity problem for that, thanks Aria for the :where tip!! <3
2023-10-23 19:05:08 -07:00
2eb8a7cd60 Move Apollo error message stuff to apolloClient.js 2023-10-23 19:05:08 -07:00
eef8f1349d Use react-router to *set* the page URL too
We never had a specific reason why we didn't use the router for this I don't think? Not that I wrote down anyway. Let's just switch it over and see what happens!

I mainly did this as a misdiagnosis of the page reload problem fixed in c162864, but it seems like a good idea to try out anyway!
2023-10-23 19:05:08 -07:00
b830198feb Oops, fix bad export in ItemPage
This I think is why the page was reloading when you try to item search? The failed import was triggering our "hey maybe this is an old module URL that got deleted" code?
2023-10-23 19:05:08 -07:00
8d7eabf1e3 Add AppProvider to wardrobe-2020
Hey the app runs now! How exciting! It doesn't run *correctly* but it renders at all!!
2023-10-23 19:05:08 -07:00
aa76fbc933 Try to render wardrobe-2020 at /wardrobe
Doesn't work yet, there's errors in Apollo! I also wonder what node env it's running as, the messages aren't clear here.
2023-10-23 19:05:08 -07:00
2884914cbe Fix createjs loading
Tricky little thing! Directly importing I think doesn't work because it thinks `this` refers to something other than `window`? This fixes it tho!
2023-10-23 19:05:08 -07:00
3c1fcca986 Remove next/router references
Once again, not really tested, but we don't have the same errors as before so!
2023-10-23 19:05:08 -07:00
6a59fa9f02 Replace next/link with physical links
All of these are links out of wardrobe-2020 now! We'll replace the router with react-router, but just for outfit state stuff.
2023-10-23 19:05:08 -07:00
8765d6c3b0 Replace next/image references
To be clear I haven't really tested this very well bc the page isn't like. working. but I'm just churning through the next references!
2023-10-23 19:05:08 -07:00
81b2a2b4a2 Bundle wardrobe-2020 into the app
We add jsbuilding-rails to get esbuild running in the app, and then we copy-paste the files we need from impress-2020 into here!

I stopped at the point where it was building successfully, but it's not running correctly: it's not sure about `process.env` in `next`, and I think the right next step is to delete the NextJS deps altogether and use React Router instead.
2023-10-23 19:05:08 -07:00