onecrayon / ashes.live Goto Github PK

• All 1.0 site filters
• Listing URL for Reborn cards
• Listing URL for Legacy cards
• Responsive listing
• Responsive card hover logic
• Implement hovers for inline links (text that gets parsed currently does not get linked up for cards)
• First click opens hover details, second click navigates to the details page
• Implement details page (at least the bare bones card display logic)
• Implement Vuex for storing default view behavior (e.g. default to card view if that's what the user is using); persist to local storage?
• Persist filters through query strings

Images

After processing images and uploading to CDN, make the releases public in the database.

• Process images for master set
• Process images for Brennen and Rin
• Process images for Vickie and Leo
• Process images for Odette and Namine
• Process images for Echo, Astrea, and Koji
• Process images for Harold and Sembali
• Process images for Rimea and Xander
• Process images for Fiona and James

If the deckbuilder is open, the share buttons don't reveal the link that allows importing into TTS/Ashteki.

When a player has configured their collection, it would be cool to highlight cards they own vs. ones they don't in deck listings.

Haven't figured out exactly what triggers this, but I'm noticing it a lot on iPad.

Users need to be able to log in and manage their accounts.

• New global links immediately underneath the main header:
  • Anonymous options:
    • Log In => dropdown/modal with form accepting email/password that authenticates the user and stores their token via /v2/token
    • Sign Up => /players/new (or could also be a dropdown/modal similar to Log In) that creates invite request via /v2/players/new
  • Authenticated options:
    • Username#badge (link to account editing) => /players/me
    • My Decks => /decks/mine (placeholder, if this hasn't been implemented yet)
    • Log Out => perform store cleanup and remove user's stored token
• /players/new/{token}: Form accepting all options for /v2/players/new/{token} to allow user to create their account
• /players/reset: Link to just an email form that submits to /v2/reset (or this could be part of the Log In modal)
• /players/reset/{token}: password and confirm password fields that reset the user's password via /v2/reset/{token}
• /players/me: Main account editing page. Form controls to modify user info via /v2/players/me. Should have a link to a separate page or modal control for updating the user's password via /v2/players/me/password
• /players/{badge}: public player profile (or a basic stand-in for it)

Stuff that might need to be follow-up tasks

• Add some form of navigation guard so that trying to access a needsAuth page automatically shows the login modal and then takes you there after successful auth
• Add "remember me" checkbox for login once server supports that sort of thing
• Invalidate the user token when logging out, once server supports that

Currently if there are no eligible places for the Popper element to open that do not overlay the reference element, it will be placed in such a way that it overflows the page and causes a scrollbar (this is mainly an issue on mobile when the reference element is in the center of the screen; most easily triggered with cards that have conjurations on the card browser page). Per floating-ui/floating-ui#1202 we need a custom modifier that will instead shift the Popper element to overlay the reference element in this instance.

See https://popper.js.org/docs/v2/modifiers/#custom-modifiers for docs.

Not sure if this is affecting other browsers, but it's crazy annoying on Firefox.

Needs to be done, but pretty low priority at the moment. Includes listings and deck details page.

Or maybe one that shows the cards that will conflict between a set of decks.

For instance, see Undying Heart: https://ashes.live/cards/undying-heart/

We desperately need a toggle that will exclude cards from the card listing when the deckbuilder is open. Needs:

• Persist the value locally via the option store
• When the toggle is truthy, use mode=deckbuilder and include_uniques_for=Phoenixborn%20Name when fetching card listings to ensure that we don't get any conjurations, Phoenixborn, or other PB uniques
• When the toggle is truthy, disable and deselect the type options for conjurations (and Phoenixborn? If so, need to figure out how to allow access to this when they want to swap the PB)
• Don't show the toggle (or use its setting) when deckbuilder mode is not active

Don’t have a repro yet but scroll is getting permanently disabled on desktop, possibly when share box is open and tabbing to and from the page.

I'm not entirely sure how to go about this, but we need to trigger the scroll check for Card components after a newly filtered list of cards is loaded (because otherwise reused components end up without their images until the user scrolls).

Could we maybe watch the component's position on the page, and run a debounced scroll check when it changes? Needs research.

Tasks

• Update deck listings for "my decks" pages
  • Link to private deck details page for Reborn decks
  • Add "Edit" button to select a deck for editing in the builder
  • Add "Delete" button to completely delete the deck (pending support from API!)
  • Link to private deck details page for Legacy decks
• Design the Deck store
  • Should we allow persistent deck building? I think this is a really cool idea that would completely change how people use the site, but it might be a bit too much for the initial release. It would also decouple the deckbuilder from a URL structure. The downside is that the normal card browser isn't actually particularly appropriate for deckbuilding since you don't want things that you cannot add (like PBs, conjurations, and unrelated PB uniques).
• Implement the deckbuilder
  • Build slide-in component on right of page that shows the main deckbuilder interface when it's enabled
    • Animate in and out
    • Toggle visibility and ensure fit on all pages at all screen sizes
    • Ensure it works on mobile (and is anchored at the top of the viewport instead of the page, but still offers scrolling)
    • Edit title
    • Display Phoenixborn
    • Edit and display dice
    • Card listing (with quantity buttons)
    • Edit description
    • Export deck as plain text (port functionality from legacy site; important to have for basic Ashteki integration)
  • Card component
    • Button for adding or swapping a PB
    • Buttons for adjusting quantity for non-PB, PB uniques in deck, non-Conjuration cards
    • Fix shadow on card hovers when quantity buttons are attached (see upper right corner)
  • Card table listing row
    • Button for adding or swapping a PB
    • Buttons for adjusting quantity for non-PB, PB uniques in deck, non-Conjuration cards
  • Card detail page
    • Button for adding or swapping a PB
    • Buttons for adjusting quantity for non-PB, PB uniques in deck, non-Conjuration cards
• Replace deck in the deckbuilder with another deck
• Figure out how to debounce edits to the deck such that we can make a bunch of edits really quickly, but only have a single save request sent

Follow-up tasks:

• Clone decks
• Generate snapshots (including public snapshots) and snapshot viewing support
• Tools to export to TTS/Ashteki
• First Five and effect cost picker and stats generation; should this be a standalone page? And maybe make this a follow-up task, since it isn't critical to using the deck-builder

Notes

First Five controls need to be integrated into the standard deck view page. That way we can persist the changes we make to the currently-edited deck, allow people to publish suggestions for their public snapshots, and most importantly allow playing around with alternate First Fives for random public decks (without persistence).

Snapshot history view needs to provide a "diff" between any two consecutive snapshots (so that you can see at a glance what was added or removed). Should it be possible to copy an entire snapshot from the history into the currently edited deck?

Allow cloning arbitrary decks. I'm not sure if this needs to be something supported on the backend, or if I should just do it all on the front-end. Kind of on the fence over whether I want to maintain access to source decks for clones, or just call it good with cloning the current card list and losing the source deck link.

This only applies to the public deck listing (doesn't make any sense for user decks, because outside the admin user they will never return anything).

I need new elements under the navbar (right or left? Currently thinking left, to align with "Decks" item):

• Login / account name (linked to account settings page)
  • Login modal
  • Account settings page
• My Decks
  • List of all private decks, using same layout and controls as the public decks listing page; see #4
• Log out?

These are all exhibited in Firefox on mobile (but that's just Webkit behind the scenes).

• Tapping a card opens the hover but it's positioned wrong (until you scroll the page, then it jumps to the right position).
  • Seems to be a sizing problem; the thing hasn't figured out how big it needs to be when it first shows up, and so it's maximum width/height Might resolve by adding a default height to the images prior to their loading.
• Infinite scrolling behavior jumps to the top of the page when the scroll completes (which is super frustrating)
• Tapping while a card detail is shown does not trigger the click event and the detail remains open; does touch not support events that aren't bubbling?
  • Using touchstart for the close event on document doesn't work
  • Using mousedown on document doesn't work. Clicks/taps are happily getting processed regardless of whether the events get canceled or not
• Unloaded images in binder view apparently do not have a default height set, because they're way too big
• Scroll events do not trigger until the scrolling has stopped which means that images don't load properly and the infinite scrolling is pretty sluggish

Visiting Harold's card, there is no card text. This is because an error is thrown, likely to be due to a parsing error due to the the card Hunter's Mask and its apostrophe.

I'll be happy to have a look soon (likely tomorrow).

Has bonus words right now

The player profile page needs to be expanded. This needs to be based off the features/decks branch. Here's the basic tasks, all of which apply to src/components/players/PlayerPublicProfile.vue:

• Implement filtered deck listing using standard src/components/decks/DeckListing.vue component
• Implement control (or link) to swap between legacy and Reborn decks (I have no specific design in mind for this; the deck and card pages are currently just using paragraphs with links, but I would be happy to see something nicer for this page, particularly since it's more of an inline thing). Should persist either through a /legacy/ URL suffix similar to the cards and deck pages, or via query string. Up to you.
• Move description to the sidebar (should collapse to a single column layout at smaller screen sizes), and test deck listing to ensure it works in a sidebar layout. You may need to add a property or something that lets the deck listing know it's in a constrained width environment or something so that the styles inside the component can be adjusted as needed. I'm not sure if this will be necessary or not, as I haven't tested it outside of full width scenarios.

Some things to note:

• The example data only contains a single user whose profile is visible at /players/3000. You can log in as this player using the email [email protected] and password changeme.
• Like all other pages with a deck listing, pagination and similar should persist through the querystring

It doesn't currently behave like a dropdown dialog even though it looks like one.

Searching for a card using the text box often submits before I finish 'typing'. And then doesn't match the cards on the partial word entry.

More of an issue on mobile than keyboard

Right now the interface makes it seem like the "show summons" button is an OR comparison like the rest of the types, but it's actually an AND comparison in addition to the types. Need to refine the UX to make this clear.

Dijon requested being able to use binder view for decks. I need to evaluate whether this would play nice with my plans for first five components, but if so it should be a relatively trivial change.

• Add filter button that darkens when a filter other than "all" is selected
• Add popover when clicking filter button
  • Filter by all or mine
  • Toggle "deckbuilding mode" (need a better name for this); only available when the deck editor is open, but will cause only cards you can actually put in your deck to show up in the listing
  • When filtering by all: allow selecting arbitrary releases (update query string!)
  • When filtering by mine: allow updating the user's collection with the same interface as selecting individual releases
• Add sorting logic by release

Notes:

Load the list of releases/collection when the user opens the interface element (no need for it on page load--unless maybe when they have a query string with releases? Or maybe just pass those through).

Should the popup interface element completely replace the "all" vs. "mine" filter? Since you could change its behavior by toggling whether you're showing your collection or filtering by all releases, which would imply the use of the filters (downside is you couldn't see at a glance which cards were showing in the filter bar).

Note: This task is paused at the moment because the API doesn't have support for deck cloning, and I've yet to decide how to handle preconstructed decks (might just make this a filter or a standalone page).

I need to build this out with more detail, but generally I need:

• Public decks listing page
  • Filters at the top (persisted to query string)
  • Reverse chronological listing of all published decks
• Deck details page
  • Full deck information to match the legacy site
  • New full size Phoenixborn images for all PBs

Currently parallel costs (often referred to as "split costs" in the codebase) are not accessible because the only indication that it's a parallel cost is the special styling. We need to expose text for these (preferably an "or" between the costs) that's hidden from normal visuals but available to screen readers.

Title element on a common ancestor instead of on the individual elements? Actual "or" text similar to the way dividers work? Something else?

This can be based off the main branch; it shouldn't conflict with any of the recent work on the decks support.

Until the image loads, the placeholder div for it is way too big on mobile. Need to make sure the height is constrained for binder view.

I'm thinking maybe I'll start with just publishing (with private snapshots to come), since you can't view private snapshots yet, anyway. Downside to that is that we really need private snapshots to make the "share link" feature work properly, but again you need to be able to view them for that, so...

Standalone page? Mode for the deckbuilder sidebar?

This involves expanding the basic component src/components/shared/TextEditor.vue.

• Port Content Policies from legacy site to a root-level static page/component; legacy code at https://github.com/onecrayon/ashes.live-legacy/blob/master/app/templates/content-policies.html
• Add link that opens the content policies in a modal (?) or alternately a target="_blank" link to force a new tab below the editor box in small font
• Add a help icon below the box that opens a modal with information on card codes and star formatting. Original legacy code here (for reference; it's not a straight port): https://github.com/onecrayon/ashes.live-legacy/blob/master/app/static/src/app/components/text_editor.vue
• Add helpers above the text area that automatically add card codes and star formatting
  • Legacy component: https://github.com/onecrayon/ashes.live-legacy/blob/master/app/static/src/app/components/textarea_helpers.vue
  • Legacy "act on text" logic: https://github.com/onecrayon/ashes.live-legacy/blob/master/app/static/src/base/textarea_helpers.js

Notes

The TextEditor component is introduced in my features/accounts branch; if that's been merged in, then it will be in the features/decks branch.

The legacy formatting helpers had the downside of breaking undo: prior to undertaking this task, it would be worth researching if there is a more modern way of doing this that supports undo.

The help information (and possibly content policies, if you go the modal route) will be the longest contents that the top-oriented modal has had to deal with yet. It will likely require better scrolling handling (some things to worry about: can we disable the body's scrolling/scrollbar? Can we enable scrolling just in the modal while the modal is open, if it hits the full height of the screen? How can we close the modal on mobile devices if it fills the entire screen--maybe add a close button at small sizes?).

Browser: Firefox, Firefox Mobile Emulator
Devices: Android, Desktop

Clicking a linked card within a card popup on mobile doesn't navigate and instead dismisses the popup. The links function as intended when I request the desktop site on mobile, so I suspect it is something with how specific event types are handled.

Update:

This doesn't seem to be a mobile-only issue, but more an issue of attempting to open a preview within another. The same behavior is exhibited on desktop when you hover over a link within a popup.

Add a new section under the resources for media on the homepage:

• Add links for the Plaid Hat and Side Action podcasts; Side Action link: https://soundcloud.com/user-489430998/tracks
• Add links to Shufflebus media resources
• Any others? Maybe go through the Discord media channel to see if anyone else is regularly posting content that would be worth linking to

I need snapshot management UI once private snapshots are supported on the API. High level goals:

• Diff view (view colorized changes between two snapshots; select arbitrary? The snapshot you're viewing and the previous one? Something else?)
• Revert to a particular snapshot (maybe optionally creating a private snapshot from the current deck)
• Easy access to share links for snapshots
• The snapshot history view needs to work for public snapshots attached to published decks, too.

Progress

• Edit button and modal for snapshots
• History/snapshot listing for decks
  • Basic listings for public and private snapshots
  • Pagination/endless scrolling
  • Easy access to share link for snapshots from history listing

Next steps: #105

Newline is mistyped

During the draw cards step, you may draw 1 additional card.]n : Look at the top 2 cards of a target player's draw pile. Place 1 of those cards on the bottom of that draw pile, and the place the other card on the top of that draw pile.

A user reported that the "sign up" form showed a success message, but didn't actually trigger an email send when using mobile, but did work on the desktop. Need to try and reproduce.

This should be handled like the rest of the deck listing filters; i.e. should automatically be applied if loading the page with it in the URL, and should add/remove when the toggle is flipped. I'm torn on whether it should have a value or just be ?preconstructed. Probably depends on whether having a boolean without a value in the query string works well or not.

• Output the URL in the export modal (including button to copy with a single click)
• Include a warning when the share URL is for the most-recent saved copy of the deck
• Add a page at /decks/share/{uuid}/ that outputs privately shared deck information (reuse DeckDetails? Though we don't have release information and similar)

The sizing is completely wonky in list view. Need to revisit this layout when the deckbuilder is open to ensure that everything is shunted to its own line or something.

The backend now supports cloning decks viewed via the direct_share_uuid if you pass it through as a query string in the clone request. We need to add support for this for private share pages.

I need to implement an interface for selecting First Fives, viewing stats about the deck's costs, etc. High level goals:

• Needs to be generic (so that you can use it in the deckbuilder and for arbitrary decks that you view around the site)
• Needs to allow saving a first five with a snapshot
• Needs to support loading default first five with the public deck, but then allow the user to mess with it as much as they like
• Port all stats from the legacy site that still make sense
• Implement my new average draw-based calculation of ideal dice spreads, preferably with some sort of comparison visual (e.g. first five requirements vs. average draw requirements vs. repeating costs vs. actual dice in deck)

I didn't do this originally, because I like the idea of starting to edit a deck and immediately being able to add whatever cards grabbed your fancy in your current context. However, multiple people have been confused about how to add cards to a deck, so there's clearly a UX problem here (or it might be an overwhelmingly common use-case).

Once decks are published, I need to poll folks to see how people are using the deckbuilder and evaluate whether it should automatically open the card browser.

shows 1, should be 0

https://discord.com/channels/356912698451296276/752956497947787404/818592350213242890

If you filter by something on the deck listing page, then click the Decks link in the header, the page does not clear the filters properly.

I think Tailwind/PurgeCSS is stripping out the toast styles; need to mark these as protected somehow.

I really don't like having an external CDN call for this. It needs to be in the project itself, preferably only including the SVG icons that are needed to cut down on the filesize.

This is likely happening for decks that have been created, but never closed from the deck-builder (since it shows up for decks that you edit from the "my decks" list).