Show Resource Cost for New Players - Screens + Scenarios

[samgawaran]

Summary

Adjusted the design based on Demi's feedback:
https://www.loom.com/share/78d019bd57ee4a7d8d5886e095b6ea87

• Build cost should be easily visible
• Show build cost title
• item name should be aligned left
• Make sure it won't intersect with dev cards
• can be closed so it won't clutter the in-game board

Research is done on the issue here: #205

EDIT: I updated the collapsible button based on the feedback on this thread

Screens

• Modified the build cost infobox based on the feedback on the loom
• both text and resource cards are aligned left. it looks much more organized this way. For context, this is how it looks like when text is aligned left while resource cards are aligned right (https://prnt.sc/IXqvd9bg2glj)
• for beginners, Show build cost will be opened in-game start
• show build cost only applies on base game

Scenarios

Trade

Dev Cards (Year of Plenty, Monopoly)

• placed in this position so it won't intersect with bigger dev card UI like monopoly and year of plenty

Related Submissions

• Show Resource Cost for New Players - Research & Studies  #205

Related Links

• Show Resource Costs For New Players #203

Submission Checklist

• This submission applies all of the checklists in the previous iteration
• Make sure the positioning of the build cost dropdown won't intersect with other elements in the board
  I ran and tested scenarios like clicking the knight, error messages and such and I saw that the devcard screen for both Year of Plenty and Monopoly has the biggest popup box so its what I considered in the scenarios
• This submission abides by Des-lvl-1, Des-lvl-2 & Des-lvl-3

Reviewers

@demiculus @JuanRoman77

[samgawaran]

Reference design submission for implementation issue. Will change this along with the implementation issue if there are any further feedback

[demiculus]

Moving the button here will save more space for the game screen. Do that. And create an implementation issue with it. https://i.imgur.com/uiV2UZJ.png