keep-starknet-strange / tsubasa

Tsubasa onchain game built with Dojo, running on a Starknet Appchain.
https://play.tsubasa.win
MIT License
59 stars 30 forks source link

Card design #5

Closed 0xLucqs closed 1 year ago

0xLucqs commented 1 year ago

Description

According to the game rules we need to design multiple cards (depending on the rarity). Each card will have at least:

Acceptance criteria

clicksave commented 1 year ago

Heres a rough wireframe of a card in 'preview mode. UI needs some attention but think this structure could work

If you have any specific comments that are difficult to communicate in a github reply you can leave them directly in the figma file

Card Preview

Clicking on the card brings it up in a preview page where we can expose some extra information about it.

image

Top Right: Energy Cost Bottom Left: Defense Bottom Right: Offense

Question: Do cards have abilities? Question: Should we start with a limited pool of cards for a demo? Thought: Maybe theres a way where we can determine the level of their attributes via their stats.


0xLucqs commented 1 year ago

Question: Do cards have abilities?

Not yet we start with a simple version and if we have enough time we can add them

Should we start with a limited pool of cards for a demo?

I think so, maybe 22 cards or something ?

Thought: Maybe theres a way where we can determine the level of their attributes via their stats.

Good question, worst case we can check the fifa stats

clicksave commented 1 year ago

OK Update. have a set of components that go into some of the different states. Ideally the attributes (dribble, defense, would be dynamic numbers rendered on top of the NFT its self. but check it out and let me know what you think.

image

For guidance on how I'm imagining these cards interact with the board, see this comment in the card design discussion

https://github.com/keep-starknet-strange/tsubasa/discussions/11#discussioncomment-6660892


Resources

Components

Patterns

hypekn1ght commented 1 year ago

these are lookin amazing

clicksave commented 1 year ago

Here's the set of final illustrations for the players, not sure if theres an ideal size, but can produce these larger and smaller if necessary

image

Players Final @1x.zip

clicksave commented 1 year ago

Updated the way we're surfacing attributes and introduced a 'Damaged' state

image

Damaged state is pretty straightforward. wanted to have a clearer way to show that a card has been hurt. Thinking here is that it'll

image

Resources

Card States Attribute Components

remiroyc commented 1 year ago

I can help to start the frontend integration of game card

remiroyc commented 1 year ago

65 should be merged before