Open 0xLucqs opened 1 year ago
clicksave
commented
1 year ago Deck Builder
Made this as simple as I could. Allows you to construct a deck from cards in your Sorare collection. Only supports a single deck atm but that can easily be expanded. Cards are dragged from your collection (right side) to your deck (left side). When satisfied players can click Play to find a match.
ayushtom
commented
1 year ago I can pick this if no one has picked this up yet for FE. @LucasLvy
Calebux
commented
1 year ago Can i also work on this @LucasLvy
clicksave
commented
1 year ago OK, apologize in the delay updating this, there were a few details I needed to work out but we have a deck builder. both mobile and responsive compositions.
https://github.com/keep-starknet-strange/tsubasa/assets/3332646/028ec1b1-8ae3-4feb-8256-82c577652579
States
There are a few different renderings of this page, see below.
Logged out If the user is logged out we do not know much about them so there is an empty state that appears that reinforces the primary action on the page 'Log In'
Clicking this button brings up a wallet selector (if we want to support multiple wallet providers) or it can take you directly to the argent web app. If we want to support bravos and need a custom modal for this lmk.
(i stole the above design directly from briq's sign in flow)
Logged in (without cards)
We need a way to get cards into peoples hands. easiest way to do this is to show them a 'get cards' button which is what i've done. this empty state is nearly identical to the 'Logged out' one
You'll notice a few other elements that get introduced after a player logs in
[ ] Copy 'You don't have any cards'
[ ] Player button (icon, wallet address, stark domain if possible)
[ ] Card deck counter
Logged in (with cards)
OK so the user has cards now. This is great they can start building their deck.
Think it makes sense two support two separate ways to do this.
Dragging and Dropping
Note that the card slots in the deck section have an 'emphasis' state. When hovering over one of the deck slots with a card the emphasis state should be active
Adding manually
Clicking on a card opens a preview that reveals details about the card, a larger image, and the following buttons
Once a card is added the deck counter increments up
and the card appears in the selected cards section
The first card you add becomes a captain and appears in the designated captain slot (far left on desktop) (top left on mobile)
Sorting & Filtering
Not a critical feature, and i need to design the selector for this but it would be a nice QOL improvement and could help users sort cards by (Team, position, energy cost, dribble, offense, etc.)
Completed Deck
Once the deck is completed a couple of things happen
Note: that when cards are added the disappear from the catalogue of available cards. i.e. a card only appears in one place on the screen
Clicking play takes you to matchmaking (I need some guidance on how this can work, but I think it can be a simple screen or overlay)
Responsive Designs
Mobile iterations of these pages exist and are pretty 1:1 with their desktop counterparts.
Resources
Components (if you need an intro to figma components i.e. where to find all the different pieces specifically lmk)
Description
According to the game rules we need to design a page where each player can create his deck. We need something balanced between intuitive and easy to design/integrate.
Acceptance criteria