OpenNeo/impress
OpenNeo/impress
1
0
Fork 1
Code Pull requests Activity
impress/app/views/items/sources.html.haml

83 lines
2.7 KiB
Text
Raw Normal View History

Add bare-bones Item Getting Guide page TNT requested that we figure out ways to connect the dots between people's intentions on DTI to their purchases in the NC Mall. But rather than just slam ad links everywhere, our plan is to design an actually useful feature about it: the "Item Getting Guide". It'll break down items by how you can actually get them (NP economy, NC Mall, retired NC, Dyeworks, etc), and we're planning some cute actions you can take, like shortcuts for getting them onto trade wishlists or into your NC Mall cart. This is just a little demo version of the page, just breaking down items specified in the URL into NC/NP/PB! Later we'll do more granular breakdown than this, with more info and actions—and we'll also like, link to it at all, which isn't the case yet! (The main way we expect people to get here is by a "Get these items" button we'll add to the outfit editor, but there might be other paths, too.)
2024-05-06 20:37:59 -07:00
- title "Item Getting Guide"
%h1#title Item Getting Guide
Split Item Getting Guide between NC Mall items and Other NC items This'll affect the recommended acquisition method by a lot! NC Mall info like current price isn't surfaced anywhere else in the app right now. It'd probably be good to add to the item page, and maybe some other places too!
2024-05-14 00:09:27 -07:00
- if @nc_mall_items.present?
%h2 NC Mall items
Write more and better descriptions for Item Getting Guide Not sure if these are final, but they certainly help communicate what the heck we're doing here!
2024-05-14 17:41:05 -07:00
:markdown
Add more info to NC Mall section of Item Getting Guide NC prices, some CSS, and also a new application-level helper that adds a feature I've long wanted and been working around for Turbo: the ability to specific that a stylesheet is specific to the current page, and should be unloaded when removed! I use this to write `sources.sass` without the usual `body.items-sources` scoping that we've historically used to control what pages a stylesheet applies to. (In the long past, this was because a lot of stylesheets were—and still are–routed through the `application.sass` stylesheet! But even for more recent standalone page stylesheets, I've done the scoping, to avoid issues with styles leaking beyond the page they're meant for when Turbo does a navigation.)
2024-05-14 16:03:35 -07:00
These items are available in the NC Mall right now! You can buy them
Write more and better descriptions for Item Getting Guide Not sure if these are final, but they certainly help communicate what the heck we're doing here!
2024-05-14 17:41:05 -07:00
with Neocash, a special currency you can [purchase directly][nc]
from Neopets or redeem via [gift cards][gc].
[nc]: https://secure.nc.neopets.com/get-neocash
[gc]: https://secure.nc.neopets.com/nickcash-cards
Use table layout for Item Getting Guide item list This helps us be more efficient with our use of space, keep the CTAs well aligned, show a clear total, and set up how we might do CTAs for more complex cases like all the potential Neopoint CTAs like Wiz/Trades/Auction/etc!
2024-05-20 15:23:34 -07:00
%table.item-list
%thead
%tr
%td
%th
Total: #{@nc_mall_items.map(&:current_nc_price).sum} NC
(#{pluralize @nc_mall_items.size, "item"})
Refactor and simplify Item Getting Guide item list CSS a bit Notably, we're renaming `.add-to-cart-cell` to `.actions-cell`, in preparation for other potential actions in other categories!
2024-05-20 16:15:46 -07:00
%td.actions-cell
%button{onclick: "alert('Todo!')"}
Use table layout for Item Getting Guide item list This helps us be more efficient with our use of space, keep the CTAs well aligned, show a clear total, and set up how we might do CTAs for more complex cases like all the potential Neopoint CTAs like Wiz/Trades/Auction/etc!
2024-05-20 15:23:34 -07:00
Buy all in NC Mall
%tbody
- @nc_mall_items.each do |item|
%tr
%td.thumbnail-cell= item_thumbnail_for(item)
%td= item.name
Refactor and simplify Item Getting Guide item list CSS a bit Notably, we're renaming `.add-to-cart-cell` to `.actions-cell`, in preparation for other potential actions in other categories!
2024-05-20 16:15:46 -07:00
%td.actions-cell
%button{onclick: "alert('Todo!')"}
Use table layout for Item Getting Guide item list This helps us be more efficient with our use of space, keep the CTAs well aligned, show a clear total, and set up how we might do CTAs for more complex cases like all the potential Neopoint CTAs like Wiz/Trades/Auction/etc!
2024-05-20 15:23:34 -07:00
Buy (#{item.current_nc_price} NC)
Add bare-bones Item Getting Guide page TNT requested that we figure out ways to connect the dots between people's intentions on DTI to their purchases in the NC Mall. But rather than just slam ad links everywhere, our plan is to design an actually useful feature about it: the "Item Getting Guide". It'll break down items by how you can actually get them (NP economy, NC Mall, retired NC, Dyeworks, etc), and we're planning some cute actions you can take, like shortcuts for getting them onto trade wishlists or into your NC Mall cart. This is just a little demo version of the page, just breaking down items specified in the URL into NC/NP/PB! Later we'll do more granular breakdown than this, with more info and actions—and we'll also like, link to it at all, which isn't the case yet! (The main way we expect people to get here is by a "Get these items" button we'll add to the outfit editor, but there might be other paths, too.)
2024-05-06 20:37:59 -07:00
- if @np_items.present?
%h2 Neopoint items
Write more and better descriptions for Item Getting Guide Not sure if these are final, but they certainly help communicate what the heck we're doing here!
2024-05-14 17:41:05 -07:00
:markdown
These items can be purchased with Neopoints. For less-expensive items,
check the [Shop Wizard][wiz] first. Otherwise, try the
[Trading Post][tp] or [Auction Genie][ag]. Dress to Impress doesn't
track Neopoint item prices, but other fansites do!
[wiz]: https://www.neopets.com/shops/wizard.phtml
[tp]: https://www.neopets.com/island/tradingpost.phtml?type=browse
[ag]: https://www.neopets.com/genie.phtml
Use table layout for Item Getting Guide's NP items section As part of this, I added a new `search_icon` helper, and a new `button_link_to` helper, which both styles the link as a button and accepts an `icon` parameter to make it easier to pass in an icon!
2024-05-21 18:03:00 -07:00
%table.item-list
%thead
%td
%th{colspan: 2}
Total: #{pluralize @np_items.size, "item"}
%tbody
- @np_items.each do |item|
%tr
%td.thumbnail-cell= item_thumbnail_for(item)
%td= item.name
%td.actions-cell
= button_link_to "Shops", shop_wizard_url_for(item),
target: "_blank", icon: search_icon
= button_link_to "Trades", trading_post_url_for(item),
target: "_blank", icon: search_icon
Add bare-bones Item Getting Guide page TNT requested that we figure out ways to connect the dots between people's intentions on DTI to their purchases in the NC Mall. But rather than just slam ad links everywhere, our plan is to design an actually useful feature about it: the "Item Getting Guide". It'll break down items by how you can actually get them (NP economy, NC Mall, retired NC, Dyeworks, etc), and we're planning some cute actions you can take, like shortcuts for getting them onto trade wishlists or into your NC Mall cart. This is just a little demo version of the page, just breaking down items specified in the URL into NC/NP/PB! Later we'll do more granular breakdown than this, with more info and actions—and we'll also like, link to it at all, which isn't the case yet! (The main way we expect people to get here is by a "Get these items" button we'll add to the outfit editor, but there might be other paths, too.)
2024-05-06 20:37:59 -07:00
- if @pb_items.present?
%h2 Paintbrush items
Write more and better descriptions for Item Getting Guide Not sure if these are final, but they certainly help communicate what the heck we're doing here!
2024-05-14 17:41:05 -07:00
:markdown
These items are part of a paintbrush set. Once you paint your pet,
these items will be semi-permanently added to your Closet, even if your
pet changes color again! You can use this to mix-and-match styles for
"cross-paint" outfits.
Add bare-bones Item Getting Guide page TNT requested that we figure out ways to connect the dots between people's intentions on DTI to their purchases in the NC Mall. But rather than just slam ad links everywhere, our plan is to design an actually useful feature about it: the "Item Getting Guide". It'll break down items by how you can actually get them (NP economy, NC Mall, retired NC, Dyeworks, etc), and we're planning some cute actions you can take, like shortcuts for getting them onto trade wishlists or into your NC Mall cart. This is just a little demo version of the page, just breaking down items specified in the URL into NC/NP/PB! Later we'll do more granular breakdown than this, with more info and actions—and we'll also like, link to it at all, which isn't the case yet! (The main way we expect people to get here is by a "Get these items" button we'll add to the outfit editor, but there might be other paths, too.)
2024-05-06 20:37:59 -07:00
= render @pb_items
Split Item Getting Guide between NC Mall items and Other NC items This'll affect the recommended acquisition method by a lot! NC Mall info like current price isn't surfaced anywhere else in the app right now. It'd probably be good to add to the item page, and maybe some other places too!
2024-05-14 00:09:27 -07:00
- if @other_nc_items.present?
Write more and better descriptions for Item Getting Guide Not sure if these are final, but they certainly help communicate what the heck we're doing here!
2024-05-14 17:41:05 -07:00
%h2 Neocash items (Capsules, Dyeworks, events, retired, etc.)
:markdown
These items are part of the Neocash economy and can't be purchased with
Neopoints. We don't track all the details of how to get these items
right now! Sometimes they're available via packs or capsules or events
in the [NC Mall][mall]. Sometimes they're retired and can't be
purchased at all anymore, and can only be obtained via gifts or trades.
[mall]: https://ncmall.neopets.com/
Split Item Getting Guide between NC Mall items and Other NC items This'll affect the recommended acquisition method by a lot! NC Mall info like current price isn't surfaced anywhere else in the app right now. It'd probably be good to add to the item page, and maybe some other places too!
2024-05-14 00:09:27 -07:00
= render @other_nc_items
Add more info to NC Mall section of Item Getting Guide NC prices, some CSS, and also a new application-level helper that adds a feature I've long wanted and been working around for Turbo: the ability to specific that a stylesheet is specific to the current page, and should be unloaded when removed! I use this to write `sources.sass` without the usual `body.items-sources` scoping that we've historically used to control what pages a stylesheet applies to. (In the long past, this was because a lot of stylesheets were—and still are–routed through the `application.sass` stylesheet! But even for more recent standalone page stylesheets, I've done the scoping, to avoid issues with styles leaking beyond the page they're meant for when Turbo does a navigation.)
2024-05-14 16:03:35 -07:00
- content_for :stylesheets do
= page_stylesheet_link_tag "items/sources"
Copy permalink