Adding Roads, Player Cards, and Resource-Based Coloring to the Board

TLDR

Adding “Road” pieces to the board, adding player cards to the board, coloring hexagons and player cards based on resource type and color, respectively.

Main work

• Adding some game and player state to the application and doing conditional styling, such as coloring hexagons based on the “resource” they are.
• Laying out player cards, which are also conditionally styled based on state.
• Adding the “Road” pieces that make up a third grid of pieces that need to be layed out / maintained.
• Refactoring Settlements, Centers, and Roads into proper Angular components. Hoisting game state to the top level Board component.

Challenges

• More geometry to handle when layout out angled rectangular roads.
• Deciding on how state should be passed down from the top-level Board component to each new grid system or child component.
• Choosing a naming convention or data structure for representing game state.

Learnings

• ChatGPT is fantastic for doing display: flex; layouts. Natural language like “create a row with three columns of equal size” lets my brain focus on more important problems.
• Even a small number of pixels can make layout look wonky. Using CSS / TypeScript calculations can round weirdly.
• When to quit tweaking UI. Once application is functional, a holistic approach to color scheme and layout refinement is more efficient than constant piecemeal tweaks.