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

We'll schedule a meeting with Starkware/Dojo/Designer to validate the design

Jul 28 '23 09:07 0xLucqs

Here's a link to the figma

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.

Jul 30 '23 07:07 clicksave

I can pick this if no one has picked this up yet for FE. @LucasLvy

Aug 02 '23 12:08 ayushtom

Can i also work on this @LucasLvy

Aug 03 '23 16:08 Calebux

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
[ ] Manually via an 'Add to Deck' button

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

[ ] Add to Deck
[ ] Make Captain

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)

[ ] This also determines the users PFP illustration

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.)