TLDR
Frontend work. Created on click listeners for various board pieces. Added gradient coloring to Centers, which correspond to roll their probabilities. Updated look of player cards and included AvailableActions.
Note The cyan colored road is being hovered over during this screenshot.
Main work
- Refactoring parts of the
Settlement,Road, andCenterlogic to handle hover events.- Majority of effort was updating “unplayed” elements to still be rendered to DOM, but hidden. Original implementation did not add these elements to the DOM, so they could not react to hovers.
- Choosing a decent gradient from red to green that can be used to represent, for example, 6/8 rolls being more common than 2/12 rolls.
- Working with
display: flex;to make player cards responsive to resizing.
Challenges
- It was surpisingly difficult to hide elements with Angular, yet still have them react to hover events. I tried
[hidden]="this.isVisible"and(mouseenter)="onMouseEnter()"methods, but could not determine why elements still didn’t react to hover.- I ended up going with a
ngClass={ 'classOne': isVisible, 'classTwo': !isVisible }, which I think is a cleaner solution anyways. - Could be even cleaner if I looked into SCSS nested syntax to keep things DRY, but I need immediate gratification!
- I ended up going with a
- The complicated hexagon layout at the center of the page is not responsive, at the moment. Working with flex in traditional up/down/left/right directions is straightforward, but absolute positioning does not play well with flex.
Learnings
- Wasted some time trying to dynamically generate N different RGB colors between two given colors. It worked, but was unnecessarily complicated.
- Ended up using a color palette website to find 5 nice colors, then create a simple lookup table for numbers
1..12. Dead simple!
- Ended up using a color palette website to find 5 nice colors, then create a simple lookup table for numbers