feat(frontend): add card component

remiroyc commented 1 year ago

Fix #5

vercel[bot] commented 1 year ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
tsubasa	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 19, 2023 10:57am

remiroyc commented 1 year ago

cc @clicksave @LucasLvy

1 - Related to this question https://t.me/TsubasaStarknet/489 The card has a set size determined by the developer based on context (size param "xl", "lg", "md", "sm", "xs"), rather than being tied to the screen resolution. Sample: https://tsubasa-git-fork-remiroyc-feat-card-keep-starknet-strange.vercel.app/cards what do you think?

2 - Where do you plan to save player images? I don't know if you've generated the complete collection yet. In my view, this should be addressed in a separate issue. For the time being, I recommend creating cards without player images, similar to some of the cards in my link.

0xLucqs commented 1 year ago

There is a problem in the star placement i think

clicksave commented 1 year ago

cc @clicksave @LucasLvy

1 - Related to this question https://t.me/TsubasaStarknet/489 The card has a set size determined by the developer based on context (size param "xl", "lg", "md", "sm", "xs"), rather than being tied to the screen resolution. Sample: https://tsubasa-git-fork-remiroyc-feat-card-keep-starknet-strange.vercel.app/cards what do you think?

2 - Where do you plan to save player images? I don't know if you've generated the complete collection yet. In my view, this should be addressed in a separate issue. For the time being, I recommend creating cards without player images, similar to some of the cards in my link.

Nice! these are looking great. particularly on the larger versions of the cards. Awesome to see them in the different sizes. Feels good. Am noticing a few things that could be improved

[ ] Border feels heavier than it is in the mockups. Currently 4px -> ideally: 2px
[ ] Captain star should be center aligned in the container and the container should be vertically center aligned to the top of the card.

[ ] Background shape of the energy cost component could scale better. There should be more padding on smaller sizes

[ ] Seeing some weird clipping on the drop shadow for the attribute components

[ ] Border radius on the attribute components is too aggressive at smaller size. it should be less intense as the cards get smaller

[ ] The attribute component has some padding issues at smaller sizes too. Icon is too close to the bottom edge

[ ] the position of the attribute component on the card is a bit different than the mockups at smaller sizes. It should be closer to the edge. this property is variable depending on the card size

[ ] The image border radius and the card border radius should be the same, atm theres a discrepancy between them and you can see the background

[ ] Would prefer to use a vector for this tsubasa holographic thing than a png, I think we can also just remove it if that feels like too much

Here's a link the the finalized illustrations

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

0xLucqs commented 1 year ago

There is a g at the top of the frame, seems like it's not present on the main branch, can you remove that plz ?

remiroyc commented 1 year ago

cc @clicksave

keep-starknet-strange / tsubasa

feat(frontend): add card component #59