1
0
Fork 0
forked from OpenNeo/impress
Commit graph

621 commits

Author SHA1 Message Date
1d36e60df9 Remove now-unnecessary extra header on Modeling Hub page 2024-09-09 19:06:19 -07:00
a14c4fca48 Remove needed items form on Modeling Hub
I think this has just been broken for a long time? And I don't think
it's very useful in a world 15 years later, where our problem *used* to
be giant gaps in our library, which isn't really our data problem
anymore.
2024-09-09 18:56:39 -07:00
a315282b70 Extract all the item pages' stylesheets into their own CSS files
No more of this loading everything into `application.css`! I'm
arbitrarily starting here because that's where I've been playing
lately, but this is part of a larger effort to move toward a more
straightforward CSS architecture (and away from Sass even?)
2024-09-09 18:48:08 -07:00
38b2bad044 Include application stylesheet first, so other styles override it
Ran into a funny thing on an upcoming change, where a style on the
page-specific stylesheet was getting undone by the *CSS Reset* of all
things in the application stylesheet. Resets come first!

I haven't audited that I didn't break a ton of stuff with this change,
but. I hope not! :)
2024-09-09 18:33:28 -07:00
d1ac66a80f Remove "Customize more" tooltip, now that the button shows it on hover 2024-09-09 16:13:35 -07:00
71ffb7f1be Add the slide-out "Customize more" label back to item preview button
I skipped this for a bit because I couldn't think of a simple way to
adapt this behavior to a web component + vanilla CSS setting, but then
I thought of CSS variables, and sat down and cranked this out!
2024-09-09 13:05:42 -07:00
c9f2d660bc Handle crash on new item page when SWF asset has no image available 2024-09-06 17:57:18 -07:00
96215c037a Add Customize More button back to item pages
Oh right, forgot about this lol!

The specific effect on Impress 2020 where the button label expands is,
kinda hard to implement in normal CSS/JS, and so I'm not in the mood
and I'm settling for the `title` attribute lol
2024-09-06 17:12:11 -07:00
3a18820d05 Oops, fix layout for error when item preview fails to load
Oh right, I need the error indicator to be part of a container that
also contains the outfit viewer, to appear below it!

I was motivated because I realized I forgot the Customize More button
so now I'm building it lol
2024-09-06 16:24:58 -07:00
5001a50a60 Add announcement about new item page, replacing the hidden Neopass one 2024-09-06 11:47:17 -07:00
6f08abc3aa Add html5 badge to new item previews 2024-09-05 18:48:41 -07:00
2e48376c5a Auto-submit the species color picker on change, for new item previews 2024-09-05 17:34:54 -07:00
6dd8e585a3 Add responsive layout for item page
We add a new `use_responsive_design` helper, for pages to opt into this
new CSS—mostly just because like… it's *worse* to apply these styles
for pages that don't expect it 😅

And then, I fix up a couple things on the item page (including in the
general items layout) to match!

I'm doing this because the species face picker layout is going to want
some responsive awareness, and I want to be doing that from the start!
2024-09-05 16:18:48 -07:00
9f44fd47e4 Add "No data yet" to species face tooltip when needed, in item previews 2024-09-03 17:27:43 -07:00
4c44f8d6a4 Fix species face picker going inert again after Turbo frame load
Here, I remember the trick I learned when building the outfit viewer:
web components are great for making sure stuff stays initialized well
in a Turbo environment!

The problem was, after submitting the form and getting a new preview
loaded via Turbo, the part where we remove `inert` would get undone.
Additionally, this script only loads *once* per session, so if you
Turbo-nav to a different item then that part of the page never ran.

Instead, we use web components to remove the attributes on mount, then
again if they're ever reapplied by Idiomorph.
2024-09-03 17:07:53 -07:00
2b2bffd9da Disable pet faces that the item doesn't fit, in new item previews 2024-09-03 16:42:04 -07:00
a184c75575 Handle noscript for the new species face picker
We mark the options as `inert` and `aria-hidden` while the JS is still
loading—and if the `noscript` tag tells us it's never coming, it covers
up the picker with a brief explainer!
2024-09-03 13:46:55 -07:00
c06c297174 Extremely lo-fi new species face picker for simplified item previews
The basics are working great! There's a few known missing things though:
- Add reasonable noscript behavior
- Disable options where there's no valid appearance
- Lay it out actually _good_, instead of just images dumped there
2024-09-03 13:30:12 -07:00
36f8efadbf Add more detailed zone occupy info to simplified item preview page
Adapting what the Impress 2020 UI does, but in Ruby instead!

I feel like this is case is really starting to show the power of doing
this stuff in Rails instead of via an API… we can *really* take
advantage of our models and our handy idioms at all points. This is
just so much less *code* than this feature takes in Node + GraphQL +
React.
2024-09-03 12:55:10 -07:00
bd62476722 Add basic zone info to simpler item previews
We're missing the feature where we enumerate the exact species in
ambiguous cases, though!
2024-08-31 13:11:50 -07:00
5cbab5a766 Merge branch 'main' into simpler-item-previews 2024-08-31 12:50:56 -07:00
1972ecf043 Use async instead of defer for analytics script
We had this issue on Impress 2020 and I fixed it over there too. I guess
it went less noticed here on Classic, because it's a more
progressively-enhanced site in general (and this failure case is an
interesting argument for that architecture! lol).

On Impress 2020, I wasn't sure if the "waits for the document to load"
behavior of the `defer` attribute was necessary to the script, so I
chose to keep `defer` but move it _after_ the other scripts.

This time, I dug in a bit more, and found a Plausible author saying
that the choice was kinda arbitrary; and another person who had the
same issue as me, who said they switched to `async` and it worked well.
So, that's what we're doing now, too!

https://github.com/plausible/analytics/discussions/1907#discussioncomment-2754499
2024-08-31 12:15:27 -07:00
af8dd42830 Add better support for hashed pet names
Closes #2, after making some tweaks to the PR to fit how JS templating
works here. Thanks @dice!!

I had to move `petThumbnailUrl` out of the closure, because this script
does a cute thing of having separate variable scopes for the separate
areas of the page—but this is used by two of them. Arguably it could
make sense to like, put this all in one larger shared IIFE closure that
wraps both of them, to preserve some of this code's intention of
avoiding adding to the global namespace on this page, but like.
*It's fine.*

Co-Authored-By: Steve C <diceroll123@gmail.com>
2024-08-31 12:07:52 -07:00
04ffc30e92 Remove SSW link, does not work on neopets anymore 2024-08-30 01:46:59 -04:00
b2b16a2edc Merge branch 'main' into simpler-item-previews 2024-07-09 14:26:47 -07:00
a007479f99 Link to the NC Mall homepage from the Shopping List
We were previously planning a more interesting "Add to Cart"
integration with TNT, but it hasn't panned out! For now, we'll just
link to the NC Mall homepage.
2024-07-09 13:30:28 -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
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
26954a3bf2 Restyle play/pause button for new item page preview 2024-07-08 17:23:38 -07:00
b03fee8c7e Save playing state to a cookie for the new item page preview 2024-07-08 16:27:38 -07:00
1aba4f405e Add hacky play/pause toggle to new item page preview
This doesn't do a good job maintaining state across morphs, but hey
it's Working At All in terms of wiring, and that's good!!

Also need to style up the toggle as a cute button instead of a visible
checkbox and the words "Play/pause"!
2024-07-08 13:43:28 -07:00
fcad7e2bc9 Add a clearer error indicator to new item page previews 2024-07-08 10:36:16 -07:00
059644f847 Improve the loading indicator for the new item page previews
Add some unobtrusive white background for contrast, show it when the
Turbo frame is loading too, add a spinner cursor, and fix a silliness
of how we put the `position: absolute` stuff into the component-y part
of the hanger spinner instead of this specific use case lol oops!
2024-07-07 21:32:41 -07:00
83eec2db60 Merge branch 'main' into simpler-item-previews 2024-07-07 21:11:32 -07:00
3f47f47ced Prevent analytics script delays from blocking other JS on the page
Oh oops, this is the first script on the page with the `defer`
attribute, which means it needs to run before other scripts with
`defer`—and in this moment, it's not loading for me, which means the
pages aren't working!

I assume Plausible told me to use `defer` rather than `async` because
it expects the page to be ready; okay! Let's just move this to the
very body of the `<head>` instead, so it isn't taking priority over
anything else.
2024-07-07 21:11:14 -07:00
6bc0c55000 Use our hanger loading spinner for the new item page previews
It's back, wowie! Also written up in a bit of a component-y way. Cute!
2024-07-07 19:05:48 -07:00
c8c4facb60 Fix styling for embed page for image-only SWF assets
This doesn't actually really matter, because this doesn't actually get
used in the app right now? But I figure, hey it's not hard to maintain,
let's just do it for consistency!
2024-07-06 12:52:00 -07:00
57c08b5646 Use "morphing" for smoother item page preview changes
The most notable thing here is that we keep the movie iframes running!
So if you're trying different pets for an animated item, the animation
keeps going while the new pet layers load alongside it.

This is also nice for like, the species/color picker form, so we're not
taking away input elements from people who depend on e.g. keyboard
focus.
2024-07-03 21:52:43 -07:00
97e6c39402 Load movies in iframe for new item page preview
Hey hey, it's working! Still stuff to add like pause/play, but yeah!
2024-07-03 20:29:04 -07:00
5b2062754d swf_assets/show action to embed a canvas movie in a sandboxed iframe
Not using this on the item page preview yet, but we will!

I like this approach over e.g. a web component specifically for the
sandboxing: while I don't exactly *distrust* JS that we're loading from
Neopets.com, I don't like the idea of *any* part of the site that
executes arbitrary JS unsafely at runtime, even if we theoretically
trust where it theoretically came from. I don't want any failure
upstream to have effects on us!

I copied basically all of the JS from a related project
`impress-media-server` that I had spun up at one point, to investigate
similar embed techniques. Easy peasy drop-in-squeezy!
2024-07-03 19:50:41 -07:00
81a58f8656 Extract outfit-viewer to a separate template
Just cuz this is gonna get more complex down the line!
2024-07-02 22:43:36 -07:00
76d2cc6c21 Add some data attributes to outfit-layer elements
This is mostly for debugging, the zone label especially, to just
eyeball what we're looking at!
2024-07-02 22:38:18 -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
857812610a Refactor outfit_viewer_layers helper to just be inlined into template
I forget what complexity was in here previously that made this make
sense before, but now it's just a loop, whatever!
2024-07-02 22:03:43 -07:00
74748acaaf Refactor more of item outfit preview into the Outfit class
This is a cute thing that I think sets us up for other stuff down the
line: move more of the outfit appearance logic into the `Outfit` class!
Now, we set up the item page with a temporary instance of `Outfit`,
then ask for its `visible_layers`.

Still missing restricted-zones logic and such, that's next!
2024-07-01 16:07:25 -07:00
054c809052 Put the new item preview in a Turbo frame
Nice, gotta say, this is a pretty neat way of making things feel more
app-y! There's some missing pieces here about like, loading state etc,
but the vibes are pretty good, and the implementation was dead-easy!
2024-07-01 15:35:58 -07:00
1b000189c4 [WIP] Add species/color picker for simplified item page preview
Still a lot missing here, like choosing the right default for Baby etc
items, and saving the user's preferences. But it's a start!
2024-07-01 15:35:58 -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
d5752eac2a Copy edits for Dyeworks in Item Getting Guide
I think the parens are silly now that this paragraph is just kinda all
bonus clarification info anyway. And I wanted to explain the cost
computation for the potions, and highlight the bundle thing!
2024-06-20 14:40:09 -07:00
302c116c8f Don't color PB shop/trade buttons purple in Item Getting Guide
I think it's clearer to just keep the purple meaning "NC", and in
particular "bulk NC Mall purchase"
2024-06-20 14:20:06 -07:00