Commit graph

410 commits

Author SHA1 Message Date
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
ad43f58a07 fix Download button to use better caching
So I broke the Download button when we switched to impress-2020.openneo.net, and I forgot to update the Amazon S3 config.

But in addition to that, I'm making some code changes here, to make downloads faster: we now use exactly the same URL and crossOrigin configuration between the <img> tag on the page, and the image that the Download button requests, which ensures that it can use the cached copy instead of loading new stuff. (There were two main cases: 1. it always loaded the PNGs instead of the SVG, which doesn't matter for quality if we're rendering a 600x600 bitmap anyway, but is good caching, and 2. send `crossOrigin` on the <img> tag, which isn't necessary there, but is necessary for Download, and having them match means we can use the cached copy.)
2020-10-10 01:21:47 -07:00
d602287190 feedback form now sends actual emails! 2020-10-09 08:55:03 -07:00
87d6cbf72a Feedback form sends req to stubbed API endpoint
Okay, now the UI can handle the loading/success/error status! Next we need to actually send :3
2020-10-09 08:18:18 -07:00
b713aeea96 bundle feedback xwee, make it transparent
Oops, I shipped with the images.neopets.com TODO undone! Also, the white background was intersecting with the close X for the feedback form.

In this change, we move the xwee image into our bundle instead of depending on images.neopets.com, and we edit it to have a transparent background, which looks nicer for dark mode. (And we do a srcset!)
2020-10-09 08:01:46 -07:00
423ab5c98d oops, un-break the homepage! 2020-10-08 04:20:23 -07:00
1875931a48 simplify canvas code, just use separate elements
Previously I tried to be clever and pre-optimize by putting all the layers onto one canvas… I think this probably helped by batching their paints, but it made fades less smooth by not taking advantage of native CSS transitions, and it made us dip into JS way more often than necessary.

Here, I take the simpler approach: just layers of <img> and <canvas> tags, with each animated layer on its own canvas, and letting the browser handle transitions and compositing, and separate `setInterval` timers to manage their framerates.

I have a suspicion that batching the paints could help performance more, but honestly, maybe that batching is already happening somehow, because things look pretty great on my big-screen stress test now; and so if it _is_ relevant, I want to wait and see after testing on low-power devices.
2020-10-08 04:13:47 -07:00
3e147ec5b4 oops, don't auto-focus feedback button on load 2020-10-07 10:17:52 -07:00
cd42988a90 add beta blurb & WIP feedback form to homepage 2020-10-07 09:48:55 -07:00
3dc9a1d0ef add a subhead to the homepage
Not 100% sure on the copy, but I like that it's a bit clearer about the value prop. I tried to work in customization for SEO, but it feels too clunky in a sentence, might need to put it elsewhere in the copy!
2020-10-07 07:52:34 -07:00
c0ce71c206 don't show preview in the item info drawer 2020-10-07 07:05:37 -07:00
42c59328a9 only make a 60fps call if we're actually animating 2020-10-06 08:55:21 -07:00
900d102594 Merge branch 'modeling' into main 2020-10-06 07:06:30 -07:00
6ec6bbec57 first-time modeling UX improvements
These changes are most relevant for playing around in the dev server, modeing against an empty database. But they'll also help in real-world modeling scenarios! e.g. modeling a new species/color combo is now a bit nicer, we don't show a blank entry in the color picker
2020-10-06 06:37:51 -07:00
f543868924 fix bug that broke fades on cache-grouped layers 2020-09-25 07:53:04 -07:00
32c4e540a3 group and cache adjacent static outfit layers
perf win owo!
2020-09-25 07:35:49 -07:00
d52849c7a2 add animations and play/pause button to item page 2020-09-24 08:29:56 -07:00
ffe9d25b1c help user find play/pause when adding animation
I think it's great that we hide the button when it's not relevant, but that makes it hard to know that it exists. Here, we do some cute tricks to blink up the "Paused" button when it first appears, even if the user doesn't have the controls visible right now
2020-09-24 07:54:11 -07:00
2a8ac4ad65 improve contrast on play/pause button
I had trialed it on darker backgrounds, but on lighter ones we just need a higher base contrast imo
2020-09-24 07:19:29 -07:00
e5ce4a4a42 improve perf on item add/remove
We did this a while back too, but I guess something changed in Apollo: I guess it used to return identical item objects from the cache on its own, and now it returns brand new item objects. So we gotta do the object caching hacks ourselves!

This speeds up add/remove item state updates from 500ms to 100ms on my Mac, because we stop re-rendering all the Item components and their complex Chakra children.

This is especially worth doing now, because animations make long updates much more noticeable! (It interrupts the animation 😅)
2020-09-24 07:09:08 -07:00
05f7b3fcc7 oops, fix missing hook deps 2020-09-24 06:43:46 -07:00
ce402c23d7 include animated assets in preloading
Honestly kinda surprised this worked on the first go! I was worried something about the process would make the sorta like, instant-cache expectation not work.

Still thinking it might be considerate to like, keep a LRU cache of MovieClip options, so that we don't double-execute these scripts when adding stuff… we even re-execute the ones already applied lol 😅 and that adds lots of script tags to the body!

But yeah I'm not gonna push on it yet until I see evidence that it actually causes performance issues in practice
2020-09-24 06:25:52 -07:00
53b4d34419 only show play/pause when there are animations 2020-09-24 06:13:27 -07:00
5027a62ec5 cuter play/pause button at top of controls 2020-09-24 06:04:59 -07:00
c4a9ee8497 a bit more perf for static assets 2020-09-24 06:04:51 -07:00
5879324ebb play/pause button for animations 2020-09-22 05:39:48 -07:00
88f5c1f1aa fix bug where resizes pause the animations 2020-09-22 05:14:31 -07:00
30ec18e85e maybe fix races in movie script load order? 2020-09-22 05:12:59 -07:00
d50d1ecacc fix bug that reloaded all layers on resize 2020-09-22 05:01:56 -07:00
185d6acc88 some movie clip race condition fixes 2020-09-22 04:36:32 -07:00
d1be0f2d4a oops, add a missing assetProxy call! 2020-09-22 04:34:40 -07:00
772065815a Badge for animated items, support only
This is really very cute, but too many items it turns out are lod despite not actually being animated 🙃 it's helpful for looking for test cases tho, so I'm keeping it, but support only!

I also ended up really liking the icon-badge+tooltip design as a way to summarize lil things, so I'm trying Own/Want short badges in the same style.
2020-09-22 04:25:41 -07:00
3fe2c478f2 log manifest image load errors, instead of crash 2020-09-22 04:12:52 -07:00
8cc034900d ah, refine the bug fix for number filenames 2020-09-22 04:08:05 -07:00
d27395bda2 hooray, animated items seem to be working?! ^w^ 2020-09-22 03:53:48 -07:00
a4d159381c add an underscore to numbered filenames
Here's an example, the file is http://images.neopets.com/cp/items/data/000/000/546/546022_1132b0ffeb/546022.js and the constructor is _546022, to account for the fact that JS syntax won't allow a plain number there.
2020-09-22 03:46:32 -07:00
7fdf8f5e21 remove stray console logs 2020-09-22 03:06:50 -07:00
e8bfc24506 oh, I think I fixed the movie pausing bug! 2020-09-22 03:06:14 -07:00
08bdf560a4 draft of animated layers in storybook
Not running in the real app yet, but there's something a bit off where changes seem to pause animations and I don't understand why
2020-09-22 03:03:01 -07:00
c806de4e83 rename EaselCanvas to OutfitCanvas, etc
reflecting further on the abstraction, I'm noticing that this isn't an Easel abstraction like I envisioned early, and that we're baking some Neopets stuff into it. And I think that's the right call, esp with the tricky MovieClip stuff coming up, where I think more barriers would hurt more than they help. So, a new name!
2020-09-22 01:49:12 -07:00
9a8047c613 extract EaselCanvas to its own file, basic stories 2020-09-22 01:44:24 -07:00
feaaf97dce fix the broken loading delay again
Did it revert? Or did I just never notice that it only worked on mount, not on new loading states?

Also, fixed a bug where we were injecting the script tag way too much, and triggering loading too much that way too!
2020-09-21 19:03:17 -07:00
7677a60bbe add non-canvas version back for smaller previews 2020-09-21 18:50:27 -07:00
80a52d3bb9 add fade-in/fade-out to easeljs outfit previews 2020-09-21 18:40:12 -07:00
bf83b175ad use EaselJS for outfit previews
still just for static stuff, but it's good to be working!

PosePicker got a bit broken, CSS scaling doesn't work quite right anymore, we might need to just up the internal resolution or something?
2020-09-21 18:11:25 -07:00
64d09f040a re-add nav menu, to prevent bad wrapping on iphone
noticed that the left-title and right-nav were running into each other on a standard iphone layout... menu fixes this!
2020-09-21 03:31:49 -07:00
a81060d5b8 make the Dress to Impress text clickable
oops, right, it was not part of the link! Now it is. Feels much better :)
2020-09-21 03:18:32 -07:00
1eeba40fac rename GlobalNavBar to GlobalHeader
for consistency with GlobalFooter
2020-09-21 03:08:24 -07:00
5c8fbdc81e use preloaded pet data when loading item page 2020-09-21 02:56:56 -07:00
a6761a2403 load correct pet for species-specific items
uses the new canonical appearance GQL stuff :)

there's still an extra reload, we're not using the apollo cache correctly!
2020-09-21 02:56:56 -07:00
1b59b9631b GQL for canonical appearance for body
gonna use this for item page! I walked back my supported species idea 😅
2020-09-21 02:56:48 -07:00
b53d95cda8 rename "Incompatible" to "No data yet" 2020-09-20 21:34:27 -07:00