search

nkzw-tech / athena-crisis

Athena Crisis is an Advance Wars inspired modern-retro turn-based tactical strategy game. Athena Crisis is open core technology.
https://athenacrisis.com/open-source
Other
1.37k stars 105 forks source link

Improve PlayerCard UI #38

Closed sookmax closed 1 month ago

sookmax commented 1 month ago

Related to the discussions: https://github.com/nkzw-tech/athena-crisis/pull/34#issuecomment-2141532150, https://github.com/nkzw-tech/athena-crisis/pull/34#issuecomment-2141675890

I added flex-shrink: 0; to fundStyle and I hope it's okay..? since if I don't have it, the collapsed UI would look like:

Screenshot 2024-05-31 at 10 11 19 PM

whereas if I have flex-shrink: 0;:

Screenshot 2024-05-31 at 10 11 03 PM

And when the card is expanded, the data is arranged in a way that the funds (funds & funds per turn) are left-aligned and all the other info (which is wrapped in a <Stack>) is right-aligned:

Screenshot 2024-05-31 at 10 05 31 PM

Lastly, the added condition to the winConditions.filter()—!condition.completed?.has(player.id))—ensures that optional objectives are not shown on the screen once completed.

P.S. Sorry, the generated diff looks very unintuitive 😅

cpojer commented 1 month ago

Thank you! I removed the key props since they aren't necessary in those two places.

sookmax commented 1 month ago

Ah right, the funds and the other info are not the same level anymore! Thanks 😁