Commit graph

561 commits

Author SHA1 Message Date
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
2578e1a431 disable new modeling code, until some future day
Yeah, mm, turns out I don't think it's actually viable to model from Impress 2020, because we can't reasonably set up the SWFs and PNGs in the ways we need, especially for compatibility with Classic DTI.

We can turn this on again later, once Classic DTI is gone, and all assets are converted to HTML5 -- or if we build some kind of bridge to Classic's asset code, or we write new PNG conversion code.
2020-10-07 07:49:27 -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
5b2e370295 oops, fix a missing await in modeling
This caused swf asset syncs to be unreliable!
2020-10-06 07:35:00 -07:00
900d102594 Merge branch 'modeling' into main 2020-10-06 07:06:30 -07:00
99e6480486 add logging to modeling
my hope is that, if we fuck things up, this will make it clear 😅
2020-10-06 07:06:19 -07:00
bb812a2b81 oops, fix bug modeling pet with no items 2020-10-06 06:38:21 -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
df2d814c13 enable running against a local dev database
had to add some missing tables, but it seems to work! (some known errors though, from assumptions we make e.g. blue acaras existing)
2020-10-06 06:18:19 -07:00
da72837d9e modeling saves item-to-asset relationships
this is the last one to get parity with current modeling, I think?? I'm gonna add one more feature though: removing no-longer-used assets from the item
2020-10-06 05:49:37 -07:00
fefb798e87 extract Pet GQL to Pet.js from Outfit.js 2020-10-06 05:04:44 -07:00
740d8415db extract modeling logic into modeling.js 2020-10-06 05:02:21 -07:00
68b5486bb7 update labeled field for pet appearances
Oops, when building the Support tool to label pet appearances, I didn't realize that there's also a boolean `labeled` field that needs to be true for labeled appearances. Without it, the old app shows the appearance as "Unlabeled".

I also ran this query to fix the rows we'd incorrectly written:
```
mysql> UPDATE pet_states SET labeled = 1 WHERE mood_id IS NOT NULL;
Query OK, 158 rows affected (0.14 sec)
Rows matched: 19640  Changed: 158  Warnings: 0
```
2020-10-03 04:05:25 -07:00
0f5c437ffd split up modeling code into smaller functions
This is mostly because I want to chain the rels after both items and assets save, and I want to be able to specify that stuff a bit more precisely, rather than the like, layers-of-awaits we were building up.
2020-09-27 03:57:14 -07:00
a8c351b102 oops, fix a bug with Pet name GQL 2020-09-27 03:21:07 -07:00
914a06f8c7 add test for UC modeling
This got fixed in the refactor last commit, where we added the petAppearance field!
2020-09-27 03:19:10 -07:00
e57af14625 refactor Outfit.js to split Pet to a separate type
yeah, I had unified Pet into Outfit, but now I think that was overly clever… 😅

Here, I define a new Pet type, and it has some of the fields of Outfit and the deprecated fields still.

I did this because I want petAppearance to work, for UC testing!
2020-09-27 03:18:46 -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
94f6363251 add LIMIT 1 to our updates, out of healthy fear
This is just me thinking about what could go wrong in the modeling rollout,

this at least makes it so that, if something breaks, it will break small
2020-09-25 05:15:58 -07:00
cc5a8a6fab set bodyId=0 when item's body id changes
that is, if we see an item modeled on a second body, then treat it as body 0
2020-09-25 05:04:12 -07:00
96a126ebba oops, stop sending unnecessary inserts/updates
got the types wrong on some stuff, and got pet state sorting wrong!
2020-09-25 03:29:02 -07:00
41e70ba8d0 finish modeling full pet appearance 2020-09-25 03:29:02 -07:00
50537758c5 start test/dev db IDs at 1, not wherever prod is
We download the schema from prod, and omit real data, but I didn't notice that we were still pulling the metadata of the auto increment counter for IDs! Now, we scrub that from the schema file we save.
2020-09-25 03:29:02 -07:00
71f491ce65 modeling saves pet state 2020-09-25 03:29:01 -07:00
5332c9e265 save biology assets on model
and start in comments on pet states :)
2020-09-25 03:29:01 -07:00
ff3fc943d7 modeling saves pet type 2020-09-25 03:29:01 -07:00
9111dfddd3 save item swf assets during modeling 2020-09-25 03:29:01 -07:00
f7d9faa265 update modeled item data 2020-09-25 03:29:01 -07:00
8793d8b570 refactor modeling code a bit to use syncToDb fn 2020-09-25 03:29:01 -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
31a0108d44 install storybook
I want it for faster feedback on the Easel stuff
2020-09-21 21:16:40 -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
bcf6e6d8a7 add GQL to know what species can wear an item
gonna use this on the item page to seed the species choice!
2020-09-20 21:33:45 -07:00
5f9b143939 add species/color picker to item page
still missing some basics like choosing the right default for the single-species case, but overall work-y!
2020-09-20 21:08:16 -07:00
baa3563abb fix margin between home icon and user bar
Oops, I attached the margin to the title, which meant that the home link _didn't_ get spaced away from "Hi, matchu!"
2020-09-20 20:13:00 -07:00
c52b5f0039 update footer design, add links
notable layout change is that the text content will now try to center itself, and we push the buttons off to the right. we also needed to tweak the layout code a bit to get the buttons to feel centered with the top two lines, bc centering against the full block just feels wrong, they want to be top-y in terms of positioning, but still feel centered-y in terms of visual balance
2020-09-20 20:10:26 -07:00
34112b30df add site title to left nav, move Modeling to right
Honestly I don't think this is the long-term home for the Modeling link, I think it'll become a homepage-only link as we add more modules there. But I wanted to get it out of the way!
2020-09-20 19:36:51 -07:00
abda9e4687 add a footer, move the dark/light toggle to it 2020-09-19 22:10:52 -07:00
dc785b063e remove detailed gql from honeycomb traces
This wasn't actually super helpful to read anyway, and I think it was causing us to hit rate limits.

We can maybe add back a limited version to like, add path context of _where_ a span happened in the GQL tree, but like, I feel like that's typically been pretty intuitive so far.
2020-09-19 21:34:35 -07:00
dfeeb9fe0d modeling will save new item data (but not assets)
just a first step!
2020-09-18 07:34:41 -07:00
07691a4e6b add basic test db infra
Boom, now we can also run a clean MySQL test db on each test that wants it :)

the test I wrote as a sample is currently marked `it.skip` because it's not passing yet!
2020-09-18 05:50:17 -07:00
fa8de52d81 scroll to top on navigation 2020-09-15 05:35:01 -07:00
8e97355499 smooth out the skeleton fades a bit more 2020-09-15 05:29:28 -07:00
956580c651 avoid skeleton flash-of-content on item page 2020-09-15 05:20:10 -07:00
496e2e9550 tweaks to item page description loading delay
make it 2 lines when embedded, and also add a Delay, bc prod is much faster to load this and it's annoying to see the flash!
2020-09-15 04:54:37 -07:00
02cb4731d3 use min width to stop date badge from resizing on load 2020-09-15 04:50:36 -07:00
ec0b80c0ca add NC badges to modeling page 2020-09-15 04:31:27 -07:00
c9f7f7a6bb sort new items to top of modeling & label 'em 2020-09-15 04:25:48 -07:00
ffeb494f45 add created at date to item page
this will help me notice which items are new! lol
2020-09-15 04:15:15 -07:00
57c0981472 ah oops, dont use syntax that prod doesn't support
right, dev supports `?.` syntax, but prod builds don't. I keep forgetting that!
2020-09-15 03:27:41 -07:00
2a30e8a6e5 show the special colors on the modeling page 2020-09-15 03:18:21 -07:00
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