Commit graph

461 commits

Author SHA1 Message Date
fe799a9bbc Add alt text to OutfitCard images 2021-01-08 00:35:56 -08:00
b478f35103 Refactor OutfitCard a bit
Preparing to make a skeleton version for loading!
2021-01-08 00:35:09 -08:00
3804457839 fix OutfitPreview fade out bug
Oops, when switching to @emotion/react, it turns out they no longer support that cute hack I was doing to append suffixes to class names!

Here, I change strategy and let `CSSTransition` apply the plain `exit` and `exit-active` classes to its children, and apply Emotion styles to the child to check for _also_ having those classes.
2021-01-07 00:33:51 -08:00
4a352e04e0 simulate login with IMPRESS_LOG_IN_AS flag 2021-01-05 23:22:03 -08:00
20f3ca75b0 fix caching on Your Outfits page
Oh right, we can't cache objects  well when they're missing their ID!

Before this change, selecting an outfit then navigating back would require the outfits to reload. Now, they stay!
2021-01-05 06:45:27 +00:00
12b357fad9 oops, tweak outfit data query slightly 2021-01-05 06:43:33 +00:00
95d94a4844 Show loading spinner when outfit data is loading
A pretty easy tweak, phew!
2021-01-05 06:42:09 +00:00
102a29fefd show outfit name faster, instead of "Untitled Outfit"
That'll still show up when the outfit is still loading, but this lets us use the Apollo cache to show the name instantly if you're clicking through a link from Your Outfits
2021-01-05 06:39:12 +00:00
1f5a9d60a2 Show saved outfits in wardrobe page!
Still a pretty limited early version, no saving _back_ to the server. But you can click from the Your Outfits page and see the outfit for real! :3 We have a WIPCallout explaining the basics.
2021-01-05 06:29:39 +00:00
6749d19f9e fix dev emotion crasher in wardrobe page
This seemed to only show up in dev? But right, I guess it's not happy about passing stuff from ClassNames into a Popover Portal. Move it inside, fixed!
2021-01-05 05:51:54 +00:00
f36d6831d0 make outfits page links, to classic DTI
Mostly just getting the link style figured out! But getting them actually working is coming soon :)
2021-01-05 05:20:07 +00:00
71bb593974 center outfits, helps a lot on mobile
I pulled it up on my phone, and there was only one column, and being left-aligned for that was bleck!

This is a good spacing compromise, I think :)
2021-01-04 09:36:01 +00:00
c9603a40ea tweak site bg color, to let card elements "pop"
This has been bothering me for a long time, but I couldn't really figure out what to do about it. But tweaking the site bg color a smidge has helped us really add texture to the cards I want to have pop out, like the outfit polaroids!

I kinda went all-in in a burst, but tbh I think it looks great :3

I haven't really touched the wardrobe page with it yet though, that'll probably need some tweaking... for now I'm overriding it to keep the old background!
2021-01-04 09:17:54 +00:00
98604b39da add message for when you have no outfits 2021-01-04 08:47:39 +00:00
72a99fd5bf fix dark mode styles for outfits page 2021-01-04 08:45:52 +00:00
be7de27c5c refine outfit thumbnail card styles 2021-01-04 08:39:15 +00:00
b01feba038 add items to outfit thumbnails
Now that wasn't so hard! :3
2021-01-04 08:26:05 +00:00
9a2308fd41 add Outfits link to global header 2021-01-04 08:13:37 +00:00
259ae9bd87 add WIP callout to outfits page 2021-01-04 08:12:25 +00:00
30e0a149be basic outfits page with pet-only thumbnails 2021-01-04 08:10:35 +00:00
b8d919b247 basic outfit data from GQL 2021-01-04 07:36:00 +00:00
778eefbdd5 placeholder Your Outfits page
it requires login, and runs a GQL query that will fail 😅
2021-01-04 07:31:02 +00:00
79bde552e2 move src/images into src/app/images
I'm gonna add a `src/shared` next, and it felt weird for `images` to be a sibling, esp since the images are only for the client app!
2021-01-04 03:49:08 +00:00
4120c7aa88 fix large-icon visual bug
Looks like there was some kind of runtime conflict when running @emotion/css and @emotion/react at the same time in this app? Some styles would just get clobbered, making things look all weird.

Here, I've removed our @emotion/css dependency, and use the `<ClassNames>` utility element from `@emotion/react` instead. I'm not thrilled about the solution, but it seems okay for now...

...one other thing I tried was passing a `css` prop to Chakra elements, which seemed to work, but to clobber the element's own Emotion-based styles. I assumed that the Babel macro wouldn't help us, and wouldn't convert css props to className props for non-HTML elements... but I suppose I'm not sure!

Anyway, I don't love this syntax... but I'm happy for the site to be working again. I wonder if we can find something better.
2021-01-04 03:11:55 +00:00
82003a91de fix a11y warning in privacy policy 2020-12-25 09:21:54 -08:00
131ff9d4c2 upgrade to new Chakra extendTheme API 2020-12-25 09:20:18 -08:00
91982c60d9 update to new Chakra <Wrap> API 2020-12-25 09:17:24 -08:00
b023cbeaf9 use @emotion/css instead of plain emotion 2020-12-25 09:09:16 -08:00
406849182a update chakra imports 2020-12-25 09:08:33 -08:00
a6ef12a5dd lol change the privacy policy link text from "Hey" 2020-12-07 22:56:58 -08:00
b07924c40f add a privacy policy 2020-12-07 22:56:23 -08:00
5342968872 fix a weird virtualization bug
surely not the last :p
2020-12-07 19:18:34 -08:00
0c2ec4685e use react-virtualized to speed up user items page
There's a known bug that items with a lot of zones will overflow the row… filing that as a separate fix tho!
2020-12-07 18:58:10 -08:00
d59a4948a0 fix species/color dropdown focus bug
Oops, creating a new `SpeciesColorPicker` fn on each render meant that React treated it as a whole new dropdown each time. I've extracted it out into a stable component class, and just pass in the extra props now!

This bug caused changes to kick you out of focus for the dropdown, because it had unmounted and remounted.
2020-12-04 13:01:39 -08:00
0674834fb2 try column headers "Trade for your/their…" 2020-11-25 02:24:15 -08:00
def46b0d9c add matches to the trades list page when logged in 2020-11-25 01:53:42 -08:00
066b914bd5 random-sorted "this week" for most recent trades 2020-11-25 00:33:00 -08:00
7310e62699 trades page col heading tweak 2020-11-24 23:59:44 -08:00
429d7fd497 "Search for another user" -> "Find another user"
copy was too long for the search field on some devices!
2020-11-24 21:21:38 -08:00
a7e32232e2 fix query op name on UserItemsPage 2020-11-24 20:54:10 -08:00
bb173552e9 oops, use client-side nav for these links! 2020-11-24 15:05:23 -08:00
65b4a05639 fix bug on "no trades yet" screen w/o "Compare" 2020-11-24 15:02:03 -08:00
ec9b96ff70 link to the new trade pages from item page 2020-11-24 15:01:24 -08:00
1f2e83e11e sort trades by user activity (will refine later)
I think a plain sort by last update is too game-y, so I have some ideas how to make this a bit more random but still usefully sorted
2020-11-24 14:58:11 -08:00
c8af209012 hide compare column for now 2020-11-24 14:49:20 -08:00
c23243fcb7 add real timestamp to trades page 2020-11-24 14:43:43 -08:00
d275c96396 fix bug in table loading placeholders
The extra word width of "Placeholder" caused wrapping on some screens!
2020-11-24 14:29:00 -08:00
54abd1ac80 real trade data on the page! 2020-11-24 14:24:34 -08:00
6681f9642a add media query for "this week" vs "<1 week" 2020-11-23 13:30:34 -08:00
c1012e57d5 fix bug linking directly to a specific list 2020-11-23 13:28:43 -08:00
8068a1d260 offer/seek trade pages, with placeholder data 2020-11-23 11:25:23 -08:00
9481ce05a6 open trading links in new page from wardrobe page 2020-11-23 09:36:24 -08:00
1af034e4e7 refactor ItemPage components to be more reusable
this is because I'm about to make trades pages!
2020-11-23 09:34:46 -08:00
d219750ea1 support can look up users by email, not just name 2020-11-18 10:32:49 -08:00
7c9313f4a6 support tool to edit usernames 2020-11-18 07:42:40 -08:00
6a43f92438 can search for user by name from items page 2020-11-18 06:45:33 -08:00
68e6e9e243 add real offering/seeking counts to item page 2020-11-09 06:26:29 -08:00
90233c0a03 add items.jellyneo.net to valid trade list links 2020-11-09 06:11:07 -08:00
a5bfadf126 fix missing pause/play button for some animations
We do animation detection during the preload now, but this wasn't always working correctly: some movies don't actually fully mount the children onto the stage until we start playing. This caused the play/pause button to be missing on the outfit page and the item page, but the animations would still play, depending on the user's saved play/pause state in localStorage.
2020-11-08 16:17:07 -08:00
652d3cff7d add trade link placeholders to item page 2020-11-08 15:46:11 -08:00
d02f7ced72 add pb badge to pb items, instead of nc/np badge 2020-11-08 15:13:30 -08:00
02e173d7de nc/np/pb search filters 2020-11-08 15:04:17 -08:00
63a17824e5 lint fixes 2020-11-08 14:35:02 -08:00
d701f51c15 move own/want badges to end of wardrobe items
I saw the short-near-the-front and it just frankly looked awkward? Not sure why I liked it before?

I think this medium at the end of the list is better aesthatically, though it's starting to get a bit messy with the different colors mixed around… but I think there's also a semantic argument that we're keeping the facts about the item together, and the _user-specific_ stuff separate at the end… (putting it at the front would be a good semantic argument too, but I think the NC/NP alignment is too important)
2020-11-03 20:24:56 -08:00
045fb95d69 fix spacing bugs with item badges
In a previous change, I moved the margin for item badges onto an ItemBadge element… but I didn't think through how that would break the spacing for the loading state of ItemPage. Now, the loading skeleton items _contained_ the badge margin, and so the spacing between badges was shiny skeleton-y.

Here, I replace ZoneBadgesList with a function that just returns the elements, and go back to using Chakra's Wrap component. That will apply the margin to direct children, and the zone badges are direct children now.

One option I'm thinking of in hindsight is an idea I had earlier: Chakra hacks the margin onto _React_ children, but could we use CSS direct child selector instead? A bit trickier to resolve the margin size to the theme's value, but plenty doable… something to consider!
2020-11-03 20:11:37 -08:00
e47bec0abc refactor menu/nav a bit 2020-11-03 19:36:48 -08:00
2de840b53e fix mobile flash-of-wrong-nav-menu
In the previous impl, the buttons variant of the menu would appear on first render, and then the breakpoint stuff would adjust and re-render as the compact nav menu. Now I'm using CSS to show/hide instead!
2020-11-03 14:57:26 -08:00
2772c3e090 adjust WIP callout on user items page 2020-11-03 14:45:43 -08:00
de974a365b fix bug with items with %20 in movie clip URL
"Beautiful Green Painting Background" wasn't loading! https://impress-2020.openneo.net/items/75594

```Error building movie clips Error: Expected JS movie library http://images.neopets.com/cp/items/data/000/000/491/491273_31368b3745/491273_2_HTML5%20Canvas.js to contain a constructor named _491273_2_HTML5%20Canvas, but it did not: ssMetadata,Bitmap3,Bitmap5,CachedTexturedBitmap_4183,CachedTexturedBitmap_4184,CachedTexturedBitmap_4185,CachedTexturedBitmap_4186,CachedTexturedBitmap_4187,Symbol20,Symbol8,Symbol4,Symbol7,Symbol2,Symbol1,Symbol9,Symbol2copy,Symbol2_1,_491273_2_HTML5Canvas,properties,Stage```

We already had code to strip out spaces, but not encoded spaces like %20. Now, we decode the URL first, so that space-stripping will work even if it was encoded.
2020-10-28 00:29:32 -07:00
15f10c615b add descriptions to closet lists (formatted! :3) 2020-10-28 00:00:14 -07:00
4e00962edc add individual lists to user items page 2020-10-27 23:09:42 -07:00
3ce5e74b09 swap own badge and want badge 2020-10-27 21:43:57 -07:00
444887b64f update trade list matching after changing own/want
That is, if you're browsing a trade list and you go "oh actually, I _do_ want that!", and click the item page to mark it, then click Back, we'll now update the matching stuff on the trade list page to reflect that it's now a match.

This was just a matter of simplifying the GraphQL query, I think the `currentUserOwnsThis` and `currentUserWantsThis` fields just didn't exist at the time?

We _don't_ yet update your _own_ trade list, if you click through to an item to remove it or something like that. The cache update function isn't too tricky, but it's a bit verbose to implement in Apollo, so I'm not bothering right now!
2020-10-24 01:35:37 -07:00
4d4d475437 add quick-look trade matches to top of page 2020-10-24 01:06:55 -07:00
5a13959805 fix bug with zone badge wrapping
Oops, the <Wrap> component is nice, but it uses React.Children to apply margin to its _direct_ children, and our badges are not always direct children! (See the new `ZoneBadgeList`.)

I poked my head into how `Wrap` works, and it's honestly pretty simple, so I've applied the same styles manually. Ta da!
2020-10-24 00:32:23 -07:00
271b1e2ac5 add comment noting how we built the star svg 2020-10-24 00:14:42 -07:00
b28d8256b8 add lookup/neomail links to user item pages 2020-10-24 00:08:22 -07:00
274a4f716f add zones to user items page
idk the labels section was feeling empty, and I didn't see a way to streamline it more, so I figured, add info that might be useful! lol
2020-10-23 23:29:54 -07:00
5111ebcbfe split out separate Your items header 2020-10-23 23:00:53 -07:00
3a20deba09 can remove owned/wanted items from item page 2020-10-23 22:43:56 -07:00
bb46c1f184 fix crash opening user items page logged out 2020-10-23 22:19:54 -07:00
49d3b3685d add CORS for movie clip asset loading
I think the issue with the Spring Topiary Garden Background is that EaselJS is trying to do intermediate canvas reads in order to apply computed filters, but loading from our asset proxy counts as tainted data.

Here's the traceback I got in Chrome for it:
```
Error building movie clips DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
    at a.b._applyFilters (https://code.createjs.com/1.0.0/easeljs.min.js:15:12029)
    at a.b._drawToCache (https://code.createjs.com/1.0.0/easeljs.min.js:15:11806)
    at a.b.update (https://code.createjs.com/1.0.0/easeljs.min.js:15:8638)
    at a.b.define (https://code.createjs.com/1.0.0/easeljs.min.js:15:8148)
    at lib.Flowerfront.b.cache (https://code.createjs.com/1.0.0/easeljs.min.js:13:3361)
    at new lib.Bg (https://images.neopets-asset-proxy.openneo.net/cp/items/data/000/000/441/441520_f4a43d48bf/441520HTML5.js:4266:16)
    at new lib._441520HTML5 (https://images.neopets-asset-proxy.openneo.net/cp/items/data/000/000/441/441520_f4a43d48bf/441520HTML5.js:5291:18)
    at x (https://impress-2020.openneo.net/static/js/11.3a356cfe.chunk.js:1:12286)
    at https://impress-2020.openneo.net/static/js/11.3a356cfe.chunk.js:1:17768
    at Array.map (<anonymous>)
```

To try to fix this, I've updated our Fastly config to version 8, which should accept CORS requests from https://impress-2020.openneo.net. And here, I've updated the movie clip assets to be requested CORS-style, so that the Origin header will actually be set.

It's hard to test this without just, pushing it to prod. I've confirmed in isolation that setting the `Origin` header in the request yields the expected `Access-Control-Allow-Origin` response header, and that the `Vary` header is set correctly too. But, end-to-end, I don't really have great mockability here—maybe with a good proxy setup I could do it? But nah, let's just push and find out!
2020-10-23 00:20:50 -07:00
10b10e9a43 oops, remove some unused variables 2020-10-22 23:53:06 -07:00
0387a78574 show error message when preload can't build movies
Not sure why movie clip building is failing! But it happened outside our try-catch, so it left us in an infinite spinner state.

The repro item is the Spring Topiary Garden Background!
2020-10-22 23:52:26 -07:00
57889a3a88 can add own/wanted items from item page
the buttons work now! but only when adding 😅 remove comes next!
2020-10-22 21:20:49 -07:00
d2671d0fa6 fix ItemPage safeImageUrl loading bug
When you navigated directly to ItemPage, the new `safeImageUrl` function would crash during the loading state, because it was trying to safe-ify `undefined`.

Now, I've just made `safeImageUrl` more resilient to that particular kind of unexpected input, by passing through null-y values without change.
2020-10-22 20:53:21 -07:00
5f3ac956e3 make the feedback form more visible 2020-10-22 16:01:54 -07:00
d99f5d7ac8 oops, fix missing react hook dep! 2020-10-22 15:46:22 -07:00
456a098df9 replace /api/assetProxy with a CDN proxy
When we decided to start out with /api/assetProxy, we didn't know how much the load would be in practice, so we just went ahead and tried it! Turns out, it was too high, and Vercel shut down our deployment 😅

Now, we've off-loaded this to a Fastly CDN proxy, which should run even faster and more efficiently, without adding pressure to Vercel servers and pushing our usage numbers! And I suspect we're gonna stay comfortably in Fastly's free tier :) but we'll see!

(Though, as always, if Neopets can finally upgrade their own stuff to HTTPS, we'll get to tear down this whole proxy altogether!)
2020-10-19 13:24:13 -07:00
9a36a6ec69 don't advance movies by a frame when resizing 2020-10-10 04:51:53 -07:00
7102772f63 fix positioning of movie layers on large screens
Oops, movie canvases were drawing larger than the images, if there was more than 600px of space available! fixed!
2020-10-10 04:32:53 -07:00
afe9fcf392 fade in for movie layers, too
gosh I hope I didn't break everything 😅
2020-10-10 03:46:23 -07:00
82f849f047 fix fade-in for static image layers
I guess something got more picky about the loading sequencing: the fade in animation was happening faster than the cached image could load. Now, we explicitly wait for the image to load (even though we know it's probably cached) before fading it in.
2020-10-10 03:37:43 -07:00
5f612f544c tweak homepage copy to make feedback more obvious
I noticed that, if you're _reading_ the beta callout it's obviously a feedback link, but it's easy to glaze over "Tell us what you think". Here, I've added the word "feedback" to make it stand out on scanning the page, while adding "Got ideas?" to keep it feeling colloquial.
2020-10-10 03:13:12 -07:00
68607e3756 fix infinite spinner on err loading HTML5 layers
Oops, our movie layer promises don't have a .cancel() method, so calling it crashed our error handler. Now, when there's an error loading a layer and there are HTML5 layers visible, we'll correctly show the "Could not load preview. Try again?" message.
2020-10-10 02:42:27 -07:00
f6268810be make invisible DTI title text not clickable 2020-10-10 02:34:02 -07:00
1eca5d1e27 add WIP callout to item page 2020-10-10 02:17:21 -07:00
e7359ab51b add WIP callout to user items page 2020-10-10 02:07:49 -07:00
a8cdd51bb5 rename "old DTI" to "classic DTI" on item page 2020-10-10 01:29:13 -07:00
fb632f82d6 minor fixes to feedback form React code
oops, forgot some hook deps!
2020-10-10 01:25:10 -07:00